Simple Website Layout Tutorial Using HTML 5 and CSS 3

AD

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.

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 :

Final HTML 5 Tutorial Result

Demo and Source:

View Demo

Download this Freebie

Simply enter your email address and the download link will be sent right to your inbox. If you did not get an email please check your junk folder.

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” .

AD

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

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

Further Related Readings

Advertisement

Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Ayaz Malik

I'm a coding geek, art lover, and a proud father. I'm running several online businesses; sometimes I take freelance projects to pay my coffee bills. you can find me here on twitter
All Articles by
Comments
  1. gulpari March 1, 2010 at 11:17 am

    very nice and simple method to make a web page by using html and css niceand keep it up.

  2. GDevelop WebDesign March 1, 2010 at 2:02 pm

    HTML has come a long way. Nice to see, that it is possible now to create well-designed webpages with HTML only.

  3. Ayaz Malik March 1, 2010 at 2:39 pm

    Yup i agree with u GDevelop web design

  4. Inside the Webb March 1, 2010 at 9:53 pm

    Great tutorial! Really simple and easy to follow, the steps actually make sense and it’s an amazing outcome. Keep up the great content

  5. andy March 2, 2010 at 4:09 am

    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?

  6. Mike March 3, 2010 at 3:29 am

    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?

  7. Aleksander March 3, 2010 at 4:08 am

    add “border-radius” with no prefix to make it work in Opera also!

  8. Ayaz Malik March 3, 2010 at 4:43 am

    Thanks Aleksander and Mark. tut edited !

  9. Adiian March 12, 2010 at 6:56 am

    As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time

  10. Reginald Waldschmidt March 30, 2010 at 6:50 pm

    I’m going to bookmark this blogg on Identica to get more views for you.

    1. Ayaz Malik March 30, 2010 at 7:57 pm

      thank u so much Reginald :) really appreciate it

  11. Johnny cricket March 31, 2010 at 8:21 pm

    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

  12. Robin Madrid April 1, 2010 at 7:27 pm

    I’m happy !You seem very extatic about this topic and it shows. Looking forward to future posts.Cheers!

  13. Hermitbiker April 10, 2010 at 12:49 am

    …. 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 !! :)

  14. Simon Loveland May 15, 2010 at 4:17 pm

    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…

  15. Simon Loveland May 15, 2010 at 4:19 pm

    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…

  16. Richard June 9, 2010 at 5:42 am

    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

  17. Jason June 26, 2010 at 7:20 pm

    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

  18. rifky July 22, 2010 at 4:52 am

    thanks…i’ll try!!!!

  19. Dave Porter September 2, 2010 at 9:04 pm

    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

  20. John Del September 11, 2010 at 12:22 am

    Thanks for posting this Ayaz! Consider this bookmarked! :)

  21. andrew October 20, 2010 at 10:18 am

    Wow, i got the right plate to learn CCS and HTML, very like it. thanks

  22. Ben October 31, 2010 at 2:56 pm

    Hey its a very nice tutorial..
    I’ll try build my design on these stuff..
    I hope its more effective..

  23. Juegos November 5, 2010 at 10:19 am

    Great tutorial. Greetings from Argentina my Friend

  24. stecy November 16, 2010 at 4:30 pm

    Great tutorial! Really simple and easy to follow, the steps actually make sense and it’s an amazing outcome. Keep up the great content

  25. smith December 12, 2010 at 10:49 am

    Thanks for posting this Ayaz
    I’ll try build my design on these stuff..
    Keep sharing more and more …..

    Thanks

  26. Devin R. Olsen December 12, 2010 at 7:37 pm

    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.

  27. Ayaz Malik December 13, 2010 at 1:32 am

    @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.

  28. Michael December 31, 2010 at 5:27 am

    Great tutorial. Greetings from Germany.
    Thanks for all of your hard work!

  29. visitor January 4, 2011 at 5:53 pm

    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?

  30. Ayaz Malik January 4, 2011 at 6:34 pm

    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

  31. Will January 4, 2011 at 10:08 pm

    HI,

    Please explain how to add the image in the background like in your screenshot of the “end result!”

    Thanks a bunch.

  32. James January 6, 2011 at 1:37 pm

    What is the best way to define a header image in place of the ?

    regards.

  33. Ayaz Malik January 6, 2011 at 1:51 pm

    @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

  34. benn February 11, 2011 at 8:20 am

    Cheers for this, perfect html5 canvas! :)

  35. iş başvurusu February 26, 2011 at 6:12 am

    thanks ayaz. this post will be usefull for my lesson in university. thanks again

Comments are closed.

Copyrights © 2015 - Designzzz. All Rights Reserved