Welcome to the third course, let’s not stop now, it’s time to add an image on our page!
In the previous article, you’ve saw how to add hyper link by using anchor and the structure of a web page. Now it’s time we start to embellish our web site by adding images.
Ours days, it’s hard to find a web site that doesn’t have any images. Adding image to your site will add a little wow effect, and it’s quite easy to do. In order to star placing image on screen, we’ll need to use a new tag; the “img” tag. In this course, we will be using four different attribute. In the img tag, they will set the height, width, alternate text and finally the image itself.
Let’s start with an example:
<img src="smile.gif" height="50" width="50" alt="Happy face">Inside the img tag to can insert a lot of attribute, but only one is really necessary, the “src” attribute. This attribute will indicate the path and name of the image file, with the attribute is missing or misspell, no image will show up. If you image is outside your main site directory, you can also specify a full path or web address like so:
<img src="image/smile.gif">
<img src="http://www.example.com/smile.gif ">All the other attribute are very practical but not necessary. The “alt” attribute has two purposes. First one will tell the search engine what the image is (since search engine can’t actually see!). The second purpose is the text that will be displayed on screen if the browser can’t find the image.
To finish up this course, we will use the height and width attribute. Like they name mention the will set the height and width of a picture. Though you have to be careful when using both attribute at the same time since you can deform the image itself (as I demonstrate in the video).
That all for today, in our next course we will take a closer look at the different way to display a list on screen.
Below is the video tutorial of the blog, and you may find the complete description or the “img” tag on mozilla.
