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

Загрузить PDF
Загрузить PDF

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

Метод 1
Метод 1 из 2:

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

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Create-Bold-Text-With-HTML-Step-1-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В HTML5, согласно спецификации, выделять текст лучше именно так. Почти всегда этот тег выделит текст жирным.
    • Поместите текст, который нужно выделить, внутри тегов: <strong> именно тут </strong>.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4f\/Create-Bold-Text-With-HTML-Step-2-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Как правило, их размещают в верхних частях страницы или в начале нового раздела. По умолчанию, заголовки отображаются крупнее и жирнее обычного текста, хотя и тут не без тонкостей. Есть шесть уровней заголовков, от 1 до 6:<h1> - <h6>. Follow these guidelines when using them:
    • Заголовок h1 пишется так: <h1> заголовок первого уровня </h1>, и это самый важный, крупнейший заголовок страницы.
    • <h2> Заголовок h2 </h2> - для второго по значимости заголовка, ну и так далее вплоть до самого <h6> заголовка h6, самого мелкого из всех </h6>.
    • Использовать заголовки нужно аккуратно, в меру, единственно для упорядочивания контента страницы. [1] Пользователь должен иметь возможность увидеть заголовок как можно быстрее, чтобы понять, под ним ли нужный ему контент.
    • Создавая подзаголовки, стоит опускаться всего на уровень за раз. Иными словами, не надо ставить после <h1> сразу <h3>. Так форматирование страницы при конвертации в иной формат не собьется. [2]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/Create-Bold-Text-With-HTML-Step-3-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Тег <b> все еще поддерживается в HTML5, но <strong> куда как лучше. Использовать <b> можно в том случае, когда текст выделяется в стилистических, не семантических целях — например, для выделения ключевых или словарных слов, названий товаров и так далее. [3]
    • Как и большинство тегов, <b> - парный, управляющий помещенным внутрь него текстом</b>.
    Реклама
Метод 2
Метод 2 из 2:

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

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Create-Bold-Text-With-HTML-Step-4-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS — очень мощный и удобный инструмент редактирования внешнего вида страницы. Собственно, CSS — это то, как страница «выглядит», тогда как HTML – то, что она «значит». Конечно, в тегах HTML нет ничего плохого, ими можно пользоваться, но лучше все же работать с CSS — вы получите больше контроля над тем, как именно будет выглядеть ваш текст.
    • Откройте простую HTML-страницу в разных браузерах. Заметили, что она отображается слегка по-разному в каждом? С помощью CSS можно свести эту разницу к минимуму.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Create-Bold-Text-With-HTML-Step-5-Version-2.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Если вы еще не владеете CSS, то начать стоит с так называемого "inline CSS" - «встроенных таблиц стилей», если угодно. Этим, конечно, можно пользоваться, чтобы менять вид тегов вроде <p> или <h1>, но порой так можно поменять и такой текст, который еще не взят в какие бы то ни было теги. [4] Тег <span></span> - это как бы обертка, которая сама по себе никакого эффекта или влияния не оказывает, но дает нам возможность привнести нужные изменения на страницу. Вот пример:
    • <span>Я учусь выделять текст жирным с помощью inline CSS.</span>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b3\/Create-Bold-Text-With-HTML-Step-6.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Атрибуты в HTML пишутся прямо в теге, прямо в галочках < >. Атрибут style необходим для вставки CSS-кода в HTML-тег, так что вставьте style= в тег span:
    • <span style=>Я учусь выделять текст жирным с помощью inline CSS..</span>
    • Зачем добавлять атрибут style, если не добавлять сам стиль? Мыслите верно. Но мы здесь излагаем все пошагово!
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-Bold-Text-With-HTML-Step-7.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Свойства CSS добавляются как часть атрибута, в нашем случае — как часть атрибута style, а именно «font-weight» (жирность шрифта, если буквально). Это свойство может быть использовано для задания начертания шрифта, причем не только жирного, но и экстра-жирного, тонкого или нормального. После знака = напишите "font-weight: " . Должно получиться примерно так:
    • <span style="font-weight: ">Я учусь выделять текст жирным с помощью inline CSS..</span>
    • Пока сделайте паузу, ничего больше не пишите (и да, еще не все).
    • Не забудьте поставить кавычки до и после font-weight: .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Create-Bold-Text-With-HTML-Step-8.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Что осталось? Правильно, задать свойству атрибута значение! Куда его вставить? Правильно, между font-weight: и закрывающей кавычкой. У этого свойства есть несколько разновидностей, отличающихся жирностью начертания, и проще всего будет воспользоваться значением bold : [5]
    • <span style="font-weight:bold"> Я учусь выделять текст жирным с помощью inline CSS. </span>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-460px-Create-Bold-Text-With-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/Create-Bold-Text-With-HTML-Step-9.jpg\/v4-728px-Create-Bold-Text-With-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS дает куда больше возможностей, чем HTML, так что не думайте, будто вы связаны по рукам и ногам. Вот несколько альтернатив значению "bold": [6]
    • <span style="font-weight:bolder"> "Bolder" — так текст всегда будет жирнее родительского элемента, сколь бы жирным тот ни был сам по себе. </span> Если весь параграф выделен с помощью "bold," то "bolder" поможет выделить еще жирнее, скажем, отдельное предложение, находящееся в нем.
    • <span style="font-weight:normal"> "Normal" — такой текст будет выглядеть как обычно, даже когда находится внутри тега, выделяющего текст жирным. </span>
    • <span style="font-weight:900"> Для задания жирности текста можно использовать значения от 100 до 900. 400 — обычное начертание, жирное - от 700 и выше. </span> [7]
    Реклама

Советы

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

Дополнительные статьи

Как
создать простую веб страницу в Блокноте
Как
создать простую веб страницу с помощью HTML
Как
задать цвет фона в HTML
Как
добавить фоновое изображение в HTML
Как
создать ссылку для оплаты через PayPal
Как
комментировать в HTML
Как
задать ширину и высоту картинки с помощью HTML
Как
бесплатно разместить свой сайт в Интернете
Как
начать wiki–сайт
Как
сделать сайт в Word
Как
подчеркнуть текст в HTML
Как
создать ссылку на электронную почту в HTML
Как
использовать теги цвета шрифта в HTML
Как
бесплатно добавить игры на сайт
Реклама

Источники

  1. ↑ http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
  2. ↑ http://www.hobo-web.co.uk/headers/
  3. ↑ http://www.quackit.com/html/codes/bold/
  4. ↑ http://reference.sitepoint.com/html/core-attributes/style
  5. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
  6. ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
  7. ↑ http://www.w3schools.com/cssref/pr_font_weight.asp
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Об этой статье

На других языках
Эту страницу просматривали 53 956 раз.

Была ли эта статья полезной?

Реклама