Tag list

Elementary HTML - Part 3

#13 Links within a page

You have seen how to link to other web pages, whether they are ones you created or have found elsewhere on the Internet. You can also make connections within a single document, or to specific locations in other documents.

If your file is long, it might be useful to be able to skip to a different section of the same page. Or to a marked section of another page. This can be accomplished in two steps by using named anchors, which are hidden reference marks.

Embed a named anchor in the target location.
Place a link to that target from some other location.

Embedding Named Anchors

To show how this works, on your course page we will place a table of contents right under the Welcome greeting. A couple of these will be linked with anchors placed elsewhere. First, we will embed named anchors for each of the main heading sections on your course page. Then we will create the table of contents.

Open your index.html file in the text editor
Find the heading <h2>Introduction</h2>. Enclose it in anchor tags so that it looks like:
Don't forget the closing </a> tag. You have now marked the line that contains the header Introduction with a hidden reference marker, the named anchor intro. It won't look any different in the browser.

Let's do one more.
Find the heading <h2>Visual protrayal</h2>. Change it to

Adding Links to a Named Anchor in the Same Document

Now we will set up the table of contents that will appear near the top of the screen. We will use an unordered list to create this list (see Module #5 for more on lists).

In index.html below the welcome message and above the line break <hr>, add the following:
Save and reload into in your web browser. You should see the list near the top.
At this point we have only entered the text of the index entries. Now we will add the HTML to connect the top listing with other sections of the document. We indicate a named anchor by preceding the reference marker name with a "#" symbol:
In the index.html text file, go to the first list item near the top. Change it from
to
Fill in the other link to a named anchors that we set up. Change
to
Save and Reload in your web browser. When you click on an underlined (hot) item in your list, the browser should display the associated section at the top of your screen. The BACK button returns you to the starting link location.

Note: The anchors, which are invisible, can be placed anywhere in the body. The following HTML allows the viewer who reaches the end of the page to quickly return to the top.

In index.html, just below <body> type
There is no </a> because you are not specifying an image or line of text as the target.
Near the bottom, just above </body> type

Check the result in the web browser. It is a useful device.

Adding Links to a Named Anchor in Another Document

You can create links that jump to a sections of any HTML document that is marked by named anchors. For example, you may have large file with one subsection that you would like to use for one course, and another subsection appropriate for a second course.

You could put named anchors in that large file, following the above steps for Adding Named Anchors.
To link to the document that has the anchors embedded in it, use
where filename is the name of the target HTML file and #NAME is the term in the named anchor that is placed within that file.
For example, if I put an anchor at the bottom of my personal home page, as follows:

#14 Tables

Tables are very useful for formatting text and images on a page. Once you are on to them, they provide great layout flexibility. Here are the HTML tags in table form.

<table>	begins the table	</table>	ends the table
<tr>	starts a row tr=table row	</tr>	ends a row
<td>	begins a cell td=table data	</td>	ends it

The text or image is inserted between the <td> tags which are embedded within <tr>...</tr>. The following HTML would create a table of 2 rows of 3 cells each.

<table>
<tr>
<td>text/image</td> <td>text/image</td> <td>text/image</td>
</tr>
<tr>
<td>text/image</td> <td>text/image</td> <td>text/image</td>
</tr>
</table>

Let's try one.

Open a new text file called schedule.html and save it in the course directory/folder.
Type the following:
<html>
<head>
<title>Class schedule</title>
</head>
<body>
<h2>Class schedule</h2>
<table width=50% border=3>
<tr>
<td>Date</td><td>Topic</td><td>Reading</td>
</tr>
<tr>
<td>Mon. 1/6</td><td>Introduction</td><td>Ch. 1</td>
<tr>
<tr>
<td>Wed. 1/8</td><td>Physical development</td><td>Ch. 2</td>
<tr>
</table>
</body>
</html>
In the browser, open schedule.html and check the result. If you don't see your table, be sure your code includes the closing </table> tag.
You can change the width of the table display by changing the %.

You can increase or decrease the border size, by increasing or decreasing the number. Using <table> alone results in the default width and eliminates the border.
Take a few minutes to experiment and see the effects. Tables are extraordinarily useful for arranging elements (including images) on a page.
To finish up, at the bottom of schedule.html, above </body>, make a link back to the home page.
Need one more link. Open index.html and add a link to schedule.html by changing
In the browser, check to see that the links work between the course page (index.html) and the schedule (schedule.html).
When you have a chance, download the Barebones Guide listed in the Reference list (next section) for more table options.

HURRAY! You made it through. Please let me know. My e-mail address is basommer@ucdavis.edu (Barbara Sommer). And include suggestions, criticism, or questions, as you wish.

The next (and last) section provides a tag list and some references.

#15 TAGS & REFERENCES

TAGS used in this tutorial

This is not a comprehensive list of HTML tags. It is a start. To learn about others, see the reference list at the end of these pages.

OUTER TAGS

Defines limit of document

HTML document has 2 sections: HEAD and BODY within above.

<head> . . . </head>	Outside of main page
<title> . . .</title>	Within HEAD tags; shows in top window bar in browser.
<body> . . .</body>	Contains web page document.

HEADERS

<h1> . . .</h1>	Most prominent header
<h2> . . . </h2>	.
<h3> . . . </h3>	.
<h4> . . . </h4>	.
<h5> . . . </h5>	.
<h6> . . . </h6>	Least prominent header

CENTERING

TEXT BREAKS

<p>	Paragraph
<br>	Line break
<hr>	Horizontal rule/separator

STYLES

<b> . . .</b>	Boldface
<i> . . .</i>	Italics

UNORDERED LIST - list with bullets

<ul>
<li>	First item in the list
<li>	Next item in the list
</ul>

ORDERED LIST - numbered list (1, 2, 3, etc.)

<ol>
<li>	First item in the list
<li>	Next item in the list
</ol>

LIST - neither bullets nor numbers

In above, substitute

<br>

<p>

for

<li>

or use

<dl>

<dd> First item in the list

<dd> Next item in the list

</dl>

IMAGES

<img src="graphicname.jpeg"

<img src="graphicname.gif"

align=top/middle/bottom.

alt="text alternative to image"

LINKS

To text files

<a href="filename">linking text</a>

To graphic files

<a href="graphicname.jpeg">linking text</a>

<a href="graphicname.gif">linking text</a>

To another resource

<a href="URL">linking text
e.g., <a href="http://complete internet address">linking text</a>

Within a document

Target anchor tag (invisible)	<a name="anchorname">target text line or image</a>
Link to target anchor (will be underlined)	<a href="#anchorname">linking text or image</a>

To bring up e-mail form

<a href="mailto:your_e-mail_address">Your Name and/or e-mail address</a>

FONT COMMANDS

<font size=X>	Changes font size, X=1-7 (largest)
<font face=fontname>	Changes font face
<font color=colorname>	Changes font color
</font>	Ends font command, returning to previous condition

TABLES

<table> . . . </table>	table
<tr> . . . </tr>	row
<td> . . . </td>	cell

Change % and border size, as desired.

MISCELLANEOUS

<!-- text -->	Place a comment within the HTML source code.
<body bgcolor=colorname>	Changes background color (note incorporation into <body> tag).

RESOURCES

Once you get on to HTML coding, a handy tag reference is

http://werbach.com/barebones/">

The Barebones Guide to HTML

For more information on graphic design, check out the following Internet sites.

http://www.killersites.com/index.html

Creating Killer Websites

http://www.projectcool.com/ Project Cool: Anyone can build a great website!

###

<dl>
<dd>	First item in the list
<dd>	Next item in the list
</dl>