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

Урок 1. Перше знайомство Урок 2. Красиві документи Урок 3. Красиві програми Урок 4. Гіпертекст ... Урок 6. Конструктор документів Урок 7. Як ми жили без таблиць?

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

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

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

Браузери "розуміють" два графічних формати GIF і JPG.

Формат GIF

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

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

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

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

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

Приклад JPG-графіки Приклад JPG-графіки

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибут border = n

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

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

Випробувач (src, alt, width, height, border)

Атрибут align

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

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

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

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

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

Випробувач 3 (align)

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

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

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

Випробувач 4 (align)
Випробувач 5 (align)

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

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

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

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

Точний час? Натисни сюди!

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

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

Натисніть кнопку "Скидання", потім виберіть вірні відповіді на запитання.

  1. Запишіть ім'я команди для завдання картинки


  2. Запишіть ім'я атрибута для завдання файлу з картинкою


  3. Запишіть ім'я атрибута для завдання напису


  4. Запишіть ім'я атрибута для завдання положення картинки


  5. Запишіть ім'я атрибута для завдання товщини рамки


  6. Задаючи різні значення атрибутам width, height, можна змінити розмір картинки на диску.


  7. Який графічний формат можна використовувати для передачі високоякісних фотографій?


  8. Файл якого графічного формату може містити мультиплікацію?

  9.  
    Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка... Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.

    "Теплая струйка"
    Н.Сладков

    Встановіть атрибути команди
    IMG у відповідність з видом
    картинки в документі.
    align
    border
    alt


  10.  
    Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка... Бабочка крапивница Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.

    " Теплая струйка"
    Н.Сладков

    Встановіть атрибути команди
    IMG у відповідність з видом
    картинки в документі.
    align
    border
    alt


  11.  
    Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка... Бабочка Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.

    "Теплая струйка"
    Н.Сладков

    Встановіть атрибути команди
    IMG у відповідність з видом
    картинки в документі.
    align
    border
    alt


  12.  
    Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка... Бабочка крапивница Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.

    "Теплая струйка"
    Н.Сладков

    Встановіть атрибути команди
    IMG у відповідність з видом
    картинки в документі.
    align
    border
    alt


Щоб побачити результат роботи, натисніть кнопку "Оцінка".

  1. Веселий зоопарк. Створіть для дітей сторіночку з кумедними історіями про тварин. В якості ілюстрацій можна використовувати колекцію анімований картинок з каталогу "./pic05".

Зміст Зміст На урок 4 Урок 4 На урок 6 Урок 6


скачать софт