HTML5 - SPLessons

HTML5 Images and Objects

Chapter 5

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Images and Objects

HTML5 Images and Objects

shape Introduction

The present chapter demonstrate about the HTML5 images and objects. Images provides good looking to the web pages and easily understood by everyone.Following are the topics covered in HTML5 Images and Objects chapter.

  • Images
  • Objects

Images

shape Description

Usage of images makes the user to easily understand about the given data. Images are not a technical part of the web pages.In order to insert an image, user have to use <img> tag.

Syntax

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

shape Example

The below example demonstrates how to add an image to the web page.

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

Output of the above code is 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. This can be done using the height and width attributes.

shape Example

The below example demonstrates how to adjust 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>

Output of the above code is as shown in below image.

Image Borders

shape Description

User can also set the image borders using the border attribute in which thickness is measured in the form of pixels.

shape Examples

The below image demonstrates how to assign borders to the images using border attribute.

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

Output of the above code is as shown in below image.

Objects

shape Description

HTML5 objects are many types which are supported by all the browsers. Objects are used as plugins in a web pages like Java applets PDF readers Flash Players ets.

shape Examples

The below example demonstrates the insertion of objects into the web pages.

<!DOCTYPE html>
<html>
	<body>
		<object data="splessons.jpg" height="150" width="150"></object>
	</body>
</html>

Output of the above code is as shown in below image.

Summary

shape Points

  • Images improve the beauty of the web page.
  • Many types of objects are used in HTML5 to develop web pages.
  • User can adjust images based on requirements.