Example 1 The following is an example showing how to use animated images in an HTML page - Example 1 The following is an example showing how to use animated images in an HTML page -

Home  >  Article  >  Web Front-end  >  How to use animated images in HTML pages?

How to use animated images in HTML pages?

PHPz
PHPzforward
2023-08-24 08:13:032708browse

Animated images in HTML are images that move on a web page. It is in GIF format, or Graphics Interchange Format file.

We need to add an animated image in HTML using the tag and the src attribute. src attribute adds the URL (file location) of the image

In addition, we can also use the height and width attributes to set the height and width of the image.

How to use animated images in HTML pages?

grammar

<image src=”Animated image”>

Example 1

The following is an example showing how to use animated images in HTML pages -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>Adding Animated Images to the web page</p>
   <img  src="https://tutorialspoint.com/images/html.gif" alt="How to use animated images in HTML pages?" >
</body>
</html>

Example 2

Translated into Chinese:

Example 2

You can try running the following command to process animated images in HTML -

<!DOCTYPE html>
<html>
<head>
   <title>Animated Image</title>
</head>
<body>
   <h1>Animated Image</h1>
   <img  src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif" alt="How to use animated images in HTML pages?" >
</body>
</html>

Example 3

We can change the height and width of animated images using stylesheets.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p> dding Animated Images to the web page</p>
   <img  src="https://tutorialspoint.com/images/html.gif"    style="max-width:90%"  style="max-width:90%" alt="How to use animated images in HTML pages?" >
</body>
</html>

The above is the detailed content of How to use animated images in HTML pages?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete