10 Department of Education

National Capital Region

SCHOOLS DIVISION OFFICE
MARIKINA CITY

TLE-Information and Communication Technology

Web Development
Second Quarter-Module 1
Images

Writer: Donnalynn W. Mercado

Illustrator:
Cover Illustrator: Christopher E. Mercado

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
 Studies show that people remember 80% what they see and only 20% what they
read. In fact, there’s research that suggests that 65% of people are visual learners.
MIT also found that the human brain can process images in as little as 13
milliseconds. These and many other statistics favor the idea that images are powerful
means of communication. Perhaps, their most important function is that they remove
language barriers, as they are easily understood by everyone in the world.
On the Internet, images are used for all kinds of reasons: to enhance websites, to
illustrate stories, in ad displays, to present products or services, as stand-alone “a
picture is worth a thousand words” meaning-rich tools, and sure, on social media.
After going through this module, you are expected to:
1. Familiarize with image tag used in a web page;
2. Apply attributes to img tag;
3. Use img tag and attributes to create a web page with images.
4. Create a web page with images.

Let us see what you already know! Answer the following questions by choosing the
letter of the word or group of words that corresponds to given statement. Write your
answer in the answers in a separate sheet of paper.

1. Which image attribute specifies the name and location of an image?

A. align B. hspace C. img D. src
2. Which image attribute indicates the alternative text or the text that appears when
the mouse hovers the image and the image cannot be displayed?
A. align B. alt C. name D. src
3. What image attribute sets the space in pixels above and below the image?
A. alt B. height C. hspace D. vspace
4. It indicates the image to be loaded before the actual image is loaded.
A. align B. hspace C. lowsrc D. vspace
5. An image attribute that adds a line around an image.
A. alt B. border C. lowsrc D. width
6. If you want to place a text in the middle portion of an image, what attribute should
you use?
A. align B. alt C. hspace D. vspace
7. What is the file extension name of an animated image?
A. bmp B. gif C. jpg D. png
8. The tag that defines a clickable area inside an image-map
A. <area> B <img> C. <map> D. <picture>
9. When the image is a separate folder, which of the following format of calling the
image is correct?
A. <img src=”image.jpg”> C. <img src=”folder/image.jpg”>
B. <img src=”folder-image.jpg”> D.<img src=”C/folder/image.jpg”>
10. What is the tag use when you want ot use an image as hyperlink??
A. <a></a>; B. <href>; C. <link> D. <src>

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
After reading and carefully answering the pre-assessment test, you might have ideas
of what you will be dealing with in this module.

Lesson 1 Images
Images are an integral part of the content strategy of any website. The best
images are set above the fold and act as both eye candy and informational tools.

Activity 1:
For Online Learners: Watch this video.
https://www.youtube.com/embed/MELKuexR3sQ

For Modular Learners: Explore at least 2 different magazines in your

home. Take a closer look at the pictures in the magazines. Imagine
those magazines without the pictures.

Answer the following questions in a sheet of paper.

Guide Questions:
1. What is the role of images in a design?
2. What are the things to consider in using images in a design?
3. What is a stock?
4. What does authentic images mean?
5. What are the Do’s and Don’ts in choosing an image?
6. What are the 3 things to consider in choosing an image in terms of Technical aspect?
7. In terms of legality, what are the things to consider in choosing an image?
8. What are the 2 types of images?

Web standards rise continually, changing our expectations towards a website.

We want to find information quickly, we want to socialize, we want to get entertained,
and we want all of it to happen on a personal level. The key to designing efficient,
attractive, and personal websites is the use of a wide range of engaging media.

What kind of media? Basically, anything you can use on your website to convey
a message, such as videos, audio, graphics, or images. While any of these can help
to improve the user experience, the media you choose should be appropriate for your
main target group with all their expectations, abilities and limitations. Also consider
the devices people will use to access your site and technical limitations that come
with it.

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
 For example, videos can be a great way to get your visitors engaged. However,
their device might not fulfill the technical requirements to watch the video. The same
with audio. Imagine you offer some very informative audio tour on your site. People
who are not in their office by themselves, or who don’t have their headphones at
hand will most likely not listen to it.

For now, let us focus on a medium that always works to boost the user
experience — if used with reason, of course: Images.

10 Things to Know About Images in Web Design

1. People prefer images over text.
• Visual information is very convenient. Instead of
reading a lot of text, which takes time and effort, we
rather quickly scan an image or a graph.
• Images can trigger all sorts of emotions and
memories, which makes them very engaging.
• A lot of people can better memorize visual information and often it’s easier to
share than written content.
• Images can cross language barriers a lot better than text can.
2. Images draw attention & trigger emotion.
• Images can help you to attract attention and to guide
your visitor’s line of sight. They can be of great value
when it comes to presenting important information.
• Images a great emotion trigger that you can use to
draw your visitors in and get them engaged in your content.
3. Logos help users to orientate.
• it helps visitors to identify a website and gives them the
safe feeling that they are where they want to be.
• When showing your logo on every page of your site your
visitors can be certain they have not yet left your site.
Try to always position the logo in the same spot.
4. Limit Large Images Above the Fold
• Give people a reason to scroll and look at the rest
of your site. If your images take an active role in
this guidance, then make them as big as you
want. However, make sure they do not push more
important, informative, or catchy content below
the fold.
5. Use meaningful images.
• Keep in mind that you should only use images
that somehow support your content. Be it
because they show some relevant information,
because they proof a point you make
elsewhere, or because they convey a feeling
that supports your message.

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
6. Show real people.
• Human images are a very effective way to get
your visitors engaged. We like it to recognize any
human elements on the Web. It makes us feel
like we are connecting with other humans, not
only with some coded website. Especially faces
of other humans draw our attention and not
only that, but we also even follow their line of sight.
7. Background images create atmosphere.
• give your visitors an immediate impression of
what your site is about.
8. Do not let graphics look like banner ads.
• People do not like ads and over the years they
have successfully learned to ignore them. So,
when placing images in banner form either at the top of your site, or at the
side, chances are good that people will simply not see them.
9. Label clickable images.
• While good text links are already descriptive themselves, a lot of time images
are not self-explanatory and therefore need labeling to tell people where they
link to.
10. Ensure that Images Do Not Slow Down Your Site.
• If people access your website from mobile, or if they use a connection that
does not yet meet our usual standards, it is important that you optimize your
images. You can for example optimize their size or use thumbnail images to
preview larger ones.

While a lot of different media can be used to enhance the user experience of a
website. images are still the most common and most universal medium. We
like images because they are convenient, easy to engage with and easy to
memorize. If used with reason, images can attract and guide your visitors’
attention, trigger emotions, and build trust.

A. Images
• Images can be a powerful force in design. No matter what the subject, we are
naturally drawn to them. From beautiful, high-definition photos to carefully
crafted graphics, they are usually the first thing we see.
• The HTML <img> is an empty tag that defines an image. It contains
attributes only and does not have a closing tag.
• src= the one that specifies the name and location of the image.

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
 ATTRIBUTE TABLE FOR <img>
Attribute
Definition Values
Name
File name of the image
src Indicates the image to be inserted. file (path can be
included)
Indicates the alternative text or the text that
alt appears when the mouse hovers the image and the Any text
image cannot be displayed.
Assigned name to the image. The name can be used
name Any text
for various purposes.
border Indicates the width of the border around the image Number of pixels
Indicates the height of the image in pixels. If not Number of pixels or
height the actual height is specified, the image will be number express in
scaled to fit. percent
Indicates the width of an image in pixels. If not the Number of pixels or
width actual width is specified, the image will be scaled to number express in
fit. percent
align Indicates the horizontal alignment of image. Left, right, center
Sets the vertical space in pixels above and below
vspace Number of pixels
the image.
Sets the horizontal space in pixels besides the
hspace Number of pixels
image.
Indicates the image to be loaded before the actual File name of the image
lowsrc image is loaded. Smaller images or of lower file (path can be
resolution is usually used here. included)
TEACHER’S NOTE:
The src attribute
• Images can improve the design and the appearance of a web page.
• It refers to the source of the image. It specifies the name and location of the
image.
• This attribute must be present at all times.
Example:
<img src=”trees.jpg” alt=”picture of a tree”>

Pointers in writing the value for src attribute,

1. If the image and the HTML file is saved in only one folder, just write the file
name of the image followed by a dot and the extension name.
Ex. <img src=”trees.jpg>

2. If the image to be used is located in a different folder, you may call the folder
followed by a slash(/) and the complete name of the image file.
Ex. <img src=”foldername/trees.jpg”>

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
3. Always make sure that you write the correct file extension name of the image.
To know its extension name, right click the image to be used and choose
property.

4. If the source of the image is on the internet or in a server, you have to write the
complete URL or web address.
Ex. <img src="https://www.google.com/images/colors_green.jpg"
alt="google.com">

Image Formats Supported By HTML

• (.jpg) JPEG – Joint Photographic Experts Group. It supports a million of
colors.
• (.gif) GIF – this is for animated images. It supports up to 256 colors.
• (.png) PNG – this is usually an image with transparent background. It
supports a million of colors.
• (.bmp) Bitmap – supports a million of colors. It is not compressed that’s why
it provides the best quality for image at the cost of the file size.

The alt attribute.

• It 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.
Example:
<img src="img_chania.jpg" alt="Flowers in Chania">
• If a browser cannot find an image, it will display the value of the alt
attribute.

Things to Remember:
Images are not just for decoration. In design, they are the hook that
draws the viewer in. Compelling visuals can help you connect with the
audience and make a strong impression—before they have even read a
single word.

B. The Image Size- Width and Height

• The width and height attributes set the width and the height of an image.
• The value sets here are numbers followed by px or %

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
C. Specifying the Background Image
To add an image as background to a page use the syntax below.
Syntax: <body background=“value”>

Pointers to consider in choosing a background Image.

• Use an image that will not distract the text and main content of the image.
• Do not use large image file because it will take a long time to load your page.
• The background should not show boundaries and grids when tiled.

D. Adding borders around the image

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
Adding space around the image
• hspace and vspace indicate the amount of horizontal and vertical space to put
between the table and surrounding text. They must be used in conjunction
with ALIGN=LEFT or ALIGN=RIGHT.
• The vspace and hspace attributes of the IMG element adds white space
around an image.

Example Code:
<img src="example.jpg" alt="Example" vspace="5" hspace="5">

Example:

space: 30px
<p>
<img src="image/example.jpg" alt="Example" align="left"
vspace="30">
some text some text<br>some text some text<br>some
text ...
</p>

hspace: 30px
<p>
<img src="image/example.jpg" alt="Example" align="left"
hspace="30">
some text some text<br>some text some text<br>some text
...
</p>

vspace: 30px, hspace: 30px

<p>
<img src="image/example.jpg" alt="Example" align="left"
vspace="30" hspace="30">
some text some text<br>some text some text<br>some text
...
</p>

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
Wrap Text Around Image using HTML
• In order to have the text wrap along the right side of the image, you have to align
the picture to the left:
<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

• If you want the text to appear on the left and the image to appear at the far
right, just change the align parameter to “right”.
<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

Online Learners: Open your

notepad++ or whatever HTML
editor you have. Create a code for
a single web page that looks like
the one on the left. You can
download similar images. Save
your file as html together with the
images used. Create your folder
in the google drive provided by
your teacher then upload your
html file and all images used in
that folder.

Modular Learners: Use android

phone and create a source code
for a single web page shown
above. If you do not have devices
to use, you can just write your
source code in one whole sheet
of paper. Note the proper
indention in your source code.
Your grades rely on the neatness
of your code and the correctness
of the tags and attributes used.

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
Write a 2-paragraph essay on the importance of images in a website. Base your
composition from your own opinion and not what is written in these modules.

__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________

ONLINE LEARNERS: Practice making a source code for a paragraph stating your 4
most beloved hobby. Add images about that hobby/interest wrap the text around
the image. Upload the html files and all images used in one folder in the google
drive. (You must create your own folder inside the Additional Activities folder.
MODULAR LEARNERS: You can do the same as the “What I Can do activities. Write
a source code for your 4 most beloved hobby/interest. Use one whole sheet of paper
if you do not have any devices to use for coding.

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
 I. Multiple Choice: Choose the letter of the word or group of words that corresponds
to each statement.
1. Which image attribute specifies the name and location of the image?
A. align B. hspace C. img D. src
2. Which image attribute indicates the alternative text or the text that appears
when the mouse hovers the image and the image cannot be displayed?
A. align B. alt C. name D. src
3. Which image attribute sets the space in pixels above and below the image?
A. alt B. height C. hspace D. vspace
4. Which of the following is the correct code for a page with a PNG background
image with a file name beach3?
A. <body bgcolor=“beach3.png></body>
B. <body background=“img src beach3.png></body>
C. <body background=“beach3.png”></body>
D. <body bgcolor=“src beach3.png></body>
5. You want to include beach3 jpeg image in your page. What will be the correct
code?
A. <img background=“beach3.jpg></img>
B. <img src=“beach3.jpeg></img>
C. <img src=“beach3.jpeg”>
D. <img src=“beach3.jpg”>
6. Which of the following is a format for animated images?
A. bmp B. gif C. jpg D. png
7. Which attribute places the image on the left, right or on the center?
A. align B. border C. hspace D. vspace
8. In order to have the text wrap along the right side of the image, you have to
align the picture to the:
A. Center B. left C. right D. justify
9. If the image to be used is in a different folder, you may call the folder followed
by a ______ and the complete name of the image file.
A. , B. : C. / D. ;
10. What attribute is use for setting the white spaces on the left and right of
an image?
A. alt B. height C. hspace D. vspace

https://www.carmelon-digital.com/articles/the-importance-of-images-on-a-
website/
https://usabilla.com/blog/10-things-to-know-about-images-in-web-design/
https://www.tagindex.net/html/img/img_space.html
https://helpdeskgeek.com/how-to/image-text-wrap-css-html/

IMAGES RESOURCES:
https://www.almanac.com/content/november-birthstone-color-and-meaning

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE
 Development Team
Writer: Donnalynn W. Mercado
Editors:
Marites G. Cerojales (Subject Coordinator, PHS)
Uriel B. Teodoro (Principal, SNNHS)
Lionel Villon (Subject Coordinator, KNHS)

Reviewer: Joseph T. Santos EPS -TLE/EPP

Cover Illustrator: Christopher E. Mercado (JDPNHS)

Management Team

Sheryll T. Gayola
Assistant Schools Division Superintendent
OIC, Office of the Schools Division Superintendent

Elisa O. Cerveza
Chief, CID
OIC, Office of the Assistant Schools Division Superintendent

Joseph T. Santos
Education Program Supervisor-TLE/EPP

Ivy Coney A. Gamatero

Education Program Supervisor– LRMDS

For inquiries or feedback, please write or call:

Schools Division Office- Marikina City

191 Shoe Ave., Sta. Elena, Marikina City, 1800, Philippines

Telefax: (02) 682-2472 / 682-3989

Email Address: [email protected]

City of Good Character

DISCIPLINE • GOOD TASTE • EXCELLENCE