For adding picture in HTML page we have to use <img> tag. We have to add pictures in web pages as necessary or for making attractive ...
For adding picture in HTML page we have to use <img> tag. We have to add pictures in web pages as necessary or for making attractive the pages to the user.
Remind that this tag has only opening tag, it has no closing tag.
At first you have to save the pictures with gif/jpg/bmp extensions.
For identifying the source of the picture you want to add you need to use src attribute.
Syntax for adding picture in html page
<img src=”url”>
Image source can be identified by 2 ways.
- By using standard URL
- Coping or uploading file in web server
It is necessary to set the picture size and position in the page. For setting the height and width used attributes are height and width. But in case of banner its position is in the upper part of the page and the size same as the size of the picture width.
Here is some used attributes with explanation
Used attributes Explanation
src
Specifies the image source
alt
For showing a text if the page fails to load.
width ,height
Sets the width and height of the picture.
align
Sets the border of image.
Different alignments are set by using align attribute like top, bottom, center, left, right etc. These sets picture position in html page.
Adding picture in HTML page examples
Example 01: Add picture with height = 300, width = 500 and border = 2. Align it in the left side.
Solution:
Example 01: Add picture with height = 300, width = 500 and border = 2. Align it in the left side.
For example here we have a picture River-before-sunset.jpg. So , in the text document we have to write-
<DOCTYPE html!>
<html>
<head>
<title>Add picture</title>
</head>
<body>
<img src = "River-before-sunset.jpg"height = "300"width = "500"border ="2" align="left">
</body>
</html>
After saving that text document with .html extension we have to open that with a browser.
You can get your expected position and size off the picture by changing the attributes in the table.
No comments