Read the introduction and then follow the steps below.
You will create an 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:
- Cleveland
- Franklin
- 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.
Your web page will have different information that you make up. Be creative!
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 uses tags to "mark up" plain text so that a web browser knows how to show the web page. Tags tell the browser how big to make the text, where to put the text, where links go, and where to put photos and other graphics.
Tags 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. The angle brackets < > tell the browser that what's in between is a tag and not just plain text. The <h1> tag starts the heading and the </h1> tag ends the heading. The </h1> tag is a closing tag. Closing tags start with a slash ("/").
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. If you want to find out more about HTML, see “A Beginners Guide to HTML”.
Here is a simple 9 line HTML document. It has a heading (<h1>) and one paragraph (<p>)
<html>
<head>
<title>My Web Page</title>
</head>
<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 are <head>, <title>, <html> and <body> tags.
On a web page, the HTML above will look like this:
This Is My Heading
This is normal text in a paragraph
1) Start Notepad
Click on the Windows Start button, then Programs, then Accessories, then 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.
2) Type (or copy and paste) the 9 lines of HTML from the white box above into Notepad
Change the heading (between the <h1> and </h1> tags) and the paragraph (between the <p> and </p> tags) to something original.
3) Save the document with an .html file extension
Click on the File menu and choose Save.
Open your My Documents folder.
Enter a file name that ends with the characters .html. Include the period before the "h". For example, John's Web Page.html as shown:
The .html” extension tells Windows to use your web browser to open the file.
4) Test your web page
Click on the Windows Start button, then Click on My Documents open the document you just saved. 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
Go to your Notepad file and add a numbered list just after the paragraph that's already there (after the </p> tag).
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 <ol> tag surrounds the <li> tags. On a web page, the above HTML code looks like this:
My favorite cities
- Seattle, Washington
- Denver, Colorado
- Cleveland, Ohio
Note: "ol" stands for "ordered list". "li" stands for "list item".
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 yet. Click on the the 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. You have to make sure to follow the format exactly.
Look closely at the example below. The web page that the <a> tag links to is in quotes inside the angle brackets and the text that shows 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 <p> surrounds the <a> tag because the link is inside the paragraph. 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”:
