Midterm Requirements

Midterm Requirements

Your midterm is to create and publish to the web, what I’m calling a Photo Essay web site.
You will need to pick a subject that has the following qualities:

  • It should be a noun: person, place, activity, thing or idea. Pets, hobbies, parks, sports, family all qualify. So do celebrities and movies, but you have to be careful about finding photos that you are licensed to use.
  • It is interesting to you
  • You either have, or can take, or can find creative commons licenced photos of the topic.
  • Nothing that involved nudity, graphic violence etc. … think something suitable for work. You will need at least 3 images of your subject one of which should show why it’s interesting to you

These requirements are long and detailed. That’s not by accident. When you create a web site you must be detail oriented and also be very clear exactly what it is that you’re creating. We will go over this in class at least a couple of times, but you will be responsible for reading it, asking questions and following the instructions.

Detailed Site Requirements

  • The site must have the following pages:
    • index.html
    • about.html
    • interesting.htmll
    • more-info.html
  • ALL PAGES must have:
    • Valid HTML – with no syntax errors: missing tags, overlapping elements etc. Use this site to check: http://validator.w3.org/
    • Semantic HTML – the elements should match the content: headings in h1..h6 elements, lists in ol or ul elements, text in p elements etc.
    • header with the main title of your site (header element with h1 inside). The title should help people understand what your site is about.
    • navigation with the following names and hrefs
      • Home — index.html
      • About — about.html
      • Interesting — interesting.html
      • More Info — more-info.html
    • content section. The main content on each page must we wrapped in a div or article element with a class of main: <div class=”main”> or <article class=”main”> Inside of that is the main content for that page
    • footer which will be in a <footer> element and contain at least the following information inside a <p> element, where “Your Name” is replaced with your name:
      • Web site created by Your Name for MMP 100-006 Fall 2013
  • Page content – the following points explain what should go in the content section of each page
    • index.html
      • A large image (image #1)of whatever your site is about that takes up the width of the page. This is the width you will define in your CSS. I recommend a size between 600-900 pixels
      • underneath the large image is a welcome message. It can be short and sweet, like one sentence. The longer explanation will be on the about.html page. It just needs to welcome people to the site.
    • about.html This page has two pieces of content. It has two columns with the picture in one and the text in another. They don’t have to be the same width
      • Image of your subject (image #2)
      • A description of your subjext. It should be a few sentences long and should describe your subject.
    • interesting.html This also has two pieces of content in a two column layout. You can use the same styling for this page as for about.html. The content is
      • Image of your subject that shows why it’s intersting (image #3)
      • A description of why you think your subject is interesting.
    • more-info.html
      • This page has links where people can find out more about your subject or things related to it. At a minimum it will have:
      • A short sentence that reads something like: To find out more about [your subject] visit these web sites.
      • An unordered list with the links to those sites.
  • CSS Your site must have a single, valid CSS page named styles.css that is lined to each page in the site. Use this site to check for valid CSS: http://jigsaw.w3.org/css-validator/
  • The css should have the following styles applied to the page
    • Give the page a width and center it (not centering all of the text, but centering the entire page using margins). Again, the recommended width is something between 600px-900px.
    • Set different font-family for headings and for the other text (pagraphs, lists etc)
    • set the font-size and line-height for your headings and paragraphs
    • Set a background color or image (or both if you like)
    • set the text color of at least one element.
    • set the margins and paddings appropriately so there is enough space around your content
    • At least one of your selectors must use an ID or class
    • For the about.html and interesting.html pages that have a two column layout, you must use the float method. We will go over this in class on 10/3 and revisit on 10/10. Remember to clear the footer!

Extra Credit

You can earn extra credit, up to 10 points, for the following:

  • The interesting.html page has multiple images shown as thumbnails that link to larger versions. We will do something similar to this on 10/10

Due Date

The midterm is due on Tueady, October 22. You will present them in class on that day.

Leave a Reply