Goofy Web - Building Web Pages

Build Page 01

Let's build a web page together. If you want to concentrate on CONTENT (that’s what you do best) and leave the structure to someone else (that’s what I do best), you are in the right place. A web page can be made by simply taking any text file and changing it's extension from ".txt" to ".htm". That's it. Done. Oops! That is too simple, but absolutely true.

Technically the web page should be structured using HTML tags like this:

<!DOCTYPE ...>
<html>
<head>
<title></title>

</head>
<body>

</body>
</html>

HTML tags are those things contained in angle brackets: "<" and ">". Some special character codes (beginning with "&" and ending with ":" will also be used. To keep this simple, we will discuss a short list of "tags" and "special characters" only as needed. Please print the full list of HTML tags and the special character list for your reference.

Begin by creating a text file that contains the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="search engine, words, and phrases separated, by commas">
<link href="build.css" rel="stylesheet" type="text/css">
<!-- [ A ] header stuff above * * * DO NOT CHANGE * * * -->

<!-- [ B ] window title -->
<title>My Web Pages</title>

<!-- [ C ] banner stuff * * * DO NOT CHANGE * * * -->
</head><body><div class="xpage"><div class="xbanr"><a href="goofy.htm" title=" Back to Welcome Page "><img src="goofy-web2.png" border="0" alt="Logo"></a><div class="xtitl">

<!-- [ D ] page title -->
My Page 01

<!-- [ E ] menu stuff -->
</div></div><div class="xmenu xout">
  <a href="mypage-01.htm" title=" Previous my page ">&lt; Previous</a>
  <a href="build-01.htm" title=" Back to build page ">Build Page</a>
  <a href="example-01.htm" title=" Example page ">Example</a>
  <a href="mypage-02.htm" title=" Next my page " >Next &gt;</a>
</div>

<!-- [ F ] page content -->
<div class="xdent xpad xclear">
You now have a fully functioning web page.&nbsp; Please right-click on this page and select "View Page Source(FF)" or "View Source(IE)" to see the source code.&nbsp; IE means "Internet Explorer" and FF means "Firefox".&nbsp; Note the eight sections marked A to H.
<p>Click on the "Example" button to see an explanation of these sections.&nbsp; Click on the "Building" button to return to the "Building Web Pages" instructions.</p>
</div>

<!-- [ G ] footer stuff * * * DO NOT CHANGE * * * -->
<div class="xfoot xclear">© Goofy Web | 9760 W Ohio Avenue | Lakewood CO 80226-4030 | 303-985-4645
<div class="xout"><a href="goofy-map.htm" title=" Goofy Web location "> Map &amp; Directions </a>|<a href="mailto:jimpool@erthlink.net" title=" Send e-mail "> Email to jimpool@erthlink.net </a></div>
<div class="xalt xpad">jimpool@erthlink.net</div>
<img src="happyface.gif" alt="Logo" class="xlogo xout">
</div></body></html>

<!-- [ H ] save as "mypage-01.htm" -->

Select the above box content ( right-click in box / Select All ).
Copy to your clipboard ( right-click in box / Copy ).
Open Notepad ( Start / All Programs / Accessories / Notepad ).
Paste to Notepad from your clipboard ( right-click / Paste ).
Save the Notepad file ( File / Save -- name the file "mypage-01.htm" and save it in your current directory ).
Close Notepad.

This is the last time that you will need to fetch Notepad to create a new file. From now on you will copy your previous work and deal with content. For this lesson series there are also a few minor navigation issues that will be addressed. Click on the "My Page" button at the top of this page to view your page and then return here to proceed. The "Example" button will dispay a page that shows what your page should look like and offers some explanations. Click on the "Next" button for the next build page.

Map & Directions | Email to jimpool@erthlink.net

jimpool@erthlink.net