There are several ways to create a list with HTML. A list can use bullet symbols or numbers, with a variety of types for each.
Or, a description list can be arranged as terms and descriptions. The term is on a line by itself. The
description starts on the next line and is indented. In HTML 4 and earlier this kind of list was called a definition list. Other types exist but
are being phased out. These three are enough to handle most of your needs.
In the steps below you will practice with three basic types of lists.
A bulleted or numbered list requires two kinds of tags -
a tag pair that starts and stops the list - either:
<ul> </ul>for an unordered list using bullets
<ol> </ol>for an ordered list using numbers
<li> </li>for each list item in either kind of list
A description list needs three different tags -
<dl> </dl> to start and end a description list
<dt> </dt> for each term
<dd> </dd> for each description of the term.
(Yes, a term might have more than one description or definition, like many dictionary words do.)
All of the listed items must come between the start and close tags for the whole list. A logical arrangement! The ending tags for DT and DD were optional in HTML 4. But, if you have lists inside of lists, it is important to close all the tags to keep the browser from getting confused.
Programming code is usually viewed in some kind of monospaced font. In this kind of font every character takes the same amount of horizontal space, like typewriter characters do. (Have you ever actually typed on a typewriter??)
Using a monospaced font makes it easier to read each character, especially punctuation, when you are looking for a typing error.
A monospaced font makes it easier to count the characters when you get an error message about Line 247, character 143!
A good font for code should leave a lot of white space between lines and should have distinctly different characters. The test is whether or not it is easy to tell the difference between a zero 0 and the letter O or a lower case letter l and the number one 1. Also, a good font makes it easy to tell the difference between a comma , and a dot . and between a semicolon ; and a colon :.
Inspect the examples below. The key characters (number zero, letter O, letter l, and number 1) have been marked.
Which font has the best line spacing? the best character differences?
The original code was aligned while in the font Consolas and then formatted with the other fonts with word wrap turned on. This changes the way the text wrapped in the window. You can tell better this way which font will take more space on the screen and on a print out.
Step-by-Step: Create & Modify a List
|What you will learn:||to configure Notepad
to create an HTML document in Notepad
to create a bulleted list
to print source code and HTML page
to create a numbered list
to create a terms and definitions list
Starting with this lesson you will build a web page for Hector Chavez. You will be working directly with the HTML code. No fancy editors needed! You can do it yourself!!
Problem: Consolas is not in list
Consolas is a font that comes with recent versions of Windows and of Microsoft Office. It is also available in the free PowerPoint 2007 Viewer!
1: Download PowerPoint 2007
Solution 2: Use a different font of your choice or your teacher's choice.
You almost certainly have some kind of monospaced font on your computer like Courier or Courier New, but it's your own choice. If you use a different font, your code will probably not wrap the same as the illustrations. But that is not important!
Save the document to the web project2 folder on your Class
disk as hector1-Lastname-Firstname.htm .
The full path is g:\class\web project2\hector1-Lastname-Firstnamehtm if G is the drive letter for your Class disk.
Open and Save As dialogs: By default these dialogs only show text files (with extension txt). The HTM file you just saved won't show up! It is quite a shock when you know you have files that Notepad will open but you cannot see them! Happily, the dialog will let you change the file types box to 'All Files (*.*)'.
You will now enter some text and make a list. To show a bullet in front
of each item in the list, you start the list with the tag
from "unordered list" in English. End the list with
Each item in the list starts with the tag
<li>, from "list item" in English, and ends with
</li>. The tag
<li> does not actually require an ending tag but it is
a good idea as it makes it clearer to the browser what you want to see. It is likely that closing tags will required in
future HTML versions. In complex nested lists, having an ending
</li> is definitely important even now.
<h1>Home page of Hector Chavez</h1>
<h2>My house is your house!</h2>
<p>Here are my hobbies.</p>
Your own name should be in the
<title> tag and
it should show in the file name in the header.
If your page does not look right, open the page in Notepad again and
check the typing of the tags. Did you close the ones that must be
closed? Did you include the required tags <html>, <body>, and their
closing tags? Are all the parts in the right order?
To number the items in a list, start the list with the
<ol> from "ordered list" in English. End the list with
</ol>. The items in the list are the same as in the bulleted
list. You can change an existing list from bullets to numbers or vice
versa by changing the start and end tags.
<ol>and the tag
Since you just saved to the web project2 folder, the dialog should show the web project2 folder still. If you took a break and the correct folder is not showing, you can navigate to the correct folder or you can type in the full path g:\class\web project2\hector2-Lastname-Firstname.htm where you should replace 'g' with the correct drive letter for your Class disk and use your own name.
In a list of definitions or descriptions, the term or phrase is on one line and the definition or description is on the next line but indented from the margin. So a description list needs three different tags instead of just two:
<dl> </dl>to start and end the list.
<dt> </dt>for the term.
<dd> </dd>for the description or definition of the term. This line must come immediately after the term line.
This kind of list was formerly called a definition list but was used more often for other things. So HTML5 calls this kind of list what is was being used as, a description list.
You will now add some text and change your numbered
list to a description list.
Later you will fix this up with CSS styling.
<dt> </dt>and create a blank line below each one.
Word Wrap: When Word Wrap is off, your lines run off to the right until you start a new line!
Since you recently saved to the web project2 folder,
the dialog should show the web project2 folder still.
If it does not, you may type in the full path g:\class\web project2\hector3-Lastname-Firstname.htm where you must
replace 'g' with the drive letter for your Class disk and use your own name.
It is pretty common to have a list that contains other lists. For example, in a weekly To Do list you would expect to see each day of the week with its own list of tasks for that day. And some of those tasks might be lists themselves! HTML handles that quite nicely. You can even pick different styles for the nested lists.
You can nest a list inside a different kind of list, like having a numbered list inside a bulleted list.
Closing Tags: Be extra careful about including your ending tags in nested lists. If you leave one out, the browser will think that the text that follows is part of the list. You may have a lot more bullets or numbers than you intended.
|Examples of nested lists|