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

Leave a Comment / Html / By /

Начертание текста | HTML | CodeBasics

  • Жирное начертание
  • Курсивное выделение

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

Жирное начертание

Для выделения текста жирным используется один из двух парных тегов: <b> или <strong>:

<p>Code Basics — <b>курсы</b> по программированию.</p>

Code Basics — курсы по программированию.

<p>HTML — <strong>язык разметки гипертекста</strong></p>

HTML — язык разметки гипертекста

Оба примера иллюстрируют добавление жирного начертания к участку текста.

Но почему для визуально одинаковых результатов использовалось два разных тега? Дело в семантике, то есть смысловом значении. В данном случае смысловом значении тега:

  • <b> — простое выделение текста. Его можно использовать в любом месте для визуального выделения текста. Никакой смысловой нагрузки этот тег не несёт
  • <strong> — логическое выделение важного участка текста. Этот тег несёт смысловую нагрузку и размечает именно важную часть. Его не следует применять на всех участках подряд

Когда-то разработчики хотели, чтобы эти теги выглядели по разному и отличались с точки зрения поведения для браузера, но история пошла по чуть иному пути. Сейчас считается, что использование <b> избыточно и для визуального выделения нужно использовать CSS, а для важных участков <strong>

Курсивное выделение

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

Например:

<p><i>Code Basics</i> — <em>бесплатные курсы</em> по программированию</p>

Code Basics — бесплатные курсы по программированию

В этом примере были размечены две части текста:

  • Тегом <i> было размечено название портала Code Basics. Тег предназначен для визуального выделение текста курсивом и не несёт смысловой нагрузки
  • Тегом <em> была выделена фраза «бесплатные курсы». Это логический акцент на бесплатности курсов, который был придан предложению. Курсов много, а бесплатных нет, поэтому стоит добавить акцент на эту часть предложения

Задание

Добавьте в редактор фразу

Hexlet — hands-on programming courses

в которой слово «courses» сделайте жирным начертанием (физическая разметка), и выделите сочетание «programming» курсивом (логическая разметка). Не забудьте обернуть фразу в параграф

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

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

Прочитал урок — ничего не понятно 🙄

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

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

Полезное

  • Теги для визуального выделения короче, чем для смыслового. Это поможет запомнить, когда использовать

    <i> и <b>, а когда <em> и <strong>

  • В практике вместо <i> и <b> используют стилизацию с помощью CSS

Определения

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Параметры текста в 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

8 месяцев назад

от Мухаммад Хузайфа

Известно, что язык HTML используется для написания документа через Интернет.

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

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

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

Как сделать текст жирным с помощью тега

?

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

Код:




   жирный


   

 
 p>
            Этот текст выделен жирным шрифтом с помощью тега .
       


   


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

Выходные данные:

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

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

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

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

Код:




   жирный


   

 
 p>
            Этот текст выделен жирным шрифтом с помощью свойства CSS в HTML.
       


   


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

Вывод

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

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

Код




   жирный


   


       


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


   


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

Вывод:

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

Заключение

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

Об авторе

Мухаммад Хузайфа

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

Посмотреть все сообщения

More HTML Font Styles — Bold/Italic Codes

 

... Bold (More details…)
... Курсив (Подробнее…)
Подчеркивание (Подробнее …)
... … 9191414141414141414101414141414141414141414145.
... Телетип (Подробнее …)
4 . (Э=МС 2 ) (Подробнее…)
... Нижний индекс (H 2 0) (Подробнее. ..) 6 9035
Помимо форматирования текста с использованием элемента шрифта и его атрибутов — начертания, размера и цвета — существует множество других стилей шрифтов HTML, которые можно использовать для форматирования текста на веб-странице. Они подробно перечислены ниже вместе с примерами кодов:

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

    Пример:

    Ваш жирный текст будет здесь.


  • Курсив ~ Стиль шрифта курсив наклоняет текст вправо и, таким образом, может также использоваться для привлечения особого внимания к одному или нескольким словам. Вы можете использовать курсив вместо полужирного, если стиль полужирного шрифта слишком «громкий» для ваших целей. Курсив имеет множество других применений, и его использование во многом зависит от вкуса. Курсив часто формально применяется к названиям газет, журналов и книг, например, когда кто-то хочет упомянуть Нью-Йорк Таймс . Чтобы отобразить текст курсивом с помощью HTML, поместите нужный текст в теги ... .

    Пример:

    Здесь идет ваш курсив.


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

    Пример:

    Подчеркнутый текст будет здесь.

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

    Пример:

    Зачеркнутый текст будет здесь.

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

    Пример:

    Ваш текст телетайпа будет здесь.


    Стиль моноширинного текста также может быть создан с использованием тегов ... :

    Текст вашего кода находится здесь.

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

    Чтобы создать надстрочный текст, поместите нужный текст (обычно число) в теги ... .

    Пример:

    Такой-то официально заявил, что он очень одобряет последнее соглашение. 1 В другом месте, однако, сообщалось, что он не одобрил. 2

  • Подстрочный индекс ~ Этот тип текста опускается ниже базовой линии предыдущего текста и отображается более мелким шрифтом. Это можно использовать для отображения химических обозначений:

    Чтобы создать текст нижнего индекса, поместите нужный текст в теги ... .

    Пример:

    Химическое обозначение воды H форматировать текст на веб-странице, вам может быть интересно, как правильно комбинировать стили шрифтов.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *