Параметры текста в HTML: шрифты, курсив, жирный и другие

Скачать материалы:

Скачать 6-ой видеоурок по HTML Размер: 3.18 MB, скачали: 468 раз.

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Приветствую вас в еще одном видеоуроке из курса по HTML от сайта info-line.net. В этом видеоуроке мы разберем еще несколько дополнительных параметров и стилей для текста. Не будем долго рассуждать и перейдем сразу к коду — там вы сами все увидите.

Как изменить шрифт?

Приступим к редактированию какого-нибудь нашего текста. Возьмем текст «Текст заголовка h3». Для начала, давайте изменим ему шрифт. Поставим «Verdana».  Если через запятую указать шрифты, то это означает, что если у человека на компьютере нет шрифта Verdana, то будет использоваться шрифт Arial. Впрочем, именно поэтому не стоит использовать редкие

шрифты. Зачастую их нет на компьютере у пользователя.

 <font face="Verdana, Arial" color="#CC0000"><h3>Текст заголовка h3</h3></font>
 

Как сделать текст курсивом?

Теперь давайте уберем тег <h3> и выделим текст курсивом. Используем теги <i></i>.

 <font face="Verdana" color="#CC0000"> <i>Текст курсивом<i><font>
 

Как сделать текст жирным?

Давайте текст, который прописан у нас курсивом, сделаем жирным, используя теги <b></b>.

 <font size="6" color="#0000FF"><b>Синий цвет</b></font>
 

Как сделать текст подчеркнутым?

А текст заголовка h4сделаем подчеркнутым, используя теги

<u></u>.

 <h4><u>Текст заголовка h4</u> </h4>
 

Давайте сохраним наш документ и перейдем в браузер. Как видите, «текст заголовка h4» у нас подчеркнутый, «текст курсивом» изображен курсивом, и «синий цвет» изображен жирным.

Как сделать текст перечеркнутым?

Переходим обратно в код. Давайте сделаем наш центрированный текст перечеркнутым, применяя теги  <s></s>.

 <center><s>Центрированный текст без использования тега p</s> </center>
 

Как сделать текст моноширным?

А текст, помещенный в тег <div> сделаем моноширным (буквы одинаковой ширины), используя теги <tt></tt>.

 <div title="текст"><tt>Какой-нибудь текст, помещенный в тег div</tt> </div>
 

Сохраняем страницу и переходим в браузер.  Как видим, «Какой-нибудь текст, помещенный в тег div» стал моноширным, а «Центрированный текст без использования тега p» — перечеркнутым.

Как написать текст в верхнем или нижнем индексе?

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

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

 <div title="текст"><tt>2+2=2<sup>2</sup></tt></div>
 <h4><u>Текст заголовка H<sub>3</sub></u> </h4><font face="Verdana" color="#CC0000"> <i>Текст курсивом<i><font>
 

Переходим в браузеры (скачать браузеры можно из первого урока) и проверяем. Как видите, выражение записано правильно и у текста «Текст заголовка h4»  цифра «3» изображена в нижнем индексе.

Как сделать текст большим и маленьким?

Есть еще два тега, изменяющие текст. Они довольно редко используются, однако я вам их покажу. Например, мы хотим сделать «Синий цвет» чуть меньше. Используем теги  <small></small>.

 <font size="6" color="#0000FF"><b><small>Синий цвет</small></b></font>
 

А «Центрированный текст без использования тега p» — чуть больше. Используем теги

<big></big>.

 <center><s><big>Центрированный текст без использования тега p</big></s> </center>
 

В переводе «big» означает «большой», а «small» — «маленький».

Сохраняем, переходим в браузер, обновляем страницу. Как видите, «Центрированный текст без использования тега p» стал больше, а «Синий цвет» — меньше.

На этом мы заканчиваем этот видеоурок и переходим к домашнему заданию. Оно будет следующее: вам необходимо написать статью (любую статью, например о том, как вы узнали о нашем сайте info-line.net) с использованием цветов текста и фона, параграфов и заголовков, тегов выравнивания текста, а также тех, тегов, которые мы только что разобрали.

Следующий видеоурок будет посвящен разбору домашнего задания. До встречи в следующем видеоуроке! 😉

Как сделать текст жирным в html

Известно, что язык HTML используется для написания документа через Интернет. Теперь при написании документа мы используем различные методы форматирования, чтобы наш документ выглядел хорошо. Задумывались ли вы когда-нибудь, как MS Word и Google Docs, существует ли какая-нибудь техника для выделения жирным шрифтом текста в HTML? Здесь мы рассмотрели возможные решения для выделения текста жирным шрифтом в HTML.

В этой статье мы расскажем вам о различных методах выделения текста жирным шрифтом в HTML и сосредоточимся на следующих результатах.

  • Как сделать текст жирным, используя тег в HTML?
  • Как выделить текст жирным шрифтом, используя свойство CSS в HTML?

Как сделать текст жирным, используя

ярлык?

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

тег в HTML.

Код:


<HTMLязык=»ан»>
<глава>
<заглавие>смелый</заглавие>
</глава>
<тело>
<див>
<пстиль=»Размер шрифта: 30px;»>
<б>Этот текст выделен жирным шрифтом с помощью ярлык.</б>
</п>
</див>
</тело>
</HTML>

В этом коде мы пишем текст между HTML тег, чтобы сделать текст жирным. А также увеличиваем размер текста, чтобы он был заметен.

Выход:

Этот вывод показывает, что мы успешно выделили текст жирным шрифтом с помощью HTML.

ярлык.

Как выделить текст жирным шрифтом, используя свойство CSS в HTML?

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

Пример 1
Давайте разберемся с использованием этого свойства на соответствующем практическом примере.

Код:


<HTMLязык=»ан»>
<глава>
<заглавие>жирный</заглавие>
</глава>
<тело>
<дивстиль=»Размер шрифта: 30px;»>
<пстиль=»шрифт: полужирный»;>
Этот текст выделяется полужирным шрифтом с помощью свойства CSS в HTML.
</п>
</див>
</тело>
</HTML>

В этом коде мы используем свойство font-weight и устанавливаем его значение жирным, что автоматически делает текст жирным в HTML. Вы также можете установить его значение жирнее, чтобы получить более жирный вес текста.

Выход

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

Пример 2
Теперь давайте посмотрим на другой практический пример, в котором мы попробуем выделить текст полужирным, задав пользовательские значения от 600 до 950 для свойства font-weight.

Код


<HTMLязык=»ан»>
<глава>
<заглавие>жирный</заглавие>
</глава>
<тело>
<дивстиль=»Размер шрифта: 30px;»>
<пстиль=»Шрифт: 600;»>
Этот текст выделяется полужирным шрифтом с помощью свойства CSS в HTML.
</п>
</див>
</тело>
</HTML>

В этом коде мы сделали текст жирным в HTML, используя свойство CSS font-weight с пользовательскими значениями.

Выход:

Вывод показывает, что мы успешно выделили текст в HTML, присвоив пользовательское значение свойству CSS font-weight.

Вывод

В HTML мы можем выделить текст жирным шрифтом, используя HTML тег и свойство CSS font-weight. Мы также можем использовать свойство font-weight, чтобы установить жирность текста, задав пользовательские значения. В этой статье мы рассмотрели различные методы выделения текста жирным шрифтом в HTML.

HTML полужирный

Скопируйте/вставьте коды для создания полужирного текста в HTML.

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

CSS Bold:

вес шрифта Свойство

CSS обеспечивает свойство font-weight , чтобы сделать ваш текст полужирным.

Вот пример:

Вы также можете указать «коэффициент жирности» (вместо того, чтобы просто указать жирный шрифт ). Другими словами, вы можете применять разные уровни жирности к разным текстам. Кроме того, вы даже можете указать, что текст должен быть

, а не , выделен жирным шрифтом. Чтобы узнать больше об этом, прочитайте о свойстве font-weight .

В приведенном выше примере используются встроенные таблицы стилей, однако я настоятельно рекомендую научиться использовать внешние таблицы стилей и классы CSS, так как это позволит вам применять стили ко всему веб-сайту за один раз.

HTML Bold:

Тег

Когда большинство людей думают о «HTML жирным шрифтом», они обычно представляют текст, выделенный полужирным шрифтом с помощью тега HTML

.

Вот пример создания «HTML полужирного шрифта» с использованием тега :

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

Итак, какой тег «HTML Bold» следует использовать?

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

В следующей таблице перечислены рассматриваемые теги HTML:

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

,

,

,
,
и
Используйте эти теги для определения различных уровней и
. заголовки.
<метка> Этот элемент представляет собой фрагмент текста в одном документе, помеченный или выделенный для справочных целей из-за его актуальности в другом контексте. Используйте этот тег, если хотите выделить определенное слово или фразу для справочных целей.
Содержание этого элемента очень важно. Используйте этот тег всякий раз, когда хотите передать важность определенного слова или фразы.

Вот что говорится в спецификации HTML о полужирном и другом выделенном тексте HTML:

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

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

Сочетание жирного шрифта CSS и полужирного шрифта HTML

На самом деле, комбинация CSS и HTML часто является лучшим способом выделения жирным шрифтом текста в HTML-документах.

Вы должны использовать HTML, чтобы определить значение размеченного текста, а затем использовать CSS, чтобы определить, как текст выглядит .

Как сказано в спецификации HTML:

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

Правильное использование сильного элемента в HTML (плюс пример кода) »

В тегах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: Руководство для начинающих
Что делает Правильное использование сильного элемента в HTML (плюс пример кода) ?
Элемент используется для обозначения текста, который имеет большее значение, чем окружающий текст. По умолчанию все браузеры отображают текст полужирным шрифтом.
Дисплей
встроенный
Использование
семантический

Пример кода

 

Глава 1: Правильное использование сильного элемента

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

Глава 1: Правильное использование сильного элемента

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

Внимание!

Вот что такое элемент . Используйте его, и вы фактически скажете:

«Посмотрите сюда! Эти слова важнее окружающих слов. Так что внимание!»

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

 

Примечание. Не используйте <strong> просто сделать слово жирным. Вместо этого используйте тег <b> тег или тег <span> элемент и CSS, чтобы сделать шрифт полужирным.

Используйте <strong> для обозначения важности, срочности или серьезности.

Давайте посмотрим, как это выглядит при отображении в браузере:

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

.bold{font-weight: жирный;}

This Word is

So Serious

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

 

Опасно: плавание в этом районе ограничено. Не заходить в воду.

Давайте посмотрим, что ваш браузер делает с вложенными тегами :

Опасно: купание в этом месте запрещено. Не заходить в воду.

Адам Вуд

Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.