<!-- exercise_MobileHTMLTables.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Convert HTML with Tables to CSS.</title>
<style type="text/css">
div#wrapper {
width: 100%;
text-align: left;
border-style: solid;
border-width: 1px;
border-spacing: 2px;
border-color: black;
padding: 2px;
}
div#mainheader {
font-size: large;
vertical-align: top;
background-color: rgb(204, 153, 51);
color: white;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-spacing: 2px;
padding: 2px;
}
div.header{
vertical-align: top;
background-color: rgb(204, 153, 51);
color: white;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-spacing: 2px;
padding: 2px;
}
div.line {
vertical-align: top;
border-style: solid;
border-width: 1px;
border-spacing: 2px;
padding: 2px;
}
</style>
</head><body>
<div id="wrapper">
<div id="mainheader">
My Name
</div>
<div class="line">
John Doe.
</div>
<div class="header">
My Preferred Email Address:
</div>
<div class="line">
johndoe12345@yahoo.com
</div>
<div class="header">
Campus and Class Time
</div>
<div class="line">
Trafalgar Monday 2-5.00 p.m
</div>
</div>
<p> </p>
<p><strong>In-Class Exercise:</strong></p>
<ul>
<li>The page referenced by this link uses tables to format the page</li>
<li>Right click on image and View Source; Save file and bring up source into
an editor<br>
</li>
<li>Convert table to use <div>'s and styles</li>
<li>Create styles:<ul>
<li><id> style for border settings that encloses all other lines</li>
<li><id> style for main heading including settings for font size,
background colour, text colour, border, margins and padding</li>
<li><class> style for each information line including settings for
border, padding, and margins</li>
<li><class> style for other two heading lines including settings for
background colour, text colour, border, padding and margins</li>
</ul>
</li>
<li>Use <div> tags to specify each line and associate with a specific style
(Note: outer <div> will need to be used for outside border)</li>
</ul>
<p><strong>Check-Off:</strong></p>
<ul>
<li>When complete, show professor your finished image and your finished code</li>
</ul>
<p> </p>
</body></html>