Richlong Educational Resources

Text Formatting

The Basics

Open Notepad and type the following:

<html>

</html>

The text between the symbols "< >" are known as HTML tags and must be in pairs. HTML tags can't be seen in an Internet Browser. To view the HTML tags, click on View Source. The tags <html> and </html> are used to tell the browser that the document is in HTML format.

In between the tags <html> and </html>, insert this:

<head>

<title>

</title>

</head>

<body>

</body>

The <head> tags are for the headers. The <title> tags are where the title will appear on the title bar of the browser. The <body> tags is where the body of your text will appear. (See Diagram 1)

Between the tags <title></title>, type this:

My Very First Website

Between the tags <body></body>, insert this:

<p>The text visible in the browser must appear betweeen this two tags</p>

The tags <p></p> are to show that the text is in a paragraph.

Click File on the menu bar and click Save.
Under the Save in drop down menu, scroll and select Desktop. In the File name space, name the file "Firstweb.htm" (without the quotation marks). Click Save. All files saved must end with ".htm" or ".html" in order to be "recognized" by the browser.
You'll notice an icon on your desktop with a picture of a globe, labeled "Firstweb". Double click it. (See Diagram 2)

dia1.gif (31366 bytes) Diagram1

Diagram2

Text

Open Notepad and click File ,then click Open. Select Desktop in the Look in drop down menu. Under Files of type, select All Files(*.*). Open Firstweb by selecting it and clicking Open.
Type the following between the <body></body> tags:

<h1>Big</h1>

<h6>Small</h6>

The text between the <h1> tags will appear big and the text between the <h6> tags will appear small. These tags are the header tags and they range from <h1> to <h6> (<h1> being the biggest and <h6> being the smallest). You can try to experiment with other headers like <h3>, <h5> etc. Remember to save it. To view the changes, just click the Refresh or the Reload button.

In the line, <p>The text visible in the browser must appear betweeen this two tags</p> insert the these tags between the words "text", "in", "browser" and "tags":

<i>text</i>

<u>in</u>

<b>browser</b>

<i><b>tags</b></i>

The tags <i>, <u> and <b> are for italic text, underlined text, and bold text respectively. You can use a combination of tags like in the example above. Even if you typed <b><i>tags</i></b>, it will bring the same effect as the above. Remember to save before viewing in the browser and don't forget to click Refresh or Reload. (See Diagram 3 and Diagram 4)

A variety of tags to try are:

<tt></tt> For typewriter like text
<big></big> For big text (Can be repeated for bigger effect, eg. <big><big><big>Test</big></big></big>
<strong></strong> For bold text, to show strong impact (Can also be repeated for bolder effect like the tags <big>)
<dfn></dfn> For italic text, to show definition
<em></em> For italic text
<cite></cite> For italic text, to show the title of a book etc.
<code></code> Used for computer codes, presented in a certain size
<kbd></kbd> Used to key in alphabates with the keyboard
<var></var> For italic text
<dl></dl> Definition Lists that contains Definition Term and Definition Definition
<dt></dt> Definition Term
<dd></dd> Definition Definition
<dl compact></dl compact> Use only if the Definition Term are too short

Diagram3

Diagram4

Fonts

Open Firstweb.htm and add this line after the tag <body>:

<font face="Algerian" size="14">

Save it, then view it in your browser. You'll notice that the font has changed to Algerian and the font size is 14. To change to another font style or font size, just replace the word Algerian or 14 in the example above to your desired font. Don't forget the quotation marks. This font style and size will apply to the whole webpage. You don't need to add the </font> tag unless you wish to apply the desired font style and size to a particular part of the webpage, eg. <font face="Algerian" size="14">Hello</font>to all.The word "Hello" will appear in Algerian, size 14, while "to all" will appear in the default font and size. How to change the font colour will be discussed in Colours & Images.(See Diagram 5 and Diagram6)

Diagram5

Diagram6

Lists

Make sure Firstweb.htm is open. Remove this line:<font face="Algerian" size="14"> (This line will make the font very big and we don't need big fonts in this exercise).
To make an unordered list, insert this line between the <body></body> tags:

<ul><li>Water</li>

<li>Air</li>

<li>Earth</li></ul>

The tags <ul> are to inform the browser that it is an unordered list and the <li> tags are the list.

To make an ordered list, type the following between the <body></body> tags:

<ol><li>London</li>

<li>Moscow</li>

<li>Paris</li></ol>

The tags <ol> are to inform the browser that it is an ordered list. This concludes Text Formatting.(See Diagram 7 and Diagram8).

Diagram7

Diagram8

Refcities.com FREE Web-hosting - WE offer 20megs FREE space + Guestbook, WWWboard,formailer.. ALL FREE..........