Клієнтські карти: елементи MAP й AREA

Синтаксис: <MAP>…</MAP> (блоковий елемент) Атрибути: id, class, style, title, lang, dir, події name = CDATA (назва карти) Підтримка: Відповідає стандарту (5.0+) Відповідає стандарту (4.0+) Синтаксис: <AREA> (умісту й кінцевого тегу немає) Атрибути: id, class, style, title, lang, dir, події shape = rect | circle | poly | default (область у карті посилань) coords = координати (координати в карті посилань) href = URI (URI посилання) nohref = nohref (неактивна область) alt = текст (альтернативний текст) target = фрейм (фрейм для відображення посилання) accesskey = символ (ім'я клавіші швидкого доступу) tabindex = число (номер у порядку натискання табуляції) onfocus = сценарій (при одержанні елементом фокуса) onblur = сценарій (при втраті елементом фокуса) Підтримка: Відповідає стандарту; клавіша, задана в accesskey, повинна натискатися разом з Alt (5.0+) Атрибути alt, accesskey й tabindex не підтримуються (4.0+)

Елемент MAP застосовується для створення клієнтських карт посилань. Його вмістом можуть бути або елементи AREA, або будь-які блокові елементи. MAP уживається разом з елементами IMG, OBJECT або INPUT, що завантажують графічний образ, карту якого він визначає. При цьому обов'язковий атрибут name містить назва карти, що використається як ім'я закладки в атрибуті usemap асоційованого з картою посилань. Приклад:

Code 6.11<MAP name="mymap"> <AREA href="reference.htm" alt="Довідник по HTML й CSS" coords="5,5,95,195"> <AREA href="design.htm" alt="Введення у Веб-дизайн" coords="105,5,195,195"> <AREA href="tools.htm" alt="Інструментарій" coords="205,5,295,195"> </MAP> <IMG src="sitemap.gif" alt="Карта вузла" usemap="#mymap" width="300" height="200">

У цьому прикладі вмістом елемента MAP є три елементи AREA, що визначають активні області графічного образа. Такий елемент MAP не відображається оглядачами; його присутність у документі виявляється тільки по підказках, заданим в атрибутах alt елементів AREA. Але, як відзначено вище, елемент MAP може містити й блокові елементи, які, у свою чергу, повинні містити анкери, що визначають активні області образа й відповідають гіперпосилання. У цьому випадку тільки що наведений приклад міг би виглядати так:

Code 6.12<MAP name="mymap"> <P>Виберіть розділ: <A href="reference.htm" coords="5,5,95,195">Довідник по HTML й CSS</A> <A href="design.htm" coords="105,5,195,195">Введення у Веб-дізайн</A> <A href="tools.htm" coords="205,5,295,195">Інструментарій</A> </P> </MAP> <OBJECT data="sitemap.gif" type="image/gif" usemap="#mymap" width="300" height="200"></OBJECT>

У цьому випадку вміст елемента MAP відображається як набір текстових гіперпосилань. Якщо його треба сховати, то елемент варто перенести усередину асоційованого c їм елемента OBJECT. При наявності в MAP яких-небудь елементів крім AREA, оглядачі ігнорують всі елементи AREA.

Тепер можна розглянути докладніше будова елемента AREA, що визначає активну область карти посилань і відповідне гіперпосилання. Атрибути shape й coord задають відповідно форму активної області і її координати щодо лівого верхнього кута графічного образа; вони можуть приймати наступні значення:

 

 

Атрибут href визначає URI гіперпосилання, пов'язаної з даною активною областю. Якщо він не заданий або елемент AREA містить атрибут nohref, то дана область не є активною. Обов'язковий атрибут alt задає альтернативний текст, що виводиться оглядачем замість образа, якщо висновок графічних зображень відключений або не підтримується. Цей же текст виводиться оглядачем як підказка при влученні курсору миші на активну область. Всі інші атрибути є необов'язковими.

Атрибут target використається тільки у фреймових документах і задає ім'я фрейму, у якому повинна відображатися мета гіперпосилання.

Атрибут accesskey задає символ Unicode як клавіша швидкого переходу по гіперпосиланню.

Значенням атрибута tabindex повинне бути ціле число в діапазоні від 0 до 32767. Це число задає номер даного елемента при русі по Веб-сторінке натисканнями клавіші Tab. Якщо tabindex дорівнює 0 або не задано, то даний елемент одержить фокус після всіх елементом з позитивним значенням tabindex. При збігу значень tabindex у декількох елементів першим одержує фокус той, котрий раніше зустрічається в документі.

Атрибут onfocus задає сценарій, що виконується, коли активна область одержує фокус.

Атрибут onblur задає сценарій, що виконується, коли активна область губить фокус.

Серверні карти

Серверні карти використаються в тих випадках, коли карта посилань занадто складна для клієнтської карти. Серверні карти можуть створюватися тільки для образів, заданих елементом IMG або INPUT, що повинен перебувати усередині анкера гіперпосилання й мати атрибут ismap. Приклад:

Code 6.13 <A href="http://www.acme.com/cgi-bin/topresult.cgi"> <IMG src="game.gif" ismap="ismap" alt="Результати ігор"></A>

При щиглику миші по цьому образі оглядач формує запит до сервера, з якого завантажений поточний HTML-документ. Цей запит формується відповідно до інтерфейсу CGI, що докладно описаний у Частині VI, за наступними правилами:

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

На основі цих координат формується URI запиту до сервера на запуск сценарію; для цього до URI сценарію, заданому атрибутом href гіперпосилання, додається запит виду ?x,y. Якщо, наприклад, координати миші були рівні 15 й 24, то в наведеному вище прикладі буде сформований наступний запит:

Code 6.14

http://www.acme.com/cgi-bin/topresult.cgi?15,24.

 

Сервер приймає рядок запиту й виконує зазначений сценарій із зазначеними параметрами.

Формати графічних файлів

 

Число форматів, у яких зберігаються графічні дані, дуже велике. Однак, в WWW їхня кількість зводиться всього до трьох форматів: GIF, JPEG й PNG. Історично ситуація зложилася так, що перші Веб-наглядачи підтримували формати GIF й JPEG, тому ці два формати стали стандартом de facto для зберігання графіки у Веб. Потім спеціально для мережної графіки був розроблений формат PNG, що повинен скласти конкуренцію формату GIF. У цьому розділі приведена коротка характеристика кожного з перерахованих форматів і даємо рекомендації з їхнього застосування.

Підтримка: Підтримує всі три формати Підтримує всі три формати

Формат GIF

Формат GIF (Graphics Interchange Format) був спочатку розроблений для користувачів мережі CompuServe й існує у двох варіантах: GIF87a й GIF89a. Наш опис ставиться до другого з них.

Формат GIF забезпечує стиск даних, що звичайно варіюється від 3:1 до 5:1. Графіка, що зберігає в цьому форматі, обмежується 256 квітами (8 біт на піксель), тому він не придатний для зберігання полноцветных фотографій, але ідеально підходить для зберігання значків, емблем й інших штучно створених зображень із обмеженою кількістю квітів.

Стандарт GIF89a підтримує три ефекти, корисних при створенні Веб-сторінк:

Черезстрочный показ (interlaced images). При такому показі спочатку відображається кожен восьмий рядок образа, потім кожна четверта й т.д. У результаті, у міру завантаження графічного файлу оглядачем зображення "проявляється" на екрані в кілька проходів. Це може бути корисно користувачам, що працюють із повільними модемами, тому що вони можуть зрозуміти, що зображено на малюнку, не чекаючи його повного завантаження.

Прозорість (transparency). У прозорому GIF-зображенні один із квітів позначається як прозорий, що дозволяє тлу документа проступати крізь нього. У результаті малюнок відображається не прямокутником, накладеним на тло документа, а як би виростає із цього тла.

Анімація (animation). Анімований GIF-файл містить кілька зображень, які відображаються оглядачем, послідовно переміняючи один одного. Крім того, у ньому втримується інформація про проміжки часу між зміною зображень і про кількість повторень циклу їхнього прокручування. Зокрема, анимованні GIF-файли застосовуються для створення рекламних заставок (banners), якими сьогодні кишать всі комерційні Веб-сторінкы.

Формат JPEG

Формат JPEG (Joint Photographic Expert Group) призначений для зберігання повноквітних зображень (24 біта на піксель, тобто 16,7 млн. квітів). Він використає потужний метод стиску даних, що, однак, може привести до втрати якості зображення. Проте, часто можна стискати зображення з коефіцієнтом 10:1 і навіть 20:1 без помітної для ока втрати якості. Цей формат варто використати для зберігання повноквітних фотографій і не слід використати для зберігання зображень, уже наведених до 256-колірної палітри. Крім того, JPEG не годиться для зображень із різким переходом між квітами — це порозумівається особливостями його алгоритму стиску.

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

Формат PNG

Формат PNG (Portable Network Graphics) — це новий графічний стандарт, розроблений W3C і покликаний замінити GIF, однак поки він використається не занадто широко. Особливості формату PNG:

більше високий ступінь стиску зображення, чим в GIF;

підтримка 1-, 2-, 4-, 8-, 16-, 24- і 32-бітових зображень;

черезстрочний показ зображення;

кілька рівнів прозорості;

убудована гамма-корекція зображень.

Тема 7. Фрейми до гори ↑

Загальний опис

 

Мова HTML дозволяє розбити вікно оглядача на трохи незалежних під вікон (називаних фреймами) так, що вміст одних вікон залишається постійним при прокручуванні або зміні вмісту інших вікон. Наприклад, вікно оглядача може бути розбите на три фрейми так: у верхній частині відображається статичний заголовок, ліворуч — вузька смуга меню, а в іншій частині вікна відображається вміст документів, обраних у фреймі меню. Можна розглянути наступний приклад:

Code 7.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"><HTML lang="ru"><HEAD><TITLE>Приклад фреймового документа</TITLE></HEAD><FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="frame1.html"> <FRAME src="frame2.gif"> </FRAMESET> <FRAME src="frame3.html"> <NOFRAMES> <P>Цей документ містить:</P> <UL> <LI><A href="frame1.html">Перший документ</A></LI> <LI><IMG src="frame2.gif" alt="Зображення"></LI> <LI><A href="frame3.html">Другий документ</A></LI> </UL> </NOFRAMES></FRAMESET></HTML>

Цей документ буде відображатися оглядачем приблизно так:

 

 

Із цього приклада видно, що фреймовий документ:

має особливу декларацію типу документа (див. перший рядок приклада);

замість тегів <BODY>…</BODY> його тіло полягає в теги <FRAMESET>…</FRAMESET>;

може містити елемент NOFRAMES, умісту якого повинне відображатися, якщо оглядач не підтримує фрейми.