HTML+CSS Работа с текстом

Уроки HTML+CSS: Работа с текстом в HTML

HTML- текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.

Теги заголовков

Тег <h1>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h1> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

<h1>Заголовок 1 уровня</h1>

Заголовок 1 уровня

1.2. Тег <h2>

Им обозначаются подзаголовки тега <h1>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

<h2>Заголовок 2 уровня</h2>

Заголовок 2 уровня

1.3. Тег <h3>

Показывает подзаголовки тега <h2>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

<h3>Заголовок 3 уровня</h3>

Заголовок 3 уровня

1.4. Теги <h3>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em2.33em соответственно.

<h3>Заголовок 4 уровня</h3>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

Заголовок 4 уровня

Заголовок 5 уровня
Заголовок 6 уровня

Для всех тегов доступны ‎глобальные атрибуты.

Теги для форматирования текста

Тег <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.

<b>Полужирный текст</b>
Полужирный текст

Тег <em>

Отображает шрифт курсивом, придавая тексту значимость.

<em>Пример текста</em>
Пример текста

Тег <i>

Отображает текст курсивом.

<i>Отображает текст курсивом</i>
Отображает текст курсивом

Тег <small>

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

<small>Уменьшенный текст</small>
Уменьшенный текст

Тег <strong>

Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.

<strong>Полужирный текст</strong>
Полужирный текст

Тег <sub>

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

<sub>Нижний индекс</sub>
Нижний индекс

Тег <sup>

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.

<sup>Степень</sup>
Степень

Тег <ins>

Выделяет текст в новой версии документа, подчёркивая его.
Для тега доступны следующие атрибуты: citedatetime.

<ins>Подчеркнутый текст</ins>
Подчеркнутый текст

Тег <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для тега доступны следующие атрибуты: citedatetime.

<del>Перечеркнутый текст</del>
Полужирный текст

Теги для ввода «компьютерного» текста

Тег <code>

Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.

<code>Программный код</code>
Программный код

Тег <kbd>

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

<kbd>Вводимый текст</kbd>
Вводимый текст

Тег <samp>

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

<samp>Пример текста</samp>
Пример текста

Тег <var>

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

<var>Пример текста</var>
Пример текста

Тег <pre>

Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.

<pre>Пример текста</pre>
Пример текста

Теги для оформления цитат и определений

Тег <abbr>

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

<abbr>Аббревиатура</abbr>
Аббревиатура

Тег <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для тега доступен атрибут cite.

<blockquote>Пример текста</blockquote>

Пример текста

Тег <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite.

<q>Пример текста</q>
Пример текста

Тег <cite>

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

<city>Пример текста</city>
Пример текста

Тег <dfn>

Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Для тега доступен атрибут title.

<dfn>Пример текста</dfn>
Пример текста

Абзацы, средства переноса текста

Тег <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».

<p>Пример текста</p>

Пример текста

Тег <br>

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

<p>Пример <br>текста</p>
Пример
текста

Тег <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

<p>Пример текста</p>
<hr>
<p>Текст за чертой</p>
Пример текста
<hr/ style=”border:1px solid #000;”> Текст за чертой
После ознакомления, вам нужно закрепить полученную информацию. Для этого:
  1. Создайте новый документ. Назовите его index.html
  2. Во внутрь документа пропишите базовый шаблон HTML. Его вы можете найти в этой записи http://prog-time.ru/bazovyj-kod-html/
  3. Внутри тега body пропишите теги которые были показаны в данном уроке.

Оставить комментарий

avatar
  Подписаться  
Уведомление о