Adding Images And Links To HTML Document

In this post we will see how to add images and links to our existing HTML document. This is very simple but i’ll try to show you more details about the same.

To add any image or link you will need Attributes. A Attribute in HTML is something which gives more information about a particular tag. So image tag (img) can have a attribute (src) which gives information about the location of image. Also anchor tag (a) which is basically a link, can have attribute (href) which gives information about destination web page.

Directory

Before we start to add Images or Links, I’ll create some set of folders in C drive. The directory and contents of these folders are displayed in the image given below.

directory

NOTE – We are inside the main directory and we are working on the document MAIN.html. All the codes given below in this post will be added only to MAIN.html.

Adding Image In HTML

You can add images using the image tag given below. Note that image tag has no closing tag but there’s a forward slash at the end of the tag. Also you can see the tag has SRC attribute which basically means SOURCE. We have to specify the source of image file.

[html]

<title> MAIN </title>

<img src=”LINK_GOES_HERE” />

[/html]

We are currently in MAIN folderMAIN.html directory. We can display A.JPG, B.JPG, C.JPG and D.JPG image using the code given below. Also at the very end, i have displayed an image from the web.

[html]

<title> MAIN </title>

<h3> Images </h3>

<img src=”A.JPG” />

<img src=”PROGRAMSB.JPG” />

<img src=”PROGRAMSJAVAC.JPG” />

<img src=”D:IMAGESD.JPG” />

<img src=”http://1.bp.blogspot.com/-hXJpiNe4aJs/Uj0izJNsPSI/AAAAAAAASjw/E5z5HyKyxxA/s1600/google-plus-logo-tilt-100×100.png” />

[/html]

Note that – To add a image from the web, we have used HTTP protocol. If we remove the HTTP part, the browser will search for the image inside the same folder in which the current HTML document is present. Also we have used forward slash instead of backward slash for fetching the source from the web.

Title Attribute For Image Tag

Did you notice that D.JPG is not present and thus the image will not be displayed. We can add title attribute to describe the image. So even if the image doesn’t show up, user can move the cursor over the image area and a title will be displayed.

[html]

<title> MAIN </title>

<h3> Images </h3>

<img src=”A.JPG” title=”Image A” />

<img src=”PROGRAMSB.JPG” title=”Image B” />

<img src=”PROGRAMSJAVAC.JPG” title=”Image C” />

<img src=”D:IMAGESD.JPG” title=”Image D” />

<img src=”http://1.bp.blogspot.com/-hXJpiNe4aJs/Uj0izJNsPSI/AAAAAAAASjw/E5z5HyKyxxA/s1600/google-plus-logo-tilt-100×100.png” title=”Image from Google” />

[/html]

html title

Adding Text Links In HTML

Similarly we can add Links in HTML. The only differences are – we have a tag and href attribute instead of img and src. And a tag has closing tag.  We can enclose any text or image between opening anchor tag and closing anchor tag and it will turn into a link.

[html]

<title> MAIN </title>

<h3> Text Links </h3>

<p> <a href=”A.JPG”> Open A Image </a> </p>
<p> <a href=”X.HTML”> Open X Document </a> </p>
<p> <a href=”PROGRAMSY.HTML”> Open Y Document </a> </p>
<p> <a href=”PROGRAMSJAVAZ.HTML”> Open Z document </a> </p>
<p> <a href=”http://www.google.com/”> Open Google </a> </p>

[/html]

I have added paragraph tags here because i want to links to appear on different lines and not on one single line.

Creating Image Links

Once you know how to add images and links to HTML document, you can easily create a image link. To do so, we will insert image between opening anchor tag and closing anchor tag.

[html]

<a href=”DESTINATION_URL”> <img src=”IMAGE_LOCATION” /> </a>

[/html]

I’ll add A.JPG, B.JPG and C.JPG and link them to X.HTML, Y.HTML and Z.HTML respectively. So when i click on A.JPG, the browser will open X.HTML web page.

[html]

<title> MAIN </title>

<h3> Image Links </h3>
<p> <a href=”X.HTML”> <img src=”A.JPG” title=”Image A” /> </a> </p>
<p> <a href=”PROGRAMSY.HTML”> <img src=”PROGRAMSB.JPG” title=”Image B” /> </a> </p>
<p> <a href=”PROGRAMSJAVAZ.HTML”> <img src=”PROGRAMSJAVAC.JPG” title=”Image C” /> </a> </p>

[/html]

Source Code

I have uploaded the files required for this post in zip format on dropbox. Just download the file and extract it in your C drive. You can then open main.HTML in web browser. Also you can play around with the code if you want to.

Download Link – Dropbox

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Leave a Reply