Insert Links and Images: SPTVE: ICT 10 (Web Programming)

DEPARTMENT OF EDUCATION
REGION III
Schools Division of Cabanatuan City
Maharlika Highway, Cabanatuan City
Insert Links and Images

SPTVE: ICT 10 (Web Programming)
Module 3 (Quarter 2: Week 4-5)
Writer and Layouter:
10
Jayson M. Santos,LPT (Teacher I, Camp Tinio National High School)
LEARNING RESOURCE MANAGEMENT AND DEVELOPMENT SECTION

Project EL AR: Enhance Learning thru Adequate Resources
GUIDE FOR THE LEARNER, PARENTS,
GUARDIANS AND LEARNING FACILITATOR
To You, Learner:
Welcome to ICT 10 (Web Programming) Self-Learning Module (SLM) on insert link and
images in HTML . This module was made to give you with fun and meaningful time for guided
and independent learning at your convenience. You will be able to process the contents of this
Module while being an active learner.
To You, Parent/s, Guardian/s and Learning Facilitator/s:
This Module was collaboratively developed and reviewed by the teachers, school heads
and supervisors of DepEd Division of Cabanatuan City to assist you in helping the learners meet
the standards set by the K to 12 Curriculum while overcoming their different constraints in
schooling. As a facilitator, you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage their own
learning. Furthermore, you are expected to encourage and assist the learners as they do the
tasks included in the module.
This module deals with skills and knowledge required to understand the issue of child
sexual exploitation by tourists and apply simple protective measures which are applicable and
appropriate for staff working in the hotel and travel industries. This will be the source of infor-
mation for them to acquire knowledge and skills in this particular competency independently
and at their own pace, with minimum supervision or help from their Teacher. It covers the infor-
mation and different activities to develop and assess the desirable values, skills and under-
standing of the learners to acquire the competency in promoting products and services to cus-
tomers . The goal of this module is the development of practical skills. To gain these skills, you
must learn the concepts and theory. Provisions for practical applications to real life situation are
also included for lifelong learning. This self-learning module designed to accomplish for one
week.
OBJECTIVES
1. Define what is link and image in HTML;

2. Identify the HTML tags related to link and image;
3. Use link and image html tags.
COMPETENCY
Insert link and images in an HTML document.
2
WHAT DO YOU ALREADY KNOW?
Pre-Test Direction: Choose the letter of the best answer and write your answer on separate sheet
of paper.
1. What allows users to click their way from page to page?

A. Link C. Linkages
B. Line D. Like
2. What HTML tags define a hyperlink?
A.<href> C.<a>
B. <body> D. <src>
3. What is the most important attribute of the <a> element which indicates the link’s destination?
A.src C.width
B. href D.loc
4. What attribute specifies the where to open the linked document?
A.target C.href
B. src D.loc
5. The following are examples of absolute URLs except________.
A.https://www.w3.org C.https://www.google.com
B. https://www.fb.com D. html_images_tree.asp
6. What HTML tag is used to embed an image in a web page?
A.<href> C.<a>
B. <img> D. <src>
7. What attribute specifies the path to the image?
A.<href> C.<src>
B. <loc> D. <a>
8. What attribute specifies the width and the height of an image?
A. href B. src
C. size D. style
9. To point to an image on another server, you must specify an _________ in the SRC attrib-
ute.
A. folder location B. absolute (full) URL
C. file location D. relative URL
10. What attribute provides an alternate text for an image?
A. alt B. src
C. href D. alternate
3
WHAT YOU NEED TO KNOW
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
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. A link can be an image or any other HTML element.
HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to W3Schools.com:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.facebook.com/">Visit
facebook.com!</a></p>
</body>
</html>
By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
4
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you
must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.facebook.com/" target="_blank">Visit Facebook!</a>
<p>If target="_blank", the link will open in a new browser window or tab.</p>
</body>
</html>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"

style="width:42px;height:42px;"></a>
</body>
</html>
5
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
<!DOCTYPE html>
<html>
<body>
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</
p>
<button on-
click="document.location='default.asp'">HTML
Tutorial</button>
</body>
</html>
Link Titles
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.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Link Titles</h2>
<p>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.</p>
<a href="https://www.facebook.com/html/" ti-

tle="Go to Facebook">Visit our HTML Tutorial</a>
</body>
</html>
6
HTML Images
Images can improve the design and the appearance of a web page.
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image
from a web server and inserts it into the page. Therefore, make sure that the image ac-
tually stays in the same spot in relation to the web page, otherwise your visitors will get a
broken link icon. The broken link icon and the alt text are shown if the browser cannot
find the image.
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image
content, so users who cannot see the image
gets an understanding of what the image
contains:</p>
<img src="img_chania.jpg" alt="Flowers in
Chania" width="460" height="345">
</body>
</html>
7
The alt Attribute
The required alt attribute provides 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).
The value of the alt attribute should describe the image:
<!DOCTYPE html>
<html>
<body>
<p>The alt attribute should reflect the image con-

tent, so users who cannot see the image gets an
understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania"
width="460" height="345">
</body>
</html>
Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.
<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */
img {
width: 100%;
</style>
</head>
<body>
<h2>Width/Height Attributes or Style?</h2>
<p>The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets
the width to 100%.</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<p>The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in
the head section:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
8
Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in the src attribute:
<!DOCTYPE html>
<html>
<body>
<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You

must then include the folder name in the src attribute:</
p>
<img src="/images/html5.gif" alt="HTML5 Icon"

style="width:128px;height:128px;">
</body>
</html>
9
WHAT HAVE YOU LEARNED?
Post-Test
Direction: Write TRUE if the statement is correct and FALSE if the statement is incorrect.
Write your answer on separate sheet of paper.
1. Linkages allows users to click their way from page to page.

2. <href> HTML tags define a hyperlink.
3. href is the most important attribute of the <a> element which indicates the
link’s destination.
4. target attribute specifies the where to open the linked document.
5.html_images_tree.asp is an example of absolute URL.
6.<img> is an HTML tag used to embed an image in a web page.
7. <src> is an attribute tahtspecifies the path to the image.
8. style attribute specifies the width and the height of an image
9. alt attribute provides an alternate text for an image.
10. If you have your images in a sub-folder, you must include the folder name in
the src attribute.
.
ENRICHMENT ACTIVITY 1
Direction: On a separate sheet of paper, provide the use of the following tags/
attributes. (2 points each)
1.<a> 11._self
2.href 12._blank
3.target 13._parent
4.src 14._top
5.title 15.style
6. button on-click
7.alt
8.<img>
9. width
10.height
10
ENRICHMENT ACTIVITY 2
Direction: Using a mobile device or PC/Laptop, write the HTML codes of the image
below. Please provide the notepad/notepad ++ and Google Chrome Screenshot.(30
points)
1.Create some links to various search engines and facebook (Google, Yahoo, Face-
book and Instagram).
2. Create a link to your facebook account that should open in a new window.
3.Display five different images. Each image should have a title and alternate text.
4.Display an image that has a border of size 2, a width of 250, and a height of 250.
5.Display an image that when clicked will link to a search engine of your choice
(should be opened in a new window).
9
10
https://www.w3schools.com/
Royalty-Free Pictures and Illustrations
https://www.w3schools.com/
Online Source
REFERENCES
What Do You Already Know ? What Have You Learned?
1.A
2.C 1.False
3.B 2.False
4.A 3.True
5.D 4.True
6.B 5.False
7.c 6.True
8.D 7.True
9.B 8.True
10.A 9.True
ANSWER KEYS
Inserting Links and Images
This learning module focuses on inserting links and images in an

HTML document.
<!DOCTYPE html>
<html>
<body>
<p>The alt attribute should reflect the image con-

tent, so users who cannot see the image gets an
understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania"

width="460" height="345">
</body>
</html>
DEPARTMENT OF EDUCATION Region 3 Division of Cabanatuan City

Curriculum Implementation Division (CID)
Learning Resource Management and Development System (LRMDS)
This self-learning module (SLM) is developed by the SDO Cabanatuan City CID-LRMDS Team under
Project EL AR: Enhanced Learning thru Adequate Resources.
Cover and page elements illustrations by Jan Carl B. Briones ● Project EL AR logo by Gemmarie G. Rivas

Insert Links and Images: SPTVE: ICT 10 (Web Programming)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Insert Links and Images: SPTVE: ICT 10 (Web Programming)

Uploaded by

Copyright:

Available Formats

DEPARTMENT OF EDUCATION

Insert Links and Images

Writer and Layouter:

LEARNING RESOURCE MANAGEMENT AND DEVELOPMENT SECTION

1. Define what is link and image in HTML;

Insert link and images in an HTML document.

1. What allows users to click their way from page to page?

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

HTML Links - Syntax

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

This example shows how to create a link to W3Schools.com:

By default, links will appear as follows in all browsers:

A visited link is underlined and purple

An active link is underlined and red

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_top - Opens the document in the full body of the window

HTML Links - Use an Image as a Link

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"

<a href="https://www.facebook.com/html/" ti-

The value of the alt attribute should describe the image:

<p>The alt attribute should reflect the image con-

Image Size - Width and Height

/* This style sets the width of all images to 100%: */

<h2>Width/Height Attributes or Style?</h2>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

<h2>Images in Another Folder</h2>

<p>It is common to store images in a sub-folder. You

<img src="/images/html5.gif" alt="HTML5 Icon"

1. Linkages allows users to click their way from page to page.

This learning module focuses on inserting links and images in an

<p>The alt attribute should reflect the image con-

<img src="img_chania.jpg" alt="Flowers in Chania"

DEPARTMENT OF EDUCATION Region 3 Division of Cabanatuan City

You might also like