Since not all browsers are graphical, it's important to include the "ALT=" attribute to provide
text to display when graphics are not supported. Conceptually, HTML is like WordPerfect or any other word processing package. Text that is to be displayed or formatted in a special way is surrounded by "tags" or "codes". In HTML, all tags are placed within angle brackets, <>. Most tags come in pairs to mark the beginning and end of the tagged text. The end tag differs from the begin tag in that it has a "/" after the left angle bracket: <HTML> </HTML>. Tags are not case sensitive. HTML is a simple markup language and does not (at this time) support sophisticated page layout. Unless the text is indicated as preformatted, the browser will format it based on the browser fonts selected by the user and the size and resolution of the screen. Extra spaces and tabs are ignored as are blank lines. The Netscape extensions give you somewhat greater control however they are not necessarily supported by other browsers.
One of the best ways to learn HTML is to look at the source code for pages you admire. Just use the "View Source" function of your browser. If you need help understanding the HTML that you see, there are many resources available both on the Web and in printed form. "Teach Yourself Web Publishing with HTML in a Week" and "More Teach Yourself Web Publishing with HTML in a Week" by Laura Lemay work equally well as tutorials and reference books. For the latest Netscape extensions try http://home.netscape.com/assist/net_sites/html_extensions.html.
All html documents should be enclosed in <HTML> </HTML> tags. Within these tags, the document should be divided into a heading section <HEAD> </HEAD>, which controls the behavior and appearance of the window containing your page, and a body <BODY> </BODY>, which contains the page itself. For the present, the heading section should contain a page title enclosed in <TITLE> </TITLE> tags. The title will appear in the browser's page title area usually at the top of the window. Netscape supports additional qualifiers in the <BODY> tag that allow you to specify a background image and/or color and the colors of links, active links and followed links. Colors can be specified in their RGB hexadecimal representation, eg red: FF0000, or as one of the 16 color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. In the body section you will find: text, links to other documents or to other places in the same document, images, tables, and forms (at least, for the present). The HTML standard is constantly evolving, so look for new features in the future.
Here are the structural tags used in this document:
<HTML>
<HEAD>
<TITLE>This is an example document</TITLE>
</HEAD>
<BODY BACKGROUND="../images/chalk.gif" BGCOLOR="#cfcfcf" TEXT="#000000" LINK="#0000ff" ALINK="#ff0000" VLINK="#339966">
</BODY>
</HTML>
There are six levels of headings supported in HTML. Text within a set of heading tags is displayed in larger and/or bolder fonts than normal body text. Headings are intended to be used to define sections of a document and should not be used to control the size of text. The syntax is:
<Hn>Text of heading</Hn>
where "n" is the level number, 1 to 6.
The heading tag now supports the align attribute which can take the values, right, left, and center, and determines where the heading is placed on the line.
<h1>This is a level one heading</h1>
Paragraphs and line breaks:
The <P> tag will cause a paragraph break. I've been using it throughout this text to help format the document. The syntax is:
Paragraph text............<P>
The paragraph tag now supports the align attribute which allows positioning of the paragraph on the left, right, or in the center of the window. In this usage, it must be paired with an end tag, </P>.
Another tag which can be used to format text is the <BR> tag. It causes a line break. The syntax is:
Line text.....<BR>
While the <P> tag causes a break of several lines, the <BR> tag skips only one line. For example:
A <P> tag separates this example from the text above. Here's what a <BR> tag will do.
As you can see, we've skipped to the next line.
The line break tag has been extended by Netscape to include a "clear=" attribute. This attribute can be used to prevent text from wrapping around an image. Its values are "right", "left" or "all". Essentially, it tells the browser to skip to the point where the right edge of the screen, the left edge of the screen or all of the screen is "clear" of the image. Look for an example below when we discuss images in documents.
The Horizontal Rule:
Another tag useful for organizing text and layout is the <HR>. This tag causes a horizontal line to be placed in the text. I've used it throughout this document to separate topics. Both Netscape and Mosaic extended the tag to include "size=", "width=", "align=", and "noshade" attributes. The size attribute allows control of the thickness of the line and is specified in pixels. The width attribute controls the horizontal width of the line and can be specified as an absolute number of pixels or a percentage of the window width. The align attribute accepts "left", "right" or "center" as a value and controls where the line is placed on the screen. If noshade is specified, the line appears solid rather than three dimensional. Here are some examples:
the default:
<hr>
with thickness specified (note that with a white background specified, the shading doesn't work well):
<hr size="6">
with horizontal width specified:
<hr width="50%">
with position specified:
<hr width="50%" align="right">
and with noshade:
<hr noshade>
Preformatted Text:
The <PRE> and </PRE> tags can be used to designate text that should NOT be reformatted by the browser. These tags are very helpful for displaying tabular data or the output of other applications. Text within these tags is displayed in the fixed font that the user has chosen for the browser and spaces and blank lines are left alone.
11/22/95 Report Output Page 1 Column Column Column Column Column One Two Three Four Five XXXXXXXXXXX 99999999999999999 XXXXXXXXXXXXXXX 999999999999999 XXXXXX TOTALS: 99999999999999999 999999999999999
As noted above, the formatting capabilities of HTML are limited. There are four basic formatting tags which you may find useful, the bold, italic, underline, and strike through tags: <B> </B>, <I> </I>, <U> </U>, and <S> </S>. Text enclosed in the bold tags will appear in the bold version of the user's chosen font, text enclosed in the italic tags will appear italicized, text between underline tags is underlined, and text marked by strike through tags will be lined through. For example,
<B>This text is bolded</B>
This text is bolded
<I>This is italicized</I><p>
This is italicized
<U>This is underlined</U><p>
This is underlined
<S>This text is stricken</S><p>
This text is stricken
Since you shouldn't use headings to control the size of the text, Netscape offers the <FONT> </FONT> tags. The "size=" parameter of the <FONT> tag allows you to set the size of the font between the tags. The size can be expressed as an absolute value of 1 to 7 or a change relative to the current font size. Since the default size is 3, relative font sizes range from -3 to +4. For example, this text is in a font 2 sizes bigger than the default font because it is between <FONT size="+2"> and </FONT> tags. The default font size for a page can be set with the <BASEFONT> tag which takes the "size=" attribute with values of 1 to 7. In Netscape, font color can also be set using the "color=" attribute. Colors are expressed in either their RGB hexadecimal color value or as one of the 16 basic color names (see bgcolor above).
Superscripting and subscripting are supported by the <SUP> </SUP> and <SUB> </SUB> tags. For example: 1.23 X 105 or H2O .
The <BLOCKQUOTE> and </BLOCKQUOTE> tags will cause the enclosed text to be indented and separated from surrounding text.
This can be very useful for quotations or other text that you want to highlight. As you can see, this text is indented and separated by blank lines.The <ADDRESS> and </ADDRESS> tags are used to specify the author of the document. All the tags do is italicize the text between them but good HTML style dictates that you have an address block (usually at the bottom of the page) to identify the author and give his or her e-mail address.
HTML Sampler / Nan DeVault / ousnd@gemini.oscs.montana.edu
What if you need to include a < or > sign in your document or the copyright symbol? Or another special symbol like a circumflex or cedilla? Use the HTML special character entity names documented at http://www.sandia.gov/sci_compute/symbols.html. All of the names begin with & end with a ;. Here's an example: © is the entity name for the copyright symbol, ©.
The essence of hypertext is its ability to provide "links" from one document to another. Most browsers highlight these links with color and/or underlines. The HTML tag that defines a link is the <A> or "anchor" tag. The syntax of the anchor tag is:
<A HREF="location of the document linked to (also called the target document)">Link text</A>
The location of the target document is specified as a URL or "uniform resource locator". While the HTML tags themselves are not case sensitive, the URLs are. To simplify maintenance of your pages write all of your URLs in lower case.
There should always be "link text" between the <A> and </A> tags. Here's an example:
<A HREF="http://www.mcom.com/">Netscape Inc.'s home page.</A><p>
This is probably a good time to examine the workings of URLs in HTML documents. In order to find a document the server needs to know the entire path to that document; however, you need not always specify the entire path in your HREF. Instead, you can use a "relative" link. In a relative link, you specify the location of the linked page relative to the location of the page you are on.
Assuming this directory structure:
HREF="link1.htm" is used when home.htm and link1.htm are both in the DOCS directory.
HREF="subdirectory_name/html_file_name" is used when the target document is in a subdirectory of the directory the linking document is in. For instance, HREF="MOREDOCS/link2.htm.
HREF="../link3.htm" is used when the target document is in the parent directory of the directory containing the linking document. In our example, this is the HTML directory. The term parent directory refers to the directory above the current directory. In both DOS and Unix systems, ".." is used to refer to the parent directory.
HREF="../parallel_directory_name/html_file_name" is used when the target document is in a directory parallel to the one containing the linking document. In our example, the OTHRDOCS directory: HREF="OTHERDOCS/link4.htm"
Relative links work because the browser knows the full path name for the page you are on and can simply append the relative link to it. Take a look at the "Location:" field for any page and you will see what I mean.
It is good HTML coding practice to use relative links for pages that are directly related to one another and full path names for links to other documents. If the pages are moved, no links need to be changed.
To specify a path relative to the server's root directory, begin your html reference with at forward slash, "/". For example, HREF="/wwwvr/" links to the VP of Research's home page.
NAMED LINKS
Links as specified above, go to the top of the target document. If you want to jump to a specific place in a document, you need an anchor to "name" the spot. The syntax is:
<A NAME="name_of_spot">Anchor text.....</A>
To reference that spot in a link, just append "#name_of_spot" to the page's URL. If the spot is in the same document, you just need "#name_of_spot" in the HREF. Here are some examples:
This reference, <A HREF="#top_of_page">top of this document</A>, jumps to the top of this document while this example, <A HREF="example4.html#middle_of_page">another document</A>, goes to a specific spot in another document. To establish a named link, you need two anchors, one with the "name=" attribute to identify the place to jump to and one with the "href=" attribute to reference the named spot.
E-MAIL LINKS
The "mailto" link is a special kind of link which brings up a blank e-mail form when selected. While some browsers don't support the mailto link, I think it's a good idea to include it whenever you have an e-mail address in your text. The HREF of the mailto link looks like this:
HREF="mailto:users_email_address"
For example:
Nan DeVault <A HREF="mailto:ousnd@gemini.oscs.montana.edu">ousnd@gemini.oscs.montana.edu</A>
Nan DeVault ousnd@gemini.oscs.montana.edu
There are three types of lists available in HTML: unordered, ordered, and definition.
Items in an unordered list are unnumbered and preceded by a bullet. The list begins with a <UL> tag and ends with a </UL> tag. Items are preceded by the <LI> tag. Here's an example:
This is an unordered list:
<UL>
<LI>item one
<LI>item two
<LI>item three
</UL>
This is an ordered list:
<OL>
<LI>item one
<LI>item two
<LI>item three
</OL>
This is an ordered list using the Netscape "type=" extension:
<OL type="I">
<LI>item one
<LI>item two
<LI>item three
</OL>
<OL type="I">
<LI>item one
<LI type="A">item two
<LI>item three
</OL>
<OL type="I" start="5">
<LI>item five
<LI>item six
<LI>item seven
</OL>
<OL type="I">
<LI>item one
<LI>item two
<LI value="7">item seven
<LI>item eight
</OL>
This is an outline:
<OL type="I">
<LI>Main category
<OL type="A">
<LI>Subcategory A
<LI>Subcategory B
</OL>
</OL>
<DL>
<DT>MSU-Bozeman
<DD>Home of the Bobcats.
<DT>U of M
<DD>Home of the Griz.<br>
Located in Missoula, MT.
</DL>
Graphical Web browsers can display images along with the text. Only a few graphical formats are supported by the majority of graphical browsers: X Bitmap (XBM) and GIF. Netscape does support the JPEG format as well.
The basic syntax ot the <IMG> tag is:
<IMG SRC="URL_of_the_Image">
As an example, I'll include the official MSU-Bozeman logo:
<IMG SRC="/images/msu-bozeman.gif">
Since not all browsers are graphical, it's important to include the "ALT=" attribute to provide
text to display when graphics are not supported.
<IMG SRC="URL_of_the_Image" alt="MSU-Bozeman">
With most browsers, text will be aligned with the bottom of the image by default, as in the example above.
The "align=" attribute of the <IMG> tag allows you to change the alignment of the text by specifying "top" or "middle".
Here the text is aligned with the top of the image,
<IMG SRC="/images/msu-bozeman.gif" align="top">.
And, here we've specified alignment in the middle of the image,
<IMG SRC="/images/msu-bozeman.gif" align="middle">.
Most browsers will not wrap text around an image. Instead, when the text has filled the screen to the right of the image, it wraps to the line below the image. However, Netscape has extended the <IMG> tag to include more values for the "align=" attribute and new attributes to further define the relationship between text and image.
The most useful of Netscape's new values for the "align=" attribute are "left" and "right". Use "left" to place the image on the left edge of the screen and wrap text around it on the right. Use "right" to place the image on the right edge of the screen and wrap text around it to the left.
Here's the effect when you use "align=left",
<IMG SRC="/images/msu-bozeman.gif" align="left">.
See how the text fills the screen and then wraps
around the image.
And, here's the effect when you use "align=right",
<IMG SRC="/images/msu-bozeman.gif" align="right"> .
The text fills the screen to the left of the image and then wraps around it.
If you want to align the image but not wrap the text, you can use Netscape's extension to the <BR> tag, "clear=". When the image has been positioned on the left side of the screen, the <BR clear="left"> tag will start the text following the image on the first line whose left edge is "clear" of the image. <BR clear="right"> will do the same for an image on the right of the screen.
Netscape has added 5 new attributes worth mentioning: "hspace=", "vspace=", "border=", "width=", and "height=".
Hspace and vspace control how much space, in pixels, the browser will leave between the image and surrounding text. Hspace determines the space between the image and text to either side of it while vspace sets the space left above and below the image.
This left aligned image has an
hspace attribute specifying 10 pixels should be left between the image and the text next to it and
a vspace attribute to separate it from the text above and below:
<IMG SRC="/images/msu-bozeman.gif" align="left" hspace="10" vspace="10">
<br clear="left">.
Compare this to the first example of a left aligned image and you will see what a difference the hspace and
vspace attributes can make.
The border attribute allows you to specify that a three-dimensional border of a certain width, in pixels, be placed around the image. Like this:
<IMG SRC="/images/msu-bozeman.gif" align="left" border="10">
<br clear="left">
The width and height attributes specify the size of the image in pixels. If set to the
actual size of the image, Netscape can load the image faster. If different from the actual size,
Netscape scales the image to fit. You can use a paint package, like LVIEW or Paint Shop Pro, to
to determine the size of the image in pixels.
Tables may be the ultimate way to control page layout (at least right now). Netscape was the first browser to support tables but Mosaic soon followed as will the others. Tables are more complex than other HTML constructs.
The <TABLE> </TABLE> tags define the table which can contain a caption and rows. The <TABLE> tag supports several attributes: "border=" to specify whether or not the table is to have borders or (in Netscape) specify the width of the border in pixels; "cellspacing=", a Netscape attribute which sets the amount of space between the table cells; "cellpadding=", a Netscape attribute which determines the space left between the cell and its contents; and "width=", a Netscape attribute which specifies the table width in either pixels or as a percentage of the screen width.
Text between the <CAPTION> and </CAPTION> tags becomes the table caption. The "align=" attribute of this tag lets you put the caption at the "top" or the "bottom" of the table.
Every row in the table is enclosed in <TR> and </TR> tags. "Align=" and "valign=" attributes of this tag help position the cell contents "left", "right" or "center" and "top", "middle", or "bottom."
Rows can contain two types of cells: heading cells and data cells. The main difference between them is that the contents of heading cells appear in bold face and are centered by default. The <TH> and </TH> tags define a heading cell while the <TD> and </TD> tags are used for data cells. Both the <TH> and <TD> tags support attributes to control the appearance of the cell and its contents (text, images, links...among other things). The "align=" and "valign=" attributes establish the horizontal and vertical alignment of the contents of the cell and can take values of "left", "right" or "center" and "top", "middle" or "bottom." With "rowspan=" you can determine how many rows the cell will span. "Colspan=" does the same thing for columns. "Width=" is another way to format the cell and is specified in pixels or as a percentage of the table width. "Nowrap" prevents automatic wrapping of the cell contents.
Here are some examples I borrowed from Netscape:
A SIMPLE TABLE
| A | B | C |
| D | E | F |
<TABLE BORDER> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
TWO DEMONSTRATIONS OF ROWSPAN
| Item 1 | Item 2 | Item 3 |
| Item 4 | Item 5 |
<TABLE BORDER> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>
| Item 1 | Item 2 | Item 3 | Item 4 |
| Item 5 | Item 6 | Item 7 |
<TABLE BORDER> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE>
DEMONSTRATION OF COLSPAN
| Item 1 | Item 2 | |
| Item 3 | Item 4 | Item 5 |
<TABLE BORDER> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>
DEMONSTRATION OF HEADERS, <TH>
| Head1 | Head2 | Head3 |
|---|---|---|
| A | B | C |
| D | E | F |
<TABLE BORDER> <TR> <TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
DEMONSTRATION OF SIDE HEADERS
| Head1 | Item 1 | Item 2 | Item 3 |
|---|---|---|---|
| Head2 | Item 4 | Item 5 | Item 6 |
| Head3 | Item 7 | Item 8 | Item 9 |
<TABLE BORDER> <TR><TH>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR> <TR><TH>Head2</TH> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR> <TR><TH>Head3</TH> <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR> </TABLE>
A TABLE WITH A BORDER OF 10
| Item 1 | Item 2 |
| Item 3 | Item 4 |
<TABLE BORDER=10> <TR> <TD>Item 1</TD> <TD> Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> </TR> </TABLE>
CELLPADDING AND CELLSPACING
| A | B | C |
| D | E | F |
<TABLE BORDER CELLPADDING=10 CELLSPACING=0> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
| A | B | C |
| D | E | F |
<TABLE BORDER CELLPADDING=0 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
| A | B | C |
| D | E | F |
<TABLE BORDER CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
| A | B | C |
| D | E | F |
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>