LEARN HTML IN AN HOUR

README
HTML Lesson 1: The Bottom Line
HTML Lesson 2: The Easy Tags

HTML LESSON 3: LISTS AND LINKS


HTML Lesson 4: Images
HTML Lesson 5: Colors and Fonts
HTML Lesson 6: Tables
HTML Lesson 7: Forms
HTML Closing Comments/Useful Links


Back to Web Design

The next elements I will show you are lists and links. You need lists so that your oh so important information will be organized. And you need links so that when someone is tired of your web page they can go somewhere else. I will also discuss nonprinting characters in this section.

There are 2 types of lists which look very similar: unordered lists and ordered lists. An ordered list is a 1, 2, 3 list. An unordered list uses bullets. The tags are <ul> </ul> for unordered list, and <ol> </ol> for ordered list. <li> is an empty tag for list item. (Remember, empty tag means it doesn't need an end tag.)

Here's how it looks:

<ul>
<li> first item
<li> second item
<li> third item
</ul>


There are 3 types of bullets for unordered lists:

disc (the default)
circle
square

If the type is defined in the <ul> tag, it will apply to the entire list. The attribute can also be used in the <li> tag. Example:

<ul type="circle">
<li> first item
<li type="square"> second item
<li> third item
</ul>

When you put the attribute in the <li> tag, it only affects that tag. By the way, you don't have to indent these, I just think it makes it easier to read. You can type the whole thing on one line if you want.

For ordered lists, the types are

I - Roman numerals (I, II, etc.)
A - Capitalized letters
a - Noncapitalized letters
1 - numbers (this is the default)

The ordered list has another attribute: start. By default (amazingly) the browser will assume you want to start with "1" or "A" or "a" or "I". But if you want to start with a different number you can. So start = "3" tells the browser to start with III or 3 or C or c. Example:

<p> My grocery list</p>
<ol start = "12">
<li> dairy products
<li> meat
<li> cereal
</ol>

There is also a value attribute. You use the value attribute inside the <li> tag to reset the value of that item. The next item will have a value one more than the value you set. Here is a useful example. Let's suppose that I don't like the number 2 because I was the second child. And let's suppose that I want to publish my grocery list on the internet with very odd numbering so that people who see it will be confused.

I can do this:

<p> My grocery list</p>
<ol>
<li> dairy products
<li value = "3"> meat
<li> cereal
</ol>

You can also put lists inside lists, like this:

<p> My complicated grocery list</p>
<ol type = "I">
<li> dairy products
<ol type = "A">
<li> Healthy dairy products
<ol type = "1" start = "3">
<li> yogurt
<li> skim milk
</ol>
<li> Unhealthy but essential dairy products
<ol type = "a">
<li> ice cream
<li value = "3"> more ice cream
<li> lots more ice cream
</ol>
</ol>
<li value = "3"> meat
<li> cereal
</ol>

This can get complicated so you may want to look at the attached text file instead of the file below. (text file, lesson 3a) In the text file, I have lined up the opening and closing tags for each list so that you can match them up. Here is a good place to look at what we have done so far. Copy the following into Wordpad, save as Lesson3a.htm, and open it with your browser. Look at the code and see what it does.

-----------------------------------------------------------------------
<html>
<head>
<title> Lesson 3A Lists </title>
</head>
<body>
<h1> Some lists </h1>

<p> My list </p>
<ul>
<li> first item
<li> second item
<li> third item
</ul>
<hr>
<ul type="circle">
<li> first item
<li type="square"> second item
<li> third item
</ul>
<hr>
<p> My grocery list</p>
<ol start = "12">
<li> dairy products
<li> meat
<li> cereal
</ol>
<hr>
<p> Another grocery list</p>
<ol>
<li> dairy products
<li value = "3"> meat
<li> cereal
</ol>
<hr>
<p> My complicated grocery list</p>
<ol type = "I">
<li> dairy products
<ol type = "A">
<li> Healthy dairy products
<ol type = "1" start = "3">
<li> yogurt
<li> skim milk
</ol>
<li> Unhealthy but essential dairy products
<ol type = "a">
<li> ice cream
<li value = "5"> more ice cream
<li> lots more ice cream
</ol>
</ol>
<li> meat
<li> cereal
</ol>

<dl> The secret third type of list, described below </dl>
<dt> <b> ordered list </b>
<dd> <i>a list with numbers or letters</i>
<dt> <b>unordered list</b>
<dd> <i>a list with bullets</i>
<dt> <b>definition list</b>
<dd> <i>a list of terms and definitions</i>
</dl>

</body>
</html>
-----------------------------------------------------------------------
Notice the last list. There is one more type of list: a definition list. The tag is <dl> </dl>. Instead of just one empty tag (like the list item tag) it has 2. The tags that go inside the definition are <dt> for definition term and <dd> for definition description. Do you still remember the bold and italics tags? You can use these on any text in your html including around list items.


LINKS

Now let's look at links. Personally, I think the tag format for links is harder to remember because they are called "anchors" so the tag is <a> </a>. Unlike most tags, you pretty much have to use an attribute or the link won't link to anything. This attribute is href. This stands for hypertext reference, and it is the destination of the link (I would call it the target but there is something else called a target so it would be confusing later.) A link can be internal or external. For external links, the reference will be the address of the page you are linking to, such as:

<a href="http://www.lareaonline.com"> Larea Online </a>

The text between the two anchor tags is the text that will show up on the actual web page. It will be underlined and if you click on the words Larea Online on the web page, the browser will take you to the http://www.lareaonline.com.

Another attribute for the anchor tag is target (bet you're surprised.)

target="_blank" Load the linked document into a new blank window. This leaves the current page open and opens a new window.
target="_self" (Default) Load the linked document into the window where you clicked the link.
target = "_top" Load the linked document into the topmost window. You
would use this if you had a frame on your page (a page inside a page). Otherwise this will just load into the same window.


Internal Links: To make an internal link, you will need 2 sets of anchor tags. The first set is like the external link, except that it has the # sign and then a name instead of the web page address. This tells the browser to look for another set of anchor tags with that name. Here is how it looks:

<a href="#Part2">Go to Part 2</a>
<a name="Part2"> Part 2</a>

Here is a sample page showing this in action. Name this file lesson3b.

---------------------------------------------------------------------
<html>
<head>
<title> Links</title>
</head>
<body>
<p> Here is an external link. You will need to hit the back button after you click this link. Otherwise, you will be lost forever.</p>
<a href="http://www.lareaonline.com"> Go to Larea Online Home</a>
<h3> Part 1</h3>

<a href="#part2">Skip Part 1 and Go to Part 2</a>
<p>here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works</p>
<p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p>
<p>here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works</p>
<p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p>
<p>here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works</p>
<p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p>
<p>here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works</p>
<p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p> <p>&nbsp</p>
<p>here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works here is some random text so you can see how this works</p>

<a name = "part2"> </a>
<h3> Here you are at Part 2 </h3>
<p> more random &nbsp &nbsp &nbsp text </p>
</body>
</html>
---------------------------------------------------------------------

You may notice I snuck something new in here. Since html ignores multiple spaces, "&nbsp" is how you make it skip an extra space. Putting this code inside paragraph tags makes the browser skip extra lines. This type of code is called a nonprinting character. NBSP stands for nonbreaking space. If used by itself, it does not cause a line break, just an extra space. An example of this is in the last line of the above page. You can also use codes for characters that are reserved by HTML. For example, if you want to put a < or > in your text, your browser will think there is a tag coming and get confused. Instead you use the code and everything works. Other nonprinting characters are:

&lt for less than (< )
&gt for greater than (>)
&amp for ampersand (&)
&quot for quote (")


Next: HTML Lesson 4: Images