Як вставити зображення в HTML

Автор: Florence Bailey
Дата Створення: 24 Березень 2021
Дата Оновлення: 25 Червень 2024
Anonim
Основы HTML. Как вставить изображение на интернет-страницу
Відеоролик: Основы HTML. Как вставить изображение на интернет-страницу

Зміст

Додати зображення на веб-сайт або сторінку в соціальній мережі - чудовий спосіб прикрасити сторінку. HTML (мова розмітки гіпертексту) має багато особливостей для веб-програмування, але код, необхідний для вставляння зображень, вкрай простий.

кроки

Метод 1 з 1: Вставити зображення в HTML

  1. 1 Закачайте зображення на безкоштовний хостинг, на кшталт Photobucket або TinyPic, що дозволяє використання ресурсів іншими серверами. На деяких сайтах це заборонено, так як займає пропускну здатність і місце на сервері.
    • Якщо у вас є платний хостинговий аккаунт, закачайте зображення туди. Це надійніше безкоштовного сайту.
  2. 2 Відкрийте новий документ в текстовому редакторі (наприклад, в Notepad), або сторінку на сайті, або профіль, де можна змінювати HTML.
  3. 3 Почніть з тега img. тег img одиночний, тобто йому не потрібен закриває тег, хоча, щоб домогтися відповідності стандартам XHTML, можна додати пробіл і слеш.
    • img />
  4. 4 Є багато доступних елементів, але абсолютно необхідний тільки:src. Він вказує на місцезнаходження або URL-адресу зображення.
    • img src = "URL зображення" />
  5. 5 Далі треба додати елемент alt. Він відповідає за текст, який буде показаний, якщо зображення з якихось причин не завантажиться. Цей текст також можуть використовувати сліпі користувачі, що використовують програми для читання екрану.
    • Якщо навести курсор на зображення, то запасний текст буде показаний в поясненні дії, але тільки в Internet Explorer. Кросбраузерності рішення (працює в Firefox та ін.) - використовувати елемент title на додаток до alt. Не робіть це, якщо не хочете пояснень дії.
    • наприклад:img src = "URL зображення" alt = "про всяк випадок" title = "Пояснення дії" />
  6. 6 тепер елементами height і width можна задати розміри зображення, а також вказати пікселі або відсотки. Зауважте, змінивши таким чином розмір, ви зміните розмір показується зображення, браузер все одно буде віддзеркалювати джерельні розмір зображення. Якщо ваше зображення занадто велике, то змініть його розмір в програмі-редакторі зображень, підійде PicResize.com
    • img src = "URL зображення" alt = "На всякий випадок" title = "Пояснення дії" height = "50%" width = "50%" />
    • img src = "URL of image" alt = "На всякий випадок" title = "Пояснення дії" height = "25px" width = "50px" />

Поради

  • Значення цих елементів вказується або в пікселях, або у відсотках від 1 до 100.
  • Картинку або зображення можна поставити куди завгодно на веб-сторінці з елементом top, bottom, middle, right, left і т.д.
  • Елемент hspace використовується для створення порожнього простору по горизонталі від зображення, вліво або вправо. Елемент vspace - зверху чи знизу.
  • Не перестарайтеся з зображеннями, все буде виглядати хаотично і непрофесійно.
  • Для логотипів і мультиків підходять зображення GIF, для складних зображень на кшталт високоякісних фотографій краще використовувати JPEG.
    • Зображення GIF підтримують від 8-бітного кольору до 256 кольорів. Використовуючи цей формат для фотографій, як ви щось втратите.
    • Зображення GIF підтримують прозорість. Може бути один біт прозорості, тобто один колір можна зробити прозорим.
    • Чергування також підтримується, тобто ще до завантаження користувач може оцінити, як зображення буде виглядати.
    • Формат GIF також підтримує анімацію.

попередження

  • Do not Hotlink!