Як вставити картинку в HTML на своєму сайті

Додавання зображень на ваш сайт або профіль у соціальній мережі - це відмінний спосіб прикрасити вашу сторінку. HTML (Hypertext Markup Language) відрізняється великою кількістю функцій веб-розробки, і при цьому код, необхідний для додавання зображень, є досить простим. Отже, як вставити картинку в HTML? Завантажте вашу картинку на сайт безкоштовного хостингу зображень, наприклад, Photobucket або TinyPic, які забезпечують постійний доступ до завантаженого файлу. Після копіювання посилання на зображення з'явиться безпосередньо на сайті хостингу. Разом з тим, якщо ви оплачуєте преміум-послуги такого сервісу, краще використовувати додаткові можливості. Це більш надійно, оскільки на безкоштовних хостингах зображень картинки іноді не відкриваються через перевантаження. Після того як ви залили» картинку на один з онлайн-сервісів, виберіть на своєму комп'ютері новий документ у текстовому редакторі (наприклад, Notepad) або зайдіть на панель редагування потрібної сторінки вашого сайту (де ви зможете змінити код HTML).




Написання тегів Продовжуючи говорити про те, як вставити картинку в HTML, почніть з тега IMG. Після нього ви повинні додати пробіл і знак слеш перед закриваючим символом. Таким чином, ви повинні набрати наступну комбінацію - . Крім цього, існує безліч доступних атрибутів, але тільки один з них є абсолютно необхідним. Таким є адресу або URL вашого зображення. Він вказується наступним чином - . Альтернативний текст Далі, намагаючись вставити картинку в HTML, ви повинні додати атрибут Alt. Це визначає альтернативний текст у тому випадку, якщо зображення не завантажується. Такий текст також призначений для слабозорих користувачів, які використовують програми читання з екрану. Якщо навести курсор миші на зображення, альтернативний текст відобразиться у спливаючій підказці, однак ця функція присутня тільки в Internet Explorer. Для того щоб побачити його в інших додатках, потрібні спеціальні плагіни. Щоб ввести таку підказку, введіть її у додаток до Alt. (Ви можете за бажанням пропустити цей крок). Якщо ви використовуєте цю функцію, посилання буде виглядати наступним чином:




Розміри і параметри картинки Продовжуючи виконувати інструкцію, як вставити картинку в HTML, ви можете вказати розмір зображення, використовуючи атрибути висоти і ширини, з зазначенням в пікселях або у відсотках. Зверніть увагу, що картинка буде відображатися за рахунок зміни розмірів при завантаженні. Браузер як і раніше буде спочатку використовувати фактичний розмір зображення. З цієї причини, якщо ваша картинка занадто велика, краще змінити її розмір з допомогою програм для редагування фотографій, а не тільки в адресі посилання. Тепер ваш код може виглядати приблизно так: Інші атрибути Значення цих атрибутів є або позитивним значенням пікселів, або процентним співвідношенням з оригіналом (1-100%). Говорячи про те, як вставити картинку в HTML, також можна зазначити, що вона може бути розміщена в будь-якому місці веб-сторінки з атрибутом вирівнювання - верхній, нижній, середній, правий, лівий і т. д. Атрибут HSPACE використовується для вставки зображень по горизонталі по лівій і правій стороні, VSPACE - для завантаження по вертикалі між верхньою і нижньою частиною сторінки і щодо іншого вмісту. Якщо говорити в загальному про HTML - як вставити картинку, і доповнити контент сторінки, головне - не перестаратися. В іншому випадку ваш ресурс буде виглядати неакуратно та занадто строкато». Для відображення логотипів або анімації GIF буде кращим рішенням, а для якісних картинок і фотографій більше підходить формат JPEG.