Don's Practical Exercises
Copyright 2005 Don Woods

For each of these exercises, you will create an HTML file, save it to a directory on a convenient local storage device (your hard drive or a diskette), and open it with your computer's browser.

Exercise 1: Getting Started Exercise 8: Input Devices
Exercise 2: Basic HTML Structure Exercise 9: Selection Lists
Exercise 3: Headlines and Text Exercise 10: Forms
Exercise 4: Lists Exercise 11: Anchors & Links
Exerise 5: Properties Exercise 12: Frames
Exercise 6: Images
Exercise 7: Tables Main Menu

Exercise 1: Getting started

  1. Create a new folder to store your work: somewhere in your "My Documents" directory or on a diskette. The files created by these exercises will take up only a few kilobytes of memory.
  2. Start your computer's browser.
  3. Select work off-line if you normally use a dial-up modem to visit the internet. Your browser may display an error message indicating it was unable to find your home page while working off-line. Disregard the error message.
  4. Start Wordpad or another simple text editing program. Select File, New, and Text Document. You're ready to begin the next exercise.
Don's note: You may want to print a hardcopy of these exercises before continuing. This will save you the complication of jumping back and forth between this page and the pages you construct while working on the exercises.

Exercise 2: Basic HTML Structure

  1. Open a new text document (see Excercise 1).
  2. Type the <html> starting container tag on the first line. Press Enter to go to the next line and type the </html> ending container tag there.
  3. Return to the first line, immediately after the starting container tag. Press Enter to insert a new line between the container tags. On the new line, type the <head> container tag.
  4. Press Enter to insert another line between <head> and </html>. Type the </head> ending container tag here.

    Don's note: I like to create both ends of a container before working on the contents. This is an optional programming technique that helps me keep my work properly organized.

  5. Insert another line between the Head section container tags. Use the title container here to create a suitable title for your new HTML doucment.
  6. Add a comment to the Head section identifying the author (you) and the date the file was created.
  7. Immediately below the Head section, create a Body section using the body container tags.
  8. Inside the Body section container, use the <h3></h3> tags to create a suitable headline for the page.
  9. Select File and Save As. Name the new file "Exercise1.html" and save it as a Text Document in the appropriate directory. Your text editor may warn you that the file will be unformated. That's the type of file you want.
  10. Go to your browser. Select File, Open,and Browse. Locate your new file, select it and click on Open, then OK.
  11. If everything looks okay, continue to Exercise 3.
  12. If something doesn't look right, go back to the text editor. Correct the errors and save the changes. Return to the the browser and click on the Refresh button. Inspect the results.

Exercise 3: Headlines and Text

  1. With your text editor, re-open the file created in Exercise 2.
  2. Give it a longer headline. Use the <br> tag to insert a line break in the headline.
  3. Below the headline, write a few lines of text.
  4. Use the boldfaced text container to boldface some of the text. Then use the italicized text and underlined text containers on other portions of the text.
  5. Select File and Save.
  6. Open the file with your browser. If the file is already open, click on the Refresh button.
  7. Inspect the results. Go back to your text editor and correct any errors. Refresh the browser and reinspect.
Don's note: I like to build web pages in small pieces--write a few lines, save, then inspect with a browser as I gradually build the page. This makes it easier to detect and correct errors.

Exercise 4: Lists

  1. Follow the steps from Exercises 1 and 2 to create a new HTML document file.
  2. Use the title container tags to label the page Exercise 4: Lists.
  3. Give the page a size 2 headline: "Exercise 4: Lists."
  4. Create an ordered list of six historic car models.
  5. Save the file to an appropriate director.
  6. Open the file with your browser.
  7. If needed, make corrections. Refresh the browser and reinspect.
  8. Insert the names of two more car models into the list. Save the file. Refresh the browser and inspect the results.
  9. Change the container tags of the list to make it an unordered list. Save the file and refresh the browser.
  10. Below the list of cars, create a dictionary list container.
  11. Inside the dictionary list container, list the following dictionary terms: Apples, Grapes, Wool and Flour.
  12. Give each of the terms two definitions. Describe the "Source" of the item in the first definition (tree, vine, sheep, grain). With the second definition, give a few examples of "Uses" (cider, wine, blankets, bread).
  13. Save the file and inspect the results.

Exercise 5: Properties

  1. Re-open the file created in Exercise 3.
  2. Center the headline.
  3. Use the font container tags to change the size and color of some of the text.
  4. Save the file. Use your browser to observe the results.
  5. Add this sentence immediately below the existing text: "This is an alignment test."
  6. Insert a paragraph break between the new sentence and the original text.
  7. Save the file. Refresh the browser and observe the results.
  8. Set the paragraph break to center-alignment. Save the file and refresh the browser. Then change the paragraph break to right-alignment. Save the file and refresh the browser.

Exercise 6: Images

  1. Locate the box.jpg file used in Chapter 10 of Don's Notes about Hypertext Markup Language. Copy it to the directory where you have been saving your exercise files.

    To copy the box: Go to Chapter 10 with your browser.
    Point to the box image and right click.
    Select Save Picture As from the menu.
    Change Save In to the appropriate directory.

  2. Create a new HTML file. Title it Exercise 6: Images.
  3. Use the image tag to place the box.jpg image on the page immediately below a headline. Give the src property only the name and extension of the image file. Do not set the dimension properties of the image.
  4. Save the file to the same directory where you saved the box.jpg file. Open the new HTML file with your browser and observe the results.
  5. Add the width property to the image tag and set its value to 100. Save the file. Refresh your browser and observe the results.
  6. Add the height property to the image tag and set its value to 200. Save the file. Refresh your browser and observe the results.
  7. Remove the width property. Save the file, refresh your browser, observe the results.
Don's note: Exercise 6 demonstrates how an image can be distorted
by changing both of its dimension properties.

Exercise 7: Tables

  1. Create a new HTML file.
  2. See the first example of tables in Chapter 11 of Don's Notes about HTML. Build this table on the HTML file, but give the table a center alignment on the page.
  3. Immediately below the first example of tables on your page, build the second example from Chapter 11.

Exercise 8: Input Devices

  1. Create a new HTML file.
  2. At the top of the page, give it the headline: "The right kind of car for me!"
  3. Write the text, "Make: ", on the next line, followed by a text box. Assign an appropriate name and size to the text box.
  4. On the next line, write the text, "Model: ", follwed by text box. Assign an appropriate name and size to the text box.
  5. Save the file and inspect it with your browser.
  6. The next line will request "Vehicle features: ", with three checkboxes to choose from. Follow each checkbox with text describing the available features:
  7. Assign appropriate names to the checkboxes.
  8. Save the file and inspect it with your browser. Click each checkbox on and off.
  9. Below the textboxes, request a "Color: ". Use radio buttons to offer a choice of at least three colors. Give each radio button a different name.
  10. Save the file and inspect it with your browser. Click each radio button and observe the results.

    Don's note: At this point, your radio buttons will not work properly. The purpose of radio buttons is to limit the user to a single selection from a choice of options. When you want to let the user choose more than one selection, use checkboxes.

  11. Give each radio button the same name. Save and refresh. Test the radio buttons again and observe the results.

Exercise 9: Selection List

  1. Reopen the file created in Exercise 8.
  2. Replace the radio buttons with a selection list. Give it an appropriate name.
  3. The first option of the selection list should have a value of zero or "" to indicate the user has not made a selection.
  4. Each option should have a value, and text following its tag to describe the value. The option value and the descriptive text can be identical. The value could also be the numeric, identifying the inventory number of the paint.
Don's note: Text descriptions following each option tag provide information useful to your client (the person operating the browser). However, the value of the selected option will be transmitted to a distant web server. The person who receives that value may find a numeric code more useful than the text description.

Exercise 10: Forms

  1. Reopen the file created in Exercise 9.
  2. Add a form container to the file, with all of the page's input devices inside the form. Give the form the following properties:
    action="greatcars/cgi-bin/selection.cgi"
    method=post
  3. Add a reset button to the form. Give it the value: "Clear Everything!"
  4. Add a generic button to the form. Give it the value: "This is what I want!"
  5. Save the file. Open it with your browser. Fill in the text boxes. Select a color.
  6. Click on "This is what I want!" Observe the results.

    Don's note: The generic button doesn't do anything, because a function hasn't been assigned to it. This can be done by using its onClick property to identify the appropriate script.

  7. Click on Clear Everything! Observe the results.
  8. To the right of the first option tag (the default of zero or ""), add the text: "Invisible."
  9. Save and refresh. "Invisible" should be displayed in the text box of your selection list.
  10. Select a color other than "Invisible." Click on "Clear Everything!" Observe the results.
Don's note: You could use this form to send data to the "greatcars" web server by replacing the generic button with a submit button. The submit button would transmit all of the values from the form's input devices.

Exercise 11: Anchors and Links

  1. Create a new HTML file.
  2. Go to Chapter 17. Highlight and copy the entire chapter. Paste it into the body of your new HTML file.
  3. Use the anchor/link container tags to mark the headline at the top of the page. Name this anchor: "TopOfPage".
  4. Add a paragraph break to the bottom of the page, with its alignment centered. Immediately below the paragraph break, type the words, "Go to Top!"
  5. Use the anchor/link container tags to mark "Go to Top!". Give it an href property pointing to the local anchor, "TopOfPage".
  6. Test the results with your browser.
  7. Add another line to the page. On this line, type "My Favorite Site." Mark these words with a link container. Give its href property the full URL address of your favorite web site.
  8. Test the results with your browser.

Exercise 12: Frames

  1. Create a new HTML file with the name, "TitlePage.html". In the Body section, give this page the headline, "Practical Exercises." End the page immediately below the headline.
  2. Create another HTML file with the name, "Exercise1.html". In the Body section, type the next from Exercise 1 of Don's Practical Exercises. End the page immediately below Exercise 1.
  3. Create another HTML file with the name, "Sidebar.html". Make an unordered list of the four links from the Main Menu of Don's Quick Reference & Tutorial for Hypertext Markup Language. Add a target property to each link, pointing to "frMain". Relabel the "Practical Exercises" link and change its href property to "Excercise1.html". Do not test the results just yet.
  4. Create another HTML file with the name, "MyFrame.html". Instead of the Body section, give the new file a frameset with two columns. Make the first column fill 30 percent of the page. Give this column a frame containing "Sidebar.html".
  5. Nest a second frameset inside the second column. Give the second frameset two rows. Make the first row fill 20 percent of the frameset. Give this row a frame containing "TitlePage.html". Give the second row a frame containing "Exercise1.html." Name this frame, "frMain".
    Don's note:
    Add a noframe container to the first frameset.
    Write instructions for browsers that do not accept frames.
  6. Use your browser to test "MyFrame.html". Adjust the columns and rows as necessary until it looks good.

Thanks for visiting Don's Practical Exercises. You now have enough basic knowledge of HTML to build an attractive informational web page.

Go to: Don's Main Menu