Текст в HTML

В этом разделе рассмотрим теги форматирования текста в 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>

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

Первый абзац текста ……………………………………
…………………………………………………………………. конец абзаца.

Второй абзац текста …………………………………….
…………………………………………………………………. конец абзаца.

N — ый абзац текста ……………………………………..
…………………………………………………………………. конец абзаца.

Идем далее — тег < 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 > — м2 ),
    • < 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>

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

  1. Пункт первый
  2. Пункт второй
  3. Пункт третий

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

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

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

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

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

  • Пункт первый
  • Пункт второй
  • Пункт третий

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

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

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *