Lab #3 Creating a basic HTML web page

(due Wednesday, 1/21, 11:59 PM)

Modify an existing file which uses more tags

Next, you'll practice using 10 of the most common tags:

<h1> </h1> First level heading

<h2> </h2>
Second level heading

<p> </p>
paragraph

<em> </em>
emphasis (italic)

<strong> </strong>
strong (bold)

<br />
line break (notice that there is a space between br and /)

<hr />
horizontal rule (notice that there is a space between hr and /)

<ol> </ol>
ordered list

<ul> </ul>
unordered list

<li> </li>
list item

NOTE: use lowercase (not UPPERCASE) for the tag names

Although the browser will be able to display your web page if you write your tags in uppercase, the latest standards require that tags be in lowercase. We will follow this rule.

(If you are interested in reading more about the standards, look up XHTML)

NOTE: paired tags versus stand-alone tags

Paired tags have an opening tag, for example <p>
and a closing tag, for example </p>

Stand-alone tags have a slash to close them right at the end of the tag, for example <br />. Notice the space between the tag and the slash.

You'll practice using these tags by modifying existing HTML that uses all of them.

1. Open Notepad and create a new document (go to the "File" menu and choose "New").

2. Select the text in the panel to the right (it starts with <html> and ends with </html>).

3. Copy this text (chose "copy" from the "Edit" menu), then go to Notepad and paste it into your new document.

4. Save the document as "fit1002.html"

Now you're ready to make changes

5. Figure out how to add a fourth element to the numbered list.

6. Open the file in a browser to see how it looks. If it isn't correct, try again.

Next you will be making more changes to your file

previous page

next page

<html>
  <head>
    <title>Insert your title here</title>
  </head>

  <body>
    <h1>Level 1 heading</h1>
    <h2>Level 2 heading</h2>
    <hr />

    <p>paragraph<br />second line of paragraph</p>
    <p><strong>bold text</strong></p>
    <p><em>italic text</em></p>

    <ol>
      <li>first list item</li>
      <li>second list item</li>
      <li>third list item</li>
    </ol>

    <ul>
      <li>one list item</li>
      <li>another list item</li>
      <li>yet another list item</li>
    </ul>
  
  </body>

</html>