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:
- This is the first item
- This is the second item
- 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:
- This is the first item
- This is the second item
- This is the third item
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:
- Start Notepad and open the cs8.htm file you saved from last
week's lab.
- You should have 3 paragraphs. Add a different size heading
before each paragraph.
- 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.
- 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.
- 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:
- <h1> - <h6>
- <ol>
- <ul>
- <li>