Створення списків.

Якщо у Web-документі треба перераховувати дані, то їх виводять у вигляді списку. Найчастіше використовуються списки таких типів:

· Ненумеровані (маркіровані) – відображаються у вигляді послідовності позначених елементів, позначаються тегом <ul> … </ul>;

· Нумеровані – відображаються у вигляді списку, елементи якого мають послідовні номери, позначаються тегом <ol> … </ol>;

· Словник визначень – відображається у вигляді термінів і їх визначень, позначається тегом <dl> … </dl>.

Перед кожним елементом ненумерованого й нумерованого списків вказується одинарний тег <li>. У списку типу словника визначень перед кожним терміном вказується одинарний тег <dt>, а перед його визначенням – тег <dd>.

HTML-документ із нумерованим списком Захоплення та словником визначень, у якому пояснюється кожний вид захоплень наведено на рисунку.

(1)ненумерований список, (2) словник визначень.

Початок і закінчення ненумерованого списку позначено парним тегом <ul> … </ul>, а перед кожним елементом списку одинарний тег <li> (наприклад, <li> інформатика).

Словник визначень обмежено парним тегом <dl> … </dl>. У ньому кожний термін починається одинарним тегом <dt>, а його пояснення – тегом <dt>. Наприклад, у словнику визначень використовується термін Інформатика та його визначення:

<dt> Інформатика

<dd> Мені подобається створювати додатки в Access

відображається в броузері в такому вигляді:

У наведеному вище прикладі використані теги, що керують шрифтом виведення окремих символів.

Для форматування символів у мові HTML існують теги:

Завдання 3. Створити веб-сторінку своеї школи за зразком:

Хід роботи до виконання Завдання 3:

1. Создайте в своей папке текстовый документ с помощью программы «Блокнот», назовите его «index» и укажите расширение .html

2. Откройте созданный документ и наберите структуру HTML-документа.

'<'html'>'
'<'head'>'
'<'title'><'/title>'
'<'/head'>'
'<'body'>'

'<'/body'>'
'<'/html'>'

3. В заголовке будущей Веб-страницы укажите «Сайт общеобразовательной школы № 52 г. Днепропетровска Днепропетровской области»

4. Сделайте желтый (yellow) фон вашей Веб-страницы, используя атрибут тега BODY – BGCOLOR.

5. В самом верху Веб-страницы разместите название своего сайта, дублируя заголовок, при этом установите цвет заголовка синим, установите наивысший уровень заголовка, выравнивание - по центру, полужирное начертание.

6. С абзаца создайте маркированный список, который в последствии будет служить нам в качестве МЕНЮ сайта. Заметьте, что в нем имеется также нумерованный список. (см. ниже)
Для этого используйте тег '<'ul'>''<'/ul'>
- неупорядоченный список. '<'ol'>''<'/ol'>
- упорядоченный. Помните, что каждый элемент списка должен начинаться с тега
'<'li'>' и заканчиваться его закрытием '<'/li'>'

ГЛАВНАЯ

ИСТОРИЯ ШКОЛЫ

САМОУПРАВЛЕНИЕ

НОВОСТИ

РАСПИСАНИЕ УРОКОВ
I. Смена
II. Смена

ФОТОГАЛЕРЕЯ

ТРАДИЦИИ ШКОЛЫ

7. При этом обратите внимание, что размер элементов маркированного списка должен быть 3-го уровня, элементов упорядоченного списка – 4-го уровня и все меню оформлено виде полужирного начертания.

Завдання 4. Створити веб-сторінку за зразком: