Додавання зображень на ваш сайт або профіль соціальної мережі - це відмінний спосіб прикрасити вашу сторінку. HTML (Hypertext Markup Language) відрізняється великою кількістю функцій веб-розробки, і при цьому код, необхідний для додавання зображень, є досить простим.
Отже, як вставити картинку в HTML?
Завантажте вашу картинку на сайт безкоштовного хостингу зображень, наприклад, Photobucket або TinyPic, які забезпечують постійний доступ до завантаженого файлу. Після копіювання посилання на зображення з`явиться безпосередньо на сайті хостингу. Разом з тим, якщо ви оплачуєте преміум-послуги такого сервісу, краще використовувати додаткові можливості. Це надійніше, оскільки на безкоштовних хостингах зображень картинки іноді не відкриваються через перевантаження. Після того як ви «залили» картинку на один з онлайн-сервісів, відкрийте на своєму комп`ютері новий документ в текстовому редакторі (наприклад, в Notepad) або зайдіть на панель редагування потрібної сторінки вашого сайту (де ви зможете змінити код HTML).
написання тегів
Продовжуючи говорити про те, як вставити картинку в HTML, почніть з тега IMG. Після нього ви повинні додати пробіл і знак слеш перед закриває символом. Таким чином, ви повинні набрати наступну комбінацію -lt; img />. Крім цього, існує безліч доступних атрибутів, але тільки один з них є абсолютно необхідним. Таким є адреса або URL вашого зображення. Він вказується в такий спосіб - lt; img src = "URL_вашей_картінкі" />.
альтернативний текст
Далі, намагаючись вставити картинку в HTML, ви повинні додати атрибут Alt. Це визначає альтернативний текст в тому випадку, якщо зображення не завантажується. Такий текст також призначений для людей з вадами зору користувачів, які використовують програми читання з екрану. якщо навести курсор миші на зображення, альтернативний текст відобразиться в підказці, проте ця функція присутня тільки в Internet Explorer. Для того щоб побачити його в інших додатках, будуть потрібні спеціальні плагіни. Щоб ввести таку підказку, введіть її в додаток до Alt. (Ви можете за бажанням пропустити цей крок). Якщо ви використовуєте цю функцію, посилання буде виглядати наступним чином:
lt; img src = "URL_вашей_картінкі" alt = "текст_вспливающей_подсказкі" title = "Tooltip" />
Розміри і параметри картинки
Продовжуючи виконувати інструкцію, як вставити картинку в HTML, ви можете додатково вказати розмір зображення, використовуючи атрибути висоти і ширини із зазначенням в пікселях або у відсотках. Зверніть увагу, що картинка буде відображатися за рахунок зміни розмірів при завантаженні. Браузер як і раніше буде спочатку використовувати фактичний розмір зображення. З цієї причини, якщо ваша картинка занадто велика, краще змінити її розмір з допомогою програм для редагування фотографій, а не тільки в адресі посилання. Тепер ваш код може виглядати приблизно так:
lt; img src = "URL вашої картинки" alt = "текст підказки" title = "Tooltip" height = "50%" width = "50%" />
lt; img src = "URL вашої картинки" alt = "текст підказки" title = "Tooltip" height = "25px" width = "50px" />
Інші атрибути
Значення для цих атрибутів є або позитивним значенням пікселів, або процентним співвідношенням з оригіналом (1-100%). Говорячи про те, як вставити картинку в HTML, також можна відзначити, що вона може бути розміщена в будь-якому місці веб-сторінки з атрибутом вирівнювання - верхній, нижній, середній, праві, ліві та т.д. Атрибут HSPACE використовується для вставки зображень по горизонталі по лівій і правій стороні, VSPACE - для завантаження по вертикалі між верхньою і нижньою частиною сторінки і щодо будь-якого вмісту. Якщо говорити в загальному про HTML - як вставити картинку, і як доповнити контент сторінки, головне - не перестаратися. В іншому випадку ваш ресурс буде виглядати неакуратно і занадто «строкато». Для відображення логотипів або анімації формат GIF буде кращим рішенням, а для якісних картинок і фотографій більше підходить формат JPEG.
