Як вставити зображення в html: 6 кроків

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

кроки

Метод 1 з 1:

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

1. Закачайте зображення на безкоштовний хостинг, на кшталт Photobucket або TinyPic, що дозволяє використання ресурсів іншими серверами. На деяких сайтах це заборонено, так як займає пропускну здатність і місце на сервері.

Якщо у вас є платний хостинговий аккаунт, закачайте зображення туди. Це надійніше безкоштовного сайту.

Зображення з назвою Insert Images with HTML Step 2

2. Відкрийте новий документ в текстовому редакторі (наприклад, в Notepad), або сторінку на сайті, або профіль, де можна змінювати HTML.

Зображення з назвою Insert Images with HTML Step 3

3. Почніть з тега img. тег img одиночний, тобто йому не потрібен закриває тег, хоча, щоб домогтися відповідності стандартам XHTML, можна додати пробіл і слеш.

Зображення з назвою Insert Images with HTML Step 4

4. Є багато доступних елементів, але абсолютно необхідний тільки:src. Він вказує на місцезнаходження або URL-адресу зображення.

Зображення з назвою Insert Images with HTML Step 5

5. Далі треба додати елемент alt. Він відповідає за текст, який буде показаний, якщо зображення з якихось причин не завантажиться. Цей текст також можуть використовувати сліпі користувачі, що використовують програми для читання екрану.

Якщо навести курсор на зображення, то запасний текст буде показаний в поясненні дії, але тільки в Internet Explorer. Кросбраузерності рішення (працює в Firefox та ін.) - використовувати елемент title на додаток до alt. Не робіть це, якщо не хочете пояснень дії.

наприклад:

Зображення з назвою Insert Images with HTML Step 6

6. тепер елементами height і width можна задати розміри зображення, а також вказати пікселі або відсотки. Зауважте, змінивши таким чином розмір, ви зміните розмір показується зображення, браузер все одно буде віддзеркалювати джерельні розмір зображення. Якщо ваше зображення занадто велике, то змініть його розмір в програмі-редакторі зображень, підійде PicResize.com

Поради

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

Зображення GIF підтримують від 8-бітного кольору до 256 кольорів. Використовуючи цей формат для фотографій, як ви щось втратите.
Зображення GIF підтримують прозорість. Може бути один біт прозорості, тобто один колір можна зробити прозорим.
Чергування також підтримується, т.е. ще до завантаження користувач може оцінити, як зображення буде виглядати.
Формат GIF також підтримує анімацію.

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

Do not Hotlink!