Код html жирный шрифт – Ошибка 404

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

Содержание

Как сделать жирный шрифт в HTML

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

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

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

  • Тег <strong>. Он позволяет указать, какие элементы на странице являются важными и выделяет шрифт жирным.
  • Тег <b>. Он позволяет просто выделить текст, не наделяя его какой-либо важностью.

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

Давайте применим тег <strong> на практике. Заменим одну из книг на странице следующим кодом:

...
<h3>Совершенный код</h3>
<p>
    Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию.<br> 
    Сейчас эта книга полностью обновлена с учетом современных тенденций и технологий<br>
    и дополнена <strong>сотнями новых примеров</strong>, иллюстрирующих искусство и науку программирования.
    <br>
    Книга подойдёт для:
    <ul>
        <li>Начинающих</li>
        <li>Середнячков</li>
        <li>Опытных</li>
    </ul>
</p>
...

В браузере это выглядит так:

Если воспользоваться специальными возможностями операционной системы, в частности теми, которые позволяют запустить автоматическое чтение текста, то разницу можно услышать. Программа, читая текст, будет делать особый акцент на словах с тегом <strong>, выделяя их интонацией. Аналогично можно сказать о тегах <em> и <i>. Из этих двух программа будет выделять интонацией тег <em>. Об этих тегах мы поговорим в следующем уроке.

Раньше выделение ключевых слов на странице жирным шрифтом давало влияние на поисковую выдачу. Сейчас так делать не стоит — можно наткнуться на санкции со стороны поисковиков. Выделяйте реально значимые слова и фразы, которые будут важны для для людей, а не для роботов. Желаю вам удачи!

webshake.ru

Форматирование текста | htmlbook.ru

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста
Код HTMLОписаниеПример
<b>Текст</b>Жирное начертание текстаТекст
<i>Текст</i>Курсивное начертание текстаТекст
<sup>Текст</sup>Верхний индексe=mc2
<sub>Текст</sub>Нижний индексH2O
<pre>Текст</pre>Текст пишется как есть, включая все пробелы
Текст
<em>Текст</em>Курсивный текстТекст
<strong>Текст</strong>Жирное начертание текстаТекст

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body>   
   <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. 
   <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. 
   Но вот беда — никто не смеет принять его вызов.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов <sup> и <sub> сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body> 
  <p><b>Формула изумруда:</b>
  <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Нижний индекс в тексте

Теги <strong> и <em> выполняют те же функции, что теги <b> и <i>, но написание последних короче, привычней и удобней.

Следует отметить, что теги <b> и <strong>, также как <i> и <em> являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирный текст, а тег <strong> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

htmlbook.ru

seodon.ru | Учебник HTML — Как изменить шрифт?

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Изменение стилей шрифтов

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

<B>…</B> и <STRONG>…</STRONG> — выделяют текст полужирным шрифтом.

<I>…</I> и <EM>…</EM> — выделяют текст курсивом.

<SUP>…</SUP> — выводит текст в верхнем индексе, например E = mc

2.

<SUB>…</SUB> — выводит текст в нижнем индексе, например H2SO4.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег>…</тег> — подчеркивает текст.

<тег>…</тег> — надчеркивает текст.

<тег>…</тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение стилей шрифтов</title>
</head>
<body>
<p><b>Жирный шрифт.</b> <i>Курсив.</i></p>

<p><b><i>Жирный курсив.</i></b></p>

<p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p>

<p>Подчеркнутый параграф текста.</p>

<p>Обычный текст,
   <strong>зачеркнутый жирный.</strong>
</p>
</body>
</html>

Результат в браузере

Жирный шрифт. Курсив.

Жирный курсив.

H2SO4 — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Теперь хотелось бы сделать одно пояснение по поводу атрибута style. Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style. Его общий синтаксис следующий:

<тег>…</тег>

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег <SPAN> или что делать, когда нет нужных тегов

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

Итак, знакомьтесь — <SPAN>…</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега SPAN</title>
</head>
<body>
<p><span>Обычный текст без изменений.</span></p>

<p>Еще обычный текст.
 <span>Подчеркнутый.</span>
 <span>Зачеркнутый.</span>
</p>
</body>
</html>

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

Это и есть имена шрифтов, которые имеются на вашем компьютере и их используют не только Word или Writer, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.

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

ШрифтыСемейство
‘Comic Sans MS’cursive (рукописные)
Couriermonospace (моноширинные)
Arial, Helvetica, Verdana, Tahomasans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamondserif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег>…</тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения имени шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение имени шрифтов</title>
</head>
<body>
 <p>Это шрифт Arial, если его нет, то Verdana, а если
    и его нет, то любой другой из sans-serif.
 </p>

 <p>
    Это Comic Sans MS или любой cursive.
 </p>

 <p>Это опять Arial, Verdana или любой sans-serif.
    <span>
      А это Courier или любой monospace.
    </span>
 </p>
</body>
</html>

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

Ну что, разобрались в примере? Сделаю одно пояснение, понимание которого вам серьезно облегчит жизнь в будущем, хотя думаю многие уже догадались. Итак, если теги вложены друг в друга и несколько из них осуществляют изменения одного типа (например, меняют имя шрифта), то теги-потомки переопределяют свойства тегов-предков. Если же вложенные теги осуществляют разные изменения, то они дополняют друг друга, вот и все.

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

  • pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
  • px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
  • % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег>…</тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения размера шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размера шрифта</title>
</head>
<body>
 <p>Этот размер шрифта составляет 90% от размера
    в браузере по умолчанию.
 </p>
 <p>
    Этот размер составляет 90% уже от размера в теге BODY.
 </p>

 <h5>
  Размер шрифта заголовка составляет 120% от размера в BODY.
 </h5>
 
 <p>Это опять 90% от размера в браузере по умолчанию.
    <span>
      Размер этого шрифта 15 пунктов.
    </span>
 </p>
</body>
</html>

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Так.

<p>
 <span>
  Текст параграфа.
 </span>
</p>

Вот так.

<p>
 <span>
  <span>
   Текст параграфа.
  </span>
 </span>
</p>

Или вообще вот так.

<p>
   Текст параграфа.
</p>

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

<p>
   Текст параграфа.
</p>

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
  2. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
  3. Напишите один параграф в начале статьи и по два в каждом разделе.
  4. Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
  5. Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
  6. Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
  7. Напишите в последнем параграфе формулу спирта: C2H5OH.

Посмотреть результат → Посмотреть ответ

seodon.ru

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

Как запустить видеоурок:
  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) с использованием цветов текста и фона, параграфов и заголовков, тегов выравнивания текста, а также тех, тегов, которые мы только что разобрали. Следующий видеоурок будет посвящен разбору домашнего задания. До встречи в следующем видеоуроке! 😉

info-line.net

Как задать шрифт в html – начертание, стиль, размер и многое другое

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

Как задавали шрифт раньше

Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.

Задание шрифта в html правильным образом

Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:

Font-style. Определяет начертание текста. Принимает такие значения:

Normal – обычное.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Italic – курсив.

Oblique – наклонный текст. Он немного отличается от курсива, буквы склоняются немного вправо.

Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:

Normal – обычное поведение.

Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.

Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:

Normal – обычный текст

Bold – текст с жирным начертанием

Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.

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

Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.

К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.

Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту статью, где все описано более подробно.

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

Serif – с засечками

Sans-serif – без засечек, рекомендуется применять для основного текста.

Monospace – моноширинные, ширина каждой буквы одинакова, соответственно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Cursive – курсивные.

Fantasy – необычные, декоративные.

Каждое семейство подходит под разные потребности. Например, с помощью fantasy часто оформляют различные заголовки, а monospace используются для вывода машинного кода и т.д. Конкретнее узнать названия шрифтов вы можете, например, в текстовом редакторе или в фотошопе.

Сокращенная запись

Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности:

Font: font-style | font-variant | font-weight | font-size | font-family;

Font: font-style | font-variant | font-weight | font-size | font-family;

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

Как задать шрифт в html разным элементам

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

p a{ font-family: Verdana, sans-serif; }

p a{

font-family: Verdana, sans-serif;

}

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

table{ font: normal small-caps bold 12px Arial; }

table{

font: normal small-caps bold 12px Arial;

}

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

.header #logo{ font-family: fantasy; }

.header #logo{

font-family: fantasy;

}

Элемент с идентификатором logo, находящийся в блоке с классом header, получает шрифт по умолчанию из семейства декоративных.

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

webformyself.com

font-weight — жирный текст | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 2.0+ 3.5+ 1.3+

Описание

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

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

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter. Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.

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

Значение по умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontWeight=»900″

Синтаксис

font-weight: normal|bold|bolder|lighter|число|inherit;

Значения свойства

Значение Описание
normal Определяет стандартное написание символов.
bold Задает жирное начертание символов в тексте.
bolder Тоже самое, что и bold.
lighter тоже самое, что и normal.
100
200
300
400
500
600
700
800
900		 Определяет толщину шрифта по заданному значению, от 0 до 500 — стандартное начертание шрифта, от 600 до 900 — жирное начертание.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Следите за изменением шрифта.

div {
font-weight: normal;
}

puzzleweb.ru

HTML-теги для текста: выравнивание, размер, шрифт

Казалось бы, зачем знать HTML-теги для текста, если сейчас почти в любой админке есть удобный визуальный редактор, который выставляет их автоматически?

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

HTML-теги и атрибуты: основы синтаксиса

У любого текста есть скрытый код, который «объясняет» компьютеру, что и как нужно отобразить на экране. Вся информация записывается с помощью набора универсальных элементов.

По сути, HTML-теги для текста — это команды, которые добавляют на страницу определённые блоки или меняют их внешний вид. Правильный формат записи выглядит так:

Обратите внимание, что не все теги являются парными. Например, <BR> (пропуск строки) или <HR> (добавление горизонтальной линии) не нужно закрывать вообще.

Почему нельзя копировать статьи из Word и других программ в редактор сайта

Хотя современные офисные программы используют те же HTML-теги для текста, в 99% случаев родной код непригоден для веб-страниц. Даже если в самом приложении документ отображается нормально, при вставке на сайт форматирование может сбиться. Кроме того, из-за большого количества лишних тегов и атрибутов поисковики не могут адекватно проанализировать содержимое страницы. Что, в свою очередь, затрудняет продвижение вашего ресурса.

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

  1. “Прогнать” статью через «Блокнот» и только после этого вставить на сайт. Приложение стирает весь HTML, так что после этого придётся форматировать текст заново (с помощью инструментов редактора или вручную).
  2. Писать и публиковать статьи через LiveWriter. Популярный редактор блогов сразу генерирует правильный код. А в отдельной вкладке можно посмотреть, как будет выглядеть текст на сайте.
  3. Использовать HTML Cleaner. Этот онлайн-сервис уничтожает не весь код целиком, а только лишние фрагменты. С помощью фильтров вы выбираете, какие теги нужно сохранить. Здесь же есть мощный визуальный редактор для форматирования, который добавляет в код уже оптимизированные команды.

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

Абзацы

Данный элемент присутствует практически во всех статьях. Каждый абзац должен располагаться внутри такого контейнера — это упрощает форматирование и позволяет сохранить единый стиль на всех страницах сайта. Для удобства тег <p> всегда пишут с новой строки.

Выравнивание

Отдельный HTML-тег «Выравнивание текста» уже давно не используется. Вместо этого был создан универсальный атрибут ALIGN. Чтобы изменить положение текстового блока на странице, необходимо выбрать одно из 3-х значений — CENTER, RIGHT или LEFT. Точно так же можно задать выравнивание для других элементов — например, заголовков.

В некоторых ситуациях для выравнивания используют другие теги HTML. Текст по центру, например, можно расположить с помощью элемента <CENTER>…</CENTER>. Чем удобен отдельный тег? В отличие от атрибута, он работает с любым контентом, включая фото, видео, flash и т. д.

Заголовки и подзаголовки

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

В HTML используются шесть уровней подзаголовков — от <h2> до <H6>. В этой системе существует чёткая иерархия:

  • <h2>…</h2>. Основной заголовок (название статьи, товара в интернет-магазине и т. д.). В тексте может быть только один <h2>. Как правило, он содержит главный ключевик.
  • <h3>…</h3>. Подзаголовки второго уровня разбивают текст на смысловые блоки. Например, если вы составляете рейтинг ноутбуков, можно сделать несколько <h3> с названиями разных моделей.
  • <h4>…</h4>. Третий уровень нужен в случае, если текст между двумя <h3> также разбивается на небольшие блоки. В нашем примере это могут быть критерии оценки — «Производительность», «Память», «Видеокарта» и т. д. для каждой модели.
  • <h5>, <H5>, <H6>. На практике встречаются крайне редко. Но общий принцип тот же — они должны быть “вложены” в блок с подзаголовком высшего уровня.

Следите за сохранением правильной иерархии. Возвращаясь к нашему примеру, это означает, что нельзя сразу вписывать названия моделей как <h4> или <H5>. А тем более использовать для однородных по смыслу блоков подзаголовки разных уровней (допустим, выделить ноутбук, занявший последнее место в рейтинге, с помощью <H6>).

А вот схема, которая поможет моментально понять и запомнить правильную структуру заголовков в HTML.

Списки

Любые перечисления и инструкции лучше оформлять в виде списков, используя специальные HTML-теги для текста (типичная ошибка — просто несколько абзацев <p>,которые начинаются с дефиса или цифры).

Структура таких блоков очень проста. Вначале определяем тип списка — маркированный <UL>…</UL> или нумерованный <OL>…</OL>.

Все элементы находятся между открывающим и закрывающим тегами. Каждый пункт списка начинается с новой строки и имеет формат <LI>…</LI>. Количество элементов не ограничено.

Что можно изменить, используя этот HTML-тег? Размер текста, его шрифт и цвет — причём без добавления новых классов в CSS. Это очень удобно, когда нужно выделить только одно предложение или фрагмент.

<FONT> имеет несколько атрибутов:

  • Face. Позволяет менять шрифт текста. Можно перечислить несколько вариантов через запятую (Tahoma, Verdana). Если у пользователя не установлен первый шрифт, система просто использует альтернативу.
  • Size. Чтобы увеличить или уменьшить текст, укажите в кавычках значение от 1 до 7.
  • Color. В зависимости от дизайна можно выбрать один из стандартных оттенков (red, green, blue) или ввести код любого цвета на выбор.

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

Способы выделения текста

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

<B>…</B>. Чрезвычайно популярный HTML-тег. Жирный текст сразу бросается в глаза, а потому с его помощью удобно выделять важные тезисы и факты.

Многие путают теги <B> и <STRONG>. Визуально разницы нет, но работают они по-разному. Первый просто меняет внешний вид текста, а второй выполняет функцию «указателя» и выделяет самые важные фрагменты (тематические ключевые слова и фразы для SEO).

<I>…</I>. Изящный и строгий курсив идеально подходит для оформления научных терминов, иностранных слов и разнообразных цитат. В серьёзных изданиях наклонным текстом также выделяют названия произведений искусства.

<U>…</U>. Пожалуй, столько споров не вызывал ни один HTML-тег. Подчёркивание текста используется редко, так как данный способ выделения исторически закрепился за гиперссылками. Если же вы используете <U> в статьях, учтите, что это подходит только для коротких фрагментов — не более 1 строки.

<S>…</S>. Интересный тег, который позволяет сделать часть текста зачёркнутой. Очень актуален в рекламе — например, чтобы подчеркнуть контраст между старой и новой ценами.

<BIG>…</BIG>. Самый простой способ увеличить размер шрифта без каких-либо дополнительных параметров.

<SMALL>…</SMALL>. Работает по тому же принципу, что предыдущий тег. Текст, расположенный внутри, уменьшается относительно основного.

<SUP>…</SUP>. Правильное название такого формата — верхний индекс. В основном данный тег предназначен для математических степеней и сносок. Он уменьшает размер шрифта и смещает выделенный текст вверх.

<SUB>…</SUB>. Нижний индекс часто встречается в различных формулах. Выделенный фрагмент располагается ниже основного текста.

Смысловые контейнеры

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

<CODE>…</CODE>. Тег для добавления компьютерных кодов. Незаменим в статьях по программированию с примерами — команды не выполняются, а отображаются, как обычный текст.

<CITE>…</CITE>. Предназначен для оформления цитат — например, ключевых выдержек из интервью.

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

<ADDRESS>…</ADDRESS>. Дополнительный тег, в котором содержится информация об авторе, в том числе ссылки.

Разделительная линия <HR>

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

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

Научившись грамотно использовать теги для форматирования текста в HTML, вы не только сделаете свои статьи удобными для чтения, но и повысите эффективность SEO.

fb.ru

Comments
Leave Comment