Lesson 13: HTML – Image
- Thursday, May 14, 2009, 6:06
- Programming
- 1,583 views
- 1 comment
HTML is capable to embed images in a webpage; it can be done by using html tag <img>. Image tag is not a container tag means there is no closing tag but it has several attributes.
Tag Syntax
<img src=”picpath” height=”10” width=”20” alt=”image description” align=>
Src
Src attribute of image tag defines source of image, src is always set to the path of image.
Html Code
<html>
<head>
<title>
Html image example
</title>
</head>
<body>
<img src=”a.jpg”> or <img src=”URL”>
</body>
</html>
Output
Height
Height attribute define the vertical size of image in pixels or percentage.
Html Code
<html>
<head>
<title>
Html image height attribute example
</title>
</head>
<body>
<img src=”a.jpg” height=”200″>
Image size is set in pixels
</body>
</html>
Output
Width
Width attribute define the horizontal size of image in pixels or percentage.
Html Code
<html>
<head>
<title>
Html image height attribute example
</title>
</head>
<body>
<img src=”a.jpg” height=”200″ Width=”400”>
Image size is set in pixels
</body>
</html>
Output
Alt
The alt tag used for define the description of the image. This tag will help the viewer what is missing in the page if browser is not able to display image properly. The second benefit when you place the mouse over picture it will show description in a pane.
Html Code
<html>
<head>
<title>
Html image example
</title>
</head>
<body>
<img src=”a.jpg” height=”200″ width=”600″ alt=”bear”>
Image size is set in pixels
</body>
</html>
Output
In case if the image path is wrong as mentioned below I define image name b.jpg instead of a.jpg then description bear will let me know that image is missing.
Html Code
<html>
<head>
<title>
Html image example
</title>
</head>
<body>
<img src=”b.jpg” height=”200″ width=”800″ alt=”bear”>
Image size is set in pixels
</body>
</html>
Align
Align tag is used for alignment of the embedded image on webpage. Three values can be set for align tag left, right and center.
Html Code
<html>
<head>
<title>
Html image example
</title>
</head>
<body>
<img src=”a.jpg” height=”200″ width=”800″ alt=”bear” align=”right”>
Image size is set in pixels
</body>
</html>
Output
(No Ratings Yet)
Loading ...About the Author
Adam has written 384 stories on this site.
Related Tutorials & Articles
The <HR> element in html create an horizontal line or rule across the screen. <HR> is called an empty tag, although it have four attribute to change default way the rule appears on screen. This tag is called an empty tag because there is not ending tag or closing tag. Look at the simple use...Read more
The background attribute allows you to place image or picture on background of your page. The background is most commonly used attribute of <body>,<table> element. When background tag within body tag it repeat the image to fill whole web page background.It’s a good practice to use small size images because huge size image take time...Read more
As we learn in our last lesson about background color and background image. Text color in page remain the same whatever background color or background image you have used. If you use dark background colors and images then most probably it’s difficult for page viewer to read anything. Text is useful attribute of <body> tag...Read more
The bgcolor attribute control the background color of the page. Bgcolor can be used with several html tags but here our keen focus on <body> background color. The value of background attribute can be set in plain text or in hexadecimal numbers, all background colors are the mix of RGB(red,green,blue) colors. Each colors value can...Read more
Web pages contains series of contents line or pages, its very difficult for the user to differentiate different section of the contents because all the text formatting is same. HTML support hot feature of heading, there are six heading element <H1></H1>….<H6></H6>. By using different level of tags document creator can show different section within the same...Read more
One Comment on “Lesson 13: HTML – Image”
Trackbacks
Write a Comment
Gravatars are small images that can show your personality. You can get your gravatar for free today!
