I want to print my styles inline in head tag using php. I am almost finished, but I discovered that my styles are gone on IE8 (I assume that on earlier versions too). What I've found is that, the problem appears when 3 stylesheets are printed (no matter what order) - bootstrap.min.css, font-awesome.min.css and theme-style.css. Last one is from my template. When I comment one, or two of those, no matter which, then everything is working great (I mean the three selection above). Another fact is that if I link them, everything works great again.
Why do i need that? For increase my page speed.
Above I pasted my source from index.php. Example I published on my testing website where you can see how it is displayed.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<?php
$styles = '';
$styles .= file_get_contents('bootstrap.min.css');
$styles .= file_get_contents('theme-style.css');
$styles .= file_get_contents('font-awesome.min.css');
?>
<style type="text/css">
<?php echo $styles; ?>
.test1{color: #F00; background: #ccc;}.test2{color: #0F0;}.test3{color: #00F;}
</style>
<!--[if lt IE 9]>
<script src="/html5shiv/dist/html5shiv.js"></script>
<script src="/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="test1">
testing something
</div>
<div class="test2">
Lorem ipsum
</div>
<div class="test3">
John Doe
</div>
</body>
</html>
I dread answering this... But here goes...
Page Speed by Google is only an idea. It is a concept. It is not the reality of the internet. You can very much hurt your site by including the files into the index page. Why? Because in doing so you are increasing the size of the index page. It will be increased into so large a size that it requires multiple retrievals. In doing so you will introduce a problem instead of solving one.
When a browser asks your website for information several things happen. I am going to break them down into simple concepts.
Browser: Give me http://www.example.com
Server: Here is the index page:
Browser: I see I need to grab the page and it is 200K because the style sheets are part of the page. Give me the index page.
Server: Here you go:
Hops between the server and the index page: We see this data is big. We are going to break it into chunks. Three of them to be exact.
Browser: Oh, jeez! Wait.. wait... wait.. Okay, now I have all three chunks. Lets render what I have!
This is why Page Speed is NOT the end all to getting good results in Google. For an example look at your competition who have the results you are trying to achieve. They might have scores of 64, 78, 82, 90... And all of them, even the 64 in RED is beating you in the results of a search.
What you could achieve is user experience that gets them to keep coming back which is probably why your competition with a 64 score is beating you.
What he is doing:
Browser: Give me index page.
Server: Here you go, but it has the style sheets linked and same with javascript.
Browser: No problem! Since they are all separate I will request them all at the same time: index.php, file1.css, file2.css, file3.css, javascript.js
Hops between them: Cool, you want a bunch of small chunks. We can route those through various open gateways between the user and the server and get them all there in less time than it would take if you included them all into the index page.
User: Ahh... everything loaded in like .8 seconds which is lighting fast!
Related
I apologize of this question has been asked before. I tried searching around, but was unable to find a relevant answer (probably due to my relatively small "web-design vocabulary").
I've noticed that the majority of websites have at least one--if not more--standard "objects" (or whatever the actually name is for them) on almost all of their pages. For instance, Stack Overflow has the same logo and tabs (Questions, Tags, Users...) on every page. I'm assuming that there's a less painstaking way to set this up other than simply copying and pasting the same code over and over, especially when ease of modification becomes a factor. As far as I know, CSS can't do accomplish this level of style generalization, so I'm assuming a server-sided language like PHP is part of the equation.
I'm not really looking for a very specific answer. What language--or type or language--as well as a brief synopsis of at least one way to achieve some sort of "object pasting" will be sufficient.
Like others said, this is a major reason why people go from HTML to something like PHP, at first just to split up parts of your page.
Yes, you can do exactly that. What I usually do (if I'm not using a framework) is create a folder in my directory like this:
inc/header.php
inc/footer.php
inc/menu.php
index.php
Then in index.php you'd need an include like:
<? include('inc/header.php'); ?>
<h2>Welcome to my site</h2>
<p>We're happy to have you</p>
<? include('inc/footer.php'); ?>
And in inc/header.php:
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
And in inc/footer.php:
<div id="footer">
<h2>Thanks for visiting</h2>
</div>
</body>
</html>
And so on for inc/menu.php
Then for other pages on your site, do the same includes for header, footer, and menu, and just write your page-specific content between the includes
Just an alternative to PHP:
Use Javascript or jQuery.
$( "#footer" ).load( "includes/footer.html" );
Another alternative is to use SHTML, which is basically HTML with inserts.
An easy way to do this is to create separate files for different sections of your page then instead of pasting the same code on each page use
include ('yourfilename.php');
to add the code in yourfilename.php at that point in the php file. This also makes it easy to modify that section and have your changes be reflected on all the pages that use yourfilename.php
For example, you can make one file called page_top.php and another called page_bottom.php. Then on each of your various php pages you can include('page_top.php'); near the top and include('page_bottom.php'); near the bottom. The code within these files will then be executed on each of your content pages.
There are of course other methods but this is a super easy way and you should look into this first.
An example of include would be:
header.php
<!DOCTYPE html>
<html>
<head>
<stuff><stuff>
</head>
<body>
<div id="mybanner">Design and logo that is common on all pages</div>
content/contact.php
<div id="bulk_of_the_html">
The rest of your stuff goes here
</div>
foot.php
<div id="footer_common_to_all">This is your footer content that is common to all pages</div>
</body>
</html>
To use would be something like:
contact.php
// This is your common to all pages header
include("header.php");
// This can be changed up as content switches
include("content/contact.php");
// This is your common to all pages footer
include("foot.php");
HTML imports or Webcomponents is a new way to do this completely at client side using HTML, JS and CSS. Write a component and reuse it in every page. But it uses ShadowDom, means not search indexable yet.
<link rel="import" href="header-banner.html">
<!-- use this in body -->
<header-banner></header-banner>
You have two solutions
Use include('....php') or require('....php') or include_once('....php') or require_once('....php') php functions to add external sections/modules into your web page(php).
You can call this functions at the position where you want the extremal module/part to be appeared.
include("Header.php"); // call to external module
// your body goes here
<h1>.......</h1>
<p>........</p>
.....................
include("Footer.php"); // again to another module
Or its better if you can go for a MVC framework where you can combine multiple modules and views into one output page...(ex Codeignitor/Cakephp...)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Lets say I have markup like:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
PutIntoHeader("<script src="im_on_top"></script>")
?>
</body>
</html>
The PutIntoHeader function would put the given script into the head section of the html which is rendered. I might be missing something really obvious, but I cant seem to figure that out. Any ideas how the function would be able to do that?
The output would be:
<!DOCTYPE html>
<html>
<head>
<script src="im_on_top"></script>
</head>
<body>
</body>
</html>
Thank you for any ideas.
Edit:->
Hi, I feel like a noobie getting this kind of answer:) My system is highly complex and in the time I write header I dont know which scripts will get requested for that particular page as its all dynamic. I could put all html in variable before it gets rendered and then traverse it as xml and put it there manually while storing the scripts in an array but I dont want to go this road.
In almost all situations you can simply get away with combining and minifying you scripts into a single file. This slows down the initial loading time (first visit of site), but will speed up further visits / navigation because the file will be cached.
Of course YMMV and it depends on your specific situation. See for example this thread.
There is also the thing that user agents cannot do unlimited concurrent connections to the same domain to load resources.
See for example these two (somewhat outdated) benchmarks:
What's the maximum number of simultaneous connections a browser will make?
Max parallel http connections in a browser?
In the comments you said you are working with a million different widgets. Does this mean that these widgets all have completely specific and different code or is just the data different or presented differently? If it is just data / presentation you don't need different script for that.
If indeed you are talking about a million completely different codes for the different widgets (a million suddenly sounds like a made up arbitrary number) it indeed may make sense to not load everything in a single script. But this is impossible to answer by us, because it depends on the filesize, how fast you want to load the first visit, how many shared code it has and more numbers like that.
So to get back to your questions "How can I load specific scripts in the head?".
One option would be to not render it in the head, but place it just before the </body> and body tag instead. The advantage of this approach is that you know what script to load by then. The pages will load faster (because resources in the head will be first downloaded in full before the actual page is ever going to be rendered). The drawback of this approach is that there is a small latency before your script will kick in because it will be last thing that gets loaded in the DOM.
Another option would be to defer the rendering of you HTML on the PHP side and using it more like a templating engine. A simple example of this is by first getting all the widgets you want to display and only after you have done this start the HTML rendering in PHP.
some bootstrap file
<?php
// load widgets from db or wherever
$widgets = [
[
'template' => '/templates/widget1.phtml',
'script' => '/js/widget1.js',
],
[
'template' => '/templates/widget2.phtml',
'script' => '/js/widget2.js',
],
];
require __DIR__ . '/templates/page.html';
some template (page.phtml)
<!DOCTYPE html>
<html>
<head>
<title>My page with widgets</title>
<?php foreach ($widgets) { ?>
<script src="<?php echo $widgets['script']; ?>"></script>
<?php } ?>
</head>
<body>
<?php foreach ($widgets) { ?>
<?php echo $widgets['template']; ?>
<?php } ?>
</body>
</html>
P.S. in the above example I have used script tags, but it could also be expanded for css files also obviously.
If you don't want to put it directly in the head because at the time you don't know what's going to be needed, you need to carry out the logic beforehand.
You need to separate the logic from the view and have the view as a simple way of rendering your information.
First calculate everything about your page and leave yourself with variables which you can use to extract relevant information, then output the relevant html for the variables you have calculated beforehand.
This could be done yourself in one page, or what I would suggest, is using some sort of library to help out with this. Something like Kohana is really good at this, you could use Kohana to separate out your controllers, models etc and then use something like mustache as a templating library. Mustache lets you create views with only the most basic of logic in them (the way it should be).
Your PHP code has no way to know where the contents should be output. PHP loses its control over the data once the page is rendered.
You seem to be trying to write the content in the <body> and then have it injected in <head> section. Why don't you output the content in the <head> section instead?
<!DOCTYPE html>
<html>
<head>
<?php echo "<script src=\"im_on_top\"></script>"; ?>
</head>
<body>
<!-- Some HTML markup here -->
</body>
</html>
You may try something like this:
<head>
<?php echo '<link rel="stylesheet" type="text/css" href="theme.css">'; ?>
</head>
I'm working on a website, which I have temporarily hosted here.
You'll notice the mystery letter 'a' I'm getting at the start of every page. I've gone through all the php files (controllers, views, models) and cannot locate where this letter is coming from. Another curiosity is that all the head content is not residing in the head tags when inspected with Firebug. It appears in the body tags, however it still functions correctly. Are these two issues related?
The only thing I have found from searching the internet is that perhaps some files have been saved as ANSI instead of UTF-8. I've tried 'saving as' all my php files as UTF-8 using my editor, but it is a very slow process. Any help debugging this situation would be appreciated.
EDIT- thanks for your response, #erman-belegu. It doesn't seem to be in any controller. For instance, I've set up a 404 redirect, with its own controller and view. The view looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="No Page">
</head>
<body>
<h1>No page dude.</h1>
</body>
</html>
But when inspected with firebug, it looks like this:
<html>
<head></head>
<body>
a
<meta content="No Page" name="description">
<h1>No page dude.</h1>
</body>
</html>
I have encoded everything using UTFCast, and am still experiencing the same issue. Any help welcomed.
You see the head inside the body tag because the mysterious "a" is the first character of your output. It's put inside the body tag by the rendering engine of your browser, or by firebug.
If you find the cause of your "a" - almost certainly some content outside PHP tags - the head will return to normal in firebug.
Searching for the "a" is tricky.. I'm not sure how large your codebase is, but I'd say start by exiting the process right before output is sent. You should see only the "a". Then move the exit step by step untill your "a" disappears, and you'll find it.
Check your controllers at start or maybe any print somewhere. Check all your code on these pages because you print these "a ".
Also use UTF-8 without BOM. But, I think that you print it accidentally and dont think that this happens for any other reasons.
Let's try to explain the title of my question to be the more concise I can: I'm basically designing a static HTML website from scratch. Nothing to worry about here.
The point is that I'm trying to include some links that will retrieve some items (a product inventory) from a database (and therefore the site won't be so 'static' anymore), as there're > 300 products and creating an html for each one is not feasible.
After googling and reading several sites for days, the "easiest" solution I came up with is to use PHP and MySQL. Again, nothing to worry about. Just took my time for reading documentation and move along.
My question is more related about the correct workflow for integrating both worlds. Let's see my idea in code:
This is one schematic example of the page where you can browse some products (e.g: product.html):
<html>
<head>
<title>My Site - These are our products</title>
</head>
<body>
<!--Site goes here-->
Search by name
Search by color
<!--rest of site goes here-->
</body>
</html>
Where the links
product_search_by_name.php
product_search_by_color.php
are actually a modified clone of the same page (product.html). This is, keeping same html code, plus the .php code embedded into it, as I want to have the DB results displayed into a div on that same page, keeping exactly same layout.
So, am I doing this right if I want to maintain the appearance of the whole website? I'm absolutely wrong from the base and should start again? Should I give up and work selling frappuchinos on a Star*ucks?
As a sample of the idea I want to achieve is the following: http://www.w3schools.com/tags/default.asp (when you click on the left menu bar, the center zone updates with the content). By the way, are they using AJAX on that website to update just the center zone, or I'm misunderstanding what is AJAX for?
I'm sure I'm missing something but I'm too confused to separate the sheep from the goats, so I'd thank a lot any tips you can give to me (and additional documentation on the internets to read as well).
There are two main ways to merge or migrate from static HTML to dynamic HTML (PHP, PERL, whatever).
(1) One is to have most of the contest as HTML, and the stuff like inventory as dynamic.
<html>
<head>
<title>My Site - These are our products</title>
</head>
<body>
<h1>My Site - These are our products</h1>
<?php
// php code to retrieve links
?>
</body>
</html>
(2) To have a full PHP site.
<?php
echo "<html>" . "\n";
echo "<head>";
echo "My Site - These are our products"
echo "</head>";
echo "<body>" . "\n";
// php code to retrieve links
echo "</body>" . "\n";
echo "</html>" . "\n";
?>
Many developers start by merging both HTML & PHP.
I suggest to learn how to do a very simple but full php site, connect to a database, retrieve some records with a S.Q.L. query, display them as read-only text or links, and later you may change to the other HTML plus PHP way of doing things.
There are several editors and tools to help develop in PHP, specially by looking for a PHP function, or just highlight HTML tags. Scintilla (Linux) or Notepad++ in windowze, its a very simple yet useful tool.
Cheers.
Well, if you want it to make it using Ajax ...
You might want to do the following.
Create the two files as you said, those are not to be included in the HTML file.
Create a JavaScript function to call the files, You can use jQuery api, to link to php. http://api.jquery.com/jQuery.post/ or http://api.jquery.com/jQuery.get/
Link the click of the button inquired to call the JavaScript function, and add html you get from php to the tag you want.
You can create a index.php page and put down your html code in it. It looks like this
<html>
<body>
<!--- links goes here -->
Search Products
</body>
</html>
If you are retrieving products from a database and if you want to create multiple links for the products create a function in your function.php which pulls all the product name from the database. Now add this function into your index.php
index.php
<?php include ('functions.php')?>
<html>
<body>
<h3>Product List</h3>
product name
</body>
</html>
Always embed html in php file. Do not embed php in html file. File should have .php extension.
I have just launched a site (using Joomla and a custom template), which doesn't display that well in IE7 (and I guess below too). I have looked around and have found out that you can link to different style sheets from my index.php, however, instead of linking to a different style sheet, I want it to link to the older site which is still live (under www.mydomain.com/old).
Is that at all possible?
As stated in the title, I have looked around and found out that you could use an if statement like this -
<!-- [if lte IE 7]><"LINK TO OLD SITE"/><![endif]-->
is what I'm trying even possible? I haven't got anywhere with it so far, trying the usual html tags of href="http://www.mydomain.com/old"
Any help would be great on this. I'm just getting stuck at the moment!
Conditional comments are used in the client-side part of your page, and so are not useful for PHP. You can use a conditional comment with JavaScript like this:
<!— [if lte IE 7]>
<script type="text/javascript">
top.location.href = "http://www.mydomain.com/old";
</script>
<![endif]-->
The disadvantage of this is that you are performing this task on the client machine, which is slower than if you performed the redirect on the server and sent to user to a different page instead. You can do this using PHP by checking the browser version and redirecting with header:
$browser = get_browser();
if($browser->browser == 'IE' && $browser->majorver <= 7) {
header('Location: http://www.mydomain.com/old');
}
Bear in mind that for this to work you must call header before any data is sent to the client.
Well, much reasonable would be to catch IE7 users before they started to render the page.
So it could be done with server-side script either with some mod_rewrite. Would be easier and faster.
I used Google to find this.
The objective of this technique is to enable redirects on the client side without confusing the user.
...
In HTML and XHTML, one can use the meta element with the value of the http-equiv attribute set to "Refresh" and the value of the content attribute set to "0" (meaning zero seconds), followed by the URI that the browser should request.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://thetudors.example.com/">
theTudors.example.com</a>.</p>
</body>
</html>