Lesson 2
Lists, Links, and Images

Tags for this lesson are listed below:

• paragraph tags <p> </p>,
  
• line break tag <br> (no closing tag)
  
• ordered list tag <ol> </ol>
  
• unordered list tag <ul> </ul>
  
• definition list tag <dl> </dl>
  
• just a start on the table tags <table> </table>.
  

The table tag is the more difficult because is involves some additional tags used to create the table so we'll get to all of that later.

The paragraph tag is pretty easy to understand, yet it might not do exactly what you expect it to do. The basic usage is as follows:

<p>
Here is a bunch of text inside of the paragraph tags that might go on for several lines but I don't really have anything to say so this doesn't go on for as long.
</p>

These tags will create a space before the text that is inside of the tags. It won't indent the paragraph however. Hmmm, isn't there a way of indenting paragraphs in HTML? Yes, but that comes later.

Copy and paste the following paragraph into your html document (the one from lesson one). Put this new paragraph after the heading but before the unordered list:

<p>
Actually you can write anything you want inside the paragraph tags and it will simply be displayed as regular text. The only thing that will happen is the paragraph tag will create a space before the paragraph starts. Although is a good habit to put in a closing tag, it is not required and if you write another opening paragraph tag before closing the first paragraph then it will work the same as if you had written the closing tag. In other words the closing tag is optional. ALL of the tutorials I've seen suggest that you DO use the closing tag. I usually don't..
</p>

------- stop copy before this line ---------

Yes, things can get mighty strange when you open the hood and take a look inside. You don't have to totally "get it" regarding escape codes right now, just understand that some characters (such as "<" and ">") have a special meaning and will confuse the browser into trying to interpret the text as HTML code if you don't use the escape code replacement for those characters when you want those characters to appear in the web page itself. In the paragraph above, the first use of <p> is the opening paragraph tag. It won't be seen, but it will modify the layout by adding the extra space before the paragraph starts. Then next line the jibberish starts: "&lt;p&gt;". This is "<p>" in escape code talk. The browser doesn't "understand" that we are merely talking about a paragraph tag, not trying to use a paragrph tag, hence we have to use the escape code version to deal with the stupid browser's lack of intelligence. Along the same lines, what does the jibberish "&lt;/p&gt;" mean to the browser?

Fortunately, escape codes aren't used all that often. You can avoid the entire mess by simply typing in something different that doesn't use the "<" or ">" characters.

After you have the paragraph finished, SAVE. (don't close, we're not done yet)

Now change the unordered list tags <ul> </ul> to ordered list tags <ol> </ol>. You can simply change the "u" to an "o" if you want. SAVE.

------

Now open your browser and open the html document.

Observe the results.

Ordered List will automatically number the list starting with the number 1. If you want to start at a number other than "1", you can designate a starting number. Here is the basic format for an ordered list, this example has a starting number of 10.

Sandwiches
<ol start=10>
<li>Ham on Rye
<li>Tuna
<li>Bacon, Lettuce, Tomato
</ol>

It looks like this:

Sandwiches

10. Ham on Rye
11. Tuna
12. Bacon, Lettuce, Tomato

You can use roman numerals or letters instead of arabic numbers if you want.

Sandwiches
<ol type=I>
<li>Ham on Rye
<li>Tuna
<li>Bacon, Lettuce, Tomato
</ol>

It looks like this:

Sandwiches

1. Ham on Rye
2. Tuna
3. Bacon, Lettuce, Tomato

Sandwiches
<ol Type=A>
<li>Ham on Rye
<li>Tuna
<li>Bacon, Lettuce, Tomato
</ol>

It looks like this:

Sandwiches

1. Ham on Rye
2. Tuna
3. Bacon, Lettuce, Tomato

You can use lower case roman numerals and letters also. I'll let you experiment.

<ul type=disc>
<li>Renaissance
<li>Baroque
<li>Classical
</ul>

It looks like this:

• Renaissance
• Baroque
• Classical

<ul type=circle>
<li>Renaissance
<li>Baroque
<li>Classical
</ul>

It looks like this:

• Renaissance
• Baroque
• Classical

<ul type=square>
<li>Renaissance
<li>Baroque
<li>Classical
</ul>

It looks like this:

• Renaissance
• Baroque
• Classical

You can even give each list item a different bullet if you want.

<ul type=disc>
<li>Renaissance
<li type=square>Baroque
<li type=circle>Classical
</ul>

• Renaissance
• Baroque
• Classical

<dl>
<dt>Fortitude
<dd>Strength of mind allowing one to endure pain or adversity courageously
<dt>Fortune
<dd>A hypothetical, often personified force or power that favorably or
unfavorably controls the events of one's life.
</dl>

It look like this:

Fortitude

Strength of mind allowing one to endure pain or adversity courageously

Fortune

A hypothetical, often personified force or power that favorably or unfavorably controls the events of one's life.

<a name="sectionName"></a>

Then you can use the href anchor tag to jump to that new location on the same page.

<a href=#sectionName></a>

The "#" is essential in the code. All of the navigation links in these lessons use this type of <a name="sectionName"> and <a href=#sectionName> combination so that you can quickly jump around to different sections. You can use any name or number you want, you simply have to be sure to use the same name in both the <a name> tag and the <a href> tag.

Try this out. Using the "test.html" document you have been editing, type this line near the top of the page after the BODY tag:

<a name="top"></a>

Then type the next line near the bottom of the page before the closing /BODY tag:

<a href=#top>Back to the Top of the Page</a>

This code should create a "link" at the bottom of the page with the words "Back to the Top of the Page". When you click on those words you will jump back to the top of the page. Links are one of the most useful and powerful aspects of HTML.

The <a href> tag is also used to link to a different page using the following format:

<a href="fileName.html">Go to New Page</a>

The text "Go to New Page" is arbitrary, anything that is useful can be typed in between the opening and closing <a href> tags. The important part is getting the exact filename for the page to which you want to jump. This is a relational link. It assumes that the page you want to jump to is in the same folder as the current page. It is also possible to link to an entirely different server on web somewhere in the world using the following format:

<a href="http://www.somewhere.com/someDirectory/fileName.html">Go to New Page</a>

Once again the important part is getting the exact domain name, directory (folder) and filename. It's magic.

The image tag comes with several optional attributes. First let's look at the basic format:

<img src="imageName.GIF">

This code assumes that you have an image (arbitrarily named imageName) in the same folder as the document that will display the image. Usually images are kept in a separate sub-folder. If the name of the sub-folder was "Images" the address would be as follows:

<img src="Images/imageName.GIF">

The optional attributes are listed below:

• ALT="(text to display if image doesn't load)"
• ALIGN=left or right or center
• BORDER=(size of border around the image)
• WIDTH=
• HEIGHT=
• VSPACE=(addition vertical space)
• HSPACE=(addition horizontal space)
• LOWSRC=(address of a smaller low resolution version of the image)

The following code loads the keyboard image into this page.

<img src="Images/CKeyboard.GIF" ALT="GIF file" ALIGN=middle BORDER=1 WIDTH=348 HEIGHT=93 HSPACE=10 VSPACE=10 LOWSRC="Images/CKeyboard.GIF">

Images can be used within an link tag. For instance if you had a button image and it had a label (and filename) of "UP", you could use this type of code:

<a href=#top><img src="Images/UP.GIF"></a>

Then when you click on the button image, you will jump to the top of the page (assuming you have created the anchor name previously).

Character Formatting

The follow paragraph illustrates some of the Character Tags that m

In this first paragraph we thought it would be an exceptionally Bold to use physical styles to come right out and italicize some text or maybe even use a monospaced typewriter font. There are several physical style tags¹. Sometime you want to underline something or show some deletion from a previous version.

1. <B>Bold</B>
2. <I>Italics</I>
3. <TT> typewriter font (monospaced)</TT>
4. <U> underline </U>
5. <STRIKE>strikout</STRIKE>
6. <BIG> BIGGER TEXT </BIG>
7. <SMALL> SMALLER TEXT </SMALL>
8. superscript<SUP>²</SUP>
9. subscript<SUB>₃</SUB>

This paragraph we are going to use the phrase ( sometime referred to as "logical") style so that we will emphasize some text or even strongly emphasize some text. We also highlight a word by using the definition tag. We can cite at short quote if it tickles our fancy. "In the beginning there was the blues" (GOD 1865) or we could include a short <sample of text> . If we want we could show a <sample of code> or even show the user that some <text needs to be entered> . There is even a style for <a variable>. There are eight different logical style tags:

<EM>Emphasize</EM>

use this tag to emphasize a word, it will usually be printed in italics, however a more sophicated system may interpret the tag differently. For example, a color system might display the word in a different color instead of italics.

<STRONG>Strongly Emphasize</STRONG>

use this tag for even more emphasis, it will usually be displayed in bold.

<DFN>Definition</DFN>

this tag was proposed for HTML 3.0

<CITE>Citation</CITE>

use this tag for short citations, usually diplayed in italics.

<SAMP>sample of text</SAMP>

use this tag to display text which you want to look distinct from your text. i.e. you are displaying a text passage and adding you own comments and you want your text comments to be discernable from the displayed text. The text will be displayed in a monospaced font such a courier.

<CODE>sample of code</CODE>

use this tag to display code within an HTML document. The text will be displayed in a monospaced font such a courier.

<KBD>text needs to be entered</KBD>

use this to indicate text that the user should enter. The text will be displayed in a monospaced font such a courier.

<VAR>a variable</VAR>

variable name. It will usually be displayed in italics. These logical style tags usually assign the same attributes as the three physical style tags discussed earlier, however the logical style tags provide a more flexible implementation for the future.

A quick rundown on the tags covered this week.

• paragraph tags <p> </p>,
  
• line break tag <br> (no closing tag)
  
• ordered list tag <ol> </ol>
  
• unordered list tag <ul> </ul>
  
• definition list tag <dl> </dl>
  
• just a start on the table tags <table> </table>.
  

  Font styles:

• <B>Bold</B>
• <I>Italics</I>
• <TT> typewriter font (monospaced)</TT>
• <U> underline </U>
• <STRIKE>strikout</STRIKE>
• <BIG> BIGGER TEXT </BIG>
• <SMALL> SMALLER TEXT </SMALL>
• superscript<SUP>²</SUP>
• subscript<SUB>₃</SUB>

  Phrase styles:

• <EM>Emphasize</EM>
• <STRONG>Strongly Emphasize</STRONG>
• <DFN>Definition</DFN>
• <CITE>Citation</CITE>
• <SAMP>sample of text</SAMP>
• <CODE>sample of code</CODE>
• <KBD>text needs to be entered</KBD>
• <VAR>a variable</VAR>