boat

Focus 7

fundamental web design

Hyperlinking

Wow! Now we know a lot of things about Web Design!

The last thing we are going to learn on this introductory course is hyperinking - how can we link to another webpage?

It is actually quite simple. We just need to figure out how to use the <a> tag.

<a></a>

Let's imagine that we want to click a word and then the browser will take us to a specific webpage. For example, I want to click the word email and the browser will take me to hotmail.com

<a>email</a>

<a href = "">email</a>

<a href = "https://www.hotmail.com">email</a>

Note!We can't just write www.hotmail.com. If the webpage is on the internet, we need to use http:// or https://

Task

Follow these steps and let's review everything we have learned.

1. Get organised

First, let's set up a project folder for Focus 7.

2. Download the html files

Download christmas.html and contact.html. It is a web page that you will work on.

Save them in your Focus 7 project folder.

Open christmas.html in a text editor.

3. Images

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

4. Text editor

Open christmas.html in your text editor.

Find the 3 comments about the images and use the <img> tag to put the three images into the web page.

4. Add Text #1

After the second image, copy and paste the following text into the webpage.

Make sure each sentence is in a new paragraph.

5. Add Text #2

After the third image, copy and paste the following text into the webpage.

Make sure each sentence is in a new paragraph.

6. Styling #1

In the style section of the webpage, introduce the following styles:

CSS style section guideline    description
p    font-size 16px, font-family tahoma and font-style italic.
h1    red color with a font-size of 48px. Also, style h1 elements must use the font-family palatino linotype
h2    red color and font-family tahoma.
h3    red color and font-family tahoma.
img    The images should have a solid, red border with a thickness of 3px. The images also need a border-radius of 12px.

7. Linking

Use an <a> tag so that when the visitor to the website clicks the first image, the visitor will be directed to https://www.noradsanta.org/

Use an <a> tag so that when the visitor to the website clicks the second image, the visitor will be directed to https://www.emailsanta.com/

Use an <a> tag so that when the visitor to the website clicks the third image, the visitor will be directed to contact.html, which should be in your project folder.

Challenge

In contact.html can you find a way to allow the visitor to return to christmas.html?

Extension Activity

The site requires a new page called Gift Ideas

The images required for the page are here:

The images need to be displayed in a table that has 4 rows and 2 columns.

The result of the table should look like this:

Design a page that will:

  • Display the images in a table as shown
  • Have a link back to christmas.html
  • have a title, any other information and some attractive styling - be creative!

Also, update the menu on christmas.html to link to the gift page.

SUBMISSION

Submit your project folder as instructed by your tutor.

Tags

browser file tags body save h1 html h4 h2 structure refresh h3 organised