HTML Текст

Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче.
Напомним, что вся текстовая информация, отображаемая на сайте, размещается внутри элемента <body>.
Заголовки
Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы <h1>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела.

При использовании заголовков необходимо учитывать их иерархию, т.е. за <h1> должен следовать <h2> и т.д. Также не рекомендуется вкладывать в заголовки другие элементы.
Элемент <h1>
Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Элемент <h1> должен быть уникальным для каждой страницы сайта.
Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте заголовка.

Элемент <h2>
Представляет подзаголовки элемента <h1>.

Элемент <h3>
Показывает подзаголовки элемента <h2>.

Элементы <h4>, <h5>, <h6>
Обозначают подзаголовки четвёртого, пятого и шестого уровня. 
<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
Абзацы, средства переноса текста
Элемент <p>
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin, равное 1em, при этом поля соседних абзацев «схлопываются».

Элемент <br>
Переносит текст на следующую строку, создавая разрыв строки.

Элемент <hr>
Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии. 
<p>Земля <br> становится тяжелее день ото дня <br> из-за падающей на нее космической пыли.</p>
<p>Венера - единственная планета, вращающаяся по часовой стрелке.</p>
<hr>
<p>Юпитер больше, чем все остальные планеты вместе взятые.</p>
Элементы для форматирования текста
Несемантическая разметка
Это любые видимые нам изменения текста. Практически всем таким тегам по умолчанию в браузерах заданы стили. Так что напрямую за визуальное форматирование отвечает CSS.

Элемент <b>...</b>
Делает текст жирным. Его можно использовать в любом месте для визуального выделения текста. Никакой смысловой нагрузки этот тег не несёт.

P.s. Сейчас считается, что использование <b> избыточно и для визуального выделения нужно использовать CSS, а для важных участков <strong>.

Элемент <i>...</i>
Предназначен для визуального выделения текста курсивом и не несёт смысловой нагрузки.

Элемент <u>...</u>
Подчёркивает текст.
Случаев использования u не так много. Чаще всего его используют для выделения слов с орфографическими ошибками и для подчёркивания имён собственных в китайском языке.

Элемент <s>...</s>
Перечеркнутый текст.
Используется для содержимого, которое уже не является точным или актуальным. Элемент <s> не должен применяться для удалённого текста, для этой цели есть элемент <del>.

Элемент <mark>...</mark>
Применяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.
<p>Вот так можно вывести текст с <b>полужирным</b> начертанием шрифта.</p>
<p>Вот так можно отобразить текст <i>курсивом</i>.</p>
<p>Вот так можно отобразить <u>подчеркнутый</u> текст.</p>
<p>Вот так можно <s>перечеркнуть</s> текст.</p>
<p>Вот так можно <mark>выделить</mark> текст.</p>
Несемантическая разметка
Подстрочные и надстрочные элементы

Элемент <sub>...</sub>
Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.

Элемент <sup>...</sup>
Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
<p>Сейчас мы изучим формулу E=mc<sup>2</sup>.</p>
<p>В 2019 году концентрация CO<sub>2</sub> в атмосферном воздухе выросла на 2 ppm.</p>
Семантическая разметка
В языке HTML существует ряд текстовых элементов, не вносящих изменения в структуру веб-страницы, но добавляющих дополнительную информацию. Эти теги принято называть семантической (то есть смысловой) разметкой.
Это форматирование на уровне смысла и содержания. Оно нужно браузерам, вспомогательным и голосовым технологиям. Это особенно важно для программ чтения с экранов — скринридеров.

Элемент <strong>...</strong>
Также делает текст жирным и логически выделяет важный участок текста.
Этот тег несёт смысловую нагрузку и размечает именно важную часть. Его не следует применять на всех участках подряд.

Элемент <em>...</em>
Отображает шрифт курсивом, придавая тексту значимость.
Внешне отображение тега не отличается от тега <i>, но при этом элемент <em> используется только тогда, когда есть смысловая необходимость выделить текст.

Элемент <small>...</small>
Уменьшает размер шрифта на единицу по отношению к обычному тексту.

Элемент <ins>...</ins>
Выделяет текст в новой версии документа, подчёркивая его.
Для элемента доступны атрибуты cite и datetime.

Элемент <del>...</del>
Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для элемента доступны атрибуты cite и datetime.
<p>Игрушка содержит большое количество мелких деталей и <strong>не предназначена для детей младше пяти лет</strong>.</p>

<p>Я <em>думаю</em>, Анна была первой.</p>
<p>Я думаю, <em>Анна</em> была первой.</p>
Элементы для оформления цитат, аббревиатур и определений
Цитаты
Элемент <q>
Используется для выделения коротких цитат. Браузерами заключается в кавычки.

Элемент <blockquote>
Используется для длинных цитат, занимающих целый абзац.

Элемент <cite>
Применяется для выделения цитат, названий произведений, сносок на другие документы.

Элемент <bdo>
Используется для изменения текущего направления текста
<p>Станислав Лец утверждал: <q>Чаще всего выход там, где был 
    вход</q>.</p>

<hr>

<p>Возможно, Ленин использовал фразу А. П. Чехова из произведения 
  «Моя жизнь (рассказ провинциала)» гл. VI, первая публикация которого 
  была в приложении к «Ниве» в 1896 г.</p>
  <blockquote>
   Учиться нам нужно, учиться и учиться, а с глубокими
   общественными течениями погодим: мы ещё не доросли 
   до них и, по совести, ничего в них не понимаем.
  </blockquote>

<hr>

<p>Игра <cite>Diablo</cite> уносит нас в мир тёмного фэнтези 
  и основана на <cite>GURPS</cite> — универсальной системе ролевых игр,
  разработанной компанией Steve Jackson Games в 1986 году.</p>

<hr>

<p><bdo>А роза упала на лапу Азора</bdo></p>
Аббревиатуры и определения
Элемент <abbr>
Применяется для форматирования аббревиатур.
Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.

Элемент <dfn>
Позволяет выделить текст как определение.
Несмотря на наличие данного элемента, рекомендуется выделять текст силами CSS.
Элементы для ввода «компьютерного» текста
Элемент <code>...</code>
Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.

Элемент <kbd>...</kbd>
Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображает текст моноширинным шрифтом.

Элемент <samp>...</samp>
Применяется для выделения результата, полученного в ходе выполнения программы. Отображает текст моноширинным шрифтом.

Элемент <var>...</var>
Выделяет имена переменных, отображая текст курсивом.

Элемент <pre>...</pre>
Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
Элемент span
Тег <span> (от англ. span — интервал) - это контейнер для текста.

Span используют, если нужно выделить другим цветом отдельные слова, словосочетания и предложения, изменить размер шрифта, добавить другой фон, обвести рамкой участок текста.
Со span можно использовать атрибуты class="", title="" и lang=""

Это не семантический тег и влияет только на внешний вид элементов, если ему заданы стили. Для скринридеров и поисковых роботов он не имеет значения, но есть одно исключение.
Это исключение — трюк с атрибутом lang="". Если в тексте есть иностранные слова, то можно оборачивать их в span с указанием другого языка. Тогда скринридер прочтёт их с правильным произношением.

Пример, внутри абзаца <p> можно изменить цвет и размер первого слова, если его выделить с помощью элемента <span> и задать для него желаемый стиль.
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>SPAN</title>
  <style>
    span { 
     color: red; /* Красный цвет символов */ 
    }
  </style> 
 </head>
 <body>
  <p>Разумные люди приспосабливаются к окружающему миру. 
  Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется 
  действиями неразумных людей.</p> 
  <p>Автор: <span>Бернард Шоу</span></p>
 </body>
</html>
Списки
Списки — один из способов представления контента на странице. С их помощью легко группировать небольшие связанные фрагменты.

Для их создания в HTML используется несколько тегов, вложенных друг в друга:

  • <ul> или <ol> для определения типа списка
  • <li> для создания пункта списка
Общая схема разметки выглядит следующим образом:
<тип_списка>
  <пункт_списка>Текст</пункт_списка>
</тип_списка>
Маркированный список
Для создания маркированного списка используется тег <ul>.

Маркированные списки используются, когда информация не требует определённой последовательности.
Например, список продуктов. Не так важно, что будет куплено первым: молоко или хлеб, важно — купить все продукты.
<ul>
  <li>Молоко</li>
  <li>Хлеб</li>
  <li>Вода</li>
</ul>
Нумерованный список
Для группировки последовательной информации используются нумерованные списки, важной особенностью которых является наличие порядкового номера элемента.

Такие списки удобны, если обозначается последовательность действий, которые нужно совершить.
Нумерованный список создаётся с помощью тега <ol>, внутри которого также лежат элементы в тегах <li>.

Например, список дел на день:
<ol>
  <li>Купить еды</li>
  <li>Сходить в Цифру</li>
  <li>Приготовить ужин</li>
</ol>
Вложенные списки
Составляя список дел может возникнуть необходимость разбить пункты на несколько дополнительных подпунктов. Например, в списке дел пункт «Сходить в магазин» может содержать в себе список покупок.

Для создания такой структуры используются вложенные списки.
Это позволяет вкладывать в качестве элемента список не просто текст, а новый список, создавая сложную структуру:
<ul>
  <li>Сходить в магазин
    <ul>
      <li>Купить молоко</li>
      <li>Купить хлеб</li>
    </ul>
  </li>
  <li>Прийти на занятия в Цифру</li>
</ul>
Вложенный список является частью пункта списка и находится внутри тега <li>.
Такая вложенность позволяет сохранить семантику и указать, что вложенный список относится именно к пункту «Сходить в магазин», а не к какому-либо ещё.

Можно вкладывать списки разных видов друг в друга: маркированные в нумерованные и наоборот. Главное — следить за открытием и закрытием тегов. В случае ошибки браузер попытается самостоятельно исправить ошибку, но не всегда удачно.
Картинки
Картинки конечно же не относятся к тексту, но для лучшего восприятия текста на странице о них расскажем.
Они помогают ориентироваться в тексте, разбивать его на составные части, а также создают настроение у читателя.

Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок.
Для вставки картинки на страницу используется непарный тег <img>, у которого два обязательных атрибута: src и alt.

Атрибут src
В атрибуте src указывается путь к изображению. Это тоже ссылка, как и в теге <a>, только теперь не происходит перенаправление пользователя, а браузер загружает изображение по этому пути, если оно существует. Путь к картинке может быть как относительный, так и абсолютный.
<img src="/images.png">
Атрибут alt
Что делать, если картинка в данный момент недоступна? В этом случае браузеры показывают маленькую картинку, обозначающую, что изображение недоступно.

Но как пользователь поймёт, что здесь было? Может изображение критически важное для статьи, и без него теряется смысл написанного? Можно посоветовать пользователю зайти попозже, когда изображение будет доступно, а можно описать ему, что было изображено.

Для этого используется атрибут alt, значением которого является текст. Он будет показан при невозможности загрузить изображение.
<img src="https://cdn.pixabay.com/photo/2018/03/23/02/06/cute-3252459_960_720.jp" alt="Тут котик">
Размеры изображения
Важной составляющей при работе с изображениями являются его размеры. При скачивании картинки со стороннего ресурса и её вставки на страницу, часто возникает ситуация, что изображение очень большое, и его нужно уменьшить.
Для этого существуют атрибуты width и height, которые позволяют установить ширину и высоту для картинки.
<img src="https://cdn.pixabay.com/photo/2018/03/23/02/06/cute-3252459_960_720.jpg" alt="Тут котик" width="240" height="360">
Картинка будет отображена в размере 240x360 пикселей.

Важно помнить, что использование атрибутов width и height не меняет физический размер картинки — она будет весить столько же, изменится только визуальный размер. Для оптимизации страницы подбирайте картинки нужного размера или уменьшайте их с помощью графического редактора, либо специальных сервисов. Сейчас многие пользуются мобильными телефонами и мобильным интернетом, поэтому вес страницы имеет важное значение.
Практика
1. Воссоздай код
Воссоздайте код представленной ниже html-страницы. Используйте теги <p>, <dfn>, <em>, <strong>, <br>.

Подсказка: Для того, чтобы верно отобразились символы "<" и ">", используйте таблицу мнемоник символов - https://unicode-table.com/ru/html-entities/

В нашей задаче это &lt; - "<" и &gt; - ">". Пишется &lt;ul&gt;
2. Красим текст
Сделайте страницу по примеру ниже. Стили подключите отдельным файлом.
Для выделения используйте несемантические теги для выделения текста жирным и курсивным.
Паттерн возьмите с сайта http://css.yoksel.ru/css-patterns/ всему файлу.
В CSS-файле заголовкам задайте:
  • цвет #200772
  • выравнивание по центру

Абзацам:
  • Выравнивание по ширине, т.е. одновременное выравнивание по левому и правому краям (подсказка: свойства выравнивания)
  • Отступ первой строки (красная строка) на 40px
  • шрифт Sans-Serif
  • Размер текста 18px

Жирному начертанию:
  • цвет #9F3ED5

Курсивному начертанию:
  • цвет #4671D5

Когда закончите попробуйте изменить размер окна браузера и посмотреть что будет.

Текст для вставки:
Что такое CMS

CMS - «система управления контентом» (движок) – написанная PHP-программистами основа для сайта, с помощью которой вы сможете управлять сайтом (добавлять контент, менять пункты меню и т.п.) не зная HTML и CSS.

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

Какие бывают cms

Бывают различные системы управления контентом: для интернет-магазинов, для блогов, для форумов и т.д.

Примеры cms

Примеры популярных CMS: Joomla, WordPress (для блогов), PhpBB (для форумов).

CMS-ки бывают платные и бесплатные.
3. Немного списков
Сделайте страницу по примеру ниже. Стили подключите отдельным файлом.
В CSS-файле заголовкам задайте:
  • цвет #D8DAD3
  • выравнивание по левому краю
  • шрифт Sans-Serif
  • цвет фона #697537

К телу документа:
  • шрифт Sans-Serif
  • Размер текста 18px
  • цвет фона #D8DAD1

Текст для вставки:
Опоссум
Содержание:
1. Описание
  • Внешний вид и особенности
  • Где обитает
  • Чем питается
  • Характер и образ жизни
2.Популяция и статус вида

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

Итак, в природной среде обитает:
Опоссум обыкновенный
Опоссум виргинский
Водяной опоссум
Мышиный опоссум
Опоссум серый голохвостый
Опоссум патагонский

Интересный момент!
Некоторые виды предпочитают селиться рядом с человеческим жильем, хотя в основном опоссумы предпочитают не встречаться с человеком.
Предыдущее занятие | Следующее занятие