Лабораторна робота № 6
Мета: навчитися створювати веб-сторінки зі списками, таблицями, вміти форматувати таблиці.
Теоретичні відомості.
Створення списків. Є три типи списків: ненумерований, нумерований, тлумачення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад
<LH> Це заголовок списку</LН>.
Ненумерований список утворюють за допомогою парного тега <UL>...</UL> і одинарних тегів <LI>, наприклад, так:
<LH> Мої улюблені предмети:</LН>
<UL>
<LI>інформатика
<LI>англійська мова
<LI>історія
</UL>
Ненумерований список може містити параметр TYPE, який може приймати значення disk (зафарбований круг), square (квадрат), circle (порожній круг), які визначають тип маркування списку.
Нумерований список створюють за допомогою парного тега <OL>...</OL> з необов'язковими параметрами TYPE, START, VALUE і одинарних тегів <LI> так:
<LH> Мої улюблені предмети:</LН>
<OL TYPE="1">
<LI>Інформатика
<LI>Англійська мова
<LI>Історія
</OL>
Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv, ...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" - латинськими малими (a, b, c, d, ...) чи великими (А, В, С, ...) літерами.
Параметр START задає початковий номер списку, а параметр VALUE використовується для зміни конкретного значення списку. Наприклад, можна змінити нумерацію всередині списку.
<OL>
<LI>Пункт 1</LI>
<LI>Пункт 2</LI>
<LI VALUE=”1”>Пункт 1</LI>
<LI>Пункт 2</LI>
Список тлумачень використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега <DL>...</DL> і двох одинарних тегів <DT> і <DD> так:
<LН>Заголовок</LН>
<DL>
<DT> термін
<DD> тлумачення 1
</DL>
<DD> тлумачення 2
Наприклад,
<LН>Я знаю такі нові терміни :</LH>
<DL>
<DT> HTML
<DD> <i>мова для розмічування гіпертекстових web-cтopiнок</i>
<DT> броузер
<DD> <i>програма для перегляду web-документів</i>
<DT> тег
<DD> <i>засіб для записування команд мовоюHTML</I>
</DL>
На екрані у вікні броузера побачимо:
Створення таблиць. У звичайних текстових редакторах таблиці використовують для наочного подання числової чи текстової інформації. У web-дизайні таблиці відіграють більшу роль. Часто їх використовують для позиціювання графічних чи інших об'єктів на екрані. Такі таблиці утворюють з невидимими межами (рамками), а в клітинках розташовують картинки, тексти тощо.
Таблиці створюють за допомогою таких тегів:
<TABLE параметри>
<CAPTION> Заголовок таблиці </CAPTION>
Тут пишемо теги для заповнення клітинок таблиці рядок за рядком
</TABLE>
Для заповнення клітинок таблиці використовують такі парні теги (закриваючі теги можна не зазначати):
|
<TR>...</TR> |
Формують рядок таблиці |
|
<ТН>текст</ТН> |
Формують клітинку з заголовком рядка чи стовпця |
|
<ТD>текст</ТD> |
Формують текст кожної клітинки. |
Заголовки рядків і стовпців виводитимуться товстішим шрифтом.
Приклад. Створимо на web-сторінці таблицю-витяг табеля успішності за три перші чверті з трьох предметів: інформатики, геометрії та алгебри:
<CENTER>
<Table BORDER=3 BGCOLOR="yellow" BORDERCOLOR="green">
<CAPTION Align="bottom"><i> Мої оцінки за три чверті: </i></CAPTION>
<TR>
<th></th>
<TH>І чверть </TH>
<TH>II чверть</TH>
<TH>ІII чверть</TH>
</TR>
<TR>
<TH align="left">Інформатика</ТН>
<TD>10</TD>
<TD>12</TD>
<TD>11</TD>
</TR>
<TR>
<TH ALIGN="left">Геометрія</TH>
<TD>12</TD>
<TD>10</TD>
<TD>10</TD>
</TR>
<TR>
<TH ALIGN="left">Aлгебра</TH>
<TD>9</TD>
<TD>10</TD>
<TD>10</TD>
</TR>
</TABLE>
</CENTER>
Як така таблиця буде виглядати в броузері показано на малюнку.
Тег <TABLE> може мати багато інших додаткових параметрів:
-
Width. Задає ширину таблиці або у відсотках відносно ширини вікна броузера, або у пікселах (Width=”60%” або Width=”800”).
-
Border. Задає ширину рамки таблиці.
-
Align. Задає вирівнювання таблиці.
-
CellSpacing. Задає відстань між стінками таблиці.
-
CellSpadding. Задає відстань між границями комірки і елементами даних.
-
Rules і Frame. Визначають, які з границь повинні малюватися всередині і зовні таблиці. Атрибут Rules може приймати такі значення: None – лінії відсутні, Rows – лінії тільки між рядками, Cols – лінії тільки між стовпцями, All – усі лінії. Атрибут Frame може приймати такі значення: Void – границі відсутні, Above – верхня границя, Below – нижня границя, Hsides – ліва та права границі відсутні, Vsides – верхня та нижня границі відсутні, Lhs – тільки ліва границя, Rhs – тільки права границя.
У тегів <TR>, <TH> і <TD> може бути атрибут Align зі значеннями Left, Right або Center, який задає вирівнювання у рядку або комірці таблиці по горизонталі, а також атрибут Valign зі значеннями Top, Bottom або Center, який задає вирівнювання у рядку або комірці таблиці по вертикалі. Наприклад:
<TD Align=“Left” Valign=“Top”>Значення комірки</TD>
У тега <TH> може бути ще один атрибут – Scope (значення Row або Col), який вказує для чого <TH> є заголовком – для рядка чи стовпця.
Для об’єднання декількох комірок в одну для тегів <TH> і <TD> існують атрибути Сolspan і Rowspan, які об’єднують вказану кількість комірок в одну по горизонталі і вертикалі відповідно. Для зміни кольору рядка або комірки використовується атрибут BgColor.
Приклад: Таблиця з об’єднаними та зафарбованими комірками.
<table border="1">
<TC>Специфікація комп’ютерів</TC>
<tr>
<th> </th>
<th>модель 100</th>
<th>модель 200</th>
</tr>
<tr bgcolor="magenta">
<th>Процесор</th>
<td>G9-l.6</td>
<td>G9-l.7</td>
</tr>
<tr>
<th>Винчестер</th>
<td>78 Гб</td>
<td BgColor=”blue”>90 Гб</td>
</tr>
<tr>
<th>Bидеoкapтa</th>
<td colspan="2" BgColor=”red”>Rageous 428p</td>
</tr>
<tr>
<th>A/B Вихід</th>
<td rowspan="2">Немає</td>
<td>Є</td>
</tr>
<tr>
<th>Пopт змінного дисководу</th>
<td>Опціонально</td>
</tr>
</table>
Вигляд такої таблиці у броузері показано на малюнку.
Хід роботи
-
Створити дві веб-сторінки з таблицями. На першій повинен бути розклад ваших занять, а на другій – розклад дзвінків. Файли зберегти з назвами Lab_int_5a.htm і Lab_int_5b.htm.
-
Надати таблицям найліпшого вигляду.
-
На кожній сторінці повинно бути посилання на іншу.