HTML 2--Adding and Formatting Text

Objectives

1. Add text to an HTML document.

2. Format text using the following tags:

<H1> ... </H1>

<H2> ... </H2>

<P> ... </P>

<B> ... </B>

<CENTER> ... </CENTER>

<BR>

<HR>

3. Preview homepage using a browser.

 

Instructions

  1. Open your browser and your text program.
  2. Find the HTML document you created in assignment one and open it.
  3. First you are going to add some text without formatting it, that will come later. Type in the following text, adding your own information where you see ... You do not need tags or containers for this, those will be added later.

    4. Hi! My name is ... (in place of the ... insert your name, first and last initial.)

    I am ... (add some text about yourself)

    I like ... (add some text about some things you enjoy)

    I don’t like ... (add some text about some of the things you don’t like)

    My hobbies and interests are ... (add text about your hobbies or interests)

    Page Master ... (add your name)

    MJHS Web Master Tory Klementsen

  4. Now save your work...
  5. Go into your browser and load your page (File...Open) and see your handiwork. If you don’t see anything, go back to the text program and save.

Adding Formatting
  1. Now you’re going to add some formatting tags to make your page look good. For now just follow these directions. If you want to change anything later go ahead. Remember, this is YOUR page.
  2. Go to your text program and your HTML document. First you are going to center the Hi! My Name is line and make it large and bold. To do this you will use the following containers:

    3. <CENTER> ... </CENTER> To center the text

    <H1> ... </H1> Headline tag which makes the text large and bold

  3. Click in front of Hi, My Name Is ... and type the center tag.
  4. After the center tag, type the headline 1 tag.
  5. At the end of that line, type the center slash-tag and the headline 1 slash-tag.

On my homepage it would look like this:

<CENTER><H1>Hi! My Name is Tory K.</CENTER></H1>

You did remember to nest the containers correctly, didn’t you?

6. For the rest of it you will use the following containers:

<B> ... </B> To make your text bold.

<BR> To insert a break...i.e. go down to the next line.

Use two to leave a blank line. Note: <BR> is one of

the few tags that do NOT need a slash tag.

<HR> Horizontal rule tag adds a horizontal line.

<P> ... </P> Paragraph container...sets text to the default size and makes it plain. It will usually be a Times font, but may be another font depending on what the user has his/her browser default font set to.
  1. We’ll do the "I am section together. First of all, let’s set it to be plain text using the paragraph container. To do this, put the paragraph tag at the beginning of "I am..." and the slash tag at the end of the section.
  2. Next, make the "I am..." line bold using the bold container with the I am... text inside. The bold tag will go right after the paragraph tag. Don’t make the entire section bold, just the first line. Don’t forget the slash tag.
  3. At the end of that line, add a <BR> tag so it stands off from the rest of the text.
  4. Separate the "I am... section from the next section by adding a <BR> tag at the end of the paragraph and a horizontal line tag after that.

An example of what my page would look like at this point is on the next page.

 

My page would look like this:

<CENTER><H1>Hi! My Name is Tory K.</CENTER></H1>

<P><B>I am a business education teacher at Marysville Junior High School.</B><BR> Note...the <P> tag is still in effect.

I am married to a wonderful man, who is also a teacher. I have three cats: Mickey, Baby, and Einstein, and an Iguana named Hal. I live in a little yellow house with lots of flowers.<BR><HR></P>

11. Now format the rest of your sections (I like... I don’t like... Hobbies...) the same way.

12. At the end you will format the Page Master (and add your name to it) with another headline container, only use <H3> ... </H3> instead of <H1>. You can leave the Web Master section plain...since it’s just little old me. (The district requires this on all pages.

BEFORE YOU GO ON, PLEASE MAKE SURE YOU HAVE ONLY FOR FIRST NAME AND LAST INITIAL ON YOUR PAGES. THE DISTRICT DOES NOT ALLOW US TO PUT FULL NAMES OF STUDENTS ON OUR WEBPAGES FOR YOUR SAFETY.

QUESTIONS...answer on the bottom of your webpage after </HTML> using comments. To do this use the comment tag which goes like this <!...text here>. This tag does not need a slash tag.

 

Click here for more information on the comment tag.

1. What container do you use to make text large and bold?

2. What container do you use to center text?

3. What two tags have you learned that do not need slash-tags?

4. What does the <P> ... </P> do?

5. How do you insert a horizontal line on your page?

Okay to answer type the following on the bottom of your page:

<!... 1. You use a ....>

<!... 2. You use...>

<!... 3. this one, this one, and this one...>

<!... 4. It...>

<!... 5. Use the...>

Don’t forget the closing

OH, and of course you did replace the elipses (except the first one after the exclamation point) with the correct answers, right?

Check it off!!
Back Home!