Simple Animated GIF web page

How To Insert Animated GIF in HTML

Feel a regular image is too general? Want to make your site looks more cool? Let’s try to add some animated GIF images on your site.

To insert animated GIF in the web page. We use the html tag to achieve this. If you didn’t have an idea how to use the tag, we have another tutorial to teach you how to add an image on your website. At here, we use the same method, but we will place the image URL to the animated GIF URL.

To insert the GIF on your HTML web page, just add this link of code in your body element.

At the code above, I set the width as 100% to fit my blog post width. By using the tag to display the animated GIF on your HTML web page, the URL of the image should be correct.

Looks fun right? These GIF image are originated from giphy.com. There are many some others funny GIF on giphy.com.

If you are a completely beginning of HTML, but want to test it out with this code. You can simply run the code on the top-right side of the code snippet. If you want to create your own, HTML page from scratch. Check out How To Create an HTML Page. The code might looks like this.

     
Funny Animated GIF
   

Make it More fun and Attractive

There are a few ways to make the GIF image more attractive:

1. Add a Caption: You can add a caption to the GIF image to make it more interesting and engaging. For example, you can add a funny caption that relates to the image.
2. Add a Border: Adding a border to the image can help it stand out and make it more visually appealing. You can experiment with different border styles and colors to find one that complements the GIF.
3. Adjust the Size: Depending on where you plan to use the GIF, you may want to adjust its size to fit the space. A smaller size may work better for social media, while a larger size may be better for a website.
4. Change the Background: You can experiment with different background colors or patterns to make the GIF image stand out. A contrasting background can help the image pop.

Here’s an example of how you can modify the code to make the GIF image more attractive:

    /* add a border */ img < border: 2px solid #333; border-radius: 5px; >/* change the background */ body < background-color: #f5f5f5; >/* add a caption */ wh2 
Funny Animated GIF
  
When Your Monday Is a Prank.
  

Add Animation To The GIF Image

In this example, I’ve added a CSS animation that slides the caption in from the left when the page loads.

I’ve also added a CSS animation to the GIF image that rotates it continuously in a clockwise direction. You can adjust the animation duration, timing function, and other properties to customize the effect. Let me know if you have any other questions!

      
Funny Animated GIF
  
When Your Monday Is a Prank.
  

Источник

How to use an animated image in HTML page?

Animated images in HTML are an image on a web page that moves. It is in GIF format i.e. Graphics Interchange Format file.

We need to use the tag with the src attribute to add an animated image in HTML. The src attribute adds the URL of the image (file destination).

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 pagep> img src="https://tutorialspoint.com/images/html.gif"> body> html> 
 

DOCTYPE html> html> head> title>Animated Imagetitle> head> body> h1>Animated Imageh1> img src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif"> body> html> 
 

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 pagep> img src="https://tutorialspoint.com/images/html.gif" height="200" width="200"> body> html>