Your First HTML5 Template

5 posts Page 1 of 1
Contributors
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Your First HTML5 Template
comathi
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:
Code: Select all
<!DOCTYPE HTML>
That's it, really. Simplified, indeed :)

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
<meta charset="ISO-8859-1" />
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.

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
<link rel="stylesheet" href="style.css" />
Again, don't forget the '/' end character.

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
<!--Wrapper-->
<div id="wrapper">

</div>
<!--End of Wrapper-->
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.

So, inside the wrapper, add this piece of code:
Code: Select all
<!--Header-->
<header>
<p>This will be the content of the header.</p>
</header>
<!--End of Header-->
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.

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
<!--Navigation-->
<nav>
<p>This will be the content for the navigation bar.</p>
</nav>
<!--End of Navigation-->
Now, optionnally, you could add a sidebar to your template. This can easily be acheived with the new <aside> and </aside> tags.

Once more, insert the following bit of code inside the wrapper, but after the navigation bar:
Code: Select all
<!--Sidebar-->
<aside>
<p>This will be the content for the sidebar.</p>
</aside>
<!--End of Sidebar-->
The main content area will go next, but unfortunately, you'll still have to use a div element for this.
Code: Select all
<!--Content-->
<div id="content">
<p>This will be the main content area.</p>
</div>
<!--End of Content-->
Last, but not least, comes the footer. Fortunately this time, HTML5 provides a two new tags for the purpose: <footer> and </footer>.
Code: Select all
<!--Footer-->
<footer>
<p>This will be the content of the footer.</p>
<!--End of Footer-->
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.

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
*{margin: 0; padding: 0;}
This bit of code resets the default margin and padding values the browser gives to the document.

The rest of the document will be styled using the following code:
Code: Select all
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;}
You can change the values, if you want, as these are just suggestions :)

I hope this tutorial has helped, enjoy!

-Comathi-
User avatar
Dummy1912
VIP - Donator
VIP - Donator
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm

Re: Your First HTML5 Template
Dummy1912
congrats mate :)
looks nice and simple
visit us on:


http://www.softpedia.com/get/System/Lau ... -Run.shtml
Check it out ! http://www.softpedia.com/publisher/I-A- ... 90017.html
Check it out ! http://www.softpedia.com/get/Desktop-En ... lock.shtml
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

Re: Your First HTML5 Template
smashapps
I love how easy it is in HTML5 now to add <!doctype HTML>, It's allot easier then before.

Great tutorial Comathi +rep for it. I would of posted some tutorials for VB or C# but I don't have any of that installed at the moment.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Your First HTML5 Template
comathi
Thanks guys.

Yeah, I enjoy the simplicity of HTML5 too. The doctype is my favourite part, because I could never remember the doctype for, lets say, HTML 4.01 :lol:
Filip
Coding Guru
Coding Guru
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm

Re: Your First HTML5 Template
Filip
Very nice and detailed tutorial ;)

rep+ from me (again lol)
CodenStuff wrote:
Nope, it's just your sick and dirty mind. You sick twisted warped little pervo :D
5 posts Page 1 of 1
Return to “Tutorials”