Computer Science LearnITWithMrC ⛯ Year 7 Year 8 Year 9 GCSE
Responsive image

Lesson 2 - Creating a webpage

Overview
Flight Path
Learning Objectives
0 results forGuest
IDSkill_name
 4 I can create simple hyperlinks
 5 I can use different tags to create my page
 3 I can use HTML tags to add functionality (e.g. links, images) to my website
 7 I can create a multipage website with pages linked together

🏁 Learning Objective 4 :- I can create simple hyperlinks


HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML element.

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

Example

<a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_w3schools">Visit our HTML tutorial</a>
Try it Yourself »

The href attribute specifies the destination address (https://www.w3schools.com/html/) of the link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.

Exercise - Adding links

See if you can add hyperlinks to your new website page like the ones below

My Web Links

Visit our Html Tutorial
Visit LearnITWithMrC
Look At the latest News
Go to the School Website

Scratch Extension Activity - Target attributes

Now try out the following to understand basic difference in few options given for target attribute
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
  <p>Click any of the following links</p>
  <a href="/index.php" target="_blank">Opens in New</a> |
  <a href="/index.php" target="_self">Opens in Self</a> |
  <a href="/index.php" target="_parent">Opens in Parent</a> |
  <a href="/index.php" target="_top">Opens in Body</a>
</body>
</html>
Opens in New | Opens in Self | Opens in Parent | Opens in Body

Update your objectives

control

🏁 Learning Objective 5 :- I can use different tags to create my page


Create your first website

With what you learned in the previous learning objectives, you are now only minutes away from making your first website.

How?

We have looked at how we can style the elements on a web page we are now going to create our own web page using Notepad.

control control

Exercise - Create a web page

Copy the text below into notepad
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

</body>
</html>

Now save your web page in a folder called 'Web Design' using 'All files', as a file called index.html

control

thumb Extension Question

Now try style your web page like you did previously

control


See if you can see what these additional tags do
  • <hr>
  • <br>
  • <i>
  • <b>
  • <li>
  • <div>
  • <span>

    • Update your objectives

    control

    🏁 Learning Objective 6 :- I can use HTML tags to add functionality (e.g. links, images) to my website


    Adding elements to a web page

    Click on the image below to go to the codeacademy page

    Responsive image

    Update your objectives

    control

    🏁 Learning Objective 7 :- I can create a multipage website with pages linked together


    Creating a navigation bar in Dreamweaver

    Update your objectives

    control

    0 results forGuest
    Recent Comments

    Teacher Date: 2025-10-31


    Guest