Выделить жирным текст в html – Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML

07.11.2019 Facebook Twitter LinkedIn Google+ Советы художника

Содержание

Жирный текст на CSS :: Kate-land

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

 

 

Жирный текст можно сделать несколькими способами:

  • с использование тега <b>
  • с использованием тега <strong>
  • прописав стили font-weight: bold

 

Первые два способа при отображении текста ничем не отличаются, но поисковые системы лучше воспринимают выделение с помощью strong. 

Рассмотрим примеры:

 

В этой строке одно слово выделено при помощи тега b, а другое — при помощи strong.

 

 

<p>В этой строке одно <b>слово</b> выделено при помощи тега b, а <strong>другое</strong> — при помощи strong.</p>

 

Выделять можно также при помощи CSS:

 

В этом предложении жирное слово выделено через css.

 

В этом предложении <span>жирное слово</span> выделено через css.

 

У некоторых тегов по умолчанию стоит жирность — это заголовки h2-h6, заголовки таблиц th. Для них жирность можно убрать в css при помощи того же свойства, только другого значения:

 

font-weight: normal

 

Так же жирность можно убирать для текста, который выделен тегами b и strong. Это применяется для того, чтобы ключевые слова в тексте были видны поисковикам, но не отвлекали при чтении читателей:

 

 

В этой строке одно слово выделено при помощи тега b, а другое — при помощи strong.

 

В этой строке одно <b>слово</b> выделено при помощи тега b, а <strong>другое</strong> — при помощи strong.

 

kate-land.net

Урок 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


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

Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег 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 - химическая формула воды.</p>
 
</body>

</html>

Демонстрация Скачать исходники
В браузере отобразится следующее

Тег 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. Сверу и снизу он выделяется отступами.

У данного тега есть следующие атрибуты:
align — выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width — фиксирует длину черты в пикселях или процентах
size — толщина линии
color — цвет линии
noshade — убирает рельефность линии

<html>

   <head>

   <title>Тег font в html</title>

   </head>

<body>
Обычная линия

<hr>
Линия по центру длиной 50% от ширины блока, толщина линии 2

<hr align="center" size=2 width=50%>
Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">
</body>

</html>

Демонстрация Скачать исходники
В браузере

Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!

tradebenefit.ru

Выделение текста: жирным, курсивом, подчеркнутым и зачеркнутым стилями

          Продолжаем. В данной статье рассмотрим стили текста html: жирный, курсив, подчеркнутый, зачеркнутый. Текст не может всегда быть однообразным. Его слова, фразы необходимо,  в некоторых случаях, как-то выделять. Для этого существует определенный ряд тегов. Теги стиля выделения: <b> и <strong>; <i> и <em>; тег <u>; а также <s> и <strike>.

Выделение жирным:
По типографскому стандарту в печати различают четыре вида насыщенности шрифта: светлое выделение, нормальное, полужирное и жирное. В системе HTML  можно установить только нормальное и жирное начертание и делают это с помощью двух тегов <b> или <strong>. Оба тега закрывающиеся.

                                                       

Сейчас открываем наш файл index_3.html в Блокноте. У кого его нет скачиваем здесь в формате index_3.rar. Вписываем указанные теги в первые строчки стихотворения, как показано на картинке Screen 1. Как всегда «Сохраняем». Полученный файл

                                                             
                                                                                                              Screen 1

 «Открываем» в браузере. Что мы видим? На Screen 2 показано, что все три строчки выделены жирным, в каких бы вариантах

                                                           
                                                                                                              Screen 2

 не были вставлены теги. Кроме того мы открывали этот файл в Opera и Firefox. Результат тот же. Текст в них отражается нормально. Можете проверить сами. Не будем вдаваться в подробности и забивать себе голову лишним: почему?, что? и как?

           Внимание! Еще раз повторяем, что наш курс «упрощенный», для начинающих. Он дает только «основные» навыки и понятия html построения. Но это не значит, что он неправильный. Наоборот, с его помощью, Вы сможете создавать свои первые веб-странички, переходя от простого к сложному. Все делается для того, чтобы проще и быстрее можно было понять и изучить наш «Основной курс».    

Выделение курсивом:
Курсивный шрифт представляет собой наклон в правую сторону отдельных букв, слов или целых предложений. Для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Происходит при помощи двух закрывающихся тегов <i> или <em>.

                                  

Вставляем,   как  в предыдущем  примере,   в разных вариантах теги курсива в наш файл.    1. Заключаем фамилию автора в тег <i>.
2. Делаем курсивом две нижние строчки стихотворения, Screen 3. Смотрим что получилось, Screen 4.

                                                                                                    
                                                                   Screen 3.

                                 
                                                                   Screen 4.

На картинке видно, две последние строчки и фамилия автора выделены курсивом. Проверяем в других интернет-обозревателях. Все в порядке. Теги работают везде нормально. Что и требовалось доказать.

Подчеркнуть и зачеркнуть текст:
Здесь все делаем как в предыдущих разделах. Подчеркиваем зоголовок стихотворения используя тег <u>. Зачеркиваем оставшиеся строчки стиха тегами <s> и <strike>. Смотрим Screen 5 и Screen 6.

                                  
                                                                    Screen 5.

                                 
                                                                    Screen 6.

       Все выше изложенные теги  прошли проверку на интернет-обозревателях Uran, Opera, Mozilla, Yanex, Google Crome. Ни каких искажений показа на экране не отмечено. Дополнительные сведения об отдельных тегах, тем кому потребуются более точная информация, можно получить в «Cправочнике  html».
         Выделять  жирным, курсивом, подчеркивать и зачеркивать можно не только фразы, но и отдельные слова, а также отдельные буквы и цифры.
          На последок переименуем Копию index_3.html, в файл index_4.html и Сохраним. 
 

luksucheba.ucoz.ru

Размер текста в CSS, жирный текст CSS

В прошлой теме мы рассмотрели установку шрифтов для текста. В этой теме мы рассмотрим, как изменить размер текста в CSS, сделать текст жирным и установить другие свойства текстовых элементов.

Стиль, вариант, ширина и размер текста

Для установки размера текста используется свойство font-size. Размер указывается в любых доступных в CSS единицах. Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно много, вы можете найти их в справочниках. Использовать их неудобно, обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер текста:

Стиль:

+

1
2
3
4
5
6

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>

7
8
9
10

#fo
  {
  font-size: 30px;
  }

HTML код:

14

<p>Текст</p>

Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство font-style. Оно может принимать следующие значения:

font-style: normal — обычный шрифт (по умолчанию)

font-style: italic — курсивный шрифт

font-style: oblique — наклонный шрифт

font-style: inherit — значение принимается от родительского элемента

У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному.

Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style:

Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного размера. Для этого используется свойство font-variant. Оно принимает следующие значения:

font-variant: normal — нормальный шрифт (по умолчанию)

font-variant: small-caps — прописные буквы выглядят как заглавные

font-variant: inherit — значение принимается от родительского элемента

Добавим селектору #fo свойство font-variant:

11

font-variant: small-caps;

Если увеличить ширину шрифта, то можно сделать жирный текст. В CSS Это делается с помощью свойства font-weight. Оно принимает такие значения:

font-weight: normal — обычный текст

font-weight: bold — жирный текст

font-weight: inherit — принимает значение от родительского элемента

Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal, а число 700 значению bold. Но числа работают не со всеми шрифтами, а также они не работают в некоторых браузерах, поэтому они редко используются.

Добавим селектору #fo свойство font-weight:

Существует совойство font, в котором можно указать все перечисленные свойства, а также шрифт. Значения свойств перечисляются через пробел в таком порядке: стиль, вариант, ширина, размер, шрифт. Для примера добавим на страницу тэг <span> и установим для него свойство font:

Стиль:

14
15
16
17

#s1
  {
  font: italic small-caps bold 30px Arial;
  }

HTML код:

22

<span>Текст</span>

Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства font-family, можно перечислить несколько шрифтов через запятую. Добавим на страницу ещё один тег <span> и установим ему свойство font, но по-другому:

Стиль:

18
19
20
21

#s2
  {
  font: 20px Tahoma, Verdana, sans-serif;
  }

HTML код:

27

<span>Текст</span>

Цвет текста

Цвет текста устанавливается с помощью свойства color. Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS. Для примера установим цвет тэгу <span>, который мы создавали ранее. Добавим селектору #s2 свойство color:

Высота строки

Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство line-height. Оно устанавлявает высоту строки. Высота строки состоит из размера шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей, то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то строки будут пересекаться. Свойство line-height может принимать такие значения:

line-height: normal — обычный интервал (по умолчанию)

line-height: число, на которое будет умножен размер шрифта

line-height: высота в единицах измерения, доступных в CSS

line-height: проценты от размера шрифта

line-height: inherit значение принимается от родительского элемента

Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта и высоту строки:

Стиль:

7
8
9
10
11

#text
  {
  font-size: 20px;
  line-height: 30px;
  }

HTML код:

34
35
36
37
38
39

<p>Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк
</p>

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

Отступ первой строки

В абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для установки этого отступа есть свойство text-indent. Значением этого свойства является отступ в единицах измерения, существующих в CSS.

Установим отступ большому абзацу. Для этого селектору #text добавим свойство text-indent:

Выравнивание текста

Выравнивание текста устанавливается с помощью свойства text-align. Оно принимает следующие значения:

text-align: left — по левому краю (по умолчанию)

text-align: right — по правому краю

text-align: center — по центру

text-align: justify — по ширине. Используется для текстов длинной более одной строки.

Добавим на страницу абзац и выравнем текст в нём по центру. Обратите внимание — выравнивается не сам элемент а текст внутри него:

40

<p>Выравнивание по центру</p>

Декорирование текста

Декорирование — это оформление текста определённым образом. Оно устанавливается с помощью свойства text-decoration. Оно принимает такие значения:

text-decoration: none — без декорирования

text-decoration: underline — подчёркнутый текст

text-decoration: overline — надчёркнутый текст

text-decoration: line-through — зачёркнутый текст

text-decoration: inherit — значение принимается от родительского элемента

Для примера создадим абзац с подчёркнутым текстом:

41

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

basecourse.ru

Выделяем текст. Жирный шрифт. HTML-пособие для начинающих

Компьютеры 19 августа 2014

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

Жирный шрифт как способ выделить главное

Наиболее ярко и броско выглядят слова, выделенные с помощью жирного шрифта. Такие слова и фразы сразу бросаются в глаза. Итак, для того чтобы научиться быстро выделять в тексте нужные места, следует запомнить специальный HTML-код. Жирный шрифт выставляется с помощью парного тэга <b> </b>.

Перед словом или фразой, предложением, которые должны быть выделены, ставится открывающий тэг <b>. После последней буквы в тексте, который следует выделить, ставится закрывающий тэг </b>. Все, что оказывается между этими двумя тэгами, при отображении в браузере имеет жирное начертание.

Другие варианты выделения

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

Так, можно выделить текст курсивом с помощью парного тэга <i> </i>, подчеркнуть его с помощью <u> </u>. Это наиболее простые способы выделения текста.

Есть также менее известные и используемые тэги, с помощью которых можно выделять слова и предложения в тексте. Так, для того чтобы перечеркнуть текст, достаточно использовать <s> </s>. Сделать текст моноширным поможет парный тэг <tt> </tt>. Если вам нужно создать верхний индекс, используйте <sup> </sup>, нижний — <sub> </sub>.

При этом, как и ранее, нужный вам текст должен находиться между открывающим и закрывающим тэгом. Как видите, нет ничего сложного, главное – запомнить данные коды или записать их.

Видео по теме

Использование нескольких шрифтов

Если вы хотите сделать текст более выразительным, вы можете использовать не только жирный шрифт. HTML-разметка позволяет одновременно выделять слово с помощью нескольких начертаний. Так, можно одновременно сделать слово жирным, перечеркнутым и курсивным.

При этом надо помнить одно – все тэги должны закрываться последовательно. Например, правильная запись может быть такой:

  • <i><u><b> выделенный текст </b></u></i>.

Если же вы закроете тэги в другом порядке, то текст будет выделен неправильно. Пример ошибочной записи:

  • <i><u><b> выделенный текст </u></b></i>.

В таком случае браузер запутается и не поймет, что именно вы от него хотите.

Кстати, тут можно отметить, что три варианта начертания – жирное, подчеркнутое и курсивное — запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.

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

Выводы

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

Для того чтобы изменить начертание шрифта, следует использовать любой известный вам тег. Жирный шрифт HTML-страницы — наиболее яркий и заметный, а потому используется наиболее часто для выделения.

Источник: fb.ru

monateka.com

Как выделить текст жирным с помощью HTML Как? Так!

Содержимое:

2 метода:

Язык разметки HTML позволяет выделить текст жирным без особых проблем, причем даже сразу несколькими способами. Впрочем, будет лучше, если вы потратите пару минут, изучая базовые правила каскадных таблиц стилей — CSS, и добавите их в документ, чтобы уже потом работать именно там. Суть в том, что куда проще управлять внешним видом веб-страницы из CSS, в том числе и тогда, когда что-то нужно выделить жирным.

Шаги

Метод 1 Создание жирного текста с помощью HTML

  1. 1 <strong>Используйте тег strong</strong>. В HTML5, согласно спецификации, выделять текст лучше именно так. Почти всегда этот тег выделит текст жирным.
    • Поместите текст, который нужно выделить, внутри тегов: <strong>именно тут</strong>.
  2. 2 Используйте заголовки, если это уместно. Как правило, их размещают в верхних частях страницы или в начале нового раздела. По умолчанию, заголовки отображаются крупнее и жирнее обычного текста, хотя и тут не без тонкостей. Есть шесть уровней заголовков, от 1 до 6:<h2> — <h6>. Follow these guidelines when using them:
    • Заголовок h2 пишется так: <h2>заголовок первого уровня</h2>, и это самый важный, крупнейший заголовок страницы.
    • <h3>Заголовок h3</h3> — для второго по значимости заголовка, ну и так далее вплоть до самого <h6>заголовка h6, самого мелкого из всех</h6>.
    • Использовать заголовки нужно аккуратно, в меру, единственно для упорядочивания контента страницы. Пользователь должен иметь возможность увидеть заголовок как можно быстрее, чтобы понять, под ним ли нужный ему контент.
    • Создавая подзаголовки, стоит опускаться всего на уровень за раз. Иными словами, не надо ставить после <h2> сразу <h4>. Так форматирование страницы при конвертации в иной формат не собьется.
  3. 3 <b>В крайнем случае, используйте тег b</b>. Тег <b> все еще поддерживается в HTML5, но <strong> куда как лучше. Использовать <b> можно в том случае, когда текст выделяется в стилистических, не семантических целях — например, для выделения ключевых или словарных слов, названий товаров и так далее.
    • Как и большинство тегов, <b> — парный, управляющий помещенным внутрь него текстом</b>.

Метод 2 Создание жирного текста с помощью CSS

  1. 1 Запомните, когда стоит использовать CSS. CSS — очень мощный и удобный инструмент редактирования внешнего вида страницы. Собственно, CSS — это то, как страница «выглядит», тогда как HTML – то, что она «значит». Конечно, в тегах HTML нет ничего плохого, ими можно пользоваться, но лучше все же работать с CSS — вы получите больше контроля над тем, как именно будет выглядеть ваш текст.
    • Откройте простую HTML-страницу в разных браузерах. Заметили, что она отображается слегка по-разному в каждом? С помощью CSS можно свести эту разницу к минимуму.
  2. 2 Добавьте к тексту тег <span>. Если вы еще не владеете CSS, то начать стоит с так называемого «inline CSS» — «встроенных таблиц стилей», если угодно. Этим, конечно, можно пользоваться, чтобы менять вид тегов вроде <p> или <h2>, но порой так можно поменять и такой текст, который еще не взят в какие бы то ни было теги. Тег <span></span> — это как бы обертка, которая сама по себе никакого эффекта или влияния не оказывает, но дает нам возможность привнести нужные изменения на страницу. Вот пример:
    • <span>Я учусь выделять текст жирным с помощью inline CSS.</span>
  3. 3 Добавьте атрибут style. Атрибуты в HTML пишутся прямо в теге, прямо в галочках < >. Атрибут style необходим для вставки CSS-кода в HTML-тег, так что вставьте style= в тег span:
    • <span style=>Я учусь выделять текст жирным с помощью inline CSS..</span>
    • Зачем добавлять атрибут style, если не добавлять сам стиль? Мыслите верно. Но мы здесь излагаем все пошагово!
  4. 4 Добавьте свойство font-weight. Свойства CSS добавляются как часть атрибута, в нашем случае — как часть атрибута style, а именно «font-weight» (жирность шрифта, если буквально). Это свойство может быть использовано для задания начертания шрифта, причем не только жирного, но и экстра-жирного, тонкого или нормального. После знака = напишите «font-weight: «. Должно получиться примерно так:
    • <span>Я учусь выделять текст жирным с помощью inline CSS..</span>
    • Пока сделайте паузу, ничего больше не пишите (и да, еще не все).
    • Не забудьте поставить кавычки до и после font-weight:.
  5. 5 Добавьте значение bold. Что осталось? Правильно, задать свойству атрибута значение! Куда его вставить? Правильно, между font-weight: и закрывающей кавычкой. У этого свойства есть несколько разновидностей, отличающихся жирностью начертания, и проще всего будет воспользоваться значением bold:
    • <span>Я учусь выделять текст жирным с помощью inline CSS.</span>
  6. 6 Поэкспериментируйте с другими значениями. CSS дает куда больше возможностей, чем HTML, так что не думайте, будто вы связаны по рукам и ногам. Вот несколько альтернатив значению «bold»:
    • <span>»Bolder» — так текст всегда будет жирнее родительского элемента, сколь бы жирным тот ни был сам по себе.</span> Если весь параграф выделен с помощью «bold,» то «bolder» поможет выделить еще жирнее, скажем, отдельное предложение, находящееся в нем.
    • <span>»Normal» — такой текст будет выглядеть как обычно, даже когда находится внутри тега, выделяющего текст жирным.</span>
    • <span>Для задания жирности текста можно использовать значения от 100 до 900. 400 — обычное начертание, жирное — от 700 и выше.</span>

Советы

  • Используя в CSS для задания жирности цифровые значения, используйте те, что кратны 100. Все иные значения все равно будут округляться в большую сторону.
  • Внешний CSS-файл, что и говорить, куда удобнее того, о чем рассказывается в этой статье — так можно будет из одного файла управлять внешним видом всех страниц сайта сразу!
  • Нельзя сделать шрифт жирнее, чем заложено в него изначально типографами. Работая с CSS, помните — шрифт будет меняться согласно стандарту. Соответственно, разницы между двумя жирными вариантами шрифтов вы не увидите (точнее, можете и увидеть — но это уже зависит от шрифта).

Прислал: Большакова Ольга . 2017-11-05 16:41:41

kak-otvet.imysite.ru

HTML5 | Форматирование текста

Форматирование текста

Последнее обновление: 08.04.2016

Ряд элементов html предназначены для форматирования текстового содержимого, например, для выделения жирным или курсивом и т.д. Рассмотрим эти элементы:

  • <b>: выделяет текст жирным

  • <del>: зачеркивает текст

  • <i>: выделяет текст курсивом

  • <em>: выделяет текст курсивом, в отличие от тега <i> носит логическое значение, придает выделяемому тексту оттенок важности

  • <s>: зачеркивает текст

  • <small>: делает текст чуть меньше размером, чем окружающий

  • <strong>: выделяет текст жирным. В отличие от тега <b> предназначен для логического выделения, чтобы показать важность текста. А <b> не носит характера логического выделения, выполняет функции только форматирования

  • <sub>: помещает текст под строкой

  • <sup>: помещает текст над строкой

  • <u>: подчеркивает текст

  • &ltins>: определяет вставленный (или добавленный) текст

  • <mark>: выделяет текст цветом, придавая ему оттенок важности

Применим все эти элементы:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Форматирование текста в HTML5</title>
	</head>
	<body>
		<p>Форматирование в <mark>HTML5</mark></p>
		<p>Это <b>выделенный</b> текст</p>
		<p>Это <strong>важный</strong> текст</p>
		<p>Это <del>зачеркнутый</del> текст</p>
		<p>Это <s>недействительный</s> текст</p>
		<p>Это <em>важный</em> текст</p>
		<p>Это текст <i>курсивом</i> </p>
		<p>Это <ins>добавленный</ins> текст</p>
		<p>Это <u>подчеркнутый</u> текст</p>
		<p>X<sub>i</sub> = Y<sup><small>2</small></sup> + Z<sup><small>2</small></sup></p>
	</body>
</html>

metanit.com

Comments
Leave Comment