Lesson 6.8 HTML Images
-
Upload
mllalaguna -
Category
Documents
-
view
227 -
download
0
Transcript of Lesson 6.8 HTML Images
-
8/2/2019 Lesson 6.8 HTML Images
1/17
Lesson 6.8HTML Images
Introduction to Images,Inserting Images fromFile, Adding AlternativeText, Aligning Images,Scaling an Image, andAdding Ruler
-
8/2/2019 Lesson 6.8 HTML Images
2/17
INTRODUCTION TO IMAGES
Images add beauty and impact to a website. the quality of the image depends onthe color, size and format.
Take note that image size can affect thedownloading of the page. More images onthe web page take time to download or
display it contents.
-
8/2/2019 Lesson 6.8 HTML Images
3/17
IMAGE FORMATS THAT WEB BROWSER CANUNDERSTAND
GIF (Graphical Interchanged Format) itwas developed by CompuServe. It uses LZW
(Lepel-Zev-Welch) compression scheme.JPEG (Joint Photographic Expert Group)
it is composed of million of colors that
cause the image to be realistic. It is saved in jpg format. It cannot be used in animation.
-
8/2/2019 Lesson 6.8 HTML Images
4/17
-
8/2/2019 Lesson 6.8 HTML Images
5/17
INCORPORATING IMAGES TO YOUR WEB
Format:
-
8/2/2019 Lesson 6.8 HTML Images
6/17
ADDING ALTERNATIVE TEXT
Alternative Text appears on the browserin case the image doesnt. This will also
appear when you mouse over on theimage.
Format:
-
8/2/2019 Lesson 6.8 HTML Images
7/17
ALIGNING IMAGE AND ADDING SPACEBETWEEN IMAGE AND TEXT
Format: Sample:
-
8/2/2019 Lesson 6.8 HTML Images
8/17
IMAGE AS BACKGROUND OF THE DOCUMENT
Format: Sample:
-
8/2/2019 Lesson 6.8 HTML Images
9/17
ADDING BORDER TO AN IMAGE
Format: where n is any number in pixel
Sample:
-
8/2/2019 Lesson 6.8 HTML Images
10/17
SCALING AN IMAGE
Format: where n is any number in pixel
Sample:
-
8/2/2019 Lesson 6.8 HTML Images
11/17
ADDING RULER TO YOUR WEB PAGE
Horizontal Rule is used to separate ordivide the section of the web page. It
comes without pair.
-
8/2/2019 Lesson 6.8 HTML Images
12/17
ADDING RULER TO YOUR WEB PAGE
Format:
Attributes Description Value
Color Change the color of theruler
Any color name like pinkor violet
Size Change the height of theruler
Value in pixels
Width Change the width size of the ruler
Value in percentage or inpixels
-
8/2/2019 Lesson 6.8 HTML Images
13/17
ADDING RULER TO YOUR WEB PAGE
Sample:
Pixel is equivalent to one dot of an image. Themaximum value depends on the resolution of the screen.For example, the value assigned is 5 pixels, the height of the ruler is five dots.
Percentage is the value used for width. The width is withrespect to the screen width. If the value given is 50%, thewidth of the ruler is half of the screen.
-
8/2/2019 Lesson 6.8 HTML Images
14/17
COMPUTER HANDS-ONType the following source codes and save it as images.html.
-
8/2/2019 Lesson 6.8 HTML Images
15/17
-
8/2/2019 Lesson 6.8 HTML Images
16/17
-
8/2/2019 Lesson 6.8 HTML Images
17/17
ASSIGNMENT
Why is it important to consider theforeground or text content of the web site
in choosing a background?Which is more preferable to use, a
background color or an image? Why?
Happy Learning Everyone! Prepared by: Mr. Marlon Lalaguna