HTML 5 Basic Layout Tags
Link to Practice Template CSS file
Create a folder to store your files. Open the Text Version. Copy into notepad. Save as practice.html.
Click on the Logo Image link. Right Click and do a Save As to put the logo into your folder.
In notepad create an empty text file named practice.css. Link your practice.html to your practice.css by typing this code in the head:
<link href="practice.css" rel="stylesheet" type="text/css">
Insert the logo image into the header.
<img src="html5extrafeatureslogo.jpg">
One at a time, copy each of the style definitions included in the Practice Template CSS file into your practice.css file. Save each time and refresh to see the page as it builds. Add links to the nav section. Add your own content to the page.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<!--Not an HTML5 tag, but many web designers create a div to contain all the content.-->
<div class="container">
<header>
Include an image logo or an H1 here.
</header>
<nav>
Put your links here.
</nav>
<aside>
This is for extra information. It is often floated to the right or the left.
</aside>
<article>
The article can contain one or more sections.
<section>
The section will include 1 or more paragraphs of content. It may also include images.
</section>
<section>
This is the 2nd section. You can add multiple sections.
</section>
</article>
<footer>
The footer may include the address tag and copyright information.
<address>
Address Content
</address>
</footer>
<!-- end .container --></div>
</body>
</html>
Below are links to the BEFORE and AFTER that show you the file before the styles were added and after the styles were added.