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

Введение
1 Структура HTML-документа
2 Форматирование текста с помощью HTML
2.1 Задание полей на Web-странице
2.2 Задание цвета на Web-странице
2.3 Выравнивание текста на Web-странице
2.4 Задание заголовков HTML-документа
2.5 Задание размера шрифта
2.6 Задание шрифта по имени
2.7 Физическое форматирование символов
2.8 Логическое форматирование символов
2.9 Вставка специальных символов
2.10 Выделение текста горизонтальной линией
Пример №1
Пример №2
Пример №3

Введение

Для подготовки Web-документа используется язык разметки гипертекста HTML (HyperText Markup Language). Как это следует из названия, HTML не является алгоритмическим языком программирования, а, как язык разметки, обладает средствами представления текста и изображений на экране в виде Web-страницы. HTML также позволяет работать с гипертекстовыми ссылками, с помощью которых осуществляется доступ к другим Web-страницам.

Стандарт HTML создан и поддерживается некомерческой международной организацией W3C (World Wide Web Consortium).
Поскольку HTML-документ записывается в ASCII-формате, для создания Web-страницы может быть использован любой текстовый редактор, работающий с простым текстом, т.е. таким текстом, который не содержит служебной информации. Такими редакторами являются, например, NotePad (Блокнот) или FAR.

После того, как с помощью текстового редактора HTML-документ создан, он должен быть сохранен на диске в виде файла с расширением .htm или .html. Это позволит после щелчка мыши по этому файлу запустить браузер, который осуществит формирование Web-страницы в соответствии с данным HTML-документом. Можно поступить по-другому. Сначала запустить браузер, а затем в его поле адреса (Address) указать путь к файлу с данным HTML-документом.
Браузером (browser, от англ. to browse - выслеживать) называется программа, которая выполняет следующие основные функции:

после задания пользователем адреса Web-страницы и нажатия клавиши "переход" ("Go") устанавливает с помощью http-протокола соединение с Web-сервером, передает ему запрос и получает от него требуемую Web-страницу в виде HTML-документа;
преобразует полученный HTML-документ в изображение не экране пользователя, которое и называется Web-страницей (если HTML-документ содержится на компьютере пользователя, то соединение с Web-сервером не является обязательным).

Примерами браузеров могут служить такие программы, как Microsoft Internet Explorer (MIE), Mozilla Firebox, Apple Safari, Netscape Navigator, Opera и др.
С помощью HTML можно создавать только статические Web-страницы. Для создания динамических страниц необходимо совместное использование HTML с такими языками, как JavaScript, PHP и др.

Оглавление

1 Структура HTML-документа

HTML-документ состоит из слов двух типов: служебных слов и собственно текста, выводимого на экран. Служебные слова называются тэгами (tags) и берутся в угловые скобки < >. В литературе тэги называют также дескрипторами и операторами. Тэги бывают двойными, называемые контейнерами (container), и одиночными. Примером контейнера служат тэги, задающие начало HTML-документа: <HTML> и его окончание: </HTML>. Тэг окончания контейнера отличается от тэга его начала наличием символа "/". Текст, находящийся между началом контейнера и его окончанием, является его содержимым.
Примером одиночного тэга служит тэг перевода на новую строку: (браузерами не обрабатываются повледовательности пробелов, символы текстовых редакторов перевода каретки CR и перехода на новую строку LF).
В HTML-документе в наименованиях тэгов и их параметров, а также в словах, являющимися их значениями, заглавные и строчные буквы не различаются. В дальнейшем будем придерживаться следующего соглашения: наименования тэгов и параметров будут указываться заглавными буквами, а их значения - строчными буквами.
HTML-документ имеет следующую базовую структуру, которая состоит из заголовка HTML-документа и тела HTML-документа:

В заголовке HTML-документа, который находится внутри тэга-контейнера <HEAD> . . . </HEAD>, помещается информация, которая не выводится в основное поле Web-страницы. Она используется браузером для других целей. Например, с помощью контейнера <TITLE>. . . </TITLE> задается заголовок Web-страницы, помещаемый вверху экрана. Этот заголовок указывается в перечне посещенных страниц и в других местах. Поэтому, если разработчик Web-страницы хочет, чтобы его сайт был востребован, ему необходимо внимательно отнестись к содержимому заголовка Web-страницы.
Данная Web-страница при использовании браузера MIE имеет следующий заголовок:

Форматирование HTML текста - Microsoft Internet Explorer

Последние три слова добавляет сам браузер.
В теле HTML-документа, который находится внутри тэга-контейнера <BODY> . . . </BODY>, помещается текст, который будет непосредственно выводится на экран. Примером (№1) простейшего HTML-документа, выводящего на экран традиционное сообщение "Привет, мир!", является следующий текст:

Пример 1

<HTML>
<BODY>
Привет, мир!
</BODY>
</HTML>

Оглавление

В этом примере и в дальнейшем при описании HTML-документов будем придерживаться следующего правила - тэги, их параметры и значения будут иметь темно-синий цвет, а исходный текст, который форматируется и выводится на экран будет темно-зеленого цвета.
Щелкнув по кнопке "Пример 1" мы получим на экране результат выполнения этого HTML-документа: сообщение "Привет, мир!" находится в верхнем левом углу экрана, имеет черный цвет и небольшой размер букв (эти параметры заданы по умолчанию) и выглядит непривлекательно. Чтобы сделать его вид более приятным, необходимо выполнить форматирование текста, т.е. задать его цвет, размер, выравнивание и другие параметры средствами HTML (см. раздел 2).

Чтобы вернуться назад к данной странице необходимо щелкнуть по стрелке Back (Назад) на панели управления браузера.
Чтобы увидеть исходный текст текущей Web-страницы необходимо на панели управления браузера выбрать View (Вид), а затем Source (Просмотр HTML-кода).

Отметим, что современные браузеры способны понимать и упрощенную структуру документа. Например, HTML-документ, состоящий из одной строки:

Привет, мир!

даст на экране такое же сообщение. Но мы в дальнейшем будем придерживаться полной формы HTML-документа.
Текст может быть разбит на параграфы (текстовые блоки). Для указания параграфа используется контейнер . . . :


Текст
параграфа

На экране между параграфами вставляется пустая строка. Тэг окончания параграфа можно не указывать. В этом случае тэг начала следующего параграфа (или </BODY>) будет означать закрытие текущего.

Для указания одно- и многострочных комментариев в HTML-документе используется такая конструкция:

Отметим, что комментарии помещаются в HTML-документе только между тэгами. Образец использования комментария приведен в примере № 2

Оглавление

2 Форматирование текста с помощью HTML

2.1 Задание полей на Web-странице

Для задания левого, правого, верхнего и нижнего поля документа на Web-странице используются соответственно параметры LEFTMARGIN, RIGHTMARGIN, TOPMARGIN и BOTTOMMARGIN тэга <BODY>. Значение каждого поля указывается в пикселях. Например, верхнее поле размером 50 пикселей задается так:

<BODY TOPMARGIN=50 >

Оглавление

2.2 Задание цвета на Web-странице

Когда браузер выводит на экран текст, то в качестве цвета текста и цвета фона он использует значения, заданные по умолчанию (в примере 1 цвет текста - черный, а цвет фона - светло-серый). Однако в HTML есть средства для задания и изменения как цвета текста, так и цвета фона. Для этого используются соответственно параметры TEXT и BGCOLOR тэга <BODY>.
Если необходимо указать некоторый цвет только для части текста, то используется параметр COLOR тэга .
В HTML есть два способа задания значения цвета.
В первом способе значение цвета задаются с помощью трех составляющих цветов в виде численного значения #RrGgBb, где:

Rr - две 16-ричние цифры, задающие компоненту красного цвета;
Gg - две 16-ричние цифры, задающие компоненту зеленого цвета;
Bb - две 16-ричние цифры, задающие компоненту синего цвета.

Значение компоненты каждого цвета может меняться от 0 до FFh, т.е. от 0 до 255. Например, значение #FF0000 задает ярко-красный цвет, #00AA00 - темно-зеленый, #С0С0С0 - серебристый. Таким способом можно задать более 16 млн (2 24) цветов.
Вторым способом можно задать только 16 основных значений цвета в виде символических (английских) названий. В таблице 1 приведены эти цвета, их символические названия и численные значения в виде #RrGgBb.

Таблица 1
Цвет	Символическое название	Численное значение
Морской волны	Aqua	#00FFFF
Черный	Black	#000000
Голубой	Blue	#0000FF
Малиновый	Futsia	#FF00FF
Серый	Gray	#808080
Зеленый	Green	#008000
Ярко-зеленый	Lime	00FF00
Темно-красный	Maroon	#800000
Темно-синий	Navi	#000080
Оливковый	Olive	#808000
Пурпурный	Purple	#800080
Красный	Red	#FF0000
Серебренный	Silver	#C0C0C0
Темной морской волны	Teal	#008080
Белый	White	#FFFFFF
Желтый	Yellow	#FFFF00

Образцы задания цвета на Web-странице средствами HTML приведены в примере № 2

Оглавление

2.3 Выравнивание текста на Web-странице

Каждый параграф текста может быть выравнен по левому краю, по правому краю, по обеим краям (по ширине) или по центру экрана. Для этого используется параметр ALIGN тэга . Он имеет такие значения:

left: параграф выравнен по левому краю (задается по умолчанию);
right: параграф выравнен по правому краю;
center:параграф выравнен по центру;
justify:параграф выравнен по ширине экрана.

Например:

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

Текст также может быть выравнен по центру с помощью тэга-контейнера <CENTER> . . .</CENTER>:

<CENTER> Текст выравнен по центру </CENTER>

В этом случае текст между тэгами <CENTER> и </CENTER> выводится по центру новой строки экрана.

Оглавление

2.4 3адание заголовков HTML-документа

В HTML-документе может быть использовано до шести заголовков разного уровня. Они задаются с помощью тэгов- контейнеров от <H1> . . . </H1> (самый высокий уровень) до <H6> . . . </H6> (самый низкий уровень).
Шрифты заголовков разных уровней отличаются друг от друга и от основного текста размером и другими особенностями, заданными по умолчанию в браузере.
Цвет заголовков задается или параметром TEXT тэга <BODY>, если параметр указан, или принимается по умолчанию.
Заголовки могут быть выравнены, так же как и параграфы, с помощью параметра ALIGN. По умолчанию для заголовков задано выравнивание по левому краю экрана.
В примере № 2 показано использование заголовков и средств выравнивания текста на Web-странице.

Оглавление

2.5 3адание размера шрифта

Для задания размера шрифта на Web-странице используется параметр SIZE тэга-контейнера . . . . Текст, указанный между тэгами и будет иметь требуемый размер. Размер текста, следующего дальше, будет определяться значением парамета TEXT тэга <BODY> или будет браться по умолчанию.
Значения параметра SIZE задаются не в пунктах (1 пункт равен 1/72 дюйма), а в относительных единицах от 1 до 7. Соотношение между этими единицами и пунктами приведено в таблице 2.

Таблица 2
Относительные единицы	Пункты (pt)
1	9
2	10
3	12
4	14
5	18
6	24
7	36

Например,

 Размер шрифта 18 pt

Можно поступить и так: задать с помощью тэга <BASEFONT> с параметром SIZE базовый размер шрифта. А затем с помощью тэга с параметром SIZE, который принимает значения от -4 до +4, изменить базовый размер на необходимую величину.
Например,

<BASEFONT SIZE=4>
 Размер шрифта 24 pt

С помощью тэгов-контейнеров <BIG> . . . </BIG> и . . . можно задать текст соответственно большого и малого размера, не указывая конкретно величину шрифта. Эту величину задает сам браузер.

Оглавление

2.6 3адание шрифта по имени

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

 Шрифт гельветика

Если на стороне пользователя установлен первый из указанных шрифтов - Arial Cyr, то строка "Шрифт гельветика" будет отображаться на экране с использованием именно этого шрифта. Иначе будет сделана попытка отобразить строку шрифтом Arial, а затем - Helv DL. Если окажется, что в системе пользователя нет ни одного из перечисленных шрифтов, строка будет отображена тем шрифтом, который установлен в браузере для использования по умолчанию.
Отметим, что значения параметра FACE взяты в двойные кавычки, поскольку имена шрифтов содержат пробелы. Но в HTML не будет ошибкой указывать значения любого параметра в кавычках. Поэтому, если есть сомнения в задании значений параметров, лучше указать их в кавычках.

В примере (№2) заданы верхнее поле, цвет и выравнивание текста, типы и размеры шрифта на Web-странице средствами HTML.

Пример 2

<HTML>
<HEAD>
<TITLE> HTML: выравнивание текста, задание цвета, размера и типа шрифта </TITLE>
</HEAD>

<BODY TOPMARGIN="50" TEXT=blue BGCOLOR= #E0E0FF>
<H1 ALIGN=center>ЗАГОЛОВОК 1 УРОВНЯ</H1>

 Текст маленького размера (SMALL) красного цвета выравнен по правому краю экрана 
 Выравнивание текста, размер (12 pt) и тип шрифта, заданы по умолчанию
 Текст выравнен по ширине экрана с использованием шрифта Courier лилового цвета размером 24 pt 
</BODY>
</HTML>

Оглавление

2.7 Физическое форматирование символов

В HTML предусмотрено несколько тэгов-контейнеров для физического форматирования символов. Эти тэги определяют внешний вид символов явным образом в противоположность тэгам логического форматирования (см. п. 2.8):

. . . : выделяет текст жирным шрифтом;
. . .: выделяет текст наклонным шрифтом (курсивом);
. . .:выделяет текст подчеркиванием;
<STRIKE> . . .</STRIKE>:выделяет текст перечеркиванием;
<TT> . . .</TT>:задает текст с фиксированной шириной символов (например, листинги программ);
. . .:указывает подстрочный (нижний) индекс;
. . .:указывает надстрочный (верхний) индекс;
<BLOCKQUOTE> . . . </BLOCKQUOTE>: задает левое поле;
<PRE> . . . </PRE>(preformatted - предварительно отформатированный): выводит текст на экран с отработкой всех знаков пробелов, табуляции, перевода строки и новой строки.

Оглавление

2.8 Логическое форматирование символов

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

<CITE> . . . </CITE>: цитата;
. . . (emphasis - ударение): текст, имеющий большое значение;
. . . (сильный): сильное выделение текста;
<SAMP> . . . </SAMP>(sample - образец): образец сообщений, выводимых на экран;
<KBD> . . . </KBD>(keyboard - клавиатура):текст, вводимый с клавиатуры;
<CODE;> . . . </CODE>(code - код): фрагмент исходного текста;
<VAR> . . . </VAR>(variable - переменная): имя переменной.

На Web-страницах иногда указывают аббревиатуру некоторого термина или понятия без его раскрытия, например, "ОЗУ" вместо "Оперативное запоминающее устройство". Чтобы поисковые системы в сети Internet могли осуществлять поиск термина не только по его аббреавитуре, но и по полному обозначению, а также в качестве подсказки для пользователя Web-страницы, используется тэг-контейнер <ACRONYM> аббревиатура </ACRONYM>с параметром TITLE, который раскрывает значение используемой аббревиатуры.
В примере №3 показано применение этого тэга для аббревиатур МП и HT.

Оглавление

2.9 Вставка специальных символов

В HTML предусмотрено четыре специальных символа, предназначенных для служебных целей (для выделения тэгов и значений их параметров). Это символы <, >, & и ". Они интерпретируются браузером по особому и требуют замены для их включения в текст, в качестве обычных символов. Замена требуется и для представления символов права © и регистрации ®. В таблице 3 приведены эти замены.

Таблица 3
Символ	Замена
<	<
>	>
&	&
"	"
©	©
®	©

В общем случае в HTML-документ можно вставить любой символ, зная его ASCII-код. Для этого вместо символа подставляется такая последовательность символов: &#XX, где XX - десятичное значение ASCII-кода символа.
К специальным символам можно отнести и символ "неустранимого пробела" -   (no breaking space). Эти символы используются тогда, когда необходимо поместить на Web-странице несколько пробелов подряд, поскольку браузеры заменяют последовательности подряд идущих пробелов в HTML-документе одним пробелом при выводе документа на экран.

Оглавление

2.10 Выделение текста горизонтальной линией

При оформлении Web-страниц часто используется такой прием, как разделение параграфов текста или других его частей горизонтальной линией.

Для того, чтобы вставить в HTML-документ горизонтальную разделительную линию необходимо использовать одиночный тэг <HR>. Он имеет несколько параметров, которые задают внешний вид линии:

ALIGN - определяет выравнивание линии и имеет такие значения:
- left - по левому краю;
- right - по правому краю;
- center - по центру (задан по умалчанию).
COLOR - задает цвет линии.
NOCHADE - если указан этот параметр, линия изображается без тени.
SIZE - высота линии в пикселях.
WIDTH - ширина линии, может выражаться либо в пикселях, либо в процентах (%) от величины окна браузера.

В примере №3 приведен HTML-документ, осуществляющий физическое и логическое форматирование символов на Web-странице, разделенных горизонтальной линией:

Пример 3

<HTML>
<HEAD>
<TITLE> Физическое и логическое форматирование символов
</TITLE>
</HEAD>
<BODY TEXT=000070>
<CENTER>

 Полужирный шрифт 
<STRIKE> Перечеркнутый шрифт </STRIKE>
<TT> Шрифт с фиксированной шириной символов
</TT>
 Формула воды: H 2 O
<HR COLOR=EEEE00 SIZE=5 WIDTH=80%>
<CITE> Цитата: "Среди вещей величайшим есть ничто" </CITE>

<ACRONYM TITLE="Микропроцессоры "> МП
</ACRONYM>
фирмы Intel подтвердили эффективность технологии
<ACRONYM TITLE="HyperThreading"> HT
</ACRONYM>
</CENTER>
</BODY>
</HTML>

Оглавление

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

ОГЛАВЛЕНИЕ

Введение

1 Структура HTML-документа

2 Форматирование текста с помощью HTML

2.1 Задание полей на Web-странице

2.2 Задание цвета на Web-странице

2.3 Выравнивание текста на Web-странице

2.4 3адание заголовков HTML-документа

2.5 3адание размера шрифта

2.6 3адание шрифта по имени

2.7 Физическое форматирование символов

2.8 Логическое форматирование символов

2.9 Вставка специальных символов

2.10 Выделение текста горизонтальной линией