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.
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 href = "">email</a>
<a href = "https://www.hotmail.com">email</a>
Follow these steps and let's review everything we have learned.
First, let's set up a project folder for Focus 7.
Save them in your Focus 7 project folder.
Open christmas.html in a 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.
After the second image, copy and paste the following text into the webpage.
After the third image, copy and paste the following text into the webpage.
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.|
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.
In contact.html can you find a way to allow the visitor to return to christmas.html?
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:
Also, update the menu on christmas.html to link to the gift page.
Submit your project folder as instructed by your tutor.