Computer 9 Quarte 3 Module 3

Republic of the Philippines
Department of Education
Cebu City Division
Salazar Colleges of Science and Institute of Technology
9
Computer
Quarter 3 – Module 3 :
Adding Images
Prepared by:
Alvin A. Selloria
Computer Teacher
Cebu City Division
Introductory Message:
For the learners:
Welcome to the Computer 9 Alternative Delivery Mode (ADM) Module 3 on Adding Images.
As a student, the success of your education lays in your hands. With the new
normal education, active learners or students are expected in acquiring the new set-up of
education where they need to use the different learning resources in continuing the
education. The self-learning module is designed for the learners to work independently in
their own time and pace. There are also self-learning activities created to enhance the
knowledge and skills in order to meet the standards of the 21st century learner.
The following are some reminders in using this module:
use separate paper in answering the different activities
 read the instructions very carefully
 observe fairness and dignity in the performance tasks as well as the assurance of
your responses.
 before proceeding to the next activity, finish the task at hand
 return this module on time to your teacher.
For any inquiries and concerns about this module you can approach your subject teacher.
Cebu City Division
What I need to Know

This module is specifically crafted to focus on Process and Delivery
enriched with hands- on activities that will assess your level in terms of skills and knowledge.
Learning procedures are divided into different sections such as: What to Know, What to
Process, What to Reflect and Understand and What to Transfer. Examine and perform the
suggested tasks to practice developing a sustainable program, prioritizing needs and building
vision.. The scope or lessons of the module is based on the standards and uses a simple
language level to avoid confusion to the learners or students in continuing their education.
This module contains:
Lesson 7: Adding Images
After going through this module, you are expected to:

 Understand how to place images on your web page
 Identify the different attributes for images
 Apply a background image on a page
 Apply graphics as hyperlink
 Learn to create and place animated GIF files
Cebu City Division
What I Know
The activity is in the Google form.
https://docs.google.com/forms/d/1X95uOEsGFamUx0q7PcMbIk_AIaQ2QCfCYl7VBNO5cAo/edi
t
What is New
Changing the Background Color of a Page
You can change the background color of the page by using the bgcolor attribute <body
bgcolor=”value”> </body>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
</style>
</head>
<body>
<h1>The background-color Property</h1>
<p>The background color can be specified with a color name.</p>
</body>
</html>
The background-color Property

The background color can be specified with a color name.
WHAT IS IT
Preparing the Image or Graphics
You can add images to your Web page with the use of <img> tag. The <img> tag supports
several attributes, but the src= attribute is the one that specifies the name and location
of the image.
Cebu City Division
You can create an image from Adobe Photoshop, MS Paint or other image editing
programs. You should save your image in a JPEG or PNG format and compress the
image so that loading time will be fast. You can reduce image and compress your file for
the web. You can also use GIF for logos, animated images and other images that include
texts and graphics.
HTML support various image formats or file types, namely:

 Joint Photographic image Experts Group or JPEG (or JPG)- Supports a million of
colors and has the file name extension of either jpeg or jpg. This file format id the
most commonly used.
 Compuserve Graphics Intechamge Format or GIF- Support up to 256 colors and
has the file name wxtension of gif. This file format is commonly used and can be
animated.
 Portable Network Grapics or PNG- Supports a million of colors and has the file
name extension of png.
 Bitmap or BMP- Supports a million of colors and has the file name extension of
bmp. This type of image is not compressed that’s why it provides the best quality
for image at the cost of file size.
Insert Graphics into a Web Page
Furnishing your Web page with design doesn’t end in typography; it only starts from
there. Another good way of making yopur webpage attractive is thru the use of images or
Cebu City Division
pictures. You can insert a picture in your Web page through the empty
tag <img>. To display the image on the page, you have to use the src and alt attributes.
<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
The img element

Cebu City Division
The <vspace> / <hspace>, <border>, <align> tags are not supported in HTML5.
You can use CSS to set the vertical space, horizontal space, add image border and set
the alignment of an image which will be taken up in the CSS lessons.
Attributes for <img>
Attribute Definition
Name
src Indicates the image to be inserted. This attribute must be present at all
times.
Ex: <img src="img_girl.jpg">
alt Indicates the alternate text for an image or the text that appears when
the mouse hovers over the image and /or when the image cannot be
displayed.
Ex: <img src="img_girl.jpg" alt="Girl in a jacket">
height Indicates the height of the image in pixels. If the actual height is not
specified, the image will be scaled to fit.
Ex: <img src="img_girl.jpg" alt="Girl in a jacket" height="600">
width Indicates the width of the image in pixels. If the actual width is not
specified, the image will be scaled to fit.
Ex: <img src="img_girl.jpg" alt="Girl in a jacket" width="500">
ismap Specifies an image as a server-side image-map
usemape Specifies an image as a client-side image-map
Specifying the Background Image of a Page

You can specify the background image of the page by using the background attribute
inside the body tag <body background=”value”>…</body>. The background image
should not overpower the web page; otherwise, your web page contents will be difficult to
read. You can also add a background color that matches the color of the image.
In choosing a background image, you should remember the following:

1. Use an image tat will not distract the text and main content of the page.
2. Do not use large image file because it eill take a long time to load your page.
3. The background should not show boundaries and grids when tiled.
Cebu City Division
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h2>Background Image</h2>
<div>
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>
</body>
</html>
Background Image
You can specify background images

for any visible HTML element.
In this example, the background image
is specified for a div element.
By default, the background-image
will repeat itself in the direction(s)
where it is smaller than the element
where it is specified. (Try resizing the
browser window to see how the
background image behaves.
Using Graphics as a Hyperlink

Before you can use graphic as hyperlink, you have to create the image first in
Photoshop, Paint or other programs.
Graphics hyperlink is commonly used as follows:

1. Link to the website’s used as follows:
2. Link to the nest page, previous page or top of the current page.
3. Link to large full-sized graphics.
4. Link to all pages in a website.
Cebu City Division
<!DOCTYPE html>
<html>
<body>
<h1>The a href attribute</h1>
<p>An absolute URL: <a href="https://www.w3schools.com">W3Schools</a></p>

<p>A relative URL: <a href="tag_a.asp">The a tag</a></p>
</body>
</html>
The a href attribute
An absolute URL: W3Schools
A relative URL: The a tag
Creating Animated GIF Files

Before you can create animated GIF files, you should create the image in Photoshop or
other photo editing programs. Save the animated image as GIF and save to My Pictures.
1. Get an image or create your own image using MS Paint, Photoshop or any photo
editing program. In this example, we used Photoshop.
2. Open the first image in Photoshop.
3. Drag the second image into the open first image.
4. Fit the second image into the first image.
5. On the Menu Bar, click Window and click Animation.
6. The Animation window will appear at the bottom of the screen.
7. Click the panel menu ti show the menus and click Make Frames from Layers. The
Animation window will show the two images.
8. Click the first image and click the Tween icon and on the dialog box type 5 on the
Frames to Add number box, then click OK.
9. On the Animation Window click the second image and click the Tween icon and on
the dialog box type 5 on the Frames to Add number box, then click OK.
Cebu City Division
10. Drag the first image back to the first framw.
11. Click Play to test the animation and then click stop.
12. On the Menu Bar, click file and click Save for Web & Devices.
13. On the the dialog box, click Save.
14. On the Save Optimized As dialog box, type your file name, and click OK.
<html>
<header>
<title> SCSIT Inc</title>
</header>
<body>
<img src=”My picture/Logo.jpg>
<p>
<center><img src=”My picture/Banner.gif”></center>
<body>
</html>
WHAT’S MORE
The activity is in the Google Form.
https://docs.google.com/forms/d/1TxSgI1yr8MnGhipNzucjxDmIbeL8arFH2zH4tLCgOBg/edit
WHAT I HAVE LEARNED

The activity is in the Google Form.
https://docs.google.com/forms/d/1uU0sR7NFl8N6Bl_RCLtEopm5DRyLm2PNNhqIC7wTvrg/edit
WHAT I CAN DO
Study the Computer
REFERENCES
Books and Articles and Printed Materials:
1. Barry Press, Marcia Press, PC Upgrade and Repair Bible,

Desktop Edition., Wiley Publishing Inc., 10475 Crosspoint
Boulevard, Indianapolis, IN 46256
2. Ron Gilster, PC Repair Bench Book., Wiley Publishing Inc., 10475

Crosspoint Boulevard, Indianapolis, IN 46256
3. Barry Press, Marcia Press, PC Upgrade and Repair Bible, Desktop

Edition., Wiley Publishing Inc., 10475 Crosspoint Boulevard, Indianapolis,
IN 46256
4. K to 12 Basic Education Curriculum- Technology and Livelihood Education

Learning Module –Computer Hardware Serviciing- RONALDO V. RAMILO and
DEOVER M. PASCO
Cebu City Division
Electronic Resources:
1. http://www.buzzle.com/articles/computer-memory-types.html
Computer Memory Types
2. http://www.athropolis.com/popup/c-comp2.htm
Measurements for Memory & Storage
3. http://www.ustudy.in/ce/hard/u1
Fundamentals of PC repair
4. http://danreb.com/sites/default/files/CHS-NC2%20Reviewer%20-
%20With%20Oral%20Questioning_0.pdf
Occupational Health and Safety Precautions
5. http://puzzlemaker.discoveryeducation.com/CrissCrossSetupForm.asp
Puzzles for Activities
6. http://info.psu.edu.sa/psu/cis/kalmustafa/CISCO/Lecture%20Slides/ITE_PC_v40_Chap
ter2.pdf
Occupational Safety Precautions
7. http://www.youtube.com/watch?v=tfKe8PPI2zs&feature=related
Conversion of Decimal N umber to Binary
8. http://www.youtube.com/watch?v=s7M6_VeDhJE&feature=related
9. http://www.youtube.com/watch?v=6N7bqBsFL0w-
Computer Hardware Basics
10. http://www.wikihow.com/Install-Computer-Hardware-
How to install Computer Hardware
11. http://www.directron.com/howtoupsys.html-
How to install Computer components
12. en.wikipedia.org
13. http://www.bechtel.com/assets/files/Environmental/ToolboxSafetyTopics/20
10/ProperToolSelection.pdf
Tool Selection
14. http://www.iml.uts.edu.au/assessment-futures/designing/assembling.html
15. http://www.instructables.com/id/Disassemble-a-Computer/- Computer Basics

Computer 9 Quarte 3 Module 3

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

Computer 9 Quarte 3 Module 3

Uploaded by

Copyright:

Available Formats

Republic of the Philippines

What I need to Know

Lesson 7: Adding Images

After going through this module, you are expected to:

<h1>The background-color Property</h1>

<p>The background color can be specified with a color name.</p>

The background-color Property

HTML support various image formats or file types, namely:

<h1>The img element</h1>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The img element

Specifying the Background Image of a Page

In choosing a background image, you should remember the following:

You can specify background images

Using Graphics as a Hyperlink

Graphics hyperlink is commonly used as follows:

<h1>The a href attribute</h1>

<p>An absolute URL: <a href="https://www.w3schools.com">W3Schools</a></p>

The a href attribute

An absolute URL: W3Schools

A relative URL: The a tag

Creating Animated GIF Files

WHAT I HAVE LEARNED

1. Barry Press, Marcia Press, PC Upgrade and Repair Bible,

2. Ron Gilster, PC Repair Bench Book., Wiley Publishing Inc., 10475

3. Barry Press, Marcia Press, PC Upgrade and Repair Bible, Desktop

4. K to 12 Basic Education Curriculum- Technology and Livelihood Education

15. http://www.instructables.com/id/Disassemble-a-Computer/- Computer Basics

You might also like