As it was mentioned already in the technical part on the references page, web design is some sort of badly mixed coctail, and I am actually going to write and try to explain doctype transition in as much shortest and simpliest way in this very first post on Spookycorp Journal. Html5 and it's proven and quite safe methods for early implementing and what you should do if you want to transfer your web site from, let's say, xhtml transitional 1.0..? Well, what's wrong with earlier version of html or xhtml? Practically, nothing. Main benefits in html5 toward earlier versions of hypertext markup language are: quite easier to look into code, and of course - speed. We won't cover any of the miracles regarding new doctype as it still is in draft mode, miracles like canvas drawing and similar.
Here is following example of transitional xhtml doctype. There are two more. Strict and Frameset. We won't take those two into account this time, just transitional as it is one of the most adopted today. Let's assume that you have some new and fresh document that looks something like code sample below, and let's focus on the starting portion and head section.
Instead of this ↓..<?xml version="1.0" encoding="UTF-8"?> <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <title>Site name</title> <meta name="author" content="*Author name*" /> <meta name="robots" content="*Your rules*" /> <meta name="description" content="Site description goes here" /> <meta name="keywords" content="key, words, go, here" /> <link href="style.css" rel="stylesheet" /> </head> <body> <h1>Page heading</h1> <div class="elementStyle"> <p>Web site text</p> </div> </body> </html>..use just this ↓
<!DOCTYPE html> <html lang="en" xml:lang="en"> <head> <meta charset="utf-8"> <title>Site name</title> <meta name="author" content="*Author name*" /> <meta name="robots" content="*Your rules*" /> <meta name="description" content="Site description goes here" /> <meta name="keywords" content="key, words, go, here" /> <link href="style.css" rel="stylesheet" /> </head> <body> <h1>Page heading</h1> <div class="elementStyle"> <p>Web site text</p> </div> </body> </html>... as that is pretty much the structure of which I am talking about.
Concerning the body section there are some differences regarding valid doctype. No matter which doctype you choose, valid html structure is a must. Handling your web pages in a valid doctype form should keep your web site away from potential javascript bugs or css missunderstanding, plus a dozen things more, such as search engine invisibility or slow web page rendering and so on. However, the differences inside body tag between xhtml and html5 are minor.
The key thing is how do you use styling for images.
Here is "old school" sample ↓<img src="folder/image.jpg" alt="image" width="150" height="200" border="0" />and here is html5 way..
<img style="width:150px;height:200px;border:0;" src="folder/image.jpg" alt="image" />
The difference is obvious. Html5 is leaving no other choice but only css for styling any element which is good if you ask me. In case of <img> element, vertical spacing and horizontal spacing should be replaced with margin values. The same thing is for the iframe element, for example, frameborder attribute is no longer acceptable. Whether you are about to use inline or external css rules, it is up to you. Both are ok.
All in all, as we mentioned earlier, the difference between xhtml and html5 are minor. Elements such as <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <s> <strike> <tt> <u> and <xmp> are no longer supported, while there are plenty of other, new. More about that - here. Keep in mind that html5 is backwards compatible, which means that even Internet Explorer 6 is able to parse everything as any other browser.
Latest versions of wamp, lamp or Xamp server.
Read, download and install if you haven't already did so in your fashoin.
All you actually need in order to make this simple split appart is one line of php rule, and a couple of things before that. Those things are: pages that will contain that php rule - all must have .php extension. .. ok, that's one thing, actually, there are no few, just this one. ☺
Here is previous sample page..
<!DOCTYPE html> <html lang="en" xml:lang="en"> <head> <meta charset="utf-8"> <title>Site name</title> <meta name="author" content="*Author name*" /> <meta name="robots" content="*Your rules*" /> <meta name="description" content="Site description goes here" /> <meta name="keywords" content="key, words, go, here" /> <link href="style.css" rel="stylesheet" /> </head> <body> <h1>Page heading</h1> <div class="elementStyle"> <p>Php include works! :)</p> </div> </body> </html>
Lets's focus on the main php trick now.
The 'include' trick.
<?php include 'some_dir/some_file.php'; ?>
Make sure that the page from which you want to include stuff is renamed from page.html to page.php and that you have apache and php properly installed and configured.
In that case, our new php page should have code like example below.
<!DOCTYPE html> <html lang="en" xml:lang="en"> <head> <?php include 'include_dir/head.php'; ?> </head> <body> <?php include 'include_dir/page_heading.php'; ?> </body> </html>
... and the included "pieces" should look like this ↓
head.php ↓
<meta charset="utf-8"> <title>Site name</title> <meta name="author" content="*Author name*" /> <meta name="robots" content="*Your rules*" /> <meta name="description" content="Site description goes here" /> <meta name="keywords" content="key, words, go, here" /> <link href="style.css" rel="stylesheet" />
page_heading.php ↓
<h1>Page heading</h1> <div class="elementStyle"> <p>Php include works! :)</p> </div>
That is quite simple, as that was all regarding this include magic. :) Oh, note that if we are talking about .php extension, it just doesn't matters if your page or piece of some bigger document is not starting as usual with - <html> tag. All it matters is that your pages or pieces are included after the right ">" character.
Now, why should you split appart your web site after you have finished with html coding? Why would you cut one piece of the code from particular page and than pull that piece back inside right after, during load of that same page? Just because of ease of further editing or content updating. This whole website, for instance, is based on this awesome include method. One file for navigation, one file for footer, one file for top roll-over buttons and entire website uses those when those are included. When each one of those files is changed, the change is applied to the whole site, automatically. Don't forget two more things. Php language uses ZERO tolerance for syntax errors or escaped characters or bad nesting, just like xml, and the second - not just files with .php extension are good for this, but almost any file type, unless there's more php code and similar switches like this one.
Try with include 'some_file.inc' or 'some_file.xml' or just 'text_file.txt' instead of 'some_file.php'.
Download and try this for your localhost - here