Как сделать жирный текст в html: несколько простых способов
Приветствую вас, любителей разобрать что-то новенькое и пополнить свой сундук знаний новой информацией! После прочтения статьи вы узнаете, как сделать жирный текст в html, какие еще существуют виды начертаний и какие элементы за это отвечают. А в результате ваш сайт сможет похвастаться читабельным текстом с верно выделенными ключевыми моментами.
В прошлых статьях я много говорил об атрибутах и тегах веб-языков, о методах оформления внешнего вида и структуры сайтов, но ни разу не затрагивал некий объект, без которого не сможет прожить ни один сайт. Это текст.
При чем не просто сплошной набор букв, а грамотно разделенный на параграфы, с выделением ключевых слов, цитат, ссылок и т.д. Для этого в языках css и html предусмотрены специальные инструменты начертаний. Приступим же!
Возможности начертания в html
Шрифт текстового контента всегда можно видоизменить. Например, задать жирное начертание или курсивное, а также его можно декорировать.
Для этого существуют простые теги, которые очень легко запомнить и после применять. Ниже представлена таблица элементов, которая разъясняет их предназначение.
| Видоизменение текста | Теги |
| Жирное выделение контента | <b>, <strong> |
| Курсивное выделение контента | <i>, <em> |
Для начала разберемся с жирным начертанием текстовых элементов.
Чтобы увеличить толщину букв, существуют такие парные теги как <b> и <strong>. В современных браузерах использование этих инструментов отображается одинаково, так как они форматируют текст в жирный. Однако их предназначение различно. Поэтому их нельзя назвать эквивалентными и использовать только какой-то один из них.
Так, тег <b> создавался с условием изменения стандартного шрифта в насыщенный и утолщенный. Он относится к физическому виду начертания и никакой смысловой нагрузки не несет.
А <strong> предназначен для акцентирования внимание на ключевом моменте. Это логический элемент, который во время разговора выделялся бы интонацией.Так скажем, это просто разновидность отображения теста.
Так скажем, это просто разновидность отображения теста.Теперь рассмотрим такие теги, как <i> и <em>.
Они форматируют стандартный шрифт в курсивный. Думаю, вы зададите логически возникающий вопрос: «А эти элементы тоже разняться между собой по принципу тегов <b> и <strong>?». Вопрос правильный. И вы правы!
Действительно, единица языка разметки <em> предназначена для установки акцентов на важных моментах и деталях, в то время как <i> всего лишь разновидность внешнего вида содержимого.
Инструменты видоизменения шрифтов в css
Css не отстало и предлагает девелоперам похожие инструменты для редакции текста. Это такие свойства, как text-decoration и font.
text-decoration – это универсальный параметр, который дополняет шрифт некими деталями.
Так, текст можно «заставить» мигать (blink), подчеркнуть (underline) или зачеркнуть (line-through), провести линию над словами (overline), унаследовать характеристики родительского объекта (inherit) или очистить формат шрифта от всех дополнений (none).
Вторым часто применяемым механизмом для редактирования текстового контента является свойство font. С его помощью можно изменять стиль шрифта (font-style), его размер (font-size), задавать капитель, т.е. указывать вид строчных букв (font-variant), а также «играться» с начертанием (font-weight).
А вот и пример
Учитывая всю информацию, которую я рассказал выше, попытаемся создать такой код примера, в котором по максимуму используем полученные знания (напоминаю, что код можно набрать в блокноте).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset=utf-8">
<title>Видоизменение текста</title>
<style type="text/css">
h2 {
font-size: 32px;
font-weight: lighter;
font-style: oblique;
text-decoration: overline;
}
p {
font-variant: small-caps;
font-size: 18px;
}
em {
text-decoration: line-through;
}
</style>
</head>
<body>
<h2>Создаем заголовок для <strong>нового</strong> абзаца!</h2>
<p>Пишем текстовый контент самого абзаца, который <em> <b>мигает</b> </em>. |
Запустите пример в браузере и обратите внимание на оформление стилей. Так, заголовок выделен светлым наклоненным начертанием с подчеркиванием над предложением. Абзац же отображается маленькими прописными буквами. При этом в тексте есть логические и физические выделения слов.
Теперь вы сможете отредактировать текстовое наполнение своих сайтов по всем правилам. Подписывайтесь на обновления моего блога и приглашайте друзей. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 1073 раз
Урок 3. Заголовки и форматирование текста
Заголовки в HTML
Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h2, h3, h4, h5, h5, h6. Они идут в порядке от самого большого, до самого маленького: h2 — самый большой заголовок, h3 — чуть меньше, ну а h6, последний из них, соответственно самый маленький.
<html>
<head>
<title>html заголовки</title></head>
<body><h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5></body>
</html>
| Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы. |
Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тегЧаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.
<html>
<head>
<title>html параграфы</title>
</head>
<body><p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p></body>
</html>
У тега p есть атрибут align, который отвечает за выравнивание параграфа.
Может иметь следующие значения:
left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине
| Атрибут align есть и у заголовков (тег h), и у параграфов (тег p). |
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру
<html>
<head>
<title>html выравнивание параграфов</title>
</head>
<body><p align="left">Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>
</body>
</html>
Также существует тег center
Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.<html>
<head>
<title>центрирование в html</title>
</head>
<body><center>Текст по центру</center>
</body>
</html>
Как выделить текст полужирным в html?
strong — стандартное выделение текста жирным.b — выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные — это не четверть текста.
Старайтесь ограничить применение данного тега.Рассмотрим пример кода выделения текста жирным
<html>
<head>
<title>html выделение жирным</title></head>
<body><p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю,
например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p></body>
</html>
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
i — выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em — стандартное выделение курсивом. Нет ограничений в использовании.
cite — данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn — для выделения определений и терминов.
| Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд. |
Рассмотрим пример кода c выделением текста курсивом
<html>
<head>
<title>Допустим страница о машинах</title>
</head>
<body><i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году.
Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>.
Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p> </body>
</html>
Как выделить текст подчёркиванием в html?
u — стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)ins — так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием
Данные и в первом, и во втором случае будут выделен подчёркиванием.
Как сделать перечёркнутый текст в html?
Перечёркнутым выделяется текст в следующих тегахdel — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike
<html>
<head>
<title>Перечёркнутый текст в html</title>
</head>
<body>Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>
</body>
</html>
Как выделить текст в верхнем и нижнем индексах в html?
sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.sup — тег, отображающий текст выше уровня строки шрифтом меньшего размера.
<html>
<head>
<title>индексы в html</title>
</head>
<body><p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора.</p>
<p>H<sub>2</sub>O - химическая формула воды.</body>
</html>
</p>Тег font в html
Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностьюCSS данный способ быстро начал забываться.Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.
size — активные значения от 1 до 7. Шрифт по молчанию равен 3.
color — цвет текста. Если не задать параметр, то текст будет чёрным.
<html>
<head>
<title>Тег font в html</title>
</head>
<body><font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>
</body>
</html>
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.| Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup |
<html>
<head>
<title>Тег pre в html</title>
</head>
<body><pre>Как захотели ввести текст
так он и отобразился! =)</pre></body>
</html>
Другие теги для форматирования текста
Тег abbr обозначает аббревиатуру.
Аббревиатура — сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
<head>
<title>Тег abbr в html</title>
</head>
<body><abbr title="Hypertext Markup Language">HTML</abbr>
</body>
</html>
Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
<head>
<title>Тег acronym в html</title>
</head>
<body><acronym title="Hypertext Markup Language">HTML</acronym>
</body>
</html>
Горизонтальная черта в html или тег hr
Для обозначения горизонтальной линии в html используется тег hr.
