В прошлый раз я рассказала вам об основных тегах, которые пригодятся, как минимум для постов в Голосе. Сегодня я хочу рассказать еще о нескольких, которые я использую при оформлении своих публикаций.
Сразу хочу сказать о конструкции с парными тегами. обратите внимание, что, если провести скобки от открывающего тега к закрывающему, они пересекаться не должны. Очень важно соблюдать последовательность тегов.
Цитаты
Для того, чтобы выделить цитату в своих постах, я использую тег ˂blockquote˃. Например:
˂blockquote˃Чтобы быть незаменимой, нужно все время меняться. Коко Шанель˂/blockquote˃
Чтобы быть незаменимой, нужно все время меняться. Коко Шанель
Перенос строки
Тег ˂br˃ необходим для переноса строки в том месте, где он находится. В отличие от тега ˂p˃ он не добавит пустой отступ перед строкой. Например, его можно использовать так:
| HTML код | Как это будет выглядеть? |
|---|---|
˂p˃Мороз и звёзды,˂/p˃
| Мороз и звёзды, Вечер чудный. Ещё не спишь ты, Голос бурный?.. |
˂p˃Мороз и звёзды,˂br˃
| Мороз и звёзды, |
Стихотворение из поста @katrin "Зимний вечер" от почти Пушкина :)"
Таблицы
Иногда очень нужно задать список или смастерить таблицу в посте, как, например, я сделала чуть выше. Это делается тоже очень просто. Элемент ˂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˃
И для нумерованного списка:
- Элемент списка
˂ol˃
˂li˃Элемент списка˂/li˃
˂/ol˃
Горизонтальная разделительная полоса
Обычно перед навигацией я ставлю тег ˂hr˃, для того, чтобы отделить основную часть документа от декоративной. Этот тег отображает горизонтальную линию. Он всегда начинается с новой строки, и следующий после него элемент будет располагаться на следующей строке после него.
В следующей части я расскажу о структуре HTML документа и покажу, как создать простую страничку. Подписывайтесь, чтобы не пропустить.
Очень познавательно. Подписалась
Спасибо! :)
Что если в публикацию вставить код JavaScript - будет работать? )
Спасибо, хорошее оформление)
хочу как ты..)
Надо же, никогда бы не подумала, что можно упомянуть меня в посте про HTML )))) Но за разбор моего стихотворения спасибо - теперь буду знать больше про возможное оформление:)
😂 мне срочно нужно было стихотворение )) а твое уже который день на языке вертится 😜
Отлично!!! ))) а еще
<ul><li></li><li></li><li></li><li></li><li></li></ul>