Chapter 3: Working with text
In Chapter 2 you learnt about how HTML is used to create webpages. You also learnt how to set up a new, blank webpage. You are now ready to start adding text to the webpage you started creating in the previous chapter. If you do not yet have a blank document open in the BestAddress HTML Editor, choose New from the File menu. In the dialog box that appears, choose Blank Document and click OK.
Enter a title for your page between the <title> and </title> elements (the BestAddress HTML Editor will already have added some temporary text for you, which you should replace). For now, write the title: "My First Web Page".
You can now type some text between the <body> and </body> elements. To begin with, type the text, "Here is some text that will appear in the body of my webpage."
You can now save your page and preview it in a Web browser. To save it, choose Save As from the File menu. In the dialog box that appears, type a name for your file in the File name box, such as "index", and click Save. For technical reasons for once your webpage is published on the Internet, it is always recommended to save webpages in lower case file names without any spaces. Now that the document has been saved, choose View Page in Browser from the File menu (alternatively, you can also click the 
button on the toolbar). Your default Web browser will now open and display the page. Your webpage will look something like the one pictured below:
Paragraphs
Physical paragraphs you type into a HTML document are usually ignored. For this reason, you need to manually specify new paragraphs which are to appear in the webpage content by either adding a <p> element to the end of a line of text where you want a paragraph to occur, or by enclosing the entire line of text between a start paragraph element (<p>) and an end paragraph element (</p>). For example, you could either write:
Here is some text that will appear in the body of my Web page.<p>
or
<p>Here is some text that will appear in the body of my Web page.</p>
Although either method can be used, it is recommended that you use the later.
Return to your document in the BestAddress HTML Editor and add the following paragraphs to it:
<html>
|
Preview the page in the browser again (you will need to save it first). Your page should look something like this:
You might also like to try using the page break element, <br>. This element is added to a point in the text in which you want to make the text display on the next line after that point. It also differs from the paragraph element in that it does not have an end element (that is an element with a slash (/)).
Simple Text Formatting
At the moment, the text on your page is quite plain. If you have ever used a word processing program, you will be aware that there are numerous text styles that can be used including bold, italic and underlined text. These text formatting features are created with the <b>, <i> and <u> elements respectively and in conjunction with their appropriate end elements </b>, </i> and </u>. All have a start and end element. Try modifying the page you are working on as follows:
<html>
|
Now preview the page in the browser to see how it looks.
Changing the alignment of text
Text can be aligned to the left, right, center or justified. You should note, however, that the justification of text is a recent addition to HTML and is therefore only supported by newer browsers.
To change the alignment of text, you will need to learn a new function in HTML - that of an attribute. An attribute is simply another keyword that is added to an element in order to extend the element's existing functionality. An attribute can also contain a value which is defined after an equals sign (=).
The following line of code centers text in your document:
<p align="center">
In the example above, p tells the browser to create a new paragraph, while the align= attribute specifies how the text should be aligned. The method of alignment is specified by the attribute's value; in this case, "center".
As mentioned earlier, you can use various other attribute values in place of "center". These include:
"left"- text aligned to the left margin"right"- text aligned to the right margin- (
"center") - text centred "justify"- text aligned evenly to both the right and left margins
As you have probably already noticed, the BestAddress HTML Editor automatically changes the colour of your code based on whether it is an element, attribute or attribute value. While you use BestAddress, you will notice various other colours are used for other types of code.
Headings
Most webpages that you will create will contain at least one size of heading. HTML contains six predefined heading sizes ranging from 1, the largest, to 6, the smallest. The following example shows the code for a large heading:
<h1> A Large Heading </h1>
Typically, you should use the various heading sizes in order. For example, you would use <h1> for the heading of your entire page, <h2> for a sub heading in your page, <h3> for a sub heading of the h2 sub heading, and so on. It does not, however matter if you do not follow this procedure.
Changing the Font Face, Colour, and Size
Using the <font> element, the font face, colour and style can also be changed. The font element requires the use of an end element (one with a slash (/)) to specify when to end the formatting).
You can easily insert font formatting by choosing Font from the Format menu.
You will need to be familiar with the following attributes:
Use the face= attribute to specify the font you want to apply to the text. The value for this attribute can be a list of various font names separated by commas (,). If the computer the webpage is being viewed on does not have the font you listed installed, the browser will then use the first available font specified in the list.
Use the color= attribute to specify the font colour. The value of this attribute is either the name of the colour expressed in words, or a hexadecimal colour code. Hexadecimal colour codes are rather complex to calculate but can easily be inserted from BestAddress by choosing Colour Code from the Insert menu.
Although the heading elements can be used to change the font sizes of headings, they can not be used for changing the font size within paragraphs since they force a new paragraph to be created. In the case where you want to change the font size within section of a paragraph, you should use the size= attribute. The value of this attribute is a number between 1 and 7.
Where to from here?
Now that you have a basic understanding of working with text, you might like to experiment with the knowledge you have gained so far to help build your confidence. Once you feel you have mastered what you have learnt so far, discover how to link between your webpages in Chapter 4: Hyperlinks.
