Your First HTML5 Template
5 posts
Page 1 of 1
Quick Profile
Information
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm View Full Profile
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-
Quick Profile
Information
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm View Full Profile
congrats mate
looks nice and simple
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
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
Quick Profile
Information
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am View Full Profile
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.
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!
Quick Profile
Information
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm View Full Profile
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:
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:
Quick Profile
Information
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm View Full Profile
Very nice and detailed tutorial ;)
rep+ from me (again lol)
rep+ from me (again lol)
CodenStuff wrote:Nope, it's just your sick and dirty mind. You sick twisted warped little pervo
5 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023