In lesson 1 you learned about the two parts of an HTML document. You learned how HTML tags are used and how text can be formatted and aligned. In this lesson we will cover the following topics:
- Using fonts and colours.
- Placing graphics on your pages.
- Linking pages together.
Using Fonts And Colours
HTML has many visual features that allow a web site creator to get the reader's attention. Important among these attention getting features is the ability to specify font and colour information for the document.
At any point in the body of a document, you can specify a font for the text following by inserting a <font> tag. The <font> tag is a container tag so placing a </font> tag in your text causes the browser to revert back to whatever font was in effect before the <font> tag was encountered. The <font> tag has 3 attributes that may be used. These attributes are:
- Face - specifies the font to be used in the text following.
- Size - specifies the character height of the text following and
- Color - specifies the colour of the text following.
You use the face attribute to choose the font you wish to use for the text following the <font> tag like this:
<font face=arial> This text is in arial. </font> This text is in whatever font was in use previous to the font tag.
When you are creating a site for a wide audience using a variety of hardware, operating systems and browsers you will not always know exactly what fonts a viewer will have available on his/her computer. You can use the face attribute to specify a choice of fonts like this:
<font face="verdana", "arial", "helvetica"> This is an example of font selection. </font>
The fonts named in the list are scanned by the browser from left to right until a match is found on the viewer's computer. The first matching font is then used in the displaying of the text following.
You use the size attribute to specify the character height of the text following. Font sizes can be specified either as an absolute size between 1 and 7 or as a size relative to the size currently in effect. The default size is 3. You specify an absolute font size like this:
<font size=5> This text is displayed with font size 5. </font> This text is displayed with the default size restored.
You can specify a relative size like this:
<font size="-2"> This text is displayed using font size 1. </font> <font size="+3"> This text is displayed using font size 6. </font>
You can use the <font> tag's color attribute to change the colour of the text following. Colours can be expressed as one of the predefined colour names or as a hexidecimal RGB (red green blue) value. Here is an example of the use of the color attribute where the colour is one of the predefined colour names:
<font color=green> This text is in green </font> This text is shown in the colour prior to the use of the <font> tag.
The following table contains a list of the predefined colour names and their equivalent RGB values:
| Color | Value |
|---|---|
| Black | #000000 |
| Maroon | #800000 |
| Green | #008000 |
| Olive | #808000 |
| Navy | #000080 |
| Purple | #800080 |
| Teal | #008080 |
| Gray | #808080 |
| Silver | #C0C0C0 |
| Red | #FF0000 |
| Lime | #00FF00 |
| Yellow | #FFFF00 |
| Blue | #0000FF |
| Fuchsia | #FF00FF |
| Aqua | #00FFFF |
| White | #FFFFFF |
Now here is an example of the use of the colour attribute where the colour is expressed as one of the hexidecimal RGB values. In this example the text within the <font> tag would be shown in aqua.
<font color="#00FFFF"> Aqua text. </font> This text is shown in the colour of the text prior to the use of the <font> tag.
Notice the use of the number sign (#) before the colour value. Following the number sign are 3 pairs of hexadecimal values the first pair for red, the second for green and the third for blue. The following link will take you to a complete list of all the RGB colours and their values.
A Complete List Of Colours And Their RGB Values
Choosing the overall colour scheme
Before you begin creating your document, you must decide on an overall colour scheme for the body of your document. Colour schemes are usually either selected in the <body> tag or they can be specified in a cascading style sheet. We will discuss style sheets in the next lesson.
You can select your colour scheme in the <body> tag like this:
<body bgcolor=navy text=white link=red vlink=blue alink=green>
In the above example the following attributes are used to define the colour scheme:
- The bcolor attribute is used to define the background colour as navy.
- The text attribute is used to define the text colour as White.
- The link attribute is used to define the colour of the unvisited links as red. The browser determines when a link has been visited.
- The vlink attribute is used to define the visited llinks as blue.
- The alink attribute is used to define the active links as green. A link becomes active when the mouse passes over it or the keyboard is used to give the link focus.
Placing Graphics On A document
The use of graphics in a document can be problematic for a blind web site author since the creation and sizing of graphics is a very visual process.
To create graphics for a web site, a sighted author might scan an image, take a photo with a digital camera, draw an image with a graphics program such as Paint Shop Pro or Photoshop, or he/she might use an existing image. Then the sighted author would use a graphics program to touch up the image making sure that the colours are correct for the web site and the image is properly sized. Depending on what the image is being used for, the web author might place some text on the image. Most often the final version of the image will be saved as either a GIF (.gif) or JPG (.jpg) file. As a blind author, you will need sighted help to produce your graphics and make sure they have the appropriate look and placement when they appear on your site.
Once your graphics files are created, they are easy to place on a document. You can use the <img> tag to place an image on your document like this:
<html> <head> <title> Placing A Graphic On A Document </title> </head> <body> <p> The image below is my photo. <p> <img align=center src="myphoto.gif" alt="My Photo"> </body> </html>
In the above example, the <img> tag contains three attributes, the align attribute that you saw in lesson 1, the src attribute and the alt attribute. The src attribute points to the graphics file myphoto.gif. In this case myphoto.gif would be placed in the same directory as the html document itself. Often, web masters place an image directory within the directory where the html documents are stored. In such a case, the same photo would be referenced like this:
<img align=center src="images/myphoto.gif" alt="My Photograph">
The alt attribute is used to define alternative text for the image. This alternative text is vital for blind users since they have no other way of identifying what is on the image. You should ALWAYS use the alt attribute when placing images on your HTML documents.
Linking Documents Together
The World Wide Web would not be a web at all if it weren't possible for one document to be linked to another. Documents are linked to one another through the use of anchors. An anchor has two parts. The first part is the text or graphic we see that draws the user's attention to the link. The second part is the URL (universal resource locator) that points to thedocument that will be displayed when the user clicks on the link.
There are two types of anchors, text anchors and graphical anchors. Text anchors contain a textual referenced to the document that will be retrieved when the link is clicked. The colour of the text is under the control of the document's author. Graphical anchors contain a graphical image usually with painted on text describing the document that will be shown when the link is clicked.
The following is an example of a link using a text anchor:
<a href="mylinkdoc.htm"> My Linked To Document </a>
Now here is an example of a link using a graphical anchor:
<a href="mylinkdoc.htm"> <img src="images/myimage.gif" alt="Never Forget The Alt Text" > </a>
Note that the difference between the two kinds of anchors is that one contains text while the other contains the graphical image from images/myimage.gif.
If you want to receive feedback from your viewers via email, you can create an anchor on your page which references an email address like this:
<a href="mailto:userid@myisp.com"> contact me </a>
When the user clicks on a link such as the type shown above, the user's email program will display a new message with the email address filled in.
Anchors can contain links that point to an area within the same document. Examine the following:
<html> <head> <title> An Example Of A link To An Area Within The Same Page </title> </head> <body> <a name=top> <p> This is a line containing text. ... ... ... <a href="#top"> Back To Top </a> </body> </html>
Note that the above example has two anchors. The first anchor is given the name "top". This type of anchor can be placed anywhere in a document you might want to link to. In this case it just happens to be placed at the top of the document. The second anchor creates a link to the first. When the user clicks on the second anchor, the browser moves focus to the top of the documentt. This technique is useful where you are displaying a large document and you want to have the ability to move around easily within it. a document can have as many links to other parts of the same document as you wish.
Conclusion
In this lesson you learned how to use fonts and colours, how to place graphics on your documents and how to link pages together. Chapters 6, 7 and 8 contain a lot of useful background information on these topics and I recommend that you read these chapters.
In the next lesson you will learn how to use tables to format your documents, you will learn about the use of frames and you will learn how to apply overall formatting to your site through the use of cascading style sheets.
| Lesson 3 | For-The-People | Back To Course Home Page |