Step 1: Basic HTML 5 Tutorial
This is what we are going to create in this step by step tutorial. Click on the image to view the website in new tab.
Basic HTML5 - Step 1.1
First of all, lets decide the contents of the website we are going to build.
It will have the following.
- One Header
- Two Articles
- One Side-bar Navigation
- One Featured Panel
- One Footer
Basic HTML5 - Step 1.2
Now that we now what we need, its time to create a rough prototype in HTML5.
Just basic knowledge about HTML5 is enough to create a rough prototype. Its just adding tags one by one based on what we need.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Website Step by Step Tutorial</title>
<meta charset="utf-8" />
</head>
<body>
<header>
<nav><ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul></nav>
</header>
<div>
<div>
<article class="Top">
<header>
</header>
<footer>
</footer>
<content>
</content>
</article>
<<article class="Bottom">
<header>
</header>
<footer>
</footer>
<content>
</content>
</article>
</div>
<aside>
<h2>Navigation</h2>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</aside>
<aside>
<div>
<h2>Featured</h2>
</div>
</aside>
</div>
<footer>
<p>Copyright © 2013 - www.ieatcss.com</p>
</footer>
</body>
</html>
The above code is a rough prototype with only HTML5.
HTML comments are not used to explain code otherwise the code will look messy and will be hard to understand, HTML comments will be used in the later tutorials.
Code explanation is given below using table.
Tags like header, article, footer, nav, etc. are all similar to div tag, it just makes the code more understandable to human and search engine.
| Tag | Description |
| <header> | It is used to group the header elements like logo, navigation, etc. |
| <article> | It is used to group elements into a section, it is mostly used in blogs to enclose articles inside <article> tag. |
| <aside> | It is used to group elements like side-bar navigation, etc. Anything that goes on the side can be put inside this tag. |
| <nav> | It is used to create a group of navigation links. |
| <footer> | It is used to group the footer elements like copyright, etc. |
Basic HTML5 - Step 1.3
In this step class attributes will be assigned to the HTML elements in order to apply CSS using class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Website Step by Step Tutorial</title>
<meta charset="utf-8" />
</head>
<body class="body">
<header class="pageHeader">
<nav><ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul></nav>
</header>
<div class="Main">
<div class="content">
<article class="Top">
<header>
</header>
<footer>
</footer>
<content>
</content>
</article>
<<article class="Bottom">
<header>
</header>
<footer>
</footer>
<content>
</content>
</article>
</div>
<aside class="top-sidebar">
<h2>Navigation</h2>
<ul class="navigation">
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</aside>
<aside class="bottom-sidebar">
<div class="featured">
<h2>Featured</h2>
</div>
</aside>
</div>
<footer class="pageFooter">
<p>Copyright © 2013 - www.ieatcss.com</p>
</footer>
</body>
</html>
Basic HTML5 - Step 1.4
Basic HTML5 is now complete, add some sample content and Step 1 is complete.
Now the website will look like this. Click on the image to view the website in new tab.
