Building Web Pages From Ground Zero

By Professor Nibble ã Nibble University 2000-2007

Hyperjump to Breaks, Headings, Paragraphs, Assignments

BREAK, HEADING & PARAGRAPH TAGS - Lesson 2

 

In lesson 1 you learned the BASIC STRUCTURAL TAGS that make up the skeleton of every HTML page. By doing the two assignments you can see that you need to learn more tags if you are going to manipulate your text and graphics to come out the way you want. You also learned that browsers ignore spaces in your document (other than one space between words). As long as your tags follow the proper order, it doesn't matter how you write them. However, to make it easier for yourself or someone else to read your code, it makes sense to organize your tags. Take a look at these examples to see what I mean.

 

Example 1:

<HTML> <HEAD>
<TITLE> Put Your
Title Here
</TITLE></HEAD><BODY>This is what the browser
shows.</BODY></HTML>

 

Example 2:

<HTML>
<HEAD>
<TITLE>Put Your Title Here</TITLE>
</HEAD>
<BODY>
This is what the browser shows.
</BODY>
</HTML>

 

Example two is much easier to read, even though the result to the browser would be the same for both examples. Many good web page builders use indents to make code even easier to read as shown in example three below:

 

<HTML>

      <HEAD>

           <TITLE>

          Type a title for your page here

           </TITLE>

      </HEAD>

           <BODY>

          This is what the browser shows.

           </BODY>

</HTML>

top

The most important issue here is to show a degree of organization and stay consistent from page to page. OK. Let's learn some more tags that will help us take control of this beast.

 

LINE BREAK TAG

 

<BR>

 

This tag starts a new line. It is just like pressing the enter/return key while using a word processor. It does not have a closing tag. Look at this example:

 

<HTML>
<HEAD>
<TITLE>Line Break Practice</TITLE>
</HEAD>
<BODY>
This is line one. <BR>
This is line two. <BR>
This is line three. <BR>
</BODY>
</HTML>

 

The result of the above code is:

top

This is line one.
This is line two.
This is line three.

 

HEADINGS (ALIAS HEADER) TAGS

 

There are six sizes of headers or headings. Headings are placed on their own line, boldfaced and space is created before and after the heading so it isn't jammed up against the text that precedes or follows it. To create a heading, put the following tags around your text:

 

<H1>Words in your heading</H1>

 

Other sizes include:

<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6>

top

Get this - the larger the number the smaller the heading. If you need a heading larger than <H1>, you can create it in a graphics program and save it as a graphic instead of text. More about that when we play around with graphics. You will experiment with the different sizes of heading in the assignments at the end of this lesson.

 

PARAGRAPH TAGS

 

To put some space between lines of text, or in other words, to create a new block paragraph, use the paragraph tag.

<P> </P>

I think you're entitled to know a little secret - if you forget to put the closing tag it doesn't matter at all. Also, you don't need to use the header tags and paragraph tags together since header tags include extra space above and below them. I usually use a closing paragraph tag because it feels like the right thing to do. Here is a simple example using headers and paragraphs:

 

<HTML>
<HEAD>
<TITLE>Put Your Title Here</TITLE>
</HEAD>
<BODY>
<H1> This Is A Heading </H1>
Mary had a little lamb but wished she had a goat. Jack and Jill went up the hill but Jack forgot his coat. Little Miss Muffit sat on a tuffit eating her chip and dip. Little Bo Peep has lost her sheep and is having an anxiety fit.
<P>Notice how the paragraph tag puts a little space above this text and how the heading tag added space before and after the text. Pretty cool, eh? </P>
</BODY>
</HTML>

top

This Is A Heading

Mary had a little lamb but wished she had a goat. Jack and Jill went up the hill but Jack forgot his coat. Little Miss Muffit sat on a tuffit eating her chip and dip. Little Bo Peep has lost her sheep and is having an anxiety fit.

Notice how the paragraph tag puts a little space above this text and how the heading tag added space before and after the text. Pretty cool, eh?

 

Assignment 1 - Lesson 2

  1. Type in or use a template to prepare an HTML skeleton - BASIC STRUCTURE TAGS (use NotePad or some other simple editor)
  2. Between the body tags, type in the following exactly as shown:
    This is Heading Size One
    This is Heading Size Two
    This is Heading Size Three
    This is Heading Size Four
    This is Heading Size Five
    This is Heading Size Six
  3. Put the appropriate Header codes in front of and at the end of each line so you have used each of the six sizes of headers.
  4. View your web page in a browser. For your info, I don't think I have ever used the smaller sized headings.

 

Assignment 2 - Lesson 2

  1. Type in or use a template to prepare an HTML skeleton - BASIC STRUCTURE TAGS - Put Hawaii by first and last name in the title tags (use NotePad or some other simple editor)
  2. Between the body tags, type in the following (or better yet, copy and paste from here) yellow text and place the requested tags. Do not type in the RED instructions.

    Heading Size 1 HAWAII
    Heading Size 2     Introducing The Aloha State
    Regular Text Hawaii is the only state made entirely of islands. It is also the only state that is not in North America. Hawaii lies in the Pacific Ocean.
    New Paragraph Hawaii is called the Aloha State. Aloha is a Hawaiian word meaning love. Hawaiians say aloha instead of hello and good-bye.
    New Paragraph Hawaii is a colorful state. Fiery volcanoes tower over white and black sand beaches. Deep-green plants and trees shade blue streams and waterfalls.
    New Paragraph Millions of visitors enjoy the state's warmth and beauty each year. They are greeted by having leis placed over their heads. Tourism has become a major business.
    New Paragraph Sugarcane and pineapple grow well in Hawaii. Hawaiian factories make sugar, canned pineapple, and pineapple juice.
    Heading Size 2 Hawaii Facts
    Regular Text The fiftieth state, on August 21, 1959     Break
    Capital is Honolulu     Break
    State flower is the yellow hibiscus     Break
    State bird is the Nene (Hawaiian goose)     Break
    Has two active volcanoes - Manuna Loa and Kilauea     Break
    Break
    Information taken from - FROM SEA TO SHINING SEA - HAWAII by Dennis Brindell Fradin
  3. Save your file as hawaii1.htm. View your web page in a browser.
  4. Make any necessary corrections and print out a copy of the source code (the HTML tags you used) from your editor and a copy of the result from your browser. Hand it in.

top

Table of Contents

Lesson 3