Урок 5. Графіка

Бракує картинок

Справді, ілюстрації в тексті радують око і роблять документ більш привабливим. Пора і нам записати в свій актив виведення картинок засобами HTML.

Який графічний формат можна використовувати

Браузери “розуміють” багато графічних форматів GIF, JPG, PNG тощо.

Формат GIF

Картинки в цьому форматі підтримують 256 кольорів. У більшості випадків цього цілком достатньо для отримання якісних ілюстрацій, але до фотографічної якості, звичайно, далеко.

GIF-формат має три приємні додаткові можливості:

• Мультиплікація.
  Використовуючи анімаційний GIF-редактор, легко зібрати простий мультик: намалювати окремі кадри, налаштувати час затримки в послідовності показу, “зациклити кіно” або показувати кадри тільки один раз. Коли анімація готова, вона записується на диск як звичайний GIF-файл. Хоча в цьому файлі не одна, а ціла серія GIF-картинок і різна настроювальна інформація.

  В HTML немає відмінності між завданням виведення на екран простого GIF або анімованого. Про те, що картинка “жива” – браузер дізнається в момент завантаження GIF-файлу (з диска або мережі) і виконує відповідно. Звичайні картинки він просто розміщує на екрані і “забуває” про них. Анімовані йому доводиться опікати постійно, змінюючи кадри на екрані відповідно до програми, закладеної в самому GIF.

  Звичайний GIF	Анімований GIF

• Прозора графіка.
  GIF-формат дозволяє один або кілька кольорів в зображенні оголосити прозорими. Це дозволяє позбутися від строго прямокутних ілюстрацій і вписувати малюнок у документ більш привабливим чином. Прозорий колір задається в редакторі при запису GIF-файлу на диск. Звичайний GIF легко зробити прозорим. Потрібно просто завантажити його в GIF-редактор або PhotoShop і знову записати на диск, вказавши прозорі кольори.

  Звичайний GIF	Прозорий GIF

• Черезрядкова розгортка.
  Застосовується для великих GIF. Ілюстрація розділяється на чотири частини, розміром з оригінальну картинку. Перша частина містить 1, 5, 9, … рядок вихідного зображення. Друга – 2, 6, 10, … Третя – 3, 7, 11, …. Четверта – 4, 8, 12, …
  Браузер будує на екрані спочатку першу частину картинки, потім другу, потім третю і четверту. Виходить ефект поступової прояви зображення. На повільних лініях Інтернету цей метод дозволяє користувачеві ще до завантаження всіх частин отримати уявлення про зображення – адже частини будуються браузером в міру їх надходження на комп’ютер. Якщо картинка завантажується не по мережі, то відмінності виведення звичайного GIF і черезрядкового на швидких комп’ютерах практично непомітні.

Формат JPG

Цей формат був розроблений спеціально для передачі фотографій. Він підтримує мільйони кольорів і дозволяє отримувати зображення дуже високої якості.

Звичайно, висока якість відображується на розмірах файлу. Але формат JPG має одну особливість: в JPG-редакторі, при записі на диск, можна вказати ту ступінь якості, яка потрібна і, тим самим, балансуючи на планці “якість-розмір файлу”, досягти потрібного компромісу. Справді, якщо з мільйона кольорів відсканованої фотографії залишити тільки 10 000, замінивши інші кольори на близькі – на око таку підміну буде виявити практично неможливо, а розмір файлу істотно скоротиться.

JPG-формат підтримує режим, схожий на черезрядковий GIF. Але на відміну від GIF, поділ на частини відбувається не по рядках, а по алгоритму виділення з картинки повноформатних частин.
При цьому кожна наступна частина з якості вище попередньої. JPG в такому режимі називається прогресивним.

Як програмувати картинки

Картинка в тексті

Картинку можна поміщати в документ майже так само, як текстовий символ. Для вставки цього незвичайного знака потрібно скористатися командою <IMG>. Команда не має парного закриваючого тега, але має багато атрибутів.

Атрибут src = і’мя файла

Найголовнішим атрибутом команди є атрибут src, за допомогою якого можна задати ім’я файлу з картинкою. Наприклад, команда <IMG src = img1.gif> змусить браузер відобразити на екрані графічний файл img1.gif з поточного каталогу.

Зазвичайно графічні файли не змішується з HTML-текстами, а поміщають в окремий каталог PIC, який є підкаталогом для каталогу з програмами (html-файлами). Тоді команда виводу графіки матиме вигляд:
<IMG src = /wp-content/pic/img1.gif>

Атрибут alt = “текст напису”

Якщо браузер не знаходить картинки в зазначеному місці на диску, він замість неї малює на екрані маленький прямокутник і вписує в нього напис, яка задана атрибутом alt:

<IMG src=monstr.jpg alt="Страшний звір">

Атрибут alt рекомендується використовувати завжди. Навіть якщо картинка знайдена браузером, завдання напису не буде зайвим: варто користувачеві зупинити курсор на картинці, як напис з’явиться в маленькому віконці і повідомить додаткову інформацію. Перевірте це на наступній картинці:

<IMG src=/wp-content/pic07/cat7.gif alt="А нас і тут непогано годують!">

Атрибути width = n і height = m

Ці атрибути задають ширину і висоту (у пікселях) прямокутника, в який виводиться картинка. Якщо атрибути не задані, картинка малюється в природних розмірах. Коли розміри прямокутника не збігаються з розмірами картинки, браузер виконує масштабування картинки, підганяючи її під зазначені величини.

Атрибут border = n

Атрибут дозволяє задати рамку ілюстрації товщиною в n пікселів.
За відсутності атрибута, або при значенні n = 0 рамка не малюється.

Нижче розташовані посилання на випробувальні стенди. На них можна перевірити роботу атрибутів src, alt, width, height, border , як окремо, так і в сукупності.

Атрибут align

Цей атрибут дозволяє визначати положення ілюстрації по відношенню до сусідніх елементів документа. Можна використовувати наступні значення атрибута:

• align=top – вертикальне вирівнювання по верхньому краю;
• align=middle – вертикальне вирівнювання по центру;
• align=bottom – вертикальне вирівнювання по нижньому краю;
• align=left – горизонтальне вирівнювання по лівому краю;
• align=right – горизонтальне вирівнювання по правому краю.

Давайте задамо невеликий текстовий абзац і розмістимо всередині нього картинку:

<P>
  Подивіться на картинку.
  <IMG src=/wp-content/pic/4.jpg align=middle>
  Красива пташка!
</P>

Тепер можна зазирнути в випробувальний куточок і подивитися, що відбувається з зображенням при різних значеннях атрибуту align.

Досліди з “Випробувачем 3” мають недоліки:

• Не видно роботу атрибута align, коли картинка поміщається не в середину абзацу, а в його початок або кінець;
• Не зрозуміло, як працюватиме атрибут align, якщо картинка поміщається в великий текст. Чи буде текст “обтікати” картинку, а якщо так, то як?

Можна отримати відповіді на ці питання, попрацювавши на наступних стендах.

Картинка як посилання

Дуже легко змусити працювати картинку як гіперпосилання. Досить вкласти команду IMG всередину команди A:

<A href=перехід …> <IMG src=файл …> </A>

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

Для картинки з годинником не заданий атрибут border. Тим не менш, ми бачимо рамку. Ця рамка з’являється тому, що картинка є гіперпосиланням.
Часто рамка навколо картинки небажана, навіть коли вона означає посилання. Адже про посилання однозначно говорить зміна форми курсора, а якщо картинка – прозорий GIF – рамка виглядає негарно.
Позбутися від рамки, навіть коли картинка – посилання, можна явним завданням border=0.

 

Посилання без рамки (заданий border = 0)	Посилання з рамкою (border не заданий)
<A href=05ex0401.htm> <IMG src=/wp-content/pic/auto.gif alt="Спробуй, дожени!" border=0> </A>	<A href=05ex0401.htm> <IMG src=/wp-content/pic/auto.gif alt="Ех, не наздогнати... Посадили у клітку!"> </A>