Computer Fundamentals Lab Manual

LAB No: 10
Inserting Hyperlinks, Images and Buttons in HTML

Aim:
 To trains the student for inserting hyperlinks, images and buttons in HTML

Lab Learning Outcome:

DEMONSTRATE problem solving skills by developing computer programs.

Assessment Rubric:
Performance
Rubric
Excellent (4) Good (3) Average (2) Weak (1)
Program compiles and Program compiles Program compiles, but Program does not
contains no evidence of and is free from contains errors that compile or (in a
misunderstanding or major syntactic signal dynamic
Program misinterpreting the misunderstandings misunderstanding of language)
Syntax syntax of the language. but may contain non- syntax contains
standard usage or typographical
superfluous elements. errors leading to
undefined names.

Introduction:
In computing, a hyperlink, or simply a link, is a reference to data that the reader can follow by
clicking or tapping. A hyperlink points to a whole document or to a specific element within a
document. Hypertext is text with hyperlinks. The text that is linked from is called anchor text. A
software system that is used for viewing and creating hypertext is a hypertext system, and to
create a hyperlink is to hyperlink (or simply to link). A user following hyperlinks is said to
navigate or browse the hypertext.
The document containing a hyperlink is known as its source document. For example, in an online
reference work such as Wikipedia, or Google, many words and terms in the text are hyperlinked
to definitions of those terms. Hyperlinks are often used to implement reference mechanisms such
as tables of contents, footnotes, bibliographies, indexes, letters and glossaries.
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.

Lab Tasks:
Using the post lab documentation perform the following tasks

1. Hyperlinks are defined with the HTML <a> tag:

The href attribute specifies the destination address. Build a simple webpage with a hyperlink to
visit Google.com.
Hint: insert complete address of the website.

Electrical Engineering Department, UET Peshawar, Jalozai Campus

 Computer Fundamentals Lab Manual

Display the output as web page

2. Attribute href can also be used to insert local links (links within the same website). Local links
are inserted (without https://www....).
Build two webpages namely home.htm and link.htm. (Insert contents of your own choice in both
pages). Now insert link.htm as a local link in the home.htm page.

Display the HTML Code for this task

3. The target attribute specifies where to open the linked document. The target attribute can have
one of the following values:
a. _blank - Opens the linked document in a new window or tab
b. _self - Opens the linked document in the same window/tab as it was clicked (this is
default)
c. _parent - Opens the linked document in the parent frame
d. _top - Opens the linked document in the full body of the window

Build a simple HTML web page with two links for Google.com. Both links must be inserted with
target attribute. Moreover, one link will open the website in a new window or tab and another link
will open the website in the same window or tab.

Display the HTML Code for this task

4. The title attribute specifies extra information about an element. The information is most
often shown as a tooltip text when the mouse moves over the element.

Display the output as a webpage

5. Images can improve the design and the appearance of a web page. The <img> tag defines
an image in an HTML page. The <img> tag has two required attributes: src and alt. src
specifies the URL of an image whereas alt specifies an alternate text for an image, if the
user for some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).. Other attributes for <img> can be found at
https://www.w3schools.com/tags/tag_img.asp

Insert a simple figure named pic_trulli.jpg in your webpage. The image must be placed in
the same folder as that of the webpage document.

Display the output as a webpage

Electrical Engineering Department, UET Peshawar, Jalozai Campus

 Computer Fundamentals Lab Manual

6. You can use the style attribute to specify the width and height of an image.

However, we suggest using the style attribute. It prevents styles sheets from changing the
size of images. Change height and width of the image using both attributes.

Display the output as a webpage

7. HTML allow the user to insert animated images as well. Use the follow code to insert an
animated image in HTML web page.

8. Images can also be displayed as links. To use an image as a link, put the <img> tag inside
the <a> tag:

Insert an image as a link to next page.

Display the HTML Code for this task

9. Use the CSS float property to let the image float to the right or to the left of a text.

10. You can also insert a clickable button in HTML by using the following tags and
attributes.

Display the output as a webpage

Electrical Engineering Department, UET Peshawar, Jalozai Campus