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
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
[html]
<img src="Image URL" . . . attribute – list/>
[/html]
Example
The below example demonstrates how to add an image to the web page.
[html]
<!DOCTYPE html>
<html>
<body>
<img src="splessons.jpg" alt="splessons.com" >
</body>
</html>
[/html]
Output of the above code is as shown in below image.
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. Example
The below example demonstrates how to adjust 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]
Output of the above code is as shown in below image.
Description
User can also set the image borders using the
border attribute in which thickness is measured in the form of pixels. Examples
The below image demonstrates how to assign borders to the images using border attribute.
[html]<!DOCTYPE html>
<html>
<body>
<img src="splessons.jpg" alt="splessons.com" width="104" height="142" border="3">
</body>
</html>
[/html]
Output of the above code is as shown in below image.
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.
Examples
The below example demonstrates the insertion of objects into the web pages.
[html]<!DOCTYPE html>
<html>
<body>
<object data="splessons.jpg" height="150" width="150"></object>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
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.