Материал: Опорний кнспект

Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам

5. Списки

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

невпорядкований (маркований);
упорядкований (нумерований);
список визначень.

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

Нумеровані списки

Пронумерований список починається з дескриптора <OL|> (означає «ordered| list|») і закінчується дескриптором </OL>. Ця пара дескрипторів автоматично форматує список і стежить за інтервалами між списком і рештою вмісту HTML-страницы|.

type| = інформація про стиль — даний атрибут встановлює стиль елементу списку. Доступні в даний час значення призначені для візуальних агентів користувачів. Можливі значення описані у таблиці (включаючи інформацію про регістр).

Type\|	Стиль нумерації
1	арабські цифри	1, 2, 3, ...
а	букви нижнього регістра	а, b, з ...
A	букви верхнього регістра	A, B, C ...
i	римські цифри в нижньому регістрі	i, ii\|, iii\| ...
I	римські цифри у верхньому регістрі	I, II, III ...

start| = число — Цей атрибут задає початковий номер першого елементу у впорядкованому списку. За умовчанням початковий номер - "1"|. Пам'ятаєте, що, хоча значенням цього атрибуту є ціле число, відповідна мітка може бути нецифрова. Якщо як стиль вибрані латинські букви верхнього регістра (A, B, C ...), start=3| означає "C"|. Якщо як стиль вибрані римські цифри нижнього регістра, start=3| означає "iii|" і так далі

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

Елементи списків визначаються за допомогою дескриптора <LI|>. Представлення елементу на готовій сторінці повністю залежить від настройки браузера| і атрибутів списку. У неврегульованих і нумерованих списках як елемент можуть виступати цілі абзаци тексту. Елементи в каталогах і меню, навпаки, зазвичай короткі і «укладаються» браузерами| в рядок без перенесення.

Кінцевий дескриптор </LI> можна не вставляти в документ, оскільки наступний <LI|> розглядається браузером| як початок наступного елементу списку і відповідно кінець поточного. Дескриптор <LI|> повинен знаходитися між дескрипторами <UL|> — </UL> або <OL|> — </OL>.

Приклад 2. Нумерований список, в якому для позначення елементів використовують малі римські цифри

<HTML>

<TITLE>Райдуга</TITLE> <BODY>

<LI>Червоний</LI>

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

<LI>Жoвтий</LI>

<LI>Зелений</LI>

<LI>Блакитний</LI>

<LI>Синій</LI>

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

</BODY> </HTML>

Ha мал. 3 показаний вигляд цього документа у вікні браузера Internet Explorer.

мал. 3 Нумерований список

Зверніть увагу на те, що за допомогою тегу для всього документа призначено розмір шрифту 6, а за допомогою тегів визначено колір шрифту для кожного елемента списку.

Ненумеровані списки:

<UL|> ... </UL>

Текст, розташований між мітками <UL|> і </UL>, сприймається як ненумерований список. Кожен новий елемент списку слід починати з мітки <LI|>. У мітки <LI|> немає парної закриваючої мітки.

type| = інформація про стиль — Цей атрибут встановлює стиль елементу списку. Доступні в даний час значення призначені для візуальних агентів користувачів. Можливі значення описані у таблиці (включаючи інформацію про регістр).

Графічні агенти користувач можуть генерувати їх як:

для значення "disc|"

○ для значення "circle|"

■ для значення "square|"

value| = число — Цей атрибут встановлює номер поточного елементу списку. Пам'ятаєте, що, хоча значенням атрибуту є ціле число, відповідна мітка може бути нечислова.

Приклад 3 . Маркований список, в якому для позначення елементів використовують коло

<HTML>

<TITLE>Райдуга</TITLE> <BODY>

<LI>Червоний</LI>

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

<LI>Жовтий</LI> <LI>Зелений</LI> <LI>Блакитний</LI>

<LI>Синій</LI>

<LI>Фioлeтoвий</LI> </UL>

</BODY>

</HTML>

Ha мал. 4 показаний вигляд цього документа у вікні браузера Internet Explorer.

Мал. 4. Маркований список

Списки визначень: <DL|> ... </DL>

Список визначень (definition list) порівняно з маркованим або нумерованим має дещо складнішу будову. Кожен елемент такого списку складається з двох частин: терміна та його визначення. У такий спосіб можуть бути оформлені словники та термінологічні довідники. Однак цей тип списку використовують рідко, і тому описувати його докладніше не будемо.

<DL|>

<DT>HTML|

маркіровки гіпертекстів'. Першу версію HTML| розробив співробітник

Європейській лабораторії фізики елементарних частинок Тім Бернерс-лі.

<DT>HTML-документ|

<DD>Текстовий| файл з розширенням *.htm (Unix-системи| можуть

містити файли з розширенням *.html).

</DL>

Цей фрагмент буде виведений на екран таким чином:

<DL| COMPACT|>

<DT>А|

<DD>Первая| буква алфавіту

<DT>Б|

<DD>Вторая| буква алфавіту

<DT>В|

<DD>Третья| буква алфавіту

</DL>

Вкладені списки

Елемент будь-якого списку може містити в собі цілий список будь-якого вигляду. Число рівнів вкладеності в принципі не обмежене, проте зловживати вкладеними списками все ж таки не слідує. Вкладені списки дуже зручні при підготовці різного роду планів і змісту. Наші знання про списки можна коротко звести в приклад:

<html|>

<head|>

<title>Приклад 6</title>

</head>

<body|>

<H1>HTML| підтримує декілька видів списків </H1>

<DL|>

<DT>Ненумеровані| списки

<DD>Елементи ненумерованого списку виділяються спеціальним

символом і відступом зліва:

<UL|>

<LI>Елемент 1

<LI>Елемент| 2

<LI>Елемент| 3

</UL>

<DT>Нумеровані| списки

<DD>Елементи| нумерованого списку виділяються відступом зліва, а

також нумерацією:

<OL|>

<LI>Елемент| 1

<LI>Елемент| 2

<LI>Елемент| 3

</OL>

<DT>Списки| визначень

<DD>Цей вид списків трохи складніший, ніж два попередніх, але і

виглядає ефектніше.

Пам’ятайте|, що списки можна вбудовувати один в іншій, але не

слід закладати дуже багато рівнів вкладеності.

Зверніть увага, що усередині елементу списку може знаходитися

декілька абзаців. Всі абзаци при цьому матимуть однакове

ліве поле.

</DL>

</body>

</html>

Підсумок заняття: виконати приведені у лекції приклади на ПК, результати – роздрукувати.

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

Лекція 6

Тема: Таблиці в Html-документі.

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

План

2. Теги логічного форматування тексту

1. Використання таблиць у HTML-документах

2. Форматування таблиць.

3. Форматування тексту та оформлення рамок таблиці

4. Використання таблиць для розміщення об'єктів на веб-сторінці

3 Вкладені набори фреймів

Лекція 6

План

1. Поняття форми

3 Вкладені набори фреймів

Лекція 8

План

1. Поняття форми

Лекція 14

Тема: Робота з засобами РНР. Проектування БД для використання в Web

План

1. Вступ

Мова PHP

MySQL - СУБД для Інтернету

Інтеграція сценаріїв з базами даних

2. Використання PHP

3. Вбудовування PHP в HTML

4. Додавання динамічного вмісту

5. Доступ до змінних форми

1. Використання таблиць у html-документах

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

Створення таблиці

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

<tr> – визначає горизонтальний рядок <td> – визначає комірку у цьому рядку <th> – визначає комірку у рядку заголовка таблиці.

За умовчанням таблиця має невидимі межі комірок. Для того щоб зробити їх видимими , використовують атрибут B O R D E R , я к и й має цілочислове значення, що визначає товщину рамки в пікселах, наприклад <TABLE BORDER=5>.

Таблиця може мати заголовок, який задається тегами <CAPTION> та </CAPTION>. Тег <CAPTION> може містити атрибут ALIGN з одним із значень top або bottom, які визначають розташування заголовка відповідно перед таблицею або після неї (за умовчанням встановлено значення top).

Наприклад, <CAPTION ALIGN= bottom>Poзклaд уроків</САРТІОN>.

Кожний рядок таблиці починається з тегу <TR> і закінчується тегом </TR>. Якщо рядок містить заголовки стовпців таблиці, то використовують теги <ТН> і </ТН>, якщо ж дані — то <TD> і </TD>.

Наприклад, <ТН>Понеділок</ТН> або <TD>1. Алгебра</ТD>.

У таблиці слово «Понеділок» буде виділене браузером напівжирним шрифтом, а текст «1. Алгебра» відформатовано стандартним способом.

Приклад 5.1 HTML-документ, що містить таблицю

Визначимо структуру табл. 1. Вона містить назви п'яти робочих днів тижня, на кожен з яких припадає 4-5 уроків.

Таблиця 1. Розклад уроків

Понеділок	Вівторок	Середа	Четвер	П'ятниця
1. Алгебра	1. Українська мова	1. Зарубіжна література	1. Географія	1. Хімія
2. Іноземна мова	2. Хімія	2. Геометрія	2. Фізична культура	2. Іноземна мова
3. Фізична культура	3. Алгебра	3. Іноземна мова	3. Фізика	3. Геометрія
4. Географія	4.Інформатика 5. Фізика	4. Трудове навчання 5. Українська література	4. Українська мова	4. Українська література

HTML-код для створення цієї таблиці матиме такий вигляд:

<HTML> <TITLE>Приклад простої таблиці</TITLE>

<BODY>

<CAPTION>Розклад уроків</CAPTION>

<TR>

<TH>Понеділок</TH>

<TH>Вівторок</TH>

<TH>Середа</TH>

<TH>Четвер</TH>

<TH>П'ятниця</TH> </TR> <TR>

<TD>1. Алгебра</TD>

<TD>1. Українська мова</TD>

<TD>1. Зарубіжна література</TD>

<TD>1. Географія</TD>

<TD>1. Хімія</TD> </TR> <TR>

<TD>2. Іноземна мова</TD>

<TD>2. Хімія</TD>

<TD>2. Геометрія</TD>

<TD>2. Фізична культура</TD>

<TD>2. Іноземна мова</TD> </TR> <TR>

<TD>3. Фізична культура</TD>

<TD>3. Алгебра</TD>

<TD>3. Іноземна мова</TD>

<TD>3. Фізика</TD>

<TD>3. Геометрія</TD> </TR> <TR>

<TD>4. Географія</TD>

<TD>4. Інформатика</TD>

<TD>4. Трудове навчання</TD>

<TD>4. Українська мова</TD>

<TD>4. Українська література</TD> </TR> <TR>

<TD>5. Фізика</TD>

<TD>5. Українська література</TD>

Який вигляд матиме ця веб-сторінка у вікні браузера, показано на рис. 1.

Зверніть увагу на те, що за відсутності даних у комірці таблиці рамка навколо неї не відображається. Для того щоб рамку було видно, можна ввести спеціальний код &nbsp; (non-breaking space — нерозривний пробіл). Після цього порожня комірка буде взята в рамку.

Рис. 1. Приклад простої таблиці

Смотрите также:

«ДОХОДЫ, РАСХОДЫ И ПРИБЫЛЬ КОММЕРЧЕСКОГО БАНКА.»
«ДОХОДЫ, РАСХОДЫ И ПРИБЫЛЬ КОММЕРЧЕСКОГО БАНКА.»
__RGR2
__RGR2
...Тянет нас вверх: топос в заключительных строках Фауста Гёте
...Тянет нас вверх: топос в заключительных строках Фауста Гёте
'Духовные песнопения' Уильяма Берда
'Румунський' напрям української дипломатії в 1917-1920 рр.: новітній етап історіографічних досліджень
[БИЛЕТЫ] Спланхнология
0-Технология доступа к данным ADO.NET