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

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

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

Програмный код: 
FOR i=1 TO 20  


Названия клавиш: 
Alt+F1  


Результат скрипта: 
Hello, PHP!  


Все пробелы между словами: 
Один Два Три - Попробуйте сами!
 



Програмный код: FOR i=1 TO 20
Названия клавиш: Alt+F1
Результат скрипта: Hello, PHP!
Все пробелы между словами:
Один Два Три - Попробуйте сами!
 Цитаты в HTML. Подчеркивание и перечеркивание текста
Тег 
 предназначен для подчеркивания текста, а тег 
 для его перечеркивания. Это теги физического форматирования текста, и, кроме визуального оформления, никакой смысловой нагрузки они не несут.

В каких случаях Вы будете использовать эти теги - решать Вам!

 
Подчеркнутый 
и 
перечеркнутый 
текст - Все!


 Подчеркнутый
 и перечеркнутый текст - Все!
Оформление цитат
Возможно, в процессе создания сайта, Вам понадобится вставить цитату на страницу.
Цитата - это дословная выдержка текста из какого-либо произведения. Желательно, чтобы цитируемый текст идентифицировался читающим лицом как вставленный. Для этого цитату необходимо выделить/оформить соответствующим образом.
В HTLM для этой цели существует специальный тег - 

. Текст, заключенный в этот тег, оформляется следующим образом: сверху и снизу от основного текста образуются промежутки, а слева и справа отступы (примерно по 40 пикселей
).


Как сказал Г. Ламене: 

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



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

 Несколько логических тегов
Мы не коснулись еще 3-х тегов, относящихся к группе логического форматирования: это теги 
, 
 и 
.
Теги 
и 
похожи. Первый из них предназначен для обозначения аббревиатуры, второй - акронима.
Акроним - это таже аббревиатура, только произносится он как единое слово, а не побуквенно.
Оба сокращения при просмотре в браузере подчеркнуты пунктирной линией, и к обоим желательно добавлять всплывающую подсказку - расшифровку сокращения (при помощи атрибута title

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

 
HTML  -
это аббревиатура - произносится побуквенно. 


 "Научно-исследовательский институт"
>
НИИ 
- это акроним. Акроним применяется как самостоятельное слово. 
 
Близнецы похожи 
как две капли воды 
. 


HTML - это аббревиатура - произносится побуквенно.
 
НИИ - это акроним. Акроним применяется как самостоятельное слово.
 
Близнецы похожи как две капли воды.

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

...
 и 
...
 - выделяют текст полужирным
 шрифтом.

...
 и 
...
 - выделяют текст курсивом
.

...
 - выводит текст в верхнем индексе, например E = mc 2 .

...
 - выводит текст в нижнем индексе, например H 2 SO 4 .
Все эти теги являются встроенными (inline, уровня строки)
, то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше - должен быть закрыт позже.
Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри 
 и 
. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.

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

<тег style=
"text-decoration:underline"
>...
 - подчеркивает
 текст.
<тег style=
"text-decoration:overline"
>...
 - надчеркивает
 текст.
<тег style=
"text-decoration:line-through"
>...
 - зачеркивает
 текст.
Пример изменения стилей шрифтов

 






Жирный шрифт. Курсив.
Жирный курсив.
H2SO4 - формула серной кислоты написанная курсивом.
Подчеркнутый параграф текста.
Обычный текст,
 зачеркнутый жирный.



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

Используя style
 вы совершенно
 ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.
Тег  или что делать, когда нет нужных тегов
Ну что, пока все понятно? Хорошо, тогда вопрос. А что вы будете делать, если вам, например, надо зачеркнуть не весь параграф, а только половину текста, причем не делать его ни жирным, ни курсивом? Ну да не переживайте, тут вам поможет один очень удобный и нужный тег.
Итак, знакомьтесь - ...
. Этот тег тоже является встроенным (inline, уровня строки)
 и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style
. Именно благодаря этому атрибуту, а вернее его разным значениям, у  появляются те или иные свойства. Вот так, а теперь изучаем пример.
Пример использования тега SPAN

 






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


Результат в браузере
Обычный текст без изменений.
Еще обычный текст. Подчеркнутый.
 Зачеркнутый.

Меняем имя (гарнитуру) шрифта
Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:
Это и есть имена шрифтов, которые имеются на вашем компьютере и их используют не только Word или Writer, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.
Я вам настоятельно не рекомендую применять какие-либо экзотические шрифты, так как их может не быть на компьютере человека, который зайдет к вам на сайт и тогда вместо букв он увидит разные непонятные символы или квадратики. Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:
По умолчанию практически все браузеры используют шрифт "Times New Roman", а чтобы его изменить используется все тот же атрибут style
, который можно применить внутри любого тега
. Общий синтаксис указания следующий:
<тег style="font-family:имя шрифта, семейство"
>...

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

 






 
Это шрифт 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="font-size:размер"

>...

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

 






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

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


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

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

 

 
 Текст параграфа.
 

 

 
 
 Текст параграфа.
 
Или вообще вот так.

 
Текст параграфа.

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

 
Текст параграфа.

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (" "), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?
Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.
Домашнее задание.
Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
Напишите один параграф в начале статьи и по два в каждом разделе.
Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки - 120%.
Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором - фразу из нескольких слов жирным курсивом. В третьем - подчеркните фразу выделенную курсивом. В четвертом - зачеркните половину фразы выделенной жирным.
Напишите в последнем параграфе формулу спирта: C 2 H 5 OH.

Приветствую всех читателей данной статьи и подписчиков моего блога! Сегодняшнюю публикацию я хочу посвятить теме, без знаний которой ваши интернет-ресурсы не будут читабельными и привлекательными: «Как в html задать шрифт». Сама по себе тема является легкой, и я уверен, что вы быстро ее освоите.
Однако не следует забывать, что веб-языки богаты на всевозможные инструменты оформления шрифтов, которые в идеале необходимо знать. После прочтения статьи вы уверенно овладеете форматированием текста, научитесь задавать различные стили, виды начертаний и украшений шрифтов, а также изменять размер и цвет как предложений, так и отдельных букв. Приступим же!
Шрифты бывают разные
Основная масса вывесок, прессы и литературы, сайтов и других сервисов используют стандартные шрифты. Хоть они и удобные, однако уже давно наскучили и не цепляют глаз. Именно поэтому многие дизайнеры несколько изменяют вид оформления или вовсе создают новые стили. Наиболее известными и влиятельными шрифтами считаются:
Helvetica;
Futura;
Garamond;
Bodoni;
Bembo;
Rockwell;
Times New Roman.

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

Также хочу подчеркнуть, что существует 5 единиц размерностей шрифтов.
Начнем с языка html и его «творческих способностей»


 
 
 
 
 
Название первого заголовка
 
Подзаголовок с красной буквы!
Здесь расположен первый абзац текущего примера. Для наглядности эти слова будут написаны курсивом.
 


Напомню, что атрибут align = «
center»
 задает отображение текста по центру.

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

Основные свойства, применяемые для форматирования контента, это font
 и его составляющие: text-decoration
.

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



Ключевые слова



font-family


Можно устанавливать как стандартные семейства шрифтов:
· без засечек (sans-serif);
· антиквенные (serif);
· декоративные (fantasy);
· курсивные (cursive);
· моноширинные (monospace),
Так и стандартные существующие стили (Arial, Calibri и т.д.).

font-size


Для установки абсолютной размерности символов используются обозначения: xx-small, x-small, small, medium, large, x-large, xx-large. Также можно задать уникальное значение.

font-weight


Отвечает за насыщенность текстового начертания. Изменяется в диапазоне  или задается при помощи слов normal, bold, lighter или bolder.

font-variant


Задает представление буквам, используя ключевые слова: small-caps, normal или inherit.

font-style


Устанавливает обычное (normal), наклоненное (oblique), курсивное (italic) начертание или наследует родителя (inherit).

font-stretch


Указывает плотность расположения букв. Можно указать такие значения: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed и inherit.

Свойство text-decoration
 помогает украсить текст дополнительными элементами, такими как подчеркивание (underline
), зачеркивание (line-through
), надчеркивание (overline
), а также наследовать параметры родителя (inherit
) или отменить все оформление (none
).
А теперь настало время для второго примера. Я взял предыдущий код и оформил его при помощи средств css. Так, заголовок был оформлен с тенью (при помощи свойства text-
shadow
) и с контуром вокруг (border-
color
). При этом одно слово я сделал крупнее. Также мне захотелось использовать параметр opacity
 для задания прозрачности подзаголовку.


 
 
 
 
 
 
Название первого заголовка
 
Полупрозрачный подзаголовок!
Здесь расположен первый абзац текущего примера. Для наглядности эти слова будут написаны курсивом.
 

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font
. По определению, тег font
 служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.
Тег font
 применяется следующим образом:

 
Конструктор сайтов "Нубекс"
Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color
 тега font
:
Конструктор сайтов "Нубекс"
Здесь задается синий цвет для слова, обрамленного тегом font
.
Но помимо параметра color, тег имеет и другие атрибуты.
Атрибуты тега FONT
Тег font
 имеет всего три атрибута:
color
 - задает цвет текста;
size
 - устанавливает размер текста;
face
 - задает семейство шрифтов.
Параметр color
 может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).
Атрибут size
 может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.
Рассмотрим применение этих атрибутов на нашем примере:

 
 
 
 
 
 
 
Конструктор сайтов "Нубекс"
 

Мы применили тег font
 к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.
Задание цвета текста при помощи CSS
Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

 
 
 
 
 
 
 
 
Конструктор сайтов "Нубекс"
 

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».