In the previous chapter, you have learnt the basic concepts of HTML, and various formatting tags, which help a developer in enhancing the appearance of a web page. Apart from the text-based tags, you can also conclude images, graphics, audio clips, and video clips on your web page and give a professional look to it. In this chapter, we will discuss to add these multimedia elements on our web pages.
Images are used to beautify as well as to depict many complex concept easily on your web page. Images can also be used as a navigational tool to help users to browse through the web page. Web browsers support various graphics formats, such as GIF and JPEG.
There are two types of images-Inline and External images. The inline images is displayed when the web page is opened and is inserted within a line of text, whereas the external image is not shown automatically with other content on the web page. Instead, it is refferenced externally and viewed seperately by clicking on a link. The <IMG> tag is used to insert an inline image. To add an external image, the anchor tag <A> is used as a link to the image.
The <IMG> tag is used to add images in an HTML document. It is an empty tag and requires different attributes to be specified with it. The various attributes of the <IMG> tag tell the browser how to layout the page so that the text can flow properly around the image. Let us discuss the attributes of <IMG> tag.
SrcThe Src attribute helps in defining the source of an image. While specifying the image file, one should be aware of its location, i.e., where the file exists. To add and define the source of an image on a web page, type:
<IMG Src="address or the path of the image file">Let us understand it with the following cases:
Case 1: If the image file, let us say "pic1.jpg" lies in the same folder where the HTML file referred to is located, then we can refer to the image file by just writing its name.
Example: <IMG Src="pic1.jpg">Case 2: If the image file "pic1.jpg" lies in a directory other than the one in which HTML file is placed, then we can refer to the image by specifying the full path of the file:
Example:<IMG Src="C:\Users\Kips\Pictures\pic1.jpg">Case 3: If the image file "pic1.jpg" does not lie in your computer and is located in the images folder of the web server of Google, then we need to give the full path of the file:
Example:<IMG Src="http://www.google.com/images/pic1.jpg">