A Primer for Hypertext Markup Language (HTML)

applet-magic.com Thayer Watkins Silicon Valley & Tornado Alley USA

The Nature of HTML

HTML stands for Hypertext Markup Language. Most of what one needs for preparing documents concerns the Markup Language. The Markup Language tells the web browser how to format the display of an HTML file. The Hypertext part refers to the linking together of HTML files. Much of the power of the web comes from this provision , but it requires only a miniscule amount of learning.

The Markup Language involves special words and symbols giving instructions to a browser as to how a document is to be displayed. For example, when <I> is encountered by the browser it indicates that the text that follows is to be displayed in italics. It is like a switch that turns on italics. This means that at the end of text to be italicized you must switch off italics. You do this by including </I> at the end of the italicized section. Likewise there are switches (or TAGS as they are called) for underlining (<U> and </U>), and for displaying the text in bold letters (<B> and </B>).

HTML is not case sensitive so <i>...</i> works just as well as <I>...</I> for handling italization.

HTML File Structure

The general structure of an HTML files is:

The HEAD portion of the HTML is basically for presenting the title of the document. This title will be used by search engines.

Institutions such as universities typically want each HTML document to display their name near the top of the page. This can be achieved by including the following at the beginning of the BODY part of the document:

<CENTER>Such-and-such University</CENTER>.

The <CENTER></CENTER> tags will center the text.

The Preparation of HTML Files

You can use a simple word processor to enter the necessary tags at the beginning and end of a document you already have. You will also have to make some additions to the text itself. You will need to put <P> or <p> at the beginning of each paragraph. (HTML is case insensitive except for the name of files.) Web browsers will ignore carriage returns and will wrap the text to fit the screen. If you want a break in the text such as for an equation you must tell the browser to make a line break by including a <BR> tag. The <BR> tag does not have to be closed; i.e., switched off. Neither does the paragraph tag <p> but it does not hurt to do so and doing so is a good habit to develop which will be helpful for going on to XHTML where paragraph tags do have to be closed.

This is the minimal basics of HTML.

The previous material is enough information to prepare HTML documents from your existing text files. There is of course much more that you can do with HTML.

Linking

You can link one HTML file to another by means for what is known as an anchor tag; i.e.,

<A HREF="http://www.sjsu.edu/faculty/watkins/watkins.htm">
Home Page of Thayer Watkins</A>.

This line in your web page file would result in my Home Page appearing underlined and when anyone clicks on it the browser would go to the address:

http://www.sjsu.edu/faculty/watkins/watkins.htm

This is known as the URL (universal reference locator) for the file.

If the URL does not include the http://www.sjsu.edu/depts/economics/ part then the browser looks for the file in the same directory as that of the file it is reading.

As mentioned previously HTML is not case sensitive except for things enclosed within quotation marks. This means it is best to avoid having to remember exactly where you used uppercase letters by using only lower case letters for file names.

Images:

To include images in a web page you need the image in the form of a gif file, a bmp file or a jpg file.

The line needed to include an image labeled sj12.gif in a webpage is:

<IMG SRC=sj12.gif>.

Displayed this is:

Fonts

There is a FONT tag that permits you to specify the size of the font, color, and font style. The sizes run from 1 to 7 with size 4 being the ordinary size and the default value. Color can be specified for the usual colors by name. To display text in very large red letters the following can be used:

<FONT SIZE=7 COLOR="red"> Ö.textÖ.. </FONT>

This gives Big Red Letters

The various font sizes are:

1 2 3 4 5 6 7 8

This display shows that if you specify a font size greater than 7, say 8, the font size is set to 7.

Colors

The common colors, such as red and green, can be specified by name. As noted above the font can be changed to red with the tag:

Unusual colors can be specified in terms of RGB (red, green, blue) code which is a triplet of two-digit hexadecimal numbers. Here is a file that displays a variety of colors and their RGB codes. With a little experimentation you can create the colors you want. If the RGB values are all equal then the color is a shade of gray from white (#FFFFF) to black (#000000). The minimum of the RGB levels establishes the shade of gray to which the values above the minimum adds coloring. For example, the color #FF9999 is like the gray #999999 to which pure red is added.

The background color can be specified as an attribute within the <BODY> tag; e.g.,

Mathematical Symbols

Fortunately HTML now has been modified to allow the use of Greek characters and mathematical symbols. These are provided by means of what are called entities. An entity is introduced by the ampersand symbol, &. After the &&; comes the name for code number for the symbol and then a semicolon to end the entity. For example, the partial differentiation sign in mathematics is given by the entity ∂ which is displayed as ∂.

Another way of displaying special symbols for which HTML does not have an entity is to scan images of them into Photoshop and create gif files for them. The disadvantage of this method is the gif file do not change when the font size for the other characters is changed.

The Proposed Math Tags

For sometime there has been the proposed <MATH> </MATH> tags. After the browswer reads the <MATH> tag a set of other mathematical tags become operative. For example, the following code

should produce an x with a line above it, the familiar x-bar: $x$ . Unfortunately most of the existing browsers do not recognize the <MATH> tags, so you just get an x. The same affect can be achieved in non<MATH> enabled browsers using a <TABLE> construction; i.e. <TABLE><TH>_<BR>x</TH><TABLE> which gives

_ x

Some of the proposed tags are:

Overline Tags
- <HAT> which draws a ^ above enclosed text. x
- <TILDE> which draws a ~ above enclosed text. x
- <BAR> which draws a - above enclosed text. x
- <DOT> which draws a single dot . above enclosed text. x
- <DDOT> which draws a double dot .. above enclosed text. x
- <VEC> which draws a right arrow > above enclosed text. x
<SQRT> which draws a square symbol around enclosed text. x
<BOX> which creates a box within which an array or fraction may be constructed.x

Greek letters in the <MATH> system will be given by & with the name of the letter; e.g. α. $α$ .

Lists

Lists may ordered <OL> or unordered <UL>. An unordered list of the Pacific Coast states would be expressed as follows:

<UL>
<LI>California
<LI>Oregon
<LI>Washington
</UL>

This would display as:

California
Oregon
Washington

Tables

Tables are a bit tedious to specify. The form is:

<TABLE BORDER=5>
<TH>Column Heading 1</TH> <TH>Column Heading 2</TH>
<TR><TD>Datum A</TD> <TD>Datum B</TD></TR>
<TR><TD>Datum C</TD> <TD>Datum D</TD></TR>
</TABLE>

<TABLE BORDER=5>
<TH>State</TH> <TH>Gross State <BR>Product</TH>
<TR><TD>Baja Oklahoma</TD> <TD>$60 billion</TD></TR>
<TR><TD>East Dakota</TD> <TD>$29 billion</TD></TR>
</TABLE>

This would display as:

State	Gross State Product
Baja Oklahoma	$60 billion
East Dakota	$29 billion

Addendum

Preformatted Text

Browsers in formatting usual HTML code put only one space between words no matter how many spaces there are in the text. Additional spaces can be included by putting in the code for a nonbreaking space, which is   .

Sometimes the above procedure is awkward and tedious. An alternative is to use the preformatted tag <PRE>.....</PRE> This tag includes all the spaces and line breaks. The drawback is that the font used is rather drab. However, other tags can be used within these tags.

Frames

Frames is a system that allows flexibility in the presentation of information in a webpage and greatly enhances its appearance. Frames are created using the <FRAMESET>, </FRAMESET> tags. These tags take the place of the <BODY>, </BODY> tags.

Here is how the set of frames in which the pages is divided into an upper frame occupying 40% of the page and a lower frame occupying 60% of the page would be created.

These frames do not have any content. To give them content the <FRAME> tag is used. Suppose there are two HTML files called upper.htm and lower.htm. The content of these two files will be displayed in the frames by means of the following code.

The contents of upper.htm and lower.htm are:

This is the upper frame. </BODY>
</HTML>

and

This is the lower frame.

</BODY>
</HTML>

To see the result: Frame 0

The page can also be divided vertical, as with:

To see the result: Frame 1

Or the page can be divided horizontally and then the upper horizontal frame divided vertically as with:

To see the result: Frame 2

To divide the upper and lower frames vertically in different proportions the following code may be used.

To see the result: Frame 3

Image Maps

Image maps allow a reader to access information from an image by clicking on links defined by areas of the image. The link areas are defined by a shape and a set of coordinates. A rectangular shape is defined by the coordinates for the upper left corner and the lower right corner. The coordinates are measured in pixels from (0,0) at the upper left corner of the window the image is displayed in.

The following code will display a map of the U.S. and southern Canada. Of course the target files for the links must be prepared separately.

Click on cities to view information on their economies.

Fragment URL's

Sometimes it is desirable to provide a link to a particular location within an HTML file. Suppose a file labeled korea.htm contains two subfiles named Seoul and Pusan. The anchor could be :

<A HREF="korea.htm#SEOUL"> Seoul</A>.

In the korea.htm file at the section targeted there would be an anchor tag of the form

<A NAME="SEOUL">Seoul

Likewise there would be a link for Pusan and a corresponding anchor tag in the korea.htm file.

Forms

The <FORM> tag is designed for taking information from the viewer and processing it to present back the results to the viewer or to pass on to the server where the file originates.

The <FORM> tag itself can contain a variety of information such as what action to execute on some event like "onclick."

The code contained between the <FORM> and </FORM> gives the structure of the Form. A key element of this is the <INPUT> tag. For example, a form to obtain the first and last name of a viewer would be created with these two lines:

The complete code for getting the viewers name would be:

To see how this code runs click here. Form 1

In a real application the </FORM> would provide instructions to the computer about what to do with the name information. To see such an application click here. Form 2

For a more elaborate application of this type see Form 3

Cascading Style Sheets

Cascading Style Sheets serves three functions: 1. Maintain some common characteristics of a number of webpages such as background color 2. Change those common characteristics quickly and easily 3. Customize some of the HTML tags to provide for such things as indentation and highlighting.

Here is an example of a CSS file:

P {font-size:12pt; text-indent:0.2in}
H4 {margin-left:0.2in; margin-right:0.2in;
text-align:center; font-size:18pt; color:#000000; background:#FFFF00}
BODY {background:#AAFFFF; color:#000000; margin-left:0.2in; margin-right:0.2in; font-weight:bold}

The format of the CSS specifications is that there is an HTML tag word and then the new attributes values for that tag given within curly braces. An attribute value consists of the attribute followed by a colon (:) and then the value. For example, the line for the paragraph tag P says that the font-size will be 12pt (12 point) and there will be an indentation of the opening line which is 0.2in (inch).

The H4 tag is a small heading and is little used. The line for H4 in the CSS file turns the H4 tag into something very useful, an arrangement for mathematical equations in which the equation (or any other text) is indented and centered with the characters made in a larger font size and highlighted in yellow.

The <BODY> tag is used to specify the background color as blue-green in the above CSS. The color attribute establishes the text color. In the above CSS the right and left indentation are also specified.

There are many more stylistic elements that can be established with CSS.

In order for an HTML file to use a particular CSS it is necessary to include a <LINK> tag in the HEAD part of the HTML document. The above CSS is labled ecostyle.css. The <LINK> tag to be included is as follows:

Note: When using CSS it is a good idea to close paragraphs with </P>. Also it is good to include a document type line such as the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

A more elaborate CSS is the following:

BODY {background:#00FFFF; color:#004444; margin-left:0.5in;
margin-right:0.5in; font-weight: bold}
H1 {margin-left:0.5in; margin-right:0.5in; text-align:center;
font-size:24pt; color:#FF0000; background:#FFFF88}

H2 {margin-left:0.5in; margin-right:0.5in; text-align:center;
font-size:20pt; color:#00AA00; background:#FFFFFF}

H3 {margin-left:0.5in; margin-right:0.5in; text-align:center;
font-size:18pt; color:#000000; background:#DDAA88}

H4 {margin-left:0.1in; margin-right:0.1in; text-align:center;
font-size:18pt; font-weight:bold; color:#000000; background:#FFFF00}

P {font-size:12pt; text-indent:0.5in}
UL {background:#44FF88; margin-right:0.3in}
TABLE {bgcolor:yellow;}

TD {font-size:16pt; font-weight:bold; text-align:right}

TH {font-size:16pt; font-weight:bold; text-align:right}

HOME PAGE OF applet-magic
HOME PAGE OF Thayer Watkins