Создание web-страниц с помощью языка html

подведите курсор к ссылке группа Л-1,  и по щелчку мыши вы перейдете на другую WEB-страницу (файл 5. HTML)

 

Задание 5. Создание графической ссылки на другой HTML-документ

1. внесите изменения в файл 5. HTML так, чтобы в конце страницы была ссылка на головную страницу Расписание занятий (файл RASP.HTM). в качестве ссылки  используйте графический файл следующим образом:

…

</TR>

</TABLE><BR>

</CENTER>

<A HREF=” RASP.HTM”><IMG SRC= “GLOBUS. JPG” BORDER= “0”></A>

</CENTER>

</BODY>

< HTML >

2. просмотрите полученную WEB-страницу.

Задания для самостоятельной  работы:

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

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

 

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

1. что такое WEB-страница, и какие объекты он может включить?
2. каковы основные достоинства представления документов в формате WEB-страниц?
3. какие тэги (контейнеры) должны присутствовать HTML-документе обязательно? Какова логическая структура WEB-страницы?
4. изображение из графических файлов каких типов могут быть размещены на WEB-страницах и почему?
5. какую функцию выполняют  гиперссылки на WEB-страницах?
6. что может использоваться в качестве объекта для создания гиперссылки?
7. чем различаются абсолютный и относительный адрес документа?
8. какие типы списков могут быть созданы на WEB-страницах?
9. какие типы управляющих элементов могут быть размещены на WEB-страницах?
10. какими способами могут обрабатываться полученные их форм данные?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ЛАБОРАТОРНАЯ РАБОТА  N4

«КОМПОНЕНТЫ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА»

 

Цель: Отработать навыки создания в HTML-документе компонентов, позволяющих создавать интерактивное взаимодействие пользователя с WWW- сервером (HTTP-сервер).

Программное обеспечение: стандартное (HTML-броузер).

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

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

Например:

<FORM ACTION=”/cgi-bin/primer.pl”> -  для CGI

<FORM ACTION=”/primer.php”>

С помощью атрибутов  METHOD определяется способ передачи данных на сервер.

Например:

<FORM ACTION=”/cgi-bin/primer.pl” METHOD = “POST”>

<FORM ACTION=”/primer.php” METHOD = “GET”>

При использовании метода GET информация из формы добавляется в конец URL, который был указан в описании заголовка формы. CGI-программа (CGI-скрипт) получает данные  из формы в виде параметра переменной среды QUERY_STRING. При POST вся информация о форме передается после обращения к указанному URL и CGI-программа получает данные из формы стандартный поток ввода (STDIN). Сервер не пересылает сообщение об окончании пересылки данных. Вместо этого, используется переменная окружения CONTENT_LENGTH  для определения количества переданных данных. Данные считываются из стандартного потока ввода.

  Когда пользователь заполняет  форму и активизирует кнопку  SUBMIT – специальный тип кнопки, информация, введенная пользователем в форму, посылается HTTP-серверу для обработки. Рассмотрим элементы формы, обеспечивающая ввод данных и отправку их на сервер. Основные элементы формы определяются атрибутами шести типов:

• кнопки
• однострочное текстовое поле
• текстовые блоки
• меню
• флажки
• переключатели

Кнопка  Submit (отправить) используется для передачи всех вводимых данных из полей формы.

<INPUT TYPE = “SUBMIT”  VALUE = “SUBMIT”  NAME = “SUBMIT”>

Кнопка RESET (сброс) используется для отчистки полей форм.

<INPUT TYPE = “RESET”  VALUE = “RESET” NAME = “RESET”>

Здесь VALUE – надпись на кнопках, NAME – имя, которое передается сценарию.

 

Однострочное текстовое поле.

Пример.

<INPUT TYPE = “TEXT” NAME = “NAME”  VALUE = “TEXT” SIZE = “20” MAXLENGTH = “30”>

Здесь атрибут TYPE =”TEXT” – указывает броузеру, что это однострочное текстовое поле; VALUE – может содержать некоторый текст в поле ввода; NAME – имя, которое передается сценарию в качестве уникального идентификатора; MAXLENGTH – указывает максимальное число символов, которое можно вводить в текстовое поле; SIZE -  устанавливает значение ширины поля в символах. Если TYPE = “PASSWORD”  все вводимые данные отображаются в виде звездочек. Если TYPE =”HIDDEN”, поле данного типа не отображается  броузером и не дает пользователю возможность изменять присвоенные данному полю значение. Это поле используется для передачи в CGI-программу статической информации, например пароля или другой информации.

Текстовые блоки. Прокручиваемое текстовое поле.

<TEXTAREA NAME = “INFORMATION” ROWS = “4” COLS = “30” WRAP = “virtual”>текст в поле ввода</TEXTAREA>

Здесь  NAME – имя, которое передается сценарию в качестве уникального идентификатора;  ROWS – определяет значение высоты поля в виде количества строк, которые будут отображаться на экране одновременно (до приведения в действие механизма строк). COLS – определяет ширину поля в символах. WRAP = “virtual”, в этом случае текст будет заполнятся построчно. По достижении предельного значения длины строки, указанной атрибутом COLS, текст будет переходить на новую строку автоматически. Переход на новую строку возможен также с помощью клавиши “ENTER”. Наличие символов между тегами <TEXTAREA></TEXTAREA> указывает, что в прокручиваемом поле имеется заранее введенный текст.

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

Пример 1.

<SELECT NAME= “NAME” SIZE = “1”>

<OPTION SELECTED VALUE = “Pentium 3”>Компьютеры</OPTION>

<OPTION VALUE = “Pentium2”>Pentium2</OPTION>

<OPTION VALUE = “Pentium 3”>Pentium3</OPTION>

<OPTION VALUE = “Pentium4”>Pentium4</OPTION>

<OPTION VALUE = “Atlon”>Atlon</OPTION>

</SELECT>

Пример 2 (применение атрибута MULTIPLE).

<SELECT NAME = “NAME” SIZE “5” MULTIPLE>

<OPTION SELECTED VALUE = “Pentium3”>Компьютеры</OPTION>

<OPTION VALUE = “Pentium2”>Pentium2 </OPTION>

<OPTION VALUE = “Pentium3”>Pentium3</OPTION>

<OPTION VALUE = “Pentium4”>Pentium4</OPTION>

<OPTION VALUE = “Atlon”>Atlon</OPTION>

</SELECT>

Здесь атрибут SELECT указывает броузеру, что следует создать окно меню, атрибут NAME используется в качестве идентификатора данного поля ввода данных, атрибут SIZE указывает сколько будет отображатся строк сначала. Тег OPTION используется для объявления каждой опции, которую необходимо поместить в меню. Атрибуту VALUE присваивается идентификатор для конкретного варианта опции. Атрибут MULTIPLE разрешает выбрать более одной опции меню.

Флажки. Данный тип элементов формы  позволяет пользователю выделить несколько  опций в наборе флажков.

Пример.

<INPUT TYPE = “CHECKBOX” NAME = “CHECKBOX_1” VALUE = “ON”>обычный флажок<BR>

<INPUT TYPE = “CHECKBOX” NAME = “CHECKBOX_2”  VALUE = “ON” CHEKED>выделенный флажок<BR>

<INPUT TYPE = “CHECKBOX” NAME = “CHECKBOX_3”  VALUE = “ON” DISABLED>выключенный флажок

Здесь TYPE=”CHECKBOX” определяет тип элемента формы. Атрибут NAME используется в качестве уникального идентификатора при передачи данной информации сценарию. Если указан атрибут CHECKED для поля INPUT, то он будет иметь статус выбранного. Если указан атрибут DISABLED для поля INPUT, то пользователь не может установить этот флажок. VALUE=”ON” назначается переменной определенной в NAME и затем передаётся сценарию.

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

Пример.

<INPUT TYPE = ”RADIO” VALUE = “FALSE” NAME = “CHECK” CHECKED>выбран<BR>

<INPUT TYPE = “RADIO”   VALUE = “TRUE” NAME = “CHECK”>не выбран<BR>

<INPUT TYPE = “RADIO”  VALUE = “TRUE” NAME = “CHECK” DISABLED>недоступен

Здесь TYPE = “RADIO” определяет тип элемента формы. Атрибут NAME используется в качестве уникального идентификатора при передаче данной информации сценарию. Переключатель автоматически устанавливается, если указан атрибут CHECKED. Если указан атрибут DISABLED для поля INPUT, то пользователь не может установить этот переключатель. Значение в VALUE назначается переменной определённой в NAME и затем передаётся сценарию.

                                      Задание

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

2.Составить код HTML- страницы с определённой смысловой нагрузкой, выбрать компоненты форм, определяющие вводимую информацию.

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

Лабораторная работа №5

«Запуск программ на WWW-сервере»

  Цель: Отработать навыки запуска программ на сервере со стороны клиента с помощью средств HTML.

  Программное обеспечение: Браузер,  HTML – сервер, интерпретаторы PERL, PHP.

 Пояснение: В данной работе необходимо осуществить запуск двух программ на сервере с использованием CGI. Первая- PERL, вторая PHP-программа. Все программы размещены на сервере. Сервер доступен по стандартному зарезервированному операционной системой IP адресу, напримерHTTP://127.0.0.1. Запуск программ осуществляется с помощью активизации специальной кнопки ”SUBMIT”HTML страницы. Один из вариантов выполнения этой работы предполагает создание трёх файлов. Возможный вариант программ:

Код файла 2.HTML

<HTML>

<TITLE>ОТВЕТ СЕРВЕРА</TITLE><BODY>

<CENTER><H1>Пример получения ответа сервера</H1></CENTER><FORM action = ”cgi-bin/2.pl”>

<INPUT  type = ”submit”  value = “Получить отклик сервера(PERL)”></FORM><HR><FORM action = “2.php”>

<INPUT type = “submit” value =”Получить отклик сервера(PHP) “></FORM></BODY></HTML>

Код файла 2.PL

#!C:\perl\perl.exe

print ”Content -Type: text/html \n\ n”;

print”<HTML><TITLE>ОТВЕТ СЕРВЕРА</TITLE><HR>”;

print”<BODY><CENTER><H1>Вы получили ответ сервера!</H1></CENTER></BODY><P><HR></HTML>”;

Код файла 2.PHP

<HTML><TITLE>ОТВЕТ СЕРВЕРА</TITLE>

<BODY><H1>ОТВЕТ СЕРВЕРА PHP</H1><?php echo(“Вы получили ответ сервера!”)?></BODY></HTML>

Следующий вариант выполнения задания. Необходимо, чтобы в результате выполнения программ были введены значения VALUE кнопок, которые указаны в кодах при описании в HTML файле. Также необходимо определить значения переменных QUERY_STRING и CONTENT_LENGTH. Для этого создадим следующие файлы:

Код файла 22.HTML

<HTML>

<HEAD><TITLE>ОТВЕТ СЕРВЕРА</TITLE></HEAD>

<BODY><CENTER><H1>Пример получения ответа сервера</H1></CENTER>

<FORM action = “cgi-bin/22.pl”method =”GET”>

<INPUT type = “submit” value = “BUTTON-PERL”  name = “button”></FORM>

<HR>

<FORM action = “22.php”>

<INPUT type = “submit” value = “BUTTON-PHP” name = “button”></FORM>

</BODY></HTML>

Код файла 22.PL

#!C:\perl\perl.exe

#ОБРАТНО БРОУЗЕРУ ФАЙЛ

print" Content-Type: text/html\n\n”;

print”<HR>”;

print”ЗНАЧЕНИЕ ПЕРЕМЕННОЙ

QUERY_STRING=$

print”<HR><P>”;

print “ЗНАЧЕНИЕ ПЕРЕМЕННОЙ

CONTENT_ LENGTH=$ENV{‘ CONTENT_ LENGTH’}”;

Код файла 22.PHP

<HTML>

<TITLE>ОБРАБОТКА ЗАПРОСА</TITLE>

<BODY><H2>результат заполнения формы</H2><?php

print(“<p>надпись на кнопке:<b>$button</b>\n”);

?>

</BODY></HTML>

Задание

1. создать коды программ, отличные от приведенного примера. Изменить

 метод запроса.

2. исследовать получаемые значения переменных окружения сервера

 QUERY_STRIHG и CONTENT_ LENGTH, объяснить, почему

переменные QUERY_STRIHG и CONTENT_ LENGTH изменяют свое значение