SiteDesignTutorial.com

Adding pictures and images to html pages.


If you are not clear about making links, or specifying path names, then please return back to the previous page and get those concepts cleared. You'll be using those in this chapter as well.

Adding images



Commonly following type of images are used on website pages:

    • .BMP
    • .JPG
    • .JPEG
    • .GIF
    • .PNG


    Avoid using .BMP images, because these are big in file size and your website will load very slowly. For best results, try to use GIF and JPG images.
    You can save normal .bmp files as .jpg or .gif files using ms-paint.

    The html tag to add images is:


    <img



    Notice that it's not closed above? This is because it's incomplete. To complete it, you have to give it a file name, like this:


    <img src="sample.gif">



    SRC is the attribute to hold the file name of the image to be loaded.
    Try it in your html page.

    The image didn't show up, did it? For an image to display in the website page, the image file should be present in the same path as specified in the <img tag. Try this:

    Open ms-paint, it's available in the Accessories menu. Make a picture, anything you want... Save the picture as a gif, or jpg type, name it "sample". Make sure you save in the same folder where your html page is saved. Now close ms-paint, and take a look in your folder where you are saving your html pages. There should be a file named sanple.gif, or sample.GIF. If you don't see the file extension, right click the file and choose properties.

    Now try one of the below tags, depending on what your file extension is:


    <img src="sample.gif">
    <img src="sample.GIF">
    <img src="sample.JPG">
    <img src="sample.jpg">
    <img src="sample.JPEG">
    <img src="sample.jpeg">



    Note:
    File names are case sensitive, so sample.gif is not the same as sample.GIF . You need to make sure what your file name and file extension is.

    On websites, you would have seen a text come up when you place your mouse over an image. This is called Alternate text. The benefit of having this text is that you can tell your website visitors what this image is about, if it's a link image, which page will be loaded if they click it, some help etc.

    Note:
    It's important to use this tag, and without it, your html will not get validated...

    The attribute is ALT, used as:


    <img src="sample.gif" alt="a sample image">



    Why make an error, when it's so easy to do things right?

    Making picture links



    Most of the time, you would have seen pictures that can be clicked. When clicked, they load another website page. Here's how to do this using the same sample image we had above, and the mypage2.html we made in previous chapter:

    Do you remember the html to make text links? I know you were not paying attention...


    <a href="mypage2.html"> go to page 2 </a>



    Using the same code above, we can make an image into a link. See this:


    <a href="mypage2.html">
    <img src="sample.gif" alt="sample image">
    </a>



    The code is in 3 lines for understanding, You can put it all in 1 single line as well:


    <a href="mypage2.html"><img src="sample.gif" alt="sample image"></a>



    We only replaced the text Go to page 2 with the <img tag.

    Did you try it in your html page? You would have seen a blue color border around the image this time. This indicates that this image is a link and will load another page when clicked. If you don't want the border, you can remove it.

    The attribute to remove or add borders to an image is BORDER. See this:


    <img border="3" src="sample.gif" alt="image with border">
    <img border="0" src="sample.gif" alt="image without border">



    So to remove the border from a linked image, we use:


    <a href="mypage2.html">
    <img src="sample.gif" alt="sample image" border="0">
    </a>



    Align images



    Just like text, you can also align images on a website page. The attribute is the same, ALIGN


    align="left" ->Aligns images to the left. If no align is specified, image is left aligned by default.

    align="center" ->Center align image.

    align="right" ->Right align.



    That was super easy to remember, wasn't it?

    Using the same attributes with our sample image:


    <img src="sample.gif" alt="left aligned image" align="left">
    <img src="sample.gif" alt="right aligned image" align="right">
    <img src="sample.gif" alt="center aligned image" align="center">



    Note:
    To display an image correctly on a website, you need to make sure that the image exists at the same path as you mentioned in the SRC attribute.

    You can store all your images in a separate folder called images and use the path name inside the attribute SRC.

    For example, you have a folder named images inside your current folder. This folder has an image named sample2.gif. To display this image, you need to mention the folder name like this:


    <img src="images/sample.gif" alt="image inside folder">



    More about folders can be read in the previous chapter. Read it and try this little example.

    Your main folder where you are storing all your html pages is named my-html.
    This folder has 2 folders inside it named: images and sub-html

    The folder named images has an image in it named: /sample.gif. The sub-html has a html page named mypage2.html

    How will you display the picture in the mypage2.html page?

    Try making these folders somewhere in your computer and see how easy it actually is!


    Once you have tried it, click here for answer [[]].

    Are you tired of the white background? Let's change the background color then...

    SiteDesignTutorial arrowHTML Background color