Создание Web-страниц
Основные рекомендации по планированию Web-сайта. Ввод и форматирование текста. Редактирование абзацев, списков и заголовков. Особенности настройки цвета ссылки. Изучение динамических кнопок и рисунков. Проведение исследования гиперссылок и закладок.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | методичка |
| Язык | русский |
| Дата добавления | 28.11.2021 |
| Размер файла | 1,0 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Большинство браузеров позволяет включать в документ фоновый рисунок. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.
Описание фонового рисунка включается в тэг BODY, графический файл должен быть формата GIF или JPG. Формат тэга выглядит следующим образом:
<BODY BACKGROUND="picture.gif">
Тэг <EMBED> аналогичен <IMG>, но позволяет включать в Web-страницу файлы произвольного типа. Для них требуется подключение дополнительных модулей (plug-in).
Кроме обычных GIF-файлов, содержащих статические изображения, язык HTML дает возможность включать в документы динамические GIF-файлы.
Бегущая строка. Синтаксис тэга:
<MARQUEE BEHAVIOR=alternate|slide GCOLOR=... WIDTH=... HEIGHT=...> текст </MARQUEE> Подключение видеоизображений (AVI- и MPG-файлы).
<IMG DYNSRC="URL" START=MOUSEOVER WIDTH=... HEIGHT=...>
Графические изображения могут использоваться не только в качестве иллюстрации, но и выполнять роль указателей гипертекстовых связей для обеспечения работы изображения в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тэга-контейнера <A>
Пример:
<A HREF=My_Dok.html><IMG SRC=map.gif></A>
4.3.3 Таблицы
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Синтаксис определения таблицы в общем, виде:
<TABLE BORDER=... WIDTH=... >
<TR>
<TD параметры =… > 1-я клетка 1-ой строки </TD>
<TD параметры =... > 2-я клетка 1-ой строки </TD>
</TR>
<TR>
<TD> 1-я клетка 2-ой строки </TD>
...
</TR>
Где таблица: <TABLE>...</TABLE>. Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.
Строка таблицы: <TR>...</TR>. Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка таблицы: <TD>...</TD>. Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает, пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
... </TABLE>1
Заголовок таблицы: <TH>...</TH>. Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.
Подпись: <CAPTION>...</CAPTION>. Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где будет поставлена подпись (сверху или снизу таблицы). Подпись всегда центрирована в рамках ширины таблицы. Основные атрибуты таблицы приведены ниже.
BORDER -- используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.
ALIGN. Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру). VALIGN -- встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).
NOWRAP -- говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.
COLSPAN -- указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию -- 1.
ROWSPAN -- указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию -- 1.
COLSPEC -- позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20 %".
CELLSPACING -- задает расстояние между ячейками таблицы (по умолчанию 2 пиксела).
CELLPADDING -- определяет расстояние между рамкой ячейки и ее содержимым (по умолчанию 1 пиксел).
WIDTH -- задает ширину таблицы либо в абсолютных единицах, либо в процентах относительно размера экрана. Используя внутри тэга <TD>, можно указывать ширину ячейки.
HEIGHT -- то же, что и WIDTH, но определяет высоту таблицы.
FRAME -- позволяет описывать внешние рамки таблицы. Может принимать следующие значения:
VOID -- нет рамки;
ABOVE -- отображает внешнюю часть рамки;
BELOW -- отображает нижнюю часть рамки;
HSIDES -- отображает верхнюю и нижнюю части рамки;
LHS -- отображает левую часть рамки;
RHS -- отображает правую часть рамки;
VSIDES -- отображает левую и правую части рамки;
BOX или BORDER -- отображает все части рамки.
RULES -- описывает рамки внутри таблицы. Может принимать следующие значения:
NONE -- нет рамок;
GROUPS -- отображает горизонтальные части рамки между группами таблицы;
ROWS -- отображает горизонтальные части рамки внутри таблицы;
COLS -- отображает вертикальные части рамки внутри таблицы;
ALL -- отображает все части рамки внутри таблицы;
BGCOLOR -- задает цвет фона таблицы;
BORDERCOLOR -- задает цвет рамки;
BORDERCOLORLIGHT -- задает цвет светлой части трехмерной рамки;
- BORDERCOLORDARK -- задает цвет темной части трехмерной рамки. Верхние и нижние колонтитулы таблицы задаются контейнерами
<THEAD>, <TFOOT>.
Иногда требуется поместить в таблицу пустые ячейки. Это можно сделать, поместив в ячейку пробел ( ), неразрывный пробел ( ) или тэг <br>.
Пример:
<TABLE BORDER=5>
<CAPTION ALIGN=bottom> Таблица №1 /CAPTION>
<TR>
<TD ROWSPAN=2></TD>
<TH COLSPAN=2>Среднее значение</TH>
</TR>
<TR>
<TH>Рост</TH>
<TH>Вес</TH>
</TR>
<TR>
<TD>Мужчины</TD>
<TD ALIGN=center>174</TD>
<TD ALIGN=center>78</TD>
</TR>
<TR>
<TD>Женщины</TD>
<TD ALIGN=center>165</TD>
<TD ALIGN=center>56</TD>
</TR> </TABLE>
В браузере это будет выглядеть следующим образом:
Рисунок 12 - Таблица
4.3.4 Списки
Существует три основных вида списков в HTML-документе: нумерованный, ненумерованный, список определений.
Можно создавать вложенные списки, используя различные тэги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тэгов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка -- зависит от браузера.
Для создания заголовка списка используется контейнер <LH>.
В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Если удалить произвольное количество элементов нумерованного списка, то остальные номера автоматически будут пересчитаны.
Нумерованный список заключается в контейнер <OL>. Каждый элемент списка начинается с тэга <LI>.
Пример:
<OL>
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> ...
</OL>
Тэг <OL> может иметь параметры:
<OL TYPE=A|a|I|i|1 START=n>
Где
TYPE -- вид счетчика: A -- большие латинские буквы (A,B,C...); a -- маленькие латинские буквы (a,b,c...); I -- большие римские цифры (I,II,III...); i -- маленькие римские цифры (i,ii,iii...); 1 -- обычные цифры (1,2,3...). Используется по умолчанию.
START=n -- число, с которого начинается отсчет.
Для ненумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.
Ненумерованный список заключается в контейнер <UL>. Как и в случае нумерованного списка, каждый элемент начинается с тэга <LI>.
Пример:
<UL>
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> ...
</UL>
Тэг <UL> может иметь параметр:
<UL TYPE=disc|circle|square>
Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).
Список определений заключается в контейнер <DL>. Список состоит из двух частей: термина и его описания. Каждый термин начинается тэгом <DT> , а описание -- тэгом <DD>. Пример:
<DL>
<DT> Отдел маркетинга
<DD> Данный отдел занимается продвижением продуктов и услуг
<DT> Финансовый отдел
<DD> Данный отдел занимается всеми финансовыми операциями
<DT> Отдел кадров
<DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов.
</DL>
Пример:
<ol> <li><p style="margin-top: 0; margin-bottom: 0">132123213213</p></li> <li><p style="margin-top: 0; margin-bottom: 0">2132132131</p></li>
</ol><ol type="I"> <li><p style="margin-top: 0; margin-bottom: 0">132123213213</p></li> <li><p style="margin-top: 0; margin-bottom: 0">2132132131</p></li>
</ol><ol type="A"> <li><p style="margin-top: 0; margin-bottom: 0">132123213213</p></li> <li><p style="margin-top: 0; margin-bottom: 0">2132132131</p></li>
</ol><ul> <li><p style="margin-top: 0; margin-bottom: 0">23213213123</p></li> <li><p style="margin-top: 0; margin-bottom: 0">123213123</p></li>
</ul>
В браузере это будет выглядеть следующим образом:
Рисунок 13 - Списки
4.4 Контрольные вопросы
Каким образом указать конкретное число повторений мультимедиа файлов;
Как указать программе просмотра проиграть файл автоматически;
Как можно проигрывать мультимедиа в в ONLINE режиме;
Как указать текст, который будет отображен браузером, не поддерживающим отображение графики;
Каким образом запретить разбиение данных в ячейке таблицы, т.е. представить единой строкой
Как сделать, чтобы в таблице отсутствовали рамки;
Как указать для списка номер первого пункта;
Как задать вид счетчика для списков, или указать внешний вид маркера.
4.5 Тесты
1) Какие форматы графических файлов наиболее часто применяются в HTML?
а) BMP;
б) JPG;
в) PNG;
г) GIF.
2) Какие основные значения атрибута ALIGN используются для определения положения изображения относительно окружающего текста? а) Left;
б) Right;
в) Top;
г) Bottom;
д) Baseline.
3) В каких тэгах возможно применение картинок?
а) IMG;
б) INPUT;
в) TABLE;
г) BODY.
4) Что будет отображать браузер не поддерживающий изображения, или у которого выключено отображение графики?
а) ничего;
б) выделит место под картинку;
в) будет ALT тэга IMG.
5) Что происходит, если у изображения не указаны атрибуты WIDTH, HEIGHТ?
а) не отображается;
б) отображается в исходном размере картинки;
в) показывается в виде иконки.
6) С помощью каких тэгов описывается таблица?
а) <TABLE>;
б) <TR>;
в) <OL>;
г) <TD>;
д) <BODY> .
7) Что определяет атрибут BORDER у элемента разметки TABLE?
а) расстояние между ячейками;
б) расстояние от содержания до границы;
в) ширину ячейки;
г) ширину границы;
д) вид границы.
5. Лабораторная работа №5
Карты - изображения. Формы. CGI
5.1 Цель работы
Научиться разрабатывать Web-ресурс, содержащий карты изображения и формы.
5.2 Порядок выполнения работы
Создать новый Web-документ, который будет картой вашего раннее созданного Web-ресурса. На данном документе разместить какой-либо графический файл, который будет основой для создания будущей карты-изображения.
Разбить условное изображение на несколько зон, каждая из которых будет в дальнейшем играть роль гиперссылки.
Описать каждую зону карты-изображения через тэги, используя различные формы области изображений.
Описать 1-2 области изображения, таким образом, чтобы оставшаяся часть изображения не реагировала на действия пользователя.
Создать страницу с элементами формы. При этом использовать по возможности все описанные в методическом указании, элементы управления.
Провести исследование элементов управления формы.
К сдаче лабораторной предоставляются: работающая страница на сервере с комментариями каждого тэга и его свойств (атрибутов) в исходнике.
5.3 Методические указания
5.3.1 Карты - изображения
В последнее время многие Web - страницы для организации ссылок используют так называемые карты изображения. Реализация этой возможности предусмотрена языком НТМL и позволяет привязать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять её смысл по графическому образу.
Карта- изображение фактически представляет собой обычное встроенное графическое изображение на Web - странице. Эти изображения могут иметь любой допустимый формат (GIF или JPG). При этом в формате GIF может использовать прозрачный цвет, а также режим чередования строк. Для того чтобы изображение могло использоваться в качестве опорного для карты - изображения, формально не накладывается никаких дополнительных ограничений.
Концепция карты-изображения на Web-страницах может быть реализована в двух различных вариантах -- серверный вариант (server-side imagemap) и клиентский вариант (client-side imagemap). Последнее название часто используют в виде аббревиатуры CSIM. Исторически первым появился и получил распространение серверный вариант карт-изображений, который впервые был реализован в браузере Mosaic. Серверный вариант позволяли использовать первые версии всех трех ведущих браузеров. Серверный вариант может быть реализован в двух различных форматах, которые получили свое наименование по названиям организаций-разработчиков -- NCSA и CERN.
В последнее время все большее развитие получает клиентский вариант, который впервые был реализован в браузере Microsoft Internet Explorer. Начиная с версии 2.0, этот вариант также поддерживает браузер Netscape. Данный вариант имеет свои неоспоримые преимущества и становится все более популярным /5/.
Чтобы включить поддержку карты для изображения, необходимо ввести дополнительный параметр в тэг IMG:
<IMG SRC="url" USEMAP="url#map_name">
Параметр USEMAP указывает, в каком месте находится карта описываемого изображения. Карта изображения определяет, какому участку изображения какой URL соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе. Помещение карты в другой документ позволяет собрать все карты изображений в одном документе (если, их несколько в различных документах), но добавляет еще одну итерацию в сети, когда за первую итерацию выясняется местонахождение карты, а за вторую - выполнение действия, предписанного URL для данного участка изображения. Параметр map_name указывает имя карты для изображения, а предшествующий ему URL определяет местонахождение карты. Если данный URL отсутствует, то карта с указанным именем ищется в текущем документе.
Рассмотрим синтаксис определения карты изображения:
<MAP NAME="map_name">
<AREA [SHAPE=" shape "] COORDS="x,y,..." [HREF=" reference "]
[NOHREF]>
</MAP>
где
<MAP NAME="map_name"> - данный тэг определяет начало описания карты с именем map_name.
<AREA...> - описывает участок изображения и ставит ему в соответствие URL. Параметры:
SHAPE - необязательный параметр, указывающий на форму определяемой области изображения. Может принимать значения:
default - по умолчанию (обычно прямоугольник);
rect - прямоугольник;
circle - круг;
poly - многоугольник произвольной формы.
COORDS - координаты в пикселях описываемой области. Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов, для круга - три координаты (две - центр круга, третья - радиус). Для многоугольника это описание каждого угла в двух координатах -соответственно число координат равно удвоенному количеству углов.
Координаты считаются с нуля, поэтому для описания области 100 на 100 используется описание:
<AREA COORDS="0,0,99,99" ...>
HREF="url" - описание ссылки, действия по которой будут выполняться при щелчке мыши в заданной области.
NOHREF - параметр, указывающий, что ссылка отсутствует для данного участка. По умолчанию, если не указан параметр HREF, то считается , что действует параметр NOHREF. Также, для всех неописанных участков изображения считается, что используется параметр NOHREF.
Если две описанных области накладываются друг на друга, то используется ссылка, принадлежащая первой из описанных областей.
</MAP> - данный тэг завершает описание карты изображения.
5.3.2 Формы
Форма -- это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
Некоторые WWW-browser-ы позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется Web-браузером, создается специальные экранные элементы, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введена пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.
Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами.
Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Форма открывается тэгом <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой.
Тэг <FORM> может содержать три атрибута, один из которых является обязательным:
ACTION: Обязательный атрибут. Определяет, где находится обработчик формы.
METHOD: Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
GET: методом "get" HTTP браузер берёт значение action, добавляет “?” к нему, затем присоединяет набор данных формы, кодированный с использованием типа содержимого "application/x-www-form-urlencoded". Затем перенаправляет всё по гиперссылке на этот URL. В этом сценарии данные формы ограничены кодами ASCII (нельзя использовать спецсимволы) и имеют весьма жесткие ограничения на объем вводимой информации.
POST: методом "post" HTTP браузер проводит транзакцию HTTP "post" (в теле HTTP-запроса), используя значение атрибута action и сообщение, созданное в соответствии с типом содержимого, определённым атрибутом enctype.
ENCTYPE: Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded. "Кнопка", чтобы запустить процесс передачи данных из формы на сервер, создается с помощью тэга.
<INPUT TYPE=submit>
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке.
Надпись на кнопке можно задать любую путем введения атрибута VALUE="[Надпись]".
Пример:
<INPUT TYPE=submit VALUE="Отправить!">
Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя].
Пример:
<INPUT TYPE=submit NAME=button VALUE="Отправить!">
При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Отправить! (т.е. button=Отправить!, это можно видеть в адресной строке).
В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать
по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.
Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя переменной, которая будет передана обработчику. Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем.
Основные типы элементов <INPUT>: TYPE=text
Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина поля для ввода, в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах).
Пример:
<INPUT TYPE=text SIZE=30 NAME=student VALUE="Вася">
Определяет ширину поля в 30 символов, для ввода текста. По умолчанию в окне находится текст, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной student (student=содержимое_поля). Необходимо попробовать отредактировать поле.
TYPE=password. Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*), чтобы посторонний не мог прочесть.
Пример:
<INPUT TYPE=password NAME=pswd SIZE=20 MAXLENGTH=10>
Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля -- 10 символов. Введенный пароль передается обработчику в переменной pswd (pswd=содержимое_поля). Необходимо попытаться ввести информацию в поле.
TYPE=radio. Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка.
Пример:
<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600
бит/с
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с
Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600 (modem=9600). Если пользователь отметит вторую кнопку, обработчику будет передана переменная modem со значением 14400 (modem=14400). TYPE=checkbox
Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.
Пример:
<INPUT TYPE=checkbox NAME=comp VALUE="PC">
Персональные компьютеры
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет
Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут передана одна переменная comp с двумя значениями (comp=WS и comp=IS).
TYPE=hidden - определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, в него можно спрятать от пользователя служебные данные.
Пример:
<INPUT TYPE=hidden NAME=id VALUE="1">
Определяет скрытую переменную индексную id, которая передается обработчику со значением 1.
TYPE=reset - определяет кнопку, при нажатии на которую форма возвращается в исходное состояние (обнуляется). Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name. Пример: <INPUT TYPE=reset VALUE="Очистить поля формы"> Определяет кнопку "Очистить поля" формы, при нажатии на которую форма возвращается в исходное состояние. Элемент <SELECT>: Меню <SELECT> из n элементов выглядит примерно так: <SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
Метка <SELECT> содержит обязательный атрибут NAME, определяющий имя переменной.
Метка <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Для выбора нескольких значений одновременно удерживают кнопку "SHIFT" и выбирают значения мышкой.
Пример:
<SELECT MULTIPLE SIZE=3 NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
<OPTION VALUE="...">[...]
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут selected, показывающий, что данный элемент отмечен по умолчанию.
Пример:
<SELECT NAME="selection">
<OPTION VALUE="option1">Вариант 1
<OPTION VALUE="option2" selected>Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>
Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 2. Обработчику будет передана переменная selection (selection=...) значение которой может быть option1 (по умолчанию), option2 или option3. Элемент <TEXTAREA>:
Пример:
<TEXTAREA NAME=address ROWS=5 COLS=50>
Поле для ввода большого текста, разбитого на абзацы.
</TEXTAREA>
Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере -- address). Атрибут ROWS устанавливает высоту окна в строках (в примере -- 5). Атрибут COLS устанавливает ширину окна в символах (в примере -- 50). Текст, размещенный между метками <TEXTAREA> и </TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
5.3.3 CGI
CGI - Common Gateway Interface является стандартом интерфейса (связи) внешней прикладной программы с информационным сервером типа HTTP, Web сервер/5/.
Обычно гипертекстовые документы, извлекаемые из WWW серверов, содержат статические данные. С помощью CGI можно создавать CGI-программы, называемые шлюзами, которые во взаимодействии с такими прикладными системами, как система управления базой данных, электронная таблица, деловая графика и др., смогут выдать на экран пользователя динамическую информацию.
Программа-шлюз запускается WWW сервером в реальном масштабе времени. WWW сервер обеспечивает передачу запроса пользователя шлюзу, а она, в свою очередь, используя средства прикладной системы, возвращает результат обработки запроса на экран пользователя. Программа-шлюз может быть закодирована на языках C/C++, Fortran, Perl, TCL, Unix Schell, Visual Basic, Apple Script. Как выполнимый модуль, она записывается в поддиректорий с именем cgi-bin WWW сервера. Работа:
Передача данных шлюзам. Для передачи данных об информационном запросе от сервера к шлюзу, сервер использует командную строку и переменные окружения. Эти переменные окружения устанавливаются в тот момент, когда сервер выполняет программу шлюза.
Запросы для различных методов. Информация шлюзам передается в следующей форме:
имя=значение&имя1=значение1&..,
где имя- имя переменной (из оператора FORM, например), и значение - ее реальное значение. В зависимости от метода, который используется для запроса, эта строка появляется или как часть URL (в случае метода GET), или как содержимое HTTP запроса (метод POST). В последнем случае, эта информация будет послана шлюзу в стандартный поток ввода. На файловый дескриптор стандартного потока ввода посылается CONTENT_LENGTH байт. Так же сервер передает шлюзу CONTENT_TYPE (тип передаваемых данных). Сервер не обязан посылать символ конца файла после отсылки CONTENT_LENGTH байт данных и после того, как шлюз их прочитает.
Пример: Возьмем результат работы формы с методом POST
(METHOD="POST") в качестве примера. Пусть получено 7 байт,
закодированных примерно так:
a=b&b=c.
В этом случае, сервер установит значение CONTENT_LENGTH равным 7 и CONTENT_TYPE в application/x-www-form-urlencoded. Первым символом в стандартном потоке ввода для шлюза будет "a", за которым будет следовать остаток закодированной строки.
3) Аргументы командной строки. Шлюз в командной строке от сервера
получает:
остаток URL после имени шлюза в качестве первого параметра (первый параметр будет пуст, если присутствовало только имя шлюза), и
список ключевых слов в качестве остатка командной строки для скрипта поиска, или
- чередующиеся имена полей формы с добавленным знаком равенства (на четных позициях) и соответствующих значений переменных (на нечетных позициях).
Ключевые слова, имена полей формы и значения передаются раскодированными (из HTTP URL формата кодирования) и перекодированными в соответствии с правилами кодирования Bourne shell, так что шлюз в командной строке получит информацию в том виде, как она есть, без необходимости осуществлять дополнительные преобразования.
Запросы оператора FORM. Запросы оператора FORM обрабатываются таким образом, что каждый параметр, отвечающий за имя поля, оканчивается знаком равенства, а остаток представляет собой значение этого параметра. Если присутствует что-либо после имени скрипта (шлюза), то эта информация передается в качестве первого параметра. Иначе первый параметр будет пуст.
Примеры:
/htbin/foo/x/y/z?name1=value1&name2=value2 вызывается как:
/.../foo /x/y/z name1= value1 name2= value2 а
/htbin/foo?name1=value1&name2=value2 вызывается как:
/.../foo '' name1= value1 name2= value2
4) CGI переменные окружения. Следующие переменные окружения не являются специфичными по типу запросов и устанавливаются для всех запросов.
SERVER_SOFTWARE - Название и версия информационного сервера, который отвечает на запрос (и запускает шлюз). Формат: имя/версия .
SERVER_NAME - Имя хоста, на котором запущен сервер, DNS имя, или IP адрес в том виде, в котором он представлен в URL.
GATEWAY_INTERFACE - Версия CGI спецификации на тот момент, когда компилировался сервер. Формат: CGI/версия.
Следующие переменные окружения являются специфичными для разных запросов, и заполняются перед вызовом шлюза:
SERVER_PROTOCOL - Имя и версия информационного протокола, в котором пришел запрос. Формат: протокол/версия.
SERVER_PORT - Номер порта, на который был послан запрос.
REQUEST_METHOD - Метод, который был использован для запроса. Для HTTP, это "GET", "HEAD", "POST".
PATH_INFO - Дополнительная информация о пути, которую передал клиент. Другими словами, доступ к шлюзу может быть осуществлен по виртуальному пути, за которым следует некоторая дополнительная информация. Эта информация передается в PATH_INFO.
PATH_TRANSLATED - Сервер передает преобразованную версию PATH_INFO, которая включает в себя путь, преобразованный из виртуального в физический.
SCRIPT_NAME - Виртуальный путь к шлюзу, который должен выполняться, используемый для получения URL.
QUERY_STRING - Информация, следующая за ? в URL, к которому относится данный шлюз. Это информация представляет собой строку запроса. Она не должна быть декодирована никоим образом. Вне зависимости от командной строки эта переменная всегда должна быть установлена при наличии такой информации.
REMOTE_HOST - Имя хоста, производящего запрос. Если сервер не имеет такой информации, он должен установить REMOTE_ADDR, а это поле оставить не установленным. REMOTE_ADDR - IP адрес хоста, производящего запрос. AUTH_TYPE - Если сервер поддерживает идентификацию пользователя, и шлюз является защищенным от постороннего доступа, этот специфичный для протокола метод идентификации используется для проверки пользователя.
REMOTE_USER - Используется в ситуациях, аналогичных предыдущему случаю, для хранения имени пользователя.
REMOTE_IDENT - Если HTTP сервер поддерживает идентификацию пользователя согласно RFC 931, то эта переменная будет содержать имя пользователя, полученное от сервера.
CONTENT_TYPE - Для запросов, которые содержат дополнительную добавочную информацию, такие как HTTP POST и PUT, здесь содержится тип данных этой информации.
CONTENT_LENGTH - Длина данных, которую передает клиент.
В дополнение к этим, если запрос содержит дополнительные поля заголовка запроса, они помещаются в переменные окружения с префиксом HTTP_, за которым следует имя заголовка. Любые символы '-' в заголовке меняются на символы подчеркивания '_'. Сервер может исключить любые заголовки, которые он уже обработал, такие как Authorization, Content-type, и Content- length. Если необходимо, сервер может исключить любые (или вообще все) дополнительные поля заголовка в случае, когда их включение может привести к превышению предела размера переменных окружения. Примером такой переменной может служить переменная HTTP_ACCEPT, которая была определена в спецификации CGI/1.0. Другим примером может служить заголовок User-Agent.
HTTP_ACCEPT - Список MIME типов, которые клиент может обработать, как задано в HTTP заголовках. Другие протоколы должны получить эту информацию из других мест (если она им необходима). Каждый тип в этом списке должен быть отделен запятой согласно HTTP спецификации. Формат: тип/подтип, тип/подтип.
HTTP_USER_AGENT - Просмотрщик, который использует клиент для посылки запроса. Общий формат: программа/версия библиотека/версия.
5) Вывод информации шлюзом. Шлюз осуществляет свой вывод в стандартный поток вывода. Этот вывод может представлять собой или документ, сгенерированный шлюзом, или инструкции серверу, где получить необходимый документ. Как правило, шлюз производит свой вывод, который интерпретируется и посылается обратно клиенту. Преимущество этого подхода состоит в том, что шлюз не должен посылать полный HTTP/1.0 заголовок на каждый запрос. Заголовок выходного потока. Для некоторых шлюзов может быть, необходимо избегать обработки сервером их вывода, и общаться с клиентом непосредственно. Для того, чтобы отличить такие шлюзы от остальных, CGI требует, чтобы их имена начинались с префикса nph-. В этом случае, на шлюзе лежит ответственность за возвращение клиенту синтаксически правильного ответа.
Заголовки с синтаксическим разбором. Вывод шлюза начинается с маленького заголовка. Он содержит текстовые строки, в том же формате, как и в HTTP заголовке и завершается пустой строкой (содержащей только символ перевода строки или CR/LF). Любые строки заголовка, не являющиеся директивами сервера, посылаются непосредственно клиенту. В настоящий момент, CGI спецификация определяет три директивы сервера:
Content-type
MIME тип возвращаемого документа
Location
Это поле используется в случае, когда необходимо указать серверу, что возвращается не сам документ, а ссылка на него.
Если аргументом является URL, то сервер передаст клиенту указание на перенаправление запроса. Если аргумент представляет собой виртуальный путь, сервер вернет клиенту заданный этим путем документ, как если бы клиент запрашивал его непосредственно. Status - директива используется для задания серверу HTTP/1.0 строки-статус, которая будет послана клиенту. Формат: nnn xxxxx, где nnn - 3-х цифровой статус-код, и xxxxx строка причины, такая, как "Forbidden" (Запрещено).
Примеры: Предположим, имеется некоторый текстовый конвертер в HTML. Когда он оканчивает свою работу, он должен произвести следующий вывод в стандартный выходной поток:
--- начало вывода ---Content-type: text/html --- конец вывода ---
Теперь рассмотрим шлюз, который, в некоторых случаях, должен выдать документ /path/doc.txt с данного сервера, как если бы он был непосредственно востребован клиентом через http://server:port/path/doc.txt. В это случае вывод шлюза будет таков:
--- начало вывода ---Location: /path/doc.txt --- конец вывода ---
Наконец, предположим, что шлюз возвращает ссылки на gopher сервер, например на gopher://gopher.ncsa.uiuc.edu/. Вывод шлюза будет следующий:
--- начало вывода ---
Location: gopher://gopher.ncsa.uiuc.edu/
--- конец вывода --- Non-parsed headers. Допустим теперь, что у нас имеется шлюз, который общается с клиентом непосредственно. Как уже отмечалось, его имя должно начинаться с префикса nph- и он должен возвращать допустимый HTTP заголовок. В этом случае, если доступ к шлюзу был осуществлен со значением SERVER_PROTOCOL равным HTTP/1.0, его вывод должен удовлетворять HTTP/1.0:
--- начало вывода ---HTTP/1.0 200 OK Server: NCSA/1.0a6 Content-type: text/plain --- конец вывода ---
5.4 Контрольные вопросы
Какой тэг описывает участок изображения и ставит ему в соответствие URL?
Что определяет карта изображения?
Для чего нужны формы?
Какие значения может принимать атрибут "METHOD" в тэге <FORM>?
Какой тэг используется для ввода одной строки текста?
Какой тэг используется для ввода более одной строки информации?
Назначение атрибута "SELECT MULTIPLE"?
Для чего используется скрытый атрибут "HIDDEN"
5.5 Тесты
1) Какой тэг позволяет вставить графическое изображение в HTML-документ?
а) <INPUT TYPE=image>;
б) <IMG SRC=”1.GIF”>;
в) <A HREF=”1.GIF”>;
г) <BODY BACKGROUND=”1.gif”>.
2) Возможно ли использовать изображение в качестве гипертекстовой ссылки?
а) да;
б) нет;
в) возможно только определённого формата.
3) Чтобы включить поддержку карты для изображения, необходимо ввести тэг:
а) <IMG SRC="url" USEMAP="url#map_name">;
б) <BODY BACKGROUND="picture.gif">;
в) <IMG SRC="url" USEMAP="url@map_name">.
4) Какой из атрибутов тэга AREA может указать форму определяемой области изображения?
а) AREA;
б) SHAPE;
в) COORDS.
5) Какой из атрибутов тэга AREA может указать координаты в пикселях описываемой области?
а) AREA;
б) SHAPE;
в) COORDS.
6) Что такое форма?
а) это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира;
б) вид форматирования текста;
в) способ отображения таблиц.
7) С помощью какого контейнера задаётся форма?
а) FORM;
б) INPUT;
в) SELECT.
8) Какие контейнеры используются для создания элементов формы?
а) INPUT;
б) SELECT;
в) TEXTAREA;
г) SUBMIT;
д) FORM.
Приложения
Приложение А (справочное)
Ключ к тестам
1(А,В); 2(Б); 3(А,Б); 4(Б); 5(А); 6(В);
1(В); 2(Г); 3(В); 4(Г); 5(Г); 6(Б); 7(Б);
1(А,Д); 2(Б); 3(А,В,Г); 4(А); 5(В);
1(Г); 2(А); 3(А,Г); 4(Б); 5(Б); 6(А,Б,Г); 7(Г,Д);
1(А,Г); 2(А); 3(А); 4(Б); 5(В); 6(А); 7(A); 8(А,Б,Г);
1(В); 2(А); 3(А); 4(В); 5(А);
Приложение Б (справочное)
Структура отчета
Титульный лист.
Постановка задачи.
Содержание.
Теоретические предпосылки.
Краткие ответы на контрольные вопросы.
Список использованных источников.
Описание хода выполнения работы (последовательность выполняемых действий, команд) или программный ход.
Выводы.
Список использованных источников
1. Пятибратов А.П. и др. Вычислительные системы, сети и телекоммуникации: Учебник/ Под редакцией А.П. Пятибратова. - М.: Финансы и статистика, 2001. - 512 с.
2. Майкл А. Ларсон Создание Web-страниц с помощью MS Office 97. -- М.: БИНОМ, 1998. -- 480 с.
3. Н. Рэндел, Д. Джонс Microsoft Microsoft SharePoint Designer в подлиннике. -- СПб.: BHV-Санкт-Петербург, 1997. -- 432 с.
4. Хестер Н. Front Page 2002 для Windows: Пер. с англ. - М.: ДМК Пресс, 2002. - 448 с.
5. Пауэлл Т.А. Полное руководство по HTML / Пер. с англ. А.В. Качанов. - Мн.: ООО “Попурри”, 2001. - 912 с.
6. Основы Web-технологий / П.Б. Храмцов, С.А. Брик, А.М. Русак, А.И. Сурин /Под. редакцией П.Б. Храмцова. - М.: ИНТУИТ.РУ ”Интернет-Университет Информационных Технологий”, 2003. - 512 с.
Размещено на Allbest.ru
Подобные документы
Особенности программирования на языке HTML и JavaScript. Основные стили форматирования текста. Анализ основных приемов и методов создания страниц, рисунков, таблиц и гиперссылок. Основные цвета и их коды. Разработка собственного сайта и его презентация.
курсовая работа [61,3 K], добавлен 29.01.2016Ввод и редактирование формул. Создание абсолютной или смешанной ссылки. Режимы пересчета формул. Присвоение, изменение и удаление имен ячеек. Ссылки на листы и книги. Создание имен из заголовков строк или столбцов. Присвоение имен константам и формулам.
курсовая работа [2,9 M], добавлен 02.01.2012Автоматический ввод значений. Приемы копирования информации. Работа с формулами и функциями. Построение диаграмм, редактирование ячеек, форматирование листа. Вставка строк и столбцов. Добавление кнопок на панель инструментов. Поиск данных в списках.
курсовая работа [40,7 K], добавлен 27.04.2013Знакомство с программой PageMaker: создание новой публикации; форматирование символов и абзацев; глобальное форматирование. Импорт и редактирование текста. Рисование средствами PageMaker. Импорт графики. Связывание файлов. Компоновка текста и графики.
лабораторная работа [2,2 M], добавлен 01.12.2007Работа в окне документа. Ввод текста. Вставка и удаление текста. Отмена результатов выполненных действий. Перемещение и копирование текста методом "перетащить-оставить". Форматирование текста. Сохранение документа. Шаг вперед: смена регистра.
лабораторная работа [220,9 K], добавлен 10.03.2007Интерфейс текстового редактора MS Word. Редактирование и форматирование текста в MS Word, вставка таблиц, текста WordArt и объектов из другого приложения. Создание схематических диаграмм, использование данных из табличного процессора Microsoft Excel.
презентация [1022,7 K], добавлен 05.06.2015Ввод, редактирование и форматирование данных в табличном редакторе Microsoft Excel, форматирование содержимого ячеек. Вычисления в таблицах Excel при помощи формул, абсолютные и относительные ссылки. Использование стандартных функций при создании формул.
контрольная работа [430,0 K], добавлен 05.07.2010Выбор гарнитуры шрифта, размера, стиля начертания шрифта. Выделение содержимого текста. Повтор набранного. Перенос и копирование содержимого. Выравнивание абзацев. Установка красной строки. Абзацные отступы и интервалы.
лабораторная работа [209,4 K], добавлен 10.03.2007Описания программных средств, предназначенных для создания, редактирования и форматирования простых и комплексных текстовых документов. Настройка параметров абзаца, ввод символов, средства создания списков. Копирование и перемещение участков текста.
реферат [194,3 K], добавлен 26.03.2015Функциональные возможности табличного процессора Excel. Запуск и завершение работы, окно программы, структура электронной таблицы, типы данных. Ввод и редактирование данных, редактирование и форматирование диаграмм. Защита информации в таблицах Excel.
курсовая работа [3,1 M], добавлен 09.11.2009
