[b]The HTML Image Tag[/b]

Discussion in 'Computer Science and IT Students' started by Guest, Apr 6, 2011.

  1. Guest

    Guest Guest

    The HTML Image Tag

    The image tag is used to place an image on the web page. In its most simple form it looks like this:

    [​IMG]

    Images are not technically "part" of the web page file, they are separate files which are inserted into the page when it is viewed by a browser. So a simple web page with one image is actually two files - the HTML file and the image file.

    Example:-
    <html>
    <head>
    <title> This is demonstration of image tag </title>
    </head>
    <body>
    The Picture is

    [​IMG]
    </body>
    </html>

    In this example the two files are both located in the same folder. The HTML file includes an image tag which refers to image.jpg.

    When the HTML file is displayed in a browser, it requests the image file and places it on the page where the tag appears.
    The most important attribute of the image tag is src, which means source and tells the browser where the image file is.

    Size Attributes
    The size attributes define the width and height of the image. It is :-

    [​IMG]

    This attributes are optional , but should be used so that browser and place the image properly.

    Alt & Title Tags
    These two tags are very similar and can be confusing.

    They define a short piece of text which appears instead of the image if the image cannot be displayed (for whatever reason), and/or as a "tool-tip" when you hold your mouse over the image.

    If both attributes are specified, the title tag will override the alt tag. Hold your mouse over this image to see which tag your browser displays.

    [​IMG]

    If no alt or title tag is specified, the results vary depending on the browser and user settings. Some will show nothing, some will show the file name.

    Spacing Attributes
    You can create space between the image and surrounding text by defining vertical and horizontal space like so:

    [​IMG]

    Alignment
    You can use the align attribute to position the image:

    [​IMG]

    The following alignment options are available:
    left, right, top, middle, bottom, absmiddle, absbottom, baseline, texttop



    Border Size
    The border attribute places a border around the image. In the following example a 1-pixel border is applied:

    [​IMG]

    If no border attribute is specified, no border is applied, except when the image is used as a hyperlink. In this case a 1-pixel border is applied. If you want to make an image into a hyperlink without a border, specify a zero border like so:

    [​IMG]

Share This Page