Урок 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.
Ну ось впринципі і все з зображеннями, як бачите нічого складного немає.