Simple Layout Using CSS 3 and HTML 5
What’s Covered in this tutorial:
- How to create simple HTML 5 Tags Layout
- Understanding of the Tags and their behaviors
- CSS3 for Rounded Corners and Text Shadows
For sure HTML 5 has created a big change on internet and give Adobe a tough time. Apple believes HTML5 is what will define for the www and would love to have more developers adopt it instead of using Flash. iPad and iPhone do not implement Flash and wait for HTML 5.
HTML 5 improves the web sites from design view of point and also search engine optimization etc. When it is combined with css3, it can make your web sites become very interesting.
The Most important additions in HTML 5 are tags like <header>, <footer>, <video>, <canvas>, <aside>, <nav>, <audio> etc. HTML 5 canvas include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more . Site layout can be simply understandable and in code, tags are simple to understand as well Like the few tags i listed above clearly described 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.
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:
<head><title>Your Page title</title></head>
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></nav>
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 operabackground:#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 for pixel in nav width instead of % – percentage. In this tutorial’s case you can add width=”960px” .
Then you 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></nav></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</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 Operatext-align:center;color:#ffffff;}
Download source code here
Incoming search terms:
- html5 aside css
- css3 sidebar
- html5 side navigation
- html5 side nav
- css3 aside
- html5 side menu
- html5 sidebar
- simple html5 layout
- html5 simple layout
- html5 navigation tutorial
