Common Tags

Lesson 3: Common Tags

Overview

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:

you will be able to use some common tags for adding content to a web page
You will be able to apply the concepts of nesting and assigning attributes to tags.

Activities

Return to index.htm in the text editor.
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.
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.
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.
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.
Below the school's physical address, add another paragraph that contains your email address. Save. Refresh your browser and check.
In the <p> tag that opens both the school address and email address paragraphs, assign an attribute that aligns the paragraph to center of the page. It should look like this: <p align="center">. Whenever you use attributes, place quotes around it as shown in this example. Save. Refresh your browser and check.
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.
Place a horizontal rule (a dividing line) using an <hr / > tag before and after the mission statement. In the <hr / > tag assign an attribute that describes the width of the horizontal line so that the line spans 75% of the page. It should look like this:
<hr width="75%" / >

Save. Refresh your browser and check.
Choose a key word or phrase in the mission 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 mission 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.