Working with Text
You are now ready to start adding text to your webpage. If you do not 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. 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 "My First Web Page", and click Save. 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 browser should now open and display the page. Your Web Page will look something like the one pictured below (the precise way it will display will depend on the browser you are using).
Paragraphs
HTML language usually ignores any physical paragraphs you type into a document. For this reason, you need to manually specify new paragraphs 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 and try adding the following paragraphs to it:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Here is some text that will appear in the body of my Web page.</p>
<p>The second paragraph</p>
<p>The third paragraph</p>
<p>And so on...</p>
</body>
</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>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>This line of text has a number of formatting features including <b>bold</b>, <i>italic</i> and <u>underline</u></p>
<p>You can even <b><i>mix</i></b> many formatting features together!</p>
</body>
</html>
Now preview the page in the browser to see how it looks.
Changing the Alignment of Text
Text can be aligned left, right, centered and 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 added to an element to give a browser more information than the element by itself could provide. An attribute is simply another keyword that is added to an element in order to extend its 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">
Here 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"
"right"
"justify"
("center")
As you have probably already noticed, BestAddress 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.
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.
|
