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 <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.
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.
Формат GIF
И последний формат изображений, который мы рассмотрим в этой части, — GIF.
Формат был разработан для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий, но подходит для простейших анимаций.
Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.
В последнее время GIF-изображения становятся всё менее используемыми и заменяются на другие, более оптимальные форматы.
Таким образом, формат GIF подходит если:
- нужна простейшая анимация.
- index.html Сплит-режим
- style.css Сплит-режим
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
- Добавьте картинку с адресом files/gifka.gif в запись блога.
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
Установил путь к рисунку как /images/pic.gif, но рисунок не отображается на веб-странице. Почему?
Слэш (символ /) перед именем файла или папки обозначает, что отсчет ведется от корня сайта. Соответственно, путь /images/pic.gif следует понимать так. В корне сайта находится папка с именем images, а в ней располагается файл pic.gif. Данный способ записи работает под управлением веб-сервера, поэтому на локальном компьютере браузер интерпретирует путь как c:/images/pic.gif , а такой папки и файла, вероятнее всего, нет (пример 1).
Пример 1. Путь к файлу относительно корня сайта
HTML5 IE Cr Op Sa Fx
Если документ делается исключительно для локального использования, то пути к изображениям следует указывать относительно текущей веб-страницы. Для документов с последующей публикацией на веб-сервере пути относительно корня очень удобны. Они имеют компактную форму, а при переносе файла из одной папки в другую продолжают действовать.