Create and format text

Exercise - Create a document and format text

Step 1. Start Simpletext and type this new document, using your own name on the second line. Be sure to bold-face World Wide Web and make two paragraphs in addition to the title lines.

My Home Page
Jane Doe
University of Illinois

This is a practice document for the purpose of learning how to use HTML markup tags to format a page for the World Wide Web.

This is the second paragraph.

Step 2. Save the file into the HTML class folder, naming it with your last name and the .html extension. Do not close the Simpletext document window, though you may need to reduce the size in order to see the desktop.

SimpleText (and Notepad on the PC) will save documents as "text-only", meaning without special formatting. If you're using a more advanced word processor, you must SAVE AS>TEXT ONLY, which eliminates any propriatory formatting. Otherwise the web browser will not be able to read it.

Step 3. Open it with Internet Explorer Go to the menu bar to FILE>OPEN FILE.... and navigate to the HTML CLASS folder and open the document you just saved. You'll see something that looks like this:

My Home Page Jane Doe University of Illinois This is a practice document for the purpose of learning how to use HTML markup tags to format a page for the World Wide Web. This is the second paragraph.

What happened? The carriage returns, the word wrap and the boldfacing are not HTML tags, so the browser doesn't recognize them. It displays the text, but not the formatting applied by the word processor. Next, we'll structure the document and apply some formatting tags.

Step 4. Do not close the Internet Explorer window, though you may need to resize it. Click on the SimpleText document to make it the active window and thus bring it to the front , and enter the tags that are in boldface below. You'll need to make some space in your document by adding blank lines.

<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>

<BODY>

<H1>My Home Page</H1>
<H2>Jane Doe</H2>
<H3>University of Illinois</H3>

<HR>

<P>This is a practice document for the purpose of learning how to use HTML markup tags to format a page for the <B>World Wide Web</B>.

</P>

This is the second paragraph.

</BODY>

</HTML>

Step 5. Save the file again and click the refresh button in IE. This is what you should get:

My Home Page

Jane Doe

University of Illinois

This is a practice document for the purpose of learning how to use HTML markup tags to format a page for the World Wide Web.

This is the second paragraph.

What'd we just do?

We created a document structure....

<HTML> ... </HTML> - Encloses an entire HTML document
<HEAD> ... </HEAD> - Blocks out the document head area
<TITLE> ... </TITLE> - Encloses the document title
<BODY> ... </BODY> - Encloses the documents body text

We applied some formatting...

<H1> ... </H1> - Level 1 head
<H2> ... </H2> - Level 2 head....and so on to Level 6 tags
<B> ... </B> - Boldface

We created some line breaks...

<P>... </P> Paragraph break encloses a paragraph and inserts and extra line between them.
<HR> Breaks the line and draws an embossed horizontal line

Notes:

The tags can be entered in upper or lower case, and line spacing within the HTML coded document is optional and for your own benefit in reading it.
Most tags are "containers" in that you have to close them with a backslash and right angle bracket (/>). The <HR> or horizontal rule is one of the few that don't require a closing tag.
Carriage returns in the document are ignored by the browser. You have to add a paragraph tag (<P>...</P>) or a line break tag <BR> to make the browser drop a second line.