Текст в 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>
Браузер покажет:
- Пункт первый
- Пункт второй
- Пункт третий
Тег < ul > < /ul > — создает маркированый, неупорядоченный список, между начальным и конечным тегами должны присутствовать один или несколько элементов < li >, обозначающих отдельные пункты списка. В маркированном списке значения атрибута type такие:
- disc — закрашенный кружок,
- circle — незакрашенный кружок,
- square — закрашенный квадратик.
Пишем пример:
<ul type="circle"> <li> Пункт первый </li> <li> Пункт второй </li> <li> Пункт третий </li> </ul>
Браузер покажет:
- Пункт первый
- Пункт второй
- Пункт третий
Этого для начала вполне достаточно, а теперь перейдем далее к тегам включения ссылок.