Reviews and recommendations on this web site, including web hosting reviews, may result in commissions paid to the Dave's Site. Follow on Twitter @firstdave
Check Out my new PhoneGap Tutorial / Cordova Tutorial


Hosting Tutorial - Table of Contents

This course was developed in much earlier days of the web and has been updated into Web Design Basics for iPad (same Dave, much better course!)
iPage Web Hosting -- Go Green for only $1.99/mo.
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5


Learn Web Design, Coding, & More.

Chapter 20

Using Paragraphs for Alignment and Separation, and Opening Links in New Windows

HTML Guide - Chapter 18 - Chapter 19 - Chapter 20 - Chapter 21 - Chapter 22 - Chapter 23

Planning and creating the next page

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:

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

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

Home
About Me
My Likes
My Passions
My Bookmarks
Dave as a kid
First Family Computer

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.

Opening Links in New Windows and Finishing the Page

All external links can have a target. You might remember these from the frames chapters. If you want a link to open in a new browser window, just add target="_blank". Example:

<a href="http://www.cancersurvivorbook.com/" target="_blank">My Cancer Survivor Book</a>

Try the link: My Cancer Survivor Book

Our page finishes with navigation links (modified for this page by adding the Home link and removing the About Me link.

<h3 align="center">[ <a href="index.html">Home</a> - About Me - <a href="likes.html">My Likes</a> - <a href="passions.html">My Passions</a> - <a href="bookmarks.html">My Bookmarks</a> ]</h3>

View the completed aboutme.html web page.

Previous Chapter (19) | html index: html code guide | Next Chapter (21)
Copyright © 2005 Dave Kristula. All Rights Reserved.
All trademarks are the sole property of their respective owners.