boat

Timed Review

50 minute challenge

Web Design - Timed Challenge

You are a web designer. Today you are going to try to make a webpage for a Tourism Company.

The company needs a homepage called orkney.html.

To complete this activity, you will need these files:

click me

click me

click me

Task

This a 50 minute challenge. Stay focussed. Communicate effectively with your team. Don't give up. Don't get distracted!

Follow these steps.

1. Get organised

First, let's set up a project folder. Create a new folder called Orkney in your Web Design folder:

2. File organisation

Download webpage and move it to your project folder.

Download the 3 images and save them in your project folder.

Your project folder should now look like this:

 

3. Splitscreen

Open the webpage in a browser and a text editor.

Can you figure out how to see both of them using splitscreen.

 
Use <h1> tags to put the text The Orkney Islands at the top of the web page.
 
Use the <img src = ""/> tag to insert the image orkneyHeader.jpg under the title.
 

Use <p> tags to place the following text under the image.

Each sentence should be on a new line.

 
Use the <img/> tag to insert the image orkneyVillage.jpg under the text.
 

Use <p> tags to place the following text under the image.

Each sentence should be on a new line.

 
Use the <img/> tag to insert the image orkneyIsland1.jpg under the text.
 
Use <p> tags to place the following text under the image. Each sentence is a new paragraph.
 

Find these words and use tags to make them bold, italic or underlined:

  • Mainland
  • lantern
  • lighthouse
  • lochs
  • parapet
 

In the <style> section, include the following CSS.

h1

color:red;

font-size:48px;

p

color:blue;

font-family:arial;

img

border: white 4px dashed;

border-radius: 10px;

body

background:green;

 

Use Google Maps to find Orkney. Create a nice screenshot and save it with a .jpg or .png file extension in your project folder. Give the image file an appropriate name.

Use the <img/> tag to put the map at the bottom of the webpage.

 

Add any additional information using <tags> or CSS to this web page?

Submission

Well done! You have created a webpage for a Tourism Company. Submit your project folder as instructed.

Exemplars

Tags

browser file tags body save h1 html bold italic structure refresh underlined organisedfolder