Simple Website Layout Tutorial Using HTML 5 and CSS 3
Simple Website Layout Tutorial Using HTML 5 and CSS 3
As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time. Apple believes that HTML5 is what will define the web and would love to see more developers adopt it instead of Flash. Now that big video sites such as YouTube are testing support for HTML5 (Mashable).
HTML 5 is a breakthrough which will improve the sites from design view point, seo etc. It when combined with css3 can make amazing web sites. For this you should check out this collection of all HTML 4 & 5 Tags reference sheet.
Before we go further remember to Subscribe to ourFree Rss Feed or Follow us on
Twitter to stay updated with our postings
The Most prominent additions in HTML 5 are tags like <header>, <footer>, <aside>, <nav>, <audio> etc. HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more . Site layout would be easily understandable and in code, tags are easy to understand as well Like the few tags i listed above clearly explains that :
- <header> = Header (Head area of the site)
- <nav> = Navigation (Menu/Navigation Area)
- <footer> = Footer Area
- <aside> = An area on a side (Side Bar)
Simple HTML 5 Tutorial
We will make a very very Simple web page with HTML 5 and styling with CSS 3. This is how the final result will look like :
Demo and Source:
View Demo
[Starting HTML Tutorial Code:
The Structure would be like this :
<!Doctype html> <html lang="en"> <head> <title>Your Page title</title> </head> <body> <!-- Define Header --> <header> </header> <!-- End Header --> <!-- Define Navigation/Menu --> <nav> </nav> <!-- End Navigation --> <!-- Main content area --> <section> </section> <!-- End of Main content area --> <!-- Sidebar --> <aside> </aside> <!-- End Sidebar --> <!-- Footer --> <footer></footer> <!-- End of Footer --> </body> </html>
Defining Header Tag:
<header> <h1>HTML 5 Tutorial Sample </h1> </header>
Doctype and Html Lang Added. Thanks for the suggestion Mark for correcting validation.
Defining Navigation Area with Few links in it:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul>
Stylizing the Navigation with CSS3 for Rounded Corners:
nav {
width:77%;
height:40px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px; //for opera
background:#f3f3f3;
border:1px solid #cccccc;
position:absolute;
}
nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
width:940px;
}
nav ul li {
float:left;
}
nav ul li a{
margin-right:20px;
display:block;
line-height:40px;
}
You can Also use px in Nav width instead of %. In this tutorial’s case you can add width=”960px” .
Then we Defined a DIV for the main content area and in it defined <section> and <article> area where the main content of the page is (the two paragraphs). You can see details in the source with comments for better understanding. The image inserted is also a simple div with css3 in it to show the image in background and rounded corners.
After that comes a very handy and prominent new addition in HTML 5. The <aside> tag which works like a sidebar without any extra css to move it on a side.
Defining Sidebar <aside>:
<aside> <section> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul> </section> </aside>
The UL (unordered list ) is repeated three times in the code. Its just for giving an idea how sections will look like and links are dummy as well you can put blogrolls, categories etc. anything you like.
Defining the Footer:
<footer> <section>Anything you want to put in footer goes here. </section> </footer>
Stylizing the Footer:
footer{background:#666666;
border-top:1px solid #cccccc;
padding:10px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-radius:5px; // for Opera
text-align:center;
color:#ffffff;
}
What’s Covered so Far:
- So far we have learned how to make simple HTML 5 Tags Layout
- Understanding of the Tags and their behaviors
- CSS3 for Rounded Corners and Text Shadows
Hope you like this Simple tutorials 
Edited: Doctype and html lang=”en” added for correcting validation. Thanks for the suggestion Mark
border-radius style added for rounded corners in Opera. Thanks for the Suggestion Aleksander
Awesome Comments!
very nice and simple method to make a web page by using html and css niceand keep it up.
HTML has come a long way. Nice to see, that it is possible now to create well-designed webpages with HTML only.
Yup i agree with u GDevelop web design
Great tutorial! Really simple and easy to follow, the steps actually make sense and it’s an amazing outcome. Keep up the great content
This is no doubt extremely worth taking a look at. But one thing I want to ask is as of now we has many template technologies like joomla or smarty than is it proper to spend our time behind making it via HTML?
Nice tutorial except that it fails validation. Try giving it a proper doctype and language declaration
<!DOCTYPE html>
<html lang=”en”>
Also the 77% width on the nav is giving me a horizontal scrollbar, why not make it 960px?
add “border-radius” with no prefix to make it work in Opera also!
Thanks Aleksander and Mark. tut edited !
Wow…I was wondering this stuff of information only.I am newbie to learn CSS and HTML5 .I am sure this tutorial will pretty much useful to fulfill my requirements.Thanks.
As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time
Keep posting stuff like this i really like it
this article is exactly what i’m searching for! I found this page bookmarked by a friend. I’ll also bookmark it. thanks!
I’m going to bookmark this blogg on Identica to get more views for you.
Ayaz Malik Reply:
March 30th, 2010 at 7:57 pm
thank u so much Reginald
really appreciate it
Hi there, Im at my work and was surfing around the net, goofing off, when I came over your web page. It’s quite nicely executed, and I certainly like your mode of writing.
Good morning, This is a superb blog, and I can agree with what was created here. I will be back to look at the comments soon. Thanks
I’m happy !You seem very extatic about this topic and it shows. Looking forward to future posts.Cheers!
…. cool, a real great tutorial Ayaz…. I was actually checking out “devSnippets” and I saw a tut about “simple layout design” and wa-la, I’m here at “Designzzz”…. who’d of thunk it !!
My list of favorite design sites just keeps getting longer !!
I’m starting to realize that “everybody is everywhere” on all the design type sites…. you just gotta look long enough !!
This website did not validate and it has 14 errors so although it’s OK for getting a basic feel, it’s got a quite a few mistakes in it…
See all the mistakes for yourselves here at: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.designzzz.com%2Fhtml-5-tutorial.html
If you’re going to learn html5 and css3 then you might as well learn it properly from the start…
Hi
Thanks for the info.
I had a problem viewing this as the source code in the zip file was missing tags.
I thought it was some HTML% feature-when inserted code displayed fine (using IE with javascript snippet).
Thanks
HTML5 is very powerful and using CSS3 with it makes creating rich web apps more easier and alot less time consuming.
I think adobe will have some competition especialy around the animations and video embedding capabilities.
Good post
thanks…i’ll try!!!!
Mistake in the downloaded CSS:
.bpage div {
-webkit-column-count:2;
-moz-column-count:2;
-moz-column-gap:22px;
-webkit-coulmn-gap:22px;
}
last line has column spelt coulmn
regards, Dave
Thanks for posting this Ayaz! Consider this bookmarked!
Wow, i got the right plate to learn CCS and HTML, very like it. thanks
Hey its a very nice tutorial..
I’ll try build my design on these stuff..
I hope its more effective..
Great tutorial. Greetings from Argentina my Friend
Great tutorial! Really simple and easy to follow, the steps actually make sense and it’s an amazing outcome. Keep up the great content
Thanks for posting this Ayaz
I’ll try build my design on these stuff..
Keep sharing more and more …..
Thanks
I can’t help but fee you have missused a lot of HTML5 elements here my friend. In turn teaching lots of bad habits.
Aside – http://html5doctor.com/understanding-aside/
“Navigation, ads, search boxes, blogrolls and so on are not directly related to the article and therefore do not justify the use of an .”
Section – http://html5doctor.com/the-section-element/
“Don’t use it unless there is naturally a heading at the start of the section”
Article – http://html5doctor.com/the-article-element/
“In addition to its content, an element typically has a heading (often in a header element), and sometimes a footer.” You seem to fail to enclose any of your content with paragraph tags either making use of article tags even more strange.
@Devin R. Olsen Yes this was a very basic highlight of the html 5 right after it was released. and i agree it isnt that good.
Great tutorial. Greetings from Germany.
Thanks for all of your hard work!
This is awesome, and I know this is a noob question… But how do I flop the design around and make the appear on the left instead of the right?
Hello Visitor,
you can change that by moving the aside code and everything in it before the mcontent div .. or u can simply ad a float:left in the aside => sidebar
HI,
Please explain how to add the image in the background like in your screenshot of the “end result!”
Thanks a bunch.
What is the best way to define a header image in place of the ?
regards.
@will and @james ,, the best place to add a background is in body tag via css. add a background:url(path_to_image); in the body css
Cheers for this, perfect html5 canvas!
thanks ayaz. this post will be usefull for my lesson in university. thanks again
Thank you for this valuable tutorial.
Ayaz Malik Reply:
March 4th, 2011 at 12:10 pm
@voeding, glad
Great tutorial. Really simple !!!
Thanks
This is very useful. Can I use this source code in my project? If you are OK, I want to use it, and of course, I will write your name and this site as reference in my project.
Ayaz Malik Reply:
July 16th, 2011 at 11:57 am
Hello Pastelom, Feel free to use it and thanks for the credit back
cheers
I am trying to make an aside and wish that you would offer the css for yours. How do you detrmine which side the aside appears on? How do you get it to appear the entire length of the main content area. My aside turns up at the very bottom and on the left and is only as tall as the an li inside it.
Ayaz Malik Reply:
August 17th, 2011 at 3:25 pm
hello Brian,
you can move the aside using float in css as float:left or float:right; about the height, you can define fixed height in css or use overflow:hidden; which will auto height depending on the content/text placed inside it.
let me know if that helps. cheers
Very thankful simple example and easy to understanding ,,,.,,.
thanks. it’s very usefull for me.
Thanks..! Its Very Useful And Easy To Practice, Learn And Knowledgeable..
your download is broken … cant find the files …
and your preview is also broken :/ tested with IE and chrome …
any chance to fix that? Preview picture looks very nice.
Tayyab Reply:
April 4th, 2012 at 5:24 pm
This is a 2 year old tutorial, our download system has changed in the recent times that’s why you are getting this problem. Thanks notifying, we’re on it.
Tayyab Reply:
April 6th, 2012 at 2:29 am
it is fixed now.