Links

One of the great benefits of the World Wide Web is the ability to access resources anywhere in the world, almost instantaneously. To take advantage of this you want to be able to link from a place in your Web Page to a related resource, whether 1,000s of miles away or just on your own server.
The anchor tag is <a href="URL"> anchor item </a>, where URL is the address of the remote Web site or page, as in this example:
We stayed at the castle hotel in
<a href=http://www.zamek-rydzyna.com.pl/index.php?lang=en&id=102</a>.

If the link is to another file on your own server, the URL address becomes much shorter. Links to related files in the same computer or server are called relative links In the previous chapter, under the heading "Body" there was this sentence:
"See Colors for a detailed discussion." The coding of this sentence is:
See <a href="colors.html"> Colors </a> for a detailed discussion.
The file "colors.html" and the file "HTMLQuick2.html" both reside in the same folder on the http://biega.com server.
If the file "color.html" that we wished to link to were located in a different folder, for example one called /college, then the link would look like this:
<a href="../college/colors.html"> Colors </a>.

You can link not only to another file, you may also link to a specific chapter, section or even paragraph. But this requires that you set up "named anchors" at the desired locations. The heading of this section has such a named anchor, as follows:
<a name="LI1">Links</a>.
In the index in the left hand column of each of these chapters, there is an item Links, which is coded thus:
<a href="HTMLQuick3.html#LI1">Links</a>. When you click on the underlined word in the left column you get switched immediately to this section, regardless of which page you happened to be on at the time.

This how this link will appear on your Browser:

We stayed at the castle hotel in Rydzyna

click on the underlined word and you will be instantly connected to the English language Web site of this hotel in Poland.

Lists

Lists are a very convenient way of collecting related information, such as a list of states. Within HTML there are three types of lists.

Unnumbered Lists

<ul>
 <li>Washington</li>
 <li>Oregon</li>
 <li>California</li>
</ul>

Ordered or Numbered Lists

<ol>
 <li>Washington</li>
 <li>Oregon</li>
 <li>California</li>
</ol>

The contents of each line item, in any type of list, may be as
long as you wish, and even include paragraphs <p>.

Definition Lists

<dl>
 <dt> Western states</dt>
  <dd>The Western states are all 
  located along the western 
  coastline of the United States.</dd> 

  and so on - 
each Item included between DT tags,  
each definition included between 
DD tags

</dl>

<ul>
<li>Western 
   states</li>
 <ul>
 <li>Washington
        </li>
 <li>Oregon</li>
 <li>California
        </li>
 </ul>
<li>Mountain 
    states</li>
 <ul>
  <li>Idaho</li>
  <li>Montana</li>
 </ul>
</ul>

This is how these lists appear in your Browser

Unnumbered

• Washington
• Oregon
• California

Numbered

1. Washington
2. Oregon
3. California

Nested List

• Western states
• Washington
• Oregon
• California
• Mountain states
• Idaho
• Montana

Definition list

Western states

The Western states are all located along
the western coastline of the United States.

-and so on -

Other Text Formatting Elements

BlockQuote

Used for long quotations and places white margins left and right of the quoted text. Example:
<blockquote>
<p> This is part of a long quote This is part of a long quote This is part of a long quote This is part of a long quote This is part of a long quote </p>
<p> - William Shakespeare - "Hamlet" </p>
</blockquote>

Preformatted Text

This preserves all white space, line breaks,tabs etc. Uses fixed width font such as Courier.
Useful for placing computer code into a Web document. Example:

<pre>
	for i = 1 to 10
		print i
</pre>

This is preformatted text. 
For a normal page, lines should not 
exceed 80 characters (including 
spaces). Much shorter inside cells 
of a table.
This line is - 35- characters long.
12345678901234567890123456789012345

Horizontal Rules

It is useful to have a horizontal line to separate sections of your document.
The tag <hr> draws a horizontal rule across the available space.
To meet the more stringent requirements of XHTML the tag must be closed as follows:
   <hr />.
You may alter the width by adding the attribute width as follows:
<hr width="x%" /> , for example if x=50 the rule will extend across half of the available space (50%).

Division

In order to format a large section of the document, in a different way than other sections, you may use the "DIVISION" element.
Suppose you want to align a large section in the center, with red font, proceed as follows:
<div align="center">
<font color="#ff0000"> <p>Here is some text, and so on and
on and on and on - end of paragraph</p> <p>Here is another paragraph</p> <p>now you must put the
end tags to end the section </p> </font> </div>

This is how these elements look in your Browser

 BLOCKQUOTE

This is part of a long quote This is part of a long quote This is part of a long quote This is part of a long quote This is part of a long quote

- William Shakespeare - "Hamlet"

 PREFORMATTED TEXT

	for i = 1 to 10
		print i

This is preformatted text. 
For a normal page, lines should not 
exceed 80 characters (including 
spaces). Much shorter inside cells 
of a table.
This line is - 35- characters long.
12345678901234567890123456789012345

 HORIZONTAL RULE

 Example of a DIVISION

The rest of the document continues in normal text, aligned left as usual.

Return to 1 ; 2 ;Continue to Part 4 - Images ; 5 ;

Return to Top of page,        or to Web Design Table of Contents.

Return to Home Page.
Copyright © 2002 B. C. Biega. All rights reserved.

Last update November 1, 2011