HTML Tutorial

A Brief HTML Tutorial

I. The head and body sections

      A. The head section
      B. The body section
            1. Background Images
            2. Background Color
            3. Text Color
            4. Link Color
            5. Visited Link Color
            6. Active Link Color
            7. RGB Color Codes

II. Formatting Text

      A. Alignment
      B. Enhancement
            1. Boldface
            2. Italics
            3. Underline
            4. Superscript
            5. Subscript
            6. Blinking
      C. Size and Color
      D. Seperation
      E. Special Characters
      F. Spacing
      G. Preformatted Text

III. Images

      A. Inserting Images
      B. Clickable Image Maps

IV. Special HTML

      A. Tables
      B. Slide Shows

I. The head and body sections

 A. The head section
 B. The body section

 1. Background Images

In an HTML document you may use a background image to make your page more visually appealing. When you use a background image, the browser takes that image and tiles it over the visible browser window to give the impression of one continuous image. There are many places where you can find background images on the web. One is http://www.mathstat.usouthal.edu/backgrounds.html. You should exercise caution when using backgrounds images however. A large image could cause a slow download time, and some images obscure any color text. Before you decide on a background image, try it out with the text you plan to put on your page to make sure that it is acceptable.

The background image is inserted in the <body> tag. For example, in order to use the file darkback.jpg as your background image, you would use the following sequence.

<body background="darkback.jpg">

There are a few common formats for images. The two most common are GIF (.gif) and JPEG (.jpeg or .jpg). GIF is an acronym meaning Graphics Interchange Format, and JPEG is an acronym meaning Joint Photographics Expert Group. GIF is a common format which uses 8 bits to represent colors. Therefore, in a GIF image, there are 256 unique colors. JPEG was specifically designed for photographs and has the possibility of millions of colors.

 2. Background Color

Instead of a background image, you may choose to have a background color. Background colors have the advantage that they will allow your page to load quicker.

 3. Text Color

 4. Link Color

 5. Visited Link Color

 6. Active Link Color

 7. RGB Color Codes

In order to tell the browser what color to use, you must use the code #RRGGBB. RR GG and BB are hexadecimal digits. Hexadecimal is a number system which has 16 digits, 0-9, A, B, C, D, E, and F. RR GG and BB are hexadecimal digits which represent a color. There are 256 different shades of red, green, and blue. Sometimes it is difficult to tell how a particular color will look except for trying it. To this end, there is a program you can use to test what a red, green, and blue combination will look like. This program allows you to input red, green, and blue components in decimal numbers from 0 to 255. It will then allow you to see what the combination looks like and display the hexadecimal equivalent. You may find the program at http://www.mathstat.usouthal.edu/~lynn/applets/Tester.html.

II. Formatting Text

 A. Alignment
 B. Enhancement

 There are various ways in which one can enhance text in an HTML document. Some of those include:

 1. Boldface

In order to make text boldface precede the the text by the tag and follow it by the tag . For example, to boldface the words My Resume in an HTML document, you would use the following sequence.

My Resume

 2. Italics

In order to italicize text precede the text by the tag and follow it by the tag . For example, to italicize the words My Resume in an HTML document, you would use the following sequence.

My Resume

 3. Underline

In order to underline text precede the text by the tag and follow it by the tag . For example, to underline the words My Resume in an HTML document, you would use the following sequence.

My Resume

 4. Superscript

You may also raise text such as in exponents. To superscript text precede the text by the tag and follow it by . For example, to write x to the power 2 you would use the following sequence.

x 2 

 5. Subscript

You may also lower text such as in array indices. To subscript text precede the text by the tag and follow it by . For example, to reference the first element in the array x you would use the following sequence.

x 1 

 6. Blinking

You may also have text blink. To make text blink precede the text by the tag <blink> and follow it by </blink>. For example, to make the words My Resume blink you would use the following sequence.

<blink>My Resume</blink>

 C. Size and Color

You have control over the size and color of your text. HTML has 6 predefined heading sizes for text. These heading sizes are placed into your document by preceding the text with the tag <hn> and following the text by <hn>, where n is any integer from 1 to 6. h1 is the largest predefined heading size, and h6 is the smallest. Normally h1 is used for the main heading in your document. When using the hn tags, the browser will automatically insert a blank line between the text within the tags and the text following the text between the tags.

There is another way of increasing the size of your text without introducing blank space in your document is to use the font tag. Within the font tag, you can control not only the size of the text but also the color. You can specify the size by using a + sign. So if we use the code size="+1", then we mean that the text within the font tags will have a font size which is one point larger than the font size being used currently. To specify the color of your text, you may use the same RGB code that is used for text and link color. A typical font tag would be as follows.

text

This will cause text to be printed out at one point size larger than the font size being used normally, and it will be red.

 D. Seperation

There are a couple of standard ways of seperating the text in our document.

br - br is the HTML equivalent of a line feed. That is, br will break the line.
hr - hr places a horizontal ruler line on the screen.

E. Special Characters

In HTML certain characters have certain meanings, for example the greater than sign. So if you want to use these characters as part of your normal document then we must somehow inform the browser to use these characters as characters and not as their special function. There are a few special characters which should be mentioned.

To accomplish <, insert the characters &#60 into your document.
To accomplish >, insert the characters &#62 into your document.
To accomplish &, insert the characters &#38 into your document.
To accomplish ", insert the characters &#34 into your document.
To make a blank space, insert the characters &#160 into your document.

F. Spacing

HTML does not recognize blank space. That is, no matter how many blank lines you insert between lines of text, the browser will ignore them. To accomplish spacing in your document, you must use either the br tag to break several lines and add vertical space, or use the characters &#160 to insert horizontal space.

 G. Preformatted Text

As stated before, HTML doesn't recognize blank spaces in a document. So if you created a table in a word processing program and saved this as a text document, and then tried to load it into your browser, the alignment of the table will be lost. To avoid this you can tell the browser to interpret text exactly as it was written, that is you can tell the browser that horizontal and vertical white space does matter. To do this precede the text by the tag <pre> and follow the text by </pre>. This will cause the text between the pre tags to be interpreted by the browser exactly the way it was written.

III. Images

 A. Inserting Images

In order to insert images into your document you use the tag <img>. Within this tag, you place the name of the image file. The basic syntax is as follows.

<img src="filename">

This code inserted into your html document will place the image on your page. One thing to keep in mind is that when browsing a site you have the option of not loading images. The reason for this is that many people view web sites through very slow connections. Images are the major reason that pages load slowly. An image that is large will make download time unreasonable. When it takes too long to load your page, most people will just leave, and the purpose of your page will be defeated. When sometimes turns off the option of loading images, they will not see the image you place on your page. In order to inform the viewer of what the image is supposed to be, you include the following option.

<img src="filename" alt="message">

If a viewer has turned off the option to load images, then the message will be displayed.

You also have the option of controlling the height and width of the image displayed. You should exercise caution when using these options because you choose an inappropriate width or height, then your image will be distorted. The syntax to include these options is as follows.

<img src="filename" alt="message" width="www" height="hhh">

In the above tag, www and hhh refer to the width and height of the image, respectively, measured in picture elements (pixels).

 B. Clickable Image Maps

A very creative thing that can be done with an image is to turn it into an active map. For example, suppose you have a photo of several of your family members. Suppose you wanted to configure the image so that if the user clicks on a certain family member in the picture, then the browser will load a certain page. To process to make this a reality is not very difficult. It does require a little bit of work though. The first thing that you must do is partition the image up and decide what URL you would like activated when the user clicks there.

Once you have decided how you want to divide the image, you must tell inform the browser of the coordinates surrounding these areas. You inform the browser of these coordinates in a special file called a map file. Within this map file you may specify 5 (five) different borders.

circle - to indicate that all points within a certain circle within the image be associated with a certain URL, we need to indicate two things to the browser, the center of the circle and a point on the edge of the circle. Within the map file you would place a line of the following form.
```
circle URL xc,yc xe,ye
```
In this line, xc and yc refer to the coordinates of the center of the circle, and xe and ye refer to the coordinates of a point on the edge of the circle. If the user clicks inside the circular region, then the browser loads URL.
rect - You may define a rectangular region. Within the map file we would place a line of the following form.
```
rect URL x1,y1 x2,y2
```
If the user clicks inside the rectangular region with opposite vertices x1,y1 and x2,y2, then the browser will load URL.
poly - A polygon allows us flexibility in defining a region in our image. This would be appropriate for trying to define a region in a photograph which corresponds to a person. Within the map file we would place a line of the following form.
```
poly URL x1,y1 x2,y2 ... xn,yn
```
The browser defines a polygonal image with x1,y1, x2,y2, ...,xn,yn as vertices. The browser will connect x1,y1 to xn,yn so that the polygonal region will be closed. If the user clicks inside this region, then the browser will load URL.
point - You may associate a URL with a specific point in the image if that point is not part of a circle, polygon, or rectangular region. Within the map file we would place a line of the following form.
```
point URL x,y
```
In this line, x and y are the coordinates of the point. If the user clicks on that point, then the browser will load URL.
default - You may also specify a default URL. That is, if the user clicks on a point which is not inside of any defined region and not active itself, then the browser will load a default URL. Within the map file we would place a line of the following form.
```
default URL
```

In order to determine the coordinates of these regions you may use any freely available software. One such software package is lviewp1a.zip. In order to unpack this program, you may use pk204g.exe.

Once you have created your map file, you may save it with some name such as image.map. Supppose the image associated with this file is called image.jpg. Then we would use the following code in our document to indicate that this image is an active image which is associated with the map file image.map.

<a href="image.map"><img src="image.jpg" ISMAP></a>

IV. Special HTML

A. Tables
B. Slide Shows