Знакомство с HTML. Часть 2 ✌

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

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

Цитаты

Для того, чтобы выделить цитату в своих постах, я использую тег ˂blockquote˃. Например:

˂blockquote˃Чтобы быть незаменимой, нужно все время меняться. Коко Шанель˂/blockquote˃

Чтобы быть незаменимой, нужно все время меняться. Коко Шанель

Перенос строки

Тег ˂br˃ необходим для переноса строки в том месте, где он находится. В отличие от тега ˂p˃ он не добавит пустой отступ перед строкой. Например, его можно использовать так:

HTML код	Как это будет выглядеть?
˂p˃Мороз и звёзды,˂/p˃ ˂p˃Вечер чудный.˂/p˃ ˂p˃Ещё не спишь ты,˂/p˃ ˂p˃Голос бурный?..˂/p˃	Мороз и звёзды, Вечер чудный. Ещё не спишь ты, Голос бурный?..
˂p˃Мороз и звёзды,˂br˃ Вечер чудный.˂br˃ Ещё не спишь ты,˂br˃ Голос бурный?..˂/p˃	Мороз и звёзды, Вечер чудный. Ещё не спишь ты, Голос бурный?..

Таблицы

Иногда очень нужно задать список или смастерить таблицу в посте, как, например, я сделала чуть выше. Это делается тоже очень просто. Элемент ˂table˃ - контейнер для элементов таблицы, которая, как известно, состоит из строк и ячеек, которые соответственно задаются с помощью тегов ˂tr˃ и ˂td˃.

Запомнить их очень легко: ˂tr˃ - table row - столбец таблицы, а ˂td˃ - table data - данные таблицы.

Есть еще другие теги, которые допустимо использовать внутри ˂table˃: ˂caption˃, ˂col˃, ˂colgroup˃, ˂tbody˃, ˂tfoot˃, ˂th˃ и ˂thead˃. Но к ним вернемся чуть позже.

Код таблицы, которая отображена чуть выше:

˂table˃
  ˂th˃HTML код˂/th˃
  ˂th˃Как это будет выглядеть?˂/th˃
  ˂tr˃
    ˂td˃˂code˃˂p˃Мороз и звёзды,˂/p˃˂br˃ ˂p˃Вечер чудный.˂/p˃˂br˃ ˂p˃Ещё не спишь ты,˂/p˃˂br˃ ˂p˃Голос бурный?..˂/p˃˂/code˃ ˂/td˃
    ˂td˃˂p˃Мороз и звёзды,˂/p˃ ˂p˃Вечер чудный.˂/p˃ ˂p˃Ещё не спишь ты,˂/p˃ ˂p˃Голос бурный?..˂/p˃˂/td˃
  ˂/tr˃
  ˂tr˃
    ˂td˃˂code˃˂p˃Мороз и звёзды,˂br˃˂br˃ Вечер чудный.˂br˃˂br˃ Ещё не спишь ты,˂br˃˂br˃ Голос бурный?..˂/p˃˂/code˃ ˂/td˃
    ˂td˃˂p˃Мороз и звёзды,˂br˃ Вечер чудный.˂br˃ Ещё не спишь ты,˂br˃ Голос бурный?..˂/p˃˂/td˃
  ˂/tr˃
˂/table˃

Списки

Первый пост, который мне пришлось переводить с Markdown на HTML, содержал список. В общем-то, проблема в нем и была. Мне нужен был нумерованный список, но нумерация не работала: все элементы списка были под номером 1.

Для того, чтобы сделать список на языке разметки HTML нужно создать контейнер всего списка: если вам нужен нумерованный список, то ˂ol˃, а если маркированный - ˂ul˃. Каждый элемент списка заключается между тегами ˂li˃˂/li˃. Например, маркированный список:

• Элемент списка

˂ul˃
  ˂li˃Элемент списка˂/li˃
˂/ul˃

И для нумерованного списка:

1. Элемент списка

˂ol˃
  ˂li˃Элемент списка˂/li˃
˂/ol˃

Горизонтальная разделительная полоса

Обычно перед навигацией я ставлю тег ˂hr˃, для того, чтобы отделить основную часть документа от декоративной. Этот тег отображает горизонтальную линию. Он всегда начинается с новой строки, и следующий после него элемент будет располагаться на следующей строке после него.

---

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

---