Module 1 Project

The purpose of this project is to practice writing basic HTML. Here’s what you need to know to get started:

  • No CSS or JavaScript is permitted! If you already know how to use those, that’s great, but don’t use any of that. We want to give those who are new to the web the same chance to do well.
  • All web pages must be created by you, and by hand. Do not use any web pages written by anyone else, and do not use any tools help create the web pages (other than a basic text editor).
  • All web pages you create must have a head and body wrapped inside <html> tags. Make sure the head sets the title of the page and specifies the character set to UTF-8.
  • All your web pages must have a heading (e.g. using <h1> tags) at the top. This is in addition to the logo described in the first question.
  • All images (and video) must have sensible alt text in case they cannot be displayed.
  • Format your HTML source code so that it is easy for humans to read.
  • Make sure your HTML is valid. Check it with an HTML validator.
  • While you do not need to spend a huge amount of time on any of these questions, work that technically does what is asked but is obviously low- effort will probably not get full marks.

Submitting Your Project

Put all the files for you website into a folder named project1, and make sure that the file index.html is the main page into your website (that’s the one the marker will open when they start marking your work).

When you are done, compress your project1 folder as a zip file named project1.zip, and then submit this file on Canvas.

Questions

  1. A logo. Using a paint program of your choice (e.g. the basic paint program that comes with your computer is fine), create a personal logo for yourself. It does not need to be a work of art, but it must be completely original, and created entirely by you. Try to make it interesting and colorful.

    This personal logo must appear on the top of every page for this project.

  2. A standard footer. Every page of this project must include a standard footer with at least the following information:

    • Your full name (as it appears on your SFU student card).
    • Your SFU email addressed (linked with mailto).
    • Basic course information, e.g. CMPT 165, Fall 2017, SFU. CMPT should be linked to the School of Computing Science’s home page, and SFU should by linked to the SFU home page.
    • A link to the main index page for this project (described in the next question).

    Put this footer at the bottom every page for this project, and use a horizontal line to separate it from the rest of the page.

  3. An index page. In a file named index.html, create a neat and organized web page that links to all the other questions in this project. The links should be on a numbered list, where the numbers are the same as the question numbers on this page. Each link should be brief but self- descriptive, i.e. someone should be able to guess from the link text (or text around it) what the page it points to is about.

    The first item should link to your personal logo from the previous question. The second item should be an internal link to the footer at the bottom of index.html. The third item should link index.html itself (this question). The rest of the items should link to the pages described in the following questions.

  4. Your favourite movie. In a file named movie.html, include the following information about a movie you like:

    • It’s name. Wrap this in a tag that somehow makes it stand out from the rest of the text.
    • A picture from the movie, or a picture somehow related to the movie.
    • It’s director(s).
    • It’s main actors. List at least 3 or 4.
    • The year it was released.
    • It’s running time.
    • A brief description of its plot.
    • A sentence or two from you about why you like the movie.

    You can find lots of information about movies from the Internet Movie Database.

    Make sure this page is neatly formatted and easy to read. We expect you to use lists and other relevant HTML features in a sensible way.

  5. Ideal vacation spots. In a file named vacations.html, use a table to list your top 10 ideal vacation spots. Each row of the table should describe one vacation spot, and should include at least this information:

    • A number representing how highly you rank this spot, on a scale from 1 (lowest) to 10 (highest). Arrange the rows from highest rated at the top to lowest rated at the bottom.
    • Name of the location.
    • A link to the Wikipedia entry on that location.
    • A small image that shows a typical scene from that location.

    In addition to these rows of information, your table must have a descriptive title in its top row that spans the entire table.

  6. A video tutorial. In a file named video_tutorial.html, display this video (copied from here) using the HTML <video> tag.

    In addition to displaying the video, include a brief description of how the tag works, i.e. explain its parts and what they do. In your explanation, display a sample of how the <video> tag is written in HTML source so that someone reading this page could copy it and put it into their own website. Please use the <pre> tag for formatting the example.