Язык разметки HTML позволяет выделить текст жирным без особых проблем, причем даже сразу несколькими способами. Впрочем, будет лучше, если вы потратите пару минут, изучая базовые правила каскадных таблиц стилей — CSS, и добавите их в документ, чтобы уже потом работать именно там. Суть в том, что куда проще управлять внешним видом веб-страницы из CSS, в том числе и тогда, когда что-то нужно выделить жирным.
Шаги
-
<strong>Используйте тег strong</strong>. В HTML5, согласно спецификации, выделять текст лучше именно так. Почти всегда этот тег выделит текст жирным.
- Поместите текст, который нужно выделить, внутри тегов: <strong> именно тут </strong>.
-
Используйте заголовки, если это уместно. Как правило, их размещают в верхних частях страницы или в начале нового раздела. По умолчанию, заголовки отображаются крупнее и жирнее обычного текста, хотя и тут не без тонкостей. Есть шесть уровней заголовков, от 1 до 6:<h1> - <h6>. Follow these guidelines when using them:
- Заголовок h1 пишется так: <h1> заголовок первого уровня </h1>, и это самый важный, крупнейший заголовок страницы.
- <h2> Заголовок h2 </h2> - для второго по значимости заголовка, ну и так далее вплоть до самого <h6> заголовка h6, самого мелкого из всех </h6>.
- Использовать заголовки нужно аккуратно, в меру, единственно для упорядочивания контента страницы. [1] X Источник информации Пользователь должен иметь возможность увидеть заголовок как можно быстрее, чтобы понять, под ним ли нужный ему контент.
- Создавая подзаголовки, стоит опускаться всего на уровень за раз. Иными словами, не надо ставить после <h1> сразу <h3>. Так форматирование страницы при конвертации в иной формат не собьется. [2] X Источник информации
-
<b>В крайнем случае, используйте тег b</b>. Тег <b> все еще поддерживается в HTML5, но <strong> куда как лучше. Использовать <b> можно в том случае, когда текст выделяется в стилистических, не семантических целях — например, для выделения ключевых или словарных слов, названий товаров и так далее. [3] X Источник информации
- Как и большинство тегов, <b> - парный, управляющий помещенным внутрь него текстом</b>.
Реклама
-
Запомните, когда стоит использовать CSS. CSS — очень мощный и удобный инструмент редактирования внешнего вида страницы. Собственно, CSS — это то, как страница «выглядит», тогда как HTML – то, что она «значит». Конечно, в тегах HTML нет ничего плохого, ими можно пользоваться, но лучше все же работать с CSS — вы получите больше контроля над тем, как именно будет выглядеть ваш текст.
- Откройте простую HTML-страницу в разных браузерах. Заметили, что она отображается слегка по-разному в каждом? С помощью CSS можно свести эту разницу к минимуму.
-
Добавьте к тексту тег <span>. Если вы еще не владеете CSS, то начать стоит с так называемого "inline CSS" - «встроенных таблиц стилей», если угодно. Этим, конечно, можно пользоваться, чтобы менять вид тегов вроде <p> или <h1>, но порой так можно поменять и такой текст, который еще не взят в какие бы то ни было теги. [4] X Источник информации Тег <span></span> - это как бы обертка, которая сама по себе никакого эффекта или влияния не оказывает, но дает нам возможность привнести нужные изменения на страницу. Вот пример:
- <span>Я учусь выделять текст жирным с помощью inline CSS.</span>
-
Добавьте атрибут style. Атрибуты в HTML пишутся прямо в теге, прямо в галочках < >. Атрибут style необходим для вставки CSS-кода в HTML-тег, так что вставьте style= в тег span:
- <span style=>Я учусь выделять текст жирным с помощью inline CSS..</span>
- Зачем добавлять атрибут style, если не добавлять сам стиль? Мыслите верно. Но мы здесь излагаем все пошагово!
-
Добавьте свойство font-weight. Свойства CSS добавляются как часть атрибута, в нашем случае — как часть атрибута style, а именно «font-weight» (жирность шрифта, если буквально). Это свойство может быть использовано для задания начертания шрифта, причем не только жирного, но и экстра-жирного, тонкого или нормального. После знака = напишите "font-weight: " . Должно получиться примерно так:
- <span style="font-weight: ">Я учусь выделять текст жирным с помощью inline CSS..</span>
- Пока сделайте паузу, ничего больше не пишите (и да, еще не все).
- Не забудьте поставить кавычки до и после font-weight: .
-
Добавьте значение bold. Что осталось? Правильно, задать свойству атрибута значение! Куда его вставить? Правильно, между font-weight: и закрывающей кавычкой. У этого свойства есть несколько разновидностей, отличающихся жирностью начертания, и проще всего будет воспользоваться значением bold : [5] X Источник информации
- <span style="font-weight:bold"> Я учусь выделять текст жирным с помощью inline CSS. </span>
-
Поэкспериментируйте с другими значениями. CSS дает куда больше возможностей, чем HTML, так что не думайте, будто вы связаны по рукам и ногам. Вот несколько альтернатив значению "bold": [6] X Источник информации
- <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] X Источник информации
Реклама
Советы
- Используя в CSS для задания жирности цифровые значения, используйте те, что кратны 100. Все иные значения все равно будут округляться в большую сторону. [8] X Источник информации
- Внешний CSS-файл, что и говорить, куда удобнее того, о чем рассказывается в этой статье — так можно будет из одного файла управлять внешним видом всех страниц сайта сразу!
- Нельзя сделать шрифт жирнее, чем заложено в него изначально типографами. Работая с CSS, помните — шрифт будет меняться согласно стандарту. Соответственно, разницы между двумя жирными вариантами шрифтов вы не увидите (точнее, можете и увидеть — но это уже зависит от шрифта).
Реклама
Источники
- ↑ http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
- ↑ http://www.hobo-web.co.uk/headers/
- ↑ http://www.quackit.com/html/codes/bold/
- ↑ http://reference.sitepoint.com/html/core-attributes/style
- ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
- ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
- ↑ http://www.w3schools.com/cssref/pr_font_weight.asp
- ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Об этой статье
Эту страницу просматривали 54 468 раз.
Реклама