Introduction to Hypermedia, Summer 2000: Week 1 Lab 1

Week 1 Lab 2: Experimenting with Markup

Step 1: Set Up an HTML File

1.1 Launch a text editor (BBEdit on the Mac or Homesite in Windows) and a Web browser (preferably Netscape Navigator). Arrange the application windows in the overlap pattern you learned in the previous lab.

1.2 In the editor, save the current blank file to the Desktop under the name lab2.html.

Step 2: Enter Structure and Initial Content

2.1 Enter the following basic structure into your page file:

<HTML> <HEAD> <TITLE&lgtLab 2</TITLE&lgt </HEAD> <BODY BGCOLOR="FFFFFF"> Content here </BODY> </HTML>

2.2 Where you see the words "Content here" insert the following exactly as you see it:

<PRE> Is this the wisdom? No, It is just The technology. 1. Lions 2. Tigers 3. Bears </PRE>

2.3 Save your file. Switch to your browser and open the page lab2.html, which you should find on the Desktop. You should see the following:

Is this the wisdom?
No,
It is just
The technology.

1. Lions
2. Tigers
3. Bears

Step 3: Experiment with Markup

3.1 Switch back to your editor. Delete the tags <PRE> and </PRE>. Save your file again.

3.2 Switch back to the browser and re-load the page (Apple-R on the Mac, Ctrl-R in Windows). This time you should see:

Is this the wisdom? No, It is just The technology. 1. Lions 2. Tigers 3. Bears

3.3 What happened? Web browsers ignore line breaks in the content portion of markup unless that content is enclosed within a <PRE></PRE> container. Keep this in mind. If you want to force a line break, you must use the <BR> tag. Insert this tag into your markup at the appropriate points in order to turn your display back into what you saw in Step 2.3.

3.4 Actually there is a better way to handle the second part of our content for this exercise, the three-item list. We can use an <OL></OL> or ordered list container. Enclose the list items within these two tags and insert the tag <LI> (for list item) in front of each entry in the list. Save your work, switch to the browser, and view.

3.5 You'll notice that the item numbers are repeated. That's because the <LI> tag automatically inserts the appropriate item number. So delete the numbers you entered by hand. Save, switch, and view.