Introduction
This chapter demonstrates about the HTML Images which are used to give the better looking for the web pages and also used to describe the complex concepts in a simple way following are the concepts covered.
- Images
Description
Image will separate the HTML file into the two types by using the images user can easily understand. Images are not a technical part of the web pages, in order to insert user need to use the <img> tag.
Syntax
[html]
<img src=”Image URL” . . . attribute – list/>
[/html]
Examples
The below example demonstrate the code for adding a image to the web page.
[html]
<!DOCTYPE html>
<html>
<body>
<img src="splessons.jpg" alt="splessons.com" >
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In Html web pages user can adjust height and width of the images based on the user requirements. In order to do this user need to use the height and width attributes.
Examples
The below example demonstrate the code for adjusting height and width of the image by using the attributes.
[html]
<!DOCTYPE html>
<html>
<body>
<img src="splessons.jpg" alt="splessons.com" width="104" height="142">
</body>
</html
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also set the image borders by using the border attribute. Thickness measured in the form of pixels.
Examples
The below image demonstrates assigning borders to the images by using border attribute.
[html]
<!DOCTYPE html>
<html>
<body>
<img src="splessons.jpg" alt="splessons.com" width="104" height="142" border="3">
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Examples
The complete example of the links and images is as shown below.
Example code with result is as shown below.
[html]
<html>
<a href="http://www.splessons.com/">SPLessons Home</a>
<br /><br />
<img src="http://www.splessons.com/wp-content/uploads/2015/01/html-usuage-of-tables-splessons-300x180.jpg" alt="Logo" />
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- User need to keep the images in the same directory or user can also give the path.
- Images will available in various formats.
- User need to give the height and width based on requirement.