Left column info goes here:
This section is the left_col div
See div id="left_col" at right
You could build this page (and this mini site) by copying the html code shown at right, and the actual CSS code on the next page and then saving them in the same folder as Page1.htm and siteLayout.css.
Below is the actual HTML code for this page:
Basically, this section is the
<div id="page_content">, see below.
Its layout and style is defined in a separate external css
file called siteLayout.css
<!DOCTYPE html>
<html>
<head>
<title>Expression Web HTML Code</title>
<meta name="author" content="Professor Floyd Jay Winters" />
<meta name="description" content="Using Expression Web to build a
Web site with Div setup and a Cascading Stylesheet" />
<meta name="keywords" content="Expression Web, CSS, Div Tags" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="siteLayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead"> <!-- All masthead content comes from .css -->
</div>
<!-- Close masthead -->
<div id="top_nav"> <!-- change to html5 nav element -->
<a href="index.htm">Home</a> |
<a href="htmlCode.htm">View HTML code</a> |
<a href="cssCode.htm">View CSS code</a>
</div> <!-- Close top_nav -->
<div id="container">
<div id="left_col"> <!-- change to aside element -->
<p>Left column info
goes here:</p>
</div> <!-- Close
left_col -->
<div id="page_content"> <!-- change to section -->
<h1>HTML code for this page<br>
Created in Expression Web</h1>
<p>Your main content goes here. In this
demo I wrote:
"Below is the actual HTML code for
this page:"
and then pasted the actual HTML code shown
here.</p>
</div>
<!-- Close page_content (right_col) -->
</div>
<!-- Close container -->
<div id="footer"> <!-- change to footer element -->
</div>
<!-- Close footer -->
</body>
</html>