Home: Create Webpage | View actual HTML code | View actual CSS code | Setup Site

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.

HTML code for this page
Created in Expression Web

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>
   <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" />

<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 -->