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

Содержание:

• Заголовки.
• Выделяем абзац.
• Задаем вид, цвет и размер шрифта.
• Теги выделения текста.
• Разделение текста горизонтальной линией.
• Списки.

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

Заголовки

Ну что, приступим? Заголовок – я думаю, нет необходимости объяснять, что это такое к тому же название говорит само за себя. В HTML заголовки обозначаются тегами < h1 > < /h1> . . . . .< h6 > < /h6 >, всего их шесть. Посмотрим на примере – прописываем код.

<h1>Самый крупный заголовок</h1>
<h3>Заголовок среднего размера</h3>
<h6>Самый маленький заголовок</h6>

В браузере получаем.

С размерами думаю все ясно, но как быть с расположением на странице? Для этого существует атрибут align, который имеет несколько значений:

• left – выравнивает по левому краю,
• center – элемент располагается по центру,
• right – выравнивает по правому краю,
• justify – выравнивает по ширине.

Пишем HTML – код.

<h1 align="left">Самый крупный заголовок</h1>
<h3 align="center">Заголовок среднего размера</h3>
<h6 align="right">Самый маленький заголовок</h6>

В браузере отображается.

Выделяем абзац

С заголовками разобрались переходим к выделению абзаца. Абзац в языке HTML обозначается тегом < p > < /p >, он так же имеет атрибут выравнивания align. А разрыв строки тегом < br >.

В HTML пишется:

<p>Первый абзац текста .................................. <br> .......................................................................... конец абзаца.</p>

<p>Второй абзац текста ................................... <br> .......................................................................... конец абзаца.</p>

<p>N - ый абзац текста .................................... <br> .......................................................................... конец абзаца.</p>

В браузере видим:

Задаем вид, цвет и размер шрифта

Идем далее – тег < font > < /font > определяет вид, цвет и размер шрифта текста. У этого тега имеются свои атрибуты, которые имеют сопределенные значения:

• • face – определяет наименование шрифта ( Arial, Verdana, Georgia и т.д.),
  • size – размер букв от 1 (наименьший) до 7 (наибольший),
  • color – обозначает цвет текста ( Red, Black – FF0000, 000000 ).

Пишем пример HTML-кода – шрифт: Georgia, размер: 4, цвет: синий.

<font face="georgia" size="4" color="blue"><p>Копирайт - это создание своего текста, которого нет ни в одном уголке интернета. Не сомневаюсь, что вы уже догадались, что копирайтинг - работа удаленная. Отсюда большой, и самый главный плюс - работа дома или в любой удобной обстановке. Заработок копирайтера пропорционально зависит от количества времени, затраченного на написание той или иной статьи. Поэтому он колеблется. Скажу прямо, у востребованного заказчиками копирайтера, заработок хороший.</p></font>

В браузере видим:

Теги выделения текста

Для выделения отдельных слов, а так же словосочетаний и даже определенных участков текста используются следующие теги:

• • < strong > < /strong > – оформляет текст жирным шрифтом,
  • < em > < /em > – оформление текста курсивом,
  • < u > < /u > – оформление текста подчеркиванием,
  • < strike > < /strike > – перечеркивает текст,
  • < sup > < /sup > – оформление текста верхним индексом ( м< sup >2< /sup > – м² ),
  • < sub > < /sub > – оформление текста нижним индексом ( H< sub >2< /sub >O – H2O ),
  • < tt > < /tt > – оформление текста моноширным шрифтом (печатная машинка),
  • < blink > < /blink > – мигающий текст (вот так),
  • < blockquote > < /blockquote > – с помощью этого тега можно выделить цитату.

Разделение текста горизонтальной линией

Для разделения текста горизонтальной линией применяется тег < hr >. Тег имеет атрибуты:

• size – определяет толщину линии в пикселах,
• width – определяет длину линии в пикселах или процентах от ширины окна браузера,
• align – выравнивание горизонтальной линии, может принимать следующие значения: left, center, right,
• color – определяет цвет линии,
• noshade – определяет способ закраски линии как сплошной, атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.

Пишем пример HTML-кода:

<hr size="5" color="red" width="50%" align="center">

Браузер отображает:

Списки

Так же для форматирования текста в HTML применяются списки. Обозначаются они тегами:

• < ol > < /ol > – нумерованный список,
• start – определяет первое число, с которого начинается нумерация пунктов (только целые числа),
• type – определяет стиль нумерации пунктов, может иметь значения:
  • “A” – заглавные буквы A, B, C …
  • “a” – строчные буквы a, b, c …
  • “I” – большие римские цифры I, II, III …
  • “i” – маленькие римские цифры i, ii, iii …
  • “1” – арабские цифры 1, 2, 3 …

Пишем пример:

<ol type="A" start="1">
<li> Пункт первый </li>
<li> Пункт второй </li>
<li> Пункт третий </li>
</ol>

Браузер покажет:

Тег < ul > < /ul > – создает маркированый, неупорядоченный список, между начальным и конечным тегами должны присутствовать один или несколько элементов < li >, обозначающих отдельные пункты списка. В маркированном списке значения атрибута type такие:

• disc – закрашенный кружок,
• circle – незакрашенный кружок,
• square – закрашенный квадратик.

Пишем пример:

<ul type="circle">
<li> Пункт первый </li>
<li> Пункт второй </li>
<li> Пункт третий </li>
</ul>

Браузер покажет:

Этого для начала вполне достаточно, а теперь перейдем далее к тегам включения ссылок.

Служебные теги с параметрами / К оглавлению / Ссылки в HTML