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

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

<BR>

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

<Р ALIGN=center>

Значение параметра указывается после символа «=» и может заключаться в двойные (") или одинарные кавычки ('). Использование кавычек является обязательным в том случае, если значение параметра содержит пробелы, например:

<INPUT TYPE=subfnit VALUE="Отпарвить данные">

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

</Р>

Непарные теги, как правило, не относятся к каким-либо определенным фрагментам текста страницы и определяют независимые объекты, например, изображения или горизонтальные разделительные линии, и, соответственно, не имеют закрывающих тегов:

<HR>

Непарный тег также может включать в себя параметры:

<HR WIDTH=75%>

Приводимое в этом разделе описание тегов HTML носит ознакомительный характер. Здесь представлены лишь наиболее часто используемые параметры тегов HTML. 

Основные элементы HTML

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

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

<BR>

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

<Р ALIGN=center>

Значение параметра указывается после символа «=» и может заключаться в двойные (") или одинарные кавычки ('). Использование кавычек является обязательным в том случае, если значение параметра содержит пробелы, например:

<INPUT TYPE=subfnit VALUE="Отпарвить данные">

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

</Р>

Непарные теги, как правило, не относятся к каким-либо определенным фрагментам текста страницы и определяют независимые объекты, например, изображения или горизонтальные разделительные линии, и, соответственно, не имеют закрывающих тегов:

<HR>

Непарный тег также может включать в себя параметры:

<HR WIDTH=75%>

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

Приводимое в этом разделе описание тегов HTML носит ознакомительный характер. Здесь представлены лишь наиболее часто используемые параметры тегов HTML. Большинство из описываемых тегов предполагает знакомство с рядом других параметров.

Структура страницы

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

Раздел HTML-кода

Весь HTML-код страницы должен заключаться между парой тегов <HTML>... </HTML>. Открывающий тег <HTML> должен помещаться в самом начале каждой страницы, а закрывающий тег </HTML> — в самом конце.

Раздел заголовка

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

<HEAD>

Теги заголовка

</HEAD>

Парный тег <TITLE>...</TITLE> используется для указания названия страницы Между открывающей и закрывающей частями тега помещается текст названия например:

<TITLE>Очерки по истории Франции</ТIТLЕ>

При просмотре страницы в броузере ее название отображается в строке заголовка окна броузера. Кроме того, название учитывается отдельными поисковыми системами, выполняющими автоматическую каталогизацию страниц в Web. По этой причине следует использовать тег <TITLE> на всех страницах сайта: информативное название страницы обеспечит ей хорошее представление в результатах поиска таких поисковых систем и будет способствовать привлечению к вашему Web-сайту внимания потенциальных посетителей.

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

<МЕТА HTTP-EQUIV="Content-type" CONTENT="text/html; charset="windows-1251">

<МЕТА NAME="Keywords" СОМТЕNT="программа бесплатная программное обеспечение игра .загрузить скачать">

<МЕТА NAME="Description" CONTENT="Ha этом сайте представлены лучшие игровые программы, доступные в Интернете. Все программы можно загрузить с нашего сайта бесплатно!">

Информация, представляемая тегом <МЕТА>, не отображается при просмотре в броузере.

Раздел основного текста страницы

Область основного текста и разметки страницы заключается в пределах парного тега <BODY>...</BODY>. Этот тег также используется для определения основных параметров форматирования страницы. Тег <BODY> имеет следующий формат:

<BODY BACKGROUND="URL файла фонового рисунка" BGCOLOR=" Код цвета фона" ТЕХТ="Код цвета текста" LINК="Код цвета гиперссылки" VLINK="Кoд цвета просмотренной гиперссылки" ALINK="Код цвета выделенной гиперссылки">

Основной текст и разметка страницы </BODY>

Параметр BACKGROUND тега <BODY> задает URL графического файла, используемого в качестве фона для HTML-страницы. Например:

BACKGROUND=" images/back.gif"

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

BGCOLOR="indigo" TEXT="white"

Отображение таких цветов обеспечивается большинством современных броузе-ров, однако более универсальным является вариант представления цвета в виде шестнадцатеричных значений интенсивности красной, зеленой и синей составляющих. В этом случае коду цвета должен предшествовать символ «#»:

BGCOLOR="ft4B0082" TEXT="#FFFFFF"

Текст

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

Абзац

Для выделения абзацев в тексте HTML-документа используется парный тег <Р>... </Р>. Этот тег имеет следующий формат:

<Р ALIGN=center|left|right>Текст абзаца</Р>

Параметр ALIGN позволяет определить режим выравнивания текста абзаца: значение center задает режим выравнивания по центру, left — по левому краю, и right — по правому краю. Если параметр ALIGN опущен, текст абзаца выравнивается по левому краю. Кроме того, этот параметр может принимать значение justify (выравнивание по ширине), однако этот режим выравнивания не поддерживается некоторыми броузсрами.

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

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

<Р>Текст абзаца 1

<Р>Текст абзаца 2

<Р>Текст абзаца 3

Разрыв строки

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

<Р>Использование<ВR>разрыва<ВR>строки</Р>

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

Заголовок

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

Язык HTML позволяет использовать для оформления заголовков документов специальные теги <Hп>...</Hп>, где п — число от 1 до 6, соответствующее уровню заголовка. Тег <Hп> имеет следующий формат:

<Нn ALIGN=center|left|right>Текст заголовка</Hn>

Параметр ALIGN используется для указания режима выравнивания заголовка аналогично соответствующему параметру тега <Р>. В приводимом ниже примере тег <Н1> определяет заголовок первого уровня, выровненный по центру.

<Н1 АLIGN=сепtеr>Бесплатные игровые программы</Н1>

Шрифт

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

Для указания таких параметров форматирования шрифта в HTML предусмотрен ряд тегов. В табл. 10.1 приведены наиболее часто используемые ил этих тегов.

Таблица 10.1. Теги HTML, определяющие параметры шрифта

Первые семь тегов определяют начертание символов, а также подчеркивание, зачеркивание и положение символов в строке (надстрочные и подстрочные индексы). Все эти теги являются парными и нс предусматривают указания дополнительных параметров. Следует особо отметить, что подчеркивание в HTML-документах, как правило, применяется для обозначения гиперссылок, поэтому во избежание путаницы следует по возможности избегать использования тега <U>...</U>.

Тег <FONT>...</FONT> определяет дополнительные параметры шрифта и заслуживает более подробного рассмотрения. Этот тег имеет следующий формат:

<FONT SIZE=[+|-]1|2|3|4|5|6|7 COLOR="Код цвета шрифта" FACE="Название шрифта">Текст</FОNТ>

Параметр SIZE тега <FONT> определяет размер шрифта в условных единицах от 1 (самый мелкий) до 7 (самый крупный). Кроме того, размер шрифта может быть указан относительно базового размера, для чего перед значением параметра SIZE следует ввести символ <+> или <->. Например, если стандартный размер шрифта равен 3, то при значении параметра SIZE=-2 результат будет таким же, что и при значении SIZE=1. Подобный подход удобен для уменьшения или увеличения размера шрифта, которым оформлен определенный текстовый фрагмент, относительно размера шрифта основного текста Web-страницы. При этом базовый размер шрифта может быть установлен с использованием тега <BASEFONT>.. .</BASEFONT>, имеющего следующий формат:

<BASEFONT SIZE=1|2|3|4|5|6|7>Текст</BASEFONT>

Значения параметра SIZE задаются аналогично абсолютным значениям этого параметра для тега <FONT>. По умолчанию базовый размер шрифта принимается равным 3.

Параметр COLOR тега <FONT> позволяет указать цвет шрифта. Более подробно использование кодов цвета описано в разделе «Раздел основного текста страницы».

Значение параметра FACE определяет гарнитуру, или, проще говоря, внешний вид шрифта в броузере. Например, для отображения текста с использованием шрифта Times New Roman, входящего в комплект стандартных шрифтов Windows, следует указать значение параметра FACE="Times New Roman". Чтобы оформить текст с использованием рубленого шрифта (такой шрифт не имеет засечек на концах букв), например, шрифта Arial, следует указать параметр FACE="Arial".

Значением параметра FACE также может являться список названий шрифтов, разделенных занятыми. В таком случае шрифтом текста будет первый имеющийся в системе, в которой выполняется просмотр Web-страницы, из перечисленных в списке. Использование списка шрифтов является более предпочтительным, поскольку Web-страницы предназначены для просмотра множеством людей, имеющих различные модели компьютеров и различные операционные системы. Указанного в значении параметра FACE шрифта может просто не оказаться в системе, на которой будет выполняться просмотр страницы. В таком случае броузер подставит шрифт по умолчанию или же использует какой-либо другой шрифт, который сочтет наиболее близким к указанному. В результате такой подстановки текст страницы может оказаться нечитабельным. Во избежание подобной ситуации следует использовать список близких по виду шрифтов, являющихся стандартными для различных операционных систем. Например, в то время как шрифт Arial широко распространен на компьютерах, работающих под управлением ОС Windows, на Macintosh стандартным рубленым шрифтом является Helvetica. Чтобы текст Web-страницы, оформленный рубленым шрифтом, правильно отображался в обеих этих системах, можно воспользоваться параметром FACE="Arial, Helvetica".

Графические элементы

Язык HTML позволяет помещать на Web-страницы не только текстовые, но и графические элементы. Для размещения графических объектов используется тег HTML <IMAGE>. Этот тег является непарным и имеет следующий формат:

<IMG SRС="URL графического файла" ALT="Замещающий текст"

ALIGN=bottom|middle|top |left|right НЕIGНТ=высота Width=Ширина Border=Толщина

границы НSРАСЕ=Отступ по горизонтали VSРАСЕ=Отступ по вертикали>

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

SRC="http://domen.com.zp.ua/domen.gif" src="images/logo.jpg"

Стандартными форматами графических файлов, которые могут отображаться практически всеми Web-броузерами, являются форматы GIF и JPEG. Некоторые броузеры также обеспечивают отображение графики в ряде других форматов, например, PNG или BMP. Однако эти форматы не являются стандартными для Web. Их использование допустимо только в тех случаях, когда создаваемая страница предназначена для просмотра ограниченным кругом людей, заведомо имеющих в своем распоряжении броузеры, обеспечивающие отображение этих форматов. Кроме того, графические файлы в таких форматах, как BMP, имеют значительный объем, поэтому на их передачу через медленные соединения будет затрачиваться много времени.

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

<IMG src="images/mail.gif" АlТ="Отправить сообщение">

Параметр ALIGN определяет режим выравнивания графического объекта относительно текста. Сводная информация об основных режимах выравнивания приводится в табл. 10.2.

Таблица 10.2. Основные режимы выравнивания графических объектов

Режимы выравнивания top, middle и bottom управляют выравниванием графических объектов относительно текста строки, в то время как режимы left u right обеспечивают выравнивание относительно страницы.

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

Параметр BORDER используется для указания ширины границы, отображаемой вокруг графического объекта. Ширина указывается в пикселах. В большинстве случаев отображение границы вокруг графических объектов не требуется. Однако по умолчанию граница отображается вокруг всех графических объектов, на которые назначены гиперссылки. Если этого необходимо избежать, следует явно указать ширину границы равной 0:

<IMG src="images/planner.gif" BORDER=0>

Параметры HSPACE и VSPACE используются для указания отступа по горизонтали и вертикали соответственно. Эти параметры определяют расстояние от графического объекта до текста страницы и других объектов.

Гиперссылки

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

Для определения гиперссылки используется тег <А>.. .</А>, имеющий следующий формат:

<А href="URLцелевого объекта" ТАRGЕТ="Имя целевого фрейма или окна">Текст или обьект </А>

Параметр НREF используется для указания URL объекта, к которому будет осуществляться переход при щелчке на гиперссылке в окне броузера (целевого объекта), например:

HREF="http://domen.com.zp.ua/"

По умолчанию при щелчке на гиперссылке связанный с ней целевой объект отображается в том же окне или фрейме, что и исходная Web-страница, то есть страница, на которой расположена гиперссылка. Однако этот порядок вещей нетрудно изменить. Для этого и служит второй параметр тега <А> — параметр TARGET. В качестве значения этого параметра может быть указано имя фрейма, в котором необходимо открыть целевой объект. Если же окно или фрейм с указанным именем отсутствует, при щелчке на гиперссылке броузер открывает новое окно, отображая в нем объект, на который указывает гиперссылка, и присваивая этому окну указанное имя.

Кроме того, можно сделать так, чтобы броузер отображал целевой объект гипер-ссылки в новом окне в любом случае. Для этого следует указать значение параметра TARGET="_blank". Обратите внимание, что имя начинается с символа подчеркивания. Это указывает на то, что значение параметра TARGET является специальным именем, а не указывает на один из фреймов или окон, созданных явно.

Можно также использовать в качестве значения параметра TARGET еще одно специальное имя — _top. Это имя требуется для открытия целевого объекта не в текущем фрейме, а в главном окне — в том, в котором отображается весь набор фреймов. Более подробное описание фреймов и наборов фреймов ожидает вас далее в этой главе.

Закладки

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

Для представления закладки в языке HTML, как это ни странно, используется тот же тёг, что и для представления гиперссылки, — тег <А>.. </А>— однако в этом случае он имеет несколько иной формат:

<А NAME="Имя закладки">Текст или обьект</А>

Параметр NAME используется для указания имени, которое следует указывать в параметре HRЕF для создания ссылки на помеченный закладкой объект. Например, если закладка на Web-странице была определена с использованием тега <А NAME= "chapter4">, то тег для создания гиперссылки на эту закладку будет выглядеть следующим образом:

<А href="#chapter4">

Обратите внимание, что при определении ссылки на закладку имени этой закладки должен предшествовать символ «#». Этот символ позволяет отличить имя закладки от имени файла.

Гиперссылка также может указывать на закладку, расположенную на другой HTML-странице. Для этого в качестве значения параметра НRЕF тега гиперссылки необходимо указать URL страницы, на которой определена требуемая закладка, затем — символ «#», и после этого — имя закладки, к которой следует осуществлять переход при щелчке на гиперссылке в броузере:

<А href="guidance. html#chapter4.">

Горизонтальные линии

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

<HR ALIGN=lert|right|center SIZE= Толщина Width =Ширина NOSHADE>

Параметр ALIGN используется для указания режима выравнивания. Линия может быть выровнена по левому краю (значение left), по правому краю (значение right) или по центру страницы (значение center).

Параметр SIZE позволяет указать толщину линии в пикселах.

Параметр WIDTH используется для указания ширины линии. Значение этого параметра может быть задано как в пикселах, так и в процентах относительно ширины страницы. Указание ширины в процентах в большинстве случаев является более предпочтительным, поскольку в этом случае ширина линии будет изменяться в зависимости от размера окна броузера, в котором выполняется просмотр страницы. Если же ширину линии указать в пикселах, то при просмотре страницы в системах с низким разрешением экрана линия может не уместиться в пределах видимого окна броузера.

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

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

Списки

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

Маркированный список

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

Для определения маркированного списка язык HTML позволяет использовать тег <UL>...</UL>. Этот тег имеет следующий формат:

<UL ALIGN=center|left|right|justify TYPE=dlsk|circle|square>

<LI ALIGN=center|left| right| justify TYPE=disk|circle|square>ТЕКCT элемента списка</LI>

</UL>

Тег <UL>...</UL> определяет границы списка и общие параметры форматирования всех его элементов. Параметр ALIGN задает режим выравнивания элементов списка аналогично одноименному параметру тега <Р>.. .</Р> (см. раздел «Абзац»). Параметр TYPE определяет тип маркеров списка: при указании значения disk используются круглые закрашенные маркеры, значения circle — круглые незакрашенные маркеры, а значения square — квадратные маркеры.

Текст каждого из элементов списка заключается в пределах парного тега <LI>... </LI>. Параметры этого тега аналогичны параметрам тега <UL>, однако их действие распространяется только на отдельный элемент списка, а не на список целиком.

Нумерованный список

В отличие от маркированного, нумерованный список состоит из набора последовательно пронумерованных абзацев. Для определения маркированного списка в языке HTML применяется парный тег <OL>.. .</OL>. Этот тег имеет следующий формат:

<OL ALIGN=center|left|right|justify SТАRТ=Начальное значение TYPE=A|a|I|i|1>

<LI ALIGN=center|left|right|justify TYPE=A|b|a|I|i|i VALUE=Номер элемента списка>Текст элемента списка</Li>

</OL>

В целом формат этого тега сходен с форматом тега <UL>, требуемого для определения маркированных списков: между открывающей и закрывающей частями тега располагаются элементы списка, каждый из которых определяется с использованием тега <LI>.. .</LI>. Тем не менее тег <01> допускает указание большего количества параметров форматирования, нежели тег <UL>. Рассмотрим эти параметры.

Значение параметра ALIGN определяет режим выравнивания текста в пределах нумерованного списка. Подробнее о режимах выравнивания говорилось в разделе «Абзац».

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

Значение параметра TYPE определяет тип нумерации списка. Элементы списка могут иметь алфавитную нумерацию (латинский алфавит, значение А или а) либо нумероваться римскими (значение I или i) или арабскими (значение 1) цифрами.

Ter <LI> также позволяет указывать ряд параметров форматирования элементов нумерованного списка. Параметры ALIGN и TYPE имеют то же значение, что и в контексте тега <OL>, однако их действие распространяется лишь на отдельный элемент нумерованного списка, а не на весь список. Кроме того, тег <LI> допускает использование параметра VALUE. Этот параметр позволяет явно указать номер элемента списка. Явное указание номера элемента также приводит к изменению последовательности нумерации. То есть, если для определенного элемента списка был указан параметр VALUE=100, то этот элемент получает номер 100, следующий — номер 101 и т. д. Параметр VALUE позволяет продолжить прерванную ранее нумерацию аналогично параметру START тега <OL>, однако последний подход является более предпочтительным, поскольку облегчает восприятие структуры списка при правке HTML-кода страницы.

Список определений

Нередко возникает необходимость в создании списков, содержащих определенные термины или понятия и пояснения к ним. Такие списки называются списками определений. Для их создания в HTML-документах применяется тег <DL>... </DL>, имеющий следующий формат:

<DL>

<DТ>Термин</DТ>

<DD>0пределение</DD>

</DL>

Границы списка определений определяются собственно тегом <DL>...</DL>. Каждый из элементов списка образуется двумя компонентами. Первый из них, тег <DT>... </DT>, ограничивает определяемый термин. При отображении HTML-страницы в броузерах текст, помеченный как термин списка определений, выделяется относительно основного текста страницы (как правило, шрифтом полужирного начертания).

Второй компонент — это определение термина. Для его обозначения используется тег <DD>...</DD>. Текст определения выделяется в броузерах отступом относительно текста термина.

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

Допускается использование тегов <DT> и <DD> без соответствующих закрывающих тегов. При этом открывающий тег ставится в начале текстового блока, соответствующего термину или определению, и его действие распространяется вплоть до следующего тега <DT> или <DD> или до закрывающего тега списка </DL>.

Таблицы

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

Для создания таблиц в HTML-документах используется тег <TABLE>...</TABLE>, имеющий следующий формат:

<TABLE ALIGN=left|right|center WIDТН="Ширина таблицы BORDER= "Толщина границы" CELLSPACING="Интервал между ячейками" CELLPADDING="Paзмep полей ячеек">

<TR ALIGN=left right|center|justify VALIGN=top|middle|bottorm>

<TD ROWSPAN=Колличество строк COLSPAN=Колличество столбцов ALIGN=left|right|center|justify VALIGN=top|middle|bottom WIDTH=Ширина ячейки BGCOLOR="Код цвета фона ячейки">Текст ячейки</TD>

</TR>

</TABLE> Рассмотрим назначение отдельных параметров тега TABLE.

Параметр ALIGN определяет режим выравнивания таблицы (но не текста в ячейках таблицы!). Таблица может быть выровнена по центру (значение ALIGN= center), по левому краю (значение ALIGN=left) или по правому краю страницы (значение ALIGN=right).

Параметр WIDTH позволяет указывать ширину таблицы в пикселах или процентах от ширины области окна броузера, отведенной под отображение документа. В первом случае достаточно указать значение ширины, например:

WIDTH=200

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

Если необходимо, чтобы ширина таб.тацы изменялась в зависимости от ширины рабочей области окна броузера, можно указать значение ширины в процентах:

WIDTH=75%

Параметр BORDER определяет толщину линий границы в пикселах. Если границы необходимо скрыть, следует присвоить этому параметру значение 0:

BORDER=0

Параметр CELLSPACING позволяет указать интервал между ячейками таблицы в пикселах.

Значение параметра CELLPADDING определяет размеры полей ячеек. Это значение также указывается в пикселах.

Следует отметить, что параметр CELLPADDING оказывает влияние на все четыре поля каждой из ячеек таблицы: верхнее, нижнее, левое и правое.

Каждая из строк таблицы определяется тегом <TR>...</TR>. Этот тег позволяет указывать основные параметры форматирования для каждой из строк таблицы в отдельности.

Параметр ALIGN управляет режимом выравнивания текста в ячейках строки по горизонтали. Эти режимы выравнивания аналогичны режимам выравнивания текста основного абзаца документа. В то же время параметр VALIGN позволяет устанавливать режим выравнивания текста по вертикали. Текст может быть выровнен по верхнему (top) или нижнему (bottom) краю ячейки, а также по середине ячейки (middle).

Для определения ячейки таблицы используется парный тег <TD>...</TD>. Между открывающей и закрывающей частями этого тега размещаются данные, которые должны быть отображены в соответствующей ячейке таблицы. В качестве таких данных может выступать не только числовая и текстовая информация, но и графические элементы, гиперссылки и даже формы, содержащие поля ввода, списки, кнопки и другие элементы. Все видимые элементы Web-страницы можно разместить в пределах единственной ячейки таблицы.

Все данные, которые должны отображаться в таблице, необходимо размещать в пределах тегов <TD>...</TD>, между их открывающими и закрывающими частями. Положение на странице остальных данных и объектов, размещенных в пределах тега <TABLE>...</TABLE>, но не заключенных между тегами <TD> и </TD>, при их отображении в броузере окажется неопределенным: они могут быть размещены в любом месте за пределами таблицы, в зависимости от реализации броузера.

Параметр ALIGN и VALIGN тега <TD> имеет то же назначение, что и соответствующий параметр тега <TR>, однако его действие распространяется на отдельную ячейку таблицы.

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

Параметр BGCOLOR позволяет указать цвет фона ячейки. Более подробно коды цветов были рассмотрены в разделе «Раздел основного текста страницы». Если этот параметр не указан, для ячейки устанавливается «прозрачный» цвет фона; в таком случае фоном для ячейки будет служить основной фон страницы — цвет или рисунок.

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

Чтобы лучше разобраться в структурной организации таблиц, представим ее в несколько упрощенном варианте:

<TABLE>

<TR>

<TН>Заголовок столбца 1</ТН>

<TH>3аголовок столбца -3</ТН>

<ТН>Заголовок столбца 3</ТН>

</TR>

<TR>

<TD>Текст ячейки 1:1</TD>

<TD>Текст ячейки 1:2</TD>

<TD>ТЕCT ячейки 1:3</TD>

</TR>

<TR>

<TD>Текст ячейки 2:1</TD>

<ТD>Текст ячейки 2:2</TD>

<TD>ТЕКСТ ячейки 2:3</ТD>

</TR>

</TABLE>

Приведенный выше HTML-код представляет собой пример таблицы размером 3х3 ячейки. Каждая из строк таблицы представлена парой тегов <TR>...</TR>. Первая строка содержит заголовки столбцов, для представления которых используются парные теги <ТН>...</ТН>. Остальные две строки содержат обычные ячейки, предназначенные для размещения основных данных таблицы. Каждой из ячеек соответствует пара тегов <TD>.. .</TD>.

Формы

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

Таблица 10.3. Типы элементов форм

Параметр NAME позволяет указать имя элемента формы. Это имя используется программой-обработчиком для идентификации получаемых данных.

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

Параметр CHECKED используется совместно с флажками и переключателями. Этот параметр указывается в том случае, когда флажок или переключатель должен быть установлен по умолчанию.

Параметр SIZE определяет ширину полей ввода, а параметр MAXLENGTH — максимально допустимую длину строки, которую можно ввести в это поле.

Параметр ALIGN используется для указания режима выравнивания элемента формы. Элементы формы выравниваются аналогично графическим объектам.

Многострочные текстовые поля

Многострочные текстовые поля форм позволяют вводить крупные текстовые фрагменты. Для определения многострочного текстового поля используется тег <TEXTAREA>...</TEXTAREA>, имеющий следующий формат:

<TEXTAREA NAME="Имя поля" ROWS="Количество строк"COLS="Количество столбцов">Текст по умолчанию</ТЕХТАRЕA>

Параметр NAME используется для указания имени, служащего для идентификации текстового поля. Значения параметров ROWS и COLS определяют высоту и ширину текстового поля в строках и столбцах символов соответственно.

Поля списков

Формы могут включать в себя поля многострочных и раскрывающихся списков. Такие списки применяются для выбора одного или нескольких вариантов из предопределенного набора. Для определения этих полей используется тег <SELECT>... </SELECT>, имеющий следующий формат:

<SELECT NАМЕ="Имя поля" SIZE=Размерep списка MULTIPLE ALIGN=top|middle|bottom|left|right>

<OPTION SELECTED VALUE="Зачение">Символы</ОРТION>

</SELECT>

Параметр NAME используется для указания имени поля.

Значение параметра SIZE определяет высоту поля в строках. По умолчанию создается раскрывающийся список. Для создания обычного списка следует указать значение параметра SIZE не менее 2.

Параметр MULTIPLE позволяет выделять в списке несколько различных вариантов. Если этот параметр не указан, пользователь сможет выбирать только один из содержащихся в списке вариантов. И наконец, параметр ALIGN определяет режим выравнивания поля списка.

Каждый из представленных в списке вариантов определяется тегом <OPTION>... </OPTION>. Этот тег допускает задание двух параметров. Параметр SLELECTED указывает на то, что соответствующий вариант выбирается по умолчанию. Параметр VALUE определяет значение, передаваемое программе-обработчику данных формы при выборе соответствующего варианта.

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

Фреймы

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

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

<FRAMESET ROWS="Вертикальная структура фрейма" COLS="Горизонтальная структура фрейма">

<FRAME SRC="URL исходной страницы фрейма" NAME="Имя фрейма" MARGINWIDTH="Paзмep левого и правого полей" МАRGINHEIGHT="Размер верхнего и нижнего полей" SCROLLING=yes|no|auto NORESIZE>

</FRAMESET>

<NOFRAMES>

<BODY> Код страницы для отображения в броузерах, не поддерживающих фреймы

</BODY>

</NOFRAMES>

Параметры ROWS и COLS тега <FRAMESET> используются для определения структуры набора фреймов по вертикали и горизонтали. Допустим, необходимо создать набор из двух фреймов, расположенных горизонтально, в верхнем из которых необходимо отображать логотип Web-сайта и ссылки на основные страницы (панель навигации), а нижний предназначен для отображения информационных страниц. Верхний фрейм должен иметь высоту 60 пикселов, а нижний — занимать всю оставшуюся часть рабочей области окна броузера. Для создания такого набора будет использоваться следующий тег:

<FRAMESET ROWS="60,*">

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

Аналогично, если требуется создать набор, в левом фрейме которого располагается вертикальная панель навигации шириной 100 пикселов, а всю оставшуюся часть справа занимает область для отображения основных страниц сайта, тег <FRAMESET> будет иметь следующий вид:

<FRAMESET COLS="100, *">

</FRAMESET>

После определения общей структуры набора фреймов необходимо описать каждый из фреймов, входящих в набор. Для этой цели служит тег <FRAME>. Этот тег является непарным.

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

Параметр NAME определяет имя фрейма. Указание имени фрейма позволяет загружать в него документы по щелчку на гиперссылках, расположенных в других фреймах. Чтобы обеспечить открытие целевого документа гиперссылки в определенном фрейме, имя этого фрейма должно быть указано в качестве значения параметра TARGET этой гиперссылки. Например, при щелчке на гиперссылке, определенной с использованием представленного ниже тега, содержащийся в документе prices, html прейскурант продукции будет отображен с именем information:

<А href="prices.html" TARGET="information">Товары и цены</А>

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

Параметры MARGINWIDTH и MARGINHEIGHT определяют размеры полей фрейма.

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

Указание параметра NO RESIZE запрещает изменение размеров фрейма в ходе просмотра.

Обратите внимание, что тег <FRAMESET> замещает собой тег <BODY>, используемый на всех HTML-страницах, но не в наборах фреймов. Дело в том, что набор фреймов сам по себе не является Web-страницей. Он лишь определяет структуру, в пределах которой будут отображаться другие Web-cтраницы. Таким образом, наборы фреймов не допускают указания каких бы то ни было отображаемых элементов Web-страниц, будь то текст, рисунки, гиперссылки или другие элементы.