I've been making a website with about 25 pages and every time I want to update the nav bar, or the footer, I have to go through every page and make the change!
Surely there is a way to have the header and the footer (and the side bar!) in separate documents and call them in the same way a CSS is called so they don't have to be repeated on every page.
Bonus: Is this likely to affect SEO in any way? Might it slow down the site?
Thank you,
Tara
by using include():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your page</title>
<style type="text/css">
<!--Your styles ect that make your page-->
</style></head>
<body>
<div class="container">
<div class="header"><?php include('./site_content/header.html');?></div>
<div class="sidebar"><?php include('./site_content/sidebar.html');?></div>
<div class="content">
your content
</div>
<div class="footer"><?php include('./site_content/footer.html');?></div>
</div>
</body>
</html>
HTML itself - ignoring framesets and iframes which do have an effect on SEO and are generally not really recommended - does not have any method to include partial HTML.
You can however use PHP (or SSI if you're oldskool) for such. It has a command to include partial files, it's called include PHP Manual.
PHP needs to be activated on your server for it. To keep this transparent you might want to map the .html file extension to PHP or use Mod_Rewrite to do that. That depends on the type of server and it's configuration.
Might it slow down the site?
The server has more work to do to process the request, therefore it slows down the site a little bit. But normally for a simple site you won't notice that much.
To prevent such, it's possible to build a simple caching mechanism on top that will convert the dynamic PHP output into static files on the fly.
Related
I found a Webpage saved as something.php. But the source code tells me <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
I also found out that PHP code does not work on the webpage.
What is the need for making the file extension PHP if HTML is used?
(Not exactly HTML, but XHTML)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What is the need for making the file extension PHP if HTML is used?
(Not exactly HTML, but XHTML)
Considering your comments so far, particularly you stated there is no PHP; you can just change the file extension to XHTML. You can always change it back.
I wonder what other PHP files exists where you "found" this page and why. Assuming someone before you developed the site, there is probably a reason they used PHP file extensions.
Unless your host doesn't support PHP, then you should be able to run php code anywhere on that page by placing it inside "" tags. The 'Content-type' isn't relevant to whether PHP can run or not. Try adding the following code somewhere in your page:
<?php echo "Hey there, I'm a friendly PHP string!"; ?>
add this <?php echo "Hello!"; ?> in your page to test, and make sure that your server is running, and normally it works
Are you using a wamp/mamp server? Have you tried to turn it on?
These code are meta tags
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
and it has nothing to do with php unless you have included a php script to it.
Html/XHtml will run even though you are not using a php server. All php files has a .php file extension and will run only if you use a server like wamp for windows or mamp for mac.
You can still use html/xhtml code in a .php file.
For example I have an <h1>This is h1</h1> tag and you want to make it dynamic, you can put <?php ?> inside the tag and echo it out to display, <h1><?php echo "This is h1"; ?></h1>.
In case you want to put html code inside a php script, you can do it like this
<?php echo "<h1>This is h1</h1>"; ?>
You can learn more about php and other programming languages by the help of google. Just take your time, relax and enjoy learning. Don't pressure yourself, remember learning is not a medicine that when you take it, it will work in a few minutes. Learning takes time and practice. Enjoy coding.
I am quite new to PHP.
I built a .php website which I've hooked up to a local test server using MAMP. For some reason, although I can view the site in my browser (Chrome), and the PHP works (I built a form that sends email), none of the CSS from the external style sheet I linked, nor the javascript from the external javascript file I linked is working.
If I type any of the CSS or script inline, everything works fine. I've used external files many times before in .html files and they have all worked just fine. What am I doing wrong here?
my .php file:
<?php
$to = 'email#email.com';
$subject = 'subject';
$message = $_POST['message'];
$message = <<<EMAIL
$message
EMAIL;
$header = '$email';
if($_POST){
mail($to, $subject, $message);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Php Test</title>
</head>
<link rel="stylesheet" type="text/css" href="PhpTest.css"/>
<body onload="alertFunction()">
<h1 id="header">Text text text.</h1>
<form action="?" method="post">
<ul>
<li>
<label for="message">Message:</label>
<textarea id="message" name="message" cols="42" rows="9"></textarea>
</li>
<li>
<input type="submit" value="Submit"</li>
</li>
</ul>
</form>
<footer>
<script type="text/javascript" src="PhpTest.js"></script>
</footer>
</body>
</html>
my css:
#header{
color:#3C9;
}
my javascript:
function alertFunction()
{
alert("Alert.");
}
Update: I started a new .php in Dreamweaver from scratch. I added no actual PHP code; I just placed a header within the body, linked to an external CSS within the head tag (within the CSS I simply designated the header's color as a blue) and tried that. As it turns out, Dreamweaver will recognize the link and apply the CSS it when I view the site using the design/split screen, however when I try to preview it in Chrome, it fails. I have no idea what this means, but if anyone has any theories they would be very much appreciated. Thanks.
I think your <link rel="stylesheet" .../> tag must be inside <head>
This element defines a link. Unlike A, it may only appear in the HEAD
section of a document, although it may appear any number of times.
Although LINK has no content, it conveys relationship information that
may be rendered by user agents in a variety of ways (e.g., a tool-bar
with a drop-down menu of links).
http://www.w3.org/TR/html401/struct/links.html#edef-LINK
So:
<head>
<!-- Moved <link/> inside <head></head> -->
<link rel="stylesheet" type="text/css" href="PhpTest.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Php Test</title>
</head>
Edit
Well, I've tried your page. Named the stylsheet file Phptest.css where it's PhpTest.css in the .php file. I got 404 file not found error because of difference cases of t. Make sure that you named the file exactly like what you typed in the <link/> tag.
Also if you're using Chrome. Press F12 and check if there were any errors.
It works for me just fine, however I know that case sensitivity can be an issue when moving pages from server to server... I would try renaming your files (and the links in the html page as well) to implement all lowercase...
Try putting the full url for the location of css and javascript like:
href="http://www.domain.com/css_file.css"
it works.
However, please make sure your css and js file is under the same folder.
also make sure the file name is exactly the same. Since it is case sensitive. I also made a mistake while mis-typed the first time. After I match the casing it worked.
I guess it is your file naming. Check if the links and the files have the exact name, with all lower and upper cases.
I for myself name all files with just lowercase letters, to avoid this..
Is there any method to cache an HTML-code of ExtJS components with further initializing it (binding events and so on) so that I can send it by PHP inside one solid HTML file?
In other words I want server to send already pre-rendered page.
If your idea is to capture the memory state of the client application that seems like a bold project, to say the least. See this other question.
If what you want is to have all you application embedded in one single HTML file, that is possible. Just concatenate all you Javascript (including Ext's code) and put it in a script tag, and do the same with the CSS and wrap in into a style tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/* All your CSS here */
</style>
<script>
// All you javascript here
</script>
</head>
<body>
<!-- page content -->
</body>
</html>
Obviously, if you care about the maintainability of you code, you should automate this procedure...
Here is my code
<?php include('includes/header.php'); ?>
<?php
include_once "mysql_connect.php";
mysql_query("UPDATE viewcounter SET `views` = `views`+1 WHERE id='1'");
$sql = mysql_query("SELECT * FROM viewcounter WHERE id='1'");
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
$pagename = $row["pagename"];
$views = $row["views"];
};
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Like Dislike</title>
<meta name="Description" content="Like Dislike " />
<meta name="Keywords" content=" likedislike,tk,thumbs up,thumbs down,like,dislik,love,hate,tk" />
</head>
<body>
<center>
<h1>Like/Dislike</h1>
<a href="what-should-be-here" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;">
<img name="image1" src="http://www.likedislike.tk/images/left-blue.png" border=0></a>
<img src="images/logo.gif" alt="desert" width="126" height="168" align="middle" /><a href="http://www.likedislike.tk/2-justin-bieber" onMouseOver="image2.src=loadImage2.src;" onMouseOut="image2.src=staticImage2.src;">
<img name="image2" src="http://www.likedislike.tk/images/right-blue.png" border=0></a>
<br />
<?php echo ThumbsUp::item('1')->template('thumbs_up_down') ?>
<?php echo ThumbsUp::item('1')->template('mini_poll') ?>
<?php print $views; ?> views
</center>
</body>
</html>
<?php include('includes/footer.php'); ?>
Now i am confused..
where should i put this <?php include('includes/header.php'); ?>
should i put inside body or outside.
and i want to add more java script so should i load them in header.php or in the page ?
What is the best way to speed up everything and load those java script fast?
Can i load all the java script,css and some php script in header.php?
Thanks i am only 14 so don't tell me i am stupid :)
I try it and it works but i just wanted to know its right way or not.
Thanks
It seems like your code <?php include('includes/header.php'); ?> has different purpose than you assumed. It seems it is designed to deal with HTTP request headers and should be invoked before any output is sent to the browser.
You should be aware that not even a space should be sent (displayed) before header.php is executed (assuming it contains header() PHP function calls) - please see documentation.
Secondly, if you want to include JavaScript, you should do it in HTML head section or later, in the body. The way you should solve it varies depending on what you want to achieve. The best way is to combine as much JavaScript as possible in one file and compress it, do similar thing with CSS (combine all files and compress them).
By combining and compressing JS and CSS files you are making less requests to the server and less requests will be blocked (browsers have limits for concurrent requests to same domain).
Here is some documentation on including JavaScript in HTML documents: www.w3.org/TR/html4/interact/scripts.html.
JavaScript includes and additional CSS files are part of the HTML markup, and should probably be in the <head> area.
You'll typically list your PHP includes at the top of a file. The PHP is executed by the web server, and only outputs text if you use echo, print, etc. You might pick apart some WordPress themes or PHP tutorials and look at how (and pay close attention to why) people structure their markup and PHP the way they do. There's usually no right or wrong way to do things, but there are best practices to follow and the best overall layout/plan depends on what you're trying to do.
It's better to load in header is only that you need for loading page correctly. Because each
script tag will lock your page loading until this one loads. So if you have big javascripts your users will see blank page long time(minutes, maybe hours :)))).
Is this a good method to save to all index in a variable and then echo this? for example
<?php
$txt='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h2>'.heaf_func().'</h2>
</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</body>
</html>';
echo $txt;
?>
I'd personally change your example to be like this;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h2><?php echo heaf_func(); ?></h2>
</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</body>
</html>
Generally, no. If you need to do output buffering, just use the output buffering API. Even if you need to retrieve your output to do post-processing on it, you can do that using ob_get_contents. It won't be a big deal on most pages, but on large pages or under heavy server load you should use the output buffering support because it's better optimized for what you're trying to accomplish.
Generally, when looking at a method such as what you're contemplating, ask yourself "what does this gain me?" Your example above is clearly trivial, but unless you're planning on post-processing your results, what does it gain you?
EDIT:
I've used both the PHP-in-XML and XML-in-PHP approaches in various projects. My experience is that on a project of any significant size the PHP-in-XML (or HTML, but I try to always generate XML or XHTML) eventually turns into nasty spaghetti code that becomes a pain to maintain, whereas the XML-in-PHP approach eventually balloons into a mess of string-manipulation code that you also don't want to maintain.
Generally, I'd recommend going with an MVC (MVVM, MVP, etc. - up to you) framework for every web app, regardless of language. If applied correctly, the additionally framework complexity is more than compensated by the modularity and ease of maintenance and extensibility that you gain. If you don't feel the need or desire to target a framework (though, again, I STRONGLY recommend it), I typically follow these rules:
Whenever possible, limit PHP-in-XML to simple inclusion of values. E.g., <h1><?php echo $title; ?></h1> Try to avoid including logic in your spaghetti code (other than, perhaps, repetition, though I typically abstract that away, too).
Whenever possible, create XML documents using the XML API's instead of writing raw values to the output. XML has the advantage of being easily transformable, which in my experience is well worth the extra initial investment, at least in production apps.
Send the client an XML document representing your data with an xml-stylesheet processing instruction indicating the location of a stylesheet to apply for rendering and let the client do its own rendering. Failing that, put your data-to-presentation transformation logic in a stylesheet (XSLT, not CSS) and do the transformation server-side. I really enjoy the separation between data and presentation it allows me.
The question is why you want to do this. Just putting it in a variable and then echoing it isn't worth it but if you need to work on the string further (string replacement, etc.) it is useful.
If you're going to be doing massive multi-line text-into-variable assignments like that, consider using the HEREDOC syntax, which has the advantage of not forcing to you escape quotes, which makes the text blob far easier to read and cut/paste into other things without needing tweaks.
As for choosing if you should do PHP-in-HTML or HTML-in-PHP, it all comes down to which one would be more readable. If you have 500 lines of HTML, and only a small bit of PHP to insert, then go for PHP-in-HTML, and vice-versa. For a near even-balance, it'd come to whatever your preference is.