Web Basic 101 – Class 3!
Welcome to the third course, let’s not stop now!
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 to 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 ">
The other attribute are very practical but not necessary. The “alt” attribute has two purposes; the 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.
Here is the video tutorial of the blog: