|
The "About Me" page is relatively straightforward. We just open the layout.html file we created in Chapter 18, change the title, save the file as aboutme.html, and start adding our content.
|
|
Click here if you'd like to see the completed page we're creating in this chapter.
This page will consist of just a few pieces:
- Header graphic/link
- A New Navigation Table
- A New Graphic
- Paragraphs of Text
- Bottom navigation
Here's the code so far, notice I changed the title:
<![CDATA[
<html>
<head>
<title>Dave Kristula's Internet Home - About Me</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF0000">
<div align="center">
<table width="730" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<a href="index.html"><img src="topheader.gif" width="700" height="100"
alt="Internet Home of Dave Kristula" border="0"></a>
</td></tr>
</table>
</div>
</body>
<html>
]]>
This page is going to look a bit like our main page, but instead of a picture on the left and a heading of text on the right, we're going to have a Navigation area on the left and a picture on the right. Instead of re-inventing the wheel, I'm going to copy the table from our main page.
I copied the code and modified it:
<![CDATA[
<div align="center">
<table width="75%" border="0" cellpadding="3" cellspacing="5">
<tr>
<td align="center">
<a href="index.html">Home</a><br>
About Me<br>
<a href="likes.html">My Likes</a><br>
<a href="passions.html">My Passions</a><br>
<a href="bookmarks.html">My Bookmarks</a><br>
</td>
<td align="center" valign="middle">
<img src="davekid.jpg" width="300" height="150" alt="Dave as a kid"><br>
First Family Computer</td>
</tr>
</table>
</div>
]]>
Please notice the <br> after each link--this makes each link fall on a new line, instead of beside each other.
Also note that I've added a link to index.html around the text "Home" and that there is no link around "About Me"--we're going to edit every page that follows in the same way: deleting the link around the current page, and adding a link around every other one. It's a simple copy and paste.
The picture is straightforward, I just added a <br> to add a "caption" under it.
Here's what our new navigation area and picture look like:
After this table, I copied and pasted my life's story (just kidding--I don't give that away free!) from Microsoft Word and added a <p> before each paragraph and a </p> after each paragraph.
You'll be able to read my short autobiography when you view the page at the end of the chapter.
| 
