Scribd Logo
Upload

Welcome to Scribd!

  • Lesson 5 HTML Images

    Uploaded by

    Matt Steven Malaca
    5 views3 pages
    The <img> tag is used to embed images in HTML. It requires a src attribute to specify the image path/URL and an alt attribute to provide alternate text. Other optional attributes include width, height, border, and align. Common uses of the <img> tag were demonstrated.

    Original Description:

    Original Title

    Lesson 5 HTML Images (3)

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The <img> tag is used to embed images in HTML. It requires a src attribute to specify the image path/URL and an alt attribute to provide alternate text. Other optional attributes include width, height, border, and align. Common uses of the <img> tag were demonstrated.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views3 pages

    Lesson 5 HTML Images

    Uploaded by

    Matt Steven Malaca
    The <img> tag is used to embed images in HTML. It requires a src attribute to specify the image path/URL and an alt attribute to provide alternate text. Other optional attributes include width, height, border, and align. Common uses of the <img> tag were demonstrated.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    LESSON 5 - HTML IMAGES

    The HTML <img> tag is used to embed an image in a web page.


    It does not have a closing tag.The <img> tag has two required attributes:

    Attributes of <img> tag


    1.src - Specifies the path(url) to the image
    2.alt - Specifies an alternate text for the image,if the user for some reason cannot view
    it (because of slow connection, an error in the src attribute.

    The <img> tag

    To place images on a webpage, you will be using the <img> tag.


    The <img> tag has a few different attributes, but only one which is required - the
    src attribute (short for source). The src attribute denotes the location of the
    image.

    Example:
    <img src="animals.jpg">

    Output:

    NOTE: The <img> tag has no end tag.

    Some Examples on image tags


    1) <img src=“jordan.gif“ border=4>
    2) <img src=" jordan.gif" width="60" height="60">
    3)<img src =" jordan.gif“ align="left">

    Image size
     
    A web browser will automatically compute the width and height for an image, but you
    can set it to have a custom width and height. The width and height of an image can be
    set using the width and height attributes and assigning them a numeric value which
    will denote the height and width of an image in pixels.

    Example:

    1
    Image alignment
     Align an image using the align attribute and setting it to "left" for left alignment
    or "right" for right alignment.
     
    Example:
     
    <imgsrc="/images/apple.jpg" alt="Apple" align="left" >
    <p>Eat fruits every day to get your natural sugars.......</p>
    <imgsrc="/images/lettuce.jpg" alt="Lettuce"
     align="right" >
    <p>Don't forget your vegetables either.......</p>

    Image Image borders


     
    You can set a border around an image using the border attribute and giving it a
    numeric value denoting the thickness of the border.
     
    Example:
     <img src="/images/apple.jpg" alt="Apple" border="1“>
    <img src="/images/apple.jpg" alt="Apple" border="3“>
    <img src="/images/apple.jpg" alt="Apple" border="5" >

    2
    < img > places an inline image in a document

    Attributes of Image Tag


    < img src="url" > -specifies the relative or absolute location of file that contains the
    graphics image you want to embed in a document.
    < img align="left" > -specifies the appearance of text that is near an inline graphic
    image
    < img border="10" > -specifies the width of border around an image
    < img height="10" > -specifies the vertical dimension of the image
    < img width="10" > -specifies the horizontal dimension of the image

    Example: Output

    <html>
    <head>
    <title>Welcome to my photo
    gallery</title>
    </head>
    <body>
    <h1>Welcome to my Photo
    Gallery</h1>
    <img src="church.jpg"
    width=250 height=200 border=5>

    </body>
    </html>

    You might also like