Структура HTML-документа и форматирование текста

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

В прошлом уроке мы уже говорили о том, что код web-страницы, по командам которого браузер строит изображение, записывается в обычном текстовом файле. Подготовить его можно при помощи любого текстового редактора, позволяющего сохранять неформатированный текст (например, Блокнота (Notepad), поставляемого в комплекте Windows). Для того чтобы браузер мог поместить на страницу графику и другие нетекстовые элементы, в коде страницы должно быть указано расположение этих объектов.

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

ПРИМЕЧАНИЕ. При сохранении на диске для HTML-файлов обычно используется расширение .НТМ или .HTML.

Прежде всего, надо определить, как выглядит команда HTML. Это какой-либо набор символов, заключенный в угловые скобки. Например: <HTML>, <BODY>. Регистр символов не имеет значения (большие и маленькие буквы не различаются). Теги делятся на парные (блоковые) и непарные. Блоковый тег может содержать в себе некоторый фрагмент документа, влияя на его отображение. Для такого тега в большинстве случаев требуется парный тег, указывающий конец зоны влияния. Такие теги записываются так же, как и теги, открывающие описание, но с добавлением символа "/" Например:

<Р> Фрагмент текста страницы. В данном случае - текст абзаца.

</Р>

ПРИМЕЧАНИЕ. Теги, содержащие другие теги, в некоторых книгах называют тегами-контейнерами. В некоторых случаях закрывающий тег можно не указывать.

Тег может содержать не только название, но и параметры, влияющие на отображение элемента. Параметры записываются внутри описания тега (между угловыми скобками) и разделяются пробелами. Значения параметров отделяются от их имен символом «-». В некоторых случаях значение не требуется, важен сам факт указания параметра. Значения параметров можно заключать в кавычки («"».Использование кавычек обязательно только при наличии в значении параметра пробелов. Пример записи параметров:

В данном случае тег имеет название IMG (тег вставки изображения) и параметры SRC (путь к файлу изображения), WIDTH (ширина изображения), HEIGHT (высота изображения).

ВНИМАНИЕ. Так как некоторые символы используются для записи команд HTML (например, сим волы "<" и ">" 8ы не сможете использовать их в обычном тексте. Если вам все-таки нужно это сделать, используйте вместо символов их код: < — «<», > — «>»,   — неразрывный пробел (пробел, по которому не производится переход на следующую строку), &атр; — «&», &сору; — «*», " — кавычка, &ХХХ; — любой символ (XXX — код символа).

После того, как мы ознакомились с основными правилами записи тегов, можно приступать к рассмотрению структуры HTML-документа.

Прежде всего надо указать на то, что данный документ описывает web-страницу на языке HTML. Для этого текст начинается с тега <HTML>. Для него требуется закрывающий тег </HTML>, обозначающий конец документа. Следующими по уровню вложенности являются теги заголовка документа и его содержания. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т. д.). Сам тег заголовка записывается как <HEAD>. Для него требуется закрывающий тег </HEAD>. Тег содержания документа определяет информационную часть описания страницы. В ней располагается текст, рисунки и другие элементы. Тег описания (тела страницы) выглядит следующим образом: <BOOY>...</BODY>.

Запишем пример простейшего документа:

<HTML>

<HEAD> <ТIТLЕ>Пример HTML-страницы </TITLE>

</НЕАD>

<ВОDY>Это простая страница, иллюстрирующая структуру описания на языке HTML.

</BODY>

</HTML>

Тег <TITLE>, расположенный в заголовке страницы, указывает название страницы, которое большинство браузеров отображают в заголовке окна. Определив название страницы, вы упростите работу с сайтом (пользователь поймет, куда он попал, еще до окончания загрузки документа). Кроме того, поисковые системы могут ориентироваться на заголовки документов при анализе соответствия содержимого сайта введенному пользователем запросу. На рис. 16.1 изображена описанная выше страница, открытая в браузере Internet Explorer. Обратите внимание: в нижней части окна отображается индикатор окончания загрузки страницы, а в заголовке окна — название, заданное нами в тексте примера.

Рис. 16.1. Пример отображения web-страницы браузером

Для тега <BODY> вы можете определить некоторые параметры, например цвет текста и фона, текстуру, ширину полей. Ниже приведен список параметров и их допустимых значений.

BGCOLOR задает цвет фона страницы. Записывается в следующем виде: BGCOLOR-#RRGGBB, где RR, GG и ВВ — запись RGB-компонентов цвета в шестнадцатеричной форме. Символ «#» (номер) указывает на то, что дальше записано обозначение цвета. Пример записи:

TEXT задает цвет, которым будет отображаться текст документа. Цвет записывается в той же форме, что и цвет фона. Эти настройки могут не сказаться на цвете текста, расположенного в ячейках таблиц. Пример:

LINK указывает цвет, которым будут отображаться не просмотренные ссылки. Пример:

VLINK указывает цвет, которым будут отображаться просмотренные ссылки. Пример:

ALINK указывает цвет, которым будут отображаться активные ссылки (ссылки, по которым в данный момент осуществляется переход). Пример:

BACKGROUND задает URL-адрес (путь к файлу) фонового рисунка для страницы (текстуры). Этот параметр, а также другие параметры управления цветом и фоном, можно использовать и для задания вида ячеек таблиц. Для этого примените его к тегу <TD>. Подробнее задание таблиц рассматривается в следующем уроке. Пример использования параметра BACKGROUND:

ПРИМЕЧАНИЕ. Используя каскадные таблицы стилей (CSS), можно задать фоновое изображение, повторяющееся только по вертикали или только по горизонтали. Также можно поместить фоновое изображение, например, в нужную точку экрана.

Кроме этого, существуют параметры, позволяющие управлять, например, шириной полей, оставляемых браузером по краям окна.

Среди служебной информации, задаваемой в заголовке документа, вы можете определить такие полезные сведения, как таблица кодировки. Это особенно важно при просмотре документа на компьютере, работающем под управлением другой операционной системы. Если не указать, на каком языке написан документ (точнее, национальные символы какого языка при этом использованы), то браузер будет пытаться отобразить документ с использованием таблицы кодов, применяемой по умолчанию. При этом документ может оказаться нечитаемым. Поэтому надо задать таблицу кодировки вручную, что и делается при помощи тега <МЕТА>. Этот тег размещается в заголовке документа (между тегами <HEAD> и </HEAD>), используется для записи различных данных, указываемых в его параметрах. Закрывающего тега не требуется.

Кодировка, которую необходимо указать, зависит от того, в какой операционной системе и каком редакторе создается файл. Если вы используете систему Windows и Блокнот в качестве HTML-редактора, то для корректного воспроизведения русского текста вам понадобится указать кодовую таблицу Windows-1251, используемую для передачи символов русского языка. При этом тег <МЕТА> следует записать следующим образом:

<МЕТА HTTP-EQUIV="Content-type"

CONTENT="text/html; charset=Windows-1251">

После того, как вы определите структуру документа, можно приступать к наполнению его информацией, предназначенной пользователям. Эта информация располагается между тегами <BODY> и </BODY>. Вы можете поместить в документ текст, «сдобренный» при помощи тегов рисунками и элементами форматирования (заголовками, таблицами, списками). Ниже процесс размещения этих элементов на web-странице рассматривается подробно.

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

Объявить блок текста комментарием можно при помощи специального тега «<!- -». Конец комментария обозначается тегом «- ->». Ниже приведен пример записи текста с комментариями.

Этот текст будет выведен на экран...

ПРИМЕЧАНИЕ. Хотя текст комментария не отображается в окне браузера, он все равно загружается на компьютер пользователя вместе с остальным содержимым страницы. Поэтому не стоит хранить в виде комментариев информацию, представляющую некоторую тайну (например, имена пользователей и пароли доступа).

Часто возникает необходимость поместить на страницу заголовок раздела или название страницы в целом. Для этого можно использовать стандартные теги заголовка. Язык HTML позволяет задавать заголовки шести размеров (уровней), для которых используются теги от <Н1> до <Н6>. Текст заголовка пишется между открывающим и закрывающим тегами.

<Н1>Это заголовок первого уровня</Н1>

<Н6>Заголовок шестого уровня< /Н6>

Чем больше число, идущее за символом «Н», чем меньше размер текста заголовка. Поэтому, если вы хотите, чтобы заголовок был написан более мелкими буквами, используйте, скажем, тег <Н2> или <Н5>. Наличие заголовка подразумевает автоматическое прерывание строки (подробнее об этом рассказывается далее); кроме того, заголовок может занимать сразу несколько строк. Имейте в виду, что мелкие заголовки — они маркируются тегами <НЗ> и ниже — в большинстве web-браузеров отображаются очень мелким шрифтом, и в результате заголовок может оказаться мельче основного текста. На рис. 16.2 показаны примеры заголовков всех шести уровней (для сравнения приведена фраза без дополнительного форматирования).

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

<Н1 ALIGN = "CENTER">Это заголовок первого уровня,

выровненный по центру</Н1>

Используя для параметра ALIGN значения left и right, вы можете выравнивать заголовки по правому и левому краям страницы.

СОВЕТ. Для выравнивания текста и других объектов, включенных в документ, по центру экрана можно использовать специальный тег <CENTER> следующим образом: <CENTER><H1>ЭTO заголовок первого уровня</Н1></СЕNTER>

Рис. 16.2. Заголовки различных уровней

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

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

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

В табл. 16.1 приведены некоторые теги логического и физического форматирования. Как правило, все эти теги используются попарно, и закрывающий тег ставится после текста, который должен быть выделен тем или иным образом (тег используется вместе с и т. д.).

Таблица 16.1. Теги физического и логического форматирования текста

Действие тега	Тег физического форматирования	Тег логического форматирования
Полужирный текст	<В>	<STRONG>
Курсив	<I>	<ЕМ>
Моноширинный шрифт	<TT>	<CODE>
Подчеркнутый текст	<U>	—
Перечеркнутый текст	<s>	<DEL>

ВНИМАНИЕ. Теги логического форматирования были введены в HTML относительно недавно и, в отличие от тегов физического форматирования, не поддерживаются некоторыми браузерами. Учитывайте это при разработке сайтов.

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

 ...текст... 

Вы можете задавать значения следующих параметров тега:

SIZE определяет размер шрифта. Примеры: SIZE-"3", SIZE-"4", SIZE«"-2", SIZE-"+4". Параметр SIZE может принимать значение от 1 до 7. Если указано относительное значение (например, «+1»), то полное значение размера шрифта будет вычислено, исходя из заданного базового значения. Реальные размеры шрифта, соответствующие значениям параметра SIZE тега , определяются настройками браузера;

FACE задает гарнитуру шрифта (шрифт, которым будет выводиться текст). В качестве значений этого параметра можно задавать имена шрифтов, установленных в системе. Имена шрифтов следует записывать так, как они пишутся в операционной системе. В противном случае браузер не сможет найти и применить его к тексту. Примеры: FACE-"Arial", FACE-"Times New Roman";

COLOR позволяет изменить цвет текста. Цвет следует указать в шестнадцатеричной форме. Примеры: COLOR-"FF8000", COLOR-"8FF710".

ПРИМЕЧАНИЕ. Для того чтобы избежать возможных ошибок, заключайте значения параметров в кавычки. Это правило строго обязательно, если в значении параметра присутствуют пробелы.

На рис. 16. 3 приведен пример использования различных средств форматирования для изменения внешнего вида страницы. Ниже приведен фрагмент использовавшегося при подготовке рисунка HTML-документа.

Физическое форматирование: <В>жирный</В> и курсивный

шрифты. 

Логическое форматирование: жирный и <ЕМ> курсивный </ЕМ>

шрифты. 

Текст может быть подчеркнутым или <S> перечеркнутым

</S>. 

 Можно управлять отображением текста

 изменяя размер шрифта,

 

а можно изменять его начертание (гарнитуру) . 

Это пример смены цвета шрифта.

Рис. 16.3. Пример использования тегов форматирования текста

Указать размер и другие параметры шрифта также можно при помощи тега <BASEFONT>, задающего характеристики шрифта, используемые в документе по умолчанию. Если после этого тега в тексте встречается тег с относительным значением размера шрифта, то полный размер будет вычислен относительно размера, указанного в теге <BASEFONT>. В отличие от тега , этот тег действует на весь следующий за ним текст. Если тег встречается в документе несколько раз, то каждый из них переустанаваливает размер шрифта.

Размер шрифта в теге <BASEFONT> определяется при помощи параметра SIZE (аналогично тегу ). Цвет шрифта задается параметром COLOR, а гарнитура шрифта — параметром FACE. Пример:

<BASEFONT SIZE="7" COLOR="#3FE6D4" FACE="Arial">

ВНИМАНИЕ. Параметры, задаваемые тегом <BASEFONT>, могут никак не влиять на текст, размещен-ный в таблицах.

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

Для задания абзацев используется тег <Р>. Он обозначает начало нового абзаца. Теоретически каждому тегу начала абзаца должен соответствовать тег конца абзаца (</Р>), но на практике его можно не использовать. Каждый тег начала нового абзаца обозначает, заодно, и конец абзаца предыдущего. Кроме того, новый абзац автоматически формируется тегами заголовков и некоторыми другими.

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

<Р ALIGN="justify">

В табл. 16.2 приведены допустимые значения этого параметра.

Таблица 16.2. Допустимые значения параметра ALIGN тега <Р>

Значение	Примечания
left	Устанавливается режим выравнивания по левому краю
right	Устанавливается режим выравнивания по правому краю
center	Содержимое абзаца выравнивается по центру страницы
justify	Содержимое абзаца выравнивается по ширине страницы

ПРИМЕЧАНИЕ. Значение JUSTIFY распознается далеко не всеми браузерами. Будьте осторожны при его использовании.

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

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

В этой главе вам уже неоднократно встречались параметры тегов, требующие задания цвета. Цвет в HTML задается при помощи трех цветовых компонентов (красного, зеленого и синего цветов — RGB), записанных в шестнадцатеричной системе счисления. О модели RGB и ее компонентах мы уже говорили в уроке, посвященном использованию Adobe PhotoShop. Поэтому здесь заметим, что некоторые цвета можно задавать, используя кодовые названия. Например, зеленый цвет можно записать как #008000, а можно обозначить словом green (зеленый). Подобным образом можно задавать и другие цвета (красный, желтый, белый, черный, серый и т. д.). В литературе, специально посвященной языку HTML, приводятся таблицы стандартных обозначений цветов.

Заканчивая этот урок, скажем несколько слов о том, как следует сохранять файлы, предназначенные для загрузки на web-сервер. Если вы готовите HTML-документ, вам следует сохранить его в файле с расширением .HTML или .НТМ. Оба этих расширения допустимы и распознаются браузерами. Если этот файл должен демонстрироваться пользователю при обращении на сервер, то, скорее всего, вам придется назначить ему стандартное имя. Обычно это имя INDEX.HTM или INDEX.HTML. При вызове из браузера ресурса, расположенного по некоторому адресу, сервер автоматически ищет и передает пользователю файлы с такими именами. Файл, имеющий другое имя, может быть открыт, если это имя известно. Например, вы можете обратиться к нему при помощи расположенной на открытой автоматически странице ссылке.

Некоторые операционные системы, используемые на серверах, чувствительны к регистру символов в имени файла (различают имена, набранные маленькими и заглавными буквами). Кроме того, может вводиться ограничение на длину имени. Для того чтобы избежать путаницы и ошибок, используйте в именах файлов и во всех ссылках на них буквы одного регистра, ограничивайте длину имени восемью символами, а также не используйте символов кроме латинского алфавита, цифр и символа «_».

Такие ограничения на использование символов в именах файлов особенно актуальны при сохранении изображений и других файлов, не являющихся web-страницами. Дело в том, что адреса страниц не чувствительны к регистру и длине имен файлов (ограничена только общая длина адреса). А вот при вызове файла, не являющегося страницей (например, при размещении на странице изображения) могут возникнуть некоторые проблемы из-за неправильно записанных имен.

Что нового мы узнали?

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

Содержание раздела