How to use animated images in HTML pages?-HTML Tutorial-php.cn

How to use animated images in HTML pages?

PHPz

Release： 2023-08-24 08:13:03

forward

2722 people have browsed it

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”>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!