How To Insert Animated GIF in HTML
Last Updated on 08 April 2021
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
<img> tag to achieve this. If you didn’t have an idea how to use the
<img> 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.
<img src="https://media.giphy.com/media/JVGLHEuzbVviw/giphy.gif" alt="funny GIF" width="100%">
At the code above, I set the width as 100% to fit my blog post width. By using the <img> tag to display the animated GIF on your HTML web page, the URL of the image should be correct.
It might look like this.
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.
<!DOCTYPE html> <html> <head> <title>Simple Animated GIF web page</title> </head> <body> <h1>Funny Animated GIF</h1> <img src="https://media.giphy.com/media/JVGLHEuzbVviw/giphy.gif" alt="funny GIF" width="100%"> </body> </html>