This week's work: Part 1

The file spy.html is an html file that contains a form. Take a copy of it and save it in your lab5 folder. (Right-click the link and choose Save Link As…)

Important. For this lab, you must not modify spy.html.

The form allows a user to enter his/her first name (e.g. James) and surname (e.g. Bond). On submit, the data is passed to a PHP script called spy.php using the get method. Your task is to write spy.php.

Your script should contain a sequence of echo statements to produce the output. In particular, if the user entered James as first name and Bond as surname, the script will output a paragraph that contains the following (including the punctuation):

Your name is Bond, James Bond.

Make sure you have the paragraph tags. Make sure you have the punctuation. Make sure the output validates.

This week's work: Part 2

The file pet.html is an html file that contains a form. Take a copy of it and save it in your lab5 folder. (Right-click the link and choose Save Link As…)

Important. For this lab, you must not modify pet.html.

The form allows a user to enter a word describing what kind of pet s/he has (e.g. dog) and a word that says what sound the pet makes (e.g. woof). On submit, the data is passed to a PHP script called pet.php using the get method. Your task is to write pet.php.

Your script should contain a sequence of echo statements to produce the output. In particular, if the user entered dog and woof, the script will output a paragraph that contains the following (including the punctuation):

Your dog goes woof-woof.

Similarly, if the user enters pig and oink, your script outputs a paragraph that contains: Your pig goes oink-oink.

Make sure you have the paragraph tags. Make sure you have the punctuation. Make sure the output validates.

This week's work: Part 3

The following files are provided:

• curryout.html
• banner.png (which is a transparent image)
• month.jpg
• offers.jpg
• franchises.jpg
• celebs.jpg
• prize.jpg

Download these files and save them in your lab5 folder. (Right-click and choose Save AS…)

Do not modify the HTML in any way. There should also be no need to edit the images.

Your task is to write curryout.css.

Use Responsive Web Design, i.e.:

• a liquid layout;
• media queries to adapt to different viewport sizes; and
• flexible images.

In wide viewports, the page should look roughly like this:

But in narrower viewports, it might look quite different (e.g. fewer columns). And in the very narrowest, it might look different again.

The colours I have used are black, white, #E1E6EA (the grey background), #970606 (the reddish colour) and #FE9D16 (the yellowish colour).

Deadline for Parts 1, 2 and 3: 1pm, Tuesday 13th November.

If you have named your files and folders correctly, your work will be collected automatically at that time by my software.