Структура 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 приведены некоторые теги логического и физического форматирования. Как правило, все эти теги используются попарно, и закрывающий тег ставится после текста, который должен быть выделен тем или иным образом (тег <STRONG> используется вместе с </STRONG> и т. д.).

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

<

Содержание Вперед

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