Урок 5: Робота з зображенням

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

GIF (Graphics Interchange Format)

JPG / JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

Пара слів про форматах:

GIF - використовує всього 256 кольорів і відповідно краще підходить для малюнків з малим кол -вом відтінків. Цей формат підтримує прозорість зображень.

JPEG - формат зображень, який використовує до мільйона квітів. Зазвичай використовується для фотографій та якісної графіки (з величезною кількістю відтінків).

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

У якому форматі брати зображення - справа Ваша, однак намагайтеся добитися максимальної якості при мінімальному розмірі.

Вставити зображення на сторінку дуже просто. Ось приклад якщо воно лежить в тій же папці що і сторінка.

<img src="pchela.jpg">

У результаті ми побачимо:

Що нам знадобилося: елемент IMG не має закриває тега і атрибут SRC (скорочення від source - положення) який вказує де знаходиться зображення. Ви легко можете вставляти зображення, розміщені в інших папках або на інших сайтах. Просто вкажіть правильний шлях (приблизно так як при створенні посилань).

Ось ще кілька прикладів з коментарями:

<! - Якби зображення знаходилося в папці images ->

<img src="images/pchela.jpg">

<! - Якщо б знаходилося на сайті www.zvirec.com ->

<img src="http://www.zvirec.com/pchela.jpg">

<! - Якщо б знаходилося на сайті www.zvirec.com в папці images ->

<img src="http://www.zvirec.com/images/pchela.jpg">

Ось ще дуже необхідні атрибути:

ALIGN - визначає спосіб вирівнювання картинки по горизонталі. Дуже корисна властивість при обтіканні малюнка текстом. Зазвичай використовують LEFT (вирівнювання по лівому краю, текст буде обтікати праворуч) та RIGHT (вирівнювання по правому краю, текст обтікає зліва). Якщо на сторінці є текст, то це обов'язкова властивість.

HSPACE і VSPACE - відступи в пікселях по горизонталі і по вертикалі від картинки до інших об'єктів документа. Легко запам'ятати назву якщо взяти і просто перекласти з англійської. HSPACE - Horizontal Space - горизонтальний відступ і VSPACE - Vertical Space - вертикальний відступ.

HEIGHT і WIDTH - висота і ширина зображення в пікселях. Золоте правило web -майстри - завжди явно задавати розміри картинки в атрибутах HEIGHT і WIDTH, резервуючи тим самим місце у вікні браузера ще до завантаження зображення. В іншому випадку документ під час завантаження кожної картинки буде заново перемальовуватись. А на повільних машинах (або при підключенні до мережі через модем) це виглядає просто огидно. Але в принципі, можна і не задавати розміри, просто буде довше завантажуватися. І ще, не раджу Вам спотворювати реальні розміри картинки.

Гаразд, краще все дивитися на прикладах:

<! - Перший приклад з відступами і вирівнюванням по лівому краю ->

<p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="left">

Будь Інтернет бізнес немислимий без сайту. Так що насамперед не завадило б навчитися створювати сайти. У даному випадку фраза " навчитися створювати сайти " означатиме - знати на хорошому рівні мову гіпертекстової розмітки HTML і каскадні таблиці стилів CSS, які значно розширюють можливості HTML і дозволяють створювати дійсно стильні та якісні сайти. </ P >

<! - Другий приклад з відступами і вирівнюванням по правому краю - >

<p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="right">

Будь Інтернет бізнес немислимий без сайту. Так що насамперед не завадило б навчитися створювати сайти. У даному випадку фраза " навчитися створювати сайти " означатиме - знати на хорошому рівні мову гіпертекстової розмітки HTML і каскадні таблиці стилів CSS, які значно розширюють можливості HTML і дозволяють створювати дійсно стильні та якісні сайти. </ P >

<! - третій приклад без відступів, з вирівнюванням по лівому краю ->

<p align="justify"> <img src="pchela.jpg" width="65" height="59" align="left">

любий інтернет бізнес немислимий без сайту. Так що насамперед не завадило б навчитися створювати сайти. У даному випадку фраза " навчитися створювати сайти " означатиме - знати на хорошому рівні мову гіпертекстової розмітки HTML і каскадні таблиці стилів CSS, які значно розширюють можливості HTML і дозволяють створювати дійсно стильні та якісні сайти. </ P >.

А є ще атрибути, які нам необхідні?

Ось ще пара корисних атрибутів - ALT і TITLE.

ALT - визначає текст, відображений браузером на місці зображення, якщо браузер не може знайти файл із зображенням або включений в текстовий режим. Як значення задається текст з описом зображення. Дивіться приклад:

<img src = "pchela1.jpg" alt = "бджола травня!!!" width = "65" height = "59">

Як бачите, я поміняв назву файлу, і браузер не зміг його знайти, тому показав текст, який вказаний в атрибуті ALT.

TITLE - Визначає заголовок картинки, тобто при наведенні на картинку висвітиться напис з текстом з атрибуту title. Ну от наприклад:

<img src="pchela.jpg" width="65" height="59" title="Бджола мая!!! ">

А як можна зображення зробити посиланням?

Для цього просто замість тексту посилання, вставляєте зображення. Ось наприклад:

<a href="http://www.zvirec.com">

<img src="pchela.jpg" width="65" height="59" title="Пчела мая!!! "border="0">

</ a>.

Що ще за border = "0" запитаєте Ви, а справа в тому, що коли робиш зображення посиланням, навколо нього з'являється некрасива рамка (border) і щоб її прибрати пишуть додатковий атрибут border.

Ну ось впринципі і все з зображеннями, як бачите нічого складного немає.