CS 140 Lab 20 - Spring 2008

Objectives

  1. Crash course in HTML.
  2. By the end of the lab, you'll have your own web page hosted by St.Lawrence.

Part I - Setup

In this section you'll make a basic web page that you'll be able to browse over the Internet. Rather than using Dreamweaver or some other HTML editor we'll be coding the HTML from scratch. Along the way, you'll be learning some basic HTML tags.

This section will get you started on setting up a generic webpage.

  1. Open the File Explorer (Win+E) and browse to your P: drive.
  2. On your P: drive you should see a directory called public_html. If not, create that directory now.
  3. Open Notepad (it's under Start->All Programs->Accessories->Notepad) and cut and paste the following text into the editor: 
          <html>
                        
        <head>
          <title>Your name goes here</title>
        </head>
                                
        <body>
          <h1>My CS 140 Webpage</h1>
          This will be more interesting soon.        
        </body>
                                
      </html>
    This is the foundation for your future webpage.
  4. This next step will save your webpage but it's a bit tricky, so be careful.
    1. Click on the "File->Save As" command in notepad.
    2. In the window that pops up set the "Save as type" box as "All Files".
    3. In the "File name" box, name your document index.html
    4. Finally, save the resulting file in the directory P:\public_html
  5. If everything went smoothly, you should have a web page up now. Open up Firefox and browse to the following URL: myslu.stlawu.edu/~username but replace the username part with your SLU username.

Part II - HTML Crash Course

If everything worked as expected, go back and look at the index.html file in Notepad. Obviously it looks different on the web browser than it does in plain text.

This is the nature of HTML, web pages are stored in plain text with directives (the tags) to the browser about how to structure the page. The directives are given through HTML markup tags, any pair of words that starts with <something> and ends with </something>. Depending on what is inside the angle brackets, the text (or other media) between the tags appears differently in the browser.

  1. Question 1: Experiment with some tags. Describe the effects that the following tags have:
  2. Take a few minutes to personalize your webpage. Some suggestions: write your name, major, graduation year, etc. Whatever you feel comfortable doing.

Part III - Embedding Content in HTML Pages

So far you've learned about a couple simple markup tags. Now you'll learn how to display and link to content.

  1. Copy any image from the CS140 photo gallery to your public_html folder.

The img Tag

  1. First, we'll insert an image into your HTML webpage. To do this you'll use a new kind of tag called img. To have your picture appear on your web page insert the tag <img src="image.jpg" /> into the body of your webpage wherever you'd like the image to appear. Note, be sure to replace image.jpg with whatever the actual image file name is in your public_html folder.
  2. Save your index.html page, and refresh your webpage in your browser (hitting Ctrl-R will refresh the page). You should see your image on the web page somewhere. If not, try to figure out what happened.

The a href Tag

  1. Now we'll link to an audio file. To do this you'll create an anchor tag to create a hyperlink to the .wav file.
  2. The anchor tag consists of two parts. The first is a string describing where the media is. The second is what you want that link to look like on the web page.
  3. Say we want to link to a wav file called sound.wav, but have it appear on the screen as "My Cool Sound". Here's the HTML we'd write: 
            <a href="sound.wav">My Cool Sound</a>
  4. Insert an anchor link in your web page to link to a sound file. Create a simple wav file using Audacity of your voice, save it to your public_html folder, and link to it on the web page. (Or use the sound file you created the last lab).
  5. Insert a link in your webpage to some other web page that you find interesting, for example your Facebook page if you have one, or any other site.
  6. When you're done raise your hand to show the instructor or TA.

Extra Credit

Inside the browser for today's lab, lab 20, right-click on the page and select "View Page Source". See if you can figure out how I create numbered lists of items and what tags are involved. Create a numbered list in your web page. Google these tag names for creating numbered lists and figure out what the acronyms stand for. For example the p in the tag <p>some text</p> means "paragraph".

Somewhere in this web page I also have a list inside of another list. How do we express "lists in lists" in HTML?