Lesson 3: Common Tags


Now that the foundation is layed for the portfolio home page, we can begin to add the content. In this lesson you will learn to use some of the more commonly used tags.

Learner Outcomes

At the completion of this exercise:


  1. Return to index.htm in the text editor.
  2. Now you will give the portfolio a heading. Place the cursor on a blank line directly below the body tag, <body>. Type the tags that will contain the document's heading: <h1></h1>. The <h1> tag marks the main heading within an HTML document. Browsers typically display this heading in a larger font than all other headings and text. Between these heading tags, type the text that will serve as the main heading for your home page. For example:

    <h1>Don Helling's Web Portfolio</h1>.

    Save. Refresh your browser and check.

  3. Beneath the heading make a subheading using <h2></h2>. Between those tags type information that identifies this course (course title, instructors name, period). It should look something like this:

    <h2>Web Development and Design with Mr. Rusch, Period 4</h2>

    Save. Refresh your browser and check.

  4. Below the subheading make another subheading containing your school name in <h3> tags. It should look something like this (but with a different school name):

    <h3>Thomas Jefferson High School </h3>.

    Save. Refresh your browser and check.

  5. Below the school name, create a paragraph that contains two or more lines with the school's address. A paragraph opens with <p> and closes with </p> tags. Force a line break between each line using <br />. The address should looks something like this:

    <p>3773 East Benson Avenue<br />
    Bremerton, WA 98220 </p>

    Save. Refresh your browser and check.

  6. Below the school's physical address, add another paragraph that contains your email address. Save. Refresh your browser and check.
  7. Below the paragraph containing your email address, enter your goal statement as one or more paragraphs. For example:

    <p>By the end of this course I will have the skills and confidence to develop a web page.</p>

    Save. Refresh your browser and check.

  8. Place a horizontal rule (a dividing line) using an <hr /> tag before and after the goal statement. It should look like this:

    <hr />

    Save. Refresh your browser and check.

  9. Choose a key word or phrase in the goal statement and make both bold and italic using the <strong> and <em> tags. Make sure to nest the tags properly. Save. Refresh your browser and check.

Resources/Online documents

All done?

After you have saved the changes to index.htm, return to your browser and refresh to see the changes to index.htm. Are your heading and subheadings displayed? Is the goal statement set apart with horizontal rules that span about 75% of the browser window? Did you properly nest the word or phrase in the mission statement with bold and italic tags? Show your instructor your results before starting the next module.