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


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.


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.


4/17


5/17

INCORPORATING IMAGES TO YOUR WEB

Format:


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:


7/17

ALIGNING IMAGE AND ADDING SPACEBETWEEN IMAGE AND TEXT

Format: Sample:


8/17

IMAGE AS BACKGROUND OF THE DOCUMENT

Format: Sample:


9/17

ADDING BORDER TO AN IMAGE

Format: where n is any number in pixel

Sample:


10/17

SCALING AN IMAGE

Format: where n is any number in pixel

Sample:


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.


12/17


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


13/17


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.


14/17

COMPUTER HANDS-ONType the following source codes and save it as images.html.


15/17


16/17


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

lesson 6.8 html images

Documents