Image Handling in HTML
- How To Display Images?
-
-
To insert an image we use the <img> tag
-
General Syntax
<img src=“path to the image”>
-
<html>
<head>
<title>Image Demo 1</title>
<body>
This is first line
<img src="../images/puzzled.jpg">
This is second line
</body>
</html>
How browser loads images?
-
It is very important to understand that images are not technically "part" of the web page file.
-
They are separate files which are inserted into the page when it is viewed by a browser. So a simple web page with one image is actually two files - the HTML file and the image file.
-
When the HTML file is displayed in a browser, it requests the image file and places it on the page where the tag appears.
- Attributes Of <img> Tag
-
1.src
2.width
3.height
4.alt
5.title
6.align
7.border
- Resizing The Image
-
The size attributes define the width and height of the image. They look like this:
<img src="image.jpg" width="200" height="150">
If the size attributes are set to different values than the original image size, the browser will resize the image to the specified size (this doesn't affect the image file itself, just the way it's displayed in the page).
<html>
<head>
<title>Image Demo 1</title>
<body>
This is first line
<img src="../images/puzzled.jpg" width="100" height="100">
This is second line
</body>
</html>