Dave's Site - Millions Served.
<Table of Contents>

Chapter 21

Using Embedded Lists and Internal Page Links

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

Checklist for Creating Our Next Page

For the "My Likes" page, we're going to start out with layout.html, and do the following things to it:

  1. Change the title, and save the new file as likes.html.
  2. Copy the navigation area and picture from aboutme.html, changing the links and picture, and removing the caption.
  3. Copy the bottom navigation, modifying those links.
  4. Finally! Add the list of likes and an internal link system. (This part is easier than it sounds.)

I did steps 1 through 3, which should be straightforward (copy, paste, and type changes).

At this point, you can see why many professional designers use a program like Macromedia Dreamweaver (Buy@Amazon)--it can really speed things up by using "templates." But, knowing HTML and CSS is important if you want to use a program like Dreamweaver.

Here's the code after steps 1 through 3 have been completed:

<html> <head> <title>Dave Kristula's Internet Home - My Likes</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> <div align="center"> <table width="75%" border="0" cellpadding="3" cellspacing="5"> <tr> <td align="center"> <a href="index.html">Home</a><br> <a href="aboutme.html">About Me</a><br> My Likes<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="thingsilike.gif" width="300" height="150" alt="Dave's Likes"></td> </tr> </table> </div> <h3 align="center">[ <a href="index.html">Home</a> - <a href="aboutme.html">About Me</a> - My Likes - <a href="passions.html">My Passions</a> - <a href="bookmarks.html">My Bookmarks</a> ]</h3> </td></tr> </table> </div> </body> </html>
Using Embedded Lists

Embedded lists are really easy to use: you simply put a whole new list inside a single <li> of a bigger list. Here's an example:

<ul> <li>Food <ul> <li>Italian <li>Tacos </ul> <li>Music </ul>

  • Food
    • Italian
    • Tacos
  • Music

See, that wasn't hard!

Using Internal Page Links

Internal page links, as covered in Chapter 9, are a little more difficult, but easy when you get the hang of them.

Have you ever seen a # after a web page address? It means "go to the part of the page named after the #."

So if you have a link to likes.html#Food, it'll load likes.html, and then show the portion of the web page named Food--but--and a big but--you must use a special code to name that section. But it's easy, it's just <a name="section_name_here">. Please note that there is no # in the <a name>.

Here's how it works... let's use our list example. We'll create two internal links, Food and Music.

<a href="#Food">Food</a> <a href="#Music">Music</a>

Now, in our list, we need to add the <a name>. (Can you see why they call <a> the anchor tag?)

<ul> <li><a name="Food">Food <ul> <li>Italian <li>Tacos </ul> </ul> <li><a name="Music">Music </ul>

Take a look at likes.html to see how Embedded Lists and Internal Page Links work!

Caution: Internal Page Link names are case sensitive in some web browsers. If your link is to Food, don't call the section food.

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