Кнопки с зависимой фиксацией

Коварный FrontPage.

Несколько слов о тех подводных камнях, которые подстерегают начинающего Web – разработчика, который решил «сэкономить время» и воспользоваться для создания HTML – страниц каким-нибудь HTML – редактором, в частности бесплатно поставляемым Microsoft Internet Explorer пакетом FrontPage Express. В чем проблема? Она заключается в следующем.

Допустим, вы создали новый документ (командой «Файл/Создать»). Далее вы начинаете размещать на нем изображения (команда Вставка/Изображение), создать гиперссылки (команда «Вставка/Гиперссылка). Все очень замечательно. После этого вы сохраняете на диске только что созданную страницу (команда «Файл/Сохранить). Сохранив страницу, вы тестируете ее, запустив свой браузер и загрузив в него страницу. Тесты выполняются: все изображения выводятся как надо, гиперссылки работают. После этого, создав все HTML – страницы сайта, вы загружаете свой сайт в Сеть и тестируете сайт – уже размещенный на каком-либо сервере Интернета – еще раз. Тесты снова показывают, что все работает в полном соответствии с вашим замыслом. Вы даете адрес сайта своим друзьям, размещаете ссылки на него во всех возможных местах Интернета и вдруг получаете письма, что ничего не работает: картинки не грузятся, ссылки не вызывают соответствующие страницы… Вы снова проверяете свой сайт – все работает. Вы в полном недоумении. Что же случилось?

Если бы вы просмотрели текст созданный программой FrontPage HTML – страниц, то удивились бы. В тех местах, где вы ожидали бы увидеть «нормальные» URL ссылающиеся на ресурсы сайта: графические файлы и другие HTML – страницы, вы обнаружили бы несколько странные записи, типа:

<IMG SRC=”file:///D:/MySyte/pictures/01.jpg”>

Что это за странная ссылка? Дело в том, что программа FrontPage создает URL для привязки к файлам локального компьютера, по протоколу file:. Когда вы тестируете свой файл (даже размещенный в Интернете), то браузер ищет для указанных URL ресурсы на вашем компьютере, находит их (ведь они на нем изначально хранятся) и загружает все как надо. Но когда этот HTML – документ получает браузер другого компьютера, то он ищет указанные ресурсы на своем компьютере и не находит. Вот поэтому ссылки не работают, а изображения не выводятся.

Можно ли бороться с этим эффектом? Да, можно, если до размещения первого URL (будь то изображение или гиперссылки) вы сразу же сохраните его на диске. После этого URL как надо. Рекомендуется проверять текст созданных HTML – документов.

Таблицы и фреймы

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

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

• BORDER – ширина рамки.
• CELLPADDING – расстояние между границей каждой ячейки и ее содержимым.
• CELLSPACING – расстояние между ячейками таблицы.
• WIDTH – ширина таблицы.

Строки таблицы задаются тэговой парой <TR> </TR>, а столбцы – <TD> </TD>. Существует еще пара <TH></TH> для заголовков столбцов.

Тэг <TR> может иметь следующие атрибуты

ALIGN – контролирует горизонтальное размещения содержимого в ячейках и может принимать значения: LEFT, RIGHT, CENTER.

VALING – контроль за вертикальным размещением, принимает значения: TOP, MIDDLE, BOTTOM.

Рассмотрим шаблон для любой таблицы, включаемой в HTML документ (в атрибуте WIDTH ширина таблицы не в пикселях, а в процентах относительно рабочего поля браузера. Такое указание разрешено для любого атрибута, использующего числовые данные объекта).

<TABLE BORDER = “0” CELLPADDING= “0” CELLSPACING= “0” WIDTH =”100%>

<TR> <! – Строка заголовка – >

<TH>... </TH>

<TH>... </TH>

<TH>... </TH>

</TR>

<TR> <! – Строка 1 – >

<TD>... </TD>

<TD>... </TD>

<TD>... </TD>

</TR>

<TR> <! – Строка 2 – >

<TD>... </TD>

<TD>... </TD>

<TD>... </TD>

</TR>

</TABLE>

Приведен пример шаблона для построения любой таблицы. Можно добавлять строки или столбцы, изменяя атрибуты тэга <TABLE>, можно несколько изменять ее внешний вид. Любую ячейку (обрамленную парой <TD>... </TD> можно рассматривать, как все рабочее поле и помещать в нее: любой текст, любые изображения, списки, гиперссылки и так далее. Более того, в любую ячейку можно поместить другую таблицу. И таким образом можно создать Web – документ очень сложной структуры. Можно добиться внешнего вида газеты, с обилием колонок, рубрик, картинок. Используя атрибуты BGCOLOR = “# цвет“ и BACKGROUND=” файл”, которые можно добавить к тэгу <TABLE> или <TR>, или даже <TD>, можно получить довольно сложное мозаичное изображение.

На рисунке показано, чего можно добиться используя тэг <TABLE> и приведен соответствующий листинг.

Листинг

<HTML><HEAD><TITLE>Демонстрация возможностей таблиц

</TITLE></HEAD><BODY>

 

<!-Двойная горизонтальная линия красного цвета - >

<TABLE WIDTH=100%>

<TR><TD BGCOLOR=#FF0000 HEIGH=5></TD></TR>

<TR><TD></TD></TR>

<TR><TD BGCOLOR=#FF0000 HEIGH=1></TD></TR>

</TABLE>

 

<! – Основная таблица ->

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>

<TR VALING=TOP>

 

<!-1-й главный столбец - >

<TD WIDTH=260><FONT SIZE=2><IMG SRC=IMG_0185.JPG HEIGHT=227 WIDTH=260><BR><BR>

<B>ПОЛЕЗНЫЙ СОВЕТ</B><BR>

Покупая компьютер, проверьте, сколько операций он совершает в секунду.

Не ленитесь, посчитайте! Проверка займет у вас всего одну секунду, зато вы будете уверены на все сто.

</FONT></TD>

 

<! – Вертикальная линия красного цвета - >

<TD WIDTH=5></TD>

<TD BGCOLOR=#FF0000 WIDTH=2></TD>

<TD WIDTH=5></TD>

 

<!-2-й главный столбец - >

<TD>

<FONT SIZE =2 FACE=”Tahoma, Arial”><CENTER>

<B> В подвале дома №120 по улице Подпольщиков ликвидировали интеллигентский притон. Ненормальные интеллигенты читали по ночам Пастернака, слушали Малера, спорили о высоких материях до хрипоты, чем мешали соседнему наркопритону. </B></CENTER></FONT>

 

<! – Вертикальная линия красного цвета - >

<TABLE WIDTH=100%><TR><TD BGCOLOR=#FF0000 HEIGHT=2>

</TD></TR></TABLE>

 

<! – Внутренняя двух колоночная таблица ->

<TABLE>

<TR VALING=TOP>

 

<! – Левая колонка ->

<TD WIDTH=40%><FONT SIZE=1><P><U> Если </U> вы стоите в пробке и опаздываете на лекцию, расслабьтесь и подумайте о чем-нибудь хорошем. </P>

<P><U> Если </U> вы проспали и не услышали будильник, так стоит ли просыпаться все равно опоздали. </P>

<P><U> Если </U> вы получили двойку за экзамен не стоит напиваться, лучше отоспаться</P></FONT></TD>

 

<! – Вертикальная линия красного цвета - >

<TD WIDTH=5></TD><TD BGCOLOR=#FF0000 WIDTH=2></TD>

<TD WIDTH=5></TD>

 

<! – Правая колонка - >

<TD>ТРАГЕДИИ МАЛЕНЬКИХ ЧЕЛОВЕЧКОВ<BR>

<FONT SIZE =2 FACE=”Tahoma, Arial”><P>

В маленьком человечке все должно быть прекрасненько: и личико, и мыслишки, и одежонка.</P>

<P> У большого человека все большое – и пузище, и деньжища и проблешищи. У маленького – наоборот. У него только одна проблемка замучили уменьшительно-ласкательные суффиксы. </P></FONT></TD>

 

<TR>

</TABLE>

 

</TD> <!- Завершение 2-го главного столбца ->

<! – Вертикальная линия красного цвета - >

<TD WIDTH=10></TD><TD BGCOLOR=#FF0000 WIDTH=1></TD>

<TD WIDTH=10></TD>

 

<! - 3-й Главный столбец>

<TD>

<TD WIDTH=210><FONT SIZE = 2><CENTER><H3>ВНИМАНИЕ!</H3></CENTER>

Впишите в ниже предложенный типовой вариант анкеты свои пожелания вырежьте с сдайте преподавателю.</FONT>

<BR><BR>

<IMG SRC=123. jpg WIDTH=210>

</TD>

</TR>

</TABLE>

<!-Горизонтальная линия красного цвета завершающая таблицу ->

<TABLE WIDTH =100%><TR><TD BGCOLOR=#FF0000 HEIGHT=5>

</TD>

</TR></TABLE>

</BODY></HTML>

Пример применения использования тэга <TABLE>

 

При всей кажущейся сложности HTML – документа, представленного на листинге, все довольно просто.

Для обрамления таблицы, в котором размещен текст и фотографии, горизонтальными линиями красного цвета использованы две дополнительные таблицы. Первая – оформляет двойную линию, которая получена тремя строками (тэг <TR>): в первой и третьей атрибутом HEIGHT задана высота линии в пикселях; вторая – использована для создания промежуточной линии цвета фона. Нижняя горизонтальная линия получена аналогично, но таблица состоит всего из одной строки.

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

Все остальные элементы получены уже известными нами тэгами форматирования и внедрения изображений: <FONT>, <BR>, <P>, <CENTER>, <H>, <U>. Проанализируйте текст листинга, сверяя его с рисунком, вы увидите что все довольно просто, главное не запутаться в замыкающих тэгах </TR> и </TD>. Таблицы дают разработчику полную свободу. Однако, увлекаться этим не стоит, потому что злоупотребление таблицами может привести у обратному эффекту, когда посетитель сайта просто не найдет информации запутавшись в колонках.

ФРЕЙМЫ

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

HTML представляет возможность разбивать всю рабочую область Web – браузера на несколько независимых друг от друга прямоугольных областей – так называемых фреймов (от англ. frame – рамка, кадр). С помощью тэга <TABLE> также как будто бы можно разбить окно браузера на ряд прямоугольных областей, но все они будут существовать в рамка одного HTML – документа. Фреймы позволяют не просто визуально поместить в одном окне несколько областей, но – что гораздо важнее, в каждую такую область загружать отдельный HTML – документ. Используя фреймы, Web – разработчик имеет возможность в одну область поместить документ с кнопками навигации, а другую использовать для загрузки необходимой информации.

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

Ø ROWS, устанавливает разбивку по строкам.

Ø COLS, устанавливает разбивку по столбцам.

Ø BORDERS, задает толщину обрамляющей рамки между фреймами.

Атрибуты ROWS и COLS не могут быть использованы одновременно в одном тэге <FRAMESET>, то есть одним тэгом можно разбить экран только на строки, либо на столбцы. Но зато любую строку (или столбец), в свою очередь также можно «порезать» на части, что напоминает построение таблицы, внутри ячеек, которых могут быть другие вложенные таблицы. Разбивка задается как в пикселях, так и в процентах от размера разбиваемой области.

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

Ø SRC (обязательный), задает URL загружаемого во фрейм документа.

Ø NAME (обязательный), задает уникальное имя фрейма, которое затем может быть использовано в атрибуте TARGET тэга <A>. Имя фрейма может быть использовано, когда список ссылок расположен в одном фрейме, загружать документ требуется в другой

Ø MARGINWIDTH, задает отступ по ширине.

Ø MARGINHEIGHT, задает отступ по высоте.

Ø SCROLLING, может принимать значения “NO” или “AUTO”, которые соответственно запрещают или разрешают скроллинг документа в этом фрейме.

Ø NORESIZE, запрещает изменение размера фрейма. Если этот атрибут не указан, Web – браузер представляет возможность изменять размер фрейма приблизительно также, как изменяется размер окна – с помощью мыши.

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

Пример листинга

<HTML>

<HEAD><TITLE>ФРЕЙМЫ</TITLE></HEAD>

 

<FRAMESET BORDER =0 FRAMEBORDER=0 COLS=”30%,*”>

<FRAME SRC=06_left.htm NAME=MENU_FRAME MARGINWIDTH=0

MARGINHEIGHT=0 NORESIZE>

<FRAME SRC=06.htm NAME=WORK_FRAME MARGINWIDTH=0

MARGINHEIGHT=0 SCROLLING=AUTO>

</FRAMESET></HTML>

 

Листинг HTML – документа 06_left.htm

<HTML>

<BODY BGCOLOR=#AA9900>

<BR><BR>

<FONT SIZE=4 FACE= “Tahome Arial”>

<CENTER>Фрейм: MENU_FRAME<BR><BR>

<A HREF=06_right.htm TARGET=”WORK_FRAME”>

ПЕРВАЯ СТРАНИЦА</A><BR>

<A HREF=XXXXX.htm TARGET=”WORK_FRAME”>

ВТОРАЯ СТРАНИЦА</A><BR>

<A HREF=YYYY.htm TARGET=”WORK_FRAME”>

ТРЕТЬЯ СТРАНИЦА</A><BR>

</CENTER>

</FONT></BODY></HTML>

Результат листинга

Листинг HTML – документа 06.htm

<HTML>

<BODY BACKGROUND=Forest.jpg TEXT=#FFFFFF>

</BODY><CENTER>

<H1>ПРАВЫЙ ФРЕЙМ WORK_FRAME</H1>

</CENTER></HTML>

Результат листинга

Типовая разбивка рабочей области браузера на два фрейма.

ФОРМЫ

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

Формы в HTML аналогичны диалоговым панелям в типовых программах, они имеют тот же набор, элементов: текст, строки ввода, кнопки, списки и так далее.

Форма начинается с тэга <FORM>, а заканчивается </FORM>.

Этот тэг имеет следующие атрибуты:

Ø NAME – имя формы, которое может быть использовано для обработки средствами языка JavaScript.

Ø ACTION – указывает действие, которое будет произведено над внедренными данными.

Ø METHOD – способ посылки данных серверу.

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

ACTION=mailto:[email protected]

Атрибут METHOD может принимать два значения:

Ø METHOD=GET

Ø METHOD=POST

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

Строка ввода

Формат тэга для получения строки ввода текста следующий

<INPUT TYPE=TEXT NAME=F1 SIZE=15 MAXLENGTH=50>

То, что именно строка ввода, определяется значением атрибута TYPE. Атрибут NAME задает уникальное имя поля. Чтобы оно было уникальным в пределах одной HTML – страницы не должно быть двух элементов с одним именем.

Атрибуты SIZE и MAXLENGTH задают ширину строки ввода и максимально допустимую длину вводимой строки соответственно. Частным случаем строки ввода является строка ввода пароля, задаваемая значением PASSWORD атрибута TYPE. В этом случае при вводе вместо символов на экране будут отображаться звездочки:

<INPUT TYPE=PASSWORD NAME=F2 SIZE=5 MAXLENGTH=7>

Кнопки с зависимой фиксацией

Значение RADIO атрибута TYPE позволяет создать радио-кнопку. При этом тэг использует дополнительные атрибуты VALUE и CHECKED:

<INPUT TYPE=RADIO NAME=R1 VALUE=ok CHECKED>Хорошо

<INPUT TYPE=RADIO NAME=R1 VALUE=bad >Плохо

<INPUT TYPE=RADIO NAME=R1 VALUE=null>Никак

В этом примере создается три радио-кнопки для ввода ответа на некий вопрос (для типовых ответов: «хорошо», «плохо», «никак»). Обратите внимание, что атрибут NAME имеет во всех трех случаях одинаковое значение. В противном случае эти три кнопки не составят единую группу. Кроме того, в первом тэге указан атрибут CHECKED, который задает первоначально выделенную кнопку.