Thursday 9 April 2015

Image addition in HTML

As we know that HTML is widely used web development language. Images are also most important part of Web pages. These are used for making attractive web pages and other graphic properties. Here we will discuss about addition and linking of images in web pages through HTML.
In HTML we uses <img> tag for inserting images. The attributes used for <img> tag are:
1) src : In this attribute we defines the path of image file.
2) height : defines height of the image in pixels.
3) width : defines width of the image.
4) border : defines image border.
5) style : this attribute defines style of the image. By introducing style attribute we don't need to insert external css.
6) alt : defines the image tag line.

Let's start how to add images in HTML.
NOTE : The thing we should remember is that both image file and HTML web page file must be in same folder.
 <html>
<head>
<title>First image</title>
</head>
<body>
 <img src="d.jpg" height="500px" width="500px" boder="5px" alt=""My image></img>
</body>
</html>

preview:

How to make image as a redirect link in HTML:
 Let's see how we can make a image as a link. We know that a link is make my anchor tag in HTML, so we will use it in image link formation.
<body>
<a href="http://techtutorialszone.blogspot.com"><img src="d.jpg" height="500px" width="500px" boder="5px" alt=""My image></img></a>
</body> 
Above syntax is a image redirect link. When we will click on image on web page then this will redirect us on "http://techtutrialzone.blogspot.com".
In next article we will discuss on HTML with javascript. 

No comments:

Post a Comment