РАЗМЕТКА ТЕКСТ

Упорядоченный список [4/17]

Упорядоченный список создаётся с помощью тега <ol>, (меченый - <ul>) который может содержать внутри себя теги <li>.

Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка — нумеруются.

Для упорядоченного списка можно задать атрибут start, который изменяет начало нумерации. Например, код:

Приведёт к такому результату:

3. раз
4. два

---------------------------------------------------------------------------------------------------

Многоуровневый список [5/17]

Создать многоуровневый список достаточно просто.

Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.

Пример правильного кода:

Пример кода с ошибкой:

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

Количество уровней в списках не ограничено. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.

В этом задании мы потренируемся работать с многоуровневыми списками.

---------------------------------------------------------------------------------------------------

Список определений [7/17]

Список определений создаётся с помощью трёх тегов:

<dl> обозначает сам список определений;
<dt> обозначает термин;
<dd> обозначает определение термина.
Теги <dt> и <dd> пишутся парами внутри <dl>.

Например:

---------------------------------------------------------------------------------------------------

Важность. Теги strong и b [8/17]

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

Первые два тега предназначены, чтобы указать на важность слова или фразы.

Тег <strong> определяет важность отмеченного текста.

Тег <b> предназначен для выделения текста без придания ему особой важности.

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

Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong>. То же самое касается и тегов <em> и <i>. Тег <em> «говорилка» будет выделять интонацией.

Отметим, что новый смысл тегу <b> придали в HTML5. Раньше это был тег, который просто делает текст полужирным. То есть он был предназначен только для визуального форматирования.

---------------------------------------------------------------------------------------------------

Переносы и разделители. Теги br и hr [10/17]

Иногда возникает необходимость вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.

Для этого в HTML предусмотрен одиночный тег <br>.

Иногда этот тег используется для разбиения текста на «как бы абзацы», что является плохим подходом. Используйте для разметки абзацев тег <p>.
Одиночный тег <hr> используется для того, чтобы создать горизонтальную линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов, но правильней делать это с помощью CSS

---------------------------------------------------------------------------------------------------

Цитаты [11/17]

В HTML существует несколько тегов для обозначения цитат:

<blockquote> предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.
<q> предназначен для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.
<cite> используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.

---------------------------------------------------------------------------------------------------

Верхние и нижние индексы [12/17]

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

Тег <sup> отображает текст в виде верхнего индекса.

Тег <sub> отображает текст в виде нижнего индекса.

Стоит отметить, что эти теги являются чисто презентационными и не имеют собственной семантики.

Эти теги можно использовать внутри друг друга для создания более сложных формул.

Если вам нужно вставить очень сложную формулу в HTML-документ, лучше воспользоваться специальным языком разметки MathML.

---------------------------------------------------------------------------------------------------

Помечаем изменения. Теги del и ins [13/17]

Любой документ на протяжении своей «жизни» может изменяться. С распространением динамических веб-приложений вносить изменения в HTML-документы стало проще простого.

Иногда возникает вопрос: а что же именно было изменено в документе, что было добавлено, а что удалено?

Как раз для описания изменений предназначены теги <del> и <ins>.

<del> выделяет текст, который был удалён в новой версии документа. (пы.сы. больше на зачеркивание похоже)

<ins> выделяет текст, который был добавлен в новой версии документа. (пы.сы. больше на подчеркивание похоже)

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

Простейшим примером применения этих тегов может служить список ошибок. Когда ошибка исправлена, её помечают тегом <del>, если найдена новая ошибка, то её добавляют в список и помечают тегом <ins>.

---------------------------------------------------------------------------------------------------

Преформатированный текст [14/17]

Наверное, вы уже заметили, как отличается отображение кода в HTML-редакторе и в мини-браузере.

Вы можете ставить сколько угодно пробелов в HTML-коде, но браузер отобразит их как один. Вы также можете ставить сколько угодно переносов строки в HTML-коде, а в браузере переноса не будет, если только не использовать специальные теги, например <p> или <br>.

Изменить это поведение браузера можно с помощью тега <pre>, который обозначает «предварительно отформатированный текст». Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre>.

Наиболее часто этот тег используется при отображении примеров кода.

---------------------------------------------------------------------------------------------------

Просто выделенный текст [15/17]

В HTML5 появился новый тег <mark>, который обозначает выделенный текст.

Иногда при работе с объёмными текстами мы используем маркер, чтобы выделять ключевые слова, идеи или что-то другое на что стоит обратить внимание. Такое же назначение и у тега <mark>.

В современных браузерах текст внутри <mark> подсвечивается жёлтым фоном.

---------------------------------------------------------------------------------------------------