<!--3 Formatting text-->

If you have ever used a word processor on your computer you will know the changes you can make to text at the click of a button. Many of these changes can also be made to text in a HTML document except that they are slightly more complicated to enforce.

This chapter will teach you how to enforce these changes to text in a HTML document.

the break tag <br>

Explorer View 3.1a - click on the image for a igger and clearer version

The text does not skip to the next line.The way to do it properly is to use the <br> tag. This is a standalone tag in that it has no end tag. Simply entering this in the middle of text skips the proceeding text to the start of the next line. So this is what you would type instead of what is listed in "notepad view 3.1a"(bear in mind that the text now makes no sense as the text does skip to the next line now).

Now look below and you will see that using the <br> tag does work.

Explorer Viewer 3.1b - click on the image for a igger and clearer version

the paragraph tag <p> </p>

As is obvious from the heading I have given this section, the <p> tag is used for inserting paragraphs into your documents. If you like you can put a <p> tag at the start of each paragraph and </p> at the end of each but I find that it is much easier to just type <p> in between paragraphs. By this I mean to start off by typing your text, then when you want a new paragraph enter the tag and continue. When you are finished adding text you can just stop straight away instead of adding the </p> tag.

Explorer View 3.2 - click on the image for a igger and clearer version

As you can see using the <p> tag in between paragraphs works fine.

adding preformatted text <pre> </pre>

CAUTION: MAKE CERTAIN TO USE THE </PRE> TAG ONCE YOU ARE FINISHED

Using the <pre> tag is another way of positioning your text the way you want it. It is probably the easiest to use but its drawback is that when preformatted text is used it appears as if written by a mono-spaced typewriter.

Notepad Viewer 3.2 - click on the image for a igger and clearer version

Explorer view 3.3 - click on the image for a igger and clearer version

headings <h1>/<h2> etc.

HTML provides the user with six different sized headings. These headings are labeled h1 to h6 with h1 being the largest. To enter a heading first type the start tag e.g.<h2> then type your heading and then your closing tag, which in this case would be </h2>. Why don't you experiment with the different sizes now using "notepad" and your browser.

Headings can be aligned left, center or right by using the "align=" attribute in the starter tag. Heading sizes should be used in descending order so as future browsers can index your site.

the blockquote tag <blockquote> </blockquote>

This tag indents the text that is contained within the start and end tags. It is very effective for making paragraphs stand out.

Explorer view 3.4 - click on the image for a igger and clearer version

I want the text to look different

So far I've told you how to present the text differently on the page but what about making physical changes to the text. Well here we go!

REMEMBER : WITH ALL OF THESE TAGS IT IS EXTREMELY IMPORTANT THAT YOU INCLUDE THE END TAG

bold

To enforce bold type <b>

To disable bold type </b>

italics

To enforce Italics type <I>

To disable italics type </I>

underline

To enforce underline type <u>

To disable underline type </u>

teletype

Text appears as if typed by a mono-spaced typewriter

To enforce teletype type <tt>

To disable teletype type </tt>

strike-through

Text has a line through it like this

To enforce strike-through type <strike>

To disable strike-through type </strike>

superscript

Text is above the level of other text

To enforce superscript type <sup>

To disable superscript type </sup>

subscript

Text is below the level of other text

To enforce subscript type <sub>

To disable subscript type </sub>

small font

Text is presented in a small font

To enforce small font type <small>

To disable small font type </small>

large font

Text is presented in a large font

To enforce large font type <big>

To disable large font type </big>

By using logical thinking it is possible to combine the different tags and end up with different displays.

I have highlighted above the trickiest part of the listing. Although this may seem quite complicated at first it is quite simple once you think about it and practice a little.

Explorer view 3.5 - click on the image to open a bigger and clearer version

logical formatting

There are other things you can type to get the same results as above. The difference with these other tags is that in a few years when computers will read text with emotion these tags will distinguish different emphasis points. I have decided however not to include them because it is easier for you to just learn the physical format commands when starting or else you will end up getting confused. I do.

the basefont tag

You can set the font of your page to any font you have on your hard disk. You must however bear in mind that if you put your page on the WWW then it is possible that not all those viewing your page will have that font on their hard disk. If this happens then your page will not be presented in the way that you wanted.

The most common fonts you will find on a computer are Times New Roman and Arial. Therefore if it is important to you that everyone view your site the same way that you do then these are the two you should probably go for.

Another option you could go for is selecting two or more different fonts that your text could be presented in. For example you could set your first choice font as say "verdana", your second choice as "lucida casual" and your third choice as "times new roman". I recommend however that your last choice be either "times new roman" or "arial" therefore if the person viewing your site has none of the other fonts the page will still present properly.

The following are the attributes of the basefont tag:

• Face
• Color
• Size

Face means font

to set the font type : <basefont face="font">

to select more than one font type : <basefont face="font1","font2","font3">

Color (it's the American spelling that is used) will be discussed in detail in chapter 4.

Size sets the size of the font and is measured on a scale of 1 to 7 with 3 being a normal size font.

To set the size type : <basefont size=3>

You can include as many of the above attributes as you like.

e.g. <basefont face="lucida casual" size=5>

Netscape does not support the basefont tag. It does however support the font tag, as do all browsers.

the font tag

The font tag uses the same attributes of the <basefont> tag. It also has a major difference in that it requires an end tag.

The purpose of the <font> tag is to change the font in the middle of the document but only for a certain period.

The font tag makes no difference at all unless attributes are set in the start tag.

e.g. <font face="verdana" size=3 color=#ff0000> this text is in verdana </font>

If you have set the basefont size to 2 and you want to change it to 4 using the font tag then you can use this attribute:

<font size=+2>this text is 2 sizes bigger than the rest</font>

<!--4 Colouring text and background-->

You saw at the end of the last chapter that I set the colour of the font to "#ff0000" which is the rgb value for red. What is rgb value? The rgb value of a colour is the amount of red, green and blue that are combined to display that colour on your monitor. To list a colour in a HTML document you must display it with a # sign in front of it and then 6 characters, 2 for each amount, defining the rgb value. You can use any ammount from 0 to 255 of each colour. You do not use decimal numbers however, you must use hexadecimal notation, to convert a decimal number to hexadecimal notation I have made a program for you to download.

However the designers of HTML have copped on to the fact that very few people do actually understand how to picture a color based solely on its rgb value so now there are 16 colours which you can add to your document simply by defining the color as that colour, i.e. color=red. Here now is a complete listing of the colours you can use without knowing their rgb value.

Black #000000

Silver #C0C0C0

Gray #808080

White #FFFFFF

Maroon #800000

Red #FF0000

Fuchsia #FF00FF

Green #008000

Lime #00FF00

Olive #808000

Yellow #FFFF00

Navy #000080

Blue #0000FF

Teal #008080

Aqua #00FFFFF

You can use these colours for either text or background. You will learn how to colour text and backgrounds in a short while.

colouring text

By using information gathered in the last chapter and at the start of this chapter you probably have already figured out how to colour your text if not then read on.

Text colour can be set in three places. In two of those places it is set using the "color=?" attribute and in the other it is set using the "text=?" attribute.

colouring text by using the <body> tag

The <body> tag has several attributes relating to text colour in a document. The first which is used for setting the colour of regular text looks like this: <body text=aqua>

You will learn more about links in chapter 8 but for now you will just learn how to change the colour of links in text. To specify the colour of a link in text simply use the attribute "link=?" for example <body link=blue>

There are two other colours that can be set concerning links, these are the colours for a visited link and an active link. A visited link is a link that you have already visited (to state the obvious). An active link is a link that is open, this is only ever viewed when a page has multiple frames (you will learn more about frames in chapters 10, 11 and 12). To set the colour of a visited link use the attribute "vlink=?" and to set the colour of an active link use the attribute "alink=?". For example: <body vlink=green alink=aqua>

colouring text by using the <basefont> or <font> tags

Both of these tags use the same attribute to set or change the colour of font. When you learned about these tags in the last chapter you learned about attributes such as "face" and "size". Well to set the colour you simply use the attribute "color" e.g. <basefont color=red>

or

<font color=red>red</font>

colouring the background

There are two ways to enhance your background with colour, you can:

A add a colour to it

B add a tiled image to it

A add a colour to it

To add a colour to your background you simply use this attribute in the <body> tag: "bgcolor=?". If you are overwhelmed by the amount of attributes of the <body> tag do not worry because I will provide a complete listing of these attributes at the end of the chapter.

B add a tiled image to it

This is the first example you have come across so far of adding an external file to your HTML document. Before you do anything with your HTML code I recommend that you move the image you want to use into the same directory as the HTML document. Therefore you will not need to specify a full path to the image.

Assuming that your image is now in the same directory as your HTML document this is the attribute of the <body> tag that you would use:

<body background="image.gif">

but be careful some images are just not meant to be tiled

This is a bad image to use for tiling because it does not repeat very well. By this I mean that the edges do not correspond. It will also be difficult to add text on top of this background because it will not be easily visible. These are the two factors you must take into account when choosing a background.

Explorer View 4.1 - click on the image for a igger and clearer version

The best idea is to tile a very small image that ends up looking just like one image. Take for example Explorer view 4.2 this is a perfect example because the tiled image looks like one image and the text is easily visible.

Explorer View 4.2 - click on the image for a igger and clearer version

Explorer View 4.3 - click on the image for a igger and clearer version

If you set a tiled image for your background you should also include a bgcolor attribute similar to the colour of your image so as those people viewing with pictures turned off, or with text only browsers, will still be able to read your text easily. Take for example Explorer View 4.3. This is the same page but the person viewing has pictures turned off. If there was no bgcolor set then the background would be either grey or the colour set by the viewer.

The only property that can be set for this attribute is "fixed". It is also only compatible with Microsoft Internet Explorer. There is no point in including this attribute if you do not plan on setting it to fixed or if you do not have a tiled image set as your background.

If you include this attribute (set to fixed) then your background image will not scroll when the page is scrolled. Instead the text and other components of the page will scroll over it.

separating text by using horizontal lines <hr>

If you have ever surfed the net you may have noticed that a lot of websites separate their text using horizontal lines.

To insert a horizontal line simply use the tag <hr> anywhere in your document. A new paragraph is automatically started after the line.

The <hr> tag also has attributes. These are: size, width, color, and align.

Size sets the thickness of the line in pixels

Width sets the width of the line as a percentage of the viewing screen

Color sets the colour of the line using either rgb value or one of the presets

Align sets the alignment to left, right or center.

Explorer View 4.4 - click on the image for a igger and clearer version

You can see above different ways in which you can present horizontal lines.

I promised you a table with all the attributes of the <body> tag, so here it is:

I have not included the results of each attribute because they have already been discussed in detail earlier in the book. The only reason for this table is reference.

If you set one colour in a HTML document you should set them all otherwise the colours set by the viewers browser might clash with the one you have selected. For example if you only set your text to aqua and the viewer has his browser set to display a background as aqua then that person will not see any text on your page.

next lesson    home    comment    more downloads    download this

HTML Builder- End of Lesson 2

Notepad Viewer- HTML Builder 2

Congratulations! You've made it this far. Isn't it weird to scroll through your code in Notepad and see all the script that goes into making a web page. I'm sorry to inform you however that you have only just begun. In the next few chapters you will learn how to spice up your pages using images, tables and lists.

I'm sorry that I could not provide a picture of the page as it now looks but as you know yourself, if you've already updated your HTML practice document, it is too long to fit on the screen.

next lesson    home    comment    more downloads    download this