Як вставити зображення в HTML
Додати зображення на веб-сайт або сторінку в соціальній мережі - чудовий спосіб прикрасити сторінку. HTML (мова розмітки гіпертексту) має багато особливостей для веб-програмування, але код, необхідний для вставляння зображень, вкрай простий.
Кроки
Вставити зображення в HTML
1
Закачайте зображення на безкоштовний хостинг, начебто Photobucket або TinyPic, що дозволяє використання ресурсів іншими серверами. На деяких сайтах це заборонено, так як займає пропускну здатність і місце на сервері.- Якщо у вас є платний хостинговий аккаунт, закачайте зображення туди. Це надійніше безкоштовного сайту.
2
Відкрийте новий документ в текстовому редакторі (наприклад, в Notepad), або сторінку на сайті, або профіль, де можна міняти HTML.
3
Почніть з тега img. Тег img одиночний, тобто йому не потрібен закриває тег, хоча, щоб домогтися відповідності стандартам XHTML, можна додати пробіл і слеш.
4
Є багато доступних елементів, але абсолютно необхідний тільки:src. Він вказує на місцезнаходження або URL-адресу зображення.
5
Далі треба додати елемент alt. Він відповідає за текст, який буде показаний, якщо зображення з якихось причин не завантажиться. Цей текст також можуть використовувати сліпі користувачі, що використовують програми для читання екрану.- Якщо навести курсор на зображення, то запасний текст буде показаний в поясненні дії, але тільки в Internet Explorer. Кросбраузерності рішення (працює в Firefox та ін.) - Використовувати елемент title на додаток до alt. Не робіть це, якщо не хочете пояснень дії.
- Наприклад:
6
Тепер елементами height і width можна задати розміри зображення, а також вказати пікселі або відсотки. Зауважте, змінивши таким чином розмір, ви зміните розмір показуваного зображення, браузер все одно буде завантажувати вихідний розмір зображення. Якщо ваше зображення занадто велике, то змініть його розмір у програмі-редакторі зображень, підійде PicResize.com
Поради
- Значення цих елементів вказується або в пікселях, або у відсотках від 1 до 100.
- Картинку або зображення можна поставити куди завгодно на веб-сторінці з елементом top, bottom, middle, right, left і т.д.
- Елемент hspace використовується для створення порожнього простору по горизонталі від зображення, вліво або вправо. Елемент vspace - зверху чи знизу.
- Не перестарайтеся з зображеннями, все буде виглядати хаотично і непрофесійно.
- Для логотипів і мультиків підходять зображення GIF, для складних зображень начебто високоякісних фотографій краще використовувати JPEG.
- Зображення GIF підтримують від 8-бітного кольору до 256 кольорів. Використовуючи цей формат для фотографій, як ви щось втратите.
- Зображення GIF підтримують прозорість. Може бути один біт прозорості, тобто один колір можна зробити прозорим.
- Чергування також підтримується, тобто ще до завантаження користувач може оцінити, як зображення буде виглядати.
- Формат GIF також підтримує анімацію.
Попередження
- Do not Hotlink!
