Simple Layout

Use different techniques such as returns and lists for formating your pages for display.

There are many ways to change the way things look and where they are located on a page. One important distinction to remember is the difference between techniques for creating returns in your HTML code for you to see as you make your page, and the special tags that you will need to add to your code to make the returns appear on your page when it is displayed. Browser programs ignore all spaces and line breaks in your text file, so to force the browser to add line breaks, you must use HTML Tags. The main reason for putting line breaks in your code is to make it easy for YOU to understand.

When you typed information into a basic text editor and saved it as a text file (.txt), the returns that you typed appeared on the screen when you viewed the file with a browser. But when you added the HTML tags to make the file a web page, then the returns you typed in were no longer visible on the page when it was displayed in your browser. This is because your browser knows how to read text files where returns are legal characters. However, HTML standard does not treat them as legal characters and ignores them. The only way to get returns to appear in a browser is to add HTML tags to your code. These HTML codes actually make up a large percentage of most pages!

While this is a hassle in some ways, it is also a good feature for writing your own code! While you are editing your page, you can use as many returns as it takes to make it easier to see what you are doing, and they will never appear if you don't add special tags and codes.

Let's begin by using this information for fixing your first HTML page
(which can look great as text when you type it, but breaks down when
viewed as a Web page with a browser).

The tag <BR> stands for "line break" and is a basic return.

The tag <P> stands for "paragraph" and is a special return that adds more space.

<HR> stands for "horizontal rule" and creates lines that separate the page.
The length, height and shading can also be controlled with attributes.
<HR WIDTH=50% > or <HR WIDTH=100> or <HR SIZE=5> or <HR NOSHADE>

See Fancy <HR> Castro p. 90 (alt. p. 95)

<CENTER>These tags turn centering on and off.</CENTER>

<BLOCKQUOTE>These tags turn indented paragraphing on and off.</BLOCKQUOTE>

One of the most useful tools is also very easy to use. Lists are simple and effective!

Bulleted List

<UL> (This is how you begin an "unordered" or bulleted list.)
<LI> (Use as many of these as you want.)
<LI>
</UL> (This is how you end an "unordered" or bulleted list.)

Numbered or "Ordered" List

<OL> (This is how you begin an "ordered" or numbered list.)
<LI> (Use as many of these as you want, and they will each appear as a number.)
<LI>
</OL> (This is how you end an "ordered" or numbered list.)

See Lists Castro Ch. 8 pp. 125-131 (alt. pp. 135-141)

Memorize the above simple layout tags! You will use them often!

Experiment with adding these codes into your existing text a number of places.

See More Advanced Page Layout Castro Ch. 6

NOTICE

Every page you create for this class should have a standard footer:
Add a Horizontal Rule to the bottom of your page.
Add your name as author, and email address, copyright notice and last date updated.
Use the below footer for the class web site as a model.
For right now, don't worry about the copyright symbol and email address link--
we will learn how to make those later on in this class.)