Your First HTML5 Template
Posted: Wed Mar 07, 2012 1:38 am
Hello boys and girls, welcome to my first tutorial in a really long time :lol:
This time, I'll be showing you the basics of creating an HTML5 template, using the newest tags brought by the soon-to-be HTML standard.
Like all compliant HTML documents, we'll start with the DTD, or Document Type Definition. This simply defines what version of HTML is used, and helps the web browser render the page.
In HTML5, the Doctype has been greatly simplified. At the complete beginning of your document, insert the following bit of code:
Now we're ready to start with the actual structure of the HTML document. As with every document, insert the <html> tag, but instead of leaving it blank like before, add the 'lang' attribute, and set its value to "en" (English).
Next comes the head. This doesn't change, simply insert the <head> tag. Unlike previous versions of HTML, you won't need to specify the contents of the document inside a <meta> tag, but you can still declare the charset used. For example,
The next thing you'll want to add is a linked stylesheet. Again, it is good practise to seperate content from style. You'll need to create a seperate CSS (.css) file, and link it to the HTML document using the following code:
Of course, you'll want to give your document a title. Assuming you're not new to HTML, you'll know you have to include your title between the <title> and </title> tags.
Now that the head section is done, you can close it with the </head> tag.
And now, the moment you've all been waiting for.... Content!! :lol:
As usual, open the body area with the <body> tag.
We'll then want to add a div element that will server as our wrapper. It'll contain all of the content, and style it seperately from the rest of the body.
So, inside the wrapper, add this piece of code:
The same improvement can be noticed when making a navigation menu, now that the <nav> and </nav> tags have been added.
Still inside the wrapper, but after the header, insert this bit of code:
Once more, insert the following bit of code inside the wrapper, but after the navigation bar:
Now comes the styling part. This will be done in CSS, in a seperate document, which you have linked in the code above.
Like in any good CSS stylesheet, you'll want to reset the browser defaults when the document loads. This will prevent unwanted effects that the browser has on the document by default.
You'll achieve this simply by inserting:
The rest of the document will be styled using the following code:
I hope this tutorial has helped, enjoy!
-Comathi-
This time, I'll be showing you the basics of creating an HTML5 template, using the newest tags brought by the soon-to-be HTML standard.
Like all compliant HTML documents, we'll start with the DTD, or Document Type Definition. This simply defines what version of HTML is used, and helps the web browser render the page.
In HTML5, the Doctype has been greatly simplified. At the complete beginning of your document, insert the following bit of code:
Code: Select all
That's it, really. Simplified, indeed <!DOCTYPE HTML>Now we're ready to start with the actual structure of the HTML document. As with every document, insert the <html> tag, but instead of leaving it blank like before, add the 'lang' attribute, and set its value to "en" (English).
Next comes the head. This doesn't change, simply insert the <head> tag. Unlike previous versions of HTML, you won't need to specify the contents of the document inside a <meta> tag, but you can still declare the charset used. For example,
Code: Select all
Don't forget the all-important '/' at the end of your tag. Since the <meta> tag ha s no end tag (like <a> and </a>), it is good practise to add the closing '/' at the end of the tag.<meta charset="ISO-8859-1" />The next thing you'll want to add is a linked stylesheet. Again, it is good practise to seperate content from style. You'll need to create a seperate CSS (.css) file, and link it to the HTML document using the following code:
Code: Select all
Again, don't forget the '/' end character.<link rel="stylesheet" href="style.css" />Of course, you'll want to give your document a title. Assuming you're not new to HTML, you'll know you have to include your title between the <title> and </title> tags.
Now that the head section is done, you can close it with the </head> tag.
And now, the moment you've all been waiting for.... Content!! :lol:
As usual, open the body area with the <body> tag.
We'll then want to add a div element that will server as our wrapper. It'll contain all of the content, and style it seperately from the rest of the body.
Code: Select all
Inside our wrapper container, we'll want to add a header for our page. Luckily, HTML5 brings up a whole new set of tags that are aimed at giving more meaning to the code. That's why you can now use the <header> and </header> tags instead of adding a new div element.<!--Wrapper-->
<div id="wrapper">
</div>
<!--End of Wrapper-->So, inside the wrapper, add this piece of code:
Code: Select all
Notice, I've put a paragraph element in the header. I'll be doing the same for all other part of the template, just so you can see how the content will be displayed once styled.<!--Header-->
<header>
<p>This will be the content of the header.</p>
</header>
<!--End of Header-->The same improvement can be noticed when making a navigation menu, now that the <nav> and </nav> tags have been added.
Still inside the wrapper, but after the header, insert this bit of code:
Code: Select all
Now, optionnally, you could add a sidebar to your template. This can easily be acheived with the new <aside> and </aside> tags.<!--Navigation-->
<nav>
<p>This will be the content for the navigation bar.</p>
</nav>
<!--End of Navigation-->Once more, insert the following bit of code inside the wrapper, but after the navigation bar:
Code: Select all
The main content area will go next, but unfortunately, you'll still have to use a div element for this.<!--Sidebar-->
<aside>
<p>This will be the content for the sidebar.</p>
</aside>
<!--End of Sidebar-->Code: Select all
Last, but not least, comes the footer. Fortunately this time, HTML5 provides a two new tags for the purpose: <footer> and </footer>.<!--Content-->
<div id="content">
<p>This will be the main content area.</p>
</div>
<!--End of Content-->Code: Select all
That's it for the content. Now, close your document by ending the <body> tag with its matching </body> tag, and the <html> tag with its matching </html> tag.<!--Footer-->
<footer>
<p>This will be the content of the footer.</p>
<!--End of Footer-->Now comes the styling part. This will be done in CSS, in a seperate document, which you have linked in the code above.
Like in any good CSS stylesheet, you'll want to reset the browser defaults when the document loads. This will prevent unwanted effects that the browser has on the document by default.
You'll achieve this simply by inserting:
Code: Select all
This bit of code resets the default margin and padding values the browser gives to the document.*{margin: 0; padding: 0;}The rest of the document will be styled using the following code:
Code: Select all
You can change the values, if you want, as these are just suggestions body{background: #0d0d0d;}
#wrapper{margin: 0 150px 0 150px; background: #FFF;}
header{ height: 150px; background: aqua;}
footer{ height: 60px; background: aqua;}
nav{ height: 50px; background: yellow;}
aside{ float: right; width: 200px; background: red;}
#content{ mergin: 0 200px; background: green;}I hope this tutorial has helped, enjoy!
-Comathi-