Содержание
Форматирование текста | htmlbook.ru
Форматирование текста — средства его изменения, такие как выбор начертания
шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1
перечислены основные теги, которые применяются для изменения оформления текста.
Код HTML | Описание | Пример |
---|---|---|
<b>Текст</b> | Жирное начертание текста | Текст |
<i>Текст</i> | Курсивное начертание текста | Текст |
<sup>Текст</sup> | Верхний индекс | e=mc2 |
<sub>Текст</sub> | Нижний индекс | H2O |
<pre>Текст</pre> | Текст пишется как есть, включая все пробелы | Текст |
<em>Текст</em> | Курсивный текст | Текст |
<strong>Текст</strong> | Жирное начертание текста | Текст |
Любые теги форматирования текста можно использовать совместно друг
с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом
используется сочетание тегов <b> и <i>
(пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Текст</title> </head> <body> <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. Но вот беда — никто не смеет принять его вызов.</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов <sup> и <sub>
сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Текст</title> </head> <body> <p><b>Формула изумруда:</b> <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p> </body> </html>
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги <strong> и <em>
выполняют те же функции, что теги <b> и <i>,
но написание последних короче, привычней и удобней.
Следует отметить, что теги <b> и <strong>, также
как <i> и <em> являются не совсем эквивалентными
и заменяемыми. Первый тег <b> — является тегом физической
разметки и устанавливает жирный текст, а тег <strong> —
тегом логической разметки и определяет важность помеченного текста. Такое разделение
тегов на логическое и физическое форматирование изначально предназначалось,
чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода
информации. Теоретически, если воспользоваться, например, речевым браузером,
то текст, оформленный с помощью тегов <b> и <strong>,
будет отмечен по-разному. Однако получилось так, что в популярных браузерах
результат использования этих тегов равнозначен.
текст
HTML по теме
- Тег <b>
- Тег <em>
- Тег <i>
- Тег <strong>
- Тег <sub>
- Тег <sup>
Статьи по теме
- Форматирование текста
Как сделать текст в HTML (топ 10 запросов)
Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.
Теги сообщают браузерам, как и в каком месте страницы, отображать текст. Для этого придуманы специальные теги. Мы не пишем, текст, просто так.
Хорошего Вам дня!
Текст, всегда заключают, между тегами, например, внутри абзаца.
<p>Пожелайте мне удачи!</p>
Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.
Как сделать текст в центре
По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега div, выравнивает текст по центру.
<div>Поставьте меня в центр</div> // HTML
div {
text-align: center; // CSS
}
Как сделать текст справа
<div>Хочу стоять справа</div> // HTML
div {
text-align: right; // CSS
}
Как сделать отступ текста
За отступы текста отвечают свойства – margin и padding. Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения — пикселях или в относительных — %, em, rem.
<p>Отодвинься от меня</p> // HTML
p {
margin: 20px; // CSS
padding: 10px;
}
Как сделать текст жирным
Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.
<p>Хочу быть <b>жирным</b></p> // HTML
или выделять участок тегом span и задавать степень жирности в CSS правилах.
<p>Хочу быть <span>самым жирным</span></p> // HTML
span {
font-weight: bolder; // CSS
}
или указывать жирность в цифрах.
span {
font-weight: 700; // в интервале 100 - 900
}
Как сделать ссылку в тексте
Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.
<p>Вам следует перейти по этой <a href="http://yandex.ru">ссылке</a></p> // внешняя ссылка
<p>У меня тут есть <a href="page_5.html">хорошая статья</a></p> // внутренняя ссылка
Как сделать текст в рамке
Рамка задается не тексту, а блочному тегу, в котором находится этот текст.
<p>Я - важный текст</p> // HTML
p {
border: 2px solid pink; // толщина, сплошная, цвет
padding: 15px; // воздух между рамкой и текстом
}
Как сделать текст подчеркнутым
Нужное место, обрамляем тегом u.
<p>Прошу здесь <u>подчеркнуть</u> меня</p> // HTML
Как задать тексту фон
Сделать фон для всего абзаца.
<p>Хочу выделиться фоном</p> // HTML
p {
background-color: pink; // CSS
}
Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.
<p>Нет, только <span>розовый цвет</span></p> // HTML
span {
background-color: pink; // CSS
}
Как увеличить текст
<p>Посмотрите, какой я большой</p> // HTML
p {
font-size: 30px; // CSS
}
Как сделать текст курсивом
Через тег i в разметке.
<p>Здесь я прямой, а тут - <i>курсивом</i></p> // HTML
CSS стили + тег
<p><span>Курсивом</span> - я особенный</p> // HTML
span {
font-style: italic; // CSS
}
Итого
Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.
Создано 29.07.2019 10:29:18
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
HTML-тег — GeeksforGeeks
Улучшить статью
Сохранить статью
- Уровень сложности:
Средний - Последнее обновление:
24 фев, 2022
Улучшить статью
Сохранить статью
HTML (язык гипертекстовой разметки) используется для разработки веб-страниц с использованием языка разметки. Это комбинация гипертекста и языка разметки. HTML использует различные типы тегов для создания веб-страниц и Тег
Примечание: Этот тег устарел, начиная с HTML2, и его не рекомендуется использовать. Вместо этого вы можете использовать тег
или тег в качестве лучшей альтернативы для этого. Syntax:
Example 1:
HTML
<
html
>
<
head
>
<
title
>Page Title
title
>
head
>
<
Body
>
<
H3
> Добро пожаловать в GFG
H3
>
>
>
0049 < Plaintext
>
Это онлайн -платформа обучения
>
9003
>
>
9003
HTM>
9003
HTM>
9003
>
9003
.
Вывод:
Здесь мы видим, что после тега открытого текста все, что находится под ним, отображается совершенно просто, без какого-либо редактирования, а также может игнорироваться внешний CSS, если он применяется к файлу HTML.
Example 2:
HTML
<
html
>
<
head
>
<
title
>Page Title
title
>
head >
0
<
body
>
<
h3
>Welcome To GFG
h3
>
<
plaintext
>
Это платформа для онлайн-обучения
<
b
>GeeksforGeeks00 >
body
>
html
>
Output:
Related Articles
What's New
Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство просмотра нашего веб-сайта. Используя наш сайт, вы
подтверждаете, что вы прочитали и поняли наши
Политика в отношении файлов cookie &
Политика конфиденциальности
: элемент Plain Text (устаревший) — HTML: язык гипертекстовой разметки
устаревший: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.
HTML-элемент
отображает все, что следует за начальным тегом, как необработанный текст, игнорируя любой последующий HTML. Закрывающий тег отсутствует, так как все после него считается необработанным текстом.
Предупреждение: Не используйте этот элемент.
-
устарел, начиная с HTML 2, и не все браузеры реализовали его. Браузеры, которые реализовали это, не делали этого последовательно. -
<открытый текст>
устарел; браузеры, которые принимают его, могут вместо этого рассматривать его как элемент
, который все еще интерпретирует HTML внутри. - Если
является первым элементом на странице (кроме любых неотображаемых элементов, таких как
), вообще не используйте HTML. Вместо этого используйте текстовый файл с MIME-типом text/plain
. - Вместо
используйте элемент
или, если он семантически точен (например, для встроенного текста), элемент <код>
элемент. Экранируйте любые символы <
, >
и и
, чтобы браузеры непреднамеренно анализировали содержимое элемента как HTML.