This page is designed to provide demonstrate use and examples of essential HTML tags. My goal is to show you that "Forty Gets You Ninety". What I mean is that familiarity with forty HTML tags will provide you with 90% literacy of basic HTML. You can do some great things with basic HTML, including adding images, animations, clickable image maps and clickable sounds. As you gain confidence add the dynamic features of Java, active-x and other interactive scripting tools. By the way, HTML stands for Hyper Text Markup Language, as if it matters!
|
|
You are the "author" of your pages. New web page editors make page creation, linking and image insertion relatively easy. Don't assume the process is "a no-brainer", but it isn't "rocket-science" either. If you want other people to use your pages, you need to make them useable. This may require you to make a list of the kinds of people who might visit your site (classmates, faculty, patients, relatives, and others). Arrange your information so it is attractive and meaningful to most of your potential visitors. Remember that not everyone has Internet experience or views information in the same way. Use graphics as appropriate to your content, as no one wants to wait minutes for your page to download. Some software will optimize your images for the web without significant distortion.
HTML "tags" are alphanumerics and common symbols which are
used to tell a web browser how to format the accompanying text, links,
images or other files. These tags are set apart from adjacent text by the
use of < and >. Each tag begins with a less than sign (<) and
ends with a greater than sign (>). They are affectionately called "bird
beaks". 
Example:
<html>
Text and symbols within the "bird beaks" provide instructions
to the web browser. It usually does not matter if upper or lowercase text
is used.
Example:
<html> = <HTML>
Many tags are used in pairs to restrict the text which is altered by
the special instruction. A slash is added to the last tag in the pair to
end the instruction.
Example:
<HTML> </HTML>
Some tags do not require pairs because the end of the instruction is implied in the formatting. Beware, if you open and save your HTML file in more than one HTML editor, changes may be made in the pairing structure or tag text. HTML validation (checking accuracy of tag formatting) is available through designated websites and is built into some HTML editors.
Controlling character spacing and line spacing in HTML is not as easy as with a word processor. The default for character spacing is one space. If you need more space between characters, you'll need to be kinda sneaky, more on this later. The default for line spacing is single spacing. You may use the paragraph tag <P> to add vertical space between paragraphs and some other page elements. You can't easily double-space an entire document. However you could leave it in a text format and put "preformat" HTML tags at the top and bottom of the document <PRE> </PRE> to meet this need. The limitation is that preformatted text is restricted to a "courier" font.
These are the tags that define your basic HTML document and should appear in every HTML file.
| <HTML> <HEAD> <TITLE> Page Title </TITLE> </HEAD> <BODY> Body of Web Page </BODY> </HTML> |
Begins or "starts" the HTML document. Contains all other
tags. Begins the page header, a "container" for other tags. Encloses the title bar (used by bookmark too). Ends the page header. Begins web page content & designates page attributes. Content... text, images, sounds, animations... Concludes web page content. Ends the HTML document. |
These tags are used to create title, subtitles and headings (hence the
name). There are six sizes of headings, each provides bolded text and a
proportionate amount of white space above and below the heading. <H1>
is the largest, <H6> is the smallest and <H4> is equal to the
default text size.
Example 1:
<H3>Text goes here</h3>
These tags allow the author to provide special emphasis or positioning
of text. These tags include
bold (strong), italic, underline, strikeout,
superscript, subscript and a few others.
HTML editing software makes the more popular text tags are available at
the push of a button.
|
bold (strong), italic underline superscript subscript |
<STRONG>bold (strong)</STRONG> or <B>bold (strong)</B> <EM>italic</EM> or <I>italic</I> <U>underline</U> <S>strikeout</S> or <STRIKE>strikeout</STRIKE> <SUP>superscript</SUP> <SUB>subscript</SUB> |
Text formatting tags which can be used alone include:
| paragraph line break single indent horizontal rule |
<P> <BR> <DD> <HR> |
Creates a single line spacing between text or object. Forces end of text line, continues on next line. Creates indent of about five spaces from left margin. Creates a horizontal line. Line thickness is variable. |
Text formatting tags which must be paired include:
|
center blockquote preformatted text |
<CENTER>...</CENTER> <BLOCKQUOTE>...</BLOCKQUOTE> <PRE>...</PRE> |
Example 1:
<CENTER>Text in this location will be centered on the page. <BR>This also works for centering tables and images. </CENTER>
Example 2:
<BLOCKQUOTE>"Quote goes here to be indented on both left and right margins." </BLOCKQUOTE>
"Quote goes here to be indented on both left and right margins."
Example 3:
<PRE>
Preformatted text goes here to retain all tabs and spacing.
You can't use character formatting such as bold, italics and underline.
The font is limited to Courier.
</PRE>
Preformatted text goes here to retain all tabs and spacing. You can't use character formatting such as bold, italics and underline. The font is limited to Courier.
These are the tags that allow you to jump to other pages, images or even other locations within the same page. I recommend that you let your HTML editor help you with creating links. It is very easy to introduce typos in creating these tags. Once the tag is created and functional, editing is relatively easy.
| Link to another website: Kari's Webpage
|
<A HREF="http://w3.ouhsc.edu/kboyce/">Kari's Webpage</A>
|
| Link to file in same directory: Helpfiles Created by Kari
|
<A HREF="help.htm">Helpfiles Created by Kari</A>
|
| Link to file in subdirectory: Ideaguy Graphic
|
<A HREF="images/ideaguy.gif">Ideaguy Graphic</A>
|
| Link to file up a directory level: Kari's CV
|
<A HREF="../cvboyce.htm">Kari's CV</A>
|
| Creating a target: This is a target.
|
<A NAME="bullseye">This is a target.</A>
|
| Link to a target within same file: Go To Authoring Paragraph
|
<A HREF="#Authoring">Go To Authoring Paragraph</A>
|
| Link to target in a different file: Education on CV
|
<A HREF="../cvboyce.htm#Education">Education on CV</A>
|
| Link to target on a diskette: | <A HREF="file:///A|/subdirectory/filename.html"> Sample File on Diskette</A>
|
| Link to target on a CD-ROM: |
<A HREF="file:///D|/subdirectory/filename.jpg"> Sample Image on CD-ROM</A>
|
These tags are used to create ordered and unordered lists (aka. numbered and bulleted lists). By default the ordered list produces Arabic numbering (ie. 1, 2, 3, ...), however alphas and Roman numerals are available (TYPE=A, a, I, i, or 1). A variety of bullet shapes are also available for unordered lists (see last list example). A third type of list, definition lists are used when a portion of the list needs to be indented. Any combination of lists can be nested to create an outline.
List tags are paired. The tag <LI> which designates each list item functions as a single or paired tag.
|
<OL> <LI>Ordered Item One <LI>Ordered Item Two <LI>Ordered Item Three </OL> |
|
|
<UL> <LI>Unordered Item One <LI>Unordered Item Two <LI>Unordered Item Three </UL> |
|
<DL> <DT>Definition Term One <DD>Definition Description One <DT>Definition Term Two <DD>Definition Description Two <DT>Definition Term Three <DD>Definition Description Three </DL> |
|
<OL> <LI>Red <LI>Green <LI>Blue </OL> |
Table tags allow the author to subdivide space on a web page, for the placement of text, numbers & images, creating columns or even controling white space. Tables rely on nesting of cell tags within row tags. There are also a variety of attributes which can be applied to the entire table, a row, or a single cell. For example, each cell of a table can be colored independently. Cells can also be joined across columns or between rows. Table borders can be varied in width or not displayed at all. Cells can also be "padded" to increase the distance between the cell data and the cell margin.
Main Table Tags (see examples below for proper nesting and usage).
|
Table Table Row Table Header Cell (with bold) Table Data Cell (without bold) |
<TABLE>...</TABLE> <TR>...</TR> <TH>...</TH> <TD>...</TD> |
| Colors of Food | Fruit | Vegetables |
|---|---|---|
| Yellow | Lemon | Pepper |
| Orange | Peach | Squash |
| Green | Lime | Lettuce |
<TABLE border=0 cellpadding=10>
<TR>
<TH>Colors of Food</TH>
<TH>Fruit</TH>
<TH>Vegetables</TH>
</TR>
<TR>
<TH>Yellow</TH>
<TD>Lemon</TD>
<TD>Pepper</TD>
</TR>
<TR>
<TH>Orange</TH>
<TD>Peach</TD>
<TD>Squash</TD>
</TR>
<TR>
<TH>Green</TH>
<TD>Lime</TD>
<TD>Lettuce</TD>
</TR>
</TABLE>
| Colors of Food | Fruit | Vegetables |
|---|---|---|
| Yellow | Lemon | Pepper |
| Orange | Peach | Squash |
| Green | Lime | Lettuce |
| Colors of Food | Fruit | Vegetables |
|---|---|---|
| Yellow | Lemon | Pepper |
| Orange | Peach | Squash |
| Green | Lime | Lettuce |
| Colors of Food | Fruit | Vegetables |
|---|---|---|
| Yellow | Lemon | Pepper |
| Orange | Peach | Squash |
| Green | Lime | Lettuce |
| Colors of Food | Fruit | Vegetables |
|---|---|---|
| Yellow | Lemon | Pepper |
| Orange | Peach | Squash |
| Green | Lime | Lettuce |
| Headings | Decimal Notation | ||
| 100's | 10's | 1's | |
| Sample Numbers | 6 | 5 | 1 |
| 4 | 3 | 8 | |
| 7 | 2 | 9 | |
<TABLE border=5 cellpadding=10>
<TR>
<TD rowspan=2>Headings</TD>
<TD colspan=3>Decimal Notation</TD>
</TR>
<TR>
<TD>100's</TD>
<TD>10's</TD>
<TD>1's</TD>
</TR>
<TR>
<TD rowspan=3>Sample Numbers</TD>
<TD>6</TD>
<TD>5</TD>
<TD>1</TD>
</TR>
<TR>
<TD>4</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
<TR>
<TD>7</TD>
<TD>2</TD>
<TD>9</TD>
</TR>
</TABLE>
There are a variety of attributes which can be included within the <IMG> tag. You should always include a text description of the image using the ALT= "..."attribute. Many disabled users rely on text-only browsers and therefore this makes your pages more friendly for these users. The image dimensions should be provided using the HEIGHT= and WIDTH= attributes. This allows the page to load more quickly because the browser sets aside sufficient screen "real estate" to load images after the text.
<IMG SRC="file or web location of the image file" ALT="Text Description of Image for Text-Only Web Browsers">
Align image to the left. <IMG ALIGN=LEFT>
Align image to the right. <IMG ALIGN=RIGHT>
Align top of image with text. <IMG ALIGN=TOP>
Align middle of image with text. <IMG ALIGN=MIDDLE>
Align bottom of image with text. <IMG ALIGN=BOTTOM>
|
|
|
| <IMG BORDER=0> |
<IMG BORDER=1> |
<IMG BORDER=5> |
|
|
|
|
| <IMG WIDTH=180 HEIGHT=180> |
<IMG WIDTH=120 HEIGHT=60> |
<IMG WIDTH=60 HEIGHT=120> |
The meta tag provides a method to embed additional information in a web page which serves special purposes. One set of useful functions include providing descriptions and/or keywords for use by search engines. The <meta> tag must be positioned between the <head> </head> tags.
Many people with special communications needs use specialty web browsers that are unable to translate non-standard html tags. In addition, some people choose to turn-off images or their browsers are text-only. This is particularly important because we have clients and patients who may be using these special purpose web browsers which do not support all the features introduced for the Microsoft and Netscape browsers.
It is recommended that until there is widespread browser and editor support for cascading style sheets (CSS), web page authors should avoid use of font related style tags (font, font face, font color) and keep the use of tables to a minimum, particularly when lost of table structure interferes with interpretation of content. Try to resist the tendancy to try to control web pages with the degree of accuracy offered by popular word processors and desktop publishing software. In the coming year or two these problems will be reduced by increased CSS support which will allow the page layout, format and font to be defined without embedding special commands throughout the entire html document.
Therefore, before you become deeply involved in creating your own web pages, please take time to visit some of these websites dedicated to supporting universal access to web pages. These sites offer good suggestions for improving site navigation, universal access and provide tools for evaluating and testing your web pages. It is much easier to consider these issues "up front" and make necessary accommodations from the start.
Contents of this publication are subject to change without notice.
The provisions of this publication do not constitute a contract, expressed
or implied between any applicant, student, or faculty member of the College
of Allied Health. 7/22/96
The University of Oklahoma is an Equal Opportunity Institution.
Accommodations on the basis of disability are available by contacting
(405) 271-2655
---standard disclaimers apply---
© 1998 College of Allied Health | Disclaimers | College Webmaster
You are visitor #
as of January 16, 1998
