Способы форматирования текста в html

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

Для выделения заголовков в текстовых блоках служат парные тэги <h1...h6>...</h1.../h6>. Тэг <h1>-выводит самый крупный шрифт, а <h6> самый мелкий. Этот тэг также может иметь атрибут выравнивания <align>. См. пример.

Пример:

<h1 align="center">Текст с тэгом <h1>, выровненный по центру</h1>

Текст с тэгом <h1>, выровненный по центру

<h6 align="right">Текст с тэгом <h6>, выровненный по правой стороне<⁄h6>

Текст с тэгом <h6>, выровненный по правой стороне

Вы наверное заметили, что некоторые слова в тексте выделены жирным шрифтом. Делается это парным тэгом ...<⁄b>. Весь текст, заключенный в этот тэг, будет выводиться полужирным шрифтом.

Если вы захотите выделить слово или часть текста наклонным шрифтом, следует применить парный тэг ...<⁄i>. Иногда может пригодиться текст, выделенный моноширинным шрифтом имитирующий шрифт печатной машинки. Для этого используется парный тэг <tt>...<⁄tt>. Ниже приведены некоторые тэги, которые непосредственно воздействуют на текст. См. пример.

Пример
Этот текст выводится жирным шрифтом<⁄b>
Этот текст выводится наклонным шрифтом<⁄i>
<tt>Этот текст выводится моноширинным шрифтом<⁄tt>
Подчеркнутый текст<⁄u>
<strike>~~Перечеркнутый~~<⁄strike>
<s>~~Перечеркнутый~~<⁄s>
Малый, относительно основного текста<⁄small>
Нормальный текст<⁄font>
<big>Большой, относительно основного текста<⁄big>
^{Верхний индекс}<⁄sup>
<_{Нижний индекс}<⁄sub>

Тэги  и  ставятся непосредственно перед текстом, на который вы хотите воздействовать. Эти тэги необходимы при написании формул, например H₂SO₄ или сносок, например ¹.

Кроме того существует ряд логических стилей. На первых порах нам может пригодится 2. Посмотрим их на примере:

-от английского слова emphasis - акцент 
-от английского слова strong emphasis - сильный акцент

Есть еще один тэг, который использует только моноширинный текст. Это тэг <pre>...</pre>. Особенность этого тэга состоит в том, что он выводит текст так, как вы его набрали, т.е. со всеми пробелами. Этот шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. Это полезно, например, при публикации стихов.

Тэг <hr> служит для рисования горизонтальной линии и может иметь атрибуты size - определяющего толщину линии в пикселах и/или width - определяющего длину линии в пикселах или в процентах от ширины экрана. Этот тэг одинарный и не требует закрытия. См. пример.

Пример:

<hr size=2 width=100%>

<hr size=4 width=70%>

<hr size=6 width=55%>

<hr size=8 width=20%>

Вы уже заметили, что текст может быть цветной. Для раскрашивания текста используется парный тэг ...<⁄font>, который имеет атрибут color. Атрибут color должен иметь значение цвета, выраженное в шестнадцатеричном виде. Кстати, вы можете скачать программку цветовой палитры с этого сайта или с сайта http://www.artlebedev.ru/tools/colors/. Эта маленькая программка выдает сразу код любого нужного вам цвета и даже больше: вы можете скопировать понравившийся цвет прямо с экрана монитора. А пока ее у Вас нету - используйте таблицу безопасных цветов.

Тэг  также может задавать размер size и вид шрифта face="arial", например Arial. Размер шрифта можно указывать от +4 (самый большой) до -2 (самый маленький). Раскрашивать, как вы уже успели заметить, можно и линии, нарисованные тэгом <hr> См. пример.

Пример:

<hr size=4 width=70% color="#FF3300">

Здесь располагается ваш текст, который вам необходимо подкрасить<⁄font>.

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

Теперь можем поговорить о фоне страницы. Цвет фона для всей страницы определяется атрибутом bgcolor в тэге <body> со значением цвета в шестнадцатеричном виде. Поэкспериментируйте с цветами, но помните о разумности ваших действий. Вы наверное уже видели сайты, на которые больше заходить не хочется. И это благодаря их фону.

Фоном можно сделать и любую картинку, указав в атрибуте background тэга <body> путь к этой картинке. Например, <body background="image/fon.jpg">. Где image - папка, в которой находится картинка, fon.jpg - сама картинка. С помощью атрибута text в тэге <body> можно задать цвет основного шрифта и изменять его в необходимых местах с помощью тэга . Если цвет не указан - основной цвет шрифта - черный. В тэге <body> можно одновременно задавать цвет шрифта и фона для всей страницы через пробел.

А теперь попробуем суммировать все наши полученные знания. Готовы? Тогда вперед.

<html> 
<head> 
<title>Это моя первая страничка</title> 
</head> 
<body bgcolor="#E6E6FA" text="Blue"> 
<h1 align="center">Проба пера</h1> 
<hr size=2 width=100% color="#9400D3"> 
Футбол - это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, кроме рук. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию желтой или даже красной карточкой. 
<hr align="center" size=2 width=50% color="#00BFFF"> 
Этот текст выводится жирным шрифтом, а этот текст - наклонным.  
<div align="center">
Мало ли причин может быть у замужней женщины для привода любимого супруга в бандитский притон. Может, ей благоверный наскучил, может у неё своя доля в этом деле, а может просто чёрный цвет к лицу.
Рабский труд самый непродуктивный. Человек, работающий из-под палки, не будет делать свою работу хорошо, даже если очень постарается.
</div> 
<hr align="center" size="2" width=350 color="#000000"> 
<big>Никогда не жалуйся</big>, даже на усталость. Никогда не показывай, что тебе плохо. <tt>Терпи, если хочешь быть сильным, учись терпеть и молчать</tt>. Никто не должен знать, что ты чувствуешь, о чём думаешь, какие у тебя есть <s>болезни</s> и слабости. 
Не все знают формулу серной кислоты, а она такая: Н2SO4 
<pre> Мне мудрость не была чужда земная,1
 Ища разгадки тайн, не ведал сна я.
 За пятьдесят перевалило мне,
 Что ж я узнал!? -- Что ничего не знаю.</pre>
1Омар Хайям 
</body> 
</html> 

Вот что у Вас должно получиться

HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку. Текст, расположенный между парными тэгами <ul> воспринимается как ненумерованный список и имеет атрибут type со значениями circle,square или disc. Каждый новый элемент списка следует начинать с тэга <li>, который может иметь те же атрибуты, если Вам необходимо выделить какие-либо пункты в списке. По умолчанию используется атрибут со значением disc. Давайте создадим вот такой список:

Пример:

<ul> 
<li type="circle">Маша</li> 
<li type="square">Даша</li>
<li type="disc">Наташа</li>
</ul> 

Результат:

Маша
Даша
Наташа

Как видите, все элементы списка имеют разную маркировку. Если использовать атрибут type с тэгом ul, маркировка элементов списка будет такой, какой указана в атрибуте.

Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры или буквы. Парный тэг <ol> используется с целью задания нумерованных списков, имеет атрибуты type со значениями 1, A, a, I, или i для задания вида нумерации и start для указания, с какого индекса начинается нумерация списка. Тэг <ol> включает в себя дополнительный элемент <li>, который задает элементы списка. Нумерация по умолчанию используется цифровая - 1,2,3 и т.д. Значения атрибута type следующие:

1 - 1, 2, 3 
A - A, B, C 
a - a, b, c 
I - I, II, III 
i - i, ii, iii 

Пример:

<ol type=1" start="2 
<li>Маша</li> 
<li>Даша</li>
<li>Саша</li>
<li>Глаша</li>
<li>Наташа</li>
</ol> 

Результат:

Маша
Даша
Саша
Глаша
Наташа

Список определений используется с целью создания словарей, глоссариев, содержаний и прочих перечней. Список определений несколько отличается от других видов списков. Для задания списка определений служит парный тэг <dl>, а вместо тэгов <li> в списках определений используются тэги <dt> и <dd>. Рассмотрим применение списка определений на примере глоссария:

Пример:

<dl> 
<dt>a 
<dd>Определение ссылки. 
<dt>abbr
<dd>Аббревиатура.
</dl> 

Результат:

a: Определение ссылки.
abbr: Позволяет дать аббревиатуре всплывающую подсказку при наведении на нее мышкой.

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

Пример:

<h2>HTML поддерживает несколько видов списков </h2> 
<dl> 
<dt>Ненумерованные списки 
<dd>Элементы ненумерованного списка выделяются специальным символом и отступом слева: 
<ul> 
<li>Маша 
<li>Даша
<li>Саша
</ul> 
<dt>Нумерованные списки 
<dd>Элементы нумерованного списка выделяются отступом слева, а также нумерацией: 
<ol> 
<li>Маша 
<li>Даша
<li>Саша
</ol> 
<dt>Списки определений 
<dd>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно. 
Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности.  
Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле.  
</dl> 

У вас должно получиться так: На этом про списки все.

Мой совет

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

Ну, что ж, с текстовым блоком мы уже разобрались. Возникает вопрос: А как вставить на страницу картинку? Это мы узнаем уже в следующей главе.

Способы форматирования текста в html

Текст с тэгом <h1>, выровненный по центру

Текст с тэгом <h6>, выровненный по правой стороне

Реклама