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


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

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

Цитаты

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

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

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

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

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

HTML кодКак это будет выглядеть?

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

Мороз и звёзды,

Вечер чудный.

Ещё не спишь ты,

Голос бурный?..


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

Мороз и звёзды,

Вечер чудный.

Ещё не спишь ты,

Голос бурный?..

Стихотворение из поста @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˃

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

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

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

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

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


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




















Comments 3


Очень познавательно. Подписалась

20.12.2016 11:23
0

Спасибо! :)

20.12.2016 11:26
0

Надо же, никогда бы не подумала, что можно упомянуть меня в посте про HTML )))) Но за разбор моего стихотворения спасибо - теперь буду знать больше про возможное оформление:)

20.12.2016 11:33
0

? мне срочно нужно было стихотворение )) а твое уже который день на языке вертится ?

20.12.2016 11:34
0
Отлично!!! ))) а еще `
    ` `
  • ` `
  • ` `
  • ` `
  • ` `
  • ` `
` - можно использывать в меню )))
20.12.2016 12:08
0

хочу как ты..)

20.12.2016 12:10
0

Спасибо, хорошее оформление)

20.12.2016 12:11
0

Что если в публикацию вставить код JavaScript - будет работать? )

24.12.2016 12:17
0
My pageSettingsLogout
Cancel Confirm
100%
Cancel Confirm
Cancel Confirm