Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Методичка_Веб-дизайн.doc
Скачиваний:
8
Добавлен:
19.11.2019
Размер:
530.43 Кб
Скачать

3. Організація тексту всередині документу

HTML дозволяє визначати вигляд цілих абзаців тексту. АбзаиД

можна організовувати в списки, виводити їх на екран у відформатованому'

вигляді тощо. І

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

• 1 елемент списку;

• 2 елемент списку;

• 3 елемент списку.

необхідно записати такий HTML-текст: . sj

<ul>

<^1і>1 елемент списку;

<1і>1 елемент списку;

<1і>1 елемент списку;

</ul>

У тега <LI> немає парного закриваючого тегу. Тег <UL> може містити атрибут, що визначає формат маркерів: <ul type=disk> Тег створює суцільні маркери такого типу, якГ у списках першого рівня.

< ul type =circle> Тег створює маркери у вигляді кола.

< ul type =square> Тег створює суцільні квадратні маркери.

Можна змішувати різні типи марки: рів в одному списку.

Нумеровані списки: <OL> ... </OL>. Текст, розташований між мітками <ol> і </ol>, сприймається як Егумерований список. Кожен новий елемент списку починається з тегу <1і>. Наприклад, щоб створити нумерований список-;

1 елемент списку;

2 елемент списку;

3 елемент списку.

Необхідно записати такий HTML-текст:

<ol>

<1і>1 елемент списку;

<1і>2 елемент списку;

<1і>3 елемент списку;

</ol>

Тег <ol> може містити атрибут, щ» визначає формат нумерації: <0І type=l> Тег створює список із нумерацією у форматі 1., 2., 3., 4. і т.д. <ol type=A> Тег створює список із нумерацією у форматі А., В., С. і т.д.

< ol type =а> Тег створює список із нумерацією у форматі а., Ь., с і т.д.

< ol type =І> Тег створює список із нумерацією у форматі І., II., ПІ. і т.д.

При необхідності можна змішувати ці типи нумерації в одному

списку. ,

Список визначень - тег <DL>..,«i®L>

Теги списку (Definition List: <DL>, <DT>, <DD>) використовують для створення списку термінів та їх визначень. Схема використання тега наступна.

<DL><DT>TepMiH</DT> <DD>BHMa4emw</DD></DL>

4. Засоби опису таблиць у html

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

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

- ALIGN - установлює розташування таблиці відносно полів

документа. Допустимі значення: ALIGN=LEFT (вирівнювання вліво),

ALIGN=CENTER (вирівнювання ло центру), ALIGN=RIGHT

(вирівнювання вправо);

- WIDTH — визначає ширину таблиці. її можна задати в пікселях

(наприклад, WIDTH=400) або у відсотках від ширини сторінки

(наприклад, WIDTH=80%);

- BORDER - встановлює ширину зовнішньої рамки таблиці й комірок у пікселях (наприклад, BORDER=4). Якщо атрибут не встановлений, таблиця показується без рамки;

- CELLSPACING - встановлює відстань між рамками комірок таблиці в пікселях (наприклад, CELLSPACING=2);

- CELLPADMN - встановлює відстань між рамкою комірки таї текстом у пікселах (наприклад, CELLPADDING=10).

Таблиця може мати заголовок (<CAPTION> ... </CAPTION>), хоча] заголовок не є обов'язковим. Ter <CAPTION> може включати атрибут ALIGN. Припустимі значення: <CAPTION ALIGN=TOP> (заголовок міститься над таблицею) і <CAPTION ALIGN=BOTTOM> (заголовок міститься під таблицею).

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

- ALIGN - встановлює вирівнювання тексту в комірках рядка. Припустимії

значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTERJ

(вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо);

- VALIGN - установлює вертикальне вирівнювання тексту в комірках

рядка. Припустимі значення: VALIGN=TOP (вирівнювання по верхньоД

краю), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTToffl

(вирівнювання по нижньому краю).

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

- NOWRAP - присутність цього атрибута означає, що вміст комірки повинен бути показаний в один рядок;

- COLSPAN - встановлює "розмах" комірки по горизонталі. Наприклад, COLSPAN=3 означає, що комірка поширюється на-три стовпчики;

- KOWSPAN - встановлює "розмах" комірки по вертикалі. Наприклад, ROWSPAN=2 означає, що комірка займає два рядки;

- ALIGN - встановлює вирівнювання* тексту в комірці. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо);

- VALIGN - встановлює вертикальне вирівнювання тексту в комірі™ Припустимі значення: VALIGN=TOP (вирівнювання по верхньому крага), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю);

- WIDTH - встановлює ширину комірки в пікселях (наприклад, WIDTH=200);

- HEIGHT - встановлює висоту комірки в пікселях (наприклад, HEIGHT=40).

Якщо комірка таблиці порожня, навколо неї не малюється рамка, Якщо комірка порожня, а рамка потрібна, в комірку можна ввести символьний об'єкт «fenbsp; (non-breaking space - пробіл, що не розриває). Комірка як і раніше буде порожньою, а рамка навколо неї буде. Можна задати порожні стовпці, визначивши їх ширину в пікселях або відносних одиницях, і не ввівши в отримані комірки ніяких даних. Цей засіб може виявитися корисним при розміщенні на сторінці тексту та графіки. Будь-яка комірка таблиці може містити в собі іншу таблицю.

Контрольні питання

1. Назвіть теги управління розміткою HTML-документа.

2. Назвіть теги керування відображенням символів.

3. Назвіть теги, що керують формою відображення символів.

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

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

6. Як створити нумерований список у web-документі?

7. Як створити багаторівневий список у web-документі?

8. Як створити список визначень у web-документі?

9. З якого тега починається опис таблиці у web-документі?

10. З яїсого тега починається опис рядка таблиці у web-документі?

11. З якого тега починається опис стовбця таблиці у web-документі?

12. Назвіть абрибути тегів <table>, <tr>, <td>.