Учебный материал по HTML, посвященный форматированию текста. В этом разделе рассматриваются HTML-эквиваленты специальных символов, перенос строки, выделение фрагментов текста различными стилями, созданию нижних и верхних индексов, а также использование тега и тегов логического форматирования.
4.1. HTML-эквиваленты
HTML-эквиваленты позволяют корректно отображать специальные символы, такие как знаки препинания, математические операторы и другие. Вот список наиболее распространённых эквивалентов:
| Символ | HTML-код |
|---|---|
< | < |
> | > |
& | & |
" | " |
© | © |
® | ® |
™ | ™ |
€ | € |
× | × |
÷ | ÷ |
± | ± |
4.2. Перенос строки
Для переноса строки используется тег <br>. Этот элемент не имеет закрывающего тега и просто вставляется в нужное место текста.
Пример кода:
<p>Это пример<br>переноса строки</p>Результат:
Это пример
переноса строки
Тег <br> можно использовать несколько раз подряд для создания нескольких пустых строк между абзацами.
4.3. Выделение фрагментов текста
Для выделения отдельных частей текста применяются следующие теги:
<b>– выделение полужирным начертанием.<i>– выделение курсивным начертанием.<u>– подчеркивание текста.<mark>– выделение цветом фона (маркер).<small>– уменьшение размера шрифта.<del>– зачеркнутый текст (удаленный контент).<ins>– подчёркнутый текст (вставленный контент).
Примеры кода::
<p>Вот пример использования <b>полужирного</b> текста.</p><p>Вот пример использования <i>курсивного</i> текста.</p><p>Вот пример использования <u>подчёркнутого</u> текста.</p><p>Вот пример использования <mark>выделенного маркером</mark> текста.</p><p>Вот пример использования <small>уменьшенного</small> текста.</p><p>Вот пример использования <del>зачёркнутого</del> текста.</p><p>Вот пример использования <ins>подчёркнутого</ins> текста.</p>
Результат:
Вот пример использования полужирного текста.
Вот пример использования курсивного текста.
Вот пример использования подчёркнутого текста.
Вот пример использования выделенного маркером текста.
Вот пример использования уменьшенного текста.
Вот пример использования зачёркнутого текста.
Вот пример использования подчёркнутого текста.
4.4. Теги логического форматирования
Теги логического форматирования помогают указать смысловую нагрузку на текст без привязки к конкретному стилю. Вот некоторые из них:
<abbr>– сокращение или аббревиатура. Используется для указания полного названия через атрибутtitle.<cite>– ссылка на источник информации или название произведения.<code>– код программы или фрагмент программного кода.<dfn>– определение термина.<kbd>– ввод данных пользователем с клавиатуры.<samp>– вывод примера текста или сообщения.<var>– переменная в программировании.<q>– короткая цитата.
Примеры кода:
<p>Аббревиатура <abbr title="Гипертекстовый язык разметки">HTML</abbr> расшифровывается как HyperText Markup Language.</p><p>Цитата из книги: <cite>Война и мир</cite> Льва Толстого.</p><p>Код программы: <code>console.log("Hello, World!");</code></p><p>Определение термина: <dfn>HTML</dfn> - это гипертекстовый язык разметки.</p><p>Введите команду: <kbd>ls</kbd> для просмотра списка файлов.</p><p>Пример вывода: <samp>File not found</samp>.</p><p>Переменная в коде: <var>x</var> = 10;</p><p>Короткая цитата: <q>Красота спасёт мир!</q> - Фёдор Достоевский.</p>
Результат:
Аббревиатура HTML расшифровывается как HyperText Markup Language.
Цитата из книги: Война и мир Льва Толстого.
Код программы: console.log("Hello, World!");
Определение термина: HTML — это гипертекстовый язык разметки.
Введите команду: ls для просмотра списка файлов.
Пример вывода: File not found.
Переменная в коде: x = 10;
Короткая цитата: Красота спасёт мир!
— Фёдор Достоевский.
4.5. Создание нижних и верхних индексов
Для создания нижних и верхних индексов используются теги <sub> и <sup>.
Пример кода:
<p>Формула воды H<sub>2</sub>O, где 2 - нижний индекс.<br>X<sup>2</sup> - квадрат числа X, где 2 - верхний индекс.</p>Результат:
Формула воды H₂O, где 2 — нижний индекс.
X² — квадрат числа X, где 2 — верхний индекс.
4.6. Тег span
Тег <span> используется для стилизации небольших фрагментов текста внутри других элементов. Он часто применяется вместе с CSS для изменения цвета, размера или других свойств текста.
Пример кода:
<p>Вот пример использования <span style="color: red;">красного</span> текста.</p>Результат:
Вот пример использования красного текста.
Тег <span> также может использоваться для вложения других тегов форматирования, например:
<p>Вот пример использования <span style="color: red;"><strong>жирного красного</strong></span> текста.</p>Результат:
Вот пример использования жирного красного текста.
4.7. Разделение содержания и стиля
Современная практика веб-разработки предполагает четкое разделение структуры документа (содержимого) и его внешнего вида (оформления). Это достигается за счет разделения HTML-кода, который отвечает за структуру и содержимое страницы, и CSS-кода, отвечающего за её стилистическое оформление.
Разделение этих двух аспектов разработки важно по нескольким причинам:
- Поддерживаемость: Когда структура и дизайн отделены друг от друга, становится проще вносить изменения в оформление сайта. Если вам нужно изменить шрифт, цветовую схему или другие аспекты дизайна, достаточно внести изменения в файлы CSS, не затрагивая основной HTML-код. Это экономит время и снижает вероятность ошибок при внесении изменений.
- Семантичность: HTML был создан для описания структуры документов, а не их внешнего вида. Использование HTML-тегов для форматирования (например,
<b>или<i>) нарушает эту концепцию. Вместо этого, следует применять семантические теги, такие как<header>,<nav>,<article>,<section>, которые лучше передают смысл содержимого. - Доступность: Семантический HTML помогает поисковым системам и программам чтения экрана лучше понимать структуру страницы, что улучшает доступность и SEO (поисковая оптимизация).
- Масштабируемость: При использовании CSS для оформления всех страниц сайта, любые изменения в дизайне будут автоматически применены ко всем страницам, использующим тот же набор стилей. Это особенно полезно для крупных проектов с множеством страниц.
- Совместимость: Разделение HTML и CSS упрощает работу над проектом для разных специалистов. Дизайнеры могут работать над стилями, программисты — над функциональностью, а контент-менеджеры — над наполнением сайта контентом.
Таким образом, современные стандарты веб-разработки настоятельно рекомендуют использовать HTML для структурирования содержимого, а CSS — для его оформления. Это позволяет создавать гибкие, масштабируемые и поддерживаемые сайты, которые легко адаптируются под различные устройства и платформы.
