Графика

Пример размещения рисунков (бегущая строка)

 

Это картинка из файла hardware.bmp в текущей директории (Альтернативный текст ”Earth”)

 

Рис. 6.3. Раздел Графика

Примеры организации гиперсвязей

·       Гиперсвязь с документом Table.html в данной директории

·       Гиперсвязь с документом lab6.doc, находящимся в той же файловой системе, с использованием протокола file

·       Гиперсвязь с документом web.html, находящимся на WWW сервере isone.com.ua в директории doc

·       Отправка сообщения Освоена работа почты! на адрес nvv@intbel.ru (Mail server intbel.ru)

 Рис. 6.4. Раздел Связи

 

4. Содержание отчета

Отчет должен содержать:

1.    Название работы.

2.    Ф.И.О. и группу студента, выполнившего работу.

3. Цель работы.

4.    Задание.

5.    Распечатку html - кода созданного документа.

6.    Твердые копии экрана, демонстрирующие результаты просмотра разработанного документа в браузере.

7.    Выводы по работе.

 

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

1.    Какой тэг используется для задания таблиц?

2.    Какие теги служат для описания строк и столбцов таблицы?

3.    Какие атрибуты используются для задания ширины таблицы и в каких значениях можно задавать значение ширины?

4.    Как можно добавить заголовок к таблице?

5.    Как можно добавить заголовок к строке или столбцу?

6.    Как можно нарисовать рамку вокруг таблицы и каждой клетки?

7.    Какие атрибуты определяют цвет фона всей таблицы и цвет рамки?

8.    Какие тэги атрибуты используются для задания не стандартных таблиц?

9.    Какие атрибуты позволяют объединить клетки таблицы в группы?

10.Что такое URL?

11.Привести пример URL адреса директории FTP сервера, в которой лежит заданный zip - файл.

12.Привести пример URL адреса директории WWW сервера, в которой лежит заданный http - файл.

13.Зачем используются частичные URL?

14.Какой атрибут служит для указания программе просмотра имени и местоположения графического файла?

15.Какие атрибуты задают расположение рисунка на странице?

16.При помощи каких атрибутов задают размеры изображения в пикселях?

17. Как задается горизонтальный и вертикальный отступ между изображением и окружающим его текстом?

18.Какой тэг позволяет задать движущийся текст?

19.Как задать цвет фона бегущей строки?

20.Как указать направление движения текста?

21.Как задать горизонтальные и вертикальные поля вокруг бегущей строки?

22.Как задается скорость "пробегания" бегущей строки?

  ЛАБОРАТОРНАЯ РАБОТА № 7  

Создание и редактирование заполняемых форм

(Fill-out Forms, Fill-in Forms) в HTML

1. Цель работы

Приобретение основных навыков по созданию и редактированию форм в HTML.

2. Основные положения

Одна из основных красот Web — интерактивные формы. Они позволяют читателям Web-страниц легко общаться с их владельцами. Всевозможные формы и бланки, в которые что-то надо вписать, какие-то пункты отметить крестиком, а что-то зачеркнуть ("мужской, русский, нет, не участвовал, не был, не имеет..."), давно и прочно вошли в жизнь каждого человека, служа удобным инструментом быстрого сбора информации. Стандарт HTML предоставляет аналогичное "бумажному" прототипу средство запроса, называемое заполняемая форма (fill-out form или fill-in form).

Благодаря простоте использования тега <mailto:> и форм стал возможен двусторонний диалог между владельцами Web-узлов и их читателями.

Однако следует иметь в виду, что многие старые браузеры не поддерживают тег <mailto:>. Но даже старые браузеры легко можно заставить работать.

Программа просмотра, выводя на экран документ, содержащий форму, дает читателю возможность заполнить ее, вставляя текст в специальные поля, отмечая "щелчками" мыши "галочки" и выбирая нужные элементы из списков. После заполнения формы читатель нажимает экранную кнопку "Submit Query" ("послать запрос") - и программа просмотра высылает введенную информацию на указанный WWW-сервер, который передает запрос определенной программе, специально предназначенной для его обработки. Затем сервер, при необходимости, высылает программе просмотра ответ в виде заранее подготовленного или сгенерированного "на лету" документа. Описанный механизм обработки известен как Common Gateway Interface (CGI).

Программы для обработки CGI-запросов пишутся квалифицированными программистами, чаще всего на языках C или Perl. Установка этих программ на WWW-сервере осуществляется администратором. В некоторых случаях использование CGI при работе с формами не обязательно: введенная в форму информация может обрабатываться локально, без взаимодействия с сервером (например, при помощи JavaScript), а данные из нее высылаться по электронной почте.

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

Описание формы на HTML открывает специальный тэг <FORM ...>, а закрывает - тэг </FORM>.

Атрибуты тэга FORM:

      Атрибут NAME="..." присваивает форме символическое имя, используя которое можно на эту форму ссылаться в дальнейшем. Нашу форму мы, как видно из Примера №1, назвали simple_form.

      Атрибут ACTION="..." задает URL программы обработки запроса. В нашем случае (Пример №1) это программа с именем post-query, расположенная в директории cgi-bin на WWW-сервере hoohoo.ncsa.uiuc.edu. Если это поле отсутствует, будет использован URL адрес текущего документа.

      Атрибут METHOD="..." задает программе просмотра метод оформления запроса. Для этого используют один из двух доступных методов: GET или POST.

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

POST - это метод, при использовании которого содержимое заполненной формы пересылается не как часть URL, а как содержимое тела запроса

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

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

Для задания простого элемента ввода внутри FORM используется непарный тэг INPUT.

Атрибуты тэга INPUT:

      TYPE=параметр. Атрибут TYPE="..." задает тип поля ввода (в Примере №1 - text).

Параметр принимает одно из следующих значений:

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

image - картинка, по которой можно сделать щелчок мышью или другим указывающим устройством, что приводит к немедленному подтверждению и отсылке формы. Координаты выбранной точки измеряются в точках от верхнего левого угла и возвращаются (наряду с другими компонентами формы) точно так же, как для тэга IMG;

text - поле ввода текста, значение по умолчанию;

password - поле ввода пароля; вводимые символы представляются как звездочки;

checkbox - кнопка, принимающая положения on (включено) и off (выключено);

radio - кнопка, принимающая положения on и off; причем остальные кнопки с тем же параметром NAME ведут себя по принципу "одна из многих";

submit - кнопка, действие которой сводится к отсылке содержимого заполненной формы на сервер запросов;

reset - кнопка, которая устанавливает во всех интерфейсных элементах значения по умолчанию.

Просмотрщики четвертых версий позволяют организовать передачу файлов на сервер - для этого используется значение TYPE=FILE и устанавливается режим передачи ENCTYPE.

      NAME=идентификатор. Атрибут NAME="..." присваивает данному элементу ввода символическое имя (идентификатор). Это поле должно присутствовать для всех полей ввода кроме "submit" и "reset", т.к. оно используется в стоке запроса при идентификации поля ввода при посылке ее на сервер после подтверждения формы.

      VALUE=значение. Атрибут VALUE="..." указывает, какой текст появится в этом поле по умолчанию, то есть до того, как пользователь что-либо введет в это поле (the default text).Для checkbox или radio button, VALUE задает значение кнопки, когда она находится в отмеченном состоянии (неотмеченные кнопки опускаются при посылке запроса); значение по умолчанию для checkbox или radio button - "on". Для типов "submit" и "reset", VALUE может быть использовано для задания надписи на этих кнопках.

      CHECKED (значение не требуется). Атрибут указывает, что данная кнопка типа checkbox или radio button отмечена по умолчанию; это поле работает только для кнопок типа checkbox и radio button.

      SIZE=n. Атрибут задает физический размер поля ввода в символах; это поле действует только для элементов ввода текста или пароля. Если не присутствует явно, то по умолчанию равно 20. Многострочные поля ввода текста могут быть заданы с помощью SIZE=ширина, высота; например SIZE=60,12. Заметим, что SIZE атрибут не следует использовать для задания многострочных полей ввода, т.к. можно воспользоваться командой TEXTAREA.

      MAXLENGTH=n. Атрибут задает максимальное количество введенных символов, которые будут приниматься для ввода. Верно, только для полей ввода текста и пароля (и только в однострочных полях). По умолчанию - не ограничено. Подразумевается, что поля ввода должны прокручиваться.

 

Парный тэг <SELECT NAME="lang_menu"> ... </SELECT> задает поле ввода, предлагающее пользователю выбрать одну из предложенных возможностей. По выполняемой функции этот элемент аналогичен рассмотренному выше, но более удобен при выборе из большого числа альтернатив. В Примере №1 с его помощью создан раскрывающийся список, предлагающий пользователю выбор одной из четырех альтернатив, каждая из которых задана при помощи тэга <OPTION>. Атрибут SELECTED при этом указывает альтернативу, выбранную по умолчанию (the default option).

Атрибуты тэга SELECT:

      NAME=идентификатор. Атрибут задает символическое имя для этого SELECT элемента. Это поле должно присутствовать, т.к. оно используется при посылке запроса (аналогично команде INPUT).

      SIZE=n. Если SIZE равен 1 или если этот атрибут опущен, то по умолчанию SELECT будет представлен как меню опций Motif. Если SIZE = 2 или более, SELECT будет представлен как окно выбора; значение SIZE тогда будет определять, сколько элементов списка будут видны.

      MULTIPLE. Если атрибут присутствует (нет значения), то он задает, что SELECT должен позволять множественный выбор из списка. Наличие MULTIPLE принуждает SELECT быть представленным как список выбора, вне зависимости от значения SIZE.

 

Пример 1:

<HTML>

<BODY>

<FORM NAME="simple_form" ACTION="http://hoohoo.ncsa.uiuc.edu / cgi-bin/ post-query" METHOD = "POST">

<UL>

<LI>Ваше имя:

<INPUT TYPE="text" NAME="name_field" VALUE=""></LI>

<LI>Пол: <INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED>Муж.

<INPUT TYPE="radio" NAME="sex" VALUE="female">Жен.</LI>

<LI>Ваш родной язык:

<SELECT NAME="lang_menu">

<OPTION SELECTED>Русский

<OPTION>Украинский

<OPTION>Белорусский

<OPTION>другой

</SELECT></LI>

<LI>Читаете по-английски

<INPUT TYPE="checkbox" NAME="read_english" VALUE="Yes" CHECKED></LI></UL>

<INPUT TYPE="hidden" NAME="ID_field" VALUE="Form1">

<INPUT TYPE="submit">

<INPUT TYPE="reset">

</FORM>

</BODY>

</HTML>.

 

 

Рис. 7.1 Результат просмотра на экране страницы из

Примера №1