Для створення веб-сторінок і навіть цілих сайтів, як відомо, використовується спеціальна мова розмітки HTML (Hypertext Markup Language), але без фотографій і різних зображень кожен сайт представляв би собою просто структурований і нудний текст. Саме тому для додавання зображень на сайті використовується спеціальний код, який гранично простий у використанні і дозволяє як вставити картинку в HTML в конкретне місце на сторінці, так і використовувати її в якості фону.
З чого почати?
Для того, щоб написати код, треба визначитися, якою програмою це зробити. Зараз їх існує величезна кількість, однією з найвідоміших є NotePad++. Вона володіє рядом функцій, дуже корисних при написанні коду, дозволяє виявляти помилки і не заплутатися в тегах. Проте якщо у вас немає можливості вдатися до допомоги спеціалізованих програм, можете скористатися простим блокнотом, код від цього не зміниться.
Який тег нам знадобиться
Визначившись з програмою для написання коду, потрібно зрозуміти, що в ній писати, як вставити картинку в HTML в блокноті або будь-якій іншій програмі. Почати слід з тега . Саме цей тег оголошує картинку в HTML-документі, він одиночний і не вимагає закриття.
А що далі?
Ми оголосили в коді, що збираємося використовувати зображення, але ми його ще не вказали. Так як вставити картинку в HTML? Для цього нам знадобиться атрибут src, який використовується з нашим тегом. Цей атрибут задає місцезнаходження нашої картинки незалежно від того, знаходиться вона на якомусь сайті, або на нашому комп’ютері.
- Якщо зображення буде розташовуватися на сторонньому сайті, то наш код буде виглядати наступним чином:
- У випадку знаходження картинки в тій же папці, що і наш HTML-файл, код буде виглядати так:
Альтернативний текст
У тега є ще один атрибут – alt. Використовують його для того, щоб у браузері було видно опис картинки, якщо з якої-небудь причини саме зображення не може бути завантажене. Його наявність бажано також для того, щоб слабозорі люди могли знати, що за зображення присутнє на сайті, адже текст, що знаходиться в значенні атрибута, озвучується програмами читання з екрану. Підсумковий код з атрибутами src і alt буде виглядати так:
Спливаючі підказки
Крім іншого, у тега є ще один атрибут title. Завдяки цьому атрибуту при наведенні курсору миші на зображення альтернативний текст буде відображений у підказці. Однак ця функція підтримується тільки браузером Internet Explorer, щоб такі підказки спливали в інших браузерах, потрібні спеціальні плагіни. Спливаючі підказки використовуються разом з атрибутом alt, вони не обов’язкові, але при їх використанні код буде виглядати наступним чином:
Розмір зображення
З тим, як вставити картинку в текст з HTML, ми розібралися. Але якщо ми хочемо зробити зображення трохи більше або менше? Для цього в HTML передбачені спеціальні атрибути: width (ширина) і height (висота). Значення даних атрибутів можуть бути як у відсотках, так і в пікселях. Якщо задати ширину в пікселях, а висоту у відсотках, то код прийме наступний вигляд:
Якщо вказати тільки один з атрибутів розміру, то другий буде вираховуватися автоматично, але так, щоб дотримати пропорції зображення. При зазначенні обох параметрів важливо пам’ятати, що якщо розміри будуть перевищувати вихідні, картинка розтягнеться, а якщо розміри менше – стиснеться.
Зображення в якості фону
А що якщо ми хочемо використовувати зображення не в тексті, а вставити картинку на фон HTML, як це зробити? Для цього нам знадобиться тег , без якого не обходиться жоден HTML-документ. Саме у нього укладено все видиме вміст документа, а його атрибути можуть задавати розмір, колір шрифту і в тому числі задній фон. Вставити картинку в HTML як зображення фону дуже просто, для цього нам потрібно буде використовувати атрибут background. Виглядати цей код наступним чином:
…
При формуванні фону веб-сторінки краще використовувати такі зображення, за допомогою яких можна досягти цікавих зорових ефектів, але які не заважали б нормально сприймати текст. Однак варто мати на увазі, що, можливо, вам доведеться змінити розмір і колір вашого шрифту, щоб полегшити його прочитання.
Обтікання зображення текстом
Іноді необхідно, щоб картинка була поряд з текстом, який огинав б її тим чи іншим способом. Але якщо вставити картинку просто всередину рядка, то графічно це буде виглядати некрасиво, текст буде розбитий неакуратно. Так як вставити картинку в HTML, щоб зображення органічно вписувався в дизайн сторінки? Для цього нам необхідний атрибут align тега . Цей атрибут може приймати два значення: left і right.
При використанні значення left зображення буде розміщено зліва від тексту, а при використанні атрибута right, відповідно, праворуч. Виглядати цей код буде так:
або
Якщо ж нам буде необхідно, щоб текст був розташований між двома зображеннями, код буде виглядати наступним чином:
І вже після цього коду буде розташовуватися текст, який потрібно укласти між двома цими картинками.
Зображення дозволяють урізноманітнити сайт, зробити його яскравішим, більш привабливими і більш запам’ятовується, але не забувайте, що занадто величезна кількість картинок сповільнить завантаження сайту і буде відволікати увагу від тексту.
