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 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 form of words or images to move from one source to another in the Internet. Markup here means putting text, images or pictures along with tables in one page in an understandable way. And finally, Language means programming language. It worth bearing in mind that there are other languages used in web pages designing but HTML was the first and still the dominant language.

Controlling Line Spacing
We said in the previous lesson that the tags define the body or text of the page. All the content which is intended to be read goes between these tags. For example, any thing that you type between the opening and closing body tags will be displayed in your web page. The inserting of images, adding tables or buttons will be done also in between of these body tags. In brief, most of the coding work should be in between the body tags. Ok, if you type any text in the body part of the page it will be displayed in the top left corner of the page. If you tried to add spaces or blank lines in the HTML code to make the text appear in specific place it will not work. The text will appear again in the top left corner. It is not possible to control line spacing by adding blank lines in HTML source. This must be done by using explicit tags. You can use the break tags “

” to make the text jump into a new line. For these tags you can just use the opening tag. Another tags used for line space controlling are the paragraph tags “

“. These tags make the browser format the text surrounded by the tags into a paragraph with appropriate formatting at the beginning and end of the paragraph. Let's go back to our example from last lesson and add the new tags we just learned as in fig1.
The new tags that I added to our “index.htm” file are in bold here to make them easy to locate. Notice, don't add the numbers, I use them as references in the discussion. To add these new tags open the file from last week lesson and just add the new lines with the new tags. Save the file and go browse it. You browse the file by going to the folder where it is saved and click over it. In line 6 the break tag will make the rest of the sentence jump into a new line. In line 7 I started a new paragraph by using the paragraph tag “

“. What ever the number of lines you type between the paragraph tags, they will be formatted as one paragraph.

Controlling Fonts
By using HTML you can change the attributes of the font used in the web page. You can change the style of the font or you can change the color or size of the font. To make the text in bold you can use the bold tags “ “. Any text between these tags will be displayed in bold. Another HTML tags that can be used to format text is the italic tags “ “. Any text in between of these tags will be in italic. By the way, you can apply as many tags as you can for any part of your web page. Let's apply these new tags for the word “Welcome” in line 6 in our example. Add the tags as follows:
Welcome
Save the new changes and browse the file. Notice the word “Welcome” text is bold and italic. Ok how about the font style? You change the font style by using the font tags “ ” and this tag has some attributes that you can change. These attributes are the font style, the font size and the font color. You can use them all at the same time or you can just use any of them as needed.
Let's go again to the word “Welcome” in our example and try to change the font attributes. Change line 6 to the following:

Welcome Welcome

Save the file and browse it. The word “Welcome” will look pinky and size of it is 4 and the type of the font is “Andalus”. Size of the font of any text in a web page can be left to be the default which is different from a browser to another. In our example we change the font size to 4. The font size should be selected carefully to make the web look readable and organized at the same time the face of the font is about the type of the font you want to format the text. There are many types of fonts. The most common ones are TIMES NEW ROMAN, ARIAL and others. Selecting the type of the font depends on the designer's taste or viewpoint. Color of the font is the most exciting part of the font attributes. For the text we are changing I selected the color “FF99FF”. What kind of color is this? And can't we just use the regular expressions for colors like “Red” or “Blue”? Well, the pattern value used for the color is actually made of three parts. These format is what we call hexadecimal numbers type where FF=255. The three parts in this number are representing the percentages of RED, GREEN, and BLUE in this color. These types of colors are what so called RGB colors. We can write the same number in decimal format so the new value will be 255.99.255. The red color in hexadecimal format will be FF.00.00. The green will be 00FF00 and the blue will be 0000FF. The white color will be FFFFFF and the black will be 000000. In between the white and black values you can get millions of colors. Notice you have to add the “#” sign before the color code. If you don't like to use this color codes, you can just use the regular color words like “red” or blue etc.
Alignment of Web pages Objects
For controlling the place where we want the text, images or any object alignment tags can be used. These tags are “

” to place the object in the center of the horizontal, “ ” to place objects in the left side of the line and “ ” tags to place the object in the right side of the line. For example to place the word “Welcome” in our example in the center of the line, the line 6 in the code will look as follows:

Welcome Welcome

Don't worry if line 6 gets bigger even if the code moved to the next line. As you can see above, the code could split over two lines or more and no problem with that.

Headings
Headings come in six different levels as follows:

“

” tag is the biggest header, and

is the smallest header. Let's try these new tags. Again for the word “Welcome” in our example, lest make it look as a header. In line 6 I will add the header tags biggest size as follows:

Welcome

Welcome

You see programming in HTML starts small and then gets bigger when you add more tags to it. If you have any questions about the lessons please send me an e-mail to [email protected].
Next week: more and more in HTML
——
[archive-e:651-v:13-y:2003-d:2003-07-17-p:education]