Текст в HTML, теги для форматирования текста: цвет, выравнивание, размер текста, заголовки, списки, спецсимволы и т. д.

В настоящее время, текст в HTML является основным способом подачи информации. Подавляющее большинство сайтов в Интернете состоят именно из текстового контента. Это означает, что создать свой сайт можно при умении, как минимум, читать, а как максимум — писать (в каждой шутке есть доля правды).

Если ты в предыдущем уроке последовал моим советам и поэкспериментировал с цветом текста, фона и т. д., то уже должен знать, что простой, неотформатированный текст можно добавить в html-страницу, просто поместив его между тегами < BODY> и < /BODY>.

Но такой текст не всегда удовлетворяет задумке создателя сайта и возникает необходимость какую-то часть текста как-то выделить или применить форматирование текста для подчёркивания его смыслового наполнения. Самое главное тут — соблюдать меру и следить за тем, чтобы всё было уместно и по делу. Даже стихами заговорил.

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

Содержание урока:

§1. Теория
§2. Сами теги для форматирования
§3. Абзацы
§4. Выравнивание текста
§5. Перенос строки и горизонтальная черта
§6. Заголовки
§7. Работа со шрифтами (цвет, размер и т.д.)
§8. Создание списков в HTML
§9. Заключение

§1. Теория

Здесь нужно коротко упомянуть о том, что такое текст в «электронном» виде. Я не буду подробно вдаваться в то, как он представляется в различных кодировках и системах. Скажу лишь о том, как связаны форматирование текста в HTML и его редактирование в текстовых редакторах.

Допустим, ты набрал текст в редакторе, произвёл его форматирование (выделил какие-то слова жирным или курсивом), либо сделал с ним что-то ещё. Затем скопировал и вставил текст в свой html-код. Открываешь html-страницу в браузере, а всё твоё форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы (по сути — те же теги, только используются в текстовых редакторах), которые ты, по умолчанию, не видишь.

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

Но, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнём изучать с этого тега. Итак, приступим.

§2. Сами теги для форматирования текста в HTML

Предварительно отформатированный текст можно вставить в html-страницу с помощью тегов < pre> и < /pre>. Браузер покажет текст, заключённый между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу.

Самыми популярными тегами для форматирования текста являются:

< B>< /B> — используется для выделения текста полужирным.

!
Примечание. Во многих последних (по времени выпуска) учебниках и самоучителях вместо него рекомендуется использовать тег < strong>< /strong>. Я не знаю, почему это так, но для «жирного» выделения использую рекомендуемый тег strong.

< I>< /I> — используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег < em>< /em>.

< U>< /U> — позволит подчеркнуть текст. Тут главное, чтобы пользователь не перепутал подчёркнутый текст с ссылкой.

< STRIKE>< /STRIKE> — делает текст ~~перечёркнутым~~.

< SUB>< /SUB> — предназначен для выделения подстрочного текста (нижний индекс). Этот тег может быть полезен, например, для записи химических формул. Вот этот код:

H< sub>2< /sub>O

Даст нам вот такую формулу:

H₂O.

< SUP>< /SUP> — нужен для выделения надстрочного текста (верхнего индекса). Например, для записи возведения в степень, пишем:

(a+b)< sup>2< /sup>.

Получаем:

(a+b)².

Все эти теги HTML для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путём вложения тегов друг в друга. Например, следующий html-код:

< strong>H< sub>2< /sub>O< /strong> — это < strong>< em>формула воды.< /em>< /strong>

При просмотре в браузере, будет выглядеть так:

H₂O — это формула воды.

§3. Абзацы в HTML

В HTML абзацы создаются с помощью тега < P>. Использование этого тега приводит к вставке одной пустой строки и размещению находящегося за ним видимого элемента html-страницы в следующей строке. Например, если мы напишем:

< p>Это первый абзац.< /p> < p>Это второй абзац.< /p>

То выглядеть это будет так:

Это первый абзац.

Это второй абзац.

Использовать закрывающий тег < /P> не обязательно, т. к. браузер считает, что начало следующего абзаца означает конец предыдущего, но для избежания путаницы желательно.

§4. Выравнивание текста в HTML

Для того, чтобы выровнять текст в HTML, используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:

< p align="center">Текст по центру< /p>

Волшебным образом выровняет текст по центру:

Текст по центру

А этот код:

< p align="right">Выравнивание текста по правому краю< /p>

Совершенно точно выровняет текст по правому краю:

Выравнивание текста по правому краю

Если атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Например, код:

< p>По умолчанию текст выравнивается по левому краю< /p>

Выровнит текст по левому краю:

По умолчанию текст выравнивается по левому краю

§5. Перенос строки в HTML и горизонтальная черта

Если нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то в HTML используется тег < BR>. Например, html-код:

1. Первая строка. < br> 2. Вторая строка.

В браузере будет выглядеть так:

1. Первая строка.
2. Вторая строка.

У < BR> нет закрывающего тега. Ты уже, наверное, догадался, что для вставки нескольких пустых строк, нужно записать тег < BR> несколько раз подряд.

Визуально разделить части текста можно ещё при помощи тега < HR>. Этот тег HTML создаёт на странице разделительную полосу (например, как зелёная в начале этой статьи). Тег < HR> имеет следующие атрибуты:

size — толщина полосы;

width — ширина полосы;

align — выравнивание;

color — цвет полосы;

noshade — атрибут, не имеющий значений. Если указан, то создается сплошная чёрная полоса без тени.

Например, html-код:

< hr align="center" size="5" width="50%" color="#3399ff">

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

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

§6. Заголовки в тексте в HTML

Для задания названий разделов и подразделов, используются теги заголовков. В HTML существуют шесть уровней заголовков и обозначаются они так:

< H1>< /H1> — заголовок первого уровня

< H2>< /H2> — заголовок второго уровня

< H3>< /H3> — заголовок третьего уровня

< H4>< /H4> — заголовок четвёртого уровня

< H5>< /H5> — заголовок пятого уровня

< H6>< /H6> — заголовок шестого уровня

В HTML заголовки в тексте выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок — < H1>< /H1> (им выделено название этого урока), а самый маленький — < H6>< /H6>. Теги заголовков имеют атрибуты:

align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста: center, left, right и justify);

title — всплывающая подсказка, которая появляется при наведении мыши на заголовок.

Например, код HTML:

< h4 align="center" title="Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.">Заголовок 4 уровня< /h4>

В браузере будет выглядеть так:

Заголовок 4 уровня

§7. Работа со шрифтами в HTML

Для форматирования непосредственно шрифтов, в HTML есть тег < FONT>< /FONT>. У этого тега существуют следующие атрибуты:

color — цвет текста шрифта;

face — гарнитура шрифта;

size — размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По-умолчанию, размер текста 3. Если указать < font size="+1">< /font>, то текст, размещённый между тегами < font> и < /font>, будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.

§8. Создание списков в HTML

В HTML списки создаются с помощью тегов < OL>< /OL> и < UL>< /UL>. В первом случае — создаётся упорядоченный (нумерованный: 1, 2, 3), во втором — неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом < LI>< /LI>. Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type.

В нумерованном списке маркеры (значения атрибута type) такие:

1 — нумерация арабскими цифрами (по умолчанию);

A — большими латинскими буквами по алфавиту;

a — маленькими латинскими буквами;

I — большими римскими цифрами;

i — маленькими римскими цифрами.

Например, HTML-код:

< ol type="a">
< li>Первый элемент.< /li>
< li>Второй элемент.< /li>
< li>Третий элемент.< /li>
< /ol>

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

Первый элемент.
Второй элемент.
Третий элемент.

В маркированном списке значения атрибута type такие:

disc — закрашенный кружок (по-умолчанию);

circle — незакрашенный кружок;

square — закрашенный квадратик.

Например, HTML-код:

< ul type="square">
< li>Первый элемент.< /li>
< li>Второй элемент.< /li>
< li>Третий элемент.< /li>
< /ul>

В браузере выглядит так:

Первый элемент.
Второй элемент.
Третий элемент.

Как и остальные теги HTML, списки можно вкладывать друг в друга. Получаются многоуровневые вложенные списки. Например, код:

< ol type="a">
< li>Первый элемент.< /li>
< li>
  < ul type="square">
   < li>Второй элемент.< /li>
   < li>Третий элемент.< /li>
   < li>Четвёртый элемент.< /li>
  < /ul>
< /li>
< li>Пятый элемент.< /li>
< /ol>

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

Первый элемент.
- Второй элемент.
- Третий элемент.
- Четвёртый элемент.
Пятый элемент.

§9. Заключение

Рассказ о тегах, нужных для форматирования текста в HTML, был бы не полным без упоминания о спецсимволах. Спецсимволы — это символы, которых либо нет на клавиатуре, либо те, которые браузер принимает за управляющий символ и преобразует в код.

Полный список этих символов ты найдёшь здесь Спецсимволы HTML.

Кроме того, самые главные знания для форматирования текста — правила грамматики русского языка. Грамотно написанный текст — уже наполовину отформатирован.

Ну, и напоследок, для закрепления всего вышеизложенного, в качестве самостоятельной работы, изучи вот этот HTML-код:

< font color="#FF0000" size="+3">< strong> Н< /strong>< /font>

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

На этом рассказ о тегах HTML для форматирования текста объявляется законченным. Раздел получился довольно большим. Не пытайся выучить все новые теги и атрибуты наизусть, всё равно не получится. Они сами постепенно запомнятся во время работы над созданием сайта.

В следующем разделе поговорим о том, как вставить картинку в html-страницу.

Автор: Алексей Востров.

Содержание Дальше

Форматирование текста в HTML