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:
- 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
- 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.
- 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!
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
The midterm is due on Tueady, October 22. You will present them in class on that day.