Основи вживання графіки в HTML

Категорії статей: HTML ; 11.07.2009

Засоби вживання графіки в HTML досить мізерні, і в принципі зводяться до вставки зображень на сайт у вигляді картинок або фону. Давайте познайомимося з можливостями прикрасити або надати сайту бажаного зовнішньому вигляду.
Вставить картинку на сторінку веб-сайту тег <img>, при цьому, обов'язковому атрибуту src має бути привласнене значення у вигляді імені файлу картинки (при необхідності можна буде вказати і шлях до файлу). Наприклад, зображення mal.jpg знаходиться в папці images (сама папка images знаходиться в тій же папці, що і сторінка веб-сайту), тоді аби вставити це зображення на сайт, потрібно записати наступне

Код
<img src="images/mal.jpg">

І тоді на місці даного тега браузер відображуватиме зображення.

квітка

Але окрім атрибуту src в тегу <img> можна використовувати наступні атрибути

  1. width - визначає ширину картинки, можна задати або в пікселях, або у відсотках від ширини вікна браузеру;
  2. height - визначає висоту картинки, можна задати або в пікселях, або у відсотках від висоти вікна браузеру;
  3. alt - визначає текст, який виводитиметься в прямокутнику відповідного розміру на місці зображення, якщо данне зображення не відображуватиметься по яких-небудь причинам(користувач відключив показ зображеннь у себе в браузері, сталася помилка при завантаженні зображення або просто зображення немає у вказаному місці);
  4. border - визначає товщину рамки довкола зображення в пікселях;
  5. hspace - задає горизонтальний відступ картинки від інших елементів веб-сторінки в пікселях;
  6. vspace - задає вертикальний відступ картинки від інших елементів веб-сторінки в пікселях;
  7. align - управляє розташуванням зображення відносно тексту, він може набувати наступних значень:
    • "left" - зображення вирівнюється по лівому краю документа, а текст обтікає зображення справа;
    • "right" - зображення вирівнюється по правому краю документа, а текст обтікає зображення зліва;
    • "middle" - базова лінія поточного текстового рядка вирівнюється з центром зображення;
    • "absmiddle" - центр поточного текстового рядка вирівнюється з центром зображення;
    • "top" і "texttop" - верхня лінія поточного текстового рядка вирівнюється з верхнім кордоном картинки;
    • "bottom" і "baseline" - базова лінія поточного текстового рядка вирівнюється з нижнім кордоном картинки;
    • "absbottom" - нижній кордон поточного текстового рядка вирівнюється з нижнім кордоном картинки.
Якщо у атрибутах width і height тега <img> задані величини, не співпадаючі з реальними розмірами картинки, то зображення масштабуватиметься до вказаних значень в атрибутах. При цьому якщо задані розміри більші, ніж існуючі розміри зображення, то зображення збільшиться і якість погіршає (спотвориться зображення або з'явиться так звана сітка). Що звичайно не дуже добре, тому, краще ставити реальні розміри картинки, хоча виключення все ж бувають.

Якщо ж розміри картинки в атрибутах будуть задані менші, ніж реальні розміри зображення, то картинка відображуватиметься із заданими розмірами, але об'єм завантажуваного трафіку відповідатиме реальному розміру зображення, тобто користувач даремно витрачатиме свій інтернет-трафік. Тому краще буде, спочатку зменшити розміри зображення до потрібних розмірів, а потім вже використовувати на сайті. Тобто виходить, в будь-якому разі краще відредагувати зображення в якій-небудь графічній програмі до потрібних розмірів, а потім вже вставляти це зображення на сайт.

Тегом <img> можна вставляти на веб-сторінку картинки наступних форматів: jpeg, gif, png. Але браузер Internet Explorer картинки формату png може відображувати не зовсім правильно, зокрема, при відображенні безбарвної складової зображення можуть з'являтися дефекти.
Наприклад

Код
<img src="images/mal.jpg" alt="квітка" width="200" height="100" border="0" hspace="10" vspace="10">

Аби на веб-сторінці як фон задати зображення, потрібно в атрибуті background тега <body> вказати ім'я файлу зображення. Наприклад

Код
<body background="images/mal.jpg">

При цьому якщо зображення менше вікна браузеру, то воно повторюватиметься по горизонталі і по вертикалі. Так само потрібно врахувати варіант, при якому по яких-небудь причинах фонове зображення не завантажиться і не відображуватиметься. І тоді при несприятливих збігах вміст веб-сторінки може вийти одного кольору з фоном сторінки і користувач ні чого не побачить. Аби цього не сталося потрібно атрибутом bgcolor все того ж тега <body> задати колір фону близький по відтінку до фонового зображення. Наприклад

Код
<body background="images/fonpage.gif" bgcolor="#aabbcc">

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.38MB | 0.01Sec ad Google