Note that these questions contribute to your final exam mark.
- Before writing answers to these questions, please read how to answer questions.
- After writing answers to these questions, please e-mail your answers to one of:

  1. Vytautus Tumas (vt50 at h_bleurgh_w a_bleuff_c u_blosch_k).
  2. Pierre Le Bras (pl196).

- Please let the subject line be precisely F27WD QI.
- By special request of the labhelpers, please send them pdf files, not odt files.

Deadlines

QI
Wednesday 3 February at 00:27 (Week 4).
QII and QIII
Wednesday 10 February at 00:27 (Week 5).
QIV
Wednesday 17 February at 00:27 (Week 6).

Question I: general stuff

The deadline for submitting answers to QI is Wednesday 3 February at 00:27. Please let the subject line be precisely F27WD QI
Your answers need not be long, but they must be specific: for instance “Because they are great” is not an answer to the question “Why do people eat Mars bars?”, whereas “They taste great, because they are high in sugar and have a chewey, but not too chewey, texture” is an answer.

Please work from the screenshots below, so that everybody’s looking at the same thing initially. You may also follow a weblink if I provide one, and comment on the live website too if this is helpful, but please then provide relevant screenshots.

  1. (2 marks)
    Name two advantages of using WYSIWYG, and two advantages of not using WYSIWYG.
  2. (4 marks)
    Give two advantages of designing a web site using CSS.
  3. (6 marks)
    Why do browsers use HTML instead of PDF? Give three distinct advantages.
  4. (6 marks)
    Find three websites that do not clearly state what they are. Give precise weblinks, screenshots, and explain your examples.
    Your answer should include at least one website for which this is clearly an error, and one website for which it is a feature (e.g. figuring out what the webpage is about is either part of the fun of visiting the site, or gives those ‘in the know’ a feeling of superiority).
  5. (4 marks)
    Name four things that could be done better on the freeborn bikes website (screenshot here), and three things they get right. You might find it helpful to compare with Cotswold Outdoor (screenshot here).
  6. (10 marks)
    The following webpages are all news portals, but they take very different approaches. For the webpages below, give a total of ten distinct points analysing layout, choice of colour, font, and whatever else you notice and link this to intended audience (I include links for your convenience, but please start with the screenshots):
    1. BBC news (screenshot).
    2. Google news (screenshot).
    3. CBBC news (screenshot).
    4. Financial times (screenshot).
    5. The Sun (screenshot).
    6. Fabric London (screenshot).
    7. Pink News (screenshot).
      Your answer must include at least one point for each website.
  7. (2 marks)
    Compare these screenshots of The Sun and The Mirror. What do the webpages tell you about the readerships of the two papers?
  8. (4 marks)
    Find two truly unorthodox websites—-that is, websites that are fresh and original and not like anything else out there. Give precise links, take screenshots, and explain what you like about them.
    Mark will be awarded for the quality of analysis in the explanation: it’s not enough to just observe that ‘this is different’; you have to describe and study how the design works.
    Examples given will be kept confidential if you so request.
    Two examples that I found are: letters-inc and acko.net. (I saw them first, so you can’t use these.) The first is unorthodox because (for example) of the unusual graphic design; the second is unorthodox because (for example) it is three-dimensional. Both are animated, and the animations are not your standard flash videos.
  9. (unmarked)
    Explain my choice of font, colour, and opacity of the ‘marks’ to the right. Is the webpage balanced, and if not, does the design work, and if it does, why? What optical and psychological effects am I trying to accomplish with these choices?


Back to F27WD

Question II: HTML

(12 marks)

Include screenshots at each stage to prove you’ve done it.

- Download HTML_Examples.zip (also viewable here). Copy the entire directory into public_html (including the images directory). Make a copy of HomepageTemplate.html and change the name to index.html, making sure to rename index.html if you already have this file.
- Bring up a browser and open http://www2.macs.hw.ac.uk/~username (swapping “username” for your own username). You should see the example website.
- Do not browse your html from local storage; you may lose marks if you do. If the address in the location bar of your browser starts with file:// rather than http://, then you’re doing it wrong.
- If you have problems with images not loading in the browser, go to directory ~username/public_html/ in a terminal window and change the file permissions of relevant directories to 755 and of files to 644. For instance: chmod 755 images and chmod 644 t-rex.png.
- Open index.html in a text editor. You will see the html code that we discussed in the class. (Dedicated HTML editors exist, such as Bluefish; go to Programming → Bluefish Editor.)

Now modify the HTML:

  1. Replace the picture of the kitten with a picture of Tyrannosaurus Rex.
  2. Add some text with headers, describing T-Rex’s favourite pastimes. Make sure your text includes some items in strong tags, and some items in em.
  3. Add links to T-Rex’s favourite websites.
  4. Add a list of skills that T-Rex has learned in his first year of Uni so far, that might be useful for future employers: e.g. people(-hunting) skills, programming languages, group work, report writing, explaining code etc. Make sure your list includes some items in strong tags, and some items in em.
  5. Try to validate the website by going to validator.w3.org. Either cut and paste the HTML or put in the entire URL e.g. http://www2.macs.hw.ac.uk/~username (not just the local file location). Does it work? If not, find the errors, list them, fix them, and revalidate.
  6. Try to validate HomepageTemplateNotSoValid.html.
    State the error message you get. Find the error. Fix the error and revalidate.


Back to F27WD

Question III: CSS

(10 marks)

Include screenshots at each stage to prove you’ve done it.

Download CodePart2.zip and save the files in public_html. Bring up Lollies.html and stylesheets/sweet.css in your favourite editor. Also bring up Lollies.html in a browser — the URL should look like
http://www2.macs.hw.ac.uk/~username/CodePart2/Lollies.html
The URL in your browser should not look like file://.

  1. In Lollies.html, change the lime paragraph to include all of the classes, like this: 
    <p class="lime strawberry orange swirl">
    Save and reload in a browser. What colour is the Lime Lolly paragraph now and why?
  2. Next reorder the classes in your HTML:
    <p class="strawberry orange swirl lime">
    Save and reload. What colour is the Lime Lolly paragraph now and why?
  3. Next, open your CSS file and move the p.lime rule to the bottom of the file. Save and reload. What colour is the Lime Lolly paragraph now and why?
  4. Move the p.strawberry rule to the bottom of the CSS file.
    Save and reload. What colour is the Lime Lolly paragraph now and why?
  5. Rewrite the lime element in Lollies.html to look like it did originally
    <p class="lime">
    Save and reload. What colour is the Lime Lolly paragraph now and why?


Back to F27WD

Question IV: More CSS

Include screenshots at each stage to prove you’ve done it. Also include, for each question below, a clickable hyperlink where the page that generated the screenshot can be viewed online. You may score zero marks if you fail to provide screenshots AND clickable hyperlinks.

Return to your T-Rex homepage from QII.

  1. (2 marks)
    Using float, make the picture of T-Rex float to the right (like the marks do on this webpage).
  2. (2 marks)
    Style your lists so they appear in a blood-pink box with a dashed margin.
  3. (2 marks)
    Style your lists so that strong text displays as dark red only in lists, and em text displays as dark green only in lists (so text outside lists, such as T-Rex’s favourite pastimes, will style as normal).
  4. (4 marks)
    Add a sidebar to the left of the page, and a horizontal nagivation bar at the top of the page. You may find this page helpful. The sidebar should include links to T-Rex’s friends, and include two sections: those he has eaten and those he has not yet eaten. The navigation bar should include links to various impact events.
  5. (4 marks)
    Using CSS styling, make all html links on the page appear as buttons with rounded edges that display a shadow when you hover over them. You may find this page helpful.

Question V: One more question

  1. (4 marks)
    T-Rex reads an article about “Search Engine Optimization” and asks you to explain it to him when you meet him for lunch tomorrow, possibly with an eye to improving his website. Your life depends on remaining useful to the reptile: what do you answer? You may find it useful to start reading here.
  2. (unmarked)
    Using Statcounter or a similar web beacon technology, track your marker as he or she opens the hyperlinks in your answers to QIV above. Analyse the data collected: a prize will be awarded to the student who can gather the most personal data about the person marking you. You might like to open the source code of this webpage to see how I find things out about you.
    (For instance, if you can see this text, it means that you like biscuits.) (If you can see this text, it means you have jolly good eyesight.)
    (If you can see this text, it means you’re smart but have too must time on your hands.)