HTML lesson 3

All of the text fields below (e.g. ) contain HTML. Use you mouse or keyboard to copy and paste the HTML into a "plain text editor" (e.g. notepad, textpad).

Save the file to your desktop as an HTML file, (e.g. file_name.html). Once they are saved, you can double click on them or use your keyboard to open them. They will automatically open in your default Web browser. When the files are open in your Web browser, you will be able to see how the HTML works in your browser.

Various Web browser types will display the HTML differently.

************************************************************************************************************

Lesson 3:

More Formatting Tags:

Formatting Text with Block Quotes:

The BLOCKQUOTE tag is another format tag like the PARAGRAPH tag. It adds a blank line before the next line of text. However, it also adds a line after the text, indents the text from both the right and left margins and may display the text in a different font. The BLOCKQUOTE tag must be opened and closed as before and is used inside of the BODY tag. The text to be used goes between the tags:

Formatting Addresses, Names, and eMail Addresses with Address tags:

The ADDRESS tag is another format tag. It is used for including either the names and email addresses or signatures at the bottom of an HTML document. It is also generally used within the BODY tags:

Lets use the BLOCKQUOTE and ADDRESS tags in our HTML document:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 FINAL//EN"> <HTML> <HEAD> <TITLE>the Web page title</TITLE> </HEAD> <BODY> <H1 ALIGN="right">My Header</H1> <P ALIGN="right">text goes here</P> <BLOCKQUOTE>text goes here</BLOCKQUOTE> <ADDRESS>names, addresses or signatures go here</ADDRESS> </BODY> </HTML>

Formatting Line Breaks:

The BR tag is used to place a line break between lines of text without leaving a plank line. Unlike other tags the BR tag does not need to be closed.

Displaying Special Characters using the PRE tag:

The PRE tag is used to display text and some ASCII characters as they appear in the source code. This tells the browser to leave the text alone and don't try to format it. The PRE tag should be closed as demonstrated with previous tags:

Using Width attributes with the PRE tag:

The WIDTH attribute is good for creating equal space between text and/or characters. Tabs are handled differently in various browsers. Therefore using the WIDTH attribute of the PRE tag allows you to space out each character or group of characters within a line of text. This could be used to create columns for spread sheet data or other data:

Horizontal tabs are not a part of HTML 4.0. However there are several ways that you can still create this effect. You can create horizon tabs by creating tables (covered in later lessons). Another option is using SPACER or LAYER tags. You can also use CSS which is also discussed in later lessons.

Formatting Text with Division tags:

Blocks of text can be centered with the DIV tag:

ALIGN is an attribute of the DIV tag and can be used to align multiple lines/blocks of text between a DIV tag set:

Controling Line Breaks:

With most blocks of HTML text, except for text defined using the PRE tag, the browser will "wrap" lines (automatically starts a new line) at a convenient space. This allows text to squeeze into the browser window without horizontal scrolling. However, you can take control of of where these line breaks occur with the "Nonbreaking Space" characters:

These characters tell the browser not to make an automatic line break when the browser window is horizontally filled by text. This should not be confused with a BR tag: Break tags are used to make line breaks within a paragraph. The "Nonbreaking Space" characters , are used to keep the browser from starting a new line when text on one line has reached the full width of the browser window.

The code below will create a Web page with a line of text that is too long for the browser window. The browser will automatically add a horizontal scroll bar so that you may scroll to continue viewing the line of text:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 FINAL//EN"> <HTML> <HEAD> <TITLE>the Web page title</TITLE> </HEAD> <BODY> here is a long line of text that does not stop before it reaches the end of the browser window, so the browser must either start a new line automatically or add a scroll bar for viewer navigation. </BODY> </HTML>

Copy the above source code to your text editor and save it as lesson3a.html

Open the file in you browser to see the results!

Controling Blocks of Text:

"Nonbreaking Blocks" can also be used. The characters only apply to a line, but the DIV NOWRAP tag can provide the same effect for a whole section of text. It requires a closing tag and can be used as follows:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 FINAL//EN"> <HTML> <HEAD> <TITLE>the Web page title</TITLE> </HEAD> <BODY> <DIV NOWRAP>here is a long line of text that does not stop before it reaches the end of the browser window, so the browser must either start a new line automatically or add a scroll bar for viewer navigation.<BR> here is a long line of text that does not stop before it reaches the end of the browser window, so the browser must either start a new line automatically or add a scroll bar for viewer navigation.<BR> here is a long line of text that does not stop before it reaches the end of the browser window, so the browser must either start a new line automatically or add a scroll bar for viewer navigation.<BR> here is a long line of text that does not stop before it reaches the end of the browser window, so the browser must either start a new line automatically or add a scroll bar for viewer navigation. </DIV> </BODY> </HTML>

Copy the above source code to your text editor and save it as lesson2b.html

Open the file in you browser to see the results!

Author	Charles E. Brown
Company	EWM / PSI
Comments to	email
Contact Page	Form
Created	Jan-01-1999
Updated
Copyright Š1999-2001. All Rights Reserved.