slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 2807
Теперь коснемся не маловажной темы – теги списков.

Это очень распространенный тег на сайтах. Он позволяет визуально определить участок текста таким образом, что выглядеть он будет как список. Списки бывают маркированные и нумерованные. У первых в качестве начала каждого элемента списка служит какой-то значок – кружок, квадратик и так далее. У нумерованных списков началом каждого элемента является его порядковый номер в списке.

Особенностью синтаксиса таких тегов будет то, что внутри одного определяется много других. До этого мы не сильно много встречались с такими тегами.

Чтобы определить маркированный список используется тег <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>

 

< >

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.