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

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

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

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

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

Содержание:

§ 1. Теория


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


§ 3. Абзацы


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


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


§ 6. Заголовки


§ 7. Работа со шрифтами (цвет, размер и т.д.)


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


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

§ 1. Теория

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

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

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

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

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

    Предварительно отформатированный текст можно вставить в 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-код:

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

§ 3. Абзацы

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

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

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

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

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

выровняет текст по центру:

    А этот код:

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

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

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

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

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

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

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

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

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


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


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


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


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

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

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

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

§ 6. Заголовки

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

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


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


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


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


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


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

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

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


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

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

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

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

    Для форматирования непосредственно шрифтов, в 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>. В первом случае создается упорядоченный (нумерованный), во втором неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом < LI>< /LI>. Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type.

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

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


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


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


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


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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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