Practical

• 50 percent of module.
• MECB: HTML, CSS.
• Others: HTML, CSS, JS.
• Do as individuals or in twos. No teams of three.
• Do in your own time.
• Build it online somewhere. Keep your URL secret until I have marked the project.

Everyone do this:

1. Design a website based on the Works of Shakespeare.
2. You can base it roughly on the Shakespeare pages or start from scratch.
3. Your site will feature just one of the plays. It will have the full text of the play. The text of the play should be divided into multiple pages.
4. The home page will be a brief introduction and an index into the play.
5. The home page will have a drop-down menu using CSS with links into the Acts and links to supporting remote sites.

6. The CSS should set a custom font for the site.
7. The CSS should define a class "nounlink" with a special style.
8. The site will highlight at least two proper nouns in the text (such as "Scotland" and "Ireland"). It will link all occurrences of the word to a remote site (such as the entry for the word in Wikipedia).
9. These links will be of class "nounlink" and have that style.
10. The play will have a Dramatis personæ and you will link named people in it to a suitable remote site.

11. The site will be enhanced with public domain images. The site will link to the source and link to proof that the content is public domain / creative commons.
12. The site will embed video from YouTube and at least one other video hosting site.
13. The site will work on both mobile and desktop. It will re-size elements and re-organise layout as screen width and browser width change.
14. The site will include at least one "flexbox" layout of side-by-side divs that will re-organise as window size increases and decreases.

MECT/GCDA also do the following:

1. The site will include an SSI header on every page. The menu should be in the SSI header.
2. The SSI header will use JS to include a random Shakespeare-related image. Pick at least 5 images and randomly include one in the header each time.
3. Mouse over the header image will use JS to change it to a random other image.
4. Insert a button to "hide the header". When clicked this uses JS to hides the header and draws a button to "show the header". When that is clicked we are back to where we started.

Write-up:

You will write up a short document about your site:

1. Show snippets of HTML and CSS (and JS) that you are proud of, and explain what they do.
2. Do not send me all the code. I can "View Source" to see it myself if needed. Only send me snippets that you want to highlight.
3. Maximum 3 pages.

Submission:

1. Electronic submission through this form. [NOW CLOSED]
2. The form is designed for a single name and a single student ID.
3. If there is a team of two: Put two names in the "name" field. But just pick a single student ID. Either student will do.

Marking:

1. Checklist of all the above items.
2. 10 percent for some Wow factor - be creative.