5775 -- Web Page Design and Publishing with HTML

LAB Exercise 1

TITLE: Introduction to Web Page Design & HTML - Lab 1

INTRODUCTION:

This first set of Lab Projects gets you started with creating a simple set of Web Pages that consist of a sample Home page and two simple supporting pages. The primary goal is to get you used to using the basic tools for designing and testing Web pages. These tools are Windows, a text editor (NotePad or WordPad), and a Web Browser (Internet Explorer or NetScape Navigator).

MATERIALS:

  1. A complete PC System running Windows and with access to the World Wide Web via the Internet.

  2. A Web Site that contains course materials, designed by the instructor, that support delivery of this course. You access this Web Site using the following Internet Web Address:

          http://www.edcrowley.com

    This gets you to the Instructor's Home Page where you will find links to all the Web Sites used during the course, including the "HTML Course - Student Web Site". Once you get to the Student Web Site you will find a link to the "HTML Course Student Message Board" which is used during the course for Instructor-To-Student, Student-To-Instructor, and Student-To-Student communication. The objective is to provide a unique tool for a collaborative learning experience.

  3. Finally, your instructor will provide written copies of the overheads he uses during the course as well as written Lab Exercises for each session.

OBJECTIVES:

When you complete this Lab Exercise you will be able to:
  1. Use the Web browser to access and navigate through the Student Web Site that supports this course.
  2. Use NotePad to view and modify the source files that comprise Web pages.
  3. Copy the content of existing HTML files from a Web Site to files in your own local folders.
  4. Copy existing image files from a Web Site to your own local folders.
  5. Using the skills learned in (1) through (4) above, create, test, and debug a sample 3-page web site.

LABORATORY EXERCISES:

PROJECT 1:

  1. Create three simple HTML files in your "My Documents" folder using template files from the "Student Web Site".

    1. Using the browser (IE of NetScape) visit the "Student Web Site".
    2. Launch NotePad in a separate window to create a "New" file.
    3. In the browser window visit the file named "Sample Index Page" and use the View -> Source function to display the HTML Source file.
    4. Use Edit -> Select All to select all data in the file.
    5. Now use Edit -> Copy to copy the selected data.
    6. Select the empty Notepad window and position the cursor at the top of the window and use Edit -> Paste to copy the selected data from (5) into the Notepad window.
    7. Finally use Notepad's File -> Save As to save the file in your "My Documents" folder with the file_name = sample_index.html.
    8. Repeat steps (1) through (7) above to copy two more HTML files from the "Student Web Site" into your "My Documents folder. The two files are "Sample Page 1" and Sample Page 2". Save these two files as sample_page1.html and sample_page2.html
    9. Go to your "My Documents" folder and verify that all three files exist. Then double-click sample_index.html to visit your Sample Site.

  2. At this point, test your site to verify it is working OK. Consult your instructor or partner for help if necessary.

PROJECT 2:

  1. Add two graphics files to your sample home page.

    1. Using the browser (IE of NetScape) visit the "Student Web Site".
    2. Click on the "Image Files" link named "Yellow Sad Face". When the graphic file is diaplayed, RIGHT-click on the Sad Face and select "Save Picture As" using the LEFT mouse button.
    3. In the pop-up window select your "My Documents" folder and click the "Save" button to save the file sad_face.gif.
    4. Repeat Steps (1) through (3) to copy and save the file shamrocks_happy.jpg using the link named "A Happy Shamrock".
    5. Select your "My Documents" folder and verify the existence of the files copied in Steps (3) and (4) above.
    6. Now visit your sample home page and use the View -> Source function to display the HTML Source file. Locate the two [IMG Source="" ....] tags and insert the file names sad_face.gif and shamrocks_happy.jpg inside the pairs of double quotes ("").
    7. Click File -> Save to save the HTML file and then go to your "My Documents" folder and double-click on your sample_index.html icon.
    8. Note how the graphics appear on your sample index page. Consult your instructor or partner if you can't get it to work.

  2. Change the background of your sample home page.

    1. Using the browser (IE of NetScape) visit the "Student Web Site".
    2. Click on the "Image Files" link named "Welcome Mat". When the graphic file is diaplayed, RIGHT-click on the welcome mat and select "Save Picture As" using the LEFT mouse button.
    3. In the pop-up window select your "My Documents" folder and click the "Save" button to save the file bg241.jpg.
    4. Select your "My Documents" folder and verify the existence of the file copied in Step (3) above.
    5. Now visit your sample home page and use the View -> Source function to display the HTML Source file. Locate the "BODY BGCOLOR=white" .... tag and change the "BGCOLOR" attribute to "BACKGROUND=bg241.jpg"
    6. Click File -> Save to save the HTML file and then go to your "My Documents" folder and double-click on your sample_index.html icon.
    7. Note how the "welcome" graphic appears on your sample index page as a tiled background. Consult your instructor or partner if you can't get it to work.

  3. At this point, test your site to verify it is working OK. Consult your instructor or partner for help if necessary.

PROJECT 3:

  1. As a final task, modify the two ALT attributes in the two IMG tags in your sample_index.html file by changing the text within the double quotes to specify the names of the images, ie. "Yellow Sad Face" and "A Happy Shamrock". After you save the changes go back to the browser and display the sample_index.html again. Position your mouse over the images and note the text displayed in the little pop-up window.

  2. At this point, Go back and visit the "Student Web Site" and browse through the "Good Stuff" page. Visit all of the links to familiarize yourself with what's available for additional references, especially the "Tools" section.

    Before you wrap up tonight, save all the files you have created in your "My Documents" folder to your personal diskette so you can work on them at home or in work before the next class.

    IMPORTANT: Do not destroy these files from week to week and be sure to bring your diskette to class each session because subsequent lab exercises may ask you to refer to these files.

SUMMARY:

This first exercise introduced you to the basic tools and skills you need to master in order to become a successful Web Page designer. Although we haven't really talked about HTML in any detail, this lab exercise exposed you to some of the basic HTML concepts such as TAGS, ATTRIBUTES, and VALUES. You analyzed some simple Web pages, and modified the HTML markups to modify how the browser rendered the file on your computer screen.