Here is
a sample hypertext reference in a file called US.html:
<![CDATA[ ]]><![CDATA[</a><A HREF="MaineStats.html"><font face="Arial, Helvetica, sans-serif" size="-1">Maine</font></A>
]]>
This entry
makes the word Maine the hyperlink to the document MaineStats.html,
which is in the same directory as the first document.
You can
link to documents in other directories by specifying the relative
path from the current document to the linked document. For
example, a link to a file NYStats.html located in the
subdirectory AtlanticStates would be: <![CDATA[ ]]>
<![CDATA[<A HREF="AtlanticStates/NYStats.html"><font face="Arial, Helvetica, sans-serif" size="-1">New
York</font></A> ]]>
These
are called relative links because you are specifying
the path to the linked file relative to the location of the
current file. You can also use the absolute pathname (the complete
URL) of the file, but relative links are more efficient in accessing
a server. They also have the advantage of making your documents
more "portable" -- for instance, you can create several web
pages in a single folder on your local computer, using relative
links to hyperlink one page to another, and then upload the
entire folder of web pages to your web server. The pages on
the server will then link to other pages on the server, and
the copies on your hard drive will still point to the other
pages stored there.
It is
important to point out that UNIX is a case-sensitive operating
system where filenames are concerned, while DOS and the MacOS
are not. For instance, on a Macintosh, "DOCUMENT.HTML", "Document.HTML",
and "document.html" are all the same name. If you make a relative
hyperlink to "DOCUMENT.HTML", and the file is actually named
"document.html", the link will still be valid. But if you upload
all your pages to a UNIX web server, the link will no longer
work. Be sure to check your filenames before uploading.
Pathnames
use the standard UNIX syntax. The UNIX syntax for the parent
directory (the directory that contains the current directory)
is "..". (For more information consult a beginning UNIX reference
text such as Learning the UNIX Operating System from
O'Reilly and Associates, Inc.)
If you
were in the NYStats.html file and were referring to
the original document US.html, your link would look
like this: <![CDATA[ ]]>
<![CDATA[<A HREF="../US.html"><font face="Arial, Helvetica, sans-serif" size="-1">United
States</font></A> ]]>
In general,
you should use relative links whenever possible because:
- it's
easier to move a group of documents to another location (because
the relative path names will still be valid)
- it's
more efficient connecting to the server
- there
is less to type
However,
use absolute pathnames when linking to documents that are not
directly related. For example, consider a group of documents
that comprise a user manual. Links within this group should
be relative links. Links to other documents (perhaps a reference
to related software) should use absolute pathnames instead.
This way if you move the user manual to a different directory,
none of the links would have to be updated.
The World
Wide Web uses Uniform Resource Locators (URLs) to specify the
location of files on other servers. A URL includes the type
of resource being accessed (e.g., Web, gopher, FTP), the address
of the server, and the location of the file. The syntax is:
scheme://host.domain
[:port]/path/ filename
where
scheme is one of
- file
- a file
on your local system
- ftp
- a file
on an anonymous FTP server
- http
- a file
on a World Wide Web server
- gopher
- a file
on a Gopher server
- WAIS
- a file
on a WAIS server
- news
- a Usenet
newsgroup
- telnet
- a connection
to a Telnet-based service
The port
number can generally be omitted. (That means unless someone
tells you otherwise, leave it out.)
For example,
to include a link to this primer in your document, enter: <![CDATA[
]]>
<![CDATA[<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"><font face="Arial, Helvetica, sans-serif" size="-1">NCSA's
Beginner's Guide to HTML</font></A> ]]>
This entry
makes the text NCSA's Beginner's Guide to HTML a hyperlink
to this document.
There
is also a mailto scheme, used to hyperlink email addresses,
but this scheme is unique in that it uses only a colon (:)
instead of :// between the scheme and the address.
You can read more about mailto below.
For more
information on URLs, refer to:
Anchors
can also be used to move a reader to a particular section
in a document (either the same or a different document) rather
than to the top, which is the default. This type of an anchor
is commonly called a named anchor because to create the
links, you insert HTML names within the document.
This guide
is a good example of using named anchors in one document. The
guide is constructed as one document to make printing easier.
But as one (long) document, it can be time-consuming to move
through when all you really want to know about is one bit of
information about HTML. Internal hyperlinks are used to create
a "table of contents" at the top of this document. These hyperlinks
move you from one location in the document to another location
in the same document. (Go to the top
of this document and then click on the Links to Specific
Sections hyperlink in the table of contents. You will wind
up back here.)
You can
also link to a specific section in another document. That information
is presented first because understanding that helps you understand
linking within one document.
Links Between Sections of Different Documents
Suppose
you want to set a link from document A (documentA.html)
to a specific section in another document (MaineStats.html).
Enter
the HTML coding for a link to a named anchor: <![CDATA[ <TT>documentA.html</TT>:
In addition to the many state parks, Maine is also home to ]]>
<![CDATA[<a href="MaineStats.html#ANP"><font face="Arial, Helvetica, sans-serif" size="-1">Acadia
National Park</font></a><font face="Arial, Helvetica, sans-serif" size="-1">.
</font>]]>
Think
of the characters after the hash (#) mark as a tab within the
MaineStats.html file. This tab tells your browser what
should be displayed at the top of the window when the link is
activated. In other words, the first line in your browser window
should be the Acadia National Park heading.
Next,
create the named anchor (in this example "ANP") in MaineStats.html:
<H2><A
NAME="ANP">Acadia National Park</a></H2>
With both
of these elements in place, you can bring a reader directly
to the Acadia reference in MaineStats.html.
NOTE:
You cannot make links to specific sections within a different
document unless either you have write permission to the coded
source of that document or that document already contains in-document
named anchors. For example, you could include named anchors
to this primer in a document you are writing because there are
named anchors in this guide (use View Source in your browser
to see the coding). But if this document did not have
named anchors, you could not make a link to a specific section
because you cannot edit the original file on NCSA's server.
Links to Specific Sections within the Current Document
The technique
is the same except the filename is omitted.
For example,
to link to the ANP anchor from within MaineStats,
enter: <![CDATA[ ...More information about ]]>
<![CDATA[<A HREF="#ANP"><font face="Arial, Helvetica, sans-serif" size="-1">Acadia
National Park</font></a><font face="Arial, Helvetica, sans-serif" size="-1">
is available elsewhere in this document. </font>]]>
Be sure
to include the {A NAME=} tag at the place in your document where
you want the link to jump to (<H2><A NAME="ANP">Acadia
National Park></a></H2>).
Named
anchors are particularly useful when you think readers will
print a document in its entirety or when you have a lot of short
information you want to place online in one file.
You can
make it easy for a reader to send electronic mail to a specific
person or mail alias by including the mailto attribute
in a hyperlink. The format is: <![CDATA[ ]]>
<![CDATA[<A HREF="mailto:<I>emailinfo@host</I>"><font face="Arial, Helvetica, sans-serif" size="-1"><I>Name</I></font></a>
]]>
For example,
enter: <![CDATA[ ]]>
<![CDATA[<A HREF="mailto:<I>pubs@ncsa.uiuc.edu</I>">
<font face="Arial, Helvetica, sans-serif" size="-1"><I>NCSA
Publications Group</I></font></a> ]]>
to create
a mail window that is already configured to open a mail window
for the NCSA
Publications Group
alias. (You, of course, will enter another mail address!)
Most Web
browsers can display inline images (that is, images next to
text) that are in X Bitmap (XBM), GIF, or JPEG format. Other
image formats are also being incorporated into Web browsers
[e.g., the Portable Network Graphic (PNG) format]. Each image
takes additional time to download and slows down the initial
display of a document. Carefully select your images and the
number of images in a document.
To include
an inline image, enter: <IMG SRC=ImageName>
where
ImageName is the URL of the image file.
The syntax
for <IMG SRC> URLs is identical to that used in an anchor
HREF. If the image file is a GIF file, then the filename
part of ImageName must end with .gif. Filenames
of X Bitmap images must end with .xbm; JPEG image files
must end with .jpg or .jpeg; and Portable
Network Graphic files must end with .png.
You should
include two other attributes on <IMG> tags to tell your
browser the size of the images it is downloading with the text.
The HEIGHT and WIDTH attributes let your browser
set aside the appropriate space (in pixels) for the images as
it downloads the rest of the file. (You can get the pixel size
from your image-processing software, such as Adobe Photoshop.
Some browsers will also display the dimensions of an image file
in the title bar if the image is viewed by itself without an
enclosing HTML document.)
For example,
to include a self portrait image in a file along with the portrait's
dimensions, enter: <IMG SRC=SelfPortrait.gif HEIGHT=100 WIDTH=65>
NOTE:
Some browsers use the HEIGHT and WIDTH attributes
to stretch or shrink an image to fit into the allotted space
when the image does not exactly match the attribute numbers.
Not all browser developers think stretching/shrinking is a good
idea, so don't plan on your readers having access to this feature.
Check your dimensions and use the correct ones.
You have
some flexibility when displaying images. You can have images
separated from text and aligned to the left or right or centered.
Or you can have an image aligned with text. Try several possibilities
to see how your information looks best.
Aligning
Text with an Image
By default
the bottom of an image is aligned with the following text, as
shown in this paragraph. You can align images to the top or
center of a paragraph using the ALIGN= attributes TOP
and CENTER.
This text is aligned with the top of the image ().
Notice how the browser aligns only one line and then jumps to
the bottom of the image for the rest of the text.
And this text is centered on the image ().
Again, only one line of text is centered; the rest is below
the image.
Images
without Text
To display an image without any associated text (e.g., your
organization's logo), make it a separate paragraph. Use the
paragraph ALIGN= attribute to center the image or adjust
it to the right side of the window as shown below:
<IMG
SRC = "BarHotlist.gif">
which
results in:
The image
is centered; this paragraph starts below it and left justified.
Some World
Wide Web browsers -- primarily the text-only browsers such as
Lynx
-- cannot display images. Some users turn off image loading
even if their software can display images (especially if they
are using a modem or have a slow connection). HTML provides
a mechanism to tell readers what they are missing on your pages
if they can't load images.
The ALT
attribute lets you specify text to be displayed instead of an
image. For example:
<IMG
SRC="UpArrow.gif" ALT="Up">
where
UpArrow.gif is the picture of an upward pointing arrow.
With graphics-capable viewers that have image-loading turned
on, you see the up arrow graphic. With a text-only browser or
if image-loading is turned off, the word Up is shown
in your window in place of the image.
You should
try to include alternate text for each image you use in your
document, which is a courtesy for your readers -- or, for users
who might be visually impaired, a necessity.
Inline
images can be used as hyperlinks just like plain text. The following
HTML code:
<A HREF="hotlist.html"><IMG
SRC="BarHotlist.gif" ALT="Hotlist"></A>
Produces
the following result:
(Note
that this link doesn't actually go anywhere.) The blue border
that surrounds the image indicates that it's a clickable hyperlink.
You may not always want this border to be displayed, though.
In this case you can use the BORDER attribute of the IMG tag
to make the image appear as normal. Adding the BORDER attribute
and setting it to zero:
<A HREF="hotlist.html"><IMG
SRC="BarHotlist.gif" BORDER=0 ALT="Hotlist"></A>
Produces
the following result:
The BORDER
attribute can also be set to non-zero values, whether or not
the image is used as a hyperlink. In this case, the border will
appear using the default text color for the web page. For instance,
if you wanted to give your image a plain black border to help
it stand out on the page, you might try this:
<IMG
SRC="BarHotlist.gif" BORDER=6 ALT="Hotlist">
And
get the following result:
Newer
versions of Web browsers can load an image and use it as a background
when displaying a page. Some people like background images and
some don't. In general, if you want to include a background,
make sure your text can be read easily when displayed on top
of the image.
Background
images can be a texture (linen finished paper, for example)
or an image of an object (a logo possibly). You create the background
image as you do any image.
However
you only have to create a small piece of the image. Using a
feature called tiling, a browser takes the image and repeats
it across and down to fill your browser window. In sum you generate
one image, and the browser replicates it enough times to fill
your window. This action is automatic when you use the background
tag shown below.
The tag
to include a background image is included in the statement as
an attribute:
By default
browsers display text in black on a gray background. However,
you can change both elements if you want. Some HTML authors
select a background color and coordinate it with a change in
the color of the text.
Always
preview changes like this to make sure your pages are readable.
(For example, many people find red text on a black background
difficult to read!) In general, try to avoid using high-contrast
images or images that use the color of your text anywhere within
the graphic.
You change
the color of text, links, visited links, and active links (links
that are currently being clicked on) using further attributes
of the tag. For example:
This creates
a window with a black background (BGCOLOR), white text
(TEXT), and silvery hyperlinks (LINK).
The six-digit
number and letter combinations represent colors by giving their
RGB (red, green, blue) value. The six digits are actually three
two-digit numbers in sequence, representing the amount of red,
green, or blue as a hexadecimal value in the range 00-FF. For
example, 000000 is black (no color at all), FF0000 is bright
red, 0000FF is bright blue, and FFFFFF is white (fully saturated
with all three colors).
These
number and letter combinations are generally rather cryptic.
Fortunately an online resource is available to help you track
down the combinations that map to specific colors and there
is software available for you to do this on your workstation:
For some
basic colors -- typically those in the standard sixteen-color
Windows 3.1 palette -- you can also use the name of the color
instead of the corresponding RGB value. For example, "black",
"red", "blue", and "cyan" are all valid for use in place of
RGB values. However, while not all browsers will understand
all color names, any browser that can display colors will understand
RGB values, so use them whenever possible.
You may
want to have an image open as a separate document when a user
activates a link on either a word or a smaller, inline version
of the image included in your document. This is called an external
image, and it is useful if you do not wish to slow down the
loading of the main document with large inline images.
To include
a reference to an external image, enter: <![CDATA[ ]]>
<![CDATA[<A HREF="<I>MyImage.gif</I>"><font face="Arial, Helvetica, sans-serif" size="-1">link
anchor</font></A> ]]>
You can
also use a smaller image as a link to a larger image. Enter:
<A HREF="LargerImage.gif"><IMG
SRC="SmallImage.gif"></A>
The reader
sees the SmallImage.gif image and clicks on it to open
the LargerImage.gif file.
Use the
same syntax for links to external animations and sounds. The
only difference is the file extension of the linked file. For
example,
link
anchor
specifies
a link to a QuickTime movie. Some common file types and their
extensions are:
- plain
text
- .txt
- HTML
document
- .html
- GIF
image
- .gif
- TIFF
image
- .tiff
- X Bitmap
image
- .xbm
- JPEG
image
- .jpg
or .jpeg
- PostScript
file
- .ps
- AIFF
sound file
- .aiff
- AU
sound file
- .au
- WAV
sound file
- .wav
- QuickTime
movie
- .mov
- MPEG
movie
- .mpeg
or .mpg
Keep in
mind your intended audience and their access to software. Most
UNIX workstations, for instance, cannot view QuickTime movies.
Before
HTML tags for tables were finalized, authors had to carefully
format their tabular information within {PRE} tags, counting
spaces and previewing their output. Tables are very useful for
presentation of tabular information as well as a boon to creative
HTML authors who use the table tags to present their regular
Web pages. (Check out the NCSA
Relativity Group's pages
for an excellent, award-winning example.)
Think
of your tabular information in light of the coding explained
below. A table has heads where you explain what the columns/rows
include, rows for information, cells for each item. In the following
table, the first column contains the header information, each
row explains an HTML table tag, and each cell contains a paired
tag or an explanation of the tag's function.
|
|
| Element |
Description |
| {TABLE} ... {/TABLE} |
defines a table in HTML. If the BORDER attribute
is present, your browser displays the table with a border. |
| {CAPTION} ... {/CAPTION} |
defines the caption for the title of the table. The
default position of the title is centered at the top of
the table. The attribute ALIGN=BOTTOM can be
used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the
caption. |
| {TR} ... {/TR} |
specifies a table row within a table. You may define
default attributes for the entire row: ALIGN
(LEFT, CENTER, RIGHT) and/or
VALIGN (TOP, MIDDLE, BOTTOM).
See Table Attributes at the end of this table for more
information. |
| {TH} ... {/TH} |
defines a table header cell. By default the text in
this cell is bold and centered. Table header cells may
contain other attributes to determine the characteristics
of the cell and/or its contents. See Table Attributes
at the end of this table for more information. |
| {TD} ... {/TD} |
defines a table data cell. By default the text in this
cell is aligned left and centered vertically. Table data
cells may contain other attributes to determine the characteristics
of the cell and/or its contents. See Table Attributes
at the end of this table for more information. |
|
|
| NOTE: Attributes defined
within {TH} ... {/TH} or {TD} ... {/TD} cells override
the default alignment set in a {TR} ... {/TR}. |
| Attribute |
Description |
| ALIGN (LEFT, CENTER, RIGHT) |
Horizontal alignment of a cell. |
| VALIGN (TOP, MIDDLE, BOTTOM) |
Vertical alignment of a cell. |
| COLSPAN=n |
The number (n) of columns a cell spans. |
| ROWSPAN=n |
The number (n) of rows a cell spans. |
| NOWRAP |
Turn off word wrapping within a cell. |
The general
format of a table looks like this:
<TABLE>
start of table definition <CAPTION> caption contents </CAPTION>
caption definition <TR> start of first row definition
<TH> cell contents </TH> first cell in row 1 (a
head) <TH> cell contents </TH> last cell in row
1 (a head) </TR> end of first row definition <TR>
start of second row definition <TD> cell contents </TD>
first cell in row 2 <TD> cell contents </TD> last
cell in row 2 </TR> end of second row definition <TR>
start of last row definition <TD> cell contents </TD>
first cell in last row ... <TD> cell contents </TD>
last cell in last row </TR> end of last row definition
</TABLE> end of table definition
The <TABLE>
and </TABLE> tags must surround the entire table
definition. The first item inside the table is the CAPTION,
which is optional. Then you can have any number of rows defined
by the <TR> and </TR> tags. Within a row you can
have any number of cells defined by the <TD>...</TD>
or <TH>...</TH> tags. Each row of a table is, essentially,
formatted independently of the rows above and below it. This
lets you easily display tables like the one above with a single
cell, such as Table Attributes, spanning columns of the table.
Some HTML
authors use tables to present nontabular information. For example,
because links can be included in table cells, some authors use
a table with no borders to create "one" image from separate
images. Browsers that can display tables properly show the various
images seamlessly, making the created image seem like an image
map (one image with hyperlinked quadrants).
Using
table borders with images can create an impressive display as
well. Experiment and see what you like.
Web forms
let a reader return information to a Web server for some action.
For example, suppose you collect names and email addresses so
you can email some information to people who request it. For
each person who enters his or her name and address, you need
some information to be sent and the respondent's particulars
added to a data base.
This processing
of incoming data is usually handled by a script or program written
in Perl or another language that manipulates text, files, and
information. If you cannot write a program or script for your
incoming information, you need to find someone who can do this
for you.
The forms
themselves are not hard to code. They follow the same constructs
as other HTML tags. What could be difficult is the program or
script that takes the information submitted in a form and processes
it. Because of the need for specialized scripts to handle the
incoming form information, fill-out
forms
are not discussed in this primer. Check the Additional
Online Reference
section for more information.
Consider
this example of HTML: <![CDATA[ <B>This is an example of <I>overlapping</i></B><I>
HTML tags.</I> ]]>
The word
overlapping is contained within both the <B> and
<I> tags. A browser might be confused by this coding and
might not display it the way you intend. The only way to know
is to check each popular browser (which is time-consuming and
impractical).
In general,
avoid overlapping tags. Look at your tags and try pairing them
up. Tags (with the obvious exceptions of elements whose end
tags may be omitted, such as paragraphs) should be paired without
an intervening tag in between. Look again at the example above.
You cannot pair the bold tags without another tag in the middle
(the first definition tag). Try matching your coding up like
this to see if you have any problem areas that should be fixed
before you release your files to a server.
HTML protocol
allows you to embed links within other HTML tags:
<H1><A
HREF="Destination.html">My heading</A></H1>
Do
not embed HTML tags within an anchor:
<A HREF="Destination.html">
<H1>My heading</H1></A>
Although
most browsers currently handle this second example, the official
HTML specifications do not support this construct and your file
will probably not work with future browsers. Remember that browsers
can be forgiving when displaying improperly coded files. But
that forgiveness may not last to the next version of the software!
When in doubt, code your files according to the HTML specifications
(see For
More Information
below).
Character
tags modify the appearance of the text within other elements:
<UL>
<LI><B>A bold list item</B> <LI><I>An
italic list item</I> </UL>
Avoid
embedding other types of
