STAR Early College High School @ Erasmus
Internet Seminar: Creating Interactive Web Pages


Week 1 : HTML - Part I
Show and Tell

Begin by loading the same page (can use the lab assignment page) in both Firefox and Explorer. Point out that the same page is displayed differently by the two browsers. (NOTE: you may have to change a browser setting before you begin - a simple change like choosing a different default font for one of the browsers.)

Explain that with a word-processor you get total control over the physical layout of the document. But if you access a word processing file on a different computer, it may not even work at all... In order to use the file on another computer, it has to be a similar platform (PC/MAC), use a similar operating system, use an appropriate version of the software.

Web pages are designed to be accessible world-wide, regardless of the type of hardware or software used on the client machine. The person designing the Web page has no control over the type of computer it will be viewed on. Therefore, the formatting of Web pages is done in such a manner that the content and logical design of the page should be constant, although the physical layout of the page may differ.

Show how to look at the document source (View > Page Source ). With Firefox the HTML tags are displayed in purple, which makes for a clearer display.
Show that the document is plain text, with extra HTML tags inserted.
Point out some HTML tag pairs -- <html> and </html>, <b> and </b>

Explain that most HTML tags come in pairs, to bracket the text to which the tag applies.

Open Notepad and start a page from scratch.
Start with <html> and </html>
Add the head and body sections.
Add a title to the head section. Explain that the title is not a heading, but is what appears in the title bar.

Add a few lines of text in the body section. Put each sentence on a separate line.
Save the file and load it in the browser.
Point out that the file type must be set to "All Files" and that it should be named something.htm or .html - also don't use blanks in the file name.
Show how to open the file in the browser, by choosing Open File on Firefox, or Open > Browse on Explorer. This is an important step that is often confusing to students!
Show that the title is in the title bar, not inside the browser window. Show that the text is not displayed on separate lines as you typed it in, but is reformatted into one paragraph. Resize the window to show how the text is reformatted to fit nicely in the space provided. (Explain why this is different than a word processor!)

Go back to the Notepad window and add in <p> and </p> tags.
Explain how br can be used to force line breaks.
Since the br tag doesn't have "content", it is only one tag, but it has this form: <br />

Reload/Refresh the page to see the effect. (Explain the need for reloading)

Go back to Notepad and introduce b, i and u. Point out that it is poor style to use underlining in Web pages because of the confusion with hyperlinks. Reload the page to see what happens.

Introduce the heading tags - show the difference between h1, h2 ,.. h6
Explain (again!) the difference between a TITLE and a heading. Also, explain that the head section has nothing to do with headings. (These are very confusing points!)

Introduce lists, ol and ul. Use <li> and </li> for each list item.
Change the type of the ol list by choosing type="a", then type="A", then type="i" and type="I". Reload after each one to see the difference.
Look at a nested ul. Note the different bullet styles and the automatic indenting.

Keep pointing out that the layout (line breaks, indenting, etc.) of the Notepad file does not determine the layout of the display.

Introduce the <hr /> tag to create horizontal rules (lines). Notice that since the hr tag also has no content, it has the same form as the br tag.

Optional: (especially if someone asks)
There are some characters that you might want in your text, but would not be handled the way you want by the browser. For example, if you want to include a "<" sign on your page and simply type it into your file, the browser will treat it as the beginning of an HTML tag and it will not be printed. (and the text may get messed up as well...) Another example is if you want to include blank spaces in the text. The browser generally ignores blanks.
In these cases, there are special "escape sequences" that are used to tell the browser to display these symbols. The escape sequences begin with an & and end with a ; The sequence for a space (called a non-breaking space) is &nbsp; The sequence for a < (less than) is &lt; The sequence for a > (greater than) is &gt;