Before doing the HTML projects, do the following:
  • Make a webpage, using TextPad (or NotePad).
  • Check it with a browser.
  • Upload it to your website, on the remote server.
  • Check your remote webpages, using various browsers.

    HTML PROJECTS

    Always add hyperlinks to and from your home page for each project.

    • project1.html -- Illustrate the text markup tags (both logical and physical). You should add to this page as you learn new tags.

    • project2.html -- Show the six heading levels. Illustrate different kinds of lists (OL, UL, DL) and various type properties, including some nested lists.

    • project3.html -- Place several images on this webpage. (Try to use images whose widths are about 150 pixels or 25% of the page width.) Illustrate the various "alignments", including both properties that word-wrap multiple lines of text around the image and several other properties that place the the image "in-line" on a single line of text.

      ALSO: Modify your home page as follows:

      • Make your own banner and center it at the top your home page.
      • On your home page, make an image link for each project.

    • project4.html -- Make a greeting-card calendar table:
      Columns for "Month", "Day", "Image", and "Event"; add headings.
      Specify height and width of images. Center the table, and make its width 70%.

    • There is no project 5. (You may use this number for the Midterm.)
       

    • project6.html -- Illustrate all of the INPUT tag types including image type, and the SELECT/OPTION tags with the CHECKED & MULTIPLE properties.

    • project7.html Starting with a copy of your project 2 (and adding a few paragraphs of text, if necessary), illustrate how to use both global and inline techniques to set the STYLE for several tags. Set a global paragraph style (for the "P" tag") specifying indent and one other property; then override that with an inline STYLE property. Also, make different styles for different levels of nested lists.
      (If you wish, you may use multiple pages called 7a, 7b, etc. linked to project 7.)

    • project8.html Using the form you made for project 6 (or a new, similar form), add Javascript to validate the input before the form is submitted. Use an image type of input, for submitting the form. Validations should include:
      • For at least one text field, make sure that some data has been entered into it.
      • For another text field, make sure that it contains an email address in proper format (an at-sign @ and at least one period.)
      • For the pulldown list, make sure that some choice has been made (not the first option).
      • Check the x and y coordinates of the image (submit), and reject them if they violate some condition (such as being too close to the edge).
      For extra credit, add a mouseOver effect to one or more links on this page.

  • final.html -- Make a form that contains 50 text input fields (of up to 50 characters). NAMES should be "A1" thru "A50". Test this form to make sure you can receive email when it is submitted. (This form will be used for the final exam.)
  •