Практические приемы создания списков в веб-страницах
3.1. Виды списков, теги и атрибуты их оформления
На веб-страницах удобно представлять информацию в виде списков: во-первых, такой текст выглядит более аккуратно и наглядно, во-вторых,
Таблица 3.1. Форматы списков.
| Нумерованный список <ol>…</ol> | Маркированный список <ul>…</ul> |
| <ol> | <ul> |
| <li> Прибор 1 | <li> Прибор 1 |
| … | … |
| <li> Прибор N | <li> Прибор N |
| </ol> | </ul> |
им удобнее пользоваться, его легче обновлять и модифицировать. Каждая строка списка может иметь ссылки на отдельную веб-страницу, отражающую содержание этой строки. В частности, это может быть каталог приборов, предлагаемых фирмой-изготовителем. В нумерованных списках каждая строка списка имеет порядковый номер, в маркированных списках вместо номера – маркер. Примеры оформления списков приведены в таблице 3.1.
В общем случае нумерованный список имеет атрибуты Type и Start. Type –разновидность символов, используемых при нумерации: type=1 – арабские символы (также и по умолчанию), type=”I” – большие римские цифры, type=”i” – малые римские цифры, type=”А” – большие римские буквы, type=”а” – малые римские буквы. Start указывает на начальный номер, например, если Start=” ”, то следующие номера будут XI, XII и т.д.
Для маркированных списков атрибут Type указывает на вид маркера: Type =disc – сплошной круг, Type =сircle – окружность, Type = square –сплошной квадрат.
3.2. Практические задания по теме: задания 3-1…3-11
Задание 3-1.
1). Открыть в папке Prakt3 файл bmt2.txt в блокноте и сохранить его с тем же именем в формате html.
2). Привести содержимое html-документа после заголовочной части к формату нумерованного списка, сохранить документ как файл bmt3-1.html и просмотреть в браузере.
Задание 3-2.
1). Увеличить размер заголовка документа (заменить уровень h2 на h1). Сохранить документ как файл bmt3-2.html и просмотреть в браузере.
2). Применить к заголовку документа стилевые параметры: цвет – deeppink, выравнивание – по центру. Сохранить результат и просмотреть в браузере.
Задание 3-3.
1). Применить к списку параметры: цвет – darkred, отступ слева – 400px, размер шрифта – 130%, выравнивание – по центру. Сохранить документ как файл bmt3-3.html и просмотреть в браузере.
2). Изменить цвет общего заголовка документа «ПРИБОРЫ ФУНКЦИОНАЛЬНОЙ ДИАГНОСТИКИ» на orange, сохранить результат и просмотреть в браузере.
3). Создать 5 разделов, добавив к тексту в соответствии с его содержанием заголовки разделов: Кардиографы, Энцефалографы, Ультразвуковые приборы, Приборы для спирометрии, Приборы для реографии и миографии. Установить для каждого из заголовковразмер h2 и стилевые параметры: цвет – darkred, выравнивание – по центру. Сохранить результат и просмотреть в браузере.
4). Оформить разделы как нумерованные списки (не включая в них заголовки разделов) со стилевыми параметрами: цвет – blue, выравнивание (align) – соответственно justify, left, right, justify, center. Сохранить результат и просмотреть в браузере.
Задание 3-4.
1). Применить к спискам следующие стилевые параметры: к 1-му списку цвет darkred, отступ 400, размер шрифта 150%;
ко 2-му списку цвет blue, отступ 425, размер шрифта 140%; ко 3-му списку цвет green, отступ 450, размер шрифта 130%; к 4-му списку цвет deeppink, отступ 475, размер шрифта 120%; к 5-му списку цвет darkviolet, отступ 500, размер шрифта 110%;
Сохранить документ как файл bmt3-4.html и просмотреть в браузере.
Задание 3-5.
1). Для заголовков определить единый стиль <h2>, поместив его в заголовочную часть (в теги <head>…</head>) и добавив к нему атрибуты: выравнивание – по центру, шрифт – Italic, цвет – darkcian, семейство шрифтов (family) – Arial Black. Сохранить документ как файл bmt3-5.html и просмотреть в браузере.
Задание 3-6.
1). Применить к спискам (абзацам) параметры соответственно Type= “A”, “a”, “I”, “I”, “1”. Сохранить документ как файл bmt3-6.html и просмотреть в браузере.
Задание 3-7.
1). Применить к тем спискам (абзацам) параметр START = “2”, “3”, “4”, “5” соответственно. Сохранить документ как файл bmt3-7.html и просмотреть в браузере.
Задание 3-8.
1). Превратить все списки в маркированные, сохранив для них только прежние значения цвета текста. Сохранить документ как файл bmt3-8.html и просмотреть в браузере.
Задание 3-9.
1). Для всех списков ввести параметр marginleft =300px. Сохранить документ как файл bmt3-9.html и просмотреть в браузере.
Рис. 3.1. Веб-страница документа bmt3-10.
Задание 3-10.
1). Во 2-м и 3-м абзацах заменить тип маркеров на circle и square (по умолчанию был задан тип disc). Сохранить документ как файл bmt3-10.html и просмотреть в браузере.
2). Закомментировать два последних абзаца, сохранить результат и просмотреть в браузере.
Задание 3-11.
1). Снять комментарии для последних абзацев, сохранить документ как файл bmt3-11.html и просмотреть в браузере.
2). Преобразовать html-документ в маркированный список для заголовков разделов, внутри которого будут нумерованные списки. Задать стиль маркированного списка с параметрами: цвет – darkcyan, выравнивание – по центру, размер шрифта (font-size) 150%. Сохранить документ как файл bmt3-11.html и просмотреть в браузере.
3). Увеличить межабзацные расстояния, введя между списками пустые строки (<br>) между списками. Сохранить результат и просмотреть в браузере.
4). Для последнего абзаца заменить исходные маркеры на графический маркер (файл marker.png папки Prakt3). Сохранить результат и просмотреть в браузере.
( Вместо <li> вставляется рисунок <img=src marker.png> ).