INFO10110:  Web Page Design
Assignment 1 — 20 marks


For this assignment you will create 2 HTML files. You will name the first file either INDEX.HTML or DEFAULT.HTML. You will name the second file using any file name of your choice. Save these files on disk using the instructions in this assignment and follow the instructions at the bottom of this page for uploading to a web account for grading. (Your in-class instructor may also require a printout of all files for this assignment. Please check with your instructor. Distance education students do not supply printouts.)

  1. General instructions for both files:    [2 marks 1 mark per file]

  2. Using embedded style sheet settings in each file (use the same settings for both files) for this assignment, make the following settings:    [3 marks]

  3. For the first file named either index.html or default.html (your choice), create the web page (as displayed in the following image) that contains the following elements:    [6 marks total]

    1. group the items as displayed in the image below     [2 marks]

    2. include the following 2 image files (found on your "student" file) — each should have suitable "alternate" text within the image tag:    [1 mark]

      • masthead.gif  
      • horizbar.gif   (use this image for all "horizontal lines" on the web page)

    3. Include each of the following images and make each image into an image link as instructed.  You will have to find those sites. Include suitable "alternate" text for each image as part of each image tag. There should be no border around any of these images and ONLY the image should be a hyperlink (ie. no "text" should be included in these hyperlinks).    [2 marks]

      • bulb.gif — make this image into a hyperlink to a REMOTE site on the Internet that relates to the picture
      • animal.gif — make this image into a hyperlink to a REMOTE site on the Internet that relates to the picture
      • globe.gif — make this image into a hyperlink to a REMOTE site on the Internet that relates to the picture
      • computer.gif — make this image into a hyperlink to the local HTML file using the file name you have chosen (which you will create later in this assignment).

    4. The page should look similar to this when complete ... but note that this example has been displayed in a web browser window that is not "maximized". (HINT: The grouping and alignment involve both HTML and CSS settings.)    [1 mark]

    5. first image example for surfer.html

    6. Create a second HTML file using a file name of your choice. Choose a "theme" name for this page and include this theme in a heading at top of page. This web page will have a heading and two sections in the page.    [7 marks total]

    7. NOTE: Images used on web sites have an assumed copyright, even if it does not explicitly state that fact. You may only use images from a web site if you have permission to use them.

      1. General page features:    [2 marks]

        • CSS (embedded at the top of the page) using the same settings (as you used in the surfer web page)

        • the main title of the page, centered across the page - heading size 1

        • include links pointing to each anchor for each section of the page. Include an anchor at the top of the page.

        • two sub-headings, one for each of the two sections of the page - heading size 2

        • a horizontal line separating the two sections

        • include an anchor for each section of the page. Include a link pointing to the anchor at the top of the page at the end of each page section.

      2. First page section: find 6 HTML errors in the code below and explain why they are wrong (do not explain "how to" fix them -- just explain why they are not correct).  Use an ordered list to number each point for the 6 errors that you have found.    [3 marks]

        <html>
            <head>
               <title>The Porcupine Source</head>
            <title>
          <body>
            <div align="centre">
            <h2>The Porcupine Source<h1>
        
            <p>Welcome to our online catalogue that lists over
            200 Porcupine-related products.
        
            <hr>
        
            Click <a href="catalog.html >here</href> to see our Catalogue.
        
          </body>
        </hmtl>
        

      3. Second page section:    [2 marks]

        • Include a short paragraph (more than one sentence) about your page theme.

        • at least two hypertext links to remote sites on the Internet that relate to your page theme.

        • at least two images that relate to your page theme.  Include an alternate text setting for each image.

        • Include a multimedia feature somewhere in this section of the page. You may use the video clip "disgruntled.wmv" (from the supplied assignment file) or any other multimedia file that you may have (audio or video). This multimedia file should be a local file (uploaded into your web account) not a link to remote site (such as youtube).

          If you use the disgruntled.wmv file, note that this multimedia file only works from your web account, not on your local computer. After writing your code, you will have to upload your files into that account to test it and see it working. Here are some settings:

          • object multimedia mime type: video/x-ms-wmv
          • source parameter: disgruntled.wmv
          • autostart parameter: 1

        • one local hyperlink to your other file for this assignment (either INDEX.HTML or DEFAULT.HTML).

    8. Obtain a web account from your instructor. In that account, make a folder named "surfer" and upload all of the files (HTML, multimedia and image files) for this assignment into that folder in your account on "nexus".    [2 marks]

    Return to main page