HTML - SPLessons

HTML Image

Chapter 18

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Image

HTML Image

shape 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

Image

shape 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

<img src=”Image URL” . . . attribute – list/>

shape Examples

The below example demonstrate the code for adding a image to the web page.

<!DOCTYPE html>
<html>
	<body>
		<img src="splessons.jpg" alt="splessons.com" >
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Image Width and Height

shape 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.

shape Examples

The below example demonstrate the code for adjusting height and width of the image by using the attributes.

<!DOCTYPE html>
<html>
	<body>
		<img src="splessons.jpg" alt="splessons.com" width="104" height="142">
	</body>
</html

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Image Borders

shape Description

User can also set the image borders by using the border attribute. Thickness measured in the form of pixels.

shape Examples

The below image demonstrates assigning borders to the images by using border attribute.

<!DOCTYPE html>
<html>
	<body>
		<img src="splessons.jpg" alt="splessons.com" width="104" height="142" border="3">
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

shape Examples

The complete example of the links and images is as shown below.

Example code with result is as shown below.

<html>	
	<a href="https://www.splessons.com/">SPLessons Home</a>
	<br /><br />
	<img src="https://www.splessons.com/wp-content/uploads/2015/01/html-usuage-of-tables-splessons-300x180.jpg" alt="Logo" /> 
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Summary

shape 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.