Getting Started with the Lab Exercises

Assignment HTML 1: Lab Exercises
     The following exercises are designed to give you practice in writing HTML code and creating a web page. After completing the following exercises, give your trainer the disk with the files that you have created and saved.

Before starting this set of exercises you must understand the process of editing HTML. The most basic method is to use a simple word processor like Note Pad or Word Pad (found in the Windows Accessories group) or SimpleText for the Mac. Here's the drill:
  1. Type your HTML code into the editor.
  2. Save the file (you can do this at any point if you want to view your work). Remember where you save it to.
  3. View your work by going to your WWW browser and choosing Open File from the File Menu and navigate to your saved html file to view it. When you go back to the editor to make more additions or changes, and then you come back to the browser, you don't need to re-open the page each time. Use the Refresh or Reload Button to get the most recent version of your file.
  4. Tip: If you leave both the editor and browser open you can toggle back and forth between them using the alt-tab command or the program buttons on the task bar (PC only). On a Mac you will need to cascade the two windows.

Basic Tags: Lab Exercise

  1. Create a simple HTML document about yourself or a topic of your choice using the basic tags learned in the first lesson. (Keep it simple for these exercises. You will be designing a "real" web page later.)
  2. Save the document as an .htm file and remember where you saved it (name it yournamefile1.htm). If you are using a Mac, you should use the .html file extension.
  3. Launch your WWW browser. If you are already in your web browser (reading this tutorial!), you may want to open a second browser window.
  4. View your file in the browser by selecting Open File from the File menu. This may differ somewhat from browser to browser.
  5. Add bold and italic words to your document, save and view.
  6. Add a header to your document, save and view.
  7. Add paragraph and break tags to your document, save and view.
  8. Add a horizontal rule where appropriate, save and view.
Back to Basic Tags tutorial

Lists: Lab Exercise

  1. Add an unordered list to your document, save and view.
  2. Add an ordered list to your document, save and view.
  3. Add a definition list to your document, save and view.
Back to Lists tutorial

Links: Lab Exercise

  1. Create a new file called yournamefile2.htm (it can be very basic).
  2. Create a link to Yahoo (http://www.yahoo.com).
  3. Create a link from yournamefile2.htm to yournamefile1.htm.
Back to Links tutorial

Images: Lab Exercise

  1. Open one of your HTML files in your editor.
  2. Add an image to your document using the tag, <IMG SRC="image.gif"> (Note: image.gif is a generic name. Your image may be horse.gif or scenery.gifAlso, the image must be placed in the same directory or folder as your HTML file.  Although the image *can* be in another directory, the way to reference that image in your image tag isn't a part of this exercise). Save and view. You can obtain images in several ways:
    1. You can save any image off the Internet by clicking on the image (click and hold down on the Mac til the pop-up menu appears)(right-click for PC's) and saving it to disk. There are many free resources out there on the Internet that you can take advantage of. Note that many images are copyrighted and may not be freely used.
    2. You can scan an image and save it as a .gif or .jpg file with image editing software.
    3. You can create your own images with image editing software.
  3. Align a short description to the bottom of you image, save and view.
  4. Align the description to the top of the image, save and view.
Back to Images tutorial

Tables: Lab Exercise

  1. Add a simple table to yournamefile1.htm without borders. Make the table with 2 rows and columns, save and view.
  2. Add border value of 1, save and view.
  3. Add a border value of 5, save and view.
  4. Make the top row a table header, save and view.
  5. Align all data elements to the middle of their cells, save and view.
Back to Tables tutorial

Netscape Extensions: Lab Exercise

  1. Center one of your headers in yournamefile1.htm, save and view.
  2. Center your image, save and view.
  3. Align the image to the right, save and view.
  4. Put a border around the image with a value of 1; save and view each.
  5. Add a horizontal rule that is aligned to the left, is 50% of the width of the page and has a size value of 5, save and view.
  6. Give some text (non-header) a font size value of +3, save and view.
  7. Put a background color and text color on your page. In order to do this you must obtain the hexadecimal value for the color you want to use. Click here to view colors and their associated hexadecimal values. The hex values are at the top of each color swatch (a 6 digit alpha-numeric number). Just plug the value in at the appropriate place in your Body tag.
Back to Netscape Extensions tutorial
Assignment HTML 2: Your Personal Web Page
     As a final exercise, try to put all of the HTML tags that you have learned to use by creating a real page; either a personal home page or something relating to your work or some other interest you have. Submit this web page to your trainer after saving it on a disk.


Optional

Once your page is complete, you must find a WWW server to host your page if you want anyone to be able to access it. Here are a few options:  
  1. You may have a personal web site that comes with your Internet account. You should ask your Internet Service Provider (ISP) how to place your page on this personal web site. It differs from one ISP to another.
  2. You may have a web server at your place of work where you can post your page. Ask your system administrator if this is available to you.
  3. You can rent space on a commercial web server. Most ISP's offer this service.

Editors

We have attempted to teach you some of the basic HTML tags in this tutorial. Many people don't feel that it is important to learn HTML code anymore, since there are many editors and document converters out there that don't require any knowledge of HTML. Our experience has been that even with these tools there are often times when you still need to edit the code to make things look right. There are four basic types of editors:
  1. Basic text editors like Wordpad and SimpleText
  2. HTML editors that provide many shortcuts to hand coding, but still basically work with HTML.
  3. WYSIWYG (what you see is what you get) editors that add html code automatically.
  4. Document converters that allow conversion of word processor documents and spreadsheets .
You can find a list of editors on our HTML Resources page.