Here I will break down our first build of the Web Page From Scratch web page.
<!-- The DOCTYPE - These first lines tell the browser what standard to use to interpret the web page that follows. Although XHTML was reported to be the next standard for web page design, it has been slow in coming and looks now to not live up to the hype. For proper web page design, it is perfectly correct to use HTML 4.01 Strict doctype. An XHTML DocType should only be used when XML data constructs are used within the web page. -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--The HEAD section allows communication with the web server and browser, telling them what type of page is include (meta-content) and what language the page is in (charset). A page title and many other thigns can be placed in the HEAD. Any scripts or in page styles woould go in the HEAD. -->
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Web Design SIG</title>
</head>
<!-- The BODY tag is where out web page content acutally starts. Everything from here must be HTML, comments or a scripting language like JavaScript or PHP. -->
<body>
<!-- A DIV is a container for other parts of the page content. A DIV is a BLOCK type tag. A BLOCK tag can contain other BLOCK tags or INLINE tags. A BLOCK tag usually has default upper and lower margins or padding assigned and other attributes depending on the tag. Other BLOCK tags include the <p>(paragraph) and <ul>(unordered lists). -->
The "header" DIV will contain our logo and site name. We can style this page however we want. Adding color and font styling will be up to you. This will be done in part 2
<div id="header">Web Design SIG</div>
The navigation DIV is created using an unordered list. To get this in shape we have to do some CSS styles in Part 2 and Part 3.
Inside the list item tag <li>, LINK tags (<a href=>) were used.
<div id="nav">
<ul>
<li><a href="html.html">HTML</a></li>
<li><a href="CSS.html">CSS</a></li>
<li><a href="PHP.html">PHP</a></li>
<li><a href="Javascript.html">Javascript</a></li>
</ul>
</div>
The next DIVs are placeholders for our content. This is where the meat of the page goes. Some styling wil also take place here as we look at 1-, 2- and 3- column layouts, fixed and elastic page styles.
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
The last DIV is the footer, which could contain a simple menu, a link to the site map, copyright and contact information. I used an unordered list here along with some LINK (<a href=>) tags.
<div id="footer">
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="mailto:webmaster@pc3.org">Web Designer</a></li>
</ul>
</div>
At the end of the page we close our BODY and HTML tags that we started with. This indicates to the browser that the page has been completely loaded into memory.
</body>
</html>