Використання фреймів

Мова HTML дозволяє поділити вікно браузера на окремі секції, які називаються фреймами (рамки). Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати не залежно від решти фреймів. Браузер, який “розпізнає” фрейми, завантажує різні сторінки у різні секції свого вікна.

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

Подібну структуру має сторінка, вигляд якої подано на Рис.2.2.2

Рис.2.2.2.Поділ вікна на два фрейми

Код даної сторінки наведено нижче:

<HTML>

<HEAD>

<TITLE>Приклад фреймової структури документа</TITLE></HEAD>

<frameset cols="30%,70%">

<frame src="a1.htm">

<frame src="a2.htm">

</frameset>

</BODY>

</HTML>

Файл a1.htm

<HTML>

<HEAD>

<TITLE>Приклад фреймової структури документа</TITLE>

</HEAD>

<BODY bgcolor="silver" text="black" link="#ff0000">

<h3> На цій сторінці фреймової структури, як правило,

розміщують зміст Web-сайта</h3>

</BODY>

</HTML>

Файл a2.htm

<HTML>

<HEAD>

<TITLE>Приклад фреймової структури документа</TITLE>

</HEAD>

<BODY bgcolor="silver" text="black" link="#ff0000">

<h3> На цій сторінці фреймової структури, як правило, розміщують

вміст вибраного у змісті розділу</h3>

</BODY>

</HTML>

 

2.2.4. Створення списків, таблиць

Для створення списків використовують теги, що задають тип списку. Нумерований список починаються тегом <OL> і завершується тегом </OL>, наприклад:

<OL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </OL> 1. Один 2. Два 3. Три 4. Чотири 5. П’ять

Тег <OL> може мати такі параметри:

TYPE - вид лічильника:
A - великі латинські букви
a - малі латинські букви
I - великі римські цифри
i - малі римські цифри
1 – звичайні цифри

START - встановлює число, з якого буде починатися відлік, наприклад:

<OL TYPE="I" START="8"> <LI> Вісім <LI> Дев’ять <LI> Десять <LI> Одинадцать <LI> Дванадцать </OL> VIII. Вісім IX. Дев’ять X. Десять XI. Одинадцать XII. Дванадцать

Неномерований список починається тегом <UL> и завершується тегом </UL>. Кожен елемент списку починається з тегу <LI>, наприклад:

<UL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </UL>   oОдин oДва oТри oЧотири oП’ять

Тег <UL> може включати параметр TYPE із значеннями disc, circle, square

<UL TYPE=disc><LI> disc </UL> · disc
<UL TYPE=circle><LI> circle </UL> o circle
<UL TYPE=square><LI> square </UL> § square

Дані значення – це зовнішній вид маркера, який за замовчуванням ставиться у вигляді диску, тобто disc.

Списки визначень мають такий вид:

<DL> <DT> Термін <DD> Визначення терміну <DD> Визначення терміну <DD> Визначення терміну <DD> Визначення терміну </DL> Термін Визначення терміну Визначення терміну Визначення терміну Визначення терміну

 

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

Елементи таблиць. Таблиці будуються за принципом вкладання і вводяться на WEB-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <TABLE> …</TABLE> можуть вставлятися такі елементи:

TR – елемент створення рядка;

TD – елемент, що визначає вміст комірки даних;

TH – елемент, що визначає комірку заголовка.

Наприклад, для створення таблиці 3*2 використовується такий шаблон:

<TABLE>

<TR><TD>…. </TD><TD> … </TD></TR>

<TR><TD>…. </TD><TD> … </TD></TR>

<TR><TD>…. </TD><TD> … </TD></TR>

</TABLE>

де крапками позначений вміст кожної комірки.

Приклад таблиці:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Примітка: В даному прикладі створена таблиця з фіксованою шириною (WIDTH="200" пікселів), але краще використовувати проценти, т.я. в цьому випадку розмір таблиці буде змінюватися в залежності від розміру вікна.

 Така таблиця реалізується наступним кодом: <TABLE BORDER="2" WIDTH="200" BGCOLOR="#00FF00"> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE>

Таблиця починається тегом <TABLE> и завершується тегом </TABLE>.
Тег <TABLE> може включати такі атрибути:

Таблиця 2.2.1.

WIDTH="n" Визначає ширину таблиці в пікселях або процентах, за замовчуванням ширина таблиці визначається вмістом клітинок.
BORDER="n" Встанаолює товщину рамки. За замовчуанням n=0 – таблиця відображається без рамки.
BORDERCOLOR="#FFFFFF" Встановлює колір обрамлення, де #FFFFFF (білий) - шістнадцяткове значення кольору.
BGCOLOR="#FFFFFF" Встановлює колір фону для всієї таблиці, де #FFFFFF - шістнадцяткове значення кольору.
BACKGROUND="image.gif" Заповнює фон таблиці зображенням.
CELLSPACING="n" Визначає відстань між рамками клітинок таблиці в пікселях.
ALIGN=LEFT Визначає положення таблиці в документі. За замовчуванням таблиця притиснута до лівого краю сторінки. Допустимі значення аттрибута: LEFT (зліва), CENTER (по центру сторінки), RIGHT (зправа).
FRAME="значение" Управляє зовнішнім обрамленням таблиці і може приймати такі значення: VOID - обрамлення немає (значення за замовчуванням). ABOVE – межа тільки зверху. BELOW - межа тільки знизу. HSIDES - межа тільки зверху і знизу. VSIDES - межа тільки зліва і справа. LHS - тільки ліва межа. RHS - тільки права межа. BOX - малюються всі чотири сторони. BORDER - також всі чотири сторони.
RULES="n" Управляє лініями, що розділяють клітинки таблиці. Можливі такі значення (n): NONE – немає ліній (значення за замовчуванням). GROUPS - лінії будуть тільки між групами рядів. ROWS - тільки між рядами. COLS - тільки між колонками. ALL - між всіма рядами і колонками.

Таблиця може включати заголовок, який розміщується між тегами <CAPTION></CAPTION>. Він має бути безпосередньо після тега <TITLE>. До заголовку можна застосувати атрибут ALIGN, що визначає його положення відносно таблиці:

TOP – значення за замовчуванням, заголовок над таблицею по центру.
LEFT - заголовок над таблицею зліва.
RIGHT - заголовок над таблицею справа.
BOTTOM - заголовок під таблицею по центру.

Рядки таблиці починаються тегом <TR> и завершаються тегом </TR>, а кожна клітинка таблиці починається тегом <TD> и завершується </TD>. Дані теги можуть мати такі атрибути:

Таблиця 2.2.2.

Атрибути, що можуть застосовуватися до рядків і клітинок
ALIGN=LEFT Встановлює горизонтальне вирівнювання тексту в клітинках рядка. Може приймати значення LEFT (вирівнювання вліво), CENTER (вирівнювання по центру), RIGHT (вправо).
VALIGN=CENTER Встановлює вертикальне вирівнювання тексту в клітинках рядка. Допустимі значення: TOP (вирівнювання по верхньому краю), CENTER (вирівнювання по центру -це значення приймається за замовчуванням), BOTTOM (по нижньому краю).
BGCOLOR="#FFFFFF" Встановлює колір фону рядка або клітинки.
BACKGROUND="image.gif" Заповнює фон рядка або клітинки зображенням.
Атрибути, що можуть застосовуватися тільки до клітинок
WIDTH="n" Визначає ширину клітинки в n пікселях.
HEIGHT="n" Визначає висоту клітинки в n пікселях
COLSPAN="n" Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки.
ROWSPAN="n" Розтягує клітинки по рядку. Наприклад, <TD ROWSPAN="2" означає, що клітинка буде розтягнута на два рядки таблиці.
NOWRAP Цей атрибут показує, що текст буде розміщено в один рядок
BACKGROUND="image.gif" Заповнює фон клітинки зображенням

Крім цього, будь яка клітинка таблиці може бути визначена не тегами <TD></TD>, а тегами <TH></TH> - Table Header (заголовок таблиці). В принципі, це звичайна клітинка, але текст між цими тегами буде виділений напівжирним шрифтом і відцентрований.

Якщо клітинка порожня, то навколо неї рамка не малюється. Якщо рамка все ж потрібна навколо порожньої клітинки, то в неї треба ввести символьний об’єкт &nbsp; (non-breaking space – нерозривний пропуск). Клітинка буде порожня, а рамка навколо неї буде (&nbsp; - обов’язково треба набирати малими буквами і закриватися символом «крапка з комою»).

Теги, що встановлюють шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необхідно повторювати для кожної клітинки.