Практична робота №5.
Тема: “Використання графічних та мультимедійних елементів.”
Теоретичні відомості.
Графіка
Не вистачає картинок
Ілюстрації в тексті радують око і роблять документ привабливішим. Пора і нам записати в свій актив виведення картинок засобами HTML.
Який графічний формат використовувати?
В Інтернеті найбільш популярні два графічні формати: GIF і JPG. Звичайно використовують:
JPG - для фотографій і дуже складних по колірній гаммі малюнків з плавними колірними переходами;
GIF - для логотипів, написів, заголовків, малюнків, що мають чіткі колірні межі.
Більш докладні рекомендації по вибору формату див. в Частині 111. Практикум на «кухні» Сидорова (Назаметка 2).
Формат GIF
Картинки в цьому форматі підтримують 256 кольорів. В більшості випадків цього цілком достатньо для отримання якісних ілюстрацій, але до фотографічної якості, звичайно, далеко.
GIF-формат має три додаткові нагода.
□ Мультиплікація. Використовуючи анімаційного GIF-редактора, легко зібрати простий «мультик»: намалювати окремі кадри, набудувати час затримки в послідовності показу, «зациклити кіно» або показувати кадри тільки один раз. Коли анімація готова, вона записується на диск як звичайний GIF-файл. Але в цьому файлі не одна, а ціла колекція GIF-картинок і різна настроювальна інформація.
В HTML немає відмінності між завданням висновку на екран простого GIF або анімованого. Про те, що картинка «жива» - браузер взнає у момент завантаження GIF-файлу (з диска або по мережі) і поступає відповідно. Звичайні картинки він просто розміщує на екрані і «забуває» про них. Анімовані йому доводиться опікати постійно, міняючи кадри на екрані відповідно до програми, закладеної в самому GIF-файлі.
□ Прозора графіка. GIF-формат дозволяє один або декілька кольорів в картинці оголосити прозорими. Це допомагає позбутися строго прямокутних ілюстрацій і вписувати малюнок в документ привабливішим чином (мал. 5.1). Прозорий колір задається в редакторі при записі GIF-файлу на диск. Звичайний GIF легко зробити прозорим. Потрібно просто завантажити його в GIF-редактора або PhotoShop і знову записати на диск, вказавши прозорі кольори.
□ Чересстрочная розгортка. Застосовується для великих 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=img.gif> примусить браузер відобразити на екрані графічний файл img.gif з поточного каталога.
Звичайно графічні файли не змішують з HTML-текстами, а поміщають в окрему теку ріс - підкаталог каталога з програмами (HTML-файлами). Тоді команда виведення графіки матиме вигляд:
<IMG src=./pic/img.gif>
Атрибут alt="текст_надписи"
Якщо браузер не знаходить картинки у вказаному місці на диску, він замість неї малює на екрані маленький прямокутник і вписує в нього напис, який заданий атрибутом alt.
Наприклад, виконуючи команду
<IMG src=monstr.jpg alt="Страшный звір">
браузер, не знайшовши на диску картинку, виведе на екран такий малюнок (мал. 5.2).
Атрибут alt рекомендується використовувати завжди. Навіть якщо картинка знайдена браузером, завдання напису не буде зайвим: коштує користувачу зупинити курсор на картинці, як напис з'явиться в маленькому віконці і повідомить додаткову інформацію.
Атрибути width=n і height=m
Ці атрибути задають ширину і висоту (в пикселах) прямокутника, в який виводиться картинка. Якщо атрибути не задані, картинка малюється в природних розмірах. Коли розміри прямокутника не співпадають з розмірами картинки, браузер проводить масштабування картинки, підганяючи її під вказані величини. Рекомендується завжди записувати ці атрибути і указувати в них природні розміри картинки. Якщо розміри указуються невірно - картинка виводиться браузером із спотворенням (мал. 5.3).
Якщо вказівка розмірів зовсім опущено - на екрані відбувається маленький «землетрус» у момент приходу картинки з мережі. Адже не знаючи розмірів зображення, браузер залишає під нього на екрані стандартний прямокутник, продовжуючи будувати решту елементів. Коли картинка завантажена, браузеру доводиться повністю перемальовувати екран.
Атрибут border=n
Атрибут дозволяє задати рамку навкруги ілюстрації товщиною в n пикселов. За відсутності атрибута або при значенні n=0 рамка не малюється (мал. 5.4).
Атрибути hspace=n і vspace=n
Атрибути vspace і hspace визначають вільний простір зліва і справа (hspace), над і під (vspace) картинкою (мал. 5.5 і 5.6).
Атрибут align
Цей атрибут дозволяє задавати положення ілюстрації по відношенню до сусідніх елементів документа. Можна використовувати наступні значення атрибута:
align=top _ вертикальне вирівнювання по верхньому краю;
align=middie _ вертикальне вирівнювання по центру;
align=bottom _ вертикальне вирівнювання по нижньому краю;
align=ieft _ горизонтальне вирівнювання по лівому краю;
align=right _ горизонтальне вирівнювання по правому краю.
Давайте заглянемо у випробувальний кут і подивимося, що відбувається із зображенням і навколишнім його текстом при різних значеннях атрибута align (мал. 5.7-5.11, лістинги 5.1-5.5).
Лістинг 5.1. Код прикладу 5.7.
<p>
Вася
<IMG src=./pic/07.gif width=200 height=200 border=l
align=top hspace=15 vspace=O alt=''Петька стрибає вниз">
склав забавну розповідь про курча бабусі і вирішив набрати його в текстовому редакторі, щоб послати по Інтернету своєму монгольському другові Жугдердемідійну.
Лістинг 5.2. Код прикладу 5.8.
<Р>
Склавши
<IMG src=./pic/08.gif width=200 height=200 border=l
align=middle hspace=15 vspace=0 alt="Петька і мухи">
своя перша розповідь про курча Петьку, Вася увійшов у смак і вже не міг зупинитися. Наступний його опус називався Петька і мухи.
Лістинг 5.3. код прикладу 5.9.
<p>
Вася
<IMG src=./pic/09.gif width=200 height=200 border=l
align=bottom hspace=15 vspace=O а1t="Петька їде в місто">
не на жарт розійшовся з своїм курчам. Прямо якась «епопея курчати» вийшла! В новій розповіді Петька відправляється подивитися на міське життя.
Лістинг 5.4. Код прикладу 5.10.
<Р>
<IMG src=./pic/10.gif width=200 height=200 border=0
align=left hspace=15 vspace=0 а1t="Вася Кук - письменник" курчати>
Вася так загордився своїми «розповідями курчат», що задумав видати цілу книгу. Так, так, він так вирішив! І назву придумав: “Цыпленок
босиком. А що? Цілком відповідає: оповито туманом, але запам'ятовується!<BR clear=left>
<Р>
Я трохи жартую над Васей, але його розповіді мені дуже подобаються. Буду радий одержати в подарунок таку книгу. Давай, Вася, не бійся!
Лістинг 5.5. Код прикладу 5.11.
<Р>
<IMG src=./pic/11.gif width=200 height=200 border=0
align=right hspace=15 vspace=0 alt="Разговор братів про дизайн">
Ти вже продумав дизайн своєї книги?&пЬзр; запитав Петя у брата.<BR clear=right>
<р>
Мені доводилося чути це слово, але не упевнений, що точно розумію його значення. Думаю, що дизайн&пЬэр; це наука про те, як робити красиві речі.
Зауваження
Теги <br clear=left> і <br clear=right> використовуються для припинення обтікання тексту відповідно зліва і праворуч від картинки.
Картинка як посилання
Дуже легко примусити працювати картинку як гіперпосилання. Достатньо вкласти команду <img> всередину команди <а>:
<а href=переход ...><IMG src=файл ...></А>
Курсор при попаданні на картинку-посилання міняє свою форму. Клацання миші по картинці примушує браузер виконувати перехід. Картинка-посилання не підкреслюється, як текстове посилання, і не виділяється кольором, а обрамляється в рамочку (мал. 5.12).
Посилання на цій картинці задано таким чином:
<а href=dog.htm><IMG src=dog.gif width=200 height=200 а1t="Собака"></А>
Для картинки з собачкою не заданий атрибут border. Проте ми бачимо рамку. Ця рамка з'являється тому, що картинка є гіперпосиланням. Часто рамка навкруги картинки небажана, навіть коли вона означає посилання. Адже про посилання однозначно говорить зміна форми курсора, а якщо картинка - прозорий GIF, рамка виглядає непривабливо. Позбутися рамки, навіть коли картинка - посилання, можна явним завданням border=o (мал. 5.13).
Посилання на цій картинці задано таким чином:
<а href=dog.htm><IMG src=dog.gif border=0 width=200 height=200 alt="Собака"></A>