Теперь коснемся не маловажной темы – теги списков.
Это очень распространенный тег на сайтах. Он позволяет визуально определить участок текста таким образом, что выглядеть он будет как список. Списки бывают маркированные и нумерованные. У первых в качестве начала каждого элемента списка служит какой-то значок – кружок, квадратик и так далее. У нумерованных списков началом каждого элемента является его порядковый номер в списке.
Особенностью синтаксиса таких тегов будет то, что внутри одного определяется много других. До этого мы не сильно много встречались с такими тегами.
Чтобы определить маркированный список используется тег <ul></ul>.
Немаркированный - <ol></ol>.
Каждый элемент списка определяется парой тегов <li></li>. Для простоты понимания будем считать, что элементом списка является все, что внутри этих тегов. Но не обязательно использовать закрывающий тег у элемента, если их нет, концом каждого элемента списка будет запросто считаться начало следующего, вот пример использования разного синтаксиса с одним и тем же результатом:
<HTML>
<HEAD>
<TITLE> Синтаксис списков </TITLE>
</HEAD>
<BODY style="width:900px; margin:0 auto;">
<p>Маркированные списки:</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
<li>Четвертый элемент списка</li>
</ul>
<ul>
<li>Первый элемент списка
<li>Второй элемент списка
<li>Третий элемент списка
<li>Четвертый элемент списка
</ul>
<p>Пронумерованный список</p>
<ol>
<li>Первый элемент списка
<li>Второй элемент списка
<li>Третий элемент списка
<li>Четвертый элемент списка
</ol>
</BODY>
</HTML>
Для того, чтобы выбрать тип маркера для маркированного списка(<ul>) используется атрибут type для тега <li> или тега <ul>, который может принимать следующие значения:
Disc – придается маркеру вид закрашенного кружочка
Circle - придает маркеру вид не закрашенного кружочка
Square – вид закрашенного квадратика
Для нумерованного списка(<ol>) этот атрибут может принимать следующий значения:
A – заглавные латинские буквы
а – строчные латинские буквы
I– заглавные римские цифры
i– строчные римские цифры
1 – арабский цифры
Если вы хотите расположить нумерованный список в обратном порядке, то к тегу <ol> нужно добавить атрибут «reversed», который идет без значения.
В итоговом примере я покажу вам разные варианты списков, вот код
<HTML>
<HEAD>
<TITLE> Итоговый пример </TITLE>
</HEAD>
<BODY style="width:900px; margin:0 auto;">
<p>Пронумерованные списоки</p>
<ol>
<li type="A">Первый элемент списка</li>
<li type="A">Второй элемент списка</li>
<li type="A">Третий элемент списка</li>
<li type="A">Четвертый элемент списка</li>
</ol>
<ol>
<li type="i">Первый элемент списка</li>
<li type="i">Второй элемент списка</li>
<li type="i">Третий элемент списка</li>
<li type="i">Четвертый элемент списка</li>
</ol>
<p>Маркированный список</p>
<ul>
<li type="disc">Первый элемент списка</li>
<li type="disc">Второй элемент списка</li>
<li type="disc">Третий элемент списка</li>
<li type="disc">Четвертый элемент списка</li>
</ul>
</BODY>
</HTML>
Вот как это выглядит
Тестовые задания, для использования знаний на практике
Все задания разбиты на 3 уровня, начиная с 1 уровня до 3 они усложняются. Рекомендую делать задания по порядку, так как каждое следующее проще сделать, если сделано предыдущие. Выполнение этих заданий условно-обязательно, для лучшего понимания сути работы HTML машины их необходимо делать. Задания опираются на все пройденные уроки, но основная часть - текущий урок, на его понимание.
Уровень первый
Перед вами текст, который вы должны перепечатать и отформатировать при помощи различных тегов его так, чтобы он выглядел аналогично.
Исходный текст:
Как должен выглядеть текст:
Скачать рабочий код задания Рабочий код задания(для проверки)
<HTML>
<HEAD>
<TITLE> Списки. Первый уровень сложности. </TITLE>
</HEAD>
<BODY>
<b>Таким образом, из смысловой цельности текста вытекают следующие признаки текста:</b>
<ul>
<li>Текст — это высказывание на определённую тему</li>
<li>В тексте реализуется замысел говорящего, основная мысль</li>
<li>Текст любого размера — это относительно автономное (законченное) высказывание</li>
<li>Предложения логически связаны между собой</li>
<li>К тексту можно подобрать заголовок</li>
<li>Правильно оформленный текст обычно имеет начало и конец</li>
</ul>
<b>Стили текста:</b>
<ol>
<li>научные</li>
<li>разговорные</li>
<li>художественные</li>
<li>публицистические</li>
<li>официально-деловые</li>
</ol>
</BODY>
</HTML>
Уровень второй
Суть второго уровня сложности этого задания, в усложнении формата текста, использованного на предыдущем уровне. Возьмите свой уже отформатированный текст, допишите код так, чтобы он выглядит как нужно в задании.
Как должен выглядеть текст:
Скачать рабочий код задания Рабочий код задания(для проверки)
<HTML>
<HEAD>
<TITLE> Списки. Второй уровень сложности. </TITLE>
</HEAD>
<BODY>
<b>Таким образом, из смысловой цельности текста вытекают следующие признаки текста:</b>
<ul type="circle">
<li>Текст — это высказывание на определённую тему</li>
<li>В тексте реализуется замысел говорящего, основная мысль</li>
<li>Текст любого размера — это относительно автономное (законченное) высказывание</li>
<li>Предложения логически связаны между собой</li>
<li>К тексту можно подобрать заголовок. Заголовок должен быть:
<ul>
<li>коротким</li>
<li>понятным</li>
<li>описывающим текст</li>
</ul>
</li>
<li>Правильно оформленный текст обычно имеет начало и конец</li>
</ul>
<b>Стили текста:</b>
<ol type="A">
<li>научные</li>
<li>разговорные</li>
<li>художественные</li>
<li>публицистические</li>
<li>официально-деловые</li>
</ol>
</BODY>
</HTML>
Уровень третий
Третий уровень сложности аналогичен 1 и 2 уровням сложности.
Как должен выглядеть текст:
Скачать рабочий код задания Рабочий код задания(для проверки)
<HTML>
<HEAD>
<TITLE> Списки. Третий уровень сложности. </TITLE>
</HEAD>
<BODY>
<b>Таким образом, из смысловой цельности текста вытекают следующие признаки текста:</b>
<ul style="font-weight:bold; color:#990000;">
<li>Текст — это высказывание на определённую тему</li>
<li>В тексте реализуется замысел говорящего, основная мысль</li>
<li>Текст любого размера — это относительно автономное (законченное) высказывание</li>
<li>Предложения логически связаны между собой</li>
<li>К тексту можно подобрать заголовок. Заголовок должен быть:
<ol type="i" style="color:#003399; font-weight:normal;">
<li>коротким</li>
<li>понятным</li>
<li>описывающим текст</li>
</ol>
</li>
<li>Правильно оформленный текст обычно имеет начало и конец</li>
</ul>
<b>Стили текста:</b>
<ol type="A" style="color:#FF0066; font-size:20px;">
<li>научные</li>
<li>разговорные</li>
<li>художественные</li>
<li>публицистические
<ul type="square" style="font-size:16px;">
<li>общие</li>
<li>по конкретной теме</li>
</ul>
</li>
<li>официально-деловые</li>
</ol>
</BODY>
</HTML>
