Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Images HTML

    Hochgeladen von

    Sourabh Bhandari
    21 Ansichten3 Seiten
    This document contains tutorial of html img tag.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    This document contains tutorial of html img tag.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    21 Ansichten3 Seiten

    Images HTML

    Hochgeladen von

    Sourabh Bhandari
    This document contains tutorial of html img tag.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 3

    IMAGES

    One of the fascinating feature of HTML/XHTML is their ability to insert images in your
    document. The images can make your document look attractive, informative and
    professional. However images must not be used in access because that can make your
    document cluttered, confusing and inaccessible. You can place all types of images in
    your document, from logos to photographs. The image can be placed in your document
    by embedding <img> tag in your document's source. Now let us demonstrate the images
    with code below :

    <html>
    <head>
    <title>Images</title>
    </head>
    <body>
    <h1>Sweet child</h1>
    <img src="download.jpg" />
    </body>
    </html>

    You can specify the image's dimensions including width and height attribute and then set
    them equal to pixel dimensions of the image as :

    <html>
    <head>
    <title>Images with fixed dimensions</title>
    </head>
    <body>
    <h1>Sweet child</h1>
    <img src="download.jpg" width="200" height="200" />
    </body>
    </html>

    You can also specify the text to be displayed in place of images for the users with non-
    visual browsers by including alt attribute. Let us see :

    <html>
    <head>
    <title>Images with text for non-visual browsers</title>
    </head>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    <body>
    <h1>Sweet child</h1>
    <img src="download.jpg" width="200" height="200" alt="These are sweet
    babies" />
    </body>
    </html>

    A border can also be placed around the image by using border attribute and setting it
    equal to the border's thickness in pixels. Let us see it :

    <html>
    <head>
    <title>Images with border around</title>
    </head>
    <body>
    <h1>Sweet child</h1>
    <img src="download.jpg" width="200" height="200" alt="These are sweet
    babies" border="5" />
    </body>
    </html>

    Image alignment and Spacing


    The standards don't define the default alignment for images with respect to other text
    thus we can't always predict how text and images will look. The alignment of images are
    controlled with the align attribute of <img> tag. The HTML provides five basic image-
    alignment attribute values : left, right, top, middle and bottom. White space surrounding
    the image is controlled with the help hspace and vspace attributes. Let us demonstrate it
    :
    <html>
    <head>
    <title>Images</title>
    </head>
    <body>
    <h1>Sweet child</h1>

    <img src="download.jpg" width="200" height="200" alt="These are sweet


    babies" border="5" align="bottom"/>
    how r u babies ???

    </body>

    © Copyright Sourabh Bhandari http://sourabhandari.in


    </html>

    Now let us see a code for hspace attribute :

    <html>
    <head>
    <title>Images</title>
    </head>
    <body>
    <h1>Sweet child</h1>

    <img src="download.jpg" width="200" height="200" alt="These are sweet


    babies" border="5" align="bottom" hspace="25px"/>
    how r u babies ???

    </body>
    </html>

    The following table describes the attributes that is supported by <img> tag :

    Attribute align,alt,border,class,controls,dir,
    dynsrc,height,hspace,id,ismap,lang,
    longdesc,loop,lowsrc,name,
    onAbort,onClick,onDblClick,onError,
    onKeyDown,onKeyPress,onKeyUp,onLoad,
    onMouseDown,onMouseMove,onMouseOut,
    onMouseOver,onMouseUp,src,start,style
    , title,usemap,vspace,width.

    © Copyright Sourabh Bhandari http://sourabhandari.in

    Das könnte Ihnen auch gefallen