Література для самоосвіти:2, 7, 8

Питання для самоконтролю:

1. Що таке гіперпосилання?

2. Що таке гіпертекст?

3. Що таке web–документ?

4. Для чого призначена програма–браузер?

5. Що таке web–вузол (web–сайт)?

6. Яка структура простого web–документа?

7. Для чого призначена мова HTML?

8. Що таке тег і які є теги?

9. Які параметри може мати тег BODY?

10. Який тег позначає початок нового абзацу?

11. Які теги позначають жирний, курсивний і підкреслений шрифти?

12. Які теги призначені для вирівнювання елементів на сторінці?

HTML: ОФОРМЛЕННЯ ТЕКСТУ

· Параметри шрифту

· Списки

· Таблиці

· Графічні об’єкти

· Види адрес

· Гіперпосилання

· Динамічні ефекти

1. Тег задання параметрів шрифту FONT. Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT із параметрами FACE, SIZE та COLOR, наприклад,

<FONT FACE = "Decor, Arbat, Kudriashov" SIZE = +2 COLOR = "red"> Вміст контейнера (текст) </FONT>

Дія тега. Якщо на комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до цього тексту, інакше Браузер застосує шрифт Arbat чи Kudriashov, або деякий свій стандартний шрифт, наприклад Times New Roman.

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

Основні кольори мають такі назви:

black - чорний	green - зелений
navy — темно-синій	teal - бірюзовий
silver - сірий	lime - яскраво-зелений
blue - синій	aqua - блакитний
maroon - малиновий	olive - темно-зелений
purple - бузковий	gray - темно-сірий
red - червоний	yellow - жовтий
fushsia - рожевий	white - білий

Різних можливих відтінків цих кольорів є 16 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кольору має код #ff7800.

Приклад 1. Розгляньте html–файл (file3.htm)

<HTML>

</HEAD>

<H2> Це web–сторінка Світлани Марущак</Н2> <HR>

<CENTER> <В>Привіт!</В>

Мене звати <В> Світлана </В>

</CENTER><P>

Я навчаюся в 11<SUP><I>мy</I></SUP> класі середньої школи <І> № 75 міста Львова </І>. Мені 16 років. Мої улюблені предмети: інформатика, англійська мова, історія. Я люблю слухати гарну музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах узимку, ходити на дискотеку будь-якої пори року. <BR>

Я навчаюся на відмінно. Мрію вступити на навчання в Національний університет "Львівська політехніка ". <P>

<CENTER>Колись тут буде моя фотографія. </CENTER> <P> Моя адреса: <В><І>79054, Львів-54, п.с. 580 </І> </В> <HR> </BODY>

</HTML>

Рис. 8.1. Відображення файлу file3.htm у браузері Зауваження.

У тексті використано так званий мнемо-код &quot, який відобразить на екрані лапки. Замість мнемо-коду можна використати числовий код &#34. Коди інших спецсимволів (<, >, & тощо) можна знайти у довідниках. Адреси можна записувати в парному тезі <ADDRESS> ... </ADDRESS>.

2. Створення списків. Є три типи списків: ненумерований, нумерований, тлумачення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад <LH> Це заголовок списку</LH>.

Ненумерований список утворюють за допомогою парного тега <UL> ...</UL> і одинарних тегів <LI>, наприклад, так:

<LH> Мої улюблені предмети :</LH> <UL>

<LI>інформатика

<LI>англійська мова

<LI>історія

</UL>

На екрані отримаємо:

Мої улюблені предмети:

· інформатика

· англійська

· мова історія

Нумерований список створюють за допомогою парного тега <OL>... </OL> з необов'язковим параметром TYPE і одинарних тегів <LI> так:

<LH> Мої улюблені предмети :</LH>

<LI>Інформатика <LI>

Англійська мова

<LI>Історія

</OL>

На екрані отримаємо:

Мої улюблені предмети:

1. Інформатика

2. Англійська мова

3. Історія

Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv, ...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" - латинськими малими (a, b, c, d, ...) чи великими (А, В, С, ...) літерами.

Список тлумачень використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега <DL>...</DL> і двох одинарних тегів <DT> і <DD> так:

<LH>Заголовок</LH>

<DL> <DT> термін

<DD> тлумачення 1

<DD> тлумачення 2 ...

</DL>

Наприклад,

<LН>Я знаю такі нові терміни: </LH>

<DL> <DT> HTML

<DD> <I>мова для розмічування гіпертекстових web–сторінок</І>

<DT> Браузер

<DD> <I>програма для перегляду web–документів</I>

<DT> тег <DD> <I>засіб для записування команд мовою HTML</I>

</DL>

На екрані отримаємо:

Я знаю такі нові терміни:

HTML

мова для розмічування гіпертекстових web–сторінок

браузер

програма для перегляду web–документів

тег

засіб для записування команд мовою HTML

3. Створення таблиць. У звичайних текстових редакторах таблиці використовують для наочного подання числової чи текстової інформації. У web–дизайні таблиці відіграють більшу роль. Часто їх використовують для позиціонування графічних чи інших об'єктів на екрані. Такі таблиці утворюють з невидимими межами (рамками), а в клітинках розташовують картинки, тексти тощо.

Таблиці створюють за допомогою таких тегів:

<ТС> Заголовок таблиці </ТС> Тут пишемо теги для заповнення клітинок таблиці рядок за рядком

</TABLE>

Для заповнення клітинок таблиці використовують такі парні теги (закриваючі теги можна не зазначати):

<TR>...</TR>	Формують рядок таблиці
<ТН>текст</ТН>	Формують клітинку з заголовком рядка чи стовпця
<TD>Teкст</TD>	Формують текст кожної клітинки.

Заголовки рядків і стовпців виводитимуться товстішим шрифтом.

Приклад 2. Створимо на web–сторінці таблицю-витяг з табеля успішності Світлани за три перші чверті з трьох предметів: інформатики, геометрії та алгебри:

<TC><I> Мої оцінки за три чверті: </І></ТС>

<TH>І чверть </TH>

<TH>ІІ чверть</TH>

<TH>ІІІ чверть</TH>

</TR>

<TR> <TH ALIGN="left">Інформатика</ТН>

</TR>

<TR> <TH ALIGN="left">Геометрія</TH>

</TR> <TR>

<TH ALIGN="Left">Алгебра</TH>

</TR>

</TABLE>

</CENTER><P>

Рис. 8.2. Вигляд таблиці у браузері

Щоб об'єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD> записують параметр ROWSPAN = 2. А щоб об'єднати у стовпці дві клітинки в одну, використовують параметр COLSPAN=2.

Колір рамки таблиці задають параметром BORDERCOLOR = "колір рамки", а колір тла клітинок - параметром BGCOLOR="колір фону". Товщину рамки в пікселях задають параметром BORDER="товщина рамки, 3". Якщо значення параметра - число нуль або параметра немає, то рамка буде невидимою.

4. Вирівнювання елементів. За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у клітинках таблиці, Браузер вирівнює до лівого краю екрана чи клітинки. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати до центру екрана чи до правого краю. Таблиці вирівнюють відносно екрана або тексту, який її облямовує. Текст у клітинках таблиці вирівнюють до центру чи до країв у горизонтальному чи вертикальному напрямках. Для цього до об'єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або у відповідних тегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" - зліва, "center" - до центру, "right" - справа, "top" - угорі, "middle" - посередині, "bottom" - унизу. Значення "top", "middle", "bottom" може мати також параметр VALIGN, який забезпечує вирівнювання у вертикальному напрямку.

Для вдалого розташування таблиць чи рисунків варто поекспериментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселах або відсотках до розмірів усього екрана, наприклад, <TABLE WIDTH=300> задає ширину таблиці 300 пікселів; <TABLE WIDTH=50%> задає ширину таблиці півсторінки у горизонтальному напрямку.

Параметр SUMMARY="текст'' використовують для інформації про призначення і структуру таблиці для клієнсь-ких браузерів, що здійснюють невізуальне подання сторінки для осіб з фізичними обмеженнями, синтезують звук чи базуються на принципах азбуки Бройля.

Щоб створити заголовок таблиці, застосовують елемент CAPTION з параметром ALLIGN, наприклад, так: <CAPTION ALLIGN="bottom">Цe моя таблиця </CAPTION>.

Параметри WIDTH і SIZE застосовують також для проведення ліній різної довжини і товщини, наприклад, тег <HR SIZE=30 COLOR="red"> замість звичайної лінії дає червону смугу товщиною 30 пікселів.

Довідка. Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега <PRE>...</PRE>. Текст у середині цього тега оформляють засобами табуляції. Броу-зер такий текст переформатовувати не буде.

Графічні об'єкти і гіперпосилання

1. Вставляння графічних і відеофайлів. Графічні зображення, такі як фотографії, картинки, піктограми тощо, зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на web–сторінці за допомогою тега <IMG> з параметрами:

Дія тега. Обов'язковим є лише перший параметр SRC. Альтернативний текст - це текст, який виводитиметься замість картинки, якщо Браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT - її розміри за шириною і висотою в пікселях або відсотках.

Зображення можна подати в рамці. Це рекомендують робити, якщо його використовуватимуть як гіперпосилання.

Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселях".

Праворуч і ліворуч від картинки, яку обгортає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".

За допомогою тега IMG можна вставити також відео-фільм, який запускатиметься в момент відкриття web–сторінки:

<IMG DYNSRC="адреса відеофайлу">.

2.Адреси файлів. Для виклику віддалених файлів, тобто файлів, які є на серверах у мережі Інтернет, адресу записують із зазначеням назви протоколу доступу http і URL-адреси файлу, наприклад,

SRC = "http://www.polynet.lviv.ua/ourpage.htm".

Для доступу до файлів на локальному диску використовують протокол доступу file: SRC = "file:///диск:/шлях до файлу". Наприклад, SRC= "file:///d:/mycatalog/mypage.htm". Назву протоколу можна інколи не писати, наприклад, SRC = "c:/windows98/forest.bmp". Адреси, в яких повністю вказано шлях до файлу, називають абсолютними.

Якщо графічні чи інші файли є в тому ж каталозі, що основний html–файл, то достатньо зазначити лише назву файлу, наприклад, SRC = "myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього подають так: "../images/myfoto.gif". Отже, тег IMG може мати такий вигляд:

<IMG SRC="c:/windows98/forest.bmp" ALT="JIic">.

Такі адреси називають відносними.

3.Вставляння гіперпосилань. Гіперпосилання є двох видів:

1) на файл;

2) на деяке місце на певній сторінці:

початок сторінки (top),

кінець сторінки (bottom),

позначений текст.

Гіперпосилання вставляють за допомогою парного тега <А параметр>...</А>, де параметр HREF = "адреса файлу". Тут замість адреси можуть бути слова top чи bottom чи текст, що є позначкою.

Гіперпосиланням може бути текст або картинка.

Розглянемо випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звуть Світлана" слово "Світлана" потрібно зробити гіперпосиланням на файл "file2.htm" чи "newinf.htm", що містить додаткові відомості про Світлану. Це роблять так:

Мене звуть <А HREF = "newinf.htm"> Світлана</А>.

У наслідок цього на web–сторінці слово Світлана буде підкреслене і зображене іншим кольором.

Параметри LINK, VLINK, ALINK тега BODY. Колір гіперпосилання визначають у тезі BODY параметрами:

LINK = "колір"	Колір гіперпосилання
VLINK="колір"	Змінює колір гіперпосилання після першого його використання
ALINK = "колір"	Змінює колір активізованого гіперпосилання

Як деяке графічне зображення зробити гіперпосиланням? Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб фотографія Світлани, що є у файлі "svitlana.gif", була в рамці й стала гіперпосиланням на файл newinf.htm, пишуть так:

<А HREF = "newinf.htm">

</A>

Клацнувши на web–сторінці на фотографії Світлани, відкриємо файл newinf.htm з додатковою інформацією про неї.

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

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

<А NАМЕ="#початок"></А>.

Аналогічно позначають деяке місце в кінці файлу:

<А NАМЕ="#кінець"></А>.

Якір можна кинути в будь-якому місці тексту так:

<А NАМЕ="#мояпозначка"></А>.

Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так:

<А HREF= "#початок" або "#кінець" або "#моя позначка"> текст гіперпосилання </А>.

Якщо одна сторінка займає декілька екранів, то в кінці сторінки можна вставити гіперпосилання для переходу на початок, наприклад, розглянемо фрагмент тексту: А тепер можете перейти <А HREF="#початок"> на початок </А> сторінки. На екрані браузера отримаємо речення з гіперпосиланням:

А тепер можна перейти на початок сторінки.

4. Вставляння звуку і відеозображення. Важливо пам'ятати, що звукові файли мають розширення назв au, wav, mid, midi, ra, а відеофайли - avi, vivo, mpeg. Щоб вставити звук чи відео, достатньо як значення параметра HREF у тезі гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад, так:

Тепер <А HREF="mysound.wav"> послухайте мене (150К) </А>

Текст «послухайте мене (150K)» стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах.

Щоб звуковий чи відеоефект повторювався декілька разів, у тезі <А> використовують параметр LOOP=n, де п -кількість повторень.

Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег <BGSOUND SRC = "адреса звукового файлу">.

Інший спосіб - використайте тег <EMBED SRC="адреса звукового файлу"> і, крім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, припинення звучання, продовження тощо.

5. Поняття про динамічні ефекти. Динамічними називаються ефекти, коли графічні зображення на web–сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст "біжить" уздовж екрана тощо.

Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT ="висота в пікселях" і тло BGCOLOR ="колір тла". Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE>, а саме:

<MARQUEE BGCOLOR="green" HEIGHT = 40> Хай завжди буде coнцe!</MARQUEE>

Текст "Хай завжди буде сонце!" буде рухатись в смузі справа наліво, заходитиме за край екрана і з'являтиметься справа. Цей тег варто застосовувати до заголовків сторінки.

Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide".

Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік.

Обмеження кількості проходів задається параметром LOOP= n, де п - кількість проходів.

Смугу можна відцентрувати за допомогою параметрів HSPASE і VSPACE.

Швидкість руху задає параметр SCROLLAMOUNT= n, де п - конкретне значення, яке вибирають з діапазону від 1 (повільно) до 10 (швидко).

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

Література для самоосвіти: 2, 7, 8.

Питання для самоконтролю:

1. Яке призначення тега FONT?

2. Яких значень можуть набувати параметри тега FONT?

3. Які є типи списків?

4. Як створити ненумерований список?

5. Як створити нумерований список?

6. Як створити список означень?

7. Яке призначення тега TABLE?

8. Які параметри може мати тег TABLE?

9. Які теги формують у таблиці рядки, клітинки-заголовки і звичайні клітинки?

10. Як у таблиці об'єднати декілька клітинок в одну?

11. Який параметр використовують для вирівнювання елементів?

12. Яка особливість пари тегів <PRE>...</PRE>?

13. Як вставити графічне зображення у web–сторінку?

14. Як вставити відеофільм у web–сторінку?

15. Які параметри може мати тег IMG?

16. За допомогою якого тега вставляють гіперпосилання?

17. Яке призначення параметрів LINK, VLINK, ALINK?

18. Як деяке графічне зображення зробити гіперпосиланням?

19. Які є види посилань у межах одної web–сторінки?

20. Що таке якоря?

21. Як вставити у web–документ звук чи відеозображення?

22. Як запустити звук одночасно з відкриванням сторінки?

23. Як створити динамічний ефект рухомого тексту?

24. Які ви знаєте параметри рухомого тексту?

HTML: ФРЕЙМИ, НАВІГАЦІЙНІ КАРТИ

Поняття про фрейми

Файлова структура сайту з фреймами

Графічна навігаційна панель

Опис навігаційної карти

Гарячі області карти

Фрейми

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

Наприклад, типовим є сайт, де вікно браузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вікна браузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій - вибрану користувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лівий фрейм називають навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна браузера, справа чи де завгодно. Часто у верхній частині створюють третій вузький фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.

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

2.Файлова структура сайту з фреймами. Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html–файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший - правого. Основний файл призначений для опису розташування фреймів у вікні браузера. Тут описується структура фреймів, зазначаються адреси html–файлів для кожного фрейму, а також пояснюється, що має відображатися на екрані, якщо якийсь давній Браузер не підтримує фреймів.

3.Основний html–файл. Оскільки основний файл запускає сайт, то його прийнято називати index.html.

Приклад 1. Розглянемо типовий вигляд основного файла:

<HTML>

<HEAD>

<ТІТLЕ>Це мій сайт з фреймами </TITLE>

</HEAD>

<FRAME SRC="leftframe.html"

NAME= "left"

SCROLLING="no"

FRAMEBORDER="1"

BORDER = "15"

MARGINHEIGHT= "10"

MARGINWIDTH="10"

NORESIZE

BORDERCOLOR = "red" >

<FRAME SRC = "rightframe.html"

NAME="right"

</FRAMESET> <NOFRAME>  Вибачте, цей сайт містить фрейми. Скористайтесь іншим браузером для його перегляду. </NOFRAME>

</HTML>

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

Параметрів є два: COLS і ROWS. Параметр COLS призначений для поділу вікна на вертикальні області (колонки), а ROWS - на горизонтальні. Розміри областей задають у відсотках до всього вікна, фіксовані - у пікселях. Наприклад, COLS = "25%, 75% " означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі.

Можна писати також COLS = "1*, 3*", де 1* саме тут означає одну з чотирьох частин екрана, або COLS = "2*, З*", де 2* означає дві з п'яти вертикальних частин екрана.

У фіксованому заданні COLS = "100,*", число 100 означає 100 пікселів, а * - решту екрана.

Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в одний, наприклад, так:

</FRAMESET> </FRAMESET>

У тезі <FRAME параметри> користувач описує конкретний фрейм. Обов'язковими тут є параметр SRC зі значенням адреси стартового html–файлу і NAME, значенням якого є назва фрейму. Цю назву придумує користувач, запам'ятовує її, оскільки вона використовуватиметься далі як значення параметра TARGET тега <А>.

Призначення деяких інших параметрів такі:

SCROLLING	Задає наявність чи відсутність смуг прокручування у вікні фрейму
FRAMEBORDER	Задає наявність меж між фреймами
BORDER	Задає ширину межі у пікселях
MARGIN	Задає величину відступів зверху і від бокових меж фрейму
NORESIZE	Забороняє змінювати розміри фрейму у вікні браузера.

4. Допоміжні HTML–файли. Коли основний файл спроектовано, створюють файли для кожного фрейму. Нехай файл leftframe.html призначений для підтримки лівого фрейму і нехай він містить зміст сайту у вигляді текстових чи графічних гіперпосилань. Тег гіперпосилання має містити параметр TARGET, значенням якого є назва фрейму, що була зазначена в параметрі NAME з основного файлу. Цей параметр дає змогу пояснити браузеру, у якому фреймі слід відображати деяку сторінку сайту, що відповідає цьому гіперпосиланню. Нехай деяка сторінка має відображатися у правому фреймі. Гіперпосилання можна оформити різними способами: у вигляді звичайних текстових абзаців, заголовків, списків чи одностовпчикової таблиці.

Приклад 2. Файл leftframe.html може мати такий вигляд:

<HTML>

<HEAD> <ТІТLЕ>Це мій лівий фрейм</ТІТLЕ>

</HEAD>

<Н3> Сайт Васі Квакіна</Н3><ВR>

<Н4> <А HREF="filel.html" TARGET="right"> Моя біографія </А> <BR>

<А HREF="file2.html" TARGET="right"> Мої захоплення </А> <BR>

<А HREF="file3.html" TARGET="right"> Мої університети </А> <BR>

<А HREF="file4.html" TARGET="right"> Моя адреса </А> <BR>

</BODY>

</HTML>

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

Приклад 3. Файл right.html може мати такий вигляд:

<HTML>

<HEAD><TITLE> Це правий фрейм</ТІТLЕ>

<Н2>ЗАПРОШУЄМО НА САЙТ ВАСІ КВАКША </Н2>

</BODY>

</HTML>

На цьому проектування сайту з фреймами закінчується. Залишилося створити файли filel.html, file2.html, file3.html, file4.html тощо з описами робочих сторінок сайту подібно до того, як це робили у попередніх параграфах.

Навігаційні карти

Графічна навігаційна панель - це рисунок, окремі частини якого, так звані гарячі області, слугують гіперпосиланнями на відповідні сторінки сайту. Різновидом такої панелі є навігаційна карта.

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

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

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

2. Опис навігаційної карти. Спочатку потрібно відсканувати фотографію або створити відповідний рисунок за допомогою графічного редактора у форматі gif, jpg чи bmp.

Приклад. Розглянемо карту Мій сайт, зображену на рис. 9.1.

Рис. 9.1. Карта „Мій сайт”

Рисунок створено редактором Paint з метою демонстрації суті карти. Верхній лівий кут рисунка має координати (0,0). Перша координата горизонтальна, а інша - вертикальна. Одиниця вимірювання - піксель. Коло має радіус 50 пікселів. Центр кола знаходиться в точці з координатами (80, 110). Прямокутник із текстом Біографія має сторони завдовжки 130 і 55 пікселів. Він однозначно описується координатами двох діагонально протилежних вершин: (20, 175) і (150, 230). Прямокутник з текстом Навчання однозначно задається такими координатами (20, 260) і (150, 310), а з текстом Адреса - (20, 340) і (150, 390).

Створений графічний файл розташовують на диску і описують його у html–файлі web–сторінки за допомогою тега <IMG>. Цей тег має містити, крім уже відомих, новий параметр USEMAP = "#назва1", де назва1 - це назва карти. Наприклад,

<IMG SRC ="адреса граф, файлу" USEMAP = "mymap1">.

Тепер опишемо, як створити карту. Це роблять за допомогою тега

<МАР параметр>...</МАР>

У середині цього тега описують гарячі області карти. Тут застосовують параметр NAME, значенням якого є назва карти, у нашому випадку - #mymap1.

3. Гарячі області карти. У середині тега-контейнера <МАР>...</МАР> розташовують декілька одинарних тегів <AREA параметри>, що описують замкнені області карти, які мають служити гіперпосиланнями. Власне ці області називають гарячими. Для їхнього задання призначені такі параметри тега <AREA>:

HREF = "адреса ресурсу, який викликають"

ALT = "альтернативний текст-підказка"

SHAPE = "rect" або "circle" або "poly" або "default"

COORDS = "список координат області"

Гарячою областю може бути область, охоплена прямокутником (rect), або колом (circle), або багатокутником (poly), або все зображення (default). Список координат для прямокутника - це записані через кому координати діагонально-протилежних вершин, для кола - координати центра і значення радіуса, для багатокутника - координати всіх вершин.

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

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

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

4. Приклад html–файлу навігаційної карти. Наведемо текст html–файлу, що описує наведену вище навігаційну карту.

<HTML>

<HEAD> <TITLE>Навігаційна Kapтa</TITLE></HEAD>

<BODY>

<AREA SHAPE ="circle" COORDS ="80, 110, 50" ALT ="Моя фотографія"

HREF = "mainpage.htm">

<AREA SHAPE ="rect" COORDS ="20,175,150,230" ALT ="Моя біографія"

HREF = "biography.htm ">

<AREA SHAPE ="rect" COORDS ="20, 260, 150, 310" ALT ="Мої університети"

HREF ="studies.htm">

<AREA SHAPE = rect COORDS ="20,340,150,390" ALT ="Моя адреса"

HREF ="address.htm">