Advertisement

html 5 tutorialSimple 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:

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

Download Source Here

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

Line Break

Author: Ayaz Malik (169 Articles)

I am a designer, developer and Publisher. Running a few blogs and publishing alot of interesting stuff. My main Project is an online art and online drawing community for all sort of artists, designers, photographers etc. called Blasting Art

design RSS design twitter follow

24 Superb Responses

  1. gulpari says:
    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 says:
    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 says:
    March 1, 2010 at 2:39 pm

    Yup i agree with u GDevelop web design

  4. Inside the Webb says:
    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. seo services says:
    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 says:
    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 says:
    March 3, 2010 at 4:08 am

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

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

    Thanks Aleksander and Mark. tut edited !

  9. r4 ds games says:
    March 11, 2010 at 10:55 pm

    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.

  10. php-html.net says:
    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

  11. cna training says:
    March 28, 2010 at 12:28 pm

    Keep posting stuff like this i really like it

  12. Top online Pharmacies says:
    March 30, 2010 at 4:16 am

    this article is exactly what i’m searching for! I found this page bookmarked by a friend. I’ll also bookmark it. thanks!

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

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

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

    thank u so much Reginald :) really appreciate it

  15. freearticlesbox.com- free articles says:
    March 31, 2010 at 7:23 pm

    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.

  16. Johnny cricket says:
    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

  17. Robin Madrid says:
    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!

  18. Hermitbiker says:
    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 !! :)

  19. Simon Loveland says:
    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…

  20. Simon Loveland says:
    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…

  21. Richard says:
    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

  22. Jason says:
    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

  23. rifky says:
    July 22, 2010 at 4:52 am

    thanks…i’ll try!!!!
    rifky´s last blog ..Hello world!My ComLuv Profile

  24. Dave Porter says:
    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

Trackbacks/Pingbacks

  1. Vote on this article at blogengage.com - Simple Website Layout Tutorial Using HTML 5 and CSS 3...New HTML 5 Tags and a Simple Tutorial As most of ...
  2. designfloat.com - Simple Website Layout Tutorial Using HTML 5 and CSS 3...New HTML 5 Tags and a Simple Tutorial As most of ...
  3. zabox.net - Simple Website Layout Tutorial Using HTML 5 and CSS 3...Simple Website Layout Tutorial Using HTML 5 and CSS 3...
  4. uberVU - social comments - Social comments and analytics for this post...This post was mentioned on Twitter by allwebdesign: Simple Website Layout Tutorial Using HTML ...
  5. Simple Website Layout Tutorial Using HTML 5 and CSS 3 | Tutorialicious.info - [...] Go here to see the original: Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  6. サンプルソース付き。html5とcss3のチュートリアル | Web活メモ帳 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3というエントリーでhtml5とcss3の使い方を説明してくれているチュートリアルがありましたのでご紹介。 [...]
  7. [User Link:Simple Website Layout Tutorial with HTML 5 and CSS3] | Tips for Designers and Developers | tripwire magazine - [...] User News if (typeof Meebo == 'undefined') { Meebo=function(){(Meebo._=Meebo._||[]).push(arguments)}; (function(q){ var args = ...
  8. CSS Brigit | Simple Website Layout Tutorial with HTML 5 and CSS3 - Simple Website Layout Tutorial with HTML 5 and CSS3...Simple Website Layout Tutorial with HTML 5 and CSS3 includes reference sheet ...
  9. 140+ Got to Check Out Fresh Articles for Designers and Developers | tripwire magazine - [...] Simple Website Layout Tutorial with HTML 5 and CSS3 [...]
  10. Simple Website Layout Tutorial Using HTML 5 and CSS 3 – Designzzz | Drakz Free Online Service - [...] more: Simple Website Layout Tutorial Using HTML 5 and CSS 3 – Designzzz Share and [...]
  11. Simple Website Layout Tutorial Using HTML 5 and CSS 3 – Designzzz | Drakz Free Online Service - [...] here to read the rest: Simple Website Layout Tutorial Using HTML 5 and CSS 3 – Designzzz ...
  12. Simple Website Layout Tutorial Using HTML 5 and CSS 3 – Designzzz - [...] the rest here: Simple Website Layout Tutorial Using HTML 5 and CSS 3 – Designzzz Help us to improve! ...
  13. Simple Website Layout Tutorial Using HTML5 and CSS3 | css-image.com - [...] The Structure would be like this : view source [...]
  14. Html5 & CSS3 layout tutorials and templates - [...] 6. Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  15. HTML5 Website Layout Tutorials and Inspiration | AcrisDesign - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  16. HTML5 Website Layout Tutorials and Inspiration | DesignerWall - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  17. 10个Html5和CSS3结构的模版下载 | Booto'Blog - [...] 6. Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  18. 10个Html5和CSS3结构的模版下载 - Loo Design - [...] 6. Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  19. Fantastic Html5 Tutorials & Inspiration | Designer Wall - [...] View Tutorial [...]
  20. 17 Must Have HTML 5 Tutorials and Resources | Vector N Pixel - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  21. Mengenal HTML5 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  22. Aafrin.com - 10 Learn To Code Site In CSS3/HTML5 – Tutorial Resources - [...] 6. Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  23. 给网页设计师的30个HTML5学习资源-大前端 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5 最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  24. 给网页设计师的30个HTML5学习资源 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  25. 给网页设计师同志的30个HTML5学习资源 | 小cake的博客 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  26. 好东西：给网页设计师的30个HTML5学习资源 : 20g：互联网 产品 用户 体验 手机 写真 摄影 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  27. 60 Tutorials, Articles and Resources to get you Started with HTML5 - [...] Website Layout Tutorial: HTML5 and CSS3 [...]
  28. 30个HTML5学习资源，送给网页设计师 | Adobe CS5 - [...] Started（HTML 5 入门指导） How to Build Web Pages With HTML 5（怎样建立HTML 5网页） Simple Website Layout Tutorial Using HTML 5 ...
  29. 分享一些HTML5学习资料 - UED - CSS - HTML - aの碎碎念 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  30. 给网页设计师的30个HTML5学习资源 - WebGIS开发 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  31. 给网页设计师的30个HTML5学习资源 | 行了 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。 [...]
  32. 15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com - [...] 15. Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  33. ” 30个给网页设计师的HTML5学习资源– HTML5,CSS3,WEB前端设计开发资讯站 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南） [...]
  34. The Ultimate Roundup of Indispensable and Helpful HTML5 Tutorials - [...] 10.Simple website layout tutorial [...]
  35. The Ultimate Roundup of Indispensable and Helpful HTML5 Tutorials - Programming Blog - [...] 10.Simple website layout tutorial [...]
  36. The Ultimate Roundup of Indispensable and Helpful HTML5 Tutorials | Cairns Web Design - [...] 10.Simple website layout tutorial [...]
  37. 30个HTML5学习资源 | Insbire's Blog - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南） HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  38. 关注Z频道 引领X风潮 » 给网页设计师的30个HTML5学习资源 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  39. 网站开发人员30个HTML5学习资源 « i在云端 - [...] Started（HTML 5 入门指导） How to Build Web Pages With HTML 5（怎样建立HTML 5网页） Simple Website Layout Tutorial Using ...
  40. 给网页设计师的30个HTML5学习资源 | 半兽人的网络家园-谢洪波的电子商务博客 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5 最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  41. 30个HTML5学习资源，送给网页设计师 - 科技热 - [...] Started（HTML 5 入门指导） How to Build Web Pages With HTML 5（怎样建立HTML 5网页） Simple Website Layout Tutorial Using HTML 5 ...
  42. 30个HTML5给网页设计师的学习资源 « 零博客 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5 最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  43. 30多个资源可帮你开始学习HTML5 | LuFree网页游戏开发网 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  44. 体验一下HTML5和CSS3网站设计 | Wordpress用户体验设计 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3 [...]
  45. 给网页设计师的30个HTML5学习资源 | 虎鲸趋势 - [...] Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5 最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下 [...]
  46. 30多个资源帮你学习HTML5 | 我爱互联网|woiweb|专注互联网设计与开发 - [...] Started（HTML 5 入门指导）How to Build Web Pages With HTML 5（怎样建立HTML 5网页）Simple Website Layout Tutorial Using HTML 5 and CSS ...

Leave a Reply

Show Your Last Blog Post via CommentLUV