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

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

GIF ( Graphics Interchange Format )

JPG / JPEG ( Joint Photographic Experts Group )

PNG ( Portable Network Graphics )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</ a>.

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

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