This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
Adding Content in an Unordered List
Now we’re going to add some content. Let’s make a list of your favorite musical artists, rappers, or groups. Think of three. In my example, I’m going to pick three old-school rock bands I grew up listening to. You pick three of your favorites and use them instead.
Now, we’re going to put them in a list. Put this under your short biographical paragraph. Type this EXACTLY.
<ul> <li></li> <li></li> <li></li> </ul>
The UL stands for “unordered list.” Basically, that means it isn’t in 1-2-3 order. The <li> </li> creates each list item.
Now fill in your lists with your three favorite artists or groups.
<ul> <li>Deep Purple</li> <li>Led Zeppelin</li> <li>The Who</li> </ul>
Yes, I know, I’m old.
Save your file.
Refresh your browser with your file open, and see what’s different.
Putting a Heading Over Our List
Your ordered list doesn’t make much sense just sitting there by itself. Let’s put a heading over it to tell what it is. We don’t want this heading to be as big as the first one on top of our page. So let’s write this. Put it right on top of your list.
<h2>My Three Favorite Musical Bands</h2>
Save your file. Refresh your browser with your file open, and see what’s different.
If you want to change that heading from “My Three Favorite Musical Bands” to “Three Smooth-Singin’ Doo-Wop Quartets” or something else more applicable to your list, go right ahead.
When you become a bit more proficient in making Web pages, you will want a big, beautiful, highly styled navigation list — maybe a horizontal bar of buttons, a vertical lists of clickable images, whatever. Guess what? You will use our new friend, the "unordered list," to make those navigation lists. Of course, you’ll need plenty of help from your stylesheet, maybe some images, maybe even some JavaScript. But that comes later.
Styling The H2 Headings
Those <h2> headings need some styling. Let’s give them a nice color to go with the blue background. (I found the color, like most of my colors, from the December.com Hex Hub, with some help from Adobe’s indispensible Kuler color scheme creator.)
I decided on this color: #754719. You can, of course, choose your own color.
To designate the h2 color as #754719, add this to your stylesheet:
h2 {
color: #754719;
}
See what you think. Spiffy!
