Converting an HTML 4 Page to an HTML5 Page - Exercise

Contact Us or call 1-877-932-8228
Converting an HTML 4 Page to an HTML5 Page - Exercise

Converting an HTML 4 Page to an HTML5 Page

Duration: 15 to 25 minutes.

In this exercise, you will convert a basic HTML 4 page to an HTML5 page. The CSS documents have already been created for you, such that, when you're finished, your HTML5 page should render exactly like the HTML 4 page.

  1. Open html5-laying-out-a-page/Exercises/html4-layout.html.
  2. Save the file as html5-layout.html.
  3. Turn the page from an HTML 4 page into an HTML5 page. Make sure to change the stylesheet reference to point to style-html5.css.
  4. The solution should look like the screen shot below: HTML 4 to HTML5

Challenge

See if you can get your HTML5 page to look like the screen shot below without modifying the HTML at all: HTML5 Layout

Solution:

html5-laying-out-a-page/Solutions/html5-layout.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Layout - Exercise</title>
<link href="style-html5.css" rel="stylesheet">
</head>
<body>
<header>
	<hgroup>
		<h1>HTML5 Solutions</h1>
		<h2>HTML5 Products and Services</h2>
	</hgroup>>
	<img id="logo" src="Images/logo.png" alt="Logo">
</header>
<nav id="mainnav">
	<ul>
		<li>Home</li>
		<li><a href="">Products</a></li>
		<li><a href="">Services</a></li>
		<li><a href="">About</a></li>
	</ul>
</nav>
<div id="content">
---- C O D E   O M I T T E D ----
</div>
<aside id="partners">
	<div>
		<h3>Partner 1</h3>
---- C O D E   O M I T T E D ----

	</div>
</aside>
<footer>
	<p>&copy; Webucator, Inc.  All rights reserved.</p>
</footer>
</body>
</html>

Note that we will further improve this page with section and article elements later in the course.

Challenge Solution:

html5-laying-out-a-page/Solutions/style-html5-challenge.css
body {
	font-family:tahoma;	
}

header {
	display:block;
	padding:0px 0px 5px 0px;
	margin:0px 20px;
	height:80px;
	width:1030px;
	float:left;
}

header hgroup {
	display:block;
	float:right;	
}
---- C O D E   O M I T T E D ----
header #logo {
	float:left;
}

>nav#mainnav {
	display:block;
	clear:both;
	width:1030px;
	height:14px;
	margin:10px 0px 0px 20px;
	border-left:3px solid #ccf;
	border-bottom:3px solid #ccf;
	border-right:3px solid #ccf;
	padding:5px;
	background-color:#eee;
	font-size:small;
	letter-spacing: 4px;
	word-spacing:20px;
	text-align:center;
}

nav#mainnav ul {
	margin:0px;
	padding:0px;
}

nav#mainnav li {
	display:inline;
}

#content {
	margin:0px 20px;
	float:left;
}
---- C O D E   O M I T T E D ----
#content div h2  {
	clear:both;
	float:right;
	font-size:xx-large;
	color:#006;
}

#content>div {
	clear:both;	
}

#content div div {
	padding:10px;
	margin-bottom:10px;
	width: 700px;
	border:1px solid #006;
	font-size:small;
}

aside#partners {
	width: 275px;
	margin:40px 20px;
	display:block;
	float:left;
	background-color:#eee;
	border:3px solid #ccf;
}

aside#partners div {
	padding:5px;
	font-size:x-small;
}

aside#partners h3 {
	margin-bottom:0px;
	font-size:large;
	color:#006;	
}

footer {
	display:block;
	clear:both;
	margin:10px 20px;
	border-top:1px solid #006;
	font-style:italic;
	width:1040px;
	text-align:right;
}

a:hover {
	color:#f60;
}
Next