An introduction to the InternetBasics of HTML (2) [Archives:2003/653/Education]

Adnan A. Al-Harazi
Academic Head
NCC Education, Yemen Center
Referring to previous lessons, we said that web pages are actually HTML files. HTML stands for HyperText Markup Language, the most commonly used programming language in formatting Internet web pages. There are several versions of HTML. The latest version is HTML 4.0. HyperText here means the text that references another text in a nonlinear method. You click over links in the form of words or images to move from one source to another on the Internet. Markup here means putting text, images or pictures along with tables on one page in an understandable way. And finally, Language means the programming language used. It is worth bearing in mind that there are other languages used in web pages for designing, but HTML was the first and continues to be the dominant language.

Web page backgrounds
You can use HTML to change the web page background color or picture. The default color of the web pages is usually white or gray. To change the default color of the page you add the background attribute in the body tag. In our example, as in fig 1 in line 5, we changed the background color of the page to a new color which has the value of “CCFFFF”. You can also use the regular expressions for colors such as red or blue tc. For example to make the background of the page look green you write the code as follows:

Notice we use “bgcolor” in HTML to refer to the page background color.
It is very important to select a background color that fits the color of the text of the page. If the text color is black, the background color should be lighter, e.g. white color. The default color for text in any web page is usually black. It can be changed by adding the attribute for the text color in the same body tag. For example in our code to change the color of the text that will be written in the body of the page, we change the body tag to look as follows:

The text color now will have the value “#000080” and this value is something closer to the dark blue. You can also use the regular expressions of colors for the text color.
Here, we have just changed the color of the regular text. 'Regular' here means the text that is not acting as hyperlink. The text that is acting as a hyperlink should have a different color to distinguish it from the regular text. The default and most common color used to format the hyperlinks, is blue. In case you have your own style in selecting colors and you want to change the color of the hyperlinks, you add the “link” attribute to the body tag. For example to change the hyperlink color to brown, we change the body tag to the following:

Well, I don't think you will not like to follow the standards, but in web designing standards are critical so I don't advice you to change the hyperlinks color.
Another distinct text color is that of visited hyperlinks. If you have noticed this before, when you go back to a web page that includes hyperlinks you visited them before, the text color is different from what it was before. This is very useful for visitors so as they can easily recognize the links they have already clicked. The default color of the visited links is something closer to purple. To change this color to another, you add the “vlink” attribute, which stands for visited link, to the body tag. For example to change the visited links color to red, the body tag should look as follows:

There is also the active hyperlink text color. Active text is the hyperlink text which is in-transit after the visitor clicked on it. To change this color you add the active link attribute “alink” to the body tag. To change the color of the active links to white, the body tag should look like this:

Using lists
HTML provides a variety of methods to display lists of data. There are three basic styles of lists you can design by using HTML. The three types are, Unordered lists, Ordered lists, and Definition lists.

Unordered Lists
An unordered list is a list that shows a number of items without any ordering. For example an unordered list that includes three items could look as follows:

Main Cities in Yemen
– Sana'a
– Aden
– Taiz

To design the same example by using HTML we use the “

” tags as follows:

Main Cities in Yemen

• Sanaa'a
  
• Aden
  
• Taiz
  

Notice, the

tags don't need closing tags.
We can also select the type of the bullets either disk, square or circle by adding the “type” attribute to the list tag as follows:

Ordered Lists
Ordered list is a list that shows a list of items with ordering or a sequence. The order could be alphabetical or numerical order. To display the previous example by using an order list, we use the ordered list tags “

” as follows:

Main Cities in Yemen

1. Sanaa'a
   
2. Aden
   
3. Taiz
   

The default type of the order is numeric where the counting starts at “1”. To change the type of the order and the starting point of the list, we add the type and starting attributes to the ordered list starting tag.
The type could be one of the following:
– 1: uses numbers (default).
– a: uses lower case letters in sequence
– A: uses upper case letters in sequence
– i: uses low case Roman numbering
– I: uses upper case Roman numbering
So to make our example list ordered alphabetically, we change the code as follows:


If you have any questions about the lessons please send me an e-mail to [email protected].

Next week: More in HTML
——
[archive-e:653-v:13-y:2003-d:2003-07-24-p:education]