Вставити картинку в html на сайт можна за допомогою спеціального тега . Щоб зробити картинку в html на сторінці сайту потрібно 2 кроки:
1. Скопіювати картинку в потрібну папку;
2. У коді html у тега прописати атрибут src="https://webdeco.ru/stati/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0% B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F" , всередині якого вказується шлях до картинки. Html код картинки буде приблизно таким: як ви вже зрозуміли тег.
є одиночним та закриває тег не потрібно.
Відносні та абсолютні адреси картинки
У html мові можна вказати:
1. Відносна адреса картинки від кореня сайту "/my_img/1.jpg" Використовується найчастіше.
2. Відносна адреса зображення з поточного рівня "my_img/1.jpg" .
3. Абсолютна адреса картинки, наприклад "http://my-site.ru/my_img/1.jpg" . копіюються на сервер. Якщо ви напишете абсолютну адресу зображення на комп'ютері, то перед копіюванням цю адресу потрібно буде змінити, а це зайва робота.
Відносна адреса зображення значно зручніша, тому що під час написання коду html дозволяє відображати сайт як на комп'ютері, так і на сервері без змін адреси сайту в коді. Тому намагайтеся завжди, коли необхідно вставити картинку в html на сайт використовувати відносну адресу.
1 варіант адреси від кореня сайту краще і зручніше у використанні, ніж другий з поточного рівня, тому що буде працювати, навіть якщо ви перенесете файл з вихідним кодом на рівень нижче або вище. Але один варіант працює тільки, якщо у вас встановлений веб-сервер на особистому комп'ютері або в інтернеті.
У статті розбираємо, як додати зображення в HTML-код: який формат зображення підходить, як змінити розмір зображення в HTML, як задати вирівнювання і додати рамку.
Наш мозок влаштований так, що ми краще сприймаємо та запам'ятовуємо інформацію, яка підкріплена візуальними образами. Можна згаяти час на те, щоб згадати і записати закон всесвітнього тяжіння, але образ Ньютона, якому на голову падає яблуко, видається відразу. Згадайте, скільки корисної інформації відразу ж асоціюється з конкретною картинкою, схемою чи ілюстрацією.
Так само візуальна складова важлива для сайтів. Зображення привертають увагу, допомагають із сприйняттям інформації та впливають на зовнішній вигляд сторінок. Подивіться на вибір красивих сайтів з галереї SiteSee – на них більша частина інформації в картинках.
Якщо ви робите сайт на движку, швидше за все, картинки на сторінки можна додати за допомогою конструктора. Але якщо у вас самописний сайт або ви вирішили з нуля згорнути гарне розсилання, вам доведеться вставити зображення в HTML-код. Це нескладно, але для новачка у сайтобудуванні може здатися завданням із зірочкою.
У статті покроково і не поспішаючи розуміємось, як додати картинку в HTML 👇
Як вставити картинку в HTML-код:
Вибрати зображення
Перед тим як додати зображення до HTML-коду сайту, знайдіть джерело, з якого можна скачати картинки.Якщо ви використовуєте фотографії, які зробили самостійно, жодних проблем не виникне. Інша справа, якщо плануєте як тло або доповнення до дизайну сторінки вставити картинку в HTML з інтернету. Розміщення зображень на сайті без урахування авторського права власника може спричинити неприємні наслідки – вас можуть змусити видалити картинку або навіть оштрафувати.
Щоб убезпечити себе, перевіряйте умови, на яких можна використовувати вибрані зображення.
Використання картинок регулюється групою ліцензій Creative Commons. Це американська некомерційна організація, яка розробила варіанти угод, якими в інтернеті поширюється контент.
На сайтах для скачування картинок зустрічаються такі ліцензії та умови використання безкоштовних зображень:
- CC Attribution – щоб використовувати завантажені картинки, вкажіть автора.
- CC Attribution-NoDerivs — вкажіть автора та не видозмінюйте вихідне зображення.
- CC Attribution-NonCommercial — вкажіть авторство та використовуйте картинку з некомерційною метою.
- СС0 або Public Domain – Ви можете вільно використовувати в будь-яких проектах без вказівки авторства.
Для платних зображень є такі типи ліцензій:
- Royalty-Free — купуєте картинку один раз і використовуєте зображення без тимчасових обмежень. Ексклюзивні права залишаються у автора.
- Editorial – такі картинки не можна використовувати з комерційною метою.
- Rights-Managed – отримайте виняткове право на використання картинки.
Ось список сервісів із безкоштовними зображеннями:
Вони пропонують мільйони безкоштовних картинок у високій роздільній здатності під ліцензією СС0, яка дає вільно користуватися ними для своїх цілей.
Якщо не знайшли потрібну картинку на безкоштовних стоках, продовжуйте пошуки на платних сервісах:
Більшість зображень розповсюджуються за ліцензією Royalty- Free.
Доброго дня, шановні читачі блогу KtoNaNovenkogo.ru. Про те, які саме формати растрової графіки (Gif, Png, Jpg) і в яких випадках найкраще використовуватиме для вставки картинок на сторінки свого сайту, ми детально встигли поговорити зі статтею, посилання на яку наведено трохи вище.
Сьогодні ж ми докладно розглянемо всі аспекти використання тега Img для вставки зображень, подивимося як задати обтікання фотографії текстом у Html коді, дізнаємося як використовувати зображення як тло для сайту, як змінювати їх розмір та задавати вирівнювання (по центру, вліво та вправо).
Використання тега Img та його атрибутів Src, Width та Height
Отже, погляньмо, як можна використовувати графіку на своєму сайті. По-перше, це можливість вставляти зображення як елемент (об'єкт) у Html код сторінки. Саме така вставка здійснюється за допомогою Img, який є особливим. малим елементом із заміщуваним контентом, до яких відносяться лише чотири елементи мови гіпертекстової розмітки, одні з яких ми вже згадали, а три інших – Iframe (сучасний варіант використання фреймів), Object і Embed (для вставки відео та іншого медіа контенту).
Поводиться він точно як малий елемент, але всередині нього відображається сторонній зовнішній контент (фото у випадку Img або відео і флеш у випадку Object і Embed).Будь-який з цих чотирьох елементів має на увазі наявність зовнішнього файлу, який буде підвантажуватися ось в цю область, задану в ньому атрибутами.
Для вказівки шляху до графічного файлу, який повинен підвантажуватись на сторінку, служить спеціальний атрибут Src.
Браузер користувача при розборі Html коду сторінки, як тільки зустріне в ньому тег Img, відразу створює область для рядкового елемента, в яку завантажується зовнішній файл (наприклад, фотографія) Шлях до файлу браузер бере з вмісту Src.
Коли зображення починає завантажуватися з вашого сервера на комп'ютер користувача, браузер визначає справжні розміри цієї картинки і розсуває на ці розміри ту мале місце, яку створив при виявленні в коді елемента Імг.
Якщо ви хочете, щоб браузер відразу ж виділяв для цього елемента область потрібного розміру, а не потім її змінював при отриманні даних про розмір завантажуваного зображення, ви повинні обов'язково вказати атрибути Width та Height.
Якщо ви задали їх, тоді браузер користувача створює область з потрібними розмірами і туди вже буде вписувати ваше фото, навіть якщо воно іншого розміру. До речі, іноді доводиться зустрічати на сайтах початківців таку помилку.
На сервер заливається графічний файл величезного розміру і вагою в кілька мегабайт (відразу після фотографування без обробки) і прописується до нього шлях у Src. ширині та висоті.
І що виходить у результаті? Відвідувач такого сайту спостерігає пригнічуюче повільне підвантаження зображення в порівняно малу область, задану в згаданих атрибутах (кілька мегабайт ваги вписуються в розмір 300 на 400 пікселів).
Тому відразу ж робіть картинки для викладання в Інтернет того самого розміру, який ви будете показувати на сайті і прописувати в Width і Height тега Img. Поважайте своїх користувачів і не витрачайте їх трафік (особливо мобільний). Стиснути фото можна, наприклад, у FastStone Image Viewer або будь-якому іншому графічному ректорі, наприклад онлайн фотошопі Пікслр.
До речі, крім завчасного зменшення розміру зображень для вставки на сторінки сайту, слід ретельно підійти ще й до оптимізації ваги. Іноді можна без втрати якості досягти кратного зменшення ваги графічних файлів, що призведе до набагато швидше їх завантаження і зниження навантаження на сервер хостингу. Можете для цієї мети скористатися дуже зручним та ефективним онлайн сервісом оптимізації зображень.
Тепер давайте подивимося, яким чином можна вказати шлях до файлу із зображенням у Src тегу Img. Власне, можна використовувати і відносні та абсолютні посилання, про які вже досить докладно писав у наведеній статті. Все залежить від нюансів та зручності.
Тобто. Src може містити, наприклад, такі записи:
У першому випадку, графічний файл повинен лежати в тій же папці, що й файл вашої веб-сторінки (у разі використання вами CMS, перші два варіанти вам навряд чи підійдуть, хоча завдання фонового зображення в CSS це дуже зручно).По-друге, графіка лежить у вкладеній папці щодо файлу вашої сторінки, а в третьому випадку, в Src вказаний абсолютний шлях до файлу з картинкою.
І тут слід звернути увагу на те, що картинка, яку ви вставляєте в Html код, може лежати абсолютно на будь-якому сервері. Тобто. ви можете, скажімо, скопіювати шлях до неї на моєму блозі і вставити цей шлях в атрибут Src тега Img на своєму сайті. Все буде чудово працювати, правда, якщо я не забороню подібні дії в .htaccess на своєму сервері, але це вже окрема пісня (погуглите на тему «Захист від хотлінків»).
Взагалі, за правилами мови Html, на вашому сервері повинен знаходитися тільки сам документ (web сторінка), а решта документів і файлів (графіка, відео, скрипти, стилі), які будуть підвантажуватися разом з ним, можуть знаходитися на різних серверах.
У цьому, до речі, полягає один із способів підвищення швидкості завантаження. Та й ті самі лічильники відвідувань, які ви напевно використовуватимете на своєму ресурсі для спостереження за статистикою відвідуваності, теж будуть підвантажувати свої інформери та скрипти з відмінних від вашого хостів.
Як вставити картинку з посиланням, призначення Alt та Title у Img?
Якщо Img за своєю суттю є малим елементом, його можна просто вважати великою літерою, Отже нам ніщо не заважає зробити зображення посиланням, уклавши цей тег всередину гіперпосилання. Взагалі, про це я вже досить докладно писав у недавній статті про створення гіперпосилання в Html коді, але трохи повторитися буде не гріх.
У браузері IE навколо картинки, яку ви зробили посиланням, з'явиться рамочка шириною три піксели. Щоб її прибрати, вам потрібно буде додати до тега Img атрибут Border зі значенням нуль:
Для всіх тих випадків, коли графічний файл з яких-небудь причин не може підвантажитися разом з Html документом (шлях до нього прописаний неправильно або ще щось), передбачений спеціальний атрибут Alt.
Alt виконує роль альтернативного представлення зображення. Що відбувається у тому випадку, коли графіка не вантажиться? Браузер все одно, виявивши в коді елемент Img, формує під нього область, яка в залежності від використовуваного користувачем браузера може залишатися заданого розміру, або хлопатися.
Але щоб користувач мав уявлення, що на цьому місці сторінки має бути картинка, ви і прописуєте Alt в Img, де і вводите текст з описом того, що тут має бути зображено. Вміст Alt будуть виводитися в області фотографії, що не підвантажилася.
Ну, і крім цього, для картинок в Html коді, а так само і для інших елементів мови гіпертекстової розмітки (наприклад, все для тих же посилань) є можливість при наведенні користувачем на них курсором миші показувати йому якийсь супроводжуючий текст.
Робиться це за допомогою спеціального атрибуту Title, що у нашому випадку вставляється в Img. Він по суті є підказкою і його можна використовувати практично для всіх видимих на сторінці елементах Html коду, коли вам потрібно щось додатково пояснити.
Раніше, до речі, до підказки приводило і додавання тексту Alt, але зараз від такої поведінки відмовляються і цей атрибут тепер в основному виконує тільки роль альтернативного тексту, а Title використовується виключно для підказок.
Насправді вміст Alt і Title тега Img не тільки служить для зручності відвідувачів вашого сайту, але й може дуже важливу роль на успішність просування вашого проекту.
Для цього потрібно не забувати вживати в них ключові слова, як я про це неодноразово писав, наприклад, у статті про просування сайту самотужки або ж у публікації про те, як розкрутити сайт самому.
Ключові слова в Alt та Title (особливо в Alt) можуть помітно покращити ранжування вашого сайту, а так у сервісах пошуку за зображеннями (картинками) Яндекса чи Google. Однак із цим потрібно бути обережнимБо досить легко можна потрапити під фільтр за спам від Яндекса або Гугла.
Обтікання картинки текстом у Html – атрибут Align тега Img
Тепер давайте поговоримо про вирівнювання вставлених зображень у коді Html. У всіх чотирьох малих елементів з вмістом, що заміщується (Img, Iframe, Object і Embed) є можливість вирівнювання за допомогою атрибуту Align. Але він взагалі-то застосовується лише для блокових елементів, а згадані теги – малі.
Тому деякі значення Align для Img (наприклад, завдання обтікання картинки текстом) будуть означати зовсім інше, ніж при використанні цього атрибута в блокових елементах (параграфах P, заголовках H1-H6 і т.п.).
Взагалі, вирівнювання картинок за допомогою Align при використанні Img можна розділити на дві групи.
Отже, що відбувається, коли ми вставляємо графічний файл у текст документа? Фактично він постає як одна велика літера:
За замовчуванням використовується вирівнювання нижнього краю, тобто. додавання елемента Img атрибута align="bottom" нічого не змінить. Але можна спробувати задати вирівнювання картинки по верхньому краю, додавши в елемент align="top":
У цьому випадку сталося вирівнювання тексту в рядку, де розташована фотографія, по верхньому краю.
Можливе ще одне значення цього атрибуту align="middle":
У цьому випадку текст у рядку з картинкою вирівнюватиметься посередині цього самого малюнка.
Але крім вирівнювання по вертикалі в Html передбачено обтікання картинок текстом, для чого використовуються значення Left та Right. Ця група значень атрибуту Align дуже відрізняється від попередньої.
При використанні значень Left і Right всередині елемента Img ми домагаємося так званого обтікання картинки текстом, яке задається в Html коді. У цьому випадку малюнок стає плаваючим елементом (аналог Float CSS) і текст починає її обтікати.
Наприклад, при align="left" ми отримаємо такий результат:
Значення Left в Img означає, що фото плаває ліворуч, а текст її обтікає праворуч. У випадку align="right" картинка плаватиме праворуч, а текст її обтікатиме зліва:
При завданні обтікання зображення текстом є один нюанс – текст занадто близько розташовується від нього, що створює неприємний для ока ефект прилипання. Цю проблему дуже легко вирішити за допомогою CSS властивостей padding або margin, але й у чистому Html існує своє рішення.
Для цього можна використовувати атрибути елемента Img Hspace та Vspace. За допомогою них віджимається обтічний текст від зображення. Hspace задає відступи ліворуч і праворуч від зображення до тексту, що обтікає, а Vspace — зверху і знизу. Відступи задаються в пікселах, наприклад:
Background – як зробити фон для сайту в чистому Html
Графічні файли можна використовувати не тільки як елементи коду сторінки, але і як заливку як її тло.Взагалі, фон для сайту в мові Html можна встановити або кольором, або за допомогою фонових зображень. Ну, а в сучасній верстці з використанням властивостей CSS , фонові картинки (background image) є одним з основних елементів, бо ніяких елементів оформлення, вставлених за допомогою Img на сторінках сучасних сайтів, немає.
Тому фонові зображення відіграють важливу роль у сучасній верстці з використанням CSS (поговоримо про це у наведеній статті). Поки що ми розглянемо, як це все робиться в чистому Html за допомогою атрибуту Background елемента Body та тегів таблиці Table, показує шлях до графічного файлу, яким буде залита web сторінка або таблиця (або її окрема комірка).
Наприклад, додавши до Body атрибут Background наступного виду:
Ми отримаємо фон для нашого сайту, що складається з розмноженої фотки, якою буде заповнена вся видима область на кшталт плитки:
Фонове зображення, починаючи з верхнього лівого кута, повторюється відразу по двох осях (абсцис і ординат). Наступне стиковується з попереднім і т.д. До речі, якщо ви захочете залити фон сторінки або таблиці одним кольором, то для цього потрібно використовувати вже не Background, а атрибут bgcolor, як значення якого ви можете вставити код кольору, наприклад, так:
То отримаємо наступний колір фону, заданий через bgcolor:
Так само, як і у випадку з атрибутом background, bgcolor можна ще використовувати і для завдання фону всієї таблиці або окремих її елементів.
Увага! Атрибути bgcolor та background зараз не рекомендуються до використання. Як і інші описані вище атрибути, що задають обтікання та відступи. Замість них потрібно використовувати відповідні CSS властивості.
Успіхів вам! До швидких зустрічей на сторінках блоґу KtoNaNovenkogo.ru
- 💶 Binance – найкраща криптобіржа у світі
- 🏦 Ексмо – найкраща криптобіржа в рунеті
- ⛏ ВоркЗилла – віддалена робота для всіх
- 📃 Etxt – платять за написання текстів
- ✍ Кьюкоммент – біржа коментарів
- 🤑 60сек – вигідний обмін криптовалют
- 👍 Вктаргет – заробіток у соцмережах
- 👉 Дивитись все.
Коментарі та відгуки (20)
Такої вичерпної та повної інформації щодо картинок знаходжу тільки тут. Мій блог moneytime.com.ua давно вже зробив ставку на зображення. І воно того варте.
Дмитре, вкотре дивуюсь Вашій працьовитості.
Банально. але скільки я раніше з цим помучалася поки розібралася – так що думаю ця стаття багато кому допоможе.
Тим більше, як і все, що ти пишеш дуже грамотно і зрозуміло!
Все забувається, тож думаю ще не раз залізу сюди за підказкою.
Зізнайся чесно – основну картинку матеріалу сам робив.
Катя: ні, горила не моя. Дружина колажик зробила, але вже з готових фото.
Хороший, докладний опис, тільки img тег у Вас не закритий. Для XHTML це неправильно.
Дмитре, спасибі величезне за таку докладну та зрозумілу статтю! Підкажіть, будь ласка, чи є у вас на сайті (шукала, але, на жаль, не знайшла) інформація про те, як вставити ВІДЕО на сторінку за допомогою HTML? Причому, не з YouTube і подібних ресурсів, а просто собі на сервер і за допомогою спец. html-коду. Щоб цей код працював не тільки в Internet Explorer, а читався всіма чи хоча б більшістю браузерів. Допоможіть, будь ласка! Декілька днів шукаю відповідну інформацію, поки безуспішно:(
Дуже дякую! Просто врятували мене. Доступно, зрозуміло, а головне допомогло. Хоча я в цьому повний нуль. Навіть без палички.
Спасибі за вашу працю-але хотілося б,щоб ви додали у цей пост ще матеріалу у тому, як зробити одну картинку посиланням кілька джерел, тобто. при кліку на її верхню частину наприклад картинка посилалася на яндекс, а при кліку на нижню на гугл.
Млинець години 3 вже шукаю. Як вставити картинку в DIV в коді HTML щоб вона стала тлом ДИВА?
VeX: за допомогою CSS властивості background-image
У мене також проблема, що і в Ірини від 1.03.2012 — не вдається вставити відео (з робочого столу) на сторінку сайту.
Ну все перерахував. А де тег для тексту нижче за картинку?! Що таке скрізь одне й теж. Де тег для тексту нижче зображення. Я в люті
А чи можливо якимось чином зробити так, щоб якщо не підвантажується відео на сайті, на цьому місці з'являлася певна картинка?
Значення 0 треба включити до лапок border="0"
Для того щоб пройти валідність (http://validator.w3.org/) наведено правильний приклад, обов'язково alt і наприкінці через пропуск /
Підкажіть як реалізувати підсвічування при наведенні на картинку (приклад праворуч рекламний блок, та посилання на сайт http://buldoors.ru/mastino/). Не вперше бачу, тому хочу у себе на сайті таке. Та й комусь знадобиться.
Ви не підкажете, що я роблю неправильно? Хочу поставити дві невеликі картинки по краях, а в середині текст. Права ніяк не хоче стати на одному рівні з лівої. У Вас на блозі все розписано дуже зрозуміло, з прикладами, а саме моєї проблеми немає.
Підкажіть як вставити картинку в phpсторінку між цим кодом
виникла така проблема – при додаванні картинок (через браузер opera) у вордпресі зображення завантажуватися стало ось у такому форматі:
а раніше було автоматики ось у такому вигляді:
як зробити, щоб завантажувалося у форматі другого варіанту, бо в першому випадку не збільшиться картинка після завантаження при натисканні на неї на сайті ((( допоможіть, пжл!).
Ваш коментар чи відгук