Unit II - Lesson 6and7 - HTML Images and Background

8/13/2019 Unit II - Lesson 6and7 - HTML Images and Background

http://slidepdf.com/reader/full/unit-ii-lesson-6and7-html-images-and-background 1/18

Lesson 6 HTML

Images Introduction to Images,

Inserting Images from

File, Adding Alternative

Text, Aligning Images,

Scaling an Image, and

Adding Ruler





IMAGE FORMATS THAT WEB BROWSER CAN

UNDERSTAND

GIF (Graphical Interchanged Format) – it

was 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.



IMAGE FORMATS THAT WEB BROWSER CAN

UNDERSTAND

PNG (Portable Network Graphic) – it was

endorsed by the World Wide Consortium.

The compression format is 25-30% moreeffective than LZW. Macromedia adapted it

for Fireworks.



INCORPORATING IMAGES TO YOUR WEB

Format:

<img src=location and image

filename you want to insert>



ADDING ALTERNATIVE TEXT

Alternative Text appears on the browser

in case the image doesn’t. This will also

appear when you mouse over on theimage.

Format:

<img src=location, path and filename ofthe image alt=“type any text”>



ALIGNING IMAGE AND ADDING SPACE

BETWEEN IMAGE AND TEXT

Format:

<img src=location, path and filename of

the image align=position vspace=no. inpixels hspace=no. in pixels>

Sample:

<img src=“./My Cute Pics/cutie.jpg”align=right vspace=20 hspace=30>



ADDING BORDER TO AN IMAGE

Format:


the image border=n>where n is any number in pixel

Sample:

<img =“./My Cute Pics/this_is_me.jpg”

border=10>



SCALING AN IMAGE

Format:


the image border=n width=n height=n>where n is any number in pixel

Sample:

<img =“./My Cute Pics/this_is_me.jpg”

border=10 width=50 height=50>



Lesson 7 HTML

Backgrounds



IMAGE AS BACKGROUND OF THE DOCUMENT

Format:

<body background=location, path and

filename of the image>Sample:

<body background=“./My Cute

Pics/this_is_me.jpg”>



ADDING RULER TO YOUR WEB PAGE

Horizontal Rule is used to separate or

divide the section of the web page. It

comes without pair.




Format: <hr>

Attributes Description Value

Color Change the color of the

ruler

Any color name like pink

or violet

Size Change the height of the

ruler

Value in pixels

Width Change the width size of

the ruler

Value in percentage or in

pixels




Sample: <hr color=red size=10 width=50%>

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%, the

width of the ruler is half of the screen.



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



Continuation...



Output of the Code:



ASSIGNMENT

Why is it important to consider the

foreground 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

Unit II - Lesson 6and7 - HTML Images and Background

Documents