Computer Science 8 - Lab 5 HTML

Introduction

In this week's HTML lab you are going to add headings and lists to your web page.

HTML has 6 different types of headings, varying in size. The largest is specified with the <h1> tag, while the smallest with the <h6> tag.

There are two types of lists in HTML, an ordered list and an unordered list.

With an ordered list, the browser automatically orders the items in the list. For example:

  1. This is the first item
  2. This is the second item
  3. This is the third item
With an unordered list, on the other hand, the browser simply displays a bullet before each item in the list. For example: Creating these two lists are done in almost exactly the same manner. To create an ordered list, you use the <ol> tag; to create an unoredered list, you use the <ul> tag. For both types of lists, you add an item using the <li> tag.

Adding Headers and Lists

Although the tags needed to create headers and lists are mentioned above, no examples of how to use them are present. That's okay, though, because you can easily view the source of an HTML page to see how things are done.

Click on View - Source from the browser menu. It will show the HTML for this page. It uses two of the heading tags as well as tags to create both types of lists. Look at the source to see how these were created, then do the following:

  1. Start Notepad and open the cs8.htm file you saved from last week's lab.
  2. You should have 3 paragraphs. Add a different size heading before each paragraph.
  3. Paragraph 2 contains your career goals. Add a list after this paragraph enumerating your top 5 dream jobs. Use an ordered list, listing your most desired job first, then your second choice, etc.
  4. After the last paragraph, add a heading called Class Schedule using the <h2> tag. Using an unordered list, list the classes you are taking this quarter.
  5. Save the file, then display it in your web browser. If you made any mistakes, go back to Notepad, correct them, save the file again, and refresh the page in the browser. Keep doing this until you see the headings and lists displayed in the web page as described above.

After finishing, you should know how to create headings and lists using the following tags: