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:

Change the title, and save the new file as `likes.html`.
Copy the navigation area and picture from `aboutme.html`, changing the links and picture, and removing the caption.
Copy the bottom navigation, modifying those links.
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:

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:

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.

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

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.