Вложенные таблицы

Команды, управляющие созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка HTML используется для представления на web-странице так называемых «вложенных» таблиц, пример описания которых вы можете видеть ниже: 

<TABLE BORDER="1" CELLPADDING="6" WIOTH="600">  <САРТION>Спряжение стандартного глагола <EM>to invite:</EM></CAPTION>  <TR>  <TH МЮТН="300">Перевод</ТН>  <TH WIDTH="300">Future</TH>  <TH WIDTH="300">Future-in-the-Past</TH>  </TR>  <TR>  <TD COLSPAN="3" WIDTH="527">  <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="588">  <TR>  <TD WIDTH="194">Я (мы) приглашу(-сим)</ТD>  <TD WIDTH="194">I (we) shall invite</TD>  <TD WIOTH="194">I (we) should invite</TD>  </TR>  <TR>  <TD WIDTH="194">OH (вы. они) пригласит (-ите. -ят)</ТD>  <TD WIDTH="194">He (you. they) will invite</TD>  <TD WIDTH="194">He (you. they) would invite</TD>  </TR>  </TABLE>  </TD>  </TR>  </TABLE> 

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

В приведенном примере для разметки внешней таблицы использован атрибутCELLPADDING со значением 6, прежде всего, для того, чтобы вам было легче визуально отличить внешнюю таблицу от внутренней. Если для обеих таблиц установить нулевое значение отступов и толщины рамок, таблицы «слипаются» в окне броузера, что позволяет создать невидимую пользователю конструкцию спроизвольным разбиением. Этот прием часто используется для создания «прозрачных» таблиц, играющих роль верстальной сетки для размещения элементов web-страницы.

 Фреймы

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

Фреймы — способ организации структуры сайта, при котором web-страницадробится на ряд отдельных составляющих и «собирается» в главном окне броузера из нескольких независимых или вложенных окон. При таком представлении каждый компонент страницы является самостоятельным документом HTML и встраивается в ту область экрана, которая задается директивой<FRAMESET>. Данный способ применяется в основном для дробления web-страницы на логические разделы: например, в верхнем фрейме выводится рекламный баннер, в левом — элементы навигации, в правом — основной текст страницы, в нижнем — сообщение об авторских правах и адрес электронной почты разработчика ресурса. При этом нажатие на любую из навигационных кнопок приводит к изменению содержимого лишь одного окна, все остальные фреймы остаются без изменений. Если содержимое фрейма не умещается в видимые границы окна, броузер отображает полосы прокрутки.  В случае применения фреймов индексный html-файл (index.html) несколько отличается от обычного. Как известно, стандартный документ HTML имеет два логических раздела: раздел заголовков <HEAD> и раздел <BODY>, определяющий тело документа. При использовании фреймов раздел <BOOY> заменяется на раздел <FRAMESET>. Все остальные документы, отображаемые в отдельных фреймах,имеют стандартное представление. 

В общем виде синтаксис записи директивы <FRAMESET> выглядит следующим образом: 

<FRAMESET ROWS="значение" COLS="значение" FRAMEBORDER="значение"  FRAMESPACING="значение">  <FRAME МАМЕ="имя" TARGET="значение" SCROLLING="yes. no или auto" SRC="URL"  FRAMEBORDER="значение" NORESIZE>  <NOFRAMES>  <BODY>  Текст, отображаемый в броузерах, не поддерживающих фреймы.  </BODY>  </NOFRAMES>  </FRAMESET> 

Очевидно, что общая структура представления фреймов во многом схожа с представлением таблиц: тег <FRAMESET>, задающий параметры отображения всех фреймов в документе, содержит необходимое количество тегов <FRAME>, описывающих каждый отдельный фрейм. Причем некоторые атрибуты, применяемые совместно с командой <FRAME>, могут отменять параметры, заданные в атрибутах команды <FRAMESET>. Как и в случае с <ТАВ1Е>, директива описания фреймов допускает вложение одного элемента <FRAMESET> в другой. 

Атрибут тега <FRAMESET> FRAMEBORDER определяет, надо ли отображать на экране пользователя границы фреймов. Параметр этого атрибута может принимать одно из двух значений: 1, если разделители нужны (используется по умолчанию), или 0, если программист желает сделать их невидимыми. Атрибут FRAMESPACING указывает на толщину разделителей в пикселах. Атрибуты ROWS и COLS определяют соответственно количество горизонтальных и вертикальных отрезков во фреймовом наборе.  Параметры атрибутов ROWS и COLS можно задавать различными способами: в пикселах, процентах и в относительных длинах. Если атрибут ROWS в теге<FRAMESET> не указан, каждый столбец будет занимать всю длину страницы, если не указан атрибут COLS, каждая строка растянется на всю видимую ширину экрана.

Параметры фреймов задаются слева направо для горизонтальных элементов и сверху вниз для вертикальных. Например, запись <FRAMESET COLS="50*.50Х"> разделит страницу вертикально на две равные части, запись <FRAMESETROWS="250. 10%. *"> задаст горизонтальное разделение страницы на три участка: первый — с фиксированной высотой 250 пикселов, второй — высотой в 10 % от оставшегося пространства, третий же займет все пространство, которое останется свободным после создания первых двух окон. В этом примере при задании параметров атрибута ROWS были использованы все три варианта определения отрезков фреймового набора: в пикселах (250 точек), процентах (10 %) и в относительных длинах (включение символа *). Разделения web-страницы на сетку 2x3 ячейки можно добиться, например, применением следующих значений атрибутов директивы <FRAMESET>: <FRAMESET ROWS="40%. 60%" COLS="33%. 34%. *">. 

Команда <FRAME> может включать следующие атрибуты: NAME, в котором задается уникальное имя для данного конкретного фрейма, набранное с использованием символов латинского алфавита, TARGET, содержащий информацию о целевом фрейме (рекомендуется использовать значение по умолчанию — "contents"), SCROLLING, определяющий наличие ("yes"), отсутствие ("по") или отображение по мере необходимости ("auto") полос прокрутки в текущем фрейме, SRC, в котором указывается адрес открываемой в данном фрейме страницы, FRAMEBORDER, правила записи и назначение которого аналогичны таковым в составе тега <FRAMESET>, и, наконец, атрибут NORESIZE, наличие которого устанавливает запрет на изменение пользователем размеров окна фрейма. Тег <FRAME> может также содержать ряд других необязательных атрибутов, таких как MARGINWIDTH, определяющий размер в пикселах пустого пространства, оставляемого во фрейме в качестве правого и левого полей, и MARGIN-HEIGHT, задающий верхний и нижний отступы.

Директива <NOFRAMES>, включающая вложенные теги <BODY> и </BODY>, позволяет записать произвольное количество html-кода, который будет динамически преобразован в самостоятельную web-страницу в случае, если клиентский броузер не поддерживает фреймы.  Представление гиперссылок для страниц, использующих фреймы, также требует определенной модификации, а именно — обязательного использования атрибута TARGET: 

<А HREF="URL" ТАР6ЕТ="_значение">Текст или элемент IMG</A> 

Допустимые значения атрибута TARGET для применения тега <А> во фреймовых наборах следующие: 

_self — документ, с которым установлена гиперсвязь, открывается в текущем фрейме;  _parent — отображение осуществляется в родительском окне фреймов, независимо от того, какие параметры указаны в директиве <FRAMESET>;  _top — при активизации гиперссылки фреймы перестают отображаться, а содержимое целевого документа выводится в отдельном окне. 

Если вместо значения атрибута TARGET подставить имя фрейма, заданное вами ранее в качестве параметра атрибута NAME тега <FRAME>, при активизации ссылки целевой документ загружается в окне с указанным именем.  Ярким примером использования директивы <FRAMESET> может служить приведенный ниже листинг индексного документа HTML, использующего фреймы: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4:0 Transitional//EN">  <HTML>  <HEAD>  <TITLE>FRAMESET EXAMPLE PAGE</TITLE>  </HEAD>  <FRAMESET FRAMESPACING="0" rows="64.*.64" FRAMEBORDER="0">  <FRAME NAME="top" SCROLLING="no" TARGET="contents" SRC="page_l.htm">  <FRAMESET COLS="150.*">  <FRAME NAME="contents" SRC="page_2.htm" SCROLLING="auto">  <FRAME NAME="main" SRC="page_3.htm" SCROLLING="auto">  </FRAMESET>  <FRAME NAME="bottom" SCROLLING="no" NORESIZE SRO"page_4.htm">  <NOFRAMES>  <BODY>  <P ALIGN="CENTER">Этa страница содержит фреймы, но ваш броузер не поддерживает их отображение.</Р>  </BODY>  </NOFRAME>  </FRAMESET>  </HTML> 

Обратите внимание на то, что определитель DOCTYPE в данном случае содержит указание на версию языка HTML 4.O. Это необходимо, поскольку ссылка на HTML 3.2, не позволяющий использовать фреймы, может вызвать в некоторых броузерах ошибку при трансляции кода.  На первый взгляд фреймы кажутся весьма привлекательными с точки зрения удобства обслуживания сайта: например, для того чтобы изменить состав навигационных элементов, нет необходимости вносить изменения во все страницы вашего ресурса, достаточно лишь подправить документ, отображающийся в соответствующем фрейме. Однако на практике оказывается, что объективных недостатков у данной формы представления web-страниц значительно больше, чем достоинств. 

Во-первых, фреймы весьма сложны в разработке и настройке: достаточно трудно оптимизировать такую страницу для корректного отображения в разных версиях броузеров со всеми допустимыми экранными разрешениями. В некоторых фреймах возможно периодическое появление полос прокрутки, затрудняющих просмотр документа, а жесткий запрет на отображение средств скроллинга может повлечь за собой исчезновение части отображаемых во фреймах страниц заграницей видимой области экрана. Во-вторых, фреймы распознаются далеко не всеми броузерами, в полной мере их поддерживают лишь современные версии Microsoft Internet Explorer и Netscape Navigator. Излишне говорить, что во Всемирной сети достаточно много пользователей, на компьютерах которых установлены старые броузеры. В-третьих, применение фреймов существенно затрудняет управление навигацией сайта при помощи встроенных в броузер кнопок «Вперед» и «Назад», поскольку они рассчитаны, в первую очередь, на работу с документами размером в целый экран, но никак не с отдельными окнами, в которые загружено множество документов. Нажатие на одну из этих кнопок иногда может привести к совершенно непредсказуемым последствиям. 

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

Из всего сказанного напрашивается простой и вполне очевидный вывод: использовать фреймы лучше всего только тогда, когда это действительно необходимо, например, при создании web-чата или интерактивной доски объявлений. Во всех остальных случаях от их применения лучше отказаться. 

  Элемент <МАР> 

Рассмотрим правила создания графических карт при помощи команды <МАР>. 

Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом: 

<МАР МАМЕ="имя карты">  <AREA HREF="URL" SНАРЕ="параметр" COORDS="x1. y1. x2. y2"  АLТ="альтернативный текст">  </МАР> 

Атрибут NAME тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. Следует учитывать, что при задании имени карты важно соблюдение регистра, поскольку интерпретатор броузера различает в данной команде строчное и заглавное написание. Тег <AREA> определяет непосредственно активную область изображения. Атрибут HREF, как и при использовании его совместно с тегом <А>, указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения. Атрибут ALT определяет альтернативный текст, который выводится на экран в специальномвсплывающем прямоугольнике в случае, если пользователь подержит курсор мыши над активным участком карты несколько секунд. Атрибут SHAPE управляет формой активной области и может принимать одно из трех значений: RECT — прямоугольник, CIRCLE — круг или POLY — многоугольник. И наконец, атрибут COORDS позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута приведены в табл. 6.1.  Таблица 6.1. Значения атрибута COORDS

Значение SHAPE	Форма активной области	Синтаксис записи COORDS	Значения параметров COORDS
SHAPE=RECT        SHAPE=CIRCLE     SHAPE=POLY	Прямоугольник        Круг     Многоугольник	COORDS="xl,yl,х2,у2"        COORDS="X,Y,R"     COORDS="x1, y1, x2, y2, x3, y3, ... xN, yN"	x1 и y1 задают координаты левого верхнего угла фигуры, х2и у2 — правого нижнего  X и Y — координаты центра окружности, R — ее радиус в пикселах  x1, y1 ... xN, yN -координаты вершин многоугольника

Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. Иными словами, значение х возрастает справа налево, а значение у — сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: SHAPE="RECT" COORDS="0.0.50Я.50Ж". Необходимо помнить, что если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA>первой, имеет приоритет. 

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

SHAPE=RECT COORDS="0, 0, 20, 20" — создает прямоугольник размером 20x20 пикселов в левом верхнем углу изображения;  SHAPE=CIRCLE COORDS="30, 30, 10" создает круг с центром, расположенном в точке (30, 30) и радиусом 10 пикселов;  SHAPE=POLY COORDS="10, 60, 15, 30, 30, 60" создает треугольник с координатами вершин (10, 60), (15, 30) и (30, 60).  Теперь, когда графическая карта описана вами при помощи тега <МАР>, можно интегрировать ее в web-страницу, подготовив соответствующее изображение влюбом графическом редакторе и вызвав его уже знакомой вам командой <IMG> с атрибутом USEMAP: 

<IMG SRC="URL" WIDTH="ширина" HEIGHT-''высота" BORDER="0" USЕМАР="#имя_карты"> 

Обратите внимание на то, что имя карты, заданное атрибутом NAME тега <МАР>,предваряется в атрибуте USEMAP тега <IMG> символом «#». Все остальные атрибуты данной директивы записываются так,же, как обычно. 

Наглядным примером реализации простой графической карты может служить следующий отрывок html-кода: 

<IMG SRC="/images/bar.gif" BORDER=0 USEMAP="#ny_map">  <MAP NAME="my_map">  <AREA HREF="help.html" АLT="Полный список разделов сайта" SHAPE=RECT  COORDS="0. 0. 118. 28">  <AREA HREF="about.html" ALT="0 нашей компании" SHAPE=RECT COORDS="184.  0. 276. 28">  <AREA HREF="address.html" АLТ="06ратная связь" SHAPE=RECT COORDS="118.  0, 184. 28">  <AREA HREF="guestbook.htmT' ALT="Haшa гостевая книга" SHAPE=RECT  COORDS="276, 0. 373. 28">  </MAP> 

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