This is Lesson 2 to review Lesson 1 go to http://activerain.com/blogsview/1298501/introduction-to-html-and-task-1-create-a-simple-web-page-in-5-minutes
Paragraphs and Line Breaks
Ordinary text in HTML documents is contained with the <P> and </P> container tags. One major difference between HTML and word processor documents is how HTML treats white space.
HTML does not recognize spaces created by the Tab key. It also does not recognize space created by multiple presses of the spacebar. It treats these as one space. If you do require large amounts of white space then you need other HTML tags such as <PRE>.
Lets create some examples to show this.
5. Open your file named WebpageTemplate in Notepad, save as a new file named tags4text and add the text that is italicized:
<html>
<head>
<title>More about tags
</title>
</head>
<body><p> Mary Lockman World Class Realtor
910 HWY 20
Winthrop, WA 98862 </p>
</body>
</html>
6. Repeating # 3 and 4, Lesson 1, save this file as tags4text.htm and double click to open.
This obviously is not the required layout. This is because HTML does not recognize any Hard Returns that you may have pressed. Hard Returns are considered by HTML as white space.
To achieve the desired effect we must use the <BR> tag. This introduces a line break. *Notice that <BR> does not have a corresponding end tag, </BR>.
7. Open the file tags4text.txt and place the <BR> tags in the text as shown:
<P>
Mary Lockman World Class Realtor<BR>
910 HWY 20<BR>
Winthrop, WA. 98862<BR>
</P>
8. Repeat # 6 to see how the <BR> tag acts like a hard return.
Other Text Enhancements
Text effects such as bold and italic can be used to highlight certain text within paragraphs.
Bold and Italic Text
To make text bold, simply surround the required text with the <B> and </B> physical character tags. The italic effect on text can be achieved by using the <I> and </I> tags.
These two effects can be combined as in bold and italic but you must nest one container completely inside another. <I> <B> This text has the bold tags nested in the italics tags. </B> </I> will result in the document content appearing: This text has the bold tags nested in the italics tags.
This Internet site has more information on physical character tabs:
http://www.scriptingmaster.com/html/character-tags.asp
Preformatted text
As has been shown in the above section on paragraphs you need to consider the effects of white space. Ordinary body text does not take into account white space and so you need to use an HTML tag such as <PRE>.
As an example we may require to present some information in a tabular form such as:
Name Email Address
---- -------------
Howard Surridge howard@methow.com
Nyall McCavitt nyall@northwestern.gov
Carolyn Thomas carolyn@televar.com
The following HTML will achieve the desired effect.
<html>
<head>
<title>the pre attribute </title>
</head>
<body><pre>
Howard Ridge howard@methow.com
Nyall McCave nyall@northwestern.gov
Carolyn Thomson carolyn@televar.com </pre>
</body>
</html>
9. Key the html above into a new Notepad document. Save as a text document in Notepad and then Save As an html document and view in your computers Web Browser.
Headings
HTML provides for six levels of headings. The heading text is contained within tags of the form <Hn>, </Hn> where n is in the finite set of numbers (1, 2, 3,4,5,6). Heading level 1 will result in the largest font size with each n+1 heading level decreasing in font size.
10. Open the existing file WebpageTemplate and save as a new text file called "Examples of Heading Levels".
11. Insert the following section of html inside the tags indicated:
"<title>This is an Example of Heading Levels
</title>
<body>
<H1>Heading Level 1</H1> <BR>
<H2>Heading level 2 <H2> <BR>...
...<BR>
<H6>Heading level 6 <H6>
</Body>"
12. To view this page in your Web browser, save this file again as Examples of Heading Levels.htm. Save all files and close.
Mary Lockman is a world class Realtor at John L. Scott Methow Valley. Visit the best Methow Valley real estate website at www.methowrealestateservices.com (created in notepad)