IT6012 Web

Fundamentals
HTML: Hyperlinks and Images
Hyperlinks
• Links are one of the most important features of the web, as they
allow you to move from one page to another, enabling the very
idea of browsing or surfing.
• You can have links that:-
• Link from one page to another on the same site
• Link to an external website
• Link to an email address
• Link from one part of a page to another part of the same page
• Link from one part of a page to another part of another page

2
Hyperlinks: Links to pages in the same site
• The <a> tag defines a hyperlink on the enclosed text. The href
attribute value should be the file name of the page we want to link
to:

<a href=“page1.html”> Home</a>

Target Attribute:
Attribute Description

_blank Opens the linked document in a new window or tab.

Opens the linked document in the same frame or window as

_self
the link. (Default behavior)

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

For further Notes visit:

https://www.w3schools.com/html/html_links.asp 3
Hyperlinks: Links to pages in the same site
• We can use the <ul> and <li> tags to create a list of

Links:

As viewed in browser:

4
Hyperlinks: Links to other sites
• To link to another site, the href attribute value is the address of the
site we wish to link to:

<a href=“http://www.imdb.com”> Internet Movie DB </a>

As viewed in browser:

5
Hyperlinks: Custom links
Link to an email address

To link to an email address the attribute value must begin with

mailto: and then follow with the email address:

<a href="mailto:[email protected]">

Link to download

<h3><a href="Files\Employees.xlsx"> Download</a> sample MS

Excel spreadsheet </h3>

6
Hyperlinks to sections on the same page

• A. Define the section

<a name=“footnotes”>Footnotes and references”</a>

• B. Create the link to it

<a href=“#footnotes”>Footnotes</a>

7
Hyperlinks: Links to other parts of the page
• When a page is very lengthy it can be useful to have hyperlinks to
other parts of the same page. To set this up we first create a target
around the text we want to link to, using the name attribute of the
<a> tag, e.g. (assuming the Bibliography in a page is very far
down):
<a name= “bibliography”>Bibliography</a>

• Then we create a hyperlink at the top of the page where the href
value is the target name prefixed with a hash symbol, e.g.
<a href= “#bibliography”>Bibliography</a>

When the user clicks the Bibliography hyperlink at the top, the page
will jump to the Bibliography target at the end of the page

8
Lab 4
• Extend your index.html page as shown. Create a hyperlink on Step
1 as shown to link to location.html.
• Add the Sources section as shown with an ordered list of links to
external sites.
• Add an email link as shown, use your own name and email address

9
 Images • To add an image to a web page we use the <img> tag. The src
attribute value is the file name of the image. Remember that
<img> is an empty tag:
<img src=“flower.jpg”>

• We can also use height and width attributes to set the size of
the image in pixels:
<img src=“flower.jpg” height=“200” width=“200”>

Professional practice: we should always keep all our images for a

site in one subfolder of the site folder called images:

<img src=“images/flower.jpg” height=“200” width=“200”>

1
0
 Tutorial 2: Positioning text and
• Using code like the example below we can see how we can
images
add text to an image in different ways. Try this out. Create a
folder called Tutorial2 and an images subfolder and use the
pictures in Moodle.

1
1
 Tutorial 2
• Note the positioning of text in relation to pictures:

1
2
 Tutorial 2: Image as a hyperlink
• Using code like the example below we can see how we can
display an image as a hyper link. Try this out.

1
3
 Tutorial 2: Embedding pictures in
text
• One way of making your pages more interesting is to vary the
positioning of your pictures in relation to the text. This can be
achieved by setting the style of the image to float left or right:

style = “float:left”
style = “float:right”

For example, we can amend our previous html to float the last
picture to the left. Try this out.

1
4
 Tutorial 2: Embedding pictures in
text
• Note the positioning of text in relation to pictures:

1
5
Lab 5
• Create an images folder in your HouseBuilder folder. Add a line
and the picture house.jpg (in Moodle) to index.html as shown:

1
6
Lab 5
• Next extend the page as shown using finishConcrete.jpg (in
Moodle) Create a hyperlink from the finishConcrete.jpg picture to
the site http://www.wikihow.com/Finish-Concrete

1
7
Lab 5
• Next create a hyperlink called Sources as shown which links to the
Sources and Citations title created previously on the same page:

1
8
Lab 5
• Next extend your location.html page as shown using the text and
picture in Moodle and floating the picture to the right:

1
9
Thank you