Создание таблиц

1.1.Создайте новый HTML-документ в программе Блокнот.

1.2.Введите тег

<TABLE border=10 width=70% align=center>

1.3.Введите строку

<CAPTION valign=top> Список телефонов </САРТION>

1.4.Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:

<TR bgcolor=yellow> <ТН> Фамилия <ТН> Номер телефона</TR>

1.5.Определите последующие строки таблицы, обрамляя каждую из них тегами <TR> и </TR> и помещая содержимое каждой ячейки после тега <TD>.

1.6.Последнюю строку таблицы задайте следующим образом:

<TR> <TD align=center colspan=2>

На первом этаже здания имеется бесплатный телефон-автомат

</TR>

1.7.Завершите таблицу тегом </TABLE>.

1.8.Сохраните документ под именем table.htm и откройте с помощью одного из браузеров.

1.9.Изучите, как созданная таблица отображается браузером, обра­щая особое внимание на влияние заданных атрибутов.

1.10. Измените ширину окна обозревателя и установите, как при этом изменяется внешний вид таблицы.

2. Позиционирование элементов на странице

2.1.Создайте новый HTML-документ.

2.2.Введите заголовок

<H1>Использование таблицы для размещения элементов на странице</H1>

2.3.Добавьте таблицу следующей структуры:

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

<TABLE width=100%>

<TR><TD><TD colspan=2><TD></TR>

<TR><TD colspan=2><TD colspan=2></TR>

</TABLE>

2.4.В первую и третью ячейки первой строки поместите текст, во вторую – рисунок (с помощью тега IMG). Таким образом может быть смоделировано обтекание рисунка текстом слева и справа.

2.5.В первую ячейку второй строки скопируйте таблицу из файла table.htm, во второй создайте маркированный список.

2.6.Сохраните документ под именем page.htm и откройте с помощью одного из браузеров.

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

3. Индивидуальное задание

3.1.Добавьте в документ table1.htm таблицу, структура которой определена вариантом задания.

3.2.Примените таблицу для оформления одной из страниц вашего сайта. Добавьте на одну из страниц табличные данные.

Варианты заданий

1.		2.
3.		4.
5.		6.
7.		8.
9.		10.
11.		12.
13.		14.
15.		16.
17.		18.
19.		20.
21.		22.
23.		24.
25.		26.
27.		28.
29.		30.

 

Контрольные вопросы

1. Для чего в HTML-документах используются таблицы? Приведите примеры.

2. Опишите таблицу, содержащую только одну ячейку. Для чего может быть применена такая таблица?

3. Если тег <CAPTION> написать непосредственно перед закрывающим тегом </TABLE>, будет ли заголовок таблицы размещен под таблицей?

4. Как отразится на внешнем виде таблицы применение атрибута align=center к тегам <TABLE>, <TR> и <TD>?

5. Чем тег <TH> отличается от тега <TD>?

6. Как изменить способ отображения границ таблицы? Приведите примеры.

7. От чего зависит ширина и высота таблицы? Как задать ширину таблицы и отдельной ячейки?

8. Чем отличается использование рисунка в качестве фона ячейки от вставки рисунка в ячейку?

9. Чем отличается установка невидимых границ ячеек от объединения ячеек? Как можно объединять ячейки?

10. Нарисуйте таблицу, заданную следующим образом:

<TABLE border=1>

<TR><TD>A<TD>B<TD>C</TR>

<TR><TD colspan=2>D</TR>

<TR><TD>E<TD rowspan=2 colspan=2>F<TD>G</TR>

<TR><TD>H</TR>

</TABLE>

Лабораторная работа № 4
Формы и фреймы. Публикация Web-узла

Цель работы – ознакомление с созданием Web-форм и фреймовых структур, с особенностями размещения Web-сайта на сервере, получение практических навыков работы с формами и фреймами.

Формы

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

Задавать форму можно в любом месте HTML-документа. Ее элементы помещаются между начальным тегом <FORM> и соответствующим конечным тегом </FORM>. Теги и атрибуты, заключенные между тегами <FORM>, образуют одну форму. Когда пользователь передает форму серверу, браузер посылает на сервер все значения элементов формы: и пустые, и стандартные, и измененные пользователем.

Обязательным атрибутом action тега <FORM> задается URL прикладной программы, которая предназначена для приема и обработки введенных в форму данных. Например

<FORM action=”http://www.ora.com/cgi-bin/update”>

Другой обязательный атрибут тега <FORM> – method задает способ (POST или GET) передачи данных формы на сервер. Например

<FORM method=post action=”mailto: yourname@your.email.address”>

Результат обработки отправленной формы будет размещен в том же окне, где находилась форма, если иное не определено атрибутом target.

Элементы управления вставляются в форму с помощью тега <INPUT>. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, селекторная кнопка, опция, чувствительное к щелчку мыши изображение или кнопка передачи. У этого тега есть много атрибутов, но обязательными для каждого элемента являются атрибуты type и name (для кнопки передачи только type). Для каждого типа элемента ввода используется только подмножество допустимых атрибутов.

Атрибут type служит для задания типа элемента, включаемого в форму, а атрибут name задает имя этого элемента, которое будет пересылаться программе-обработчику.

Наиболее полезным и самым распространенным является элемент формы поле ввода текста, которое позволяет пользователю ввести небольшое количество текста (обычно не более одной строки). Поле ввода текста задается тегом <INPUT>, атрибут type которого устанавливается в значение text. Это значение принято по умолчанию и указывать его необязательно. Для задания имени поля следует использовать атрибут name. С помощью атрибутов size и maxlength задается ширина поля отображения вводимого текста (в знаках) и максимальное количество символов, которые пользователь может ввести в данное поле. Для атрибута maxlength используемое по умолчанию значение не ограничено, а для size – зависит от браузера. Поле ввода текста обычно остается пустым, пока пользователь не введет в него что-либо с клавиатуры. Воспользовавшись атрибутом value, можно задать для этого поля начальное значение. Пример поля ввода:

Ваше имя <INPUT type=text name=name size=35>

Поле пароля практически во всем подобно обычному полю ввода текста, за исключением того, что символы, которые пользователь вводит в это поле, на экране не отображаются. Пользователь видит в поле пароля только последовательность символов «*». Чтобы создать поле пароля, нужно установить значение атрибута type равным password. К полю пароля применимы все остальные атрибуты обычного поля ввода. Обратите внимание, что использование поля пароля не гарантирует защищенности данных, так как при передаче формы на сервер браузер пересылает его содержимое в незашифрованном виде.

Поле выбора файла обеспечивает для пользователя возможность выбрать хранящийся на его компьютере файл и при передаче формы послать его на сервер. При отображении браузером поле выбора файла выглядит как обычное поле, снабженное кнопкой с надписью “Browse”. Пользователь может или ввести полное имя файла с клавиатуры, или, воспользовавшись упомянутой кнопкой, выбрать имя локального файла в диалоговом окне. Поле выбора файла создается в форме путем установки значения file атрибута type. Как и при задании других текстовых полей, нужно указать значения атрибутов size и maxlength.

Опция («флажок») позволяет пользователю быстро и легко выделить элемент в форме или отменить сделанное выделение. Опции можно группировать, создавая наборы. Каждая опция создается путем установки значения checkbox атрибута type в соответствующем теге <INPUT>. Следует также включить в него обязательные атрибуты name и value. Если опция была выбрана, значение атрибута value будет использовано при передаче формы, если нет, то значение не передается. При указании необязательного атрибута checked (без значения) браузер отображает опцию как отмеченную и, если пользователь не отменит выделение опции щелчком мыши, значение атрибута value будет передано на сервер. Для того чтобы создать группу опций, нужно присвоить нескольким опциям одно значение атрибута name. Браузер автоматически собирает значения элементов этой группы и передает на сервер выбранные значения в виде строки, в которой значения элементов указаны через запятую. Например,

Россия<INPUT name=country type=checkbox value=”Россия”>

Страны СНГ<INPUT name=country type=checkbox value ="СНГ">

В некоторых случаях требуется организовать выбор одного из нескольких возможных значений. Для этого используются селекторные кнопки. Селекторная кнопка создается путем присвоения атрибуту type тега <INPUT> значения radio. Как и опции, селекторные кнопки требуют наличия атрибутов name и value; кнопки, которым присвоено общее имя, являются членами группы. Можно задать одну из селекторных кнопок как отмеченную изначально, для этого в соответствующий элемент следует включить атрибут checked. Пример:

Пол<BR>

<INPUT name=sex type=radio value=male checked>мужской<BR>

<INPUT name=sex type=radio value=female>женский

Передача формы на сервер осуществляется после нажатия пользователем кнопки передачи, которая создается заданием значения submit атрибута type тега <INPUT>. По умолчанию кнопка отображается в виде прямоугольника с надписью “Submit”, если надпись нужно изменить, то новую надпись указывают в качестве значения атрибута value. Например,

<INPUT type=submit value="Отправить сообщение">

Пользователь может сбросить (т. е. стереть или установить равными начальным значениям) все элементы формы нажатием кнопки сброса, которую можно создать, указав значение атрибута type равным reset. Заменить стандартную надпись “Reset” на кнопке сброса можно, присвоив новое название атрибуту value:

<INPUT type=reset value="Очистить форму">

Пользуясь значением image атрибута type, можно создать специальную кнопку, представляющую собой чувствительное к щелчку мыши изображение. Когда пользователь щелкает мышью по изображению, браузер, включив в список параметров формы координаты указателя мыши, передает форму на сервер. При задании кнопки-изображения требуется атрибут src, содержащий URL файла изображения. Можно, кроме того, указывать атрибут align, которым задается выравнивание изображения относительно текущей строки текста. Пример:

Выберите точку <INPUT type=image name=point src=”image.gif”>

Скрытые поля. Добавление в тег <INPUT> атрибута type=hidden позволит включить в отправляемую форму значения атрибутов name и value, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.

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

– name определяет наименование поля;

– rows и cols задают размер поля ввода по вертикали и горизонтали в строках и символах соответственно. Например,

<TEXTAREA name=topic cols=38 rows=3>

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

Для создания на форме списков, позволяющих выбрать одно или несколько значений из множества возможных, используется парный тег <SELECT>. Как и для других тегов формы, здесь необходим атрибут name. Чтобы обеспечить возможность одновременного выбора нескольких элементов списка, в тег <SELECT> нужно включить атрибут multiple. В этом случае работа с элементами списка будет организована так же, как и в группе опций, задаваемых с помощью тегов <INPUT type=checkbox>. Если атрибут multiple не задан, в списке можно выбрать только один элемент, как в группе селекторных кнопок. Количество одновременно отображаемых элементов задается атрибутом size. Если значение атрибута size равно 1 (значение по умолчанию), а атрибут multiple не задан, то браузер выводит на экран список в виде выпадающего меню. Если задано значение, превышающее 1, или указан атрибут multiple, браузер представляет на экране прокручиваемый список.

Элементы тега <SELECT> определяются с помощью тегов <OPTION>. Значение каждого элемента задается с помощью атрибута value. Если он не задан, то значение элемента устанавливается равным содержимому тега <OPTION>. Для первоначального выбора значения элемента по умолчанию используется атрибут selected. Если ни в одном из тегов <OPTION> атрибут selected не задан, при отображении выделяется первый элемент. Пример списка:

Выбор

<SELECT name=choice>

<OPTION>Вариант 1

<OPTION>Вариант 2

<OPTION value="Вариант 3">Вариант 3

<OPTION selected>Вариант 4

</SELECT>

Отображение нескольких документов

Язык HTML позволяет в рамках одной Web-страницы отобразить несколько доку­ментов. Для этого страница должна быть разбита на несколько областей – фреймов. Структура документа HTML, содержащего фреймы, отличается от обычной, она описывает только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Элемент <BODY> в таком документе заменяется описанием фреймов, задаваемым парным тегом <FRAMESET>.

Открывающий тег <FRAMESET> должен содержать обязательный атрибут cols или rows, определяющий способ разбиения окна. В случае, когда указан атрибут cols, окно разби­вается вертикальными линиями, при использовании rows – горизонтальными. Если заданы оба атрибута, то создается сетка фреймов. Значение любого из этих атрибутов – пере­численные через запятую размеры отдельных фреймов, например

<FRAMESET cols="60%, 40%">

Значения могут быть заданы в пикселях или в процентах от ширины окна. Послед­няя область может быть определена с помощью символа «*», что означает, что ей выделяется все оставшееся пространство.

<FRAMESET rows="60%, *">

Если перед символом «*» поставить целое значение, то для соответствующей строки или столбца будет выделено в пропорциональном отношении больше пространства. Например, тегом

<FRAMESET cols=”*, 5*, 3*”>

задается создание трех столбцов, второй из которых больше первого в пять раз, а третий – в три.

Помимо обязательных атрибутов, тег <FRAMESET> может содержать необязательные атрибуты:

– frameborder определяет, будут ли отображаться границы фреймов (по умолчанию используется значение 1 – включено);

– border устанавливает толщину линий обрамления в пикселях (по умолчанию 5);

– bordercolor позволяет выбрать цвет линий обрамления;

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

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

<FRAMESET rows="30%, *">

<FRAME src="f1.htm">

<FRAMESET rows="40%, *">

<FRAME src="f2.htm">

<FRAME src="f3.htm">

</FRAMESET>

</FRAMESET>

Тег <FRAME> содержит обязательный атрибут src, с помощью которого указывается, какой документ первоначально загружается в соответствующую область. Значение этого атрибута – URL-адрес нужного документа, например

<FRAME src="text.htm">

С помощью атрибута name фрейму можно задать имя, например

<FRAME src="text.htm" name="left_frame">

Именовать фрейм необходимо в случае, если в него потребуется загружать новые документы. Целевая область открытия HTML-документа определяется атрибутом target тега <A>. По умолчанию этот атрибут принимает значение _self, при котором ссылка открывается в том же фрейме, где она была активирована. Значение _blank позволяет открыть ссылку в новом окне, а при значении _parent документ будет открыт в текущем окне, причем в обоих случаях Web-страница будет развернута во все окно. Если значением атрибута target будет имя фрейма, новый документ будет открыт в соответствующей области экрана, например

<A href=”page2.htm” target=”left_frame”>

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

Фреймы, содержимое которых не умещается в границах отведенного для них пространства, при отображении браузером обычно снабжаются полосами прокрутки. Если места для содержимого достаточно, то полосы прокрутки отсутствуют. Атрибут scrolling предоставляет пользователю возможность явно задавать полосу прокрутки. Значением yes режим отображения линейки включается, значением no – выключается.

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

<FRAME src=”page2.htm” noresize>

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

Публикация Web-документов

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

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

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

Порядок выполнения работы