В данной статье Вы узнаете начальные навыки об форматировании текста в HTML.
НАЧЕРТАНИЕ
Жирное начертание
Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: <b> и < strong >.
<b>Жирное начертание шрифта</b> <strong>Сильное выделение текста</strong>
Курсивное начертание
Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: <i> и <em>.
<i>Курсивное начертание шрифта</i> <br>
<em>Выделение текста</em>
Следует отметить, что теги <b> и <strong>, также как <i> и <em> хотя и похожи по своему действию, являются не совсем эквивалентными и заменяемыми.
Тег <b> — является тегом физической разметки и устанавливает жирное начертание текста, а тег <strong> — тегом логической разметки и выделяет помеченный текст.
Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTMLуниверсальным, в том числе не зависящим от устройства вывода информации.
Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
ЗАЧЕРКНУТЫЙ ТЕКСТ
Тег <s> отображает текст как перечеркнутый.
<s>Текст</s>
ВЕРХНИЙ И НИЖНИЙ ИНДЕКС
Индексом по отношению к тексту называется смещение символов относительно базовой линии строки вверх или вниз. В зависимости от положительного или отрицательного значения, индекс называется, соответственно, верхним или нижним.
Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два тега для создания индекса:
•<sup></sup> — верхний индекс
•<sub></sub> — нижний индекс.
Текст, помещенный в один из этих контейнеров, обозначается меньшим размером, чем базовый текст и смещается относительно горизонтали.
Верхний индекс
<p><b>Великая теорема Ферма</b></p>
<p><i>X <sup>n</sup> + Y <sup>n</sup>
= Z <sup>n</sup></i></p>
<p>где n - целое число > 2</p>
Нижний индекс
<p>Под действием гидроксиламина альдегиды <br>
превращаются в оксимы: <br>
СН<sub>3</sub>СНО + NH<sub>2</sub>OH =
CH<sub>3</sub>C(=NOH)H + H<sub>2</sub>O</p>
КОНТАКТНАЯ ИНФОРМАЦИЯ
Тег <address> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона. Тег адреса во многом напоминает тег нового абзаца, отделяя свое содержимое от других компонентов страницы с помощью увеличенного межстрочного отступа.
Контактная информация - это собственно строки адреса, дополненные необходимыми тегами форматирования.
Как правило, содержимое тега адреса визуализируется курсивом.
Тег адреса допускает использование вложенных тегов, позволяя, например, сразу же организовать ссылку для составления сообщения электронной почты:
<address> <a href="mailto:redaktor1@mail.ru "> Отзывы присылайте </a><br>
Главный редактор <br>
</address>
ВЫДЕЛЕНИЕ ТЕРМИНА
В документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю.
Тег <dfn> применяется для выделения таких терминов при их первом появлении в тексте. Браузеры отображают содержимое контейнера <dfn> с помощью курсивного начертания.
HTML-код:
<dfn>Капителью</dfn> в типографике называется текст, набранный прописными буквами уменьшенного размера.
ПЕРЕНОС ТЕКСТА
Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.
<p>Самое длинное слово из химии</p>
<p> метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
Ни один браузер при переносе текста не добавляет символ дефиса.
При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса ­.
УМЕНЬШЕНИЕ ТЕКСТА
В HTML размер шрифта измеряется в условных единицах от 1 до 7. Средний размер текста, используемый по умолчанию, равен 3. Таким образом, добавление тега <small> уменьшает текст на одну условную единицу. Допускается применение вложенных тегов <small>, при этом размер шрифта будет меньше с каждым уровнем.
<small>Текст</small>
<h3>УМЕНЬШЕНИЕ ТЕКСТА</h3>
<p><small>Средний размер текста равен 3 условным единицам</small></p>
<p><small><small>Уменьшаем размер текста на единицу</small></small></p>
<p><small><small><small>Уменьшаем размер текста еще на одну единицу </small></small></small></p>
АББРЕВИАТУРА
Тег <abbr> указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
<abbr>Текст</abbr>
<p><abbr title="World Wide Web Consortium">W3C</abbr> организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. </p>
ВЫДЕЛЕНИЕ ТЕКСТА ЖЕЛТЫМ ЦВЕТОМ
Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chromeи Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.
<p>
История о том, как возле столовой появились загадочные розовые следы с <mark> шестью пальцами </mark>, и почему это случилось.
</p>
РАСКРЫВАЕМЫЙ БЛОК
Тег details позволяет создавать раскрываемый блок, который по умолчанию скрыт.
Данный элемент содержит тег summary, который представляет заголовок для блока, и этот заголовок отображается в скрытом режиме.
<details>
<summary>Флагманы 2015</summary>
<p>iPhone 6S Plus </p>
<p>Nexus 6P </p>
<p>Galaxy S6 Edge </p>
<p>Lumia 950 XL </p> </details>
Вскоре Вы узнаете больше о HTML, а также узнаете начальные навыки, следите за моим каналом, спасибо.
