Використання фреймів
Мова 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>
Створення списків, таблиць
Для створення списків використовують теги, що задають тип списку. Нумерований список починаються тегом <OL> і завершується тегом </OL>, наприклад:
<OL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </OL> |
|
Тег <OL> може мати такі параметри:
TYPE - вид лічильника: A - великі латинські букви a - малі латинські букви I - великі римські цифри i - малі римські цифри 1 – звичайні цифри
START - встановлює число, з якого буде починатися відлік, наприклад:
<OL TYPE="I" START="8"> <LI> Вісім <LI> Дев’ять <LI> Десять <LI> Одинадцать <LI> Дванадцать </OL> |
|
Неномерований список починається тегом <UL> и завершується тегом </UL>. Кожен елемент списку починається з тегу <LI>, наприклад:
<UL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </UL> |
|
Тег <UL> може включати параметр TYPE із значеннями disc, circle, square
<UL TYPE=disc><LI> disc </UL> |
|
<UL TYPE=circle><LI> circle </UL> |
|
<UL TYPE=square><LI> square </UL> |
|
Дані значення – це зовнішній вид маркера, який за замовчуванням ставиться у вигляді диску, тобто 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 (заголовок таблиці). В принципі, це звичайна клітинка, але текст між цими тегами буде виділений напівжирним шрифтом і відцентрований.
Якщо клітинка порожня, то навколо неї рамка не малюється. Якщо рамка все ж потрібна навколо порожньої клітинки, то в неї треба ввести символьний об’єкт (non-breaking space – нерозривний пропуск). Клітинка буде порожня, а рамка навколо неї буде ( - обов’язково треба набирати малими буквами і закриватися символом «крапка з комою»).
Теги, що встановлюють шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необхідно повторювати для кожної клітинки.