Web Design
Mr. Levine
January 17, 2006

HTML in the Raw

Due: January 17, 2006
4 points

Read the introduction and follow the steps below to use Notepad to create a correctly formatted HTML document that contains:

Your final web page might look something like this in Internet Explorer:

Some Seattle High Schools

If you go to a high school in Seattle, you've probably heard of these schools:

  1. Cleveland
  2. Franklin
  3. Sealth

I like Cleveland High School because:

  • I get to go over the West Seattle Bridge to get there
  • It has the same name as the town I was born in
  • It has the same name as a former President

Cleveland's web site is here.

HTML stands for Hypertext Markup Language. It’s the basic language of the web. Tools like Microsoft Word and Macromedia Dreamweaver output HTML. Web browsers like Internet Explorer and Netscape Navigator read HTML to draw web pages.

In this assignment, instead of using Word or Dreamweaver you’ll be writing “raw” HTML. This will help you understand the “guts” of web pages so that you’ll be able to use higher level tools (like Dreamweaver) more effectively. If you’ve never seen HTML, this new stuff may seem complicated. Be patient and let it sink in.

HTML is a way of “marking up” plain text so that a web browser knows how to show the web page. It tells the browser how big to make the text, where to put the text, where links go, and where to put photos and other graphics.

The browser looks at HTML tags to figure out how to show a web page. The most important thing to know about tags is that they usually come in pairs. For example, a major heading looks like this in HTML:

<h1>Page Heading</h1>

h1 is the name of the tag and the angle brackets < > tell the browser that what's in between it is a tag and not just plain text. The <h1> tag starts the heading and the </h1> tag (note the slash inside the angle brackets) ends the heading.

Most of the text on a web page is in "paragraphs" A paragraph can have just one sentence or even just a few words. Paragraphs use the <p> tag like this:

<p>This paragraph has one sentence</p>

There are a lot of tags. Really a lot. You'll only need to know a few for this course. To find out more about HTML, see “A Beginners Guide to HTML”.

Here is a simple HTML document. It has a heading and one paragraph.

<html>
<body>
<h1> This Is My Heading </h1>
<p> This is normal text in a paragraph </p>
</body>
</html>

In addition to the <h1> and <p> tags, there is an <html> and a <body> tag.

The <html> tag tells the browser that the file contains HTML coded information. The <body> tag is the main part of your document.

In most HTML documents, there will be a <head> tag before the <body> tag. The <head> section has information that is useful but isn't displayed on the web page. This example doesn't have one.

On a web page, the HTML above will look like this:

This Is My Heading

This is normal text in a paragraph

Follow these steps to do the assignment:

1) Start Notepad

For this assignment, you'll use Notepad to write HTML. Notepad comes with Microsoft Windows. Unlike Word or Dreamweaver, Notepad only lets you edit plain text with no fonts or graphics. To run Notepad, click on the Windows Start button, then Programs, then Accessories, then Notepad.

2) Type the 6 lines of HTML from the box above into Notepad

Change the heading (between the <h1> and </h1> tags) and the paragraph (between the <p> and </p1> tags) to something original.

3) Save the document with an .html file extension

The .html” extension tells Windows to use your web browser to open the file.

Choose the File menu and choose Save. Enter a file name that ends with the characters .html. Include the period before the "h".

For example, John's HTML Assignment .html as shown:

4) Use Windows Explorer to open your web page.

Click on My Documents, find the document you just saved, and double-click on it. You should see the heading and one line of text.

Leave Notepad and Internet Explorer running as you work on the assignment.

5) Add a numbered list

A numbered list uses two different tags. The first tag, <ol>, marks the start of the list. The other tag, <li>, marks each item in the list. For example:

<p>My favorite cities</p>
<ol>
<li>Seattle, Washington</li>
<li>Denver, Colorado</li>
<li>Cleveland, Ohio</li>
</ol>

Notice that the <li> tags are nested inside the <ol> tags. On a web page, the above HTML code looks like this:

My favorite cities

  1. Seattle, Washington
  2. Denver, Colorado
  3. Cleveland, Ohio

Note: "ol" stands for "ordered list". "li" stands for "list item".

Go to your Notepad file and add a numbered list just after the paragraph that's already there (after the </p> tag).

Use HTML like the code above, but be creative and make your own list. For example, you could list your favorite music groups.

6) Save the file

Choose the File menu and choose Save to save the file

7) Look at the file in the browser

Go back to the Internet Explorer window. Notice that the list you just added isn't shown. Click on the the Refresh button (refresh button) or press F5 and the browser will update and show your list. If you don't see your list then go back to Notepad and check your HTML code.

8) Add a bulleted list

The HTML for a bulleted list looks just like a numbered list except it uses the <ul> tag instead of the <ol> tag. "ul" stands for "unordered list".

For example, the HTML code:

<p>Some songs</p>
<ul>
<li>American Pie</li>
<li>Black Magic Woman</li>
<li>Supper's Ready</li>
</ul>

Looks like this in the browser:

Some songs

  • American Pie
  • Black Magic Woman
  • Supper's Ready

Go to your Notepad file and add HTML for your own bulleted list. Add your list just after the numbered list (after the </ol> tag).

9) Save the file and check it as in steps 6 and 7 above

10) Add a link

An HTML link uses the <a> tag. "a" stands for "anchor". The <a> tag is more complicated than the previous tags. The web page it links to is inside the angle brackets and the text that's show on the web page is between the opening <a> and the closing </a>.

Here's a simple example:

<p>A very popular search engine is <a href="http://www.google.com">Google</a></p>

Notice that the <a> tag is nested inside the <p> tag. The above HTML looks like this in the browser:

A very popular search engine is Google 

Go to your Notepad file and add a link just after the bulleted list (after the </ul> tag).

11) Save the file and check it as in steps 6 and 7 above

NOTE: If you close Notepad and need to edit the HTML document again you can’t just double click on it because that will just open the browser again. Instead, right click on the document and choose “Open With” and then “Notepad”: