Головна Реєстрація Вхід
Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика
Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук
Вітаю Вас, Гість · RSS 24.04.2024, 19:25
На головну » Підручники » Підручник HTML » Урок 9: Зображення - Підручник HTML
Урок 9: Зображення

Здóрово було б помістити портрет актора і музичної легенди Девіда Хесселхоффа прямо в центрі вашої сторінки?!

Це звучить трохи зухвало ...

Може бути, але це досить просто зробити. Все, що вам необхідно, як завжди, - тег:

Приклад 1:

<img src="david.jpg" alt="David" />

буде виглядати в браузері:

David

Вам необхідно повідомити браузеру, що ви хочете вставити зображення / image ( img ), і вказати його розміщення ( src, скорочення для "source"). У вас є файл зображення?

Зверніть увагу, що тег img не вимагає наявності закриваючого тега. Як і <br />, це команда не пов'язана з буквеним текстом.

"David.jpg" це назва файлу зображення. ". Jpg" - розширення файлу, тип зображення. Як ". htm" вказує, що файл є HTML-документом, так і ". Jpg" повідомляє браузеру, що файл є зображенням. Є три типи файлів зображень, які можна вставити на ваші сторінки:
  • GIF (Graphics Interchange Format)
  • JPG / JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
GIF-зображення зазвичай краще за все для графіки та малюнків, а JPEG - для фотографій. Для цього є дві причини: перша - GIF-зображення містять тільки до 256 кольорів, а JPEG - до мільйонів кольорів, і друге - формат GIF краще стискає прості зображення, ніж JPEG, який оптимізовано під більш складні зображення. Чим вище стиснення, тим менше файл зображення, тим швидше завантажується ваша сторінка. Як ви, ймовірно, знаєте з власного досвіду, користувачі не люблять "важкі" сторінки.

Традиційно формати GIF і JPEG є переважаючими типами, але останнім часом стає все більш популярним формат PNG (перш за все із-за витрат формату GIF). Формат PNG за багатьма параметрами перевершує JPEG і GIF: мільйони кольорів і ефективне стиснення.

Де мені взяти файли зображень?

Для цього вам знадобиться програма редагування файлів зображень. Така програма вкрай необхідна для створення цікавих web-сайтів.

На жаль в Windows та інших операційних системах відсутні хороші програми для редагування зображень. Таким чином, ви може вкласти гроші в придбання Paint Shop Pro, PhotoShop або Macromedia Fireworks - це три найкращі програми редагування зображень, наявні в даний момент на ринку.

Однак, як ми говорили раніше, не обов'язково купувати дорогі програми для роботи з цим підручником. Ви можете завантажити прекрасну програму для роботи з зображеннями, Irfan View, яка є т. н. freeware, і, отже, нічого не коштує.

Або ви можете просто здерти зображення з інших сайтів, завантаживши відповідні сторінки. Але, будь ласка, будьте уважні, щоб не порушити при цьому авторських прав. Ось як завантажити зображення:
  1. Правою клавішею миші клацніть на зображенні в інтернеті.
  2. Виберіть "Save picture as ..." в меню.
  3. Виберіть місце для збереження на вашому комп'ютері і натисніть "Save".
Виконайте це з зображенням, розташованим тут, і збережіть його на вашому комп'ютері в тому ж місці, що і ваші HTML-документи. (Зауважте, що цей логотип зберігається у файлі формату PNG: logo.png):

Тепер ви можете вставляти це зображення у ваші сторінки. Спробуйте зробити це самостійно.

Це все, що потрібно знати про зображення?

Вам необхідно знати ще дві речі.

По-перше, ви можете легко вставляти зображення, розміщені в інших папках, або навіть на інших web-сайтах:

Приклад 2:

<img src="images/logo.png" />

Приклад 3:

<img src="http://htmlbook.at.ua/logo.png" />

По-друге, зображення можуть бути посиланнями:

Приклад 4:

<a href="http://htmlbook.at.ua"><img src="/img/logo.png" /></a>

буде виглядати в браузер приблизно так (спробуйте клацнути на зображенні):


Є ще атрибути, які мені потрібні?

Вам завжди потрібно використовувати атрибут src, який вказує браузеру, де знаходиться зображення. Крім цього є ще й інші атрибути, які можуть знадобитися при роботі з зображеннями.

Атрибут alt використовується для альтернативного опису зображення, якщо, з якихось причин, воно не показано користувачеві. Це особливо стосується користувачів з вадами зору, або якщо сторінка дуже повільно завантажується. Отже, завжди потрібно використовувати атрибут alt :

Приклад 5:

<img src="logo.png" alt="HTMLbook.at.ua logo">

Деякі браузери відображають текст цього атрибута в невеликому боксі при наведенні покажчика миші на зображення. Зверніть увагу, що при використанні атрибуту alt метою є дати альтернативне опис зображення. Атрибут alt не слід використовувати для створення спливаючих повідомлень, оскільки тоді користувачі зі слабким зором будуть змушені слухати повідомлення, не знаючи, що зображено на картинці.

Атрибут title можна використовувати для короткого опису зображення:

Приклад 6:

<img src="logo.png" title="Вивчайте HTML на HTMLbook.at.ua">

буде виглядати в браузері:


Якщо ви помістіть курсор, без клацання, над посиланням, ви побачите, що текст "Вивчайте HTML на HTMLbook.at.ua" з'явився у спливаючому боксі.

Два інших важливих атрибуту - width і height:

Приклад 7:

<img src="logo.png" width="141" height="32">

дасть в браузері:


Атрибути width і height можна використовувати для установки ширини і висоти зображення, відповідно. Значення вказується в пікселях. Піксель це одиниця для вимірювання роздільної здатності екрана. (Звичайний дозвіл - 800x600 і 1024x768 пікселів). На відміну від сантиметрів, пікселі є відносними одиницями, які залежать від вирішення даного екрану. Для користувача з високим дозволом екрану 25 пікселів можуть виглядати як 1 сантиметр, а ці ж 25 пікселів при низькій роздільній здатності можуть відповідати 1.5 сантиметрам екрану.

Якщо ви не встановите width і height, зображення буде показано у своєму реальному розмірі. За допомогою width і height ви можете змінювати розміри:

Приклад 8:

<img src="logo.png" width="32" height="32">

буде в браузері:


Непогано пам'ятати, що реальний розмір файлу зображення в кілобайтах залишиться незмінним, і цей файл буде займати той ж час для завантаження, як і раніше, хоча і буде виглядати на екрані зменшеним. Отже, ніколи не зменшуйте розмір зображення атрибутами width і height. Замість цього зменшуйте розмір зображення у програмі редагування.

Тим не менш, непогано використовувати атрибути width і height, оскільки браузер зможе визначати розмір зображення на сторінці до його повного завантаження. Це дозволить браузеру швидше і більш якісно завантажувати сторінки.

Ну, досить про Девіда Хесселхоффа і зображеннях =)
<< Урок 8: Посилання
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]