HTML Basics II. Making lists #6

Списки внутри списка

Итак, вы поняли, как работают нумерованные и маркированные списки. Отличная работа!

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

Помните: мы уже говорили о вложении тегов. Главное помнить, что последний открытый тег должен закрываться первым. Например:

<ul><li> Тако!</li></ul>

задание

1. В строке 21 создайте маркированный список
2. Ваш маркированный список должен содержать два пункта “Любимые мужские имена” и “Любимые женские имена”
3. Под каждым пунктом маркированного списка создайте нумерованный список и укажите по три любимых имени мальчика и девочки. Используйте пример вложения тегов выше чтобы это сделать.

подсказка

Попробуйте сохранить отступы аккуратными и опрятными как в примере. Это поможет вам не запутаться в вашем html коде.
a. начните с создания <ul> и </ul> тегов
b. затем используйте теги <li> для создания маркированных пунктов связанных с любимыми именами мальчиков и девочек
c. потом под каждым из пунктов создайте нумерованные списки под соответствующими тегами <li> при помощи тега <ol>. Примечание: не следуюет закрывать <li> перед тем как закрывать и открывать <ol>
Вот пример:

<ul>
     <li></li>
         <ol>
             <li></li>
        </ol>
    <li></li>
        <ol>
             <li></li>
             <li></li>
        </ol>
    <li></li>
</ul>

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Nested lists</title>
    </head>
    <body>
        <ol>
            <li>Dad's interests
                <ul>
                    <li>football</li>
                    <li>knitting</li>
                </ul>
            </li>
            <li>Mom's interests
                <ul>
                    <li>hating football</li>
                    <li>skydiving</li>
                </ul>
            </li>
        </ol>
        <ul>
            <li>Любимые мужские имена</li>
                <ol>
                    <li>Вася</li>
                    <li>Петя</li>
                    <li>Жора</li>
                </ol>
            <li>Любимые женские имена</li>
                <ol>
                    <li>Оля</li>
                    <li>Юля</li>
                    <li>Ира</li>
                </ol>
        </ul>
    </body>
</html>


HTML Basics II. Making lists #5

Маркированные списки

Мы научились делать нумерованные списки. Они хороши тогда когда мы хотим чтобы все пункты списка были пронумерованы. Но что если нам нужен просто список? Что делать, если нам не нужны номера напротив каждого пункта?
Мы можем использовать маркированные списки. Самый главный плюс маркированных списков в том, что они создаются также как и нумерованные списки. Разница лишь в том что внутри тега <ol> для создания пунктов мы используем тег <ul>. В остальном нет никакого различия.

задание

1. Создайте заголовок <h1> с названием “Случайные мысли”
2. Создайте абзац при помощи тега <p> который будет содержать любой текст, описывающий маркированный список
3. Создайте маркированный список из четырех пунктов с любым содержанием

подсказка

Маркированный список задается следующим образом :

<ul>
    <li> пункт 1 </li>
    <li> пункт 2 </li>
</ul>

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Unordered Lists</title>
    </head>
    <body>
     <h1>Случайные мысли</h1>  
     <p>Абзац под которым будет маркированный список</p>
     <ul>
         <li>мысль первая</li>
         <li>мысль вторая</li>
         <li>мысль третья</li>
         <li>мысль четвертая</li>
     </ul>
    </body>
</html>

HTML Basics II. Making lists #4

Еще один нумерованный список
Мы действительно думаем, что нумерованные списки это здорово. Как их можно не любить? Так давайте же еще немного попрактикуемся.

задание

1. Дайте название вашей странице
2. Создайте заголовок <h3> с названием “Самая раздражающая ТВ знаменитость”
3. Сделайте нумерованный список при помощи тега <ol> из топ-3 знаменитостей, которые вам не нравятся. Я понимаю, что трудно придумать список из трех, но вы постарайтесь!
4. После этого списка создайте заголовок <h2> “Три вещи, которые я могу сделать на День Матери”
5. Заполните этот список.

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Нумерованные списки</title>
    </head>
    <body>
         <h3>Самая раздражающая ТВ знаменитость</h3>  
            <ol>
                <li>Борис Моисеев</li>
                <li>Филипп Киркоров</li>
                <li>Евгений Петросян</li>
            </ol>
        <h2>Три вещи, которые я могу сделать на День Матери</h2>
            <ol>
                <li>Подарить цветы</li>
                <li>Пропылесосить</li>
                <li>Вымыть посуду</li>
            </ol>
    </body>
</html>

HTML Basics II. Making lists #3

Нумерованные списки

Хорошо! Давайте узнаем, как создавать нумерованные списки. Нумерованный список  - это список, пронумерованный, как показано ниже.
1. В 8 строке мы начинаем наш нумерованный список с открывающегося тега <ol>.
2. В строках 9-11 мы оборачиваем(окружаем) каждый элемент списка в теги <li> и </li>.
3. Поскольку все элементы находятся на одной строке, мы ставим весь элемент на одну строку.
4. В строке 12 мы заканчиваем наш список закрывающимся тегом </ol>.
Правда, здорово? Теперь мы можем добавлять нумерованные списки, заголовки и абзацы в наш html файл.

задание

1. В 13 строке создайте заголовок <h2> “Список вещей, которые мне нравятся”
2. В 14 строке начните нумерованный список, открыв тег <ol>
3. Ваш список должен состоять из трех пунктов, каждый из которых завернут (т.е. окружен) тегами <li>

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Lists</title>
    </head>
    <body>
        <h1>List of my favorite things</h1>
            <ol>
                <li>raindrops on roses</li>
                <li>whiskas on kittens</li>
                <li>call of duty: modern warfare</li>              
            </ol>
         <h2>Список вещей, которые мне нравятся</h2>
            <ol>
                <li>Мир!</li>
                <li>Труд!</li>
                <li>Май!</li>
            </ol>
    </body>
</html>

HTML Basics II. Making lists #2

Отступ твой друг

Сейчас неплохое время чтобы вкратце упомянуть про отступы, т.е. то расстояние, на которое каждая строка отступает от края. Может вы заметили, что когда мы помещаем, тег внутри тега, то мы увеличиваем отступ. Это помогает сделать код более удобным для дальнейшего чтения.

Посмотрите на наш код в редакторе справа. Попробуйте следовать подобному стилю отступов когда вы пишете свой HTML,  это поможет вам не запутаться в коде.

Нажмите “сохранить и отправить код” чтобы продолжить. 

HTML Basics II. Making lists #1

Введение

Давайте продолжим изучать HTML. Мы уже узнали, как настроить <head> и <body>, как создавать заголовки и абзацы и как добавлять изображения и ссылки.
В этом курсе мы перейдем на следующий уровень:
a. Создание упорядоченных и неупорядоченных списков
b. Изменение размера типа и стиля шрифта
c. Изменение цвета фона
d. Выравнивание текста

задание

1. Давайте разогреемся для начала, добавив <title> в <head>
2. В <body> создайте абзац (используя <p>). Напишите все что угодно!

решение

<!DOCTYPE html>
<html>
    <head>
    <title>Познаем новые вершины</title>
    </head>
    <body>
        <p>Повторение мать учения</p>
    </body>
</html>