Scribd Logo
Upload

Welcome to Scribd!

  • Lesson 6.8 HTML Images

    Uploaded by

    mllalaguna
    246 views17 pages
    The quality of the image depends on the color, size and format. More images on the web page take time to download or display it contents. IMAGE FORMATS THAT WEB BROWSER CAN UNDERSTAND GIF (Graphical Interchanged Format) JPEG (Joint Photographic Expert Group) - it is composed of million of colors that cause the image to be realistic.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The quality of the image depends on the color, size and format. More images on the web page take time to download or display it contents. IMAGE FORMATS THAT WEB BROWSER CAN UNDERSTAND GIF (Graphical Interchanged Format) JPEG (Joint Photographic Expert Group) - it is composed of million of colors that cause the image to be realistic.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    246 views17 pages

    Lesson 6.8 HTML Images

    Uploaded by

    mllalaguna
    The quality of the image depends on the color, size and format. More images on the web page take time to download or display it contents. IMAGE FORMATS THAT WEB BROWSER CAN UNDERSTAND GIF (Graphical Interchanged Format) JPEG (Joint Photographic Expert Group) - it is composed of million of colors that cause the image to be realistic.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 17

    Lesson 6.

    8 HTML Images
    Introduction to Images, Inserting Images from File, Adding Alternative Text, Aligning Images, Scaling an Image, and Adding Ruler

    INTRODUCTION TO IMAGES
    Images add beauty and impact to a web site. the quality of the image depends on the color, size and format. Take note that image size can affect the downloading of the page. More images on the web page take time to download or display it contents.

    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% more effective 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 doesnt. This will also appear when you mouse over on the image. Format: <img src=location, path and filename of the 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. in pixels hspace=no. in pixels> Sample: <img src=./My Cute Pics/cutie.jpg align=right vspace=20 hspace=30>

    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 BORDER TO AN IMAGE


    Format: <img src=location, path and filename of 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: <img src=location, path and filename of 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>

    ADDING RULER TO YOUR WEB PAGE


    Horizontal Rule is used to separate or divide the section of the web page. It comes without pair.

    ADDING RULER TO YOUR WEB PAGE


    Format: <hr>
    Attributes
    Color Size Width

    Description
    Change the color of the ruler Change the height of the ruler Change the width size of the ruler

    Value
    Any color name like pink or violet Value in pixels

    Value in percentage or in pixels

    ADDING RULER TO YOUR WEB PAGE


    Sample: <hr color=red size=10 width=50%>
    Pixel is equivalent to one dot of an image. The maximum 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 with respect to the screen width. If the value given is 50%, the width of the ruler is half of the screen.

    COMPUTER HANDS-ON
    Type 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

    You might also like