23830

Форматування абзаців тексту

Конспект

Информатика, кибернетика и программирование

Атрибут ALIGN також можна використати з багатьма іншими дескрипторами HTML для вирівнювання зображень вмісту таблиць і інших елементів сторінки. Щоб полегшити їм перегляд можна розбити документ на логічні розділи кожний з яких буде присвячений одній темі. Найкраще використати заголовки вважаючи їх елементами структури документа У заголовках можна використати атрибут ALIGN як і в дескрипторі P .

Украинкский

2013-08-05

974 KB

4 чел.

 Форматування абзаців тексту  

 Розбиття тексту на абзаци

Розрив рядків

Структурування тексту

Додання заголовків

Додання горизонтальних ліній

Попереднє форматування тексту

Дескриптор <DIV>

Поради по макетуванню сторінок

Спеціалізований шаблон

Розбиття тексту на абзаци

Розбиття на рядки і абзаци в HTML є більш складним ділом, ніж можна було б чекати.

HTML, як мова розмітки тексту, передбачає незалежність документа від комп'ютера користувача. Читачі документа можуть встановити будь-які поля і шрифти, які вони хочуть використати. Це означає, що розташування тексту визначається браузером, оскільки тільки в цій програмі зафіксовані настройки читача. Розташування рядків в початковому документі ігнорується програмою перегляду. Замість цього вона модифікує текст відповідно до локальних настройок. Це означає, що документ, який був добре організований текстовому редакторі, буде спотворений у вікні браузера.

Різні програми перегляду показують одну і ту ж сторінку по-різному, в залежності від настройок, прийнятих за умовчанням, і від опцій, вказаних користувачем

Щоб розбити текст, необхідно використати елементи абзацу. Якщо вмістити відкриваючий дескриптор абзацу <P> в початок кожного нового абзацу, то програма перегляду коректно розділить текст на абзаци. Додання закриваючого дескриптора </P> не обов'язкове, оскільки його функцію звичайно виконує наступний початковий дескриптор абзацу, який зустрінеться в документі. Однак додання дескриптора </P> в кінці абзацу допоможе обробити ваш документ в тих програмах перегляду, які не повністю відповідають стандарту HTML.

Слід серйозно відноситися до використання відкриваючих і закриваючих дескрипторів абзацу. Останнім часом все частіше для представлення абзаців тексту використовуються стилі, тому коректне вживання дескриптора абзацу набуває все більшого значення.

У деяких документах HTML дескриптор початку абзацу <P> використовується повторно для створення додаткового пустого рядка. Цей підхід не підтримується стандартом HTML, і самі сучасні браузери ігнорують всі пусті дескриптори <р>, які слідують за першим.

Елемент абзацу має один атрибут ALIGN, який підтримується як Netscape Navigator, так і Microsoft Internet Explorer. Можливі значення атрибута ALIGN і їх призначення подані нижче в таблиці. Якщо атрибут ALIGN не використовується, то за замовчуванням прийнято вирівнювання тексту по лівому краю.

Атрибут ALIGN також можна використати з багатьма іншими дескрипторами HTML— для вирівнювання зображень, вмісту таблиць і інших елементів сторінки. Використання атрибута в цих цілях буде описано в наступних розділах.Значення Призначення

LEFT  Вирівнює текст по лівому полю вікна перегляду. Правий край нерівний

CENTER Вирівнює текст по центру між полями вікна перегляду

RIGHT Вирівнює текст по правому краю у вікні перегляду. Лівий край нерівний

JUSTIFY Вирівнює текст по ширині  вікна перегляду.

 Розрив рядків  

 Як було відмічено, HTML виконує форматування тексту в програмі перегляду, а не в початковому документі. Цим забезпечується незалежність від обладнання. Але що робити, якщо вам треба розірвати рядок тексту точно в певному місці?

Щоб закінчити рядок в потрібному місці, використайте дескриптор розриву рядка <BR>. Він примусить програму перегляду почати новий рядок, незалежно від стану поточного рядка. На відміну від елемента абзацу, розрив рядка не збільшує інтервал в тексті. Оскільки елемент розриву рядка не є контейнером, у нього немає закриваючого дескриптора.

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

Крім необхідності розриву рядка, бувають випадки, коли треба не допустити розбиття рядка в певному місці. Текст, розташований між відкриваючим дескриптором <NOBR> і відповідним закриваючим дескриптором, не буде мати розривів рядків.

Заборона розриву рядків може виявитися дуже потрібною для таких елементів, як адреси, де неправильне розбиття рядка може привести до небажаних результатів. Однак зловживати використанням елемента <NOBR> не слід — якщо змінити природне розбиття рядків, текст може прийняти незвичайний вигляд.

Якщо ви вважаєте, що браузеру все-таки доведеться розірвати рядки всередині елемента можете указати відповідне місце розриву за допомогою дескриптора <WBR> (м'який розрив рядка). Браузер буде використовувати елемент <WBR> тільки у разі крайньої необхідності.

Структурування тексту  

 Щоб зробити текст HTML більш привабливим, потрібно структурувати його. Користувачі World Wide Web хочуть мати можливість швидко визначити, чи є в документі потрібна інформація. Щоб полегшити їм перегляд, можна розбити документ на логічні розділи, кожний з яких буде присвячений одній темі.

Розбивши документ, додайте інформативні заголовки до кожного розділу, що дозволить читачеві швидко перейти до цікавлячого його матеріалу.

Додання заголовків

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

Елемент заголовка є контейнером і повинен мати відкриваючий <Н1> і закриваючий </Н1> дескриптори. У HTML шість рівнів заголовків: H1 (самий важливий), Н2, НЗ, Н4, Н5 і Н6 (найменше важливий). Кожний з цих рівнів виглядає певним чином в браузері читача, але ви не можете безпосередньо управляти атрибутами заголовків. Це частина філософії HTML: ви, як автор документа, відповідаєте за зміст, а читач — за його зовнішній вигляд. Розглянемо наступний приклад, наведений нижче.

<HTML>

<HEAD>

<TITLE>Створення документа HTML</TITLE>

</HEAD>

<BODY>

<Н1>Заголовок першого рівня</Н1>

<Н2>Заголовок другого рівня</Н2>

<Н3>Заголовок третього рівня</НЗ>

<Н4>Заголовок четвертого рівня</Н4>

<Н5>Заголовок п'ятого рівня</Н5>

<Н6>Заголовок шостого рівня</Н6>

</BODY>

</HTML>

 

Хоч зовсім не обов'язково використати всі рівні заголовків, краще не пропускати деякі з них, оскільки це може викликати проблеми у автоматичних конверторів тексту. Зокрема, алфавітні покажчики, що розробляються зараз Web зможуть здійснювати пошук в документах Web і структурувати їх. Якщо деякі рівні заголовків пропущені, то користувачі можуть заплутатися в такій структурі.

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

Найкраще використати заголовки, вважаючи їх елементами структури документа

У заголовках можна використати атрибут ALIGN, як і в дескрипторі <P>. Це важливо запам'ятати, оскільки не всі браузери показують заголовки з вирівнюванням по лівому краю.

 Додання горизонтальних ліній  

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

Горизонтальну лінію можна створити за допомогою тега <HR>. Цей дескриптор малює затінену горизонтальну лінію вздовж екрана браузера. Дескриптор <HR> не є контейнером і не вимагає закриваючого дескриптора. До і після горизонтальної лінії застосовується обов'язкове розділення абзацу.

Нижче наведено приклад використання дескрипторів горизонтальної лінії, а на малюнку показано, як виглядають ці лінії у вікні браузера.

<HTML>

<HEAD>

<TITLE>Manned Space Craft</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER> Manned Space Craft </H1>

<BR>

<H2 ALIGN==LEFT>Soviet and Russian</H2>

Vostok<BR>

Voskhod<BR>

Soyuz<BR>

Progress<BR>

<HR>

<H2 ALIGN=LEFT>American</H2>

Mercury<BR>

Gemini<BR>

Apollo<BR>

Shuttle<BR>

<HR>

</BODY>

</HTML>

У таблиці перераховані атрибути дескриптора <HR>. У листингу, що дуже нагадує попередній, показане використання деяких атрибутів <HR>. На малюнку показано, як виглядає документ у вікні браузера.

<HTML>

<HEAD>

<TITLE>Manned Space Craft</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER> Manned Space Craft </H1>

<BR>

<H2 ALIGN=LEFT>Soviet</H2>

Vostok<BR>

Voskhod<BR>

Soyuz<BR>

Progres<BR>

<HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=RED >

<H2 ALIGN=LEFT>American</H2>

Mercury<BR>

Gemini<BR>

Apollo<BR>

Shuttle<BR>

<HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=NAVY >

</BODY>

</HTML>

 Зображення у вікні браузера Intenet Explorer

 Зображення у вікні браузера Opera 6.0

Атрибут Призначення

ALIGN За допомогою цього атрибута можна задати вирівнювання по лівому краю (LEFT), по правому краю (RIGHT) або по центру (CENTER)

WIDTH Довжину лінії можна указати в пікселях або в процентному відношенні до ширини вікна браузера. Якщо використовуються відсотки, додайте знак відсотка до числа

SIZE Висота лінії в пікселях

NOSHADE Якщо є цей атрибут, то браузер не використовує ефект об’ємності

COLOR Для вказівки кольору  лінії.

У документах, створених за допомогою перших версій HTML, для більше за чітке і очевидне розбиття тексту часто використовувалися графічні зображення. Їх, звичайно, не можна було бачити при відключеному завантаженні малюнків в браузері. Але навіть якщо браузер завантажував зображення, складність полягала в тому, що лінія знаходилася в іншому файлі, який треба було скопіювати і зберегти. Нові атрибути дескриптора <HR> відкривають широкі можливості при створенні документів і при цьому не ускладнюють їх.

Горизонтальні лінії потрібно використати в тих випадках, коли потрібно жорстке розділення тексту. Основні принципи використання ліній полягають в тому, що вони ніколи не повинні розташовуватися між заголовком і подальшим текстом. Їх також не треба використати для створення пустот в документі. Пусті місця, не заповнені текстом, грають важливу роль в оформленні сторінок. Звичайно, надлишок пустих місць на сторінках псує загальний вигляд документа; однак якщо вільного місця зовсім немає, то сторінки виглядають переповненими.

Атрибути дескриптора <HR> дозволяють зробити розділові лінії більш (або менш) привабливими

 Попереднє форматування тексту  

 Чи обов'язково треба використати елементи розриву абзаців і рядків для форматування тексту HTML? Зовсім ні: в HTML є контейнер, в який можна вмістити заздалегідь відформатований текст. Це дає автору набагато більше можливостей управляти відображенням документа. Нестача цього способу полягає у втраті гнучкості.

З всіх дескрипторів попереднього форматування найбільш ефективним і що часто використовується є контейнерний <PRE>. Текст в контейнері <PRE> звичайно має довільну форму і пусті рядки, які служать для розриву тексту. Всередині цього контейнера можна також використати дескриптори розриву рядків і абзаців. Це дозволяє створювати такі елементи, як таблиці і рівні колонки тексту. Крім того, тег <PRE> часто використовується для відображення великих блоків програмного коду, які було б складно прочитати, якби браузер переформовував їх.

Всередині контейнера <PRE> можна використати різні елементи фізичного і логічного форматування тексту. Наприклад, ви можете створити таблиці, які містять жирні заголовки або курсив. Однак використання в цьому контейнері таких елементів форматування абзацу, як <Address> або елементи заголовка, не допускається. У контейнері <PRE> можна вміщувати і елементи прив'язки.

Основний недолік контейнера <PRE> в тому, що текст, що знаходиться всередині нього завжди відображається в браузері читача однаковим шрифтом. Це приводить до того, що довгі фрагменти тексту зливаються при перегляді.

Якщо ви не перетворюєте існуючі документи, то таблиці HTML виглядають набагато привабливішими за тих, які створені за допомогою дескриптора <PRE>.

Є і інші контейнери для попереднього форматування, однак вони оголошені що вийшли з вживання. Елементи <ХМР> і <LISTING> дозволяють створювати заздалегідь розмічений текст. Недолік цих контейнерів полягає в тому, що всередині них не дозволяється використання інших елементів HTML. Браузери не розпізнають інші дескриптори розмітки всередині цих елементів, крім закриваючого дескриптора. На жаль, багато які браузери не завжди точно виконують це правило, і результати можуть бути самими не передбачуваними.

Відмінність між цими елементами полягає в тому, що текст <ХМР> повинен відтворюватися шрифтом такого розміру, який дозволяє розмістити не менше за 80 знаків в рядку, а для елемента <LISTING> потрібно шрифт, який дозволяє розмістити 132 знака.

Не треба використати елементи <ХМР> і <LISTING> без особливої необхідності. Оскільки вони оголошені що вийшли з вживання, браузери можуть не підтримувати їх. Щоб бути упевненим в тому, що саме побачать ваші читачі, використайте замість них елемент <PRE>.

Якщо ви хочете представити код HTML у вигляді заздалегідь відформатованого тексту або використати символи < або >, потрібно використати замінюючи їх кодами &lt і &gt, наприклад, таким чином: &ltPRE&gt.

 Дескриптор <DIV>  

 Контейнер розділу <DIV></DIV> можна використати для вирівнювання цілого блоку елементів сторінки. Цей дескриптор підтримує атрибут ALIGN, тому з його допомогою можна, наприклад, вирівняти по центру блок тексту і графіки, як в наступному прикладі:

<DIV ALIGN=CENTER>

<Н1>Цей заголовок вирівнюється по центру.</Н1>

<IMG SOURCE="somepic.gif"><BR>

Так само вирівнюються малюнок, розташований вгорі, і цей рядок.<BR>

ALIGN=RIGHT>A цей текст вирівнюється по правому краю</Р>

</DIV>

Зверніть увагу, що всі елементи, розташовані між дескрипторами <DIV> і </DIV>, вирівнюються у відповідності тим, що вказано в дескрипторі <DIV> (за винятком елементів, для яких вказане інше вирівнювання). Атрибут ALIGN, як і в інших випадках, може мати значення LEFT (По лівому краю), CENTER (По центру) або RIGHT (По правому краю).

За допомогою дескриптора <DIV> можна також використати різні стилі рядка для визначення стилю цілого блоку в документі HTML. Це можливе завдяки принципу успадкування. Наприклад, якщо ви хочете змінити колір тексту для цілого блоку дескрипторів на синій, то можете вмістити ці дескриптори в контейнер <DIV> і в стилі дескриптора <DIV> визначити синій колір тексту. Це виглядає приблизно так:

<DIV STYLE= "color: blue">

<Н1>Це заголовок</Н1>

<Р>А це текст абзацу. Він буде відображений синім кольором у вікні браузера</Р>

</DIV>

Дескриптор <DIV> є важливою частиною макетування сторінки з використанням каскадних листів стилів.

 Поради по макетуванню сторінок  

 Щоб правильно використовувати дескриптори HTML, необхідно дотримуватися певних правил. Наведемо декілька порад, які потрібно мати на увазі при використанні дескрипторів, про яких йшла мова в цьому розділі.

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

Уникайте вирівнювання по правому краю і по центру. Не застосовуйте таке вирівнювання до основної частини документа. Текст, який вирівняний по правому краю або по центру, важче читати, ніж текст, вирівняний по лівому краю.

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

Використовуйте дескриптори <NOBR> в комбінації з <WBR> для управління розривами рядків. Іноді потрібно точно указати, де саме допускається розрив рядка. Дескриптор <NOBR> забороняє розриви рядків, a <WBR> підказує браузеру зручне місце для розриву рядка.

Не забувайте про можливості розбиття сторінки за допомогою дескриптора <HR>. Однак якщо ви використовуєте лінії для розділення Web-сторінки на окремі фрагменти, то можете замість цього розбити її на декілька сторінок, кожна з яких буде присвячена певній темі.

Не економте місце, вміщуючи зображення. Зображення і таблиці в документі HTML повинні бути оточені пустим простором, щоб вони виділялися з тексту.

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

Спеціалізований шаблон  

 Використовуючи відомості, які містяться в цьому розділі, можна створити більш складний шаблон. Покажемо, як створити шаблон, який можна використати для словника термінів і інших подібних документів.

Спочатку треба перенести базовий шаблон в текстовий редактор. Після завантаження цього документа, можна внести відповідні зміни в готові елементи, як показано нижче:

<HTML>

<HEAD>

IТLЕ>Словник термінів</ТIТLЕ>

</HEAD>

<BODY BACKGROUND="greybg.jpg" BGCOLOR= "GRAY", TEXT= "BLACK", LINK= "BLUE", ALINK="GREEN", VLINK= "RED">

<ADDRESS>ABTOP<BR>

Дата створення</ADDRESS >

</BODY>

</HTML>

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

<HTML>

<HEAD>

IТLЕ>Словник термінів</ТIТLЕ >

</HEAD>

<BODY BACKGROUND="greybg.jpg", BGCOLOR="GRAY", TEXT= "BLACK", LINK="BLUE", ALINK="GREEN", VLINK="RED">

<H1 ALIGN=CENTER> Словник термінів </Н1>

<HR ALIGN=CENTER WIDTH=50% SIZE=5 COLOR=NAVY>

<H2 ALIGN=LEFT>Tepмін 1</H2>

Вмістіть тут визначення для Терміну 1.

<Н2 ALIGN=LEFT> Tepмін  2</H2>

Вмістіть тут визначення для Терміну 2. І так далі...

<HR ALIGN=CENTER WIDTH=50% SIZE=5 COLOR=NAVY>

<ADDRESS>ABTOР<BR>

Дата створення </ ADDRESS >

</BODY>

</HTML>

Приклад використання цього шаблона приведений на малюнку.

 Форматування символів  

 Форматування тексту

Логічне форматування

Дескриптор <BLOCKQUOTE>

Елементи фізичного форматування

Шрифти

Дескриптор FONT

Параметр FACE

Параметр SIZE

Параметр COLOR

Дескриптор <BASEFONT>

Поради по форматуванню тексту

Створення спеціальних знаків

Форматування тексту

Сама складна частина роботи виконана: документ створений. Написаний текст акуратно розбитий на абзаци, всі заголовки перебувають на своїх місцях, додані такі елементи, як назва документа і інформація про автора. Здавалося б, можна задовольнитися результатом, однак чогось все-таки не вистачає.

Одна з основних відмінностей документів, створених в текстовому процесорі, від документів, створених на друкарській машинці, полягає в форматуванні тексту. Текстовий процесор дозволяє змінювати зовнішній вигляд тексту. Автор може вибрати шрифт, що сподобався йому, відповідний розмір букв і застосувати до тексту опції форматування. У HTML є ці ж можливості свобода автора обмежена тільки характеристиками браузера.

Логічне форматування

Один з принципів HTML полягає в тому, що документи повинні мати певну логіку і структуру. Це дає читачеві документа максимальну свободу дій. З цією метою розробники HTML створили велику кількість елементів форматування, які служать для виконання різних задач. Правда, результати форматування можуть виглядати по-різному у різних читачів в залежності від обладнання, що використовується і службових програм. Основна перевага такого підходу полягає в тому, що документи не прив'язані до певної платформи. Хоч на різних платформах вони виглядають по-різному, їх вміст однаковий.

У HTML є слідуючі елементи логічного форматування.

IТЕ> (цитата) служить для виділення цитати. Цей елемент також можна використати для виділення назви книги або статті. Звичайно в цьому випадку використовується курсив.

IТЕ>Том Сойер</СIТЕ> відноситься до класичної американської літератури.

<CODE> (код) призначений для виділення невеликої кількості комп'ютерного коду. Звичайно він використовується для коротких фрагментів. Для виділення більш довгих фрагментів використовується дескриптор <PRE>, про який піде мова далі. Звичайно код виділяється моношириним шрифтом.

Один з перших рядків, які пише будь-який програміст на мові програмування С(сі), це:

<CODE>puts ( Hello, World!"); </CODE>

<EM> (акцент) використовується для виділення фрагмента тексту, що має велике значення. Звичайно такий фрагмент виділяється курсивом.

"O, бідний Йорік. Я знав його” <EМ>Горацио</EМ>

<KBD> (клавіатура) вказує, що користувач повинен дати відповідь, використовуючи клавіатуру. Звичайно для клавіатурного тексту використовується моношириний шрифт.

Щоб запустити декодер, введіть <KBD>Restore</KBD>, а потім ваш пароль.

<SAMP> (зразок) використовується для виділення знаків, на яких автор хоче акцентувати увагу читача. Для тексту, до якого відноситься цей елемент, звичайно використовується моношириний шрифт.

Букви <SAMP>AEIOU</SAMP> означають голосні звуки англійської мови

<STRONG> (важливий) використовується для виділення дуже важливого фрагмента тексту. Текст, до якого застосований цей елемент, звичайно виділяється полужирним шрифтом.

Запам'ятайте головне правило: <STRONG>Викладач завжди правий!</STRONG >

<VAR> (змінна) служить для виділення імені змінною. Звичайно змінні виділяються курсивом.

У програмах сортування звичайно використовуються цикли з <VAR>i</VAR>-тими елементами.

<DFN> (визначення) використовується для виділення другорядного визначення в списку визначень. Звичайно виділяється курсивом.

<DFN>Земляний лев харчується мурашками </DFN>

Всі ці елементи є контейнерами і в них обов'язково потрібно використати закриваючий дескриптор. На малюнку показано, як виглядають ці логічні елементи при перегляді у вікні браузера.

Мал.1 Зразки елементів логічного форматування у вікні браузера

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

Відповідь така: ці елементи є логічними стилями. Вони вказують намір автора, а не те, як повинен виглядати даний матеріал.

 Дескриптор <BLOCKQUOTE>  

 Іноді доводиться використати в документі довгу цитату з іншого джерела. Щоб виділити цю цитату з іншого тексту, в HTML існує контейнер <BLOCKQUOTE>. Цей контейнер є вкладеним по відношенню до елемента тіла документа і може, в свою чергу, містити будь-які дескриптори форматування або розриву. Оскільки елемент <BLOCKQUOTE> є контейнером, то для його завершення служить закриваючий дескриптор </BLOCKQUOTE>.

У більшості браузерів для виділення елемента <BLOCKQUOTE> використовується відступ від лівого поля. Деякі браузері, які працюють тільки з текстом, можуть виділяти <BLOCKQUOTE> за допомогою таких знаків, як > в першій лівій колонці екрана. Оскільки більшість браузерів тепер можуть показувати графіку, елемент <BLOCKQUOTE> розширює ваші можливості, дозволяючи використати звичайний текст з відступом від лівого поля. Це може поліпшити зовнішній вигляд документа.

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

<HTML>

<TITLE>Приклад елемента BLOCKQUOTE</TITLE>

<BODY>

<BLOCKQUOTE>

Корисніше знати декілька мудрих правил, які завжди могли б служити тобі, ніж вивчитися багатьом речам, для тебе некорисним.

</BLOCKQUOTE>

<СIТЕ>Сенека </СIТЕ>

</BODY>

</HTML>

 

Мал. 2. Такий виглядає документ з використанням тега <BLOCKQUOTE>

Елементи фізичного форматування  

 Як було сказано вище, HTML залишає оформлення зовнішнього вигляду документа на розсуд браузера. У цьому розділі буде розказано, як використати елементи фізичного форматування, що визначають вигляд тексту в браузері. Існують слідуючи елементи фізичного форматування.

<B> (напівжирний). Елемент <В> виділяє текст напівжирним шрифтом.

Цей текст виділений <В>напівжирним</В> шрифтом.

<I> (курсив). Елемент <I> відображає текст курсивом.

Цей текст виділений <I>курсив</I>.

<TT> (телетайп). Елемент <TT> відображає текст з використанням шрифту друкарської машинки.

Це текст <ТТ>телетайп</ТТ>.

<U> (підкреслення). Елемент <U> виділяє текст у вікні браузера підкресленням.

Цей текст <u>підкреслений</u>.

<STRIKE> (закресллення). Елемент <STRIKE> проводить горизонтальну лінію по средині знаків тексту.

Це приклад <STRIKE>закресленно</STRIKE>.

<BIG> (великий). Елемент <big> для відображення тексту використовує шрифт великого розміру.

Це <BIG> великий</BIG> текст.

<SMALL> (дрібний). Елемент <SMALL> відображає текст шрифтом меншого розміру.

Це <SMALL>дрібний</SMALL> текст.

<SUB> (нижній індекс). Елемент <SUB> переносить виділений фрагмент нижче навколишнього тексту і (при можливості) відображає його з використанням шрифту меншого розміру.

Це <SUB>нижній індекс</SUB>.

<SUP> (верхній індекс). Елемент <SUP> переміщує виділений фрагмент вище навколишнього тексту і (при можливості) відображає його більш дрібним шрифтом.

Це <SUP>верхній індекс</SUP>.

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

Мал. 3. Зразки елементів фізичного форматування у різних браузерах

Елементи фізичного форматування можуть бути вкладеними один в іншій. У той же час частковий збіг елементів не допускається і може викликати непередбачувані результати. На Мал.4. показані приклади використання вкладених елементів для створення спеціальних ефектів.

Мал. 4. Для створення додаткових стилів форматування можна використати вкладені елементи логічного і фізичного форматування. У третьому рядку цього прикладу скомбіновані дескриптори <I> і <B> для створення полужирного курсиву

У Netscape Navigator є дескриптори, які не рекомендується використовувати. Так, дескриптор <BLINK> (мерехтіння) має погану славу серед розробників HTML. Якщо ви не хочете, щоб люди говорили погано про ваші документи, краще стриматися від застосування цього дескриптора. Якщо ж ви вирішили використати його, ні в якому разі не забудьте поставити на відповідне місце закриваючий дескриптор </BLINK>. Немає нічого більш дратівливого, ніж ціла сторінка мерехтливого тексту. Цей тег працює тільки в браузерах Netscape.

 Шрифти  

 Автор має можливість управляти зовнішнім виглядом тексту в своїх документах. У версіях HTML до 3.2 цю можливість мали тільки читачі. Проблема полягає в тому, що автор може використати тільки ті шрифти, які є на комп'ютерах читачів. Але як дізнатися, які у них є шрифти?

На жаль, дізнатися це неможливо. Якщо ви створюєте документи для використання в INTRANET, то задача спрощується, оскільки на підприємстві затверджені стандарти, що регламентують набір шрифтів, які повинні бути на всіх комп'ютерах мережі. Оскільки набір шрифтів визначений, розробник може вибирати для свого документа будь-який стандартний шрифт. Однак якщо ви розробляєте документ для WWW, то у вас можуть виникнути проблеми, оскільки вам не відомо, які шрифти є у ваших читачів. Навіть основний набір шрифтів дуже сильно залежить від обладнання, яке використовують ваші читачі. Зараз не існує універсального метода розв'язання цієї проблеми, хоч деякі фірми шукають можливість передачі інформації про шрифти разом з документом.

Дескриптор FONT

Для управління зовнішнім виглядом тексту в HTML служить парний тег FONT. Елемент FONT є контейнером, який відкривається дескриптором <FONT> і закривається дескриптором </FONT>. Якщо у відкриваючому дескрипторі не вказані атрибути, то елемент FONT не буде мати ніякого впливу.

Елемент FONT можна використати всередині будь-якого іншого текстового контейнера. Він буде модифікувати текст, виходячи із зовнішнього вигляду тексту, розташованого в батьківському контейнері. За допомогою параметрів FACE (гарнітура), SIZE (розмір) і COLOR (колір) можна радикально змінити зовнішній вигляду тексту в документах.

Параметр FACE

Параметр FACE дозволяє вибрати шрифт, який ви хочете використати при відображенні вашого документа. Значення параметра FACE вказує назва шрифту. Назва, вказана як значення параметра, повинна точно співпадати з назвою шрифту на комп'ютері користувача в іншому випадку браузер ігнорує цей параметр і використовує шрифт, заданий читачем за замовченням. Великі і малі букви в назві шрифту ігноруються, а пропуски є обов'язковими. У прикладі показано, як задати певний шрифт, а на мал. 5. вигляд відповідної сторінки у вікні браузера.

<HTML>

<HEAD>

<TITLE>Приклад обраного шрифту</TITLE>

</HEAD>

<BODY>

<FONT FACE="Monotype Corsiva">

This is an example of Font selection </FONT>

</BODY>

</HTML>

 

Мал. 5. Параметр FACE тега FONT дозволяє вибрати шрифт, яким буде відображений текст у вікні браузера.

Якщо ви не знаєте, які шрифти можуть бути на комп'ютері читача, то значенням параметра FACE можна указати декілька назв шрифтів через кому. Це особливо зручно, оскільки схожі шрифти можуть мати різні назви в Windows і в Macintosh. Браузер переглядає список шрифтів зліва направо і використовує перший відповідний шрифт. Нижче автор документа використовує для свого тексту декілька шрифтів.

<HTML>

<HEAD>

<ТIТLЕ>Приклад вибору шрифту</ТIТLЕ>

</HEAD>

<BODY>

<FONT FACE="Verdana", "Arial", "Helvetica">

Це приклад вибору шрифту. </FONT>

</BODY>

</HTML>

У цьому прикладі автор указав як основний варіант шрифт Verdana, але крім того перераховані також допустимі шрифти Arial і Helvetica.

Параметр SIZE

Параметр SIZE елемента FONT дозволяє автору документа указати висоту знаків тексту. Розмір шрифту вказується в умовних одиницях від 1 до 7, причому ця шкала заснована на шрифті звичайного стилю, якому відповідає значення 3. Параметр SIZE можна використати двома різними способами: указати абсолютний розмір шрифту, наприклад SIZE=5, або відносний розмір, наприклад SIZE=+2. Другий спосіб частіше застосовується в тому випадку, якщо був вказаний основний шрифт BASEFONT.

Нижче показано, як указати розмір шрифту, а на мал. 6 вигляд отриманого документа (в нього в порівнянні з прикладом для зручності внесені елементи вибору розміру шрифту).

<HTML>

<HEAD>

<TITLE>Приклад вибору розміру шрифту</TITLE>

</HEAD>

<BODY>

<FONT SIZE= l> Розмір 1</FONT><BR>

<FONT SIZE= -l> Розмір 2</FONT><BR>

<FONT SIZE= 3> Розмір 3</FONT><BR>

<FONT SIZE= 4> Розмір 4</FONT><BR>

<FONT SIZE=+2>Розмір  5</FONT><BR>

<FONT SIZE=  6>Розмір 6</FONT><BR>

<FONT SIZE=+4>Розмір 7</FONT><BR>

</BODY>

</HTML>

Мал. 6. Розмір шрифту можна указати в параметрі size дескриптора font

Параметр COLOR

Колір тексту можна указати таким же чином, як і назва шрифту або його розмір. Параметр color може приймати або шестнадцяткове значення RGB, або стандартні назви кольорів. Нижче показано приклад визначення кольорів в документі.

<HTML>

<HEAD>

<TITLE>Приклад вибору кольору</TITLE>

</HEAD>

<BODY>

<FONT COLOR="FF0000">Цей текст має червоний колір</FONT><BR>

<FONT COLOR="GREEN">Цей текст має зелений колір</FONT><BR>

</BODY>

</HTML>

 Дескриптор <BASEFONT>   

 Дескриптор <BASEFONT> служить для встановлення стандартного розміру шрифту, гарнітури і кольору тексту в документі. Параметри, вказані в дескрипторі <BASEFONT>, діють у всьому документі, поки ці установки не будуть перекриті тегом FONT. Після закриття контейнера FONT характеристики BASEFONT знову набирають чинності. Тег BASEFONT можна змінити за допомогою іншого дескриптора <BASEFONT> в будь-якому місці документа. Зверніть увагу, що у дескриптора <BASEFONT> немає закриваючого дескриптора.

У елементі BASEFONT використовуються параметри FACE, SIZE і COLOR подібно тому, як вони використовуються в елементі FONT.

Нижче у прикладі наведено використання дескриптора <BASEFONT>. На мал. 7. показано, як виглядає цей документ у вікні браузера.

<HTML>

<HEAD>

<TITLE>Приклад використання дескриптора BASEFONT</TITLE>

</HEAD>

<BODY>

Цей текст передує дескриптору BASEFONT.<BR>

<BASEFONT SIZE=6 FACE="Arial ">

Цей текст слідує за дескриптором BASEFONT.<BR>

Зміни розміру шрифту залежать від атрибута BASEFONT

 <FONT SIZE=+3>SIZE</FONT><BR>

</BODY>

</HTML>

Мал. 7. За допомогою дескриптора <basefont> можна управляти характеристиками тексту у всьому документі

Поради по форматуванню тексту  

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

Нижче приводяться загальні поради, які потрібно мати на увазі при форматуванні документів.

Використайте в документі не більш двох або трьох різних гарнітур шрифту.

Для основного тексту використовується шрифт із засічками, наприклад Times New Roman, а заголовки оформляються шрифтом без засічок, наприклад Arial.

Курсив виглядає менш настирливим, ніж напівжирний шрифт, який потрібно використовувати тільки для виділення особливо важливих місць.

Не зловживайте підкресленням. Якщо довгі фрагменти тексту підкреслені, це може заплутати користувача.

Розмір заголовків повинен меншати по мірі убування їх значущості це дозволить читачам легше орієнтуватися в документі.

Створення спеціальних знаків  

 Рано або пізно вам знадобиться використати в Web-сторінці ті або інші знаки, наприклад знак авторського права або торгової марки. На щастя, в HTML є простий спосіб для здійснення цієї задачі. Наприклад, якщо вам потрібен символ торгової марки, використайте його замінник &strade. Браузер вірно інтерпретує це як ™.

У HTML 4.0 доданий цілий список нових спеціальних символів. Їх можна розділити на три категорії.

До першої категорії відносяться міжнародні друкарські символи, необхідні для створення Web-сторінок, які будуть читати у всьому світі. Наприклад, хоч ні в російському, ні в англійській мові не використовується "о" з умляутом (6), однак деякі західні мови не можуть обійтися без нього.

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

Остання група нових знаків в HTML 4.0 набір спеціальних символів, які входять в шрифт Adobe's Symbol, наприклад кинджал або химерні знаки лапок.

Список цих простих у використанні знаків досить довгий. Повний список можна знайти на сторінці http://www.w3.org/TR/WD-entities, а в табл. приведені самі популярні знаки.

Деякі спеціальні символи в HTML 4.0Опис символу Замінник Вигляд

Константа 10-й код 16-й код

євро &euro; &#8364; &#x20AC; €

цент &cent; &#162; &#xA2; ¢

фунт стерлінгів &pound; &#163; &#xA3; £

єна &yen; &#165; &#xA5; ¥

вертикальна риска &brvbar; &#166; &#xA6; ¦

параграф &sect; &#167; &#xA7; §

нерозривний пробіл &nbsp; &#160; &#xA0;  

знак грошової одиниці &curren; &#164; &#xA4; ¤

знак авторського права &copy; &#169; &#xA9; ©

охороняємий знак &reg; &#174; &#xAE; ®

градус &deg; &#176; &#xB0; °

плюс - мінус &plusmn; &#177; &#xB1; ±

знак множення &times; &#215; &#xD7; ×

лапки &quot; &#34; &#x22; "

амперсант &amp; &#38; &#x26; &

ліва кутова дужка &lt; &#60; &#x3C; <

права кутова дужка &gt; &#62; &#x3E; >

коротке тире &ndash; &#8211; &#x2013; –

довге тире &mdash; &#8212; &#x2014; —

ромб &loz; &#9674; &#x25CA; ◊

піка &spades; &#9824; &#x2660; ♠

трефа &clubs; &#9827; &#x2663; ♣

черва &hearts; &#9829; &#x2665; ♥

бубна &diams; &#9830; &#x2666; ♦

торгова марка &tm; &#153; &#x0020; ™

Для використання одного з цих символів в документі HTML просто укажіть його замінник в одному рядку з текстом.

 Створення списків  

  

Створення упорядкованого списку

Використання дескриптора <OL>

Додаткові атрибути дескриптора <OL>

Створення неупорядкованого списку

Використання дескриптора <UL>

Додаткові атрибути дескриптора <UL>

Створення меню

Створення списків каталогу

Створення списків визначень

Комбінування списків

Форматування списків вручну

Створення упорядкованого списку

Список у HTML складається з контейнера, що ідентифікує список, і стандартного дескриптора елементів списку (у HTML всі елементи списку використовують один дескриптор — <LI>, а самі списки розрізняються за своїми дескрипторами контейнерами). Упорядкований список (ordered list), називається також нумерованим списком (numbered), використовується для створення послідовного ряду чи елементів етапів. Коли Web-браузер зустрічає дескриптор упорядкованого списку, він нумерує елементи списку послідовно, починаючи з одиниці.

Використання дескриптора <OL>

Упорядковані (чи нумеровані) списки починаються з дескриптора <OL>, a кожен елемент списку містить дескриптор <LI>. Сигналом про закінчення списку служить дескриптор </OL>. Контейнер списку вставляє перехід рядка на початку та кінці списку, тому не обов'язково на початку і наприкінці списку ставити дескриптори абзацу <Р> — хіба що з метою зовнішнього ефекту.

Списки підтримують внутрішні HTML-елементи. Одним з найбільш важливих елементів є дескриптор абзацу <Р>, що розділяє текст на елементи списку. До інших потрібних дескрипторів відносяться дескриптори логічного і фізичного стилю (<ЕМ> і <І>). У списках не рекомендується використовувати дескриптори заголовків: хоча вони інтерпретуються правильно, однак оскільки заголовки завжди виділяються переходом рядка, зовнішній вигляд списку погіршується.

У прикладі показано використання контейнера списку <OL>. Варто звернути особливу увагу на закриваючі дескриптори, особливо у вкладених списках. Для полегшення читання коду можна використовувати відступи на початку рядків і додаткові рядки, оскільки Web-браузер ігнорує їх. На мал. 1 показано, як даний HTML-код інтерпретується браузером.

<HTML>

<HEAD>

<TITLE>Приклад упорядкованого списку</TITLE>

</HEAD>

<BODY>

<OL>

    <LН><EМ>Кольори веселки: </EM><BR>

    <LI>Червоний

    <LI>Жовтий

    <LI>Зелений

    <LI>Голубий

    <LI>Синій

    <LI>Фіолетовий

</OL>

</BODY>

</HTML>

Мал. 1. Web-браузер відображає внутрішні HTML-елементи відповідно до визначення

Можна створювати вкладені упорядковані списки. Код такого списку представлений у наступному прикладі, а його зовнішній вигляд наведено на мал. 2.

<HTML>

<HEAD>

<TITLE>Приклад вкладеного упорядкованого списку</TITLE>

</HEAD>

<BODY>

 <OL>

    <LH><EМ>Планети Сонячної системи: </EM><BR>

    <LI>Меркурій

    <OL>

      <LI>57.9 мільйонів кілометрів від Сонця

      <LI>супутники відсутні

    </OL>

    <LI>Венера

    <OL>

      <LI>108 мільйонів кілометрів від Сонця

      <LI> супутники відсутні

    </OL>

      <LI>Земля

      <OL>

        <LI>149.6 мільйонів кілометрів від Сонця

        <LI>один супутник: Місяць

      </OL>

      <LI>Mapc

      <OL>

        <LI>227.9 мільйонів кілометрів від Сонця

        <LI>два супутники

        <OL>

           <LI>Фобос

           <LI>Деймос

        </OL>

      </OL>

 </OL>

</BODY>

</HTML>

Мал. 2. Для поліпшення зовнішнього вигляду у вкладених списках автоматично розставляються відступи

Для полегшення читання коду HTML-документів варто використовувати відступи і порожні рядки. Web-браузери при форматуванні тексту ігнорують їх, але читати код, оформлений відповідним чином, набагато зручніше.

Додаткові атрибути дескриптора <OL>

У HTML 4.0 визначені атрибути дескриптора <OL>, що з'явилися як розширення Netscape. Тепер вони отримали загальне визнання і стали частиною специфікації HTML.

За допомогою цих атрибутів можна змінювати форматування і початкове значення нумерації елементів списку. У таблиці перераховані атрибути та їхні функції.Атрибут Опис

COMPACT Додає списку більш компактний вигляд

ТУРЕ=А Установлює як номери прописні літери

ТУРЕ=а Установлює як номери малі літери

TYPE=I Установлює як номери прописні римські цифри

TYPE=i Установлює як номери рядкові римські цифри

ТУРЕ=1 Установлює як номери числа

TYPE=n Установлює початкове значення номерів елементів поточного списку

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

<HTML>

<HEAD>

<TITLE>

Приклад вкладеного упорядкованого списку з атрибутами TYPE

</TITLE>

</HEAD>

<BODY>

<OL TYPE=I>

   <EM> Планети Сонячної системи:</EM><BR>

   <LI>Меркурій

   <OL TYPE=A>

     <LI>57.9 мільйонів кілометрів від Сонця

     <LI>супутники відсутні

   </OL>

   <LI>Beнepa

   <OL TYPE=A>

     <LI>108 мільйонів кілометрів від Сонця

     <LI> супутники відсутні

   </OL>

   <LI>Земля

   <OL TYPE=A>

     <LI>149.6 мільйонів кілометрів від Сонця

     <LI>один супутник: Місяць

   </OL>

   <LI>Mapc

   <OL TYPE=A>

     <LI>227.9 мільйонів кілометрів від Сонця

     <LI>два супутники

     <OL>

        <LI>Фобос

        <LI>Деймос

     </OL>

   </OL>

</OL>

</BODY>

</HTML>

Мал. 3. Зовнішній вигляд списку може змінюватися. Зверніть увагу на нумерацію головного списку за допомогою римських цифр

МОЖЛИВІ ПРОБЛЕМИ

Я хочу вставити в список абзац звичайного тексту. Як зробити, щоб нумерація списку після цього абзацу продовжилася?

У HTML-специфікаціях мається атрибут дескриптора <OL> - START. Можна перервати список, наприклад, на елементі з номером 7, а потім продовжити його, указавши, що нумерацію в ньому треба почати з цього номера: <OL START=7>. Зрозуміло, замість 7

 Створення неупорядкованого списку  

 У HTML підтримуються і неупорядковані (unordered), чи маркіровані (bulleted), списки, у яких не визначається структура даних і зв'язки між елементами.

Використання дескриптора <UL>

Для неупорядкованого (маркірованого) списку використовується контейнер <UL>. Як і в упорядкованих списках, у маркірованих списках початок і кінець списку виділяються переходом рядка; у них так само підтримуються внутрішні HTML-елементи і вкладені списки. Як і для упорядкованих списків, для них потрібно закриваючий дескриптор. Наявність дескриптора </UL> сигналізує про закінчення списку. Web-браузер підтримує вкладені списки й автоматично забезпечує для них додатковий відступ, а в деяких браузерах піктограма-маркер списку залежить від рівня вкладеності. Вид піктограм залежить від браузера.

Наведено використання контейнера списку <UL>. Для полегшення читання HTML-коду можна включати в нього відступи і порожні рядки, що будь проігноровані Web-браузером. На мал. 4 показано, як даний HTML-код інтерпретується браузером.

<HTML>

<HEAD>

<TITLE>Приклад вкладеного неупорядкованого списку</TITLE>

</HEAD>

<BODY>

<UL>

  <EМ> Планети Сонячної системи:</EM><BR>

  <LI>Меркурій

  <UL>

    <LI>57.9 мільйонів кілометрів від Сонця

    <LI> супутники відсутні

  </UL>

  <LI>Венера

  <UL>

    <LI>108 мільйонів кілометрів від Сонця

    <LI>супутники відсутні

  </UL>

  <LI>Земля

  <UL>

    <LI>149.6 мільйонів кілометрів від Сонця

    <LI>один супутник: Місяць

  </UL>

  <LI>Mapc

  <UL>

    <LI>227.9 мільйонів кілометрів від Сонця

    <LI>два супутники

    <UL>

        <LIo6oc 

        <LI>Деймос

    </UL>

  </UL>

</UL>

</BODY>

</HTML>

Мал. 4 Web-браузер автоматично установлює відступ для вкладеного списку і використовує для нього інші маркери

Додаткові атрибути дескриптора <UL>  

Як і у випадку дескриптора <OL>, у HTML визначені атрибути дескриптора <UL>, що з'явилися як розширення Netscape. Є можливість встановлювати маркери у вигляді окружностей, кіл або квадратів. Ці атрибути дозволяють автору змінювати зовнішній вигляд списків. Для зміни маркерів списку використовується атрибут TYPE. Він може приймати значення DISC, SQUARE і CIRCLE. Далі наведено використання цього атрибута. Зовнішній вигляд такого списку в браузері показаний на мал. 5.

<HTML>

<HEAD>

<TITLE>

Приклад вкладеного неупорядкованого списку з використанням

 аргументу TYPE

</TITLE>

</HEAD>

<BODY>

<UL TYPE=SQUARE>

  <EM>Планети Сонячної системи:</EM><BR>

  <LI> Меркурій

  <UL TYPE=CIRCLE>

     <LI>57.9 мільйонів кілометрів від Сонця

     <LI> супутники відсутні

  </UL>

  <LI>Венера

  <UL TYPE=CIRCLE>

     <LI>108 мільйонів кілометрів від Сонця

     <LI>супутники відсутні

  </UL>

  <LI>Земля

  <UL TYPE=CIRCLE>

     <LI>149.6 мільйонів кілометрів від Сонця

     <LI>один супутник: Місяць

  </UL>

  <LI>Mapc

  <UL TYPE=CIRCLE>

     <LI>227.9 мільйонів кілометрів від Сонця

     <LI>два супутники

     <UL TYPE=DISC>

         <LI>Фобос

         <LI>Деймос

     </UL>

  </UL>

</UL>

</BODY>

</HTML>

Мал. 5.

У HTML не даремно використовуються різні маркери для візуального поділу вкладених списків. Управляючи маркерами вручну, можна послабити звичні для користувача даного браузера позначень взаємозв'язків між частинами документа. Чим менше зусиль треба прикласти користувачу для з'ясування вкладених списків, тим легше йому вникнути в суть документа. Тому управляти марками слід дуже обачно.

Крім атрибутів дескрипторів <OL> і <UL>, HTML 4.0 підтримує розширення для окремих елементів списку. Ці розширення базуються на особливостях контейнера того списку, у якому знаходяться елементи. У нумерованих списках можна змінювати для елементів списку поточний атрибут TYPE і атрибут VALUE (за допомогою дескриптора <VALUE> можна починати нумерацію списку з будь-якого чи значення змінювати нумерацію усередині списку). Це ще один засіб продовжити нумерацію списку, якщо вона була перервана введенням HTML-об'єкта іншого типу (ці зміни торкаються і всі наступні елементи списку). Змінювати елементи неупорядкованого списку можна за допомогою параметра TYPE. Ця зміна буде також поширюватися і на всі наступні елементи списку.

Як дескриптор <OL>, так і дескриптор <UL> підтримують атрибут Compact, що вказує браузеру, що список варто відображати в більш компактному виді.

Створення меню  

 Списки елементів меню (menu lists) являють собою ще один тип списків, підтримуваний HTML і Web-браузерами. Відмінність цього типу списків від інших полягає в основному в HTML-кодах для його відображення. Більшістю браузерів контейнер <MENU> за замовчуванням відображається таким же стилем і шрифтом, як і контейнер неупорядкованого списку. Відмінності цього списку виявляються, якщо в настроюваннях браузера вибрати особливий формат для відображення абзаців меню. У наступних версіях HTML і в нових версіях браузерів і інших додатків ці списки можуть стати більш функціональними, і вид розділів меню буде відрізнятися від виду списків.

Як і описані раніше списки, список елементів меню виділяється перекладами рядка на початку і кінці списку. У нього також можна включати інші HTML-елементи. Найчастіше в списках цього типу використовується елемент прив'язки. Він зв'язує меню з іншими ресурсами чи документа іншими документами Internet. Далі показане типове використання контейнера <MENU>.

Хоча в HTML типам списків привласнені імена, це не означає, що їхнє використання обмежене. У кожному конкретному випадку можна вибрати такий тип списку, що щонайкраще подає інформацію.

<HTML>

<HEAD>

<TITLE>Приклад списку елементів меню</TITLE>

</HEAD>

<BODY>

<MENU>

      <LH><EM>Планети Сонячної системи:</EM><BR>

      <LI><A HREF="mercury.htm">Mepкypій</A>

      <LI><A HREF="venus.htm"> Венера </А>

      <LI><A HREF="earth.htm"> Земля </А>

      <LI><A HREF="mars.htm"> Марс </А>

      <LI><A HREF="Jupiter.htm"> Юпітер </А>

      <LI><A HREF="saturn.htm"> Сатурн </А>

      <LI><A HREF="uranus .htm"> Уран </А>

      <LI><A HREF="neptune.htm"> Нептун </А>

      <LI><A HREF="pluto.htm"> Плутон </А>

</MENU>

</BODY>

</HTML>

Списки елементів меню подаються Web-браузерами так само, як неупорядковані списки. На мал. 6 показано, як це робить Microsoft Internet Explorer.

Мал. 6.

Елементи меню (і інших типів списків) можуть містити гіперпосилання на інші документи чи ресурси Internet. Для створення посилань використовується контейнер <А>:

<А НREF=home.htm>Перейти на мою початкову сторінку</А>

Якщо клацнути на тексті Перейти на мою початкову сторінку, браузер завантажить документ home.htm.

 Створення списків каталогу  

 Елемент <DIR> багато в чому діє аналогічно елементу <MENU>. Контейнер <DIR>, що представляє собою список каталогу (directory list) за замовчуванням теж відображається у вигляді неупорядкованого списку.

У зв'язку зі специфічним призначенням контейнера <DIR>-довжина елементів його списку обмежена двадцятьма чотирма символами. Кожен пункт відображається в окремому рядку, як каталоги файлів у UNIX чи DOS при виклику відповідної команди з ключем /W. У сучасних браузерах це обмеження відсутнє. Специфіка контейнера <DIR> не припускає використання усередині нього інших елементів HTML-форматування, однак браузери їх коректно інтерпретують. При використанні дескриптора <DIR> варто пам'ятати, що присутність закриваючого дескриптора </DIR> обов'язково. Наведемо типове застосування контейнера <DIR>.

<HTML>

<HEAD>

<TITLE>Приклад списку каталогу</TITLE>

</HEAD>

<BODY>

<DIR>

      <EM>Кольори веселки: </EM><BR>

      <LI>Красний

      <LI>Оранжевий

      <LI>Жовтий

      <LI>3елений

      <LI>Голубий

      <LI>Синій

      <LI>Фіолетовий

</DIR>

</BODY>

</HTML>

 Створення списків визначень  

 Список визначень (definition list) є особливим типом списків у HTML. Його формат нагадує формат словника: обумовлений термін і визначення, розміщене з відступом. Такий формат особливо зручний, якщо потрібно створити список елементів з описом, на зразок чи каталогу списку відділів компанії. Елемент <DL> забезпечує переклад рядка на початку і кінці списку. У контейнері <DL> дескриптором <DT> відзначається термін, а дескриптором <DD> — визначення. Обидва ці дескриптора відносяться до відкриваючого. Закриваючі дескриптори не потрібні.

Звичайний формат списку визначень такий:

<DL>

<DT>Термін

<DD>Визначення терміна

</DL>

Текст у дескрипторі <DT> повинний складатися з одного рядка, але якщо він не міститься у вікні браузера, те переноситься на інший рядок без відступу. Дескриптор <DD> відображає текст визначення, розташований під терміном з відступом в один чи два пробіли (це залежить від того, як список визначень інтерпретується браузером).

У специфікаціях HTML 4.0 мається додатковий атрибут дескриптора <DL>: - COMPACT. Передбачається, що цей атрибут визначає інший стиль списку, з меншим розміром чи шрифту більш компактним розташуванням символів. Це може застосовуватися при створенні вкладених списків визначень ( що знаходяться в інших списках визначень або в нумерованих і маркірованих списках) чи для поліпшення загального виду сторінки. На жаль, більшість браузерів ігнорує цей атрибут, представляючи список визначень у стандартному форматі.

Списки визначень можуть містити в собі інші елементи HTML. Звичайно це фізичні і логічні стилі, а також інші списки. Хоча Web-браузери можуть правильно інтерпретувати такі елементи, як заголовки, включення їх у список є поганим тоном. Їхнє використання має на увазі переклад рядка, крім того, дескрипторами заголовків звичайно виділяються окремі абзаци, а не елементи списку. Нижче наведено приклад списку визначень.

На мал. 7 показано, як цей документ виглядає в браузері. Інші браузери можуть зобразити даний текст інакше.

Браузер Netscape Navigator малює горизонтальну риску (як якби в текст був внесений дескриптор <HR>) після дескриптора <DD> списку визначень. У результаті текст після цього дескриптора відображається з відступом, що підвищує виразність списку визначень.

<HTML>

<HEAD>

<TITLE>Приклад списку визначень</TITLE>

</HEAD>

<BODY>

<DL>

<DT>Меркурій

    <DD>Це сама маленька і найближча до сонця планета

        з періодом обертання навколо Сонця в 88.0 днів і

        середньою відстанню до Сонця 58.3 мільйона кілометрів.

        Середній радіус складає 2414 кілометра.

   <DT>Венера

    <DD>Друга планета з радіусом 6052 кілометра,

        масою, що складає 0.815 маси Землі, періодом

       обертаннянавколо Сонця 224.7 днів і

        середньою відстанню до Сонця 108 мільйонів кілометрів.

   <DT>Земля

    <DD>Третя від Сонця планета, з періодом обертання

        навколо Сонця 365.26 днів, середньою відстанню,

        що складає 149 мільйонів кілометрів,

        періодом обертання 23 години 56.07 хвилин,

        середнім радіусом 6374 кілометрів,

        і масою 29.11 x 10<SUP>24</SUP> кг

        (13.17 х 10<SUP>24</SUP> фунтів).

</DL>

</BODY>

</HTML>

Мал. 7

 Комбінування списків  

 Іноді усередині одного списку необхідно використовувати вкладені списки декількох типів. Наприклад, необхідно замість одного з елементів нумерованого списку вставити новий список. Замість створення упорядкованого списку з нумерацією елементів, можна вставити маркірований список, що буде відрізнятися від списку, що охоплює, відсутністю нумерації елементів. У HTML підтримуються будь-які комбінації вкладених списків. Наведемо приклад комбінації списків.

<HTML>

<HEAD>

<TITLE>Приклад комбінованого списку</TITLE>

</HEAD>

<BODY>

<OL>

<EM>Планети Сонячної системи: </EM><BR>

<LI>Меркурій

 <UL>

  <UL>

   <LI>Римський бог торгівлі, подорожей і злодійства

   <LI>Опис

    <DL>

      <DT>Меркурій

      <DD> Це сама маленька і найближча до сонця планета із

           періодом обертання навколо Сонця в 88.0 днів і

           середньою відстанню до Сонця 58.3 мільйона

           кілометрів.Середній радіус складає 2414 кілометра.

    </DL>

  </UL>

 </UL>

 <LI>Венера

   <UL>

    <UL>

        <LI>Римська богиня любові і краси

        <LI>Опис

        <DL>

          <DT>Венера

          <DD>Друга планета з радіусом 6052 кілометра

              (3760 миль), масою, що складає 0.815 маси Землі,

              періодом звертання навколо Сонця 224.7 днів

              і середньою відстанню до Сонця 108 мільйонів

               кілометрів (672 мільйонів миль).

        </DL>

    </UL>

   </UL>

</OL>

</BODY>

</HTML>

Мал. 8.

Тут використані три види списків: нумерований список, маркірований список і список визначень. Головним списком є нумерований список планет. Кожен елемент списку містить вкладений маркірований список, що складається з імені римського бога, на честь якого названа планета, і її опису. Браузер установлює відступ для вкладених списків. Якщо потрібно збільшити цей відступ, можна вкласти список у додатковий порожній список. Наприклад, у наступному списку:

<OL>

   <LI>Приклад списку

   <LI>Я хочу збільшити відступ

</OL>

можна збільшити відступ у такий спосіб:

<OL><OL>

        <LI> Приклад списку

        <LI> Я хочу збільшити відступ

</OL></OL>

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

 Форматування списків вручну  

 У HTML-коді можна без особливих зусиль створювати маркери для списків. Розглянемо HTML-код, представлений нижче.

Дескриптори <UL> і </UL> використовуються для форматування оточення і установлення відступу в неупорядкованому списку. Однак дескриптори <LI> не використовуються, оскільки стандартні маркери не потрібні. Замість цього кожен елемент списку визначається приблизно в такий спосіб:

<IMG SRC="cube.gif" ALIGN=TOP>Червоний<BR>

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

<HTML>

<HEAD>

<TITLE>Приклад списку, відформатованого вручну </TITLE>

</HEAD>

<BODY>

<IMG SRC="BulletSquiggle.gif" ALIGN=ТОР>

<EM>Кольори веселки: </EM><BR>

<UL>

     <IMG SRC="BulletCheck.gif" ALIGN=TOP>Червоний<BR>

     <IMG SRC="BulletCheck.gif" ALIGN=TOP>Oранжевий<BR>

     <IMG SRC="BulletCheck.gif" ALIGN=ТОР>Жовтий<ВR>

     <IMG SRC="BulletCheck.gif" ALIGN=TOP>3eлений<BR>

     <IMG SRC="BulletCheck.gif" ALIGN=TOP>Гoлyбий<BR>

     <IMG SRC="BulletCheck.gif" ALIGN=TOP>Синій<BR>

     <IMG SRC="BulletCheck.gif" ALIGN=TOP >Фіолетовий<ВR>

</UL>

</BODY>

</HTML>

 Розміщення графіки на Web-сторінці  

 Навіщо потрібна графіка ?

Загальні принципи

Що варто знати при використанні графічних зображень?

Авторські права

Вибір формату графічного файла

Колір

Втрата інформації

Підтримка браузерами

Додавання зображень у документ HTML

Вирівнювання тексту з зображеннями в рядку

Розташування тексту на Web-сторінці

Завдання браузеру розмірів зображення

Зменшення розмірів зображення

Збільшення зображення

Створення альтернативного тексту

Рамка навколо зображення

Вільний простір навколо зображення

Використання зображення як посилання

Навіщо потрібна графіка ?

Елементи графіки можуть зробити ваш текстовий документ HTML більш привабливим. Уявіть собі документ HTML, у якому міститься дуже нудний матеріал, наприклад розроблена вами технічна специфікація. Якщо ви помістите в такий документ тільки текст, то документ буде виглядати не занадто привабливим. Але варто додати кілька придатних зображень, і текст буде набагато приємніше читати. Такий документ цілком зможе зацікавити відвідувача.

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

До цього мова йшла про основні дескриптори HTML, необхідні для додавання тексту в документи і для його форматування. У цій главі буде розказано про засоби, за допомогою яких можна вбудовувати зображення в документи HTML, додаючи Web-сторінкам більш привабливий вигляді/

Загальні принципи

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

Чи дійсно графічне зображення поліпшує Web-сторінку?

Чи можна використовувати готові зображення? Що варто знати про авторські права.

Що варто знати при використанні графічних зображень?

При додаванні елементів графіки в документи HTML обміркуйте, наскільки це необхідно. Це не означає, що ви повинні уникати використання зображень. Але якщо ви розумієте основні принципи, то зможете точніше підібрати придатні зображення. Розміщуючи в документі зображення слід знати про наступне.

Графічні файли завантажуються досить повільно. Користувач, що має модем зі швидкістю 14,4 Кбит/c, буде чекати кілька хвилин, поки буде завантажено графічний файл.

Пошукові системи не вміють обробляти зображення. Такі пошукові системи, як AltaVista чи Excite, не можуть індексувати зображення. Тому, якщо ви будете покладатися в основному на зображення, то, можливо, користувачі цих пошукових систем не знайдуть вашу Web-сторінку.

У деяких користувачів немає графічних браузерів. Наприклад, тисячі людей використовують браузер Lynx, що дозволяє переглядати тільки текст. Крім того, користувачі InternetExplorer і Netscape можуть відключити завантаження зображень, щоб прискорити відкриття Web-сторінки.

Зображення не завжди інтернаціоналізовані. Оскільки документи HTML, опубліковані в WWW, мають всесвітню аудиторію, то інтернаціоналізація зображень може мати важливе значення.

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

Авторські права

Стрімкий розвиток видавничої діяльності за допомогою електронних засобів надав поштовх новій величезній кримінальній хвилі. Багато хто з порядних людей, не коливаючись, запозичають графічні зображення з WWW. Адже при завантаженні вони ніби не належать нікому. Незважаючи на це, закони про авторські права стосуються й електронних зображень. Якщо ви використовуєте зображення, що захищене від запозичення, то автор може подати на вас до суду за заподіяний йому збиток.

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

• Прогляньте документ, у якому знаходиться зображення, — чи немає в ньому попередження про можливі наслідки порушення авторських прав.

• Якщо ви запозичили зображення з колекції чи кліпів з бібліотеки зображень, зверніться до документації на бібліотеку в пошуках інформації про авторські права.

• Якщо ви скануєте зображення, з журналу чи з книги, то таке зображення практично завжди захищено авторськими правами.

• Якщо ви завантажили зображення з комерційного вузла (наприклад, з електронного журналу), то, швидше за все, воно захищено авторськими правами.

Чи можна заявити про те, що ви не знали про наявність авторських прав, коли запозичали зображення? Ні. Ви несете відповідальність за визначення наявності авторських прав на зображення. Оскільки це не завжди можливо, найкраще використовувати тільки ті зображення, у відсутності авторських прав на які ви твердо переконані.

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

Вибір формату графічного файла

Ви можете використовувати для збереження зображень десятки графічних форматів — gif, jpeg, pcx, png, wmf та інші. Однак при створенні зображення для документів HTML краще вибирати ті формати, що розуміються більшістю браузерів: GIF чи JPEG.

Усі формати мають визначені переваги і недоліки. Наприклад, один формат швидше завантажується, а інший — зберігає більше деталей зображення. Цей розділ допоможе вам вибрати придатний формат. Спочатку дається короткий опис кожного формату, а потім порівнюється швидкість, передача кольору, контрастність і підтримка браузерами різних форматів.

Якщо ви хочете спростити собі роботу, оберіть формат gif. Він підтримується більшістю Web-браузерів (на відміну від формату png). Крім того, він дозволяє використовувати "черезрядкову" технологію, що дає користувачам можливість переглянути зображення до закінчення його завантаження. У цьому форматі підтримується прозорість зображення, тому ви можете створити чудові карти посилань із прозорим тілом. Крім того, цей, формат можна використовувати навіть для простої анімації.

Найголовніше, що варто мати на увазі при виборі формату графічного файла ‑ це швидкість завантаження стосовно якості зображення. Якщо ви збираєтеся використовувати зображення на своїй Web-сторінці, то, мабуть, ви повинні зберігати це зображення у форматі, що завантажується з найбільшою швидкістю. З іншого боку, при швидкому завантаженні погіршується якість зображення.

Кращим варіантом є формати gif, png чи jpeg. Файли bmp взагалі не стискуються, тому вони завантажуються повільніше, ніж інші. gif, pngі jpeg дають прийнятні результати в порівнянні з іншими форматами, доступними в WWW. Файли gif і png займають більше місця, ніж файли jpeg, однак вони швидше декодуються і зберігають більше деталей зображення.

Формат gif особливо добре стискає зображення, що містять невелику кількість кольорів. Зображення з невеликою кількістю кольорів стискуються краще у форматі gif, ніж у форматі jpeg.

Колір

gif підтримує 256 кольорів, jpeg— 16,7 мільйонів кольорів. Тому, якщо ви використовуєте невелику кількість кольорів у зображенні, то вас цілком влаштує формат gif. Однак, якщо ви хочете зробити фотографічну якість передачі кольору, то віддайте перевагу формату jpeg.

Втрата інформації

Схеми стиску з втратами можуть привести до того, що втратяться деякі деталі зображення — от чому ці схеми можуть набагато зменшити розмір файла; при використанні схеми стиску без втрат не губиться жодна деталь. У табл. 1 описуються схеми стиску різних форматів графічних файлів.Формат Схема Опис

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

PNG Без втрат також стискується без втрати деталей. png є гарною альтернативою GIF, за винятком того, що він підтримується не всіма браузерами

JPEG 3 втратами  приводить до втрати деталей при збереженні зображення. Якщо розмір файла хвилює вас більше, ніж збереження деталей, то використовуйте jpeg

Підтримка браузерами

Не варто змушувати читачів установлювати допоміжний додаток для перегляду зображень у ваших документах НТМL. Тому використовуйте такі формати файлів, що підтримуються популярними браузерами, наприклад gif і jpeg. Формат png ще не підтримується багатьма браузерів, тому краще утриматися від його використання.

Додавання зображень у документ HTML  

 Помістити зображення в документ HTML дуже просто. Для цього досить використати дескриптор <IMG> з параметром SRC, що вказує URL-адресу графічного файла (мал. 1). Введіть цей дескриптор у те місце документа HTML, де ви хочете помістити зображення. Потім замініть ім'я файла на URL малюнка.

<IMG SRC="ім'я файла">

За замовчуванням, браузер відобразить це зображення в зазначеному місці, праворуч від тексту чи іншого об'єкта, що безпосередньо передує зображенню. Подивіться на приклад, наведений нижче. Він показує теж саме зображення три рази. Щоразу зображення відображається в рядку, тому браузер розташовує його праворуч від попереднього тексту.

<HTML>

<HEAD>

<TITLE>Використання дескриптора IMG</TITLE>

</HEAD>

<BODY>

<Р><IMG SRC=”book.gif”> Цей текст йде відразу ж після малюнка.</Р>

<Р> Цей текст розірваний <IMG SRC="book.gif'> малюнком.</Р>

<Р> У цьому випадку малюнок з'являється після тексту. <IMG SRC="book.gif '></Р>

</BODY>

</HTML>

Мал. 1. Зображення можна помістити в будь-яке місце документа HTML

Рекомендується зберігати всі зображення в одному каталозі поза кореневою папкою Web-вузла. Тоді для доступу до цих малюнків ви зможете вказувати відносний шлях у сполученні з дескриптором <BAZE>, не вказуючи повний URL.

Вирівнювання тексту з зображеннями в рядку

За замовчуванням при розташуванні зображення в рядку текст вирівнюється за нижньою частиною зображення. Можливо, ви захочете змінити таке вирівнювання, оскільки при цьому залишається занадто багато порожнього місця на сторінці. Це настроювання можна змінити за допомогою параметра ALIGN у дескрипторі <IMG>. В таблиці перераховані значення, які можна задавати цьому параметру.Значення Опис

ТОР Вирівнює текст по верхньому краю зображення

MIDDLE Вирівнює текст по середній частині зображення

BOTTOM Вирівнює текст по нижньому краю зображення

У прикладі наведений код документа HTML, що включає три зображення, для кожного з який використовується одна з опцій вирівнювання, наведених у попередній таблиці. На мал. 2 показана Web- сторінка, створена на основі прикладу.

<HTML>

<HEAD>

<TITLE>Використання атрибута ALIGN у дескрипторі  IMG</TITLE>

</HEAD>

<BODY>

<Р>

<IMG SRC="book.gif" ALIGN=TOP>Цей текст вирівнюється по верхньому краю зображення.</Р>

<Р>

<IMG SRC="book.gif" ALIGN=MIDDLE>Цей текст вирівнюється по середній частині зображення.</Р>

<Р>

<IMG SRC="book.gif" ALIGN=BOTTOM>Цей текст вирівнюється по нижньому краю зображення.</Р>

</BODY>

</HTML>

Мал. 2. За замовчуванням базова лінія тексту вирівнюється по нижньому краю зображення

Розташування тексту на Web-сторінці

За замовчуванням браузер показує зображення в рядку, тобто воно розташовується праворуч від попереднього об'єкта. Текст не оточує зображення. Однак ви можете розмістити зображення з правої чи з лівої сторони Web-сторінки, при цьому навколишній текст буде розташовуватися уздовж границі зображення. Такий тип зображення називається типом що плаває.

Створити зображення, що плаває, можна за допомогою параметра ALIGN дескриптора <IMG>. Це той же параметр, що використовується для вирівнювання тексту навколо зображення. У таблиці перераховані значення, які можна привласнити цьому параметру.Значення Опис

LEFT Показує зображення ліворуч; навколишній текст обтікає малюнок

RIGHT Показує зображення в правій частині вікна; навколишній текст обтікає зображення

У прикладі показано документ HTML, у якому є два зображення, з використанням значень вирівнювання, поданих у таблиці. На мал. 3 показана отримана Web-сторінка.

<HTML>

<HEAD>

<TITLE>Використання параметра ALIGN у дескрипторі IMG</ TITLE>

 </HEAD>

<BODY>

<P>

<IMG SRC=”book.gif” ALIGN=LEFT>

Цей текст розташовується праворуч від зображення і нижче.

Цей текст розташовується праворуч від зображення і нижче.

Цей текст розташовується праворуч від зображення і нижче.

Цей текст розташовується праворуч від зображення і нижче.

Цей текст розташовується праворуч від зображення і нижче.

Цей текст розташовується праворуч від зображення і нижче.

Цей текст розташовується праворуч від зображення і нижче.

Цей текст розташовується праворуч від зображення і нижче.

Цей текст розташовується праворуч від зображення і нижче.

</Р>

<Р>

<IMG SRC=”book.gif”ALIGN=RIGHT>

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

Цей текст розташовується ліворуч від зображення і нижче.

</Р>

</BODY>

</HTML>

Мал.3. За замовчуванням базова лінія тексту вирівнюється по нижньому краю зображення

Завдання браузеру розмірів зображення  

 У дескрипторі <IMG> ви можете явно вказати браузеру розміри зображення — його висоту і ширину. Цей підхід має переваги.

Завдання розмірів необхідно користувачам, що відключили відображення малюнків. Якщо користувач відключив завантаження зображень, а ви не вказали їхні розміри, то замість зображень користувач побачить маленькі піктограми. У результаті Web-сторінка буде відформатована не так, як ви припускали. Якщо ж ви явно вказали розміри зображення, то браузер у цьому місці відобразить порожню рамку відповідного розміру.

Інформація про розмір зображення прискорює його завантаження. Браузер спочатку показує документ HTML, а потім — зображення. Якщо ви вказуєте розмір зображень, то браузер покаже відформатований документ HTMLпаралельно з завантаженням зображення. Таким чином, користувач побачить Web-сторінку швидше.

Для вказівки розмірів зображення використовуються параметри HEIGHT і WIDTH дескриптора <IMG>. Параметр HEIGHT задає висоту зображення, а WIDTH— його ширину в пікселях.

У прикладі наведено документ, в якому вказується висота і ширина зображення. На мал. 4 показано, як буде виглядати цей документ HTML, якщо відключити завантаження зображення.

<HTML>

<HEAD>

<TITLE>

Використання параметрів HEIGHT і WIDTH для вказівки розмірів зображення

</TITLE>

</HEAD>

<BODY>

<IMGSRC="book.gif" WIDTH=320 HEIGHT=240>

</BODY>

</HTML>

Мал. 4. Якщо вказати розміри зображення, то при відключеному відображенні графіки користувач побачить рамку відповідних розмірів з піктограмою в ній.

Якщо розміри, зазначені вами в параметрах HEIGHT і WIDTH, відрізняються від реальних розмірів зображення, визначених вашим графічним редактором, то браузер масштабує зображення. У наступному розділі розповідається про збільшення і зменшення зображення з дотриманням пропорцій.

Змінення розмірів зображення  

 Зменшення розмірів зображення

Зменшення зображення здійснюється, коли реальне зображення більше, ніж простір, що ви зарезервували для нього за допомогою параметрів HEIGHT і WIDTH. У такому випадку браузер стискає зображення, щоб воно помістилося у відведений для нього простір.

Ви можете спотворити зображення, якщо вкажете неточний розмір. Наприклад, якщо зменшити висоту зображення на 50%, а ширину — на 25%, т.б. воно відобразиться в перекрученому вигляді, як показано на мал. 5.

Мал. 5. Однакове масштабування зображення по висоті і по ширині називається дотримання пропорцій зображення

Завдання висоти і ширини менших, ніж реальна ширина і висота зображення, не зменшує час завантаження. Браузер завантажує все зображення, а потім вже масштабує його, щоб помістити в зарезервоване місце.

Збільшення зображення

Збільшення зображення здійснюється, коли вхідне зображення менше відведеного для нього за допомогою параметрів HEIGHT і WIDTH простору. У такому випадку браузер збільшує зображення, підганяючи його під зарезервований для нього простір.

Як і при зменшенні зображення, необхідно дотримуватися пропорцій. Однак у відмінності від зменшення зображення, при збільшенні вам потрібно також подбати про растеризацію. При збільшенні зображення браузер збільшує кожен піксель. Результат іноді виходить дуже некрасивим, як показано на мал. 6.

Мал. 6. Іноді растеризацію можна використовувати для створення спеціальних ефектів

 Створення альтернативного тексту  

 Отже, ви розмістили декілька зображень в документі HTML. А як потурбуватися про тих користувачів, що не можуть переглядати зображення? Ви можете передбачити для них альтернативний текст, що буде повідомляти їм про зображення. Це можна зробити за допомогою параметра ALT дескриптора <IMG>:

<IMG SRC="ім'я файла" ALT="Опис">

Якщо браузер не відображає графіку, то в тому місці, де повинно бути зображення, користувач побачить альтернативний текст. Якщо ж браузер відображає графіку, то користувач буде бачити альтернативний текст у процесі завантаження зображення. Однак краще скомбінувати альтернативний текст з визначенням розмірів зображення. У такому випадку користувач побачить рамку, що відповідає розмірам зображення, а усередині рамки — альтернативний текст.

У прикладі показано документ HTML, у якому використовується альтернативний текст з описом малюнка. На мал. 7 показано, як виглядає цей документ у браузері, який не відображає графіку.

<HTML>

<HEAD>

<TITLE>Використання параметра ALT</ TITLE>

</HEAD>

<BODY>

<IMG SRC="book.gif” WIDTH=320 HEIGHT=240 ALT="Зображення обкладинки книги">

</BODY>

</HTML>

Мал.7. Браузер відображає альтернативний текст, що заміняє зображення

 Рамка навколо зображення  

 За замовчуванням браузер користувача оточує рамкою всі зображення, що використовуються як прив'язка Ви можете керувати цією рамкою і вільним простором навколо зображень.

Параметру BORDER дескриптора <IMG> привласнюється значення ширини рамки в пікселях. Якщо ви хочете, щоб ширина рамки складала 10 пікселів, задайте цьому параметру значення 10. У прикладі показано документ HTML з трьома зображеннями, що мають рамки різної ширини. На мал. 8 показано, як виглядає цей документ у вікні браузера.

<HTML>

<HEAD>

<TITLE>Використання параметра BORDER</TITLE>

</HEAD>

<BODY>

<А HREF=" ">

<IMG SRC="book.gif" BORDER=0></A><BR>

<А HREF=" "> <IMG SRC="book.gif" BORDER=5></A><BR>

<A HREF=" "> <IMG SRC="book.gif" BORDER=10></A>

</BODY>

</HTML>

Мал. 8. Якщо ви не хочете, щоб браузер оточував зображення рамкою, то задайте параметру BORDER значення 0

 Вільний простір навколо зображення  

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

<HTML>

<HEAD>

<TITLE>Використання параметрів VSPACE і HSPACE</TITLE>

</HEAD>

<BODY>

<IMG SRC="book.gif" VSPACE=20 HSPACE=20 ALIGN=LEFT>

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

Цей текст обтікає зображення.

</BODY>

</HTML>

Мал.9. Розширення вільного простору навколо зображення поліпшить загальний вигляд сторінки

Використання зображення як посилання

Далі буде описуватися, як використовувати зображення як посилання на інший ресурс. Це нескладно. Зображення вміщується в дескриптор <А>, як показано нижче:

<A HREF=http://www.mysite.com><IMG SRC=”image.gif”></A>

ПОНЯТТЯ ПРО

ГІПЕРТЕКСТ І ГІПЕРМЕДІА   

 Поняття про посилання

Посилання на URL

Посилання на документи і файли

Внутрішні посилання

Способи відображення інформації

Елемент LINK

Посилання на інші мережеві ресурси

Створення посилання  на розділи новин Usenet

Забезпечення доступу до FTP

Посилання на Gopher

Доступ до баз даних за допомогою посилань на WAIS

Набори гіперпосилань

Термін гіпертекст (hypertext) дуже часто згадується в зв'язку з Web. Гіпертекстовий документ являє собою документ, в якому містяться посилання на інші документи. При натисненні на посилання здійснюється перехід до іншого документа. Крім цього термін "гіпертекст" відноситься до файлів допомоги та інших наборів пов'язаних між собою документів. Наприклад, при публікації звіту, в якому процитовані деякі джерела, можна зробити посилання на ці джерела. Таким же чином в повідомленні про міграцію певного вигляду птахів можна зробити посилання на Web-сторінки, що розповідають про цих птахів.

Поняття гіпермедіа (hypermedia) включає в себе більше, ніж текст. Воно відноситься до мультимедійних ресурсів, таких як графіка, відео- і аудіофрагменти. У гіпермедійних документах як посилання на інші документи часто використовуються зображення. Наприклад, як посилання на Web-сторінку, присвячену Берліну, можна використати фотокартку з видом цього міста. Існує безліч мультимедійних ресурсів, які можна включати в Web-сторінки, і багато з них можна використати як посилання на інші документи і ресурси Internet. На мал. 8.1 показаний приклад документа з гіпермедіа.

Мал.1. Гіпермедійні документи містять набагато більше, ніж просто текст. У них присутня графіка, аудіо- і відеофрагменти

Поняття про посилання  

 Посилання фактично складається з двох різних частин. По-перше, це місце в документі, помічене як посилання. Воно називається елементом прив'язки (або якорем anchor). По-друге, це та частина, яка повідомляє браузеру, що йому потрібно робити при натисненні на посилання. Це посилання на URL (URL reference). При натисненні на елементі прив'язки браузер завантажує файл або документ, відповідний посиланню на URL. У подальших розділах цієї глави детальніше розказано про ці частини посилання.

Елементи прив'язки

Елемент прив'язки в посиланні може бути словом, групою слів або зображенням. Зовнішній вигляд елемента прив'язки в браузері залежить, в основному, від типу прив'язки, конфігурації браузера і способу створення елемента пив'язки. Існують тільки два типи елементів прив'язки: текстовий і графічний.

Текстові елементи прив 'язки

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

На мал.2 показана Web-сторінка, що містить три текстових елементи прив'язки. На відміну від звичних книжкових посилань, вони розташовані прямо в тексті і є його частиною. При натисненні набудь-яке з посилань завантажується Web-сторінка, пов'язана з цим посиланням. Так влаштована більшість текстових посилань. HTML-код для представлення першого посилання виглядає таким чином (дескриптор <А> описаний далі в цьому розділі в розділі "Посилання на документи і файли"):

<А HREF="vero.htmr'> Vogon Earth Reconnaissance Office </A>

Мал. 2. На цій сторінці ви бачите три посилання, які виділені в тексті за допомогою підкреслення

На мал.3 показана Web-сторінка з безліччю текстових елементів прив'язки. Вони не вбудовані в текст, а розташовані у вигляді списку посилань, з якого відвідувач може вибирати потрібну. Автори Web-сторінок часто користуються таким прийомом для подачі наборів посилань.

Мал. 3. Для пошуку в Web скористайтеся Yahoo!

Графічні елементи прив'язки

Графічні елементи прив'язки аналогічні текстовим. При натисненні на графічний елемент прив'язки браузер завантажує Web-сторінку, на яку зроблено посилання. Графічні елементи прив'язки не підкреслюються і не виділяються кольором, але можуть бути обведені рамкою. Вони не схожі одне на одне їх зовнішній вигляд залежить від вибраного зображення.

Перевагою графічних елементів прив'язки є їх багатогранність і багатофункціональність. Нижче наведені деякі засоби зображення графічних елементів прив'язки за якими їх можна виявити на Web-сторінці.

Маркери. Графічні елементи прив'язки часто використовуються як маркери списку. Для переходу на Web-сторінку, вказану в списку, можна клацнути на зображенні. Часто текст пункту списку також являє собою посилання, і можна клацнути як на зображенні, так і на тексті.

Піктограми. На багатьох Web-серверах як графічні елементи прив'язки використовуються піктограми на зразок піктограм в операційних ситемах Windows. Вони розташовуються на початковій сторінці і подають Web-сторінки, доступні на цьому сервері. На мал.4 показаний Web-сервер, що використовує графічні елементи прив'язки таким чином. HTML-код для піктограми What's New, яка розташована в лівій частині Web-сторінки, може виглядати таким чином:

Мал.4. На початковій сторінці GolfWeb графічні елементи прив'язки в лівому стовпці сторінки представляють все різноманіття сторінок серверу

<А HREF="whatsnew.htm"><IMG SRC="whatsnew.gif' BORDER=0></A>

Реклама. У багатьох Web-серверів є спонсори, що розміщують свою рекламу на сервері. При цьому Web-сервер отримує прибуток і залишається безкоштовним для відвідувачів. Звичайно реклама розташовується у верхній частині Web-сторінки, як показано на мал.5. При натисненні на рекламі браузер завантажує Web-сторінку спонсора.

Мал. 5. Електронний журнал Home Arts залишається безкоштовним завдяки спонсорам, чиї логотипи у верхній частині сторінки являють собою графічні елементи прив'язки

 Посилання на URL  

 Другою частиною посилання є посилання на URL. Це адреса Web-сторінки, яку при натисненні на посиланні завантажує браузер. У обох типах посилань як з текстовими,- так і з графічними елементами прив'язки, використовуються або відносні, або абсолютні посилання.

Відносні посилання

Відносним посиланням називається посилання на URL файла; що знаходиться на тому ж комп'ютері. Це означає, що URL вказується відносно комп'ютера і каталогу, з якого браузер спочатку завантажує Web-сторінку. Наприклад, якщо браузер завантажує сторінку http://www.mysite.com/page/, то відносне посилання picture фактично являє собою наступну URL адресу: http://www.mysite.com/page/picture. Відносні посилання часто використовуються для посилань на Web-сторінки, що знаходяться на одному комп'ютері.

Якщо в HTML-файлі використовується дескриптор <BASE>, то відносні посилання створюються інакше. При використанні дескриптора <BASE> вони завжди встановлюються відносно URL адреси, яка задається в цьому дескрипторі, а не відносно URL тієї сторінки, в якій знаходяться. Наприклад:

<BASE HREF="http://www.tuna.com/~mypages">

<А HREF="index.htm">

Посилання у другому рядку направляє за адресою http://www.tuna.com/~mypages/index.htm, незалежно від того, де знаходиться сама сторінка з посиланням.

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

Абсолютні посилання

Абсолютним посиланням називається посилання, в якому точно вказані комп'ютер, каталог і файл. У той час як відносні посилання застосовуються для Web-сторінок однієї машини, посилаючись на Web-сторінки інших комп'ютерів, необхідно використати абсолютні посилання.

 Посилання на документи і файли  

 Тепер, знаючи термінологію (елементи прив'язки, відносні посилання та інші), ви готові розміщувати посилання на своїх Web-сторінках. Це дуже просто. Потрібно повідомити браузеру, який елемент в HTML-файлі служить прив'язкою, а також указати адресу документа або ресурсу Internet, на який вказує посилання. Все це робиться в дескрипторі <А>.

У подальшому прикладі показано, як виглядає дескриптор <А>. Це його найпростіша форма, що використовується для посилання на іншу Web-сторінку. Єдиний параметр HREF вказує URL адресу, на яку робиться посилання. URL може бути будь-яким абсолютним або відносним посиланням, наприклад

http://wvw.server.com/home/index.htm

Оскільки дескриптор <А> служить контейнером, закриваючий дескриптор </А> потрібно розміщувати з іншого боку елемента прив'язки. Таким чином, відкриваючий дескриптор <А> повідомляє браузер, де починається елемент прив'язки (текстовий або графічний), а закриваючий дескриптор </А> повідомляє браузер, де елемент прив'язки закінчується. Ось приклад:

HREF=URL>Елемент прив'язки</А>

У наступному HTML-коді показано, як додати в HTML-файл текстовий елемент прив'язки. У цьому прикладі параметр HREF посилає до початкової сторінки одного з авторів. Елемент прив'язки, що підкреслюється в Web-браузері, Jerry Honeycutt's. Текст, що знаходиться до і після контейнера <А>, не підкреслюється, оскільки не є частиною елемента прив'язки. Тому, коли користувач клацає на тексті поза контейнером, нічого не відбувається. При натисненні ж на тексті Jerry Honeycutt's браузер завантажує вказану сторінку. На мал.6 показано, як цей елемент прив'язки виглядає в браузері Internet Explorer.

While you're here, why don't you visit

<A HREF="http://rampages.onramp.net/-jerry">Jerry Honeycutt's</A> homepage

Мал. 6. Зовнішнім виглядом посилань можна управляти, використовуючи дескриптор <BODY>

У наведених прикладах досі використовувалися абсолютні посилання, але можна використати і відносні посилання. Однак якщо різні Web-сторінки зберігаються в різних каталогах, то, створюючи відносне посилання, доведеться згадувати, в якому каталозі зберігається HTML-файл, в який треба вставити посилання, оскільки від цього залежить вигляд відносного посилання.

Для розв'язання вищезазначеної проблеми можна на початку HTML-файла розмістити дескриптор <BASE>. При відсутності цього дескриптора всі відносні посилання засновуються на URL поточного HTML-файлa. Дескриптор <BASE> вказує URL. відносно якого проводиться пошук всіх відносних посилань HTML-файлу. Його дія розповсюджується на відносні посилання у всіх HTML-дескрипторах, включаючи дескриптори <А>, <IMG> та інші. Таким чином, якщо до HTML-файла додати рядок

<BASE HREF="http://www.server.com">

то пошук всіх відносних посилань буде проводитися відносно цієї адреси, а не адреси поточного HTML-файла. У цьому випадку відносне посилання images/face.gif фактично буде представляти http://www.server.com/images/face.gif. Потрібно зазначити, що первинне призначення дескриптора <BASE> полягало в тому, щоб указати URL документа, в якому він знаходиться. Це дозволяє користувачеві, що переглядає копію документа, дізнатися в якому місці Internet знаходиться його оригінал.

Деякі браузери підтримують для посилань підказки в стилі ToolTip. Коли користувач затримує покажчик миші над посиланням, браузер в невеликому спливаючому вікні показує вміст атрибута TITLE дескриптора <А>. Таким чином, якщо необхідно надати користувачеві додаткову інформацію про посилання, треба призначити параметру TITLE значення таким чином:

<A HREF="page.html" TITLE= "Перехід на сторінку page.html">

У попередньому прикладі показано, як створювати текстові елементи прив'язки. Графічні елементи створюються аналогічно. Замість розміщення в контейнері <А> тексту, там розміщується графіка, Наведений нижче приклад HTML-коду аналогічний попередньому. На мал.7 показано, як виглядає посилання. Параметр HREF посилається на ту ж сторінку, що і в попередньому прикладі, але замість текстового елемента прив'язки за допомогою дескриптора <IMG> створюється графічний. Коли користувач клацає на будь-якій дільниці зображення, браузер відкриває Web-сторінку, посилання, яке встановлено в дескрипторі <А>.

<AHREF="http://rampages-onramp.net/~jeny">

<IMG SRC="photo.gif"></A>

МАЛ. 8.7. Якщо автор не хоче, щоб зображення було оточене рамкою, він може додати параметр BORDER в дескриптор <IMG> і привласнити йому нульове значення

Карти посилань узагальнюють цю ідею. З їх допомогою окремі частини зображення можуть посилатися на різні URL.

 Внутрішні посилання  

 Так само, як для посилань на інші HTML-файли, встановлюються й елементи прив'язки для посилань на розділи всередині поточного документа. Наприклад, у верхній частині Web-сторінки можна вмістити зміст, а потім зв'язати його пункти з подальшими розділами Web - сторінки.

Це робиться двома етапами. Спочатку потрібно створити вНТМL-файлі елемент прив'язки, які вказують, куди перейти за посиланням. Наприклад, якщо треба створити посилання на середню частину сторінки, то потрібно створити в середній частині елемент прив'язки і за допомогою параметра NAME присвоїти йому ім'я. Ім'я елемента прив'язки використовується в посиланні на нього. Оскільки замість створення посилання елементу прив'язки привласнюється ім'я, параметр HREF не вказується. Потрібно використати відкриваючий і закриваючий дескриптори <А>, але браузер не буде виділяти вміст цього дескриптора, оскільки він не використовується як посилання. Ось як виглядає елемент прив'язки з ім'ям:

NAME="#middle">Середина Web - сторінки</A:>

Після створення такого елемента прив'язки на нього можна посилатися. Для такого посилання використовується спеціальний запис. Замість того, щоб встановити параметр HREF рівним URL іншої Web-сторінки, йому привласнюється ім'я елемента прив'язки, а перед ім'ям - ставлять знак #. У наведеному нижче прикладі параметр HREF посилається на елемент прив'язки, показаний в попередньому прикладі. Перед ім'ям стоїть знак #, який вказує браузеру, що посилання внутрішнє. Коли користувач клацає на фразі "Перейти до середини", то браузер розміщує елемент прив'язки з попереднього прикладу у верхній частині свого вікна.

HREF="# middle ">Перейти до середини</А>

Деякі браузери не переміщують названий елемент прив'язки у верхню частину свого вікна, якщо він був вже відображений у вікні. Тобто, якщо внутрішнє посилання знаходиться у верхній частині Web-сторінки, а названий елемент прив'язки відображається десь в середині, то при натисненні користувача на внутрішньому посиланні браузер не виконує переміщення.

Можна встановлювати імена для більшості елементів HTML-сторінки за допомогою параметра ID. Наприклад, можна призначити ім'я заголовку таким чином:

<Н2 ID=JampHere>Ви можете перейти прямо до цього заголовка !</Н2>

Потім можна посилатися на ім'я з присвоєним атрибутом ID таким чином:

HREF=JumpHere>Клацніть тут, щоб перейти прямо до заголовка! </А>

Способи відображення інформації, що завантажується  

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

Браузер знає, як обробляти файл, і відображає його в своєму вікні. Це справедливо для більшості графічних форматів. Наприклад, при натисненні на посиланні, яке вказує на GIF-файл, браузер завантажує даний GIF-файл, прибирає з вікна поточну Web-сторінку і відображає GIF-файл. Однак в деяких випадках браузер може відображати файл в своєму вікні за допомогою модулів-додатків.

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

 Елемент LINK  

 У той час як дескриптор <А> використовується для створення гіперпосилань, якими користувач при бажанні може скористатися, елемент LINK застосовується для того щоб зв'язати різні ресурси з HTML-документом. Листи стилів, кольорові палітри, версії документа ца різними мовами, сценарії, каталоги, повідомлення, —на все це можна послатися в HTML-документі за допомогою дескриптора <LINK>. Щоб було зрозуміло, уявіть собі дескриптор <А> як посилання на HTML-документ, що призначене для читача, а дескриптор <LINK>- як засіб створення документа.

Одним з основних призначень дескриптора <LINK> зв'язати документ з листом стилів:

<LINK REL=stylesheet MEDIA=screen HREF="OurStyle.css">

За допомогою цього рядка документ зв'язується з листом стилів OurStyle.css для відображення на екрані. Детальніше про листи стилів говориться в розділі "Застосування каскадних листів стилів".

Дескриптор <LINK> можна використати і для визначення взаємозв'язку документа з іншим документом. Наприклад, якщо документ є частиною четвертого розділу гіперкниги, то це можна указати таким чином:

<LINK REL=PARENT HREF="Chapter4TOC.html">

Документ Chapter4TOC.html повинен бути змістом, в якому є посилання на поточний документ, а дескриптор <LINK> показує, що це батьківський документ для документа, що розглядається. Потрібно зазначити, що елемент <LINK> нічого не відображає у вікні браузера, він просто є інформаційним інструментом для автора і різних пошукових систем.

Файл Chapter4TOC.html, що використовується в попередньому прикладі, повинен містити наступний рядок:

<LINKREV=ChapterHREF="OurDoc.html">

Параметр REV вказує на взаємозв'язок, зворотний до того, що представляється параметром REL. Він означає, що дана сторінка є батьківською по відношенню до сторінки, яку вказує посилання.

Параметри REL і REV можуть набувати майже будь-якого значення, хоч постійно робляться спроби стандартизувати ці значення, щоб прояснити взаємозв'язок між документами. Нижче наведені декілька значень, що пропонуються для цих параметрів:Значення Вказує

Parent Батьківський документ

Index Зміст

Previous Попередня сторінка

Next Наступна сторінка

Contents Сторінка змісту

Alternate Альтернативна версія

Begin Початкова сторінка

Значення Alternate показує, що документ, на який посилаються, являє собою альтернативну версію даної сторінки. Ця версія може призначатися, наприклад, для друку, а може бути сторінкою іншою мовою. У останньому випадку потрібно додати парметр LANG, в якому вказана мова версії. Наприклад, в наступному рядку вказується альтернативна сторінка французькою мовою:

<LINK REL=alteirnate HREF=FrenchDoc.html LANG=fr TITLE="Paris">

У першому прикладі цього розділу використовувалося значення MEDIA=screen. Воно вказує на те, що листи стилів, з якими встановлюється зв'язок, призначені для відображення на екрані. Для того, щоб визначити версію, призначену для друку, потрібно задати MEDIA=print.

Посилання на інші мережеві ресурси  

 WWW є популярною частиною Internet, але крім неї мережа містить й інші ресурси. Більшість з них існувала задовго до появи Web, тому вони містять багато інформації. Іноді їх аудиторія набагато ширше, ніж у Web. При створенні власної сторінки або сторінки компанії іноді виникає необхідність послатися на ці ресурси.

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

Встановлення посилань на інші мережеві ресурси особливо зацікавить тих, хто вже користувався такими ресурсами. Якщо Gopher-сервер з інформацією, що автоматично оновляється, вже існує, навіщо перебудовувати його під Web? Набагато кращепросто додати на нього посилання. Аналогічно можна додати Telnet-посилання на BBS. Створювати Web-інтерфейс до BBS, використовуючи форми і повторюючи тим самим її функції, немає особливого значення.

Створення посилання на адресу електронної пошти

Електронна пошта є найбільш популярним сервісом, що надається мережею Internet. Багато ресурсів Internet використовують тільки електронну пошту. Причина проста: у кожного користувача Internet є адреса і поштова програма. Більшість сучасних поштових програм пропонують дружній інтерфейс, при цьому не потрібне вивчення складних команд.

Посилання на адресу електронної пошти потрібне, коли автор хотів би отримати відгуки відвідувачів. Якщо автор хоче дізнатися думку про персональну сторінку, продукцію компанії або про що-небудь ще, йому потрібно використати посилання на адресу електронної пошти. Такі посилання також бувають необхідні для повідомлень про неправильні або відсутні посилання. Звичайно Web-майстер встановлює такі посилання на себе. Немає ніяких причин відмовлятися від цього.

Створення посилання на адресу електронної пошти аналогічне створенню посилання на іншу сторінку. Єдина відмінність в елементі прив'язки. Звичайно посилання на сторінку розміщується на деякому тексті. Наприклад:

<A HREF="http://www.mycom.com/myhome.html">Wellcome</A>

Посилання наадресу електронної пошти так само просте. Замість вказівки Web-адреси (http:) воно вказує на електронну адресу mailto:. Замість URL розміщується повна електронна адреса. Попередній приклад буде виглядати таким чином:

HREF="malto:me@myweb.com">Напишіть мені</А>

Створене таким чином посилання виглядає так само, як і всі інші гіпертекстові посилання. Можна поєднувати посилання на різні джерела, і всі вони будуть виглядати однаково. При виборі посилання браузер відкриває користувачеві власний інтерфейс електронної пошти. Хоч інтерфейси різні, але більшість з них автоматично вводить ім'я і адресу користувача і відображає рядок для введення теми повідомлення.

Оскільки посилання на адресу електронної пошти є стандартним URL і її легко реалізувати, у багатьох браузерах для неї є вбудована система підтримки. При натисненні на такому посиланні браузер відкриває поштову програму. Деякі компанії пропонують повний набір Internet-додатків для Web-браузера від програми електронної пошти до програми читання розділів новин. Часто ці програми працюють спільно. У цьому випадку при виборі посилання на адресу електронної пошти такий пакет запускає власну поштову програму.

Створення посилання

на розділи новин Usenet  

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

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

Створити посилання на розділ новин нескладно. Цей вид посилань засновується на загальній моделі гіперпосилань. Як і у випадку з посиланням на адресу електронної пошти, потрібно замінити дві частини елемента прив'язки. Замість http: потрібно поставити news:. І замість URL треба поставити назву розділу новин таким чином:

Для отримання більш докладної інформації зверніться до розділу новин

<А HREF="news:news.newusers.questions">news.newusers.questions</A>

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

Обробка посилання на розділ новин повністю залежить від Web-браузера користувача. Багато які браузери розглядають кожну статтю в, розділі як окреме гіперпосилання. Часто браузер надає дуже обмежені можливості для читання новин. Деякі компанії, наприклад Netscape і Microsoft, пропонують цілий пакет програм, включаючи програму читання новин. У таких випадках запускається ця програма.

 Забезпечення доступу до FTP-серверів  

 Ще однією популярною можливістю є надання доступу до FTP-сервера. File Transfer Protocol (FTP) дозволяє користувачам копіювати на свій комп'ютер файли з інших комп'ютерів (FTP-серверів). За допомогою цього популярного методу компанії та окремі автори умовно-безкоштовних продуктів розповсюджують демонстраційні версії своїх програмних продуктів або виправлення до них.

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

Посилання на FTP-сервери створюються так само, як й інші посилання, і мають такий же вигляд. Замість http: потрібно поставити ftp:, a URL замінити на рядок //Ім'ясерверу_шлях. Ім'я серверу має такий же вигляд, як адресна частина URL. Потрібно прослідити, щоб вказане ім'я сервера відносилося до машини, яка підтримує анонімні FTP-з'єднання. Посилання на FTP-сервери майже завжди підтримуються самими браузерами. Типове посилання на FTP-сервер виглядає так:

FAQ можна знайти <А HREF="ftp://ftp.mysite.com/pub/FAQ">тут</А>

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

З технічної точки зору великої різниці між FTP і Web немає. Тому Web-браузери підтримують ftp-посилання, не маючи потреби при цьому в яких-небудь додаткових програмах. Браузери відображають список файлів в поточному каталозі і зазначають, що з них є каталогом, а що власне файлом. Якщо клацнути на імені каталогу, то браузер покаже список файлів даного каталогу. Якщо клацнути на імені файла, то браузер завантажить файл.

МОЖЛИВІ ПРОБЛЕМИ

Не всім користувачам вдається скористатися моїми FTP-посиланнями. Якщо користувачі повідомляють про неможливість використання ftp-посилань, то потрібно пошукати інші FTP-сервери. Звичайно така проблема виникає, коли FTP-сервер, на який встановлене посилання, дуже завантажений. Треба знайти інші, менш завантажені FTP-сервери з тими ж файлами і встановити посилання на них.

За замовченням при активації ftp-посилання встановлюється анонімне FTP-з'єднання. Це означає, що сервер, до якого користувач намагається отримати доступ, не вимагає імені користувача. Анонімні FTP-сервери посилають і приймають файли всіх, хто зайшов під ім'ям "anonymous". Паролем звичайно служить електронна адреса користувача, але і це часто необов'язково. За допомогою анонімних FTP-серверів компанії, що розповсюджують умовно-безкоштовні програми, розширюють коло своїх клієнтів. Не анонімні FTP-сервери контролюють отримання доступу. Звичайно для отримання доступу на такий сервер користувачеві необхідно мати на ньому вхід. Сторонній людині не можна отримати доступ до неанонімного FTP-серверу. Це використовується в багатьох компаніях, що надають своєму персоналу можливість звертатися до корпоративного FTP-сервера, використовуючи персональні входи.

Зробити з посилання на анонімний FTP-сервер посилання на неанонімний сервер досить просто. Потрібно розмістити перед ім'ям серверу ім'я користувача і Символ @. При цьому більшість Web-браузерів автоматично спробують зайти на сервер, використовуючи вказане ім'я користувача. Потім браузер запитує у користувача пароль для входу на цей сервер

Посилання на Gopher-сервер  

 Gopher-сервери виникли задовго до появи WWW. Спочатку сервер Golden Gopher був розроблений в університеті Міннесота з метою полегшення доступу до інформації. З появою Web Gopher-сервери були частково. витіснені. Найбільша відмінність між Web і Gopher полягає в труднощі створення персонального Gopher-серверу.

Хоч Gopher-сервери тепер не так поширені, вони ще не до кінця здали свої позиції. Звичайно Gopher-сервери збереглися там, де є велика кількість інформації, що автоматично оновляться. Хоч зовсім нескладно перетворити всю інформацію, що зберігається на Gopher-сервері, в HTML, цим просто ніхто не хоче займатися. Це робота для програмістів, причому затрачені зусилля часто не окупляться. Розміщення посилань на Gopher-сервери дозволяє відвідувачам сторінки легко отримувати доступ до величезних інформаційних ресурсів.

Посилання на Gopher-сервер створюється зміною тих же частин елемента прив'язки, що і в попередніх випадках. Потрібно замінити http: на gopher: і URL на рядок //ім'я_серверу. Ім'я серверу повинно бути адресою вузла Internet. Створене посилання виглядає так само, як і всі інші посилання, і в більшість Web-браузерів вбудована підтримка таких посилань. Таке посилання виглядає таким чином:

Для отримання більш докладної інформації зверніться

<AHREP="gopher://gopher.mysite.com">сюди</A>

Як і FTP-сервер, Gopher-сервер є мереженим ресурсом, підтримка якого вбудована в HTML. Отже, більшість Web-браузерів підтримують посилання на Gopher-сервери, не потребуючи спеціальних додатків.

Доступ до баз даних за допомогою посилань на WAIS  

 Інформаційна система Wide Area Information System (WAIS) являє собою "безліч величезних баз даних, в яких можна здійснити пошук". Система WAIS була створена корпорацією WAIS спеціально для забезпечення доступу до великих обсягів інформації, що значно перевищують кількість інформації, яка доступна на Web-серверах або Gopher-серверах. Щоб база даних підходила для WAIS, в ній повинно міститися декілька мільйонів записів.

Оскільки користувачам не хочеться продиратися через таку кількість інформації, доступ до WAIS здійснюється за допомогою пошукових систем. Коли система WAIS тільки з'явилася, існували спеціальні програми, за допомогою яких можна було звертатися до WAIS-серверів. З виникненням Web більшість баз даних WAIS отримали HTML-інтерфейс. Тепер для здійснення пошуку в базі даних WAIS досить заповнити HTML-форму і клацнути на кнопці.

Посилання на WAIS створити так же просто, як і всі інші посилання. Потрібно замінити http: на wais: і URL на адресу бази даних WAIS:

Для отримання більш докладної інформації клацніть

<AHREF="wais://wais.mysite.com>тут</A>

У більшості браузерів немає вбудованої підтримки пошуку в системі WAIS. При розміщенні посилання на одну з таких баз даних потрібно указати, де користувач може знайти програму-клієнта WAIS. Звичайно, якщо вказана база даних розуміє запити через HTML-форми, то програми-клієнти непотрібні.

Доступ до віддалених комп'ютерів з допомогою Теlnet

Можливість доступу до віддалених комп'ютерів виникла набагато раніше за Web. Цей доступ здійснювався за допомогою програми UNIX, що називається Telnet, яка не призначена для виконання якоїсь конкретної дії. Telnet надає можливість з'єднатися з віддаленою машиною способом, дуже схожим на той, за допомогою якого багато користувачів отримують доступ до свого Internet-провайдера. Web здійснює підтримку доступу до віддаленої машини за допомогою Telnet-посилань на віддалені комп'ютери.

Звичайно Telnet-посилання необхідні тим, кому надається персональний доступ до будь-якого комп'ютера.

Як неважко здогадатися, для створення Telnet-посилань потрібно змінити ті ж частини елемента прив'язки: http: на telnet: і URL нa ім'я вузла. Створене посилання виглядає так само, як і всі інші посилання.

Типове Telnet-посилання має такий вигляд:

Клацніть <А HREF="telnet://telnet.mysite.com">тут для доступу до нашої ВВS<:/А>

Самі Web-браузери не підтримують Telnet-сесії. Для цього потрібно користуватися зовнішніми додатками. При розміщенні Telnet-посилання потрібно указати, де можна знайти програму-клієнт.

У таких операційних системах, як Windows 9x, Windows NT і UNIX, є вбудовані програми доступу по протоколу Telnet.

Хоч Telnet відноситься до простих мережевих ресурсів, проблеми можуть виникнути і тут. Такими проблемами можуть стати відображення сесії зв'язку з віддаленою машиною та інтерпретація команд, що поступають з клавіатури. Реалізувати це в браузері досить важко. Тому більшість Web-браузерів не підтримують Telnet, надаючи користувачеві можливість самому встановлювати програму Telnet.

Мал.17. Більшість Web-браузеррв не підтримують Telnet-посилання. Для цього користувачеві потрібна інша програма.

У деяких браузерах передбачені додаткові функції обробки елементів прив'язки. Можна просто додати перед ім'ям серверу ім'я користувача, з яким повинно здійснюватися з'єднання, і знак @. Замість рядка

Ви можете отримати доступ <А HREF="telnet://mysite.com/">в мою систему !</А>

вийде рядок

Ви можете отримати доступ<АHREF="telnet://john@mysite.com/">в мою систему !</А>

Web-браузери, які підтримують цю функцію, відображають невелику підказку з ім'ям користувача, яке потрібно набрати для доступу в систему.

 Набори гіперпосилань  

 Як гіперпосилання співіснують на одній сторінці? Дуже добре. Навіть не дивлячись на те, що посилання різні, їх вигляд і функціонування однакові. Це зумовлено використанням елементів прив'язки, загальних для всіх посилань. Хоч для деяких посилань потрібні окремі додатки, це не має великого значення. Така схожість різних гіпертекстових посилань створює відчуття цілісності сторінки. Ця цілісність дуже важлива, оскільки дозволяє відвідувачам інтуїтивно відчувати, що вони знаходяться на тій же сторінці, не звіряючись з її URL.

Найкраще створювати всі гіперпосилання однаковим чином,  змінюючи їх формати. Потрібно взяти одній ті ж елементи прив'язки, додати посилання і розмістити відповідний покажчик на це посилання, як показано в таблиці. Автор Web-сторінки повинен завжди пам'ятати, що відвідувачі сторінки користуються різними браузерами. Відносно того, які ресурси повинні відображати браузери, немає ніяких правил. На які б ресурси не давалося посилання, автору завжди потрібно вказувати посилання на джерело, де користувач може отримати програму-клієнт.Посилання на Що використати Зразок посилання

Web-сторінка http://sitename/ http://www.mysite.com/

Електронна пошта mailto:address mailto:me@mysite.com

Розділ новин news:newsgroupname news:news.newusers.questions

FTP ftp://sitename ftp://ftp.mysite.com/

Gopher gopher://sitename gopher://gopher.mysite.com/

WAIS wais://sitename wais://wais.mysite.com/

Telnet telnet://sitename telnet://bbs.mysite.com/

 К А Р Т И   П О С И Л А Н Ь  

  

Знайомство з картами посилань

Коли використовуються карти посилань

Коли не треба використовувати карти посилань

Використання карт посилань, що обробляються сервером

Створення зображення

Поняття про файл визначення карти посилань

Формат CERN

Формат NCSA

Типи областей карт посилань

Прямокутна область

Багатокутна область

Кругла область

Точка

Область за замовчанням

Створення файлів визначення карт посилань

Використання CGI-програми для обробки натиснень миші

Виклик CGI-програми

Робота з провайдером

Розміщення карти посилань на Web-сторінці

Перевірка функціонування карти посилань

Створення карт посилань, що обробляються клієнтом

Визначення карт посилань, що обробляються клієнтом

Використання визначення карти посилань

Комбінування карт посилань, що обробляються клієнтом і сервером

Програми для створення карт посилань

Програма Mapedit

Альтернативи картам посилань

Мозаїка з елементів зображення

Сценарії

Альтернативний текст

Створення карти посилань

Знайомство з картами посилань

Карти посилань (image/maps) засновані на застосуванні зображень, тому з їх допомогою користувачеві дуже зручно пересуватися по посиланнях. Web використовує перший стандарт Internet (HTML), що дозволяє легко відображати графіку. Він істотно відрізняється від стандартів таких ресурсів, як Gopher, WAIS і FTP, заснованих на текстовому представленні інформації. Хоч в цих, більш ранніх стандартах передбачалася можливість передавати зображення, вона так і не була реалізована.

У HTML замість терміну imagemap використовують іноді терміни area map і ctickable map.

Різні частини зображення, що являє собою карту посилань, вказують на різні URL. Щоб користувач міг розрізнювати окремі зони на карті посилань, їх звичайно вміщують в рамки. Слідує зазначити, що ці рамки є частиною самого зображення, а не створюються Web-сервером.

Карти посилань бувають двох типів: 1) що обробляються сервером (server-side) і 2) що обробляються клієнтом (client-side).

Що обробляються сервером. Коли користувач клацає на якій - небудь частині карти посилань, браузер пересилає координати покажчика миші Web-серверу. Потім Web-сервер визначає по цих координатах область, на якій зроблене натиснення, шукає відповідний URL, і повертає його браузеру. Після цього браузер відкриває URL.

Що обробляються клієнтом. Область карти посилань визначається в самій Web-сторінці. При натисненні на карті посилань браузер сам шукає область в HTML-файлі, визначає відповідний URL і відкриває потрібний документ. При цьому браузер взагалі не звертається до Web-сервера.

Коли використовуються карти посилань  

 

У багатьох випадках карти посилань використовуються замість гіпертекстових. Ось декілька прикладів використання карт посилань.

Представлення посилань, фізично пов'язаних один з одним. Натиснення, наприклад, на карті світу зробити легше, ніж вибрати назву країни з списку.

Забезпечення можливості переходу до найважливіших частин сторінки в будь-який час. Можна навіть зробити карту посилань постійною частиною всіх сторінок Web-сервера, на зразок панелі інструментів.

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

Коли не треба використовувати карти посилань

Хоч карти посилань можуть бути використані в більшості випадків, іноді цього робити не треба. Нижче приведені приклади, коли краще не використовувати карти посилань.

Робота з картами посилань, що обробляються сервером, вимагає відповідного програмного забезпечення. Безкоштовну копію сервера Personal Web Server можна знайти на Web-сервері фірми Microsoft за адресою: http://www.microsoft.com.

Карти посилань, що обробляються сервером не можна перевірити без допомоги Web-сервера. Це означає, що при створенні таких карт посилань їх буде складно перевірити. Для цього треба або розмістити файли на сервері, або встановити на своєму комп'ютері програмне забезпечення сервера.

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

Потрібно уникати використання карт посилань (або забезпечувати для них альтернативний текст) в тих випадках, коли потрібно підвищення продуктивності Web-сервера. Оскільки карти посилань бувають досить великими, завантажуються вони дуже повільно. До того ж переобтяжені канали зв'язку ще більше збільшують час завантаження великих зображень.

Як це виходить з назв, різниця між картами посилань, що обробляються клієнтом або сервером, полягає в тому, хто саме управляє ними Web-сервер або браузер.

Використання карт посилань, що обробляються сервером  

 

Для того щоб розмістити на Web-сторінці карту посилань, що обробляється сервером, необхідно наступне:

графічне зображення карти посилань;

файл визначення карти посилань;

програма або сценарій обробки карти посилань;

HTML - дескриптори.

Створення зображення

Перше, на що треба звернути увагу при створенні карти посилань, це зображення. Наприклад, при створенні Web-сервера компанії можна вибрати її логотип.

При створенні зображення треба враховувати наступне.

Файл зображення повинен мати формат GIF або JPG. Оскільки зображення повинне бути доступне як можна більшій кількості відвідувачів, старайтеся використати поширені формати. Всі Web-браузери підтримують формат GIF, і більшість браузерів формат JPEG. Якщо карта посилань проста, то краще використати формат GIF. Якщо в карті посилань багато кольорів і дрібних деталей або це фотографія, то потрібно використати формат JPG.

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

Слідує по можливості зменшувати розподільну здатність зображення. Треба прагнути до того, щоб розміри зображення не перевищували 600х400 пікселів. На сторінку заходять користувачі з різних комп'ютерів; у більшості сучасних комп'ютерів самою низькою розподільною здатністю  є  640х480 пікселів. Якщо встановити здатність зображення 600х400, то переважна більшість відвідувачів зможе побачити його(малюнок) без застосування скролінгу (прокручення).

Потрібно зменшувати кількість кольорів, що використовуються в зображенні. При зменшенні кількості кольорів зменшується і розмір файлу з зображенням. Файл меншого розміру буде швидше завантажуватися браузером користувача.

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

Поняття про файл визначення карти посилань

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

Існують два формати файлу визначення: CERN і NSCA. У обох випадках в ньому зберігається інформація про області карти посилань і використовуються одні і ті ж типи областей, а також координати областей. Відмінність між ними полягає в представленні інформації. Оскільки ці формати несумісні, потрібно з'ясувати у адміністратора сервера, який з форматів підтримується його сервером.

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

Приклад файлу визначення карти посилань

#

# Приклад файлу визначення карти посилань

# Формат файлу: NCSA

#

# Визначити область за умовчанням

default http://www-myserver.com/mypage/index.htm

# Визначити прямокутну область

rect http://www. rpybervel.con/mypage/iectangle.htm 50,40 100,120

# Визначити круглу область circle http://www.myserver.com/mypage/rectangle.htm 50,40 100,60

# Визначити многокутну область

poly http://www.myserver.com/mypage/rectangle.htm 10,20 24,70 84,45 07, 11 10,20

Формат CERN

Спочатку об'єднання CERN являло собою дослідницьку групу європейських фізиків. Потім дослідження цієї групи стали торкатися комп'ютерної області. Ця група цілком заслужено претендує на звання "батьків Web", оскільки ідея належить саме їй. При появі карт посилань цією групою був розроблений формат файлів визначення на Web-серверах, підтримуючих даний формат, можна знайти файли наступного вигляду

тип області (х1, у1) (х2, у2). .. URL

Координати по горизонталі (х1 і х2) і по вертикалі (у1 і у2) повинні бути взяті в круглі дужки і розділені комами. Для різних типів областей пари координат мають різне значення. Замість крапок можуть знаходитися додаткові координати, наприклад для багатокутної області (про це буде розказано в розділі "Типи областей карт посилань"). Нижче наведено приклад визначення карти посилань в форматі CERN.

rect (60, 40) (340, 280) http://www.rectangle.com 

Формат NCSA

Самий перший популярний браузер Mosaic було створено в університеті Національного центра додатків для суперкомп'ютерів (National Center for Supercomputing Applications, NCSA). Ця ж група розробила власний формат файлів визначення карт посилань. Типовий рядок такого файлу має наступний вигляд

тип_області URL х1, у1 х2, у2

Невелика (але важлива) відмінність між цими двома форматами полягає в тому, що для формату NCSA URL розмішається перед введенням координат, а для формату CERN після. В форматі NCSA координати розділяються комами, але не беруться в дужки. Ось приклад визначення карти посилань в форматі NCSA

rect http://www.rectangle com 60,40 340,280

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

Знак #, поставлений на початку рядка, і в середині URL, має різне значення. В останньому випадку він вказує на позицію прив'язки посилання всередині URL

 Типи областей карт посилань  

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

Карта посилань задається файлом визначення, що містить інформацію про області посилань. Це означає, що для кожної карти посилань Web-сервера повинен бути власний файл визначення.

Прямокутна область

Для розміщення в карті прямокутної області посилання потрібно використати запис типу RECT. Для визначення прямокутника потрібні координати його лівого верхньою і правого нижнього кутів. При натисканні лівої кнопки миші в будь-якому місці всередині прямокутника область активізується. Нижче наведено приклад прямокутної області в форматі NCSA.

RECT http://www.rectangle.com/ 100,100 120,120

Для формату CERN приклад буде виглядати таким чином

RECT (100,100) (120,120) http://www.rectangle.com/

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

Багатокутна область

Для визначення геометричної фігури з довільним числом сторін використовується тип POLY. В цьому елементі може бути вказано до 100 координат, які вказують вершини багатокутника. Активною областю вважається область всередині багатокутника. Необхідно зазначити, що багатокутник повинен бути замкненим, тобто перші і останні координати повинні співпадати. Нижче приведений приклад багатокутника, заданого в форматі NCSA:

POLY http://www.polygon.com/ 0,0 100,100 120,120 80,60 40,50 10,10 0,0

А ось як виглядає елемент в форматі CERN:

POLY (0,0) (100,100) (120,120) (80,60) (40,50) (10,10) (0,0) http://www.polygon.com/

Кругла область

Для того щоб створити активну область у вигляді кола, потрібно використати тип CIRCLE. Цей елемент визначається двома парами координат, але вони різні для різних Web-серверів. Для NCSA-сервера це координати центра кола і точки, розташованої на його колі:

CIRCLE http://www.circle.com/ 100,100 150,150

Для CERN-сервера потрібна одна пара координат і одне значення. Координати вказують центр кола, а значення визначає його радіус. Областю посилання є внутрішня частина кола. Приклад круглої області:

CIRCLE (100,100) 50 http://www.circle.com/

Точка

Створити невеликі активні області у вигляді кругів можна за допомогою типу POINT. Для розміщення цього елемента потрібна тільки одна пара координат, що визначають його центр. Активної вважається область, розташована всередині невеликого кола. Наприклад

POINT http://www.point.com/ 88,65

Область за замовчанням

Якщо користувач клацає на карті посилань, але не попадає ні в яку область, то використовується тип області DEFAULT. Для цього елемента координати не потрібні. Нехай, наприклад, в файлі визначення є такі рядки.

RECT http://www.rectangle.com/ 0,0 100,100

DEFAULT http://www.default.com/helpme

Якщо користувач клацне на першому прямокутнику, то браузер відкриє http://www.rectangle.com. Якщо користувач клацне за межами цього прямокутника, то браузер відкриє http://www.default.com/helpme, оскільки саме цей URL пов'язаний з областю за замовчанням.

Потрібно уникати використання карти посилань з елементом типу POINT і областю за замовчанням. Цей елемент настільки малий, що користувачі звичайно хиблять при натисненні на ньому, внаслідок чого браузер завантажує URL вказаний за умовчанням. Щоб не створювати користувачеві незручностей, краще використати невеликі кола.

По можливості потрібно конфігурувати файли визначення карт посилань з вказівкою областей за умовчанням. При натисненні користувача поза іншими областями область за умовчанням відкриє вказаний URL, щоб надати користувачеві допомогу або можливість зворотного зв'язку.

 Створення файлів визначення карт посилань  

 Створення файлу визначення може виявитися самою втомливою частиною роботи з картами посилань. Цей файл можна створювати двома особами: простим і складним. Простий спосіб використання програми створення карти посилань. Така програма дозволяє малювати області посилань над зображення і вказувати відповідні їм URL.

Важкий спосіб створення такого файлу вручну. Створювати файл не стільки складно, скільки скучно і стомливо. Для цього потрібно дві програми: додаток для роботи з графікою і текстовий редактор. Ось що необхідно зробити.

Створити зображення, що використовується у вигляді карти посилань, і відмітити на ньому активні області.

Завантажити зображення в графічну програму. Програма повинна відображати координати покажчика миші.

Відкрити новий текстовий файл в будь-якому текстовому редакторі (наприклад, в редакторі Notepad). Краще використати для збереження (файла) стандартне для Internet розширення файлу map.

Для кожної області створити елемент в файлі визначення. Для визначення координат області використовується графічна програма. Наприклад, для визначення координат прямокутника, потрібно розмістити покажчик миші в його лівому верхньому кутку і визначити його координати. Потім визначити координати правого нижнього кута і внести ці дані в файл визначення:

RECT http://www.myserver.com/mypage/rectangle.htm 30,20 130,80

Зберегти створений файл визначення карти посилань.

 

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

При створенні декількох карт посилань з використанням різних зображень потрібно створювати окремий каталог для кожної групи файлів, що відноситься до одного зображення. Інший спосіб збереження декількох файлів карт посилань полягає в тому, що всі файли, що відносяться до однієї карти, мають однакові імена, але різні розширення.

Використання CGI-програми для обробки натиснень миші

Як вже розповідалося раніше, для перетворення натиснення миші в URL треба використати CGI-програму. Браузер користувача викликає цю програму, передаючи їй координати точки, на якій було зроблене натиснення. Потім програма шукає в файлі визначення карти посилань область, до якої відноситься ця точка. Якщо відповідна область знайдена, програма повертає URL. У іншому випадку програма видає повідомлення про помилку.

Виклик CGI-програми

До цього моменту Ви вже повинні задати собі питання: як викликати CGI-програму з Web-сторінки. Про HTML-коди карт посилань буде розказано далі, а зараз вам пропонується такий приклад:

HREF="http://www.myserver.com/cgi-bin/mapfile.map">

<IMG SRC=imagemap.gif ISMAP></А>

У цьому прикладі параметр HREF елемента прив'язки означає не посилання на іншу Web-сторінку або ресурс Internet, а вказує на карту посилань. У залежності від способу створення карти посилань і від того, як Internet-провайдер працює з посиланнями, може зажадатися також указати обробляючу CGI-програму. Коли користувач клацає на карті посилань, браузер намагається відкрити вказаний URL, передаючи йому як параметр координати покажчика миші. Після цього сервер повертає URL, пов'язаний з цими координатами, який визначила CGI-програма.

Робота з провайдером

Більшість провайдерів, іменуючи каталог, в якому розташовується початкова сторінка користувача, перед ім'ям користувача розташовують тильду (~). Таким чином, при розміщенні на Web-сервері провайдера сторінки, що містить карту посилань, треба використати приблизно такий формат:

<А HREF="/cgi-bin/imagemap/~username/image.map">

<IMG SRC="myimage.gif"></А>

Параметр HREF вказує на /cgi-bin/imagemap/~username/image.map. Замість username потрібно підставити своє ім'я, а замість image.map - ім'я. Потрібно зазначити, що більшість провайдерів висувають вимоги до способу зберігання МАР-файлів.

Розміщення карти посилань на Web-сторінці

Тепер, коли всі елементи карти посилань готові, можна розміщувати її на Web-сторінці. Потрібно вмістити дескриптор <IMG> в елемент прив'язки і направити його посилання на відповідну Web-сторінку.

Щоб перетворити зображення-посилання в карту посилань, спочатку треба так змінити посилання елемента прив'язки, щоб вона вказувала на файл визначення карти посилань. Потім необхідно в дескриптор <IMG> додати параметр ISMAP. Наприклад, якщо ім'я файлу визначення  є mapfile.map, а файл із зображенням називається imagemap.gif, то для розміщення карти посилань в HTML-документі потрібно використати наступний код:

HREF="http://www.myserver.com/cgi-bin/mapfile.map">

<IMG SRC=imagemap.gif ISMAP></А>

При натисненні на карті посилань Web-сервер запускає CGI-програму карти посилань. Програма приймає координати натиснення миші і перетворює їх у відповідний URL.

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

Параметр ISMAP можна використати разом з іншими атрибутами зображення. Те, що дане зображення є картою посилань, ніяк не обмежує його можливості. Можна використати будь-які атрибути зображень

Перевірка функціонування карти посилань

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

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

У процесі тестування не закривайте FTP-з'єднання з сервером, за допомогою якого відбувається оновлення сервера, що міститься. Завдяки цьому можна оперативно змінювати карту посилань і відразу ж тестувати отриманий результат, перемикаючись між текстовим редактором, FTP-клієнтом і Web-браузером. При зміні графічного зображення карти посилань потрібно повторно завантажити її в браузер.

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

Створення карт посилань, що обробляються клієнтом  

 Аж до появи HTML 3.2 карти посилань, що обробляються клієнтом, були розширенням Netscape Navigator і Internet Explorer. Тепер цей тип карт посилань є частиною стандарту HTML.

Карти посилань, що обробляються клієнтом, аналогічні картам посилань, що обробляються сервером. Єдина відмінність між ними полягає в тому, що замість використання файла карти посилань і CGI-сценарію на сервері, карта посилань зберігається в HTML-файлі. Завдяки цьому помітно знижується навантаження на мережу, оскільки Web-браузер обробляє карти посилань самостійно, не звертаючись до сервера.

Визначення карт посилань, що обробляються клієнтом

HTML-формат визначення карт посилань містить ту ж інформацію, тільки використовує HTML-дескриптори. Ось як виглядає синтаксис визначення карти посилань в HTML:

<МАР NAME="mapname">

<AREA [SHAPE="shape"] COORDS="х, у,..." [HREF="URL" | NOHREF]>

</MAP>

Визначення карти посилань починається з дескриптора <МАР> і закінчується дескриптором </МАР>. Це контейнер. Для того щоб мати можливість посилатися на визначення карти посилань, за допомогою параметра NAME їй привласнюється ім'я.

Всі активні області визначаються в дескрипторах AREA. Початок системи координат розташовується в лівому верхньому кутку карти посилань. У таблиці приведені параметри дескриптора AREA.

Таблиця 1 Атрибути дескриптора <AREA>Атрибут Опис

SHAPE Визначає форму області. Як і у разі карт посилань, що обробляються сервером, можна використати значення RECT, POLY, CIRCLE або DEFAULT. У відсутність цього атрибута браузер вибирає значення RECT. Якщо області перекриваються, то браузер використовує першу з списку.

COORDS Визначає список координат, розділених комою. Потрібно зазначити, що між парами координат також потрібна кома.

HREF Вказує URL ресурсу Internet, на який посилається область. Всі відносні посилання визначаються відносно документа, що містить дескриптор <МАР>, а не дескриптор <USEMAP>. При наявності дескриптора <BASE> використовується він.

NOHREF Повідомляє, що область є мертвою зоною, тобто не пов'язана ні з яким ресурсом Internet. Атрибути HREF і NOHREF є взаємовиключаючими.

Наведемо приклад визначення карти посилань в HTML. На мал.2 приведена Web-сторінка, відповідна даному коду.

<МАР NAME=mymap>

<AREA SHAPE-RECT COORDS="0,0,100,100" HREF=iteml.html>

<AREA SHAPE=RECT COORDS="101,0,200,100" HREF=item2.html>

<AREA SHAPE=RECT COORDS="201,0,300,100" HREF=item3.html>

</MAP>

<IMG SRC=mymap.gif USEMAP =#mymap>

Мал.2 Карта посилань, що обробляється клієнтом, відповідна наведеному в коду.

Подивитися роботу прикладу

Використання визначення карти посилань  

 

В останньому рядку попереднього прикладу показано, як треба посилатися на карту посилань.

<IMG SRC=mymap.gif USEMAP=#mymap>

 

Дескриптор <IMG> завантажує зображення mymap.gif. параметр USEMAP вказує ім'я карти посилань, яка була визначена в HTML-файлі за допомогою дескриптора <МАР>.

Комбінування карт посилань, що обробляються клієнтом і сервером

Якщо автор Web-сторінки хоче потурбуватися про тих користувачів, які працюють з браузерами, що не підтримують карти посилань, які обробляються клієнтом, але при цьому зменшити мережеве навантаження для користувачів з браузерами, що підтримують такі карти посилань, він може комбінувати обидва типи карт посилань. Можна визначити карту посилань, що обробляється як сервером, так і клієнтом. Об'єднання, таким чином, відбувається в дескрипторі <IMG> .

HREF=http://www.myserver.com/cgi-bin/mymap.map">

<IMG SRC=mymap.gif USEMAP=#mymap ISMAP> </А>

Браузер, що підтримує карти посилань, які обробляються клієнтом, буде використовувати карту посилань, на яку вказує параметр USEMAP. Інші браузери будуть використовувати карту посилань на сервері.

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

HREF=textmenu.html><IMG SRC=mymap.gif USEMAP></А>

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

рограми для створення карт посилань  

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

Такі програми існують як для Windows, так і для Macintosh. Усі ці програми мають однакові можливості. Вони підтримують три основних типи активних областей: RECT, POLY і CIRCLE. Деякі програми підтримують ще і типи POINT і DEFAULT. Головним критерієм вибору такої програми є зручний інтерфейс. Оскільки таких програм багато, немає значення яку програму вибирати.

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

Програма Mapedit

Програма Mapedit являє собою умовно-безкоштовну програму для створення карт посилань, написану без надмірностей і що працює як під Windows, так і під UNIX. Її можна знайти за адресою: http://www.boutell.com/mapedit. Вона створена Томасом Боутеллом (Thomas Boutell), ведучим FAQ по WWW. За допомогою цієї програми можна створювати файли визначення карт посилань як в форматі CERN, так і в форматі NCSA. Програма Mapedit підтримує всі основні геометричні форми активних областей, за винятком POINT.

Існують й інші популярні редактори, наприклад: CrossEye 1.0 (http://www. sausage.com), Livelmage l.0 (http://www.mediatec.com), Map This 1.31 (http://www.ecaetc.ohio-state.edu/tc/mt), Web HotSpots 2.01 (http://www.concentric.net/~automata/hotspots.shtml). Редактори карт посилань включені у багато програм створення Web-сторінок, таких як Frontpage, Pagemill і Backstage.

Використати програму Mapedit зовсім нескладно. Для створення нового файла визначення карти посилань треба в меню File вибрати команду Open або Create. При цьому з'являється діалогове вікно Open. Зображення, що є для карти посилань, можна знайти за допомогою кнопки Browse, що  розташована під заголовком Image Filename. Програма Mapedit підтримує формати GIF, JPEG і PNG (Portable Network Graphics).

Новий формат PNG аналогічний формату GIF. Стиснення зображення в ньому відбувається без втрат, на відміну від формату JPEG. Основна перевага формату PNG перед GIF-форматом полягає в тому, що його використання не обмежене ніякими патентами. Крім цього PNG містить безліч технологічних переваг. Так, наприклад, через рядкове зображення в форматі PNG з'являється на екрані швидше, ніж через рядкове GIF-зображення.

Для того, щоб редагувати вже існуючий файл визначення карт посилань, можна використати кнопку Browse, розташовану праворуч від напису Map or HTML File. Для створення нового файла треба ввести в полe ім'я файла. Потрібно ще за допомогою відповідних кнопок-перемикачів вибрати потрібний формат CERN або NCSA. Після цього програма Mapedit зажадає підтвердження в необхідності створенні нового файла.

 

Мал.3 Програма Mapedit

Після клацання по кнопці ОК з'явиться нагадування про оплату. Після завантаження це діалогове вікно зникає, а в Mapedit завантажується зображення. Якщо зображення не вміщується на екран цілком, то для перегляду його по частинах можна використати зони прокрутки.

Не треба турбуватися, якщо кольори зображення виглядають незвичайно. Ця програма не призначена для роботи з кольором, вона займається тільки активними областями карт посилань.

Вибираючи опції меню Tools, можна створювати будь-яку кількість типів активних областей. Можна створювати кола, прямокутники, багатокутники. Для тих, хто звик до програм малювання або до інших програм створення карт посилань, інтерфейс створення активних зон може здатися незвичним (його опис наведений в таблиці). У багатьох програмах можна малювати фігури, переміщуючи покажчик при натиснутій кнопці миші. У програмі Mapedit треба клацнути кнопкою, намалювати фігуру, а потім повторно клацнути кнопкою миші. Після створення активної області на зображенні карти посилань видалити її засобами програми Mapedit неможливо.

УВАГА!

У програми Mapedit є поняття режиму. Активна завжди та опція меню Tools, яку вибрали останньою. Якщо користувач вказує URL для прямокутної області, то наступною областю, яку він буде створювати, виявиться прямокутник. Якщо вибраний пункт меню Test+Edit, то програма буде залишатися в цьому режимі, поки не буде вказаний тип області.Тип області Процес створення

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

Прямокутник Для вказівки вершини прямокутника клацнути лівою кнопкою миші. Клацнути правою кнопкою для вказівки вершини, що протилежна першій.

Багатокутник Для визначення вершини багатокутника клацнути лівою кнопкою миші. Перемістити покажчик в точку розташування наступної вершини. Повторити ці дії для всіх вершин. При поверненні до першої вершини клацнути правою кнопкою.

Після створення області відкривається вікно Object URL. У нього треба ввести URL, що відноситься до нової області. За допомогою команд File Edit Default URL можна визначити URL за умовчанням для всього зображення

При створенні області може виявитися, що її контур не видно, оскільки програма не піклується про зовнішній вигляд зображення, що знаходиться в її вікні. Кольори контурів областей можна змінити за допомогою команди File Edit Hotspot Color.

Якщо при розміщенні області була допущена помилка, виправити її можна двома способами. Якщо процес вказівки розміру області ще не завершений, можна натиснути клавішу <Esc>. По закінченні розміщення контуру можна відмовитися від його розміщення, клацнувши на кнопці Cancel в діалоговому вікні Object URL.

За допомогою Mapedit можна перевіряти створені області. Для цього треба вибрати команду Tools Test+Edit. Якщо тепер натиснути ліву кнопку миші, підводячи покажчик до карти посилань, то відобразиться URL відповідної області. Можливість такої перевірки вбудована в Mapedit і для її виконання не потрібне використання браузера або сервера.

Файл визначення карти посилань можна зберегти, вибравши команду File Save або File Save As.

Програма Mapedit не проставляє розширення файла, тому кожен раз при створенні нового файла треба вказувати його розширення. Більшість серверів вимагають розширення MAP.

Програма Mapedit дозволяє редагувати контури активних областей. Для того, щоб пересунути область, треба вибрати команди Tools Move, а потім клацнути на потрібній області. При цьому з'являться контрольні точки області (control points). Клацнувши на будь-якій з цих точок і перетягши її, можна змінити форму або розмір області. Якщо проробити це з точкою, розташованою в середині області, можна пересунути всю область. Програма при цьому залишається в режимі Move, що дає можливість продовжити редагування активної області.

Форму багатокутника можна змінити, додавши або прибравши точки за допомогою команд Tools Add Points або Tools Remove Points. Ці команди виконуються тільки при роботі з багатокутниками. Вибравши опцію Add Points, потрібно клацнути на багатокутнику і розмістити покажчик приблизно в тому місці, куди треба додати нову вершину. Аналогічно, вибравши опцію Remove Points, треба клацнути на багатокутнику і виділити потрібну вершину.

Можна використати Mapedit і для створення карт посилань, що обробляються клієнтом. Для цього при запиті імені файла, що завантажується замість МАР-файла, слід вказати ім'я HTML-файл. Програма знайде HTML-файли, що містять графіку, і представить список всіх знайдених зображень в діалоговому вікні. Вибравши зображення, призначене для створення карти посилань, треба клацнути на кнопці ОК. Ім'я файла зображення буде автоматично підставлено в діалогове вікно Select Inline Image. Далі програма працює як завжди. Після створення всіх областей треба зберегти зроблені зміни в HTML-файлі.

Альтернативи картам посилань  

 Бувають ситуації, коли розміщення карт посилань на Web-сторінці небажане. Можливо, аудиторія цієї сторінки користується текстовими браузерами, або у провайдера відсутня підтримка CGI-сценаріїв, і карти посилань, що обробляються сервером, не будуть працювати, а передбачувана аудиторія користується старими браузерами. У цьому розділі представлені три варіанти заміни карт посилань:

створення мозаїки з елементів зображення;

використання сценаріїв;

створення альтернативного тексту.

Мозаїка з елементів зображення

Замість визначення прямокутних областей всередині великого зображення можна за допомогою будь-якої програми малювання розділити зображення на менші частини. Потім розмістити окремі зображення на Web-сторінці, забезпечивши їх посиланнями на різні URL.

Наприклад, якщо розділити зображення розміром 100х100 на чотири квадратних елементи з розмірами 50х50, то можна розмістити їх на Web-сторінці, як наведено в прикладі:

<А HREF=iteml.html><IMG SRC=iteml.gif WIDTH=50 HEIGHT=50 BORDER=0>

</А>

<А HREF=item2. html><IMG SRC=item2.gif WIDTH=50 HEIGHT=50 BORDER=0>

</А>

<BR>

<А HREF=item3.html><IMG SRC=item3.gif WIDTH=50 HEIGHT=50 BORDER=0>

</А>

<А HREF=item4. html><IMG SRC=item4.gif WIDTH=50 HEIGHT=50 BORDER=0>

</А>

Користувачеві ці чотири елементи здаються єдиним зображенням, однак кожнен модуль є посиланням на окремий URL. Потрібно обов'язково указати точні розміри зображень і вимкнути відображення рамок навколо них.

Для монтування частин карти посилань можна використати таблиці.

Сценарії

Для створення карт посилань, що обробляються клієнтом, можна використати VBScript або JavaScript. Таким чином можна зв'язати сценарій з подією натиснення миші на зображенні. Внаслідок натиснення на зображенні в залежності від області будуть відкриватися різні URL.

Альтернативний текст

Карти посилань і графіку взагалі не можна перевести в текст. З цієї причини доводиться вигадувати їм заміну, щоб користувачі текстових браузерів не втрачали інформацію. Крім таких відвідувачів є ще і користувачі, які сконфігурували свої браузери на відмову від автоматичного завантаження зображень. Також користувачі з повільними модемами, одержують доступ до Web з командного рядка UNIX. Оскільки їх досить багато, автор Web-сторінки повинен надати їм якусь заміну карт посилань.

Таким користувачам доступ до різних точок карти посилань можна надати декількома способами. Можна створити для них окрему сторінку і повідомити про це на сторінці з графікою. Можна розмістити у верхніх або нижніх частинах сторінок гіпертекстове посилання на ті ж URL, які задіяні в картах посилань. Автору Web-сервера доведеться вибрати один із способів, інакше він ризикує втратити досить велику кількість відвідувачів.

 Створення карти посилань  

 У цьому розділі наведений приклад створення простої карти посилань, яку можна використати як панель інструментів. Для неї використовується досить просте зображення. При створенні карти посилань читач може використати як зображення з бібліотеки, так і створені самостійно. Нижче наведені етапи створення карти посилань.

Вирішити, які потрібні посилання і як передати їх користувачеві. Потім накидати план карти посилань. У даному прикладі створюються області для наступних посилань: http://rampages.onramp.net/~jerry, http://www.microsoft.com, http://www.netscape.com і http://www.quecorp.corn.

Відрити графічну програму (наприклад, Paint) і створити нове зображення (в даному прикладі це зображення розміром 320х80 пікселів).

Додати в зображення графічні елементи, що представляють кожне з посилань. Рівномірно розмістити їх в карті посилань, як показано на мал.4

Мал. 4. Замість створення прозорого GIF-зображення можна залити фон тим же кольором, який використовується, як фон Web-сторінки, в цьому випадку це білий колір.

Розмістити під кожним елементом текст як це зроблено на мал. 5.

Текст пояснює користувачеві, для чого призначене дане зображення.

Зберегти зображення в GIF-файлі з ім'ям imagemap.gif.

Відкрити файл imagemap.gif в програмі Mapedit або в будь-якій іншій програмі створення карт посилань.

Мал. 5. В карті посилань, що використовується як панель інструментів, текстові підписи допомагають користувачеві розібратися в тому, що представляє кожна піктограма.

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

Використовуючи програму Mapedit, як описувалося раніше, можна створити карту посилань, що обробляється клієнтом. На мал.6 показано як виглядає готова карта посилань у вікні браузера.

Мал. 7. Щоб відвідувачу легше було користуватися

панеллю інструментів, можна розмістити її у

верхній або нижній частині Web-сторінки.

Подивитися роботу прикладу

Завдання для самостійної роботи

Створити сторінку, на якій будуть розміщені логотипи Світових пошукових систем (Aport, Altavista, Rambler та інших) і перехід на ці сервери буде здійснюватися при натисканні на відповідний логотип. Для створення цієї сторінки скористатися картою посилань, яка обробляється браузером.

Знайомство з таблицями  

 Знайомство з таблицями

Основні дескриптори таблиці

Вирівнювання елементів таблиці

Значення CHAR

Одиниці вимірювання відстані

Більш складні таблиці

Параметри HTML 4.0 RULES і FRAME

Створення таблиць без рамок

Об'єднання рядків і стовпців

Групування рядків і стовпців

Пусті комірки

Зміна компонування таблиці

Використання кольорів в таблицях

Альтернативні способи представлення інформації

HTML є мовою одного з найпопулярніших ресурсів Internet, і сучасні вимоги до нього незрівнянні з первинними вимогами, передбаченими його творцями. Ці вимоги, що пред'являються до нього як до інструмента створення урядових, комерційних, університетських і персональних Web-сторінок, дуже різноманітні. Наприклад, корпоративний Web-сервер може нагадувати брошуру по маркетингу, а урядовий Web-сервер повинен подавати статистичні дані в формі таблиць. У більшості випадків ці типи Web-сторінок можна подати з використанням таблиць.

У друкарських публікаціях таблиці являють собою основний елемент дизайну. Розміщення даних в рядках і стовпцях полегшує порівняльний аналіз даних. Крім цього їх використовують для розбиття друкарської сторінки на розділи з метою компонування (хоч у цьому разі їх кордонів не видно). Для Web-сторінки таблиці також служать одним з основних елементів дизайну.

Завдяки фірмі Netscape і, частково, Microsoft, тепер в Web таблиці вже використовуються, але аж до появи HTML 3.2 в офіційному стандарті HTML їх не було. У цьому розділі показано, як використати HTML-таблиці для організації вмісту або навіть для компонування Web-сторінки.

У HTML таблиці визначаються майже так само, як контейнери списків. Елемент <TABLE> є контейнером, що містить як дані, так і інформацію про компонування таблиці.

HTML-таблиці формуються по рядкам: новий рядок вказується дескриптором <TR> (table row), а дані розділяються дескрипторами <ТН> (table header) або <TD> (table data). Дескриптор <TR> можна розглядати як розрив рядка, що повідомляє про початок нового рядка з даними. Заголовки таблиці Web-браузер виділяє жирним шрифтом і розташовує по центру комірки, а дані в таблиці відображаються в стандартному текстовому форматі. Поняття рядків, стовпців і елементів HTML-таблиці відповідають таким же поняттям звичайної таблиці.

 Основні дескриптори таблиці  

 HTML-код простої таблиці наведено нижче. У останніх версіях найбільш популярних браузерів Netscape Navigator, Microsoft Internet Explorer, NCSA Mosaic підтримуються всі елементи, що використовуються в цьому прикладі. На мал. 1 показано, як виглядає ця таблиця у вікні браузера.

<HEAD>

<TITLE> Приклад простих таблиць </TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<TR>

  <TH>Всі</TH><TH>кольори</TH><TH>райдуги</TH>

</TR>

<TR>

 <TD>Червоний</TD><TD>Оранжевий</TD><TD>Жовтий</TD>

</TR>

<TR>

 <TD>Зелений</TD><TD>Блакитний</TD><TD>Фіолетовий</TD>

</TR>

</TABLE>

<HR>

<TABLE BORDER>

<CAPTION>Moї улюблені виконавці</CAPTION>

<TR>

 <TH>Rock</TH><TD>PinkFloyd</TD> <TD>Led Zepplin</TD><TD>The Dobbie Brothers</TD>

</TR>

<TR>

 <TH>Soft</TH><TD>Simon and Garfunkel</TD> <TD>Peter, Paul, & Mary</TD>

<TD>Neil Young</TD>

</TR>

<TR>

 <TH>New Age</TH><TD>Enya</TD><TD>Clannad</TD><TD>Steamroller</TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

Мал. 1. Більшість популярних Web-браузерів підтримує дескриптори таблиць

Основні дескриптори таблиць, зображених на мал.1 і 2, наступні.

<TABLE> </TABLE> ці дескриптори є контейнером, що містить дані.

<TR> </TR> в ці дескриптори вміщений кожний рядок таблиці.

Закриваючий дескриптор </TR> можна не використовувати.

<TD> </TD> ці дескриптори визначають комірку. У них містяться власне дані таблиці. У окремому комірки можна розмістити додатково вкладені таблиці.

Закриваючий дескриптор </TD> можна не використовувати.

·        <ТН> </ТН> дескриптори заголовка таблиці; використовуються звичайно для розміщення заголовків в першому рядку або в першому стовпці таблиці. Закриваючий дескриптор </ТН> можна не використовувати.

Крім наведених вище загальних дескрипторів, в прикладах таблиць, наведених на мал. 1 і  2, міститься теги з параметрами.

Параметр BORDER. При використанні цього параметра в дескрипторі <TABLE>  навколо таблиці встановлюються рамка. Значення параметра визначає ширину рамки в пікселях, наприклад: BORDER=1. Якщо встановити значення, рівне нулю, то браузер не буде відображати рамоку.

Параметр ALIGN. Допустимими значеннями цього параметра дескриптора <TABLE> є - LEFT, RIGHT і CENTER (значення за замовчанням LEFT). У HTML 4.0 визначене ще одне значення, CHAR, яке встановлює вирівнювання по вказаному символу, наприклад десятковій точці.

Заголовки таблиці. Більшість браузерів підкреслює і розташовує в центрі заголовки таблиць, взяті в дескриптори <ТН> </ТН>.

Дані таблиці. Більшість браузерів відображає дані таблиць, взяті в дескриптори <TD></TD>, звичайним шрифтом.

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

У HTML 4.0 у багатьох дескрипторів таблиць з'явилися нові параметри, які призначені для полегшення доступу іншомовних користувачів і інвалідів. Наприклад, параметр AXIS="NAME" дескриптора <ТН> дозволяє вказати вимовне ім'я заголовка таблиці, яке можна використати в синтезаторі мови. Аналогічний параметр AXES="ROW,COLUMN" дескриптора <TD> або дескриптора даних таблиці дозволяє повідомити синтезатору, як вимовляти дані вказаного елемента таблиці. Майже у всі дескриптори, що визначають елементи таблиці, тепер включені параметри ID, CLASS, LANG і DIR. З їх допомогою визначають, відповідно, ідентифікатор елемента, клас, мову і напрям тексту.

У комірках не обов'язково повинні міститися дані. Щоб створити пусту комірку, можна визначити власну пусту комірку (<TD></TD>) або комірку, що не містить нічого видимого (<TD>&nbsp;</TD>). Потрібно зазначити, що &nbsp; являє собою спеціальний символ нерозривного пробілу. Здавалося б, обидва ці спосіб повинні приводити до одному і того ж результату, але, як буде показано в розділі "Пусті комірки", різні браузери трактують їх по-різному.

Створювати пусті комірки в кінці рядка необов'язково, оскільки дескриптор <TR> означає початок нового рядка, і Web-браузери при виявленні цього дескриптора автоматично додають пусті комірки до кінця рядка.

Таблиці повинні бути уніфіковані, тобто у всіх рядках і у всіх стовпцях повинно міститися однакове число комірок. Таблиці L-образної форми недопустимі!

 Вирівнювання елементів таблиці  

 Існує декілька способів вирівнювання елементів таблиці в комірках за допомогою параметрів ALIGN і VALIGN. Ці параметри можна  розміщувати в різних комбінаціях в дескрипторах <CAPTION>, <TR>, <TH> і <TD>. Нижче показані можливі значення цих параметрів для кожного з названих дескрипторів.

<CAPTION>. Параметр ALIGN може приймати значення ТОР і BOTTOM (TOP за замовчанням). При цьому підпис розміщується, відповідно, у верхній або нижній частині таблиці.

<TR>. Параметр ALIGN може приймати значення LEFT, RIGHT і CENTER (LEFT за замовчанням для елементів даних і CENTER для елементів заголовків), встановлюючи горизонтальне вирівнювання елементів відповідно по лівому, правому краю або по центру комірки. Параметр VALIGN може приймати значення TOP, BOTTOM, MIDDLE і BASELINE (MIDDLE за замовчанням), встановлюючи вертикальне вирівнювання по верхньому, нижньому краю або по центру комірки Значення BASELINE обумовлює вирівнювання всіх елементів рядка по загальній базовій лінії. Вказані в цьому місці параметри вирівнювання будуть впливати на всі елементи даного рядка. Їх можна далі перевизначити для кожної конкретної комірки.

<ТН> Параметр ALIGN може приймати значення LEFT, RIGHT і CENTER (CENTER за замовчанням). Параметр VALIGN може приймати значення ТОР, BOTTOM і MIDDLE (MIDDLE за замовчанням).

D> Параметр ALIGN може приймати значення LEFT, RIGHT і CENTER (LEFT за замовчанням). Параметр VALIGN може приймати значення ТОР, BOTTOM і MIDDLE (MIDDLE за замовчанням).

Приклади вирівнювання елементів наведені нижче, а отримана таблиця, відображена в вікні браузера, зображена на мал. 2.

<HTML>

<HEAD>

<TITLE> Приклад вирівнювання в таблиці </TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<CAPTION ALIGN=BOTTOM>Жахлива таблиця</CAPTION>

<TR> <!--перший рядок таблиці-->

 <TH></TH>

 <TH>##########</TH>

 <TH>##########</TH>

 <TH>##########</TH>

</TR><!-- кінець першого рядка таблиці-->

<TR ALIGN=RIGHT> <!--другийрядок таблиці з вирівнюванням по правому краю-->

 <TH>Перший рядок</TH>

 <TD>XX<BR>XX</TD>

 <TD ALIGN=CENTER>Х </TD>

 <TD>XXX</TD>

</TR><!-- кінець другого рядка таблиці-->

<TR VALIGN=BASELINE><!--третій рядок таблиці-->

 <TH ALIGN=LEFT> Другий рядок </TH>

 <TD>XXX<BR>XXX</TD>

 <TD>XXX</TD>

 <TD>XXX<BR>XXXXX<BR>XXX</TD>

</TR> <!-- кінець третьогорядка таблиці-->

<TR ALIGN=LEFT> <!--четвертий рядок таблиці-->

 <TH>Це<BR> нижній рядок <BR> таблиці</ТН>

 <TD VALIGN=BOTTOM>XXXXX</TD>

 <TD VALIGN=TOP>XXX<BR>XXXXX</TD>

 <TD VALIGN=MIDDLE>XXXXX</TD>

</TR><!-- кінець четвертого рядка таблиці-->

</TABLE>

</BODY>

</HTML>

 

Мал. 2. Вирівнювання елементів таблиці можна задати як для всього рядка,

так і для окремої комірки

Хоч дана таблиця досить безглузда, вона служить хорошою ілюстрацією застосування параметрів ALIGN і VALIGN.

Прокоментуємо вище наведений HTML код:

Підпис. Дескриптор <CAPTION ALIGN=BOTTOM> розміщує підпис під таблицею, перевизначити значення за умовчанням, що розміщує підпис вгорі.

Рядок 1.

Дескриптор <TR ALIGN=RIGHT> за замовчанням встановлює для всіх комірок рядка вирівнювання по правому краю.

Дескриптор <TD ALIGN=CENTER> перевизначає для третього стовпця значення за замовчанням, встановлене дескриптором <TR>.

Другий рядок.

Дескриптор <TR VALIGN=BASELINE> встановлює для всіх комірок рядка вертикальне вирівнювання по базовій лінії.

Дескриптор <ТН ALIGN=LEFT> перевизначає для заголовка першого стовпця значення за замовчанням і вирівнює його по лівій стороні.

Нижній рядок таблиці.

Дескриптор <TR ALIGN=LEFT> за замовчанням встановлює для всіх комірок рядка горизонтальне вирівнювання по лівому полю.

Дескриптор <TD VALIGN=BOTTOM> у другому стовпці встановлює вертикальне вирівнювання по нижньому краю.

Дескриптор <TD VALIGN=TOP> в третьому стовпці встановлює вертикальне вирівнювання по верхньому краю.

Дескриптор <TD VALIGN=MIDDLE> в четвертому стовпці встановлює вертикальне вирівнювання по центру стовпця. Оскільки це відповідає значенню за умовчанням, даний параметр необов'язковий.

Написання HTML-кодів для таблиць в текстовому редакторі не завжди є кращим способом створення таблиці. Зараз кращі інструменти для прикидки форми таблиць це папір і олівець На мал. 3 показаний ескіз таблиці з двома рядками і чотирма стовпцями. Перші два стовпці першого рядка об'єднані, як і два останніх стовпці другого рядка.

Мал. 3. Зробіть ескіз таблиці, перш ніж писати HTML-код

Щоб полегшити роботу по написанню HTML-коду, можна над малюнком написати дескриптор <TABLE>, а під малюнком - дескриптор </TABLE>. Потім на початку і кінці кожного рядка написати дескриптори <TR> і </TR>. І, нарешті, для кожної комірки написати дескриптори <TD> і </TD>. Якщо комірки об'єднані, то після дескриптора <TD> записується число об'єднаних комірок і вказується, чи об'єднуються рядки або стовпці. На мал. 4 приведено приклад такої схеми.

Мал. 4. Розмітка ескізу таблиці

З таким ескізом в руках вже можна писати HTML-код. Краще починати зверху і вводити черговий дескриптор, рухаючись зліва направо і зверху вниз. При об'єднанні комірок потрібно додавати в дескриптор <TD> параметр ROWSPAN або COLSPAN. Далі наведемо HTML-код, відповідний ескізу попереднього малюнка. Правильне розташування відступів в коді робить його більш зрозумілим.

<TABLE>

<TR>

  <TD COLSPAN=2> </TD> <TD> </TD> <TD> </TD>

</TR>

<TR>

  <TD> </TD><TD> </TD><TD COLSPAN=2> </TD>

</TR>

</TABLE>

Значення CHAR

У HTML 4.0 визначене нове значення параметра ALIGN це CHAR - вирівнювання по символу. Внаслідок цього стало можливим вирівнювання елементів по десятковій точці, по двокрапці або по інших загальновживаних символах. Це значення використовується спільно з новим параметром CHAR. Ось приклад такого використання:

<TR ALIGN=CHAR CHAR=".">.. данні таблиці...</TR>

У дескрипторі <TR> параметр ALIGN=CHAR вказує, що дані в комірках цього рядка повинні бути вирівняні по десятковій точці. Параметр CHAR="." визначає, що символом вирівнювання повинна бути десяткова точка. Символом вирівнювання може бути будь який ASCІІ- символ.

Значення CHAR для параметра ALIGN може використовуватися в дескрипторах COL, COLGROUP, THEAD, TBODY, TFOOT, TR, TH і TD.

Для вказівки змішання символів в комірці можна використати новий параметр CHAROFF. Наприклад, рядок CHAROFF="30%" вказує браузеру, що символи, вказані в параметрі CHAR=, треба змістити від початку комірки на відстань, рівного 30% ширини комірки.

Одиниці вимірювання відстані

У деяких параметрах дескрипторів можна указати ширину рамки, комірки або інших елементів сторінки. Можна вказувати ширину в відсотках, а можна вказувати абсолютне значення. У попередньому прикладі зсув символів визначався в відсотках, але можна було написати рядок CHAROFF="20", що означало б "20 пікселів". Якщо число вказане без одиниць вимірювання, то завжди маються на увазі пікселі.

Рядок CHAROFF="20px" означає те ж саме, тільки в ній явно вказуються одиниці вимірювання пікселі. Як одиниці вимірювання можна використати пункти "pt", наприклад; "CHAROFF=50pt". Однак пункти звичайно використовуються при виведенні на друк, оскільки для екрана ці одиниці не визначені і можуть виявитися будь-якого розміру.

У таблиці перераховані одиниці вимірювання, що вживаються в HTML.Позначення Визначення

рх (або відсутні) пікселі

pt пункти

рi піки

in дюйми

cm сантиметри

mm міліметри

em m-одиниці

% відсотки від ширини об'єкта

 Більш складні таблиці  

 Використовуючи додаткові параметри таблиць або по-різному комбінуючи , вже відомі параметри, можна створювати і більш складні таблиці.

Параметри HTML 4.0 RULES і FRAME

У HTML 4.0 можна управляти лініями і рамкою таблиць.

Параметр FRAME вказує, які сторони рамки відображати. У нього є наступні значення.VOID Рамка відсутня

ABOVE Верхня сторона

BELOW Нижня сторона

HSIDES Горизонтальні сторони

LHS Ліва сторона

RHS Права сторона

VSIDES Вертикальні сторони

BOX або BORDER Всі чотири сторони

Значення BORDER включене в HTML 4.0 для сумісності з версією 3.2. Рядки <TABLE FRAME=BORDER> і <TABLE BORDER> означають одне і теж.

Крім нового параметра FRAME у дескриптора <TABLE> є новий параметр RULES. Цей параметр використовується для визначення додаткових ліній всередині таблиці. Наприклад, можна розмістити лінії між всіма стовпцями або групами рядків.

Нижче приведені значення параметра RULES.NONE Лінії відсутні.

GROUPS Горизонтальна лінія між всіма групами рядків і вертикальна лінія між всіма групами стовпців

ROWS Лінії, вказані значенням groups, і горизонтальні лінії між всіма рядками

COLS Лінії, вказані значенням groups, І вертикальні ліній між всіма стовпцями

ALLRules Лінії між всіма рядками і стовпцями

 Створення таблиць без рамок  

 Як вже говорилося, параметр BORDER дескриптора <TABLE> є елементом HTML 3.2, що створює рамки навколо таблиць. Він збережений в HTML 4.0 з метою сумісності версій. За замовчанням цей параметр вимкнений, але звичайно його вмикають, оскільки рамки таблиці добре виділяють і упорядковують інформацію. Таблиця (мал. 5), код якої приведений нижче, легше сприймається, якщо рамки таблиці можна побачити.

<HTML>

<HEAD>

<TITLE>Рамки таблиці</TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<TR> <TH>ФРУКТИ</TH> <TH>ОВОЧІ</TH> <TH>ЗЛАКИ</TH> </TR>

<TR> <TD>Яблуко</TD> <TD>Брокколі</TD> <TD>Ячмінь</TD> </TR>

<TR><TD>Апельсин</TD><TD>Капуста</TD><TD>Овес</TD></TR>

<TR><TD>Ківі</TD><TD>Зелений горошок</TD><TD>Просо</TD></TR>

<TR><TD>Aнaнac</TD><TD>Пepeц</TD><TD>Kінза</TD></TR>

</TABLE>

</BODY>

<HR>

<TABLE>

<TR> <TH>ФРУКТИ</TH> <TH>ОВОЧІ</TH> <TH>ЗЛАКИ</TH> </TR>

<TR> <TD>Яблуко</TD> <TD>Брокколі</TD> <TD>Ячмінь</TD> </TR>

<TR><TD>Апельсин</TD><TD>Капуста</TD><TD>Овес</TD></TR>

<TR><TD>Ківі</TD><TD>Зелений горошок</TD><TD>Просо</TD></TR>

<TR><TD>Aнaнac</TD><TD>Пepeц</TD><TD>Kінза</TD></TR>

</TABLE>

</HTML>

Мал. 5 Дві однакові таблиці з границею та без неї

HTML-таблиці можна використати не тільки для розміщення даних. За допомогою таблиць можна розміщувати і групувати інформацію. У нижче наведеному HTML-код таблиці без рамок, розміщуючи текст поруч з тим зображенням, яке він описує. На мал. 6 показано, як виглядає подібна таблиця.

<HTML>

<HEAD>

<TITLE>Таблиця з малюнком</TITLE>

</HEAD>

<BODY>

<TABLE>

<TR>

<TD><IMG SRC="COMP.gif"></TD> <TD>

В комірки таблиці можна вставляти малюнки! </TD>

</TR> </TABLE> </BODY> </HTML>

Мал. 6 Таке розміщення елементів по рядках сторінки може бути отримане

за допомогою HTML-таблиці

Об'єднання рядків і стовпців  

 Рядки і стовпці можна об'єднувати, створюючи з суміжних комірок більш великі. Наприклад, в таблиці з п'ятьма рядками і п'ятьма стовпцями можна об'єднати комірки першого рядка для створення загального заголовка таблиці. У тій же таблиці можна створити елементи, що об'єднують декілька комірок в кожному стовпці. А можна створювати прямокутні елементи, що об'єднують комірки з суміжних рядків і стовпців, аж до створення одної комірки з всієї таблиці.

Для об'єднання двох суміжних комірок в рядку в дескрипторах <ТН> або <TD> використовується параметр ROWSPAN:

<TD ROWSPAN=2>

Для об'єднання двох суміжних комірок в стовпці в дескрипторах <ТН> або <TD> використовується параметр COLSPAN:

<TD COLSPAN=2>

У HTML 4.0 у дескриптора <TD> є додатковий параметр NOWRAP. При наявності цього параметра автоматичне перехід тексту в комірці відміняється. Але цей параметр використовується тільки для поліпшення сумісності з сучасними браузерами. Його функції цілком можуть виконувати листи стилів.

Нижче наведено  HTML-документ з таблицями, в яких використовується об'єднання рядків і стовпців. Зовнішній вигляд цих таблиць показано на мал. 7. На малюнку видно, до яких неприємних результатів може привести об'єднання комірок. Неуважність при об'єднанні рядків і стовпців може привести до здійснення не передбачуваних результатів.

<HTML>

<HEAD>

<TITLE> Об'єднання рядків і стовпців </TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<TR><TH COLSPAN=3>DC nationals</TH><TR>

<TR><TH>Напад</TH><TH>Захист</TH><TH>Голкіпер</TH></TR>

<TR> <TD>Гусман</TD><TD>0' Доннел</TD><TD ROWSPAN=5>Вайнберг</TD></TR>

<TR> <TD COLSPAN=2>Попплвелл</TD>

</TR>

<TR>

<TD>Мак-Гиллі</TD><TD>Лонго</TD>

</TR>

<TR> <TD>Донахио</TD><TD>Сеймур</TD>

</TR>

<TR> <TD>Камилло</TD><TD>Валш</TD>

</TR> </TABLE>

<!--Друга таблиця-->

<TABLE BORDER>

<TR><TH COLSPAN=3>DC nationals</TH><TR>

<TR><TH>Напад</TH><TH>Захист</TH><TH>Голкіпер</TH></TR>

<TR>

<TD>Гусман</TD><TD>0'Доннел</TD>

<TD ROWSPAN=5>

Вайнберг<BR>Вайнберг<BR>Вайнберг<BR>

Вайнберг<BR>Вайнберг<BR>Вайнберг<BR>

</TD>

</TR>

<TR>

<TD COLSPAN=2> Попплвелл</TD>

</TR>

<TR>

<TD>Мак-Гиллі</TD><TD>Лонго</TD>

</TR>

<TR> <TD>Донахио</TD><TD>Сеймур</TD>

</TR>

<TR> <TD>Камилло</TD><TD COLSPAN=2></TD><TD>Валш Валш Валш</TD>

</TR> </TABLE>

</BODY>

</HTML>

 

Мал. 7 Неуважність при об'єднанні елементів таблиці

може привести до несподіваних результатів

При створенні в HTML-таблиці більш великих комірок введення даних може відбуватися некоректно: не сприймається перехід рядка, текст без вказівки переходить на інший рядок або розташовується дуже близько до розмежувальних ліній. Як і в інших HTML-документах, в таблицях підтримуються зовнішні елементи, такі як <BR> (розрив рядка), опорні елементи гіперпосилань, зображення і навіть форми, Такі HTML-таблиці використовуються для відображення і компонування даних (при створенні інвентарних описів і рахунків), а також для розрахунків (при взаємодії з CGI-сценаріями, які приймають введені в форму дані і передають результати для розміщення в HTML-таблиці). Застосування таблиць обмежене тільки наявністю даних і фантазією автора.

Групування рядків і стовпців  

 У HTML 4.0 є дескриптори для групування рядків і стовпців з метою застосування загальних параметрів для цих груп.

Дескриптор COLGROUP вказує для групи стовпців параметри ширини і вирівнювання. Наприклад, якщо в таблиці з шести стовпців перші три стовпці повинні мати ширину 50 пікселів, а їх вміст повинен вирівнюватися по лівому краю, наступні два стовпці повинні мати ширину 100 пікселів, а їх вміст повинен вирівнюватися по десятковій точці, останній же стовпець повинен займати частину екрана, що залишилася, а його вміст повинен вирівнюватися по правому краю, то для виконання такого форматування треба написати наступний HTML-код:

<COLGROUP WIDTH="50px" ALIGN=LEFT SPAN=3>

<COLGROUP WIDTH="100рх " ALIGN=CHAR CHAR="." SPAN=2>

<COLGROUP WIDTH=" 100% " ALIGN=RIGHT>

Потрібно зазначити, що параметр SPAN визначає кількість стовпців в групі COLGROOP. Якщо опустити цей параметр, то за замовчанням число стовпців в групі буде таке, що дорівнює одиниці (SPAN=1).

Дескриптори TBODY, THEAD і ТFOOT виконують функції, аналогічні функціям дескриптора COLGROUP, але вони групують не стовпці, а рядки. Дескриптори THEAD і TFOOT форматують, відповідно, верхню і нижню частину таблиці. Дескриптор TBODY групує рядки в основній частині таблиці. Кожний з цих дескрипторів являє собою контейнер, тобто має відкриваючу і закриваючу частини (наприклад, <TBODY></TBODY>), але закриваючі дескриптори THEAD і TFOOT необов'язкові, якщо відразу за ними слідує дескриптор TBODY. Це зроблене для сумісності з HTML-таблицями попередніх версій.

Кожний рядок, що входить до групи, повинен містити хоч би один елемент <TR>.

Блок TFOOT повинен розташовуватися перед блоком TBODY, щоб браузери спочатку інтерпретували нижню частину таблиці.

Дія параметрів і значень, що містяться в дескрипторі COLGROUP розповсюджується на всі елементи групи.

Pаніше, ні Microsoft Internet Explorer,ні Netscape Communicator не підтримували дескриптори COLGROUP, THEAD, TFOOT і TBODY.

Завдання!

Перевірте, чи підтримують основні браузери  ці теги?.

 Пусті комірки  

 Як вже було сказано, пустий елемент таблиці і комірка з невидимим вмістом не одне і те ж. Це вірно як для Netscape Navigator, так і для Microsoft Internet Explorer. Представлений HTML-документ описує дві таблиці. У верхній таблиці є декілька пустих комірок, що містять в собі тільки пропуски (Internet Explorer не відображає пропуски). У нижній таблиці в тих же самих комірках знаходяться елементи &nbsp нерозривні пропуски, що відносяться до невидимих символів.

Як показано на мал. 8, Internet Explorer відображає ці таблиці по-різному.

<HTML>

<HEAD>

<TITLE> Приклад таблиці з пустими комірками </TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<TR><TD>Aмapaнт</TD><TD> </TD><TD>Гречиха</TD></TR>

<TR><TD>Ячмінь </TD><TD>Жито </TD><TD></TD></TR>

<TR><TD>Кинза </TD><TD>Пшениця</TD><TD></TD></TR>

</TABLE>

<HR>

<TABLE BORDER>

<TR><TD>Aмapaнт</TD><TD>&nbsp</TD><TD>Гречиха</TD></TR>

<TR><TD>Ячмінь </TD><TD>Жито </TD><TD>&nbsp</TD></TR>

<TR><TD>Кинза </TD><TD>Пшениця</TD><TD>&nbsp</TD></TR>

</TABLE>

</BODY>

</HTML>

 

Мал. 8. Internet Explorer відображає таблиці з пустими комірками і таблиці з невидимим вмістом комірок по різному

 Зміна компонування таблиці  

 У HTML є декілька нових параметрів, що збільшують можливість зміни компонування таблиці. Ці параметри були запропоновані фірмою Netscape, підтримані в браузері Internet Explorer, і увійшли в HTML-стандарт. Приклад використання цих параметрів наведено нижче, а отримана таблиця зображена на мал. 9.

<HTML>

<HEAD>

<TITLE>IIpиклад форматування</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=10 CELLPADDING=10 CELLSPACING=10 WIDTH=100%>

<TR>

<TD>Ширина 100%</TD>

<TD>Рамка<BR>Вільний простір в комірці = 10<BR>Простір між комірками</ТИМ>

</TR>

<TR> <TD>

<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5 WIDTH=75%>

<TR>

<TD>Висота 75%</TD>

<TD>Рамка<BR>Вільний простір в комірці = 5<BR>Простір між комірками</TD> </TR>

</TABLE>

</TD>

<TD>Всього найкращого!</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Мал. 9. HTML надає можливість зміни в компонуванні таблиць

На мал. 9 показані наступні параметри.

WIDTH з його допомогою можна встановити ширину таблиці як в пікселях, так і в процентах від ширини вікна браузера. Цей параметр можна застосовувати і для окремих комірок.

HEIGHT з його допомогою можна встановити висоту таблиці як в пікселях, так і в процентах від висоти вікна браузера. Цей параметр можна застосовувати і для окремих комірок.

BORDER з його допомогою можна встановити навколо таблиці рамку. Товщина ліній рамки вказується в пікселях, наприклад BORDER=2.

CELLPADDING і CELLSPACING - ці параметри з заданими числовими значеннями використовуються для розміщення в окремих комірках таблиці або у всій таблиці додаткового вільного простору. Якщо рамка таблиці не відображається, то ці значення співпадають.

Використання кольорів в таблицях  

 У HTML не передбачена можливість установки кольору таблиці або її комірок. Але і Netscape Navigator, і Microsoft Internet Explorer мають розширення, що дозволяють міняти кольори комірок і рамок. Для зміни кольору фону комірки (До розміщення в ній тексту або зображення) використовується параметр BGCOLOR. Для зміни кольору рамки використовується параметр BORDERCOLOR. Ці параметри підтримуються браузерами Netscape Navigator і Microsoft Internet Explorer.

Параметри BGCOLOR і BORDERCOLOR можуть розташовуватися в дескрипторах <TABLE>, <TD>, <ТН> і <TR>. Таким чином, можна міняти колір як всієї таблиці, так і окремих рядків або комірок. Наведений HTML-код для трьох різних таблиць. Зовнішній вигляд цих таблиць в браузере Internet Explorer показаний на мал. 10.

<HTML>

<HEAD>

<TITLE>Приклад використання кольорів в таблиці</TITLE>

<HEAD>

<BODY>

<TABLE BORDER BORDERCOLOR=BLACK BGCOLOR=YELLOW>

<TR><TD>l-one</TD><TD>2-two</TD><TD>3-three</TD></TR>

<TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR>

<TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR>

</TABLE>

Зміна кольору всієї таблиці

<HR>

<TABLE BORDER>

<TR BORDERCOLOR=BLACK BGCOLOR=YELLOW>

<TD>l-one</TD><TD>2-two</TD><TD>3-three</TD></TR>

<TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR>

<TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR>

</TABLE>

Зміна кольору одного рядка

<HR>

<TABLE BORDER>

<TR><TD BORDERCOLOR=BLACK BGCOLOR=YELLOW>l-one</TD><TD>2-two</TD>

<TD>3-three</TD></TR>

<TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR>

<TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR>

</TABLE>

Зміна кольору однієї комірки

</BODY>

</HTML>

 

Мал. 10 Зміна кольору комірки без зміни кольору рамки виглядає дуже незвично

У HTML визначені наступні імена кольорів (для зручності рядом наведені їх RGB-значення):BLACK #000000 SILVER C0C0C0

GRAY #808080 WHITE #FFFFFF

MAROON #800000 RED #FF0000

PURPLE #800080 FUCSHIA #FF00FF

GREEN #008000 LIME #00FF00

OLIVE #808000 YELLOW #FFFF00

NAVY #000080 BLUE #0000FF

TEAL  #008080 AQUA #00FFFF

Альтернативні способи представлення інформації  

 Підтримка таблиць здійснюється більшістю популярних Web-браузерів, тому не треба відмовлятися від використання таблиць. Проте, деякі користувачі вимушені застосовувати (внаслідок особливостей з'єднання з Internet або політики своїх провайдерів) Web-браузери, які не підтримують таблиці. Якщо автора Web-сторінки турбують ці користувачі, то замість таблиць або одночасно з ними він може використати інші способи відображення інформації.

Наведемо HTML-документ, що описує досить просту таблицю. Зовнішній вигляд цієї таблиці показаний на мал. 11.

<HTML>

<HEAD>

<TITLE> Об'єднання рядків і стовпців </TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<TR><TH COLSPAN=3>DC nationals</TH><TR>

<TR><TH>Напад</TH><TH>Захист</TH><TH>Голкіпер</TH></TR>

<TR> <TD>Гусман</TD><TD>0' Доннел</TD><TD ROWSPAN=5>Вайнберг</TD></TR>

<TR> <TD COLSPAN=2>Попплвелл</TD>

</TR>

<TR>

<TD>Мак-Гиллі</TD><TD>Лонго</TD>

</TR>

<TR> <TD>Донахио</TD><TD>Сеймур</TD>

</TR>

<TR> <TD>Камилло</TD><TD>Валш</TD>

</TR> </TABLE>

</BODY>

</HTML>

 

Мал. 11 Зразок таблиці з простою організацією інформації

Ось якими способами можна ще представити цю інформацію.

Використати список. Досить просту інформацію можна завжди представити у вигляді списку. Код такого списку приведений далі, а його зовнішній вигляд в браузері Internet Explorer показано на мал. 12.

<HTML>

<HEAD>

<TITLE>Об'єднання рядків і стовпців </TITLE>

</HEAD>

<BODY>

<STRONG>DC Nationals</STRONG>

<UL>

<LI><EM> Напад </EM>

<UL>

<LI>Гусман

<LI>Поппльвелл

<LI>Мак-Гиллн

<LI>Донахью

<LI>Kамилло

</UL>

<LI><EM> Захист </EM>

<UL>

<LI>0'Доннел

<LI>Поппльвелл

<LI>Лонго

<LI>Сеймур

<LI>Валш

</UL>

<LI><EM>Голкіпер</EM>

<UL>

<LI>Вайнберг

</UL>

<UL>

</BODY>

</HTML>

 

Мал. 12 Оскільки в браузерах списки підтримуються частіше, ніж таблиці, то можна використати замість таблиці список

Використати замість таблиці зображення. Створивши таблицю в текстовому редакторі або навіть в Web-браузері, такому, наприклад, як Netscape Navigator, скопіювати зображення на екрані і обрізати його по розміру таблиці. Таке зображення можна вмістити в HTML-документ замість таблиці. Однак це не кращий варіант, оскільки браузери, не підтримуючі таблиці, можуть також не підтримувати і зображення.

Використати відформатований текст. У такої таблиці буде непривабливий вигляд, але всі браузери, включаючи текстові (Lynx) будуть її правильно відображати. Приклад такої таблиці наведемо на мал. 13.

Мал. 13. Така таблиця не дуже красива, але її правильно відобразить будь-який браузер

Концепція фреймів  

 Концепція фреймів

Основи створення фреймів

Контейнер FRAMESET

Атрибути ROWS і COLS

Дескриптор FRAME

Створення альтернативного вмісту

Приклади фреймів

Сторінка з двома фреймами

Проста прямокутна сітка фреймів

Створення складної сітки фреймів

Зміна зовнішнього вигляду і роботи фреймів

Поля фрейму

Зони прокручування фреймів

Зміна розмірів фрейму

Рамки фрейму

Робота з гіперпосиланнями

Присвоєння імен і завантаження фреймів

Дозволені імена

Одночасне відновлення декількох фреймів

HTML-фрейми, що вперше з'явилися в браузері Netscape Navigator 2.0, являють собою незалежні  вікна (іноді) зі смугами скролінгу (прокручування), об'єднані у вікні браузера таким чином, що з ними легко працювати.

Фрейми багато в чому аналогічні HTML-таблицям. Засвоївши роботу з таблицями, зовсім нескладно розібратися в усьому, що стосується фреймів.

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

Основи створення фреймів

Подивимося на блок HTML-коду, що створює фреймовий документ середньої складності.

Цей код ( Frames1.html ) створює сторінку, показану на мал. 1 Як можна побачити, на ній знаходяться чотири фрейми. Верхній фрейм займає всю ширину екрана і містить заголовок. Лівий з центральних фреймів, що займає 25% ширини екрана, призначений для короткого повідомлення. Іншу частину ширини екрана займає правий фрейм, у якому міститься основна інформація. Останній фрейм займає нижню частину екрана.

Тут не видно в подробицях інших сторінок, але варто сказати, що цей документ викликає чотири інших документи— header.html, label.html, info.html і footer.html, що містять інформацію, яка повинна бути представлена в даних фреймах.

Мал. 1 Документ із фреймами

 Контейнер FRAMESET  

 Фрейми містяться в структурі FRAMESET, що заміщає в сторінці з фреймами структуру BODY. У HTML-документі, що містить структуру FRAMESET, немає структури BODY, а сторінки зі структурою BODY не можуть знаходитися в дескрипторі FRAMESET.

Якщо розмістити в тегах FRAMESET і FRAME структуру BODY, то браузер проігнорує фрейми і не буде відображати їх вмісту, а покаже тільки інформацію, що міститься в розділі BODY. У зв'язку з відсутністю контейнера BODY, сторінки, визначені структурою FRAMESET, не можуть мати фону або фонового зображення (оскільки вони визначаються параметрами BACKGROUND і BGCOLOR дескриптора BODY). Однак в файлах, де знаходиться вміст окремих фреймів, можна задавати фон, оскільки в них використовується дескриптор BODY. Потрібно перевіряти, чи не виявилися випадково дескриптори BODY і FRAMESET в одному HTML-документі.

Контейнер <FRAMESET> </FRAMESET> оточує всі блоки фреймів. У цьому контейнері можуть знаходитися тільки дескриптори FRAME чи вкладені контейнери FRAMESET.

До стандартизації дескриптора BODY було запропоновано новий тип контейнера фрейму IFRAME, який називається вбудованим фреймом. Цей контейнер визначає блок усередині дескриптора BODY як звичайної HTML-сторінки (не фреймової структури). Цей дескриптор можна розміщати в будь-якому місці сторінки, як графічне зображення або інші об'єкти, але його вміст не можна змінювати при виклику посилання, як це можна робити з фреймом. Нижче наведений приклад цього контейнера:

При виклику посилання "Привіт." в убудованому фреймі буде з'являтися файл hithere.htm, а при виклику посилання "Всім привіт!" в убудованому фреймі буде з'являтися файл Hello.htm, завантаження ж сторінки не буде. На малюнку наведено вигляд вікна браузера

Мал. 2. Приклад використання дескриптора IFRAME

 Параметри ROWS і COLS  

 Дескриптор <FRAMESET> має два головних параметра: ROWS — кількість рядків і COLS — кількість стовпчиків. Нижче наведено звичайний вид контейнера <FRAMESET>(порожнього ):

<FRAMESET ROWS="value_list" COLS="value_list">

</FRAMESET>

Можна визначати будь-яке розумне число рядків і стовпців, але хоча б один з цих атрибутів визначати треба обов'язково.

Значення value_list у рядку FRAMESET являє собою список значень, розділених комами. Ці значення можуть виражатися у відсотках, пікселях чи в пропорційних одиницях. Число чи рядків стовпців встановлюється в залежності від кількості значень у списку. Наприклад:

<FRAMESET ROWS="100, 240, 140">

Тут визначена фреймова структура з трьох рядків. Значення приведені в пікселях. Висота першого рядка складе 100 пікселів, висота другого рядка — 240 пікселів, а третьої — 140 пікселів.

Однак встановлення розмірів рядків і стовпців у пікселях є поганим тоном. Адже при цьому не враховується, що браузер може працювати в різних операційних системах, а екрани можуть бути різного розміру. Хоча в окремих випадках для невеликих зображень точно відомого розміру можна вказувати значення в пікселях, усе-таки краще визначати рядки і стовпці, використовуючи відносні значення, наприклад:

<FRAMESET ROWS="25%, 50%, 25% ">

У цьому прикладі створюються три фрейми, розташовані у виді рядків, середній з яких займає 50% висоти екрана, а верхньому і нижньому залишається по 25%.

Не слід турбуватися про точну відповідність суми всіх розмірів ста відсоткам. У випадку розбіжності вони автоматично будуть маштабовані (збільшені чи зменшені) до сумарного значення, рівного 100%.

Пропорційні значення встановлюються так:

<FRAMESET COLS="*, 2*, 3*">

Символ зірочка (*) використовується для вказівки того, що екран поділяється на пропорційні частини. Кожна зірочка означає частину від цілого. Знаменник дробу дорівнює сумі всіх значень (якщо перед зірочкою не зазначене число, то значення вважається рівним одиниці). У даному прикладі екран поділяється на 6 частин, перший стовпець займає 1/6 загальної ширини екрана, другий стовпець займає 2/6 (1/3) загальної ширини, а останній — 3/6 (1/2).

Варто пам'ятати, що без вказівки одиниць значення виміряється в пікселях. Для вказівки процентного відношення використовується символ %, а значення з зірочкою є пропорційними значеннями,

Нижче наведений приклад з використанням усіх трьох типів значень:

<FRAMESET COLS="100, 25%, *, 2*">

У цьому прикладі перший стовпець буде мати ширину 100 пікселів. Другий займе 25% повної ширини екрана, а третій і четвертий, відповідно, — 1/3 і 2/3 ширини, що залишилася.

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

Якщо в дескрипторі FRAMESET зазначені обидва параметра — і COLS, і ROWS, то виходить сітка фреймів. Наприклад:

<FRAMESET ROWS="*, 2*, *" COLS="2*, *">

При цьому створюється сітка фреймів із трьох рядків і двох стовпців. Перший і останній рядок займають 1/4 висоти екрана, а середній рядок — половину. Перший стовпець займає 2/3 ширини екрана, а другий — 1/3.

Дескриптори <FRAMESET></FRAMESET> можуть вкладатися друг у друга, як це було показано в першому прикладі, але не будемо забігати вперед. У першу чергу варто зайнятися дескриптором <FRAME >.

 Дескриптор <FRAME>  

 Дескриптор <FRAME> визначає окремий фрейм. Він повинний розташовуватися в контейнері FRAMESET приблизно так:

<FRAMESET ROWS="*, 2*">

<FRAME>

<FRAME>

</FRAMESET>

Дескриптор <FRAME> не є контейнером, а отже, на відміну від контейнера FRAMESET, не має потреби в закриваючому дескрипторі. Усе визначення фрейму знаходиться в одному рядку HTML-коду.

Дескрипторів <FRAME> повинне бути рівно стільки, скільки областей визначено в структурі FRAMESET. У даному прикладі фреймова структура складається з двох рядків, тому потрібні два дескриптори <FRAME>. Але це досить нудний приклад, оскільки фрейми в ньому нічого не містять.

Дескриптор <FRAME> має шість параметрів: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING і NORESIZE. От як виглядає повне визначення фрейму:

<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>

На щастя, відразу всі параметри у фреймах використовуються дуже рідко.

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

<FRAME SRC="url">

Параметр SRC вказує URL вмісту фрейму. Найчастіше це HTML-файл у тій же системі (зі шляхом по відношенню до сторінки, яка містить структуру FRAMESET), тому звичайно він виглядає в так:

<FRAME SRC="sample.htm">

Слід зазначити, що будь-який HTML-файл, який викликається цим атрибутом, повинен бути закінченим документом. Це означає, що в ньому повинні знаходитися контейнери HTML, HEAD, BODY та інші. Наприклад, файл із прикладу sample.htm може виглядати так:

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

Деякий текст

</BODY>

</HTML>

Звичайно, параметр SRC може вказувати на будь-який URL. Наприклад, якщо у фреймі повинне розташовуватися деяке зображення, то дескриптор може виглядати в так:

<FRAME SRC="http://www.timbuktu.com/budda.gif">

Якщо зазначений URL, що не може бути знайдений браузером, то фрейму все рівно виділяється простір, але оскільки в ньому нічого не відображається, те браузер видає повідомлення про помилку. Ця ситуація відрізняється від тієї, котра виникає при відсутності параметра SRC. В останньому випадку фрейм створюється, але залишається порожнім. У випадку <frame SRC "unknown URL> фрейм не створюється, відведений для нього простір заповнюється не кольором фону, як при відсутності параметра SRC, а кольором рамки браузера.

 Створення альтернативного вмісту  

 Читач може сказати наступне: "Усе це дуже добре, і мені хотілося б використовувати фрейми. Але я буду почувати себе винним перед тими користувачами, браузери яких не відображають фрейми. Вони не зможуть побачити мої чудові сторінки!

Не варто турбуватися. Про таких користувачів теж можна подбати. Контейнер <NOFRAMES></NOFRAMES> забезпечить альтернативну інформацію для браузерів, що не працюють із фреймами. Його використання таке:

<NOFRAMES>

Уся необхідна інформація

</NOFRAMES>

Можна розглядати це як альтернативу структурі BODY звичайної HTML-сторінки. Браузери, що підтримують фрейми, ігнорують вміст цього контейнера, а інші браузери покажуть його вміст.

Для розміщення фонового чи зображення іншої графіки можна додати дескриптор <BODY>:

<NOFRAMES>

<BODY BGCOLOR="red" BACKGROUND="bgimage.gif">

вміст...

</BODY>

</NOFRAMES>

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

 Приклади фреймів  

 Фрейми являють собою дуже гнучкі елементи HTML, тому не виключено, що незабаром вони стануть дуже складними. Якщо зрозуміла основна ідея фреймів, то варто глянути на приклади.

Сторінка з двома фреймами

Найпростішим прикладом застосування фреймів є сторінка з двома фреймами:

У цьому HTML-коді визначена сторінка з двома фреймами, розташованими у виді двох стовпців. Перший стовпець займає 1/3 ширини екрана і містить документ label.html, а другий фрейм розташовується в частині екрана, що залишилася, і містить документ info.html. На мал. 3. показано, як виглядає ця сторінка в браузері.

Мал. 3. Проста фреймова структура, визначена в HTML-коді, складається з двох стовпців

Подивитися роботу прикладу

Так можна створити будь-яку кількість чи стовпців чи рядків ( підставивши параметр ROWS). Однак ніякий браузер не зможе обробити десять чи рядків чи стовпців так, щоб вони добре відображалися. Тому не варто розміщати на сторінці більше трьох-чотирьох чи рядків чи стовпців.

Якщо потрібно розмістити інформації більше, ніж вміщається в чотири чи рядки чи стовпця, то краще замість фреймів використовувати таблиці, фрейми особливо зручні в тих випадках, коли потрібно додати елемент керування, що залишається на екрані при переміщенні по Web-сервері, чи динамічно оновлювати тільки частину вікна браузера. Таблиці більше підходять для тих випадків, коли потрібно відформатувити статичні дані у вигляді рядків і стовпців. Занадто велика кількість фреймів може привести до збою в роботі браузера.

Проста прямокутна сітка фреймів  

 Прямокутну сітку фреймів можна легко визначити таким чином:

У цьому прикладі створена сітка, що складається з двох рядків і трьох стовпців. Оскільки було визначено шість фреймів, тому потрібно шість дескрипторів <FRAME>. Перший дескриптор описує фрейм першого рядка і першого стовпця, другий фрейм розташовується в першому рядку і другому стовпці, третій фрейм розташовується в третьому стовпці. Останні три фрейми заповнюють комірку другого рядка.

Мал. 4. Сітка з фреймів, створена за допомогою приведеного запропонованого HTML-коду

Подивитись роботу прикладу

При введенні розмірів стовпців була допущена математична неточність, і загальна ширина стовпців виявила всього 90%. Але браузер пропорційно збільшив усі стовпці так, щоб вони зайняли всю ширину вікна.

 Створення складної сітки фреймів  

 

Більш важким виявляється створення складної сітки фреймів. Повернемося до примкладу, з якого починалося обговорення (див. мал.1):

У цьому прикладі використовуються вкладені контейнери FRAMESET. Зовнішній контейнер створює три рядки, висота яких складає, відповідно, 25%, 50% і 25% висоти вікна.:

<FRAMESET ROWS="25%,50%,25%"> Перший і останній рядки є простими фреймами:

<FRAME SRC="header.htm">

<FRAME SRC="footer.htm">

Обидві цих рядки займають усю ширину екрана і по 25% його висоти. Між ними розташовується рядок із вкладеним контейнером FRAMESET:

<FRAMESET COLS="25%,75%">

<FRAME SRC="label.htm">

<FRAME SRC="info.htm">

</FRAMESET>

У цій фреймовій структурі визначені два стовпці, на які розщеплюється середній рядок. В зовнішньому контейнері FRAMESET визначена висота цього рядка, що складає 50% висоти вікна. Лівий стовпець займає 25% ширини екрана, а правий — що залишилось 75%.

Фрейми стовпців визначені у вкладеному дескрипторі FRAMESET, а фрейми першого й останнього рядків знаходяться поза цього вкладеного контейнера, але усередині зовнішнього контейнера FRAMESET.

Можна розглядати весь вкладений блок FRAMESET як окремий дескриптор <FRAME>. У даному прикладі зовнішній блок визначає три рядка. Кожний з рядків необхідно чимось заповнити. Два з них заповнені фреймами, а середній — фреймовою структурою, що складається з двох стовпців.

Можна переробити попередній приклад із вкладеними фреймовими структурами так, щоб він посилався на інший документ із фреймами. Для цього треба видалити вкладену фреймову структуру. Так буде виглядати перший (зовнішній) файл:

А от як виглядає другий (внутрішній) файл nested.htm:

У цьому випадку верхній і нижній рядки не змінилися. Але другий рядок у зовнішньому файлі тепер містить також визначення FRAME як і інші. Однак його параметр SRC вказує на внутрішній файл, що створює фреймову структуру. У результаті виходить, що документ нічим не відрізняється від первинного у чому можна переконатися, якщо порівняти мал. 4 і мал.1.

Мал. 5. Контейнери FRAMESET можуть бути як вкладеними, так і викликати інші документи, у яких містяться свої контейнери FRAMESET.Результат при цьому буде однаковий

Необхідно зазначити, що хоча існує можливість створювати вкладені фреймові структури, які використовують дескриптори <FRAME>, які використовують один і той самий URL, робити це не рекомендовано, тому що виникає нескінченна рекурсія, яка створює нескінченний цикл, що буде забирати всю пам'ять комп'ютера. Браузери, підтримуючі роботу зі фреймами, перевіряють фрейми на таке використання URL. Якщо в параметрі SRC URL співпадає з якимсь з попередніх, то такий параметр ігнорується, і браузер діє так, як би ніякого параметру SRC не існує. Але, давайте спробуємо обійти це  таким шляхом. Створимо два таких файла. Попереджаю перед тим, як подивитися файл first.html слід зберегти всю роботу, яку ви робили. Наскільки мені відомо, в останніх версіях браузерів це не приводить до нескінченних циклів, як це було у перших версіях.

first.html

<FRAMESET COLS="*,*">

<FRAME SRC="second.html">

<FRAME SRC="second.html">

</FRAMESET>

second.html

<FRAMESET COLS="*,*">

<FRAME SRС="first.html">

<FRAME SRC="first.html">

</FRAMESET>

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

У Netscape Navigator 2.0 кнопка Назад (Back), розташована в панелі інструментів, повертає користувача не з фрейму, а з усієї фреймової структури на попередню сторінку.

У версіях, починаючи з 3.0, як і в Internet Explorer, ця кнопка повертає до попереднього стану того ж самого фрейму.

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

 Зміна зовнішнього вигляду і роботи фреймів  

 Після знайомства зі створенням різних сіток фреймів варто розглянути деякі параметри, що змінюють зовнішній вигляд і роботу фреймів.

Поля фрейму

Параметри MARGINWIDTH і MARGINHEIGHT дескриптора FRAME служать для керування внутрішніми полями фрейму. Синтаксис обох параметрів такий:

MARGINWIDTH="value"

Значення завжди являє собою число і завжди виражається в пікселях. Наприклад:

<FRAME MARGINWIDTH="5" MARGINHEIGHT="7">

При цьому утвориться фрейм. Ширина його верхнього і нижнього полів складає - 5 пікселів, а лівого і правого — 7. Мова йде про внутрішні поля, а не про рамку. Параметри MARGINWIDTH і MARGINHEIGHT визначають порожній простір усередині фрейму. Ширина рамки або встановлюється браузером автоматично, або визначається параметром BORDER, про яке піде мова в розділі "Рамки фрейму".

Зони прокручування фреймів

Якщо вміст фрейму досить великий, то автоматично створюються смуги прокручування фрейму. Іноді це псує зовнішній вигляд сторінки. Для керування смугами прокручування використовується параметр SCROLLING:

<FRAME SCROLLING="YES|NO|AUTO">

У цього параметра може бути три значення: YES, NO і AUTO. Якщо в дескрипторі <FRAME> параметр SCROLLING не зазначений, то йому приписується значення AUTO. При встановленні значення YES смуга прокручування встановлюється, а значення NO обумовлює відсутність смуги прокручування. Наприклад, у наступному фреймі буде утворена смуга прокручування:

<FRAME SCROLLING="YES">

Змінарозмірів фрейму

За замовчуванням користувачу надається можливість змінювати розмір фреймів, але при цьому він може зіпсувати чудовий дизайн сторінки. Тому користувачам як правило забороняється зміна розмірів фреймів; для цього використовується параметр NORESIZE дескриптора <FRAME>:

<FRAME NORESIZE>

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

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

Рамки фрейму

Зовнішній вигляд рамок фреймової структури визначається параметрами BORDER, FRAMEBORDER і BORDERCOLOR.

Параметр BORDER використовується тільки в дескрипторі FRAMESET. Він встановлює ширину всіх рамок фреймової структури. Його значення вказується в пікселях:

<FRAMESET BORDER="5">

У цьому прикладі ширина рамки буде дорівнювати - 5 пікселaм. Можна задати параметру BORDER значення 0, тоді усі фрейми структури будуть відображатися без рамок.

За замовчуванням (тобто в тому випадку, коли в дескрипторі FRAMESET цей параметр не зазначений) параметру BORDER встановлюється значення, рівне 5 пікселям

Параметр FRAMEBORDER використовується як у дескрипторі <FRAMESET>, так і в дескрипторі <FRAME>. У нього може бути два значення — YES і NO. У першому випадку відображається тривимірна рамка, а в другому — рамка невидима тобто відображена тим же кольором, що і колір фону.

За замовчуванням параметру FRAMEBORDER задається значення YES, і в браузерах відображається тривимірна рамка.

Для створення сторінки, на якій у всіх фреймів не буде рамок, в дескрипторі FRAMESET треба встановити FRAMEBORDER="NO" і BORDER="0".

Параметр BORDERCOLOR використовується як у дескрипторі <FRAMESET>, так і в дескрипторі <FRAME>. Йому привласнюється значення імені чи кольору шестнадцяткове RGB-значення:

<FRAMESET BORDERCOLOR="red" ROWS="*,*">

  <FRAME SRC="info.htm" BORDERCOLOR="#FF00FF">

  <FRAME SRC="info.htm">

</FRAMESET>

У цьому прикладі в зовнішньому дескрипторі <FRAMESET> для параметра BORDERCOLOR встановлене значення red — ім'я кольору, що розуміється більшістю браузерів. Але в наступному дескрипторі <FRAME> для параметра BORDERCOLOR встановлене значення #FF00FF (відповідне пурпурному кольору). Пріоритет має визначення на більш низькому рівні. Хоча для рамки фреймової структури встановлений червоний колір, колір рамки першого фрейму буде пурпурним. У сусідніх фреймів, де параметр BORDERCOLOR не визначався, колір сторін рамки, що прилягають до цього фрейму, буде червоним, а колір інших сторін залишиться пурпурним.

Якщо в сусідніх фреймах, що мають однаковий пріоритет, визначити різні кольори рамки, то жоден з цих кольорів не одержить пріоритет, і колір буде визначатися на більш високому рівні в дескрипторі FRAMESET.

На мал. 6 показано приклад використання параметрів BORDER, FRAMEBORDER і BORDERCOLOR для керування рамками фрейму. Єдиним фреймом, колір рамки якого збігається з кольором, встановленим параметром BORDERCOLOR у зовнішній фреймовій структурі, є правий верхній фрейм, оскільки тільки в нього немає спільної границі з лівим середнім фреймом, у якому колір перевизначається. Фактично, у правого центрального фрейму колір рамки ліворуч теж повинний бути червоним, але параметр FRAMEBORDER="NO" обумовлює відсутність рамки в тім місці, де він стикається з центральним фреймом. Взаємодія цих параметрів досить складнa, і при їхньому використанні часто виникають неоднозначності, обумовлені циклічними залежностями.

Мал. 6. HTML-код цієї структури показаний у верхньому фреймі

Подивитись роботу прикладу

У дескриптора <FRAME> є ще два параметри: ONLOAD і ONUNLOAD. Вони використовуються разом з мовами сценаріїв VBScript і JavaScript і вказують, який сценарій запускається при його вивантаженні, при завантаженні фрейму чи з фреймової структури .

Робота з гіперпосиланнями  

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

Присвоєння імен і завантаження фреймів

За допомогою параметра NAME фрейму привласнюється ім'я, яке можна використовувати для посилання на фрейм, звичайно з інших фреймів тієї ж структури. Наприклад:

<FRAME SRC="info.html" NAME="Joe">

Фрейму привласнюється ім'я Joe, якe можна використовувати в посиланні:

<A HREF=="inoreinfo.htm" TARGET="Joe">Для переходу клацнути тут </А>

У гіпертекстовому посиланні використовується параметр TARGET, якому посилається  ім'я фрейму. При виборі цього посилання вміст фрейму з ім'ям Joe, що зберігається у файлі info.html, заміняється на уміст файлу moreinfo.html. Якщо параметр TARGET не зазначений, то при виборі посилання уміст файлу, зазначеного в параметрі HREF, відображається в поточному чи вікні чи фреймі. А якщо параметр TARGET зазначений, то уміст файлу, зазначеного в параметрі HREF, відображається в вікні фрейму, зазначеному в параметрі TARGET. Це основне положення, яке треба знати для створення систем переміщення по фреймах. Звичайно, крім нього існують ще деякі цікаві особливості.

Дозволені імена

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

Імена фреймів повинні складатися з букв і цифр. Як перший символ імені фрейму не можна використовувати символ підкреслення (_). Інших обмежень на імена неіснує.

У HTML зарезервовані чотири неявних іменi, що починаються із символу підкреслення. Вони представлені в таблиці. Всі інші імена, що починаються з символу підкреслення, ігноруються.Ім'я Опис

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

_self Завантажує документ у поточне вікно

_parent Завантажує документ у вікно батьківської фреймової структури. Якщо такий не мається, то це ім'я еквівалентне імені _self

_top Завантажує документ у вікно фреймової структури верхнього рівня стосовно даного фрейму. Якщо сам фрейм є верхнім, то це ім'я еквівалентне імені _self

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

<A HREF="stuff.html" TARGET="_blank">

Якщо у фреймі міститься приведене далі посилання, то при клацані по ньому стирається фрейм, у якому знаходилося це посилання, і його вміст змінюється на документ, що зберігається у файлі stuff.html.

<А HREF="stuff.html" TARGET="_self">

Якщо у фреймі міститься посилання <А HREF="stuff.htm" TARGET="_parent">, то при його виклику фреймова структура, у якій міститься фрейм із посиланням, заміняється на документ, що зберігається у файлі stuff.html.

Якщо у фреймі міститься посилання <А HREF="stuff.html TARGET="_top">, то при його виклику усе вікно браузера заміняється на документ, що зберігається у файлі stuff.html.

Параметр TARGET можна використовувати не тільки в гіперпосиланнях з дескрипторами <А> чи елементами прив'язки. Його можна використовувати також у дескрипторах <AREA>, <FORM> і <BASE>, а крім того для розширення використання фреймів з іменами. Варто пам'ятати, що при використанні параметра TARGET у дескрипторі <А> можна привласнювати імена вікнам. Поряд з іменами фреймів наявність імен вікон відкриває нові можливості в способах переміщення по HTML-документах.

 Одночасне відновлення декількох фреймів  

 Для зміни умісту фрейму досить клацнути на посилання, що знаходиться в ньому. Спочатку при створенні фрейму, що служить елементом вибору, у дескрипторі <FRAME> йому привласнюється ім'я за допомогою параметра NAME. Потім при визначенні посилання в дескрипторі <А> використовується параметр TARGET:

<FRAME SRC="info.html" NAME="Joe">

<A HREF="moreinfo.htm" TARGET="Joe"> Для переходу клацнути тут</А>

Перший рядок коду використовується для визначення фрейму, а другий рядок використовується в документі, що посилається на перший документ.

Як уже було показано, при використанні спеціальних неявних імен як об'єкти вибору можна встановлювати фрейми і фреймові структури, зв'язані певним чином із фреймом, що містить посилання.

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

Для цього варто створити фреймову підструктуру, що міститься в окремому файлі, як це було зроблено в прикладі, показаному на мал. 5. Там спочатку визначався HTML-документ із вкладеними фреймовими структурами:

Потім вкладена фреймова структура вмішується в окремий файл. Нижче показаний первісний файл, у якому вкладена фреймова структура замінена визначенням фрейму, що вказує на другий файл, nested.htm. У даному випадку за допомогою параметра name цьому фрейму привласнюється ім'я Inner:

Зауважимо, що файл останнього фрейму був перейменований у TestLink.html. У цьому файлі міститься посилання, що перевіряється. От як виглядає файл nested.html, що завантажується у фрейм по імені inner:

Файл нижнього фрейму містить файл TestLink.html:

Фреймова структура, створена цими двома файлами (і зв'язаними з ними файлами вмісту документів) подана на мал. 7.

Мал. 7. От як виглядає сторінка, на якій можна одним клацанням миші змінювати два фрейми

При клацанні на розташованому у нижньому фреймі посиланню Click me у центральній фреймовій структурі заміняються два фрейми, визначені у файлі- nested.html. Замість них з'являється документ NewStuff.html:

При клацанні на посиланні вікно браузера приймає вид, показаний на мал.8. При одному клацанні два центральних фрейми були замінені одним новим фреймом. З такою же легкістю можна замінити їх на два нових фрейми того ж чи іншого розміру, а також на будь-яку іншу фреймову структуру. Для цього треба усього лише визначити цю нову структуру в новому файлі, NewStuff.html.

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

Мал. 8. При клацанні на посилання центральна фреймова структура заміняється одним фреймом, уміст якого визначається в окремому файлі

Подивитись роботу прикладу

 Форми  

 Для чого потрібні форми

Робота з тегами форм

Тег <FORM>

Тег <ТЕХТАRЕА>

Тег <SELECT>

Тег <INPUT>

Визначення типу поля введення за допомогою параметра TYPE

ТЕХТ

PASSWORD

СНЕСКВОХ

RADIO

RESET

SUBMIT

Розробка форм

Використання тегу розриву рядка

Примусове розташування полів по рядках

Великі поля введення

Використання для вирівнювання форм дескриптора

відформатованого тексту

Використання таблиць для вирівнювання форм

Використання дескриптора абзацу

для розділення частин форми

Використання дескрипторів списків

Формування відступів за допомогою списків визначень

Використання впорядкованих списків для нумерації полів введення

Компонування прапорців і перемикачів

Розміщення прапорців і перемикачів по горизонталі

Списки перемикачів

Створення сітки

Документ з декількома формами

Спільне використання форм і таблиць

Заключні зауваження з приводу компонування форми

Доповнення в HTML 4

Нові параметри

Нові дескриптори форм, що з'явилися в HTML 4.0

Для чого потрібні форми.

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

Форма являє собою кілька полів, де користувач може ввести деяку інформацію, або вибрати якусь опцію. Після того як користувач відправить інформацію, вона обробляється програмою (скриптом), розміщеною на сервері. Скрипт – це коротка програма, спеціально створена для обробки кожної форми.

Робота з тегами форм

У HTML існує три тега для створення різного типу полів в формі: <TEXTAREA>, <SELECT> і <INPUT>. Будь-яка їх кількість може бути розміщена в контейнері між тегами <FORM> і </FORM>. Нижче наведено їх короткий опис (детальніше вони будуть розглянуті у відповідних розділах цієї теми):<TEXTAREA> Визначає поле, в яке користувач вводить багаторядкову текстову інформацію.

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

<INPUT> Забезпечує деякі інші види введення інформації: введення одного рядка тексту, установку і скидання прапорців (check boxes), вибір перемикача (radio buttons) і натиснення кнопки для відправки даних або очистки форми.

 

Тег <FORM>  

 Цим тегом починається кожна форма. У ньому треба визначити два параметра, вказуючи скрипт, що використовується і метод відправлення даних:  ACTION Визначає URL, який прийме і обробить дані форми. Якщо цей атрибут не визначений, дані відправляються на адресу сторінки, на якій вміщена форма.

METHOD Вказує формі, як відправляти інформацію відповідній програмі обробки (скрипту). Звичайно він набуває значення POST, тоді інформація форми посилається окремо від URL. Якщо вказане значення GET, інформація форми посилається разом з URL.

Наприклад:

<FORM METHOD= "POST" ACTION="/cgi-bin/comment_script">

. ..

</FORM>

 

У цьому прикладі дана вказівка браузерові відправити заповнену форму для обробки скриптом comment_script, який розташовано в каталозі cgi-bin вашого сервера, і використати метод відправки POST.

На WEB-сторінці можна розташувати будь-яке число форм, однак треба стежити за тим, щоб не вмістити одну форму в іншу. Якщо ви вставите тег < FORM> в контейнер FORM, цей рядок коду буде пропущено.

 Тег <ТЕХТАRЕА>  

 Цей тег призначений для побудови поля для введення багаторядкової текстової інформації. За допомогою параметрів ROWS і COLS цього тега можна побудувати поле будь-якого розміру. У контейнері TEXTAREA допускається розміщувати будь-який текст, який буде виведений в полі введення за замовчуванням.

Порада:

Поле TEXTAREA зручне тим, що користувач може ввести в нього будь-яку кількість інформації.

Тег <TEXTAREA> має наступні параметри: NAME Обов'язковий атрибут, що визначає назву інформації.

ROWS Встановлює висоту поля, тобто число рядків в ньому.

COLS Встановлює ширину поля, тобто довжину рядка.

Як вказувалося вище, між тегами <TEXTAREA> і </ TEXTAREA > можна розмістити текст, що виводиться в полі за замовчуванням.

Хоч параметри ROWS і COLS не є обов'язковими, вони не мають певних значень за замовчуванням (для кожного браузера ці значення різні), тому краще їх завжди вказувати.

Порада:

Всі теги форм – <TEXTAREA>, <SELECT> і <INPUT> – обов'язково повинні мати параметр NAME.

Приклад використання тега <TEXTAREA>.

Мал. 1. У поле TEXTAREA виводиться текст за замовчуванням як заздалегідь відформатований текст.

 Тег <SELECT>  

 Цей тег використовується для створення спливаючого меню або списку опцій зі смугою прокрутки. Список опцій і пункти меню розташовуються всередині контейнера SELECT. Як і тег  <TEXTAREA>, тег <SELECT> вимагає обов'язкового визначення імені в параметрі NAME. Кількість опцій вказується в параметрі SIZE. Нижче перераховані параметри тега <SELECT>:  NAME визначає назву інформації.

SIZE визначає вертикальний розмір вікна для опцій вибору. Якщо атрибут опущений або його значення дорівнює 1, виводиться спливаючий список опцій. Якщо вказане число більше одиниці, то опції виводяться у вікні з смугою прокрутки. Якщо значення атрибута більше, ніж фактична кількість елементів списку, додаються пусті рядки. При їх виборі користувачем повертаються пусті поля.

MULTIPLE цей параметр дозволяє проводити вибір відразу декількох опцій.

Порада:

Деякі програми перегляду неправильно виводять вікно зі смугою прокрутки, якщо параметр SIZE дорівнює 2 або 3. У цьому випадку краще скористатися спливаючим меню або кнопками-перемикачами тега <INPUT>.

Список опцій включається в контейнер <SELECT>; при допомозі тегiв <OPTION>. Цей тег має два параметри: VALUE вказує значення, що повертається програмі обробки (скрипту) у разі вибору опції користувачем.

SELECTED вказує на опцію, виділену за умовчанням.

Наведений у наступному прикладі і на мал. 2 і 3. Цей код вставляє в документ список під назвою network, що має чотири значення: ethernet, token16, token4 і localtalk.

Мал 2. Приклад списку, що розкривається(атрибут SIZE опущений).

Подивитися роботу прикладу

У тезі <SELECT> за замовчуваанням використовується опція Ethernet.

Якщо цей код трохи модифікувати (див. нижче), вийде вікно зі списком опцій.

Приклад списку опцій.

Ширина списку, що розкривається визначається довжиною тексту, записаного в тезі <OPTION>.

Мал.3. При використанні параметрів SIZE MULTIPLE виходить вікно зі списком опцій, які можна обрати декілька одночасно.

Подивитися роботу прикладу

Проблеми і їх вирішення:

Мені хотілося б, щоб крім можливості вибору з представлених опцій, мої читачі могли додати щось і від себе. Як це зробити?

Найкраще вивести ваші опції за допомогою списку або спливаючого меню, а одну з опцій назвати Інше. Потім нижче, використовуючи тег <INPUT> або тег <TEXTAREA>, вмістити поле для введення користувачем відповідної інформації (Див. нижче).

Мал. 4. Така форма надає користувачу можливість ввести свою власну опцію.

Подивитися роботу прикладу

Порада:

Тег <SELECT> можна використати як додатковий засіб навігації. Для цього в нього треба включити список URL-адрес. Після вибору одної з адрес і натиснення кнопки Відправити (Submit), скрипт, розміщений на вашому сервері або на машині читача, завантажить необхідну сторінку.

Тег <INPUT>  

 Тег <INPUT>, на відміну від <TEXTAREA> і <SELECT>, є непарним тегом. Він призначений для збору інформації різними способами, включаючи текстові поля, поля для введення пароля, перемикачі, прапорці, кнопки для відправки даних (Submit) і для очищення форми (Reset, Clear).

Тег <INPUT> має в своєму розпорядженні наступні параметри: NAMESIZE Вказує розмір поля введення в символах.

MAXLENGHT Визначає максимально можливе число символів, що вводяться в поле.

VALUE Для текстового поля визначає текст, що виводиться за умовчанням. Для прапорців і перемикачів вказує значення, що повертається програмі обробки. Для кнопок відправки і очищення форми визначає напис на кнопці.

CHECKED Встановлює прапорець або перемикач у включений стан за замовчуванням. З іншими типами тегів <INPUT> невикористовується.

TYPE Встановлює тип поля введення.

Визначення типу поля введення за допомогою параметра TYPE.

Параметр TYPE тега <INPUT> може приймати наступні значення:

ТЕХТ

Є значенням за замовчуванням і передбачає створення одного рядка для введення даних. Для цього типу поля введення вживаються параметри NAME (обов'язковий), SIZE, MAXLENGHT і VALUE.

Приклад використання значення TEXT параметра TYPE.

Мал.5. За допомогою значення TEXT параметра TYPE можна легко створити рядок для введення даних.

Подивитися роботу прикладу

Проблеми і їх вирішення:

Я хочу передбачити можливість введення дуже довгої URL-адреси, для якого екран може виявитися дуже вузьким. Як вирішити цю проблему?

Для цього треба встановити параметр SIZE в значення 60 – 80 (символів), а параметр MAXLENGTH не визначати зовсім, що дозволить вводити рядок будь-якої довжини, навіть якщо вона не вміщується цілком в полі введення.

PASSWORD.

Дозволяє замінювати символ пароля, що вводяться зірочками. Для цього типу поля введення використовується параметри NAME (обов'язковий), SIZE, MAXLENGHT і VALUE.

Приклад текстового вікна для введення пароля.

Мал.6. За допомогою значення PASSWORD параметра TYPE можна приховати пароль, що вводиться від сторонніх очей.

Подивитися роботу прикладу

СНЕСКВОХ

Відображає простий прапорець, який можна встановити або залишити пустим. Використовується в тих випадках, коли потрібно вибирати з двох варіантів (так - нi) і вибір більше ні від чого не залежить. Його можна використати з параметрами NAME (обов'язковий), CHECKED (за замовчуванням прапорець встановлений) і VALUE.

Приклад використання значення CHECKBOX наведено нижче, а отримана форма показана на малюнку. Прапорці використовуються в тих випадках, коли в списку одночасно можна вибрати декілька опцій.

Приклад використання прапорця

Мал.7. Для полегшення введення інформації встановлюйте прапорці, які звичайно вибираються, у включений за умовчанням стан за допомогою параметра CHECKED.

Подивитися роботу прикладу

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

RADIO

Дозволяє вибрати тільки одну з наданого числа опцій. Перемикачі можна групувати, задаючи одне і те ж значення параметра NAME (обов'язковий). Також використовуються параметри VALUE і CHECKED. Подивимося приклад використання перемикачів.

Мал. 8. Перша форма цього малюнка може бути залишена незаповненою, і значення, що повертається в такому випадку буде пустим. Ця форма, на відміну від другої, не передбачає встановленого за замовчуванням значення.

Подивитись роботу прикладу

Наступний приклад є модифікацією попереднього прикладу. Його інтерпретація програми Internet Explorer показана на мал. 9

Мал. 9. У цьому прикладі користувач має більше опцій для вибору.

Подивитись роботу прикладу

Порада:

Якщо опцій для вибору дуже багато, для економії місця краще використати тег <SELECT>.

Попередження:

Якщо при роботі зі значеннями CHECKBOX і RADIO параметра TYPE не використати параметр CHECKED, часто відповідні поля будуть повертатися пустими.

RESET

Дозволяє створити кнопку для очищення форми. Параметр VALUE може бути використаний тут для найменування цієї кнопки (за замовчуванням кнопка має напис Reset або у російськомовному варіанті Internet Explorer(Сброс ). Відповідний приклад наведено нижче і на мал. 10.

Приклад створення кнопок для очищення форми.

Мал.10 Приклад створення кнопок для очищення форми.

Подивитись роботу прикладу

SUBMIT

Використовується для створення кнопки, по натисненню якої введені дані відправляються на сервер для обробки скриптом. У параметрі VALUE може бути вказана назва для цієї кнопки (за замовчуванням – Submit Query). Приклад використання значення SUBMIT подано далі (мал.11.)

За замовчуванням напис на кнопці відправки – Submit для Microsoft Internet Explorer -  Submit Query(англомовна версія) або Подача запроса(російсько мовна версія).

Приклад створення кнопок для відправки даних.

 

Мал. 11 Приклад створення кнопок для відправки інформації.

Розробка форм.  

 Форми можуть бути як дуже простими, що містять одне-два поля для введення, так і вельми складними, що являють собою щось на зразок анкети. У міру ускладнення форм доводиться більше уваги приділяти їх компонуванню. Прагніть до того, щоб ваша форма була зрозуміла і не відлякувала користувачів великою кількістю полів, які обов'язково треба заповнити.

Використання тегу розриву рядка.

Коли ви пишете текстову частину HTML-документа, то, як правило, не задумуєтеся про перенесення слів на інший рядок – це відбувається автоматично. Зрозуміло, що при створенні форм цей варіант не підходить. Тому самий час пригадати про тег розриву рядка <BR>.

Примусове розташування полів по рядках.

Якщо ви хочете мати два поля, наприклад, Name і E-Mail Address, напишіть наступний код:

Мал. 12. Приклад форми без розриву рядка.

Подивитись роботу прикладу

Можливо, тут це непогано виглядає, однак у вікні програми перегляд вигляд може бути зовсім іншим (мал. 13). Для того щоб уникнути цієї прикрості і зробити форму більш зручною, треба передбачити примусове розташування двох полів в окремих рядках.

Приклад форми з розміщенням полів в окремих рядках.

Мал. 13. Тег <BR> дозволяє управляти розташуванням полів введення даних.

Подивитись роботу прикладу

Розташування тега <BR> між тегами полів введення інформації примушує програму перегляду зробити розрив рядка незалежно від ширини вікна.

Примітка:

Можливість розриву рядка в HTML дозволяє зменшити розміри форми. Якщо треба створити форму з великою кількістю опцій, ощадливе використання тега <BR> зробить її більш наочним і компактним.

При роботі з тегом <SELECT> пам'ятайте, що ширина вікна визначається розміром самого довгого рядка списку. Тому для економії місця користуйтеся короткими формулюваннями

Великі поля введення  

 При роботі з великими текстовими полями введення або з полем <textarea> простіше розмістити супровідний текст над полем введення і потім розбити різні області на абзаци.

Наприклад, якщо поле введення текстового рядка або опис поля дуже довгі, то мати в своєму розпорядженні їх ряд небажано. Якщо потрібно залишити місце для коментарів, то простіше і красивіше розмістити опис поля над областю введення тексту. При цьому  область введення зорово збільшується. Приклад такого розміщення наведений в прикладі, а отримана форма зображена  на мал. 13.

Мал. 14. За допомогою дескриптора розриву рядка можна розмістити опис поля над полем введення

Подивитись роботу прикладу

Більшість браузерів здійснює автоматичну перехід великого поля введення на наступний рядок, розглядаючи його як зображення. Оскільки ніколи не відомо, наскільки широким (або вузьким!) буде екран клієнта, слід самому потурбуватися про зовнішній вигляд форми. Якщо треба перенести поле введення на інший рядок, то для повної упевненості потрібно ввести дескриптор <BR>.

Використання для вирівнювання форм дескриптора відформатованого тексту  

 Звичайно багато які форми виглядають, як хаотично розташовані поля введення. Для вирівнювання текстових полів можна використати дескриптор <PRE>. При цьому між полями утвориться вільний простір.

Увага!

Якщо для вирівнювання тексту використовується дескриптор <PRE>, то не слід в ньому використовувати інші HTML-дескриптори. Вони будуть спотворювати вирівнювання елементів форми.

Нижче наведено код форми, в якій використовуються тільки дескриптори розриву рядків. Зовнішній вигляд цієї форми показаний на мал. 15.

Мал. 15. Ці поля розмішалися за допомогою дескриптора розриву рядка, тому вони хаотично розташовані.

Подивитись роботу прикладу

Якщо відформатувати текст при наборі і скористатися дескриптором <PRE>, то можна створити дуже акуратну форму. У наступному прикладі показано використання дескриптора <PRE> для розміщення полів введення, а на мал. 16 показано, як виглядає така форма.

Мал. 16. Компоновка відформатованого тексту

Подивитись роботу прикладу

МОЖЛИВІ ПРОБЛЕМИ

Чому при розміщенні відформатованого тексту в HTML-документі не здійснюється вирівнювання?

У деяких текстових редакторах різні символи мають різну ширину. При створенні HTML-документа в текстовому редакторі потрібно використати моноширинні шрифти, наприклад Courier New (в ньому всі символи, включаючи пропуски, мають однакову ширину).

Використання таблиць для вирівнювання форм  

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

У прикладі наведено код форми, яка була показана на мал. 15 і 16, але з використанням таблиць. Як буде виглядати форма в цьому випадку, можна побачити на мал. 17.

Мал. 17. За допомогою HTML-таблиць можна розміщувати поля форми

Подивитись роботу прикладу

Існують браузери, зокрема текстові, які не підтримують таблиці. Тому для відвідувачів, що мають такі браузери, потрібно включати альтернативну сторінку без таблиць.

 Використання дескрипторів списків  

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

Формування відступів за допомогою списків визначень

Дуже часто в Web можна зустріти форми замовлень на купівлю якого-небудь товару. Для визначення способу оплати можна використати дескриптори списку визначень. Розміщення деяких пунктів з відступом дозволяє привернути до них увагу і полегшити читання форми.

При створенні форматованих списків розставляйте відступи в початковому тексті документу відповідно до відступів, що розставляються броузером при його відображенні. Це полегшує читання початкового тексту і нагадує про необхідність вписати  закриваючий дескриптор списку визначень </DL>.

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

Мал. 19. За допомогою списків визначень можна виділити частину елементів вибору

Подивитись роботу прикладу

Використання впорядкованих списків для нумерації полів введення

За допомогою дескриптора <OL>  легко створити нумерований список полів введення. У наступному прикладі наведено використанням дескриптора <OL> для автоматичної нумерації полів. Отримана форма зображена на мал. 20.

Мал. 20. Використовуючи впорядковані списки, можна нумерувати поля, не вводячи їх номера вручну

 Компонування прапорців і перемикачів  

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

розміщення прапорців і перемикачів по горизонталі,

використання списку для розміщення їх по вертикалі

розміщення їх в сітці.

Розміщення прапорців і перемикачів по горизонталі

Простіше усього розташовувати прапорці по горизонталі, як наведено в наступному прикладі. Переваги цього способу простота, компактне відображення в браузері і легкість розуміння. Єдине, на що потрібно звертати увагу, це кількість елементів в рядку. Їх не повинно бути дуже багато. Якщо внаслідок зайвої кількості прапорців станеться перехід на наступний рядок, то користувачеві буде важче зрозуміти форму. Горизонтальний ряд перемикачів наведено на мал. 21.

Мал.21. Цей спосіб придатний і для розміщення прапорців опцій

Подивитись роботу прикладу

При створенні Web-сторінки з рядком перемикачів, потрібно перевірити, чи не виникає ефект переходу рядка при розмірах браузера 640х480.

Списки перемикачів

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

Мал. 22. Розібратися в такій складній формі набагато простіше, якщо елементи розміщені у вигляді списку

Подивитись роботу прикладу

Створення сітки

Складніше всього розміщувати прапорці у вигляді сітки. У наступному прикладі наведено варіант розміщення прапорців у вигляді сітки за допомогою таблиць. Змінивши в дескрипторах <INPUT> прапорці на перемикачі, подібну сітку можна створити і для перемикачів. Зовнішній вигляд цієї форми подано на мал. 23.

Мал.23. Розміщення елементів у вигляді сітки створює ясний і зрозумілий інтерфейс

Подивитись роботу прикладу

 Документ з декількома формами  

 У одному документі можна розмістити декілька форм. Часто це сприяє створенню короткого і зрозумілого документа. Прикладом використання декількох форм водному документі може служити документ, що представляє декілька методів пошуку. Для цього в кожному дескрипторі <FORM> вказується окремий сценарій, що здійснює пошук.

Якщо форма дуже велика, щоб уміститися наодному або двох екранах, то краще розбити її на декілька форм. Це полегшить її використання.

При розміщенні в документі декількох форм для полегшення сприйняття потрібно візуально розділити їх. Звичайно для цього використовується дескриптор горизонтального рядка <HR> або велике завширшки зображення в дескрипторі <IMG>, до і після цих дескрипторів потрібно розмістити дескриптор розриву рядка. Далі у прикладі показано, як розділити три форми за допомогою дескриптора <HR>. Результат можна побачити на мал.24.

Мал.24. Якщо різні форми відділені один від одного горизонтальними лініями, то відвідувачеві легше в них орієнтуватися

Подивитись роботу прикладу

МОЖЛИВІ ПРОБЛЕМИ

Я розмістив в документі дві форми, але бачу тільки одну. Що сталося з другою?

Треба перевірити, чи був поставлений закриваючий дескриптор </FORM> для першої форми. якщо його немає, то другий дескриптор <FORM> буде проігноровано.

Спільне використання форм і таблиць  

 Як вже відмічалося, використання форм спільно з HTML-таблицями дозволяє ефективно управляти розміщенням полів введення. Нижче наведено код адресної форми, в яку для вирівнювання полів введення використана таблиця. Отримана Web-сторінка показана на мал. 25.

Мал. 25. Оскільки за допомогою таблиць можна розміщувати елементи послідовно і різними способами вирівнювати їх, таблиці зручно використати для розмітки форм

Подивитись роботу прикладу

Можна піти далі і включити в форму інші елементи, наприклад прапорці і перемикачі, надаючи тим самим користувачеві більше варіантів вибору. Код форми для введення користувачем домашньої або службової адреси представлено нижче. Отримана Web-сторінка показана на мал. 26.

Мал. 26. За допомогою HTML-таблиць можна групувати різні поля введення

Подивитись роботу прикладу

На мал. 27 показаний поліпшений варіант адресної форми, приведеної на мал. 25 і 26, в якій перемикачі замінені на кнопки подачі запиту. Це дає користувачеві можливість вводити інформацію в форму, а потім вказувати адресу, які надана перевага , натиснувши на кнопку подачі запиту. У коді показано, як за допомогою параметра NAME визначити вибрану кнопку подачі запиту.

Мал. 27. Можливості розміщення форм, що надаються HTML-таблицями, обмежені тільки фантазією автора

Подивитись роботу прикладу

Заключні зауваження з приводу компонування форми

При створенні форми краще розміщувати її на одній сторінці. Більш того через неможливість проконтролювати браузери відвідувачів потрібно виконувати наступні вимоги.

Якщо форма невелика, то треба умістити її в 14 рядків. При цьому в більшості браузерів вона уміститься на одній сторінці. Цей спосіб не завжди спрацьовує, але частіше за все він допомагає створити компактну сторінку, що легко читається. Щоб зробити сторінку компактнішою, замість використання великого числа прапорців і перемикачів краще застосувати дескриптор <SELECT>, привласнивши параметру SIZE значення 1 (меню, що випадає), або 3, або 4 (невелике вікно, що прокручується для декількох елементів).

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

Поля форми повинні бути розміщені логічно. Ця очевидна вимога, але про неї часто забувають.

Перш ніж створювати форму, потрібно ретельно обдумати її. Якщо заздалегідь представити, які елементи треба в ній розмістити, компонування пройде набагато швидше.


 

А также другие работы, которые могут Вас заинтересовать

25309. Законы раздражения 44 KB
  Механизм раздражающего действия тока при всех видах стимулов в принципе одинаков однако в наиболее отчетливой форме он выявляется при использовании постоянного тока прямоугольной формы. При использовании в качестве раздражителя электрического тока порог выражается в единицах силы тока или напряжения. Существует два способа подведения электрического тока к ткани: внеклеточный и внутриклеточный. Недостаток этого метода заключается в значительном ветвлении тока: только часть его проходит через мембраны клеток часть же ответвляется в...
25310. Строение и классификация нейронов 35.5 KB
  Место отхождения аксона от тела нервной клетки называют аксонным холмиком. Дендриты это многочисленные ветвящиеся отростки функция которых состоит в восприятии импульсов приходящих от других нейронов и проведении возбуждения к телу нервной клетки. В центральной нервной системе тела нейронов сосредоточены в сером веществе больших полушарий головного мозга подкорковых образований мозжечка мозгового ствола и спинного мозга.
25311. Строение и работа синапсов 28 KB
  Они образуются концевыми разветвлениями нейрона на теле или отростках другого нейрона. В структуре синапса различают три элемента: 1пресинаптическую мембрану образованную утолщением мембраны конечной веточки аксона; 2синаптическую щель между нейронами; 3постсинаптическую мембрану утолщение прилегающей поверхности следующего нейрона. В большинстве случаев передача влияния одного нейрона на другой осуществляется химическим путем.Для возбуждения нейрона необходимо чтобы ВПСП достиг порогового уровня.
25312. Рефлекс. Рефлекторный процесс 63.5 KB
  У животных обладающих нервной системой развился особый тип реакций рефлексы. Рефлексы это реакции организма происходящие при обязательном участии нервной системы в ответ на раздражение воспринимающих нервных окончаний рецепторов. Павлова делят на две большие группы: на рефлексы безусловные и условные. Безусловные рефлексы это врожденные наследственно передающиеся реакции организма.
25313. Свойства нервных центров 39 KB
  Проведение волны возбуждения от одного нейрона к другому через синапс происходит в большинстве нервных клеток химическим путем с помощью медиатора а медиатор содержится лишь в пресинаптической части синапса и отсутствует в постсинаптической мембране. В связи с этим поток нервных импульсов в рефлекторной дуге имеет определенное направление от афферентных нейронов к вставочным и затем к эфферентным мотонейронам или вегетативным нейронам. Суммация возбуждения В ответ на одиночную афферентную волну идущую от рецепторов к нейронам в...
25314. Торможение в центральной нервной системе 28.5 KB
  Сеченовым опыт: у лягушки делали разрез головного мозга на уровне зрительных бугров и удаляли большие полушария после этого измеряли время рефлекса отдергивания задних лапок при погружении их в раствор серной кислоты.раздражение на эту область мозга то время рефлекса резко удлиняется. На основании этого он пришел к заключению что в таламической области мозга у лягушки существуют нервные центры оказывающие тормозяшие влияния на спинномозговые рефлексы. мозга наряду с возбуждающими нейронами существуют и тормозящие аксоны кот.
25315. Строение мышечного волокна 32 KB
  В состав волокна входят его оболочка сарколемма жидкое содержимое саркоплазма ядро митохондрии рибосомы сократительные элементы миофибриллы а также замкнутая система продольных трубочек и цистерн расположенных вдоль миофибрилл и содержащих ионы Са2 саркоплазматический ретикулум. Поверхностная мембрана клетки через равные промежутки образует поперечные трубочки входящие внутрь мышечного волокна по которым внутрь клетки проникает потенциал действия при ее возбуждении. Миофибриллы тонкие волокна содержащие 2 вида...
25316. Физиология спинного мозга 30 KB
  В составе серого вещества спинного мозга человека насчитывают около 13. Из них основную массу 97 представляют промежуточные клетки вставочные или интернейроны которые обеспечивают сложные процессы координации внутри спинного мозга. Среди мотонейронов спинного мозга выделяют крупные альфамотонейроны имелкие гаммамотонейроны.
25317. Значение промежуточного мозга 33 KB
  Она формирует положительные и отрицательные эмоции со всеми двигательными вегетативными и гормональными их компонентами. Электрические раздражения различных участков лимбической системы через вживленные электроды выявили наличие центров удовольствия формирующих положительные эмоции и неудовольствия формирующих отрицательные эмоции. ФИЗИОЛОГИЯ ЭМОЦИЙ Эмоции это выражение реакции возбуждения от фр. Если этой мобилизации оказывается недостаточно для отражения опасности или удовлетворения внутренней потребности вспыхивают стенические...