Практическая работа № 10
«Формы»
Технология работы:
1. Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
Форма открывается меткой <FORM> и заканчивается меткой </FORM>. Создайте в окне «содержание » практической работы №8 следующие формы:
<HTML>
<HEAD>
<TITLE>Пример создания форм</TITLE>
</HEAD>
<H1>Несколько более сложная форма </H1>
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post>
<H2>Расскажите немного о себе...</H2>
<P>Указывать подлинные данные совсем не обязательно.
Для целей демонстрации вполне подойдут и вымышленные. </P>
<P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR>
Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>
Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской
<INPUT TYPE=radio NAME=gender VALUE="female">женский<BR>
Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR>
<INPUT TYPE=submit VALUE="Запустить обработчик"></P>
<SELECT NAME="selection">
<OPTION VALUE="option1" checked>Вариант 1
<OPTION VALUE="option2">Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>
</FORM>
</BODY>
</HTML>
Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.
Оформите: окна практической работы №8 в единой цветовой гамме BGCOLOR="FFF0FF", окно "main" на тон темнее; правой верхней части окна «head» вставьте «логотип»-HТML-прямоугольник 10х100, другие оформите по своему усмотрению.
2.Создайте все формы (Пример использования), приведенные в теоретической части. Покажите выполненное преподавателю.
Теоретическая часть:
Типы элементов формы
TYPE="TEXT"
Представляет собой одностроковое текстовое поле (рис. 10.1), физический размер которого можно установить с использованием атрибута SIZE, а первоначально введенную в него символьную последовательность — с помощью атрибута VALUE.
Рис. 10.1. Элемент формы TEXT
Примером использования данного элемента в коде HTML может служить следующая строка:
<INPUT TYPE='TEXT" SIZE="40" NAME="user_name" VALUE-''Введите ваше имя">TYPE="PASSWORD"
Тип, полностью аналогичный предыдущему, за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами «*», чтобы скрыть текст от постороннего зрителя.
TYPE="CHECKBOX"
Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» — «не отмечено» (рис. 10.2).
Рис. 10.2. Элемент формы CHECKBOX
Данный элемент оперирует так называемыми булевыми переменными, то есть переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы CHECKBOX создает логическую пару значений вида «имя_элемента—состояние» и передает их на сервер. Для установки первоначального состояния элемента (отмечен, либо нет) используют атрибут CHECKED.
Пример использования:
<INPUT TYPE="CHECKBOX" CHECKED NAME="C01" VALUE="yes">
TYPE="RADIO"
Так называемая радиокнопка (рис. 10.3) применяется в случае, когда какая-либо логическая переменная может принимать только одно значение из множества возможных.
Рис. 10.3. Элемент формы RADIO
Все элементы RADIO одной формы обозначаются одним и тем же значением атрибута NAME. Использование радиокнопок требует явного указания значений атрибута VALUE, одна из кнопок должна быть обязательно выделена атрибутом CHECKED.
Пример использования:
<Р АLIGN="СЕМТЕR">Пожалуйста, укажите ваш возраст</Р>
<CENTER>
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="0-12">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="13-17">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="18-25">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="26-35" CHECKED>
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="36-">
</CENTER>
TYPE="BUTTON"
Отображает обыкновенную кнопку (рис. 10.4), нажатие на которую приводит к какому-либо действию сервера.
Рис. 10.4. Элемент формы BUTTON
С помощью атрибута NAME данному элементу присваивается уникальное имя, атрибут VALUE позволяет изменять надпись, отображаемую на кнопке.
Пример использования:
<INPUT TYPE="BUTTON" VALUE="Button" NAME="B1">TYPE="SUBMIT"
Определяет кнопку, по нажатии которой данные из формы передаются серверу. Так же как и в предыдущем случае, надпись, отображаемая на кнопке, задается атрибутом VALUE.
Пример использования:
<INPUT TYPE="SUBMIT" VALUE="Отправить!">
TYPE="RESET"
Создает кнопку, которая очищает неправильно заполненную текстовую форму. Параметры и значения этой кнопки не передаются на сервер вместе с другими данными формы. Пример использования:
<INPUT TYPE="RESET" VALUE="Очистить форму">TYPE="FILE"
Генерирует на экране кнопку, по нажатии на которую на экране появляется Проводник Windows, позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя. Данный элемент применяется в основном в формах отправки с сервера сообщений электронной почты для организации вложений, а также для загрузки изображений на сервер. Обычно рядом с кнопкой отображается небольшое текстовое поле, куда автоматически заносится имя отсылаемого файла и путь к нему на локальном диске.
Пример использования:
<INPUT TYPE="FILE" NAME="picture">TYPE="IMAGE"
Создает кнопку отсылки, аналогичную элементу SUBMIT, но с использованием графического изображения, созданного пользователем. Обычно применяется вслучаях, когда стандартная серая прямоугольная кнопка «не вписывается» в дизайн сайта. URL к изображению, играющему роль кнопки, указывается атрибутом SRC, причем сам элемент может содержать собственные атрибуты, аналогичные применяемым в теге <IMG> (см. урок 5), в том числе ALIGN, ALT и др. Атрибуты NAME и VALUE трактуются так же, как аналогичные атрибуты элемента SUBMIT.
Пример использования:
<INPUT TYPE="IMAGE" SRC="/images/button.gif ALIGN="BOTTOM" NAME="submit" VALUE="Отправить!">
TYPE="HIDDEN"
Данный элемент является скрытым и не отображается на экране монитора пользователя. Применяется он для хранения и передачи на сервер информации о текущем состоянии формы: при нажатии кнопки SUBMIT элемент HIDDEN сформирует логическую пару переменных типа «имя—значение», которые будут отосланы серверу с помощью протокола HTTP. Элементы HIDDEN служат доступной альтернативой файлам cookies — специальным файлам, в которых сохраняются индивидуальные настройки пользователя и позволяющим, например, восстановить последнее состояние формы при повторном посещении пользователем содержащей эту форму страницы.
Пример использования:
<INPUT TYPE="HIDDEN" NAME="forml" VALUE="c3576-236-2113">
Однако с помощью тега <INPUT> можно передать далеко не все доступные web-дизайнеру элементы форм. Например, текстовые поля, задаваемые атрибутами TEXT и PASSWORD, весьма ограничены по количеству символов, которые можно ввести в эти поля. Если перед web-мастером встала задача создать такие текстовое поля, чтобы пользователь мог вводить большое количество символов, используется самостоятельный тег <TEXTAREA>, формирующий на экране одноименный элемент формы (рис. 10.5).
Рис. 10.5. Элемент формы TEXTAREA
Синтаксис записи данного тега выглядит следующим образом:
<TEXTAREA МАМЕ="имя элемента" ROWS-''целое число" СOLS="целое число">
Текст, выводимый в текстовом поле по умолчанию</TEXTAREA>
С атрибутом NAME, определяющим индивидуальное имя каждого элемента формы, вы уже знакомы. Атрибуты ROWS и COLS указывают соответственно максимально допустимое количество строк вводимого текста и символов в строке. В случае если набираемый пользователем текст не умещается в видимую часть текстового контейнера, по краям поля появляются вертикальные и горизонтальные полосы прокрутки для скроллинга содержимого элемента TEXTAREA.
Пример использования:
<TEXTAREA NAME="message" ROWS="25" COLS="40">
Введите сюда текст сообщения
</TEXTAREA>
Для создания меню выбора в форме (рис. 10.6) web-мастер может воспользоваться тегом <SELECT>.
Рис. 10.6. Элемент формы SELECT
Синтаксис записи данного тега в общем виде выглядит так:
<SELECT NAME="имя" MULTIPLE SIZE="целое число">
<OPTION VALUE="Пункт 1">Пункт 1</OPTION>
<OPTION VALUE-''Пункт 2">Пункт 2</OPTION>
<OPTION VALUE="Пункт 3">Пункт 3</OPTION>
OPTION VALUE="Пункт N">Пункт N</OPTION>
</SELECT>
Атрибут MULTIPLE определяет для пользователя возможность отметить не одну, а сразу несколько позиций из предложенного списка. Если данный атрибут задан, можно воспользоваться атрибутом SIZE, определяющим количество позиций, видимых на экране одновременно.
Пример использования:
<Р АLIGN ="CENTER">Пожалуйста, укажите ваш город</Р>
<CENTER>
<SELECT NAME="City" MULTIPLE SIZE="3">
OPTION VALUE="a">Санкт-Петербург</OPTION>
OPTION VALUE="b">Mocква</OPTION>
<OPTION VALUE="c">Екатеринбург</OPTION>
</SELECT>
</CENTER>
3. Создайте все формы из теоретической части и сохраните их в файле form_10.txt, form_10.html
4. Сохранить файл как lab10.txt в блокноте и как lab10.html для просмотра в браузере.
Практическая работа № 11
«Графика»
Технология работы:
Теоретическая часть:
Включение графики в web-страницу. Включение графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:
<IMG SRC="URL" ALIGN="значение" HIGHT="значение" ALT="текст">
В качестве параметра атрибута SRC указывается путь к изображению в виде либо полного URL (например, http://www.mysite.ru/images/picture.jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например, . ./images/picture.jpg).
ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, например picture. GIF. Иллюстрация с расширением в URL в строчном регистре(picture.gif) при отображении документа HTML в броузере просто не будет показана на странице.
С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке таблицы. Однако помимо традиционных значений данного атрибута —RIGHT, LEFT и CENTER, — совместно с тегом <IMG> можно использовать и другие параметры атрибута:
ТОР — изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка.
BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.
MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.
BASELINE — изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN="baseline" удается добиться оптимального выравнивания иллюстраций для броузеров всех типов.
В качестве параметров атрибутов WIDTH и HEIGHT указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах.
Атрибут ALT содержит альтернативный текст, который отображается вместо картинки в броузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике наподобие всплывающей «подсказки», если пользователь несколько секунд подержит наведенный на изображение курсор мыши.
Пример применения тега <IMG>:
<IMG SRC="/images/sunset.jpg" ALIGN="CENTER" HEIGHT="215"А1Т="Красивый закат на берегу Карибского моря">
Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:
<А HREF="URL документа, на который организуется ссылка">
<IMG SRC="URL изображения" ALIGN-''значение" HEIGHT="значение"
АLТ="Альтернативный текст" BORDER="значение"></A>
Как видите, особых отличий в написании этих команд от их традиционного синтаксиса в данном случае нет, за исключением того, что между тегами <А> и </А>вместо текстовой строки вставляется директива <IMG>. Атрибут BORDER управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным нулю.
Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:
<А HREF="/hobbie/index.html"> <IMG SRC="/images/hobbie.jpg" ALIGN="BASELINE" HEIGHT="226" АLТ="Тематический раздел "Мои увлечения" BORDER="0"></A>
Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.
Выполните на компьютере:
1. С помощью любого графического редактора, позволяющего оперировать текстурными заливками, например пакета Corel Draw, подготовьте простой файл, заполненный однородной текстурой (рис. 5.13). Сохраните этот файл на диске в своей директории C:\MySite\Images под именем background.gif. Поместите в ту же папку какую-либо иллюстрацию, например вашу отсканированную фотографию, назвав данный файл mypicture.jpg.
Рис. 5.13. Файл bockground.gif
2. Создайте файл lab11.html дополните тег <BODY> атрибутом BACKGROUND. Данная строка будет выглядеть следующим образом:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#OOOOFF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">
После тегов <Н1> </Н1>, определяющих стиль заголовка, добавьте еще одну строку кода:
<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" HSPASE="5" А1_Т="Это моя фотография">
Таким образом, код данного участка нашего html-документа будет иметь следующий вид:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>
<TITLE>Mofl домашняя страничка</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">
<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1><BR>
<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" HSPASE="5" ALT="Этоo моя фотография">
<P ALIGN="JUSTIFY"> и т. д.
1. Создайте свою домашнюю страницу согласно образцу. Сохраните внесенные в документ изменения и откройте вашу страничку в броузере (рис. 11.1).
Рис. 11.1. Web-страница после внесения изменений в код HTML
3.Покажите работу преподавателю.
4. Сохранить файл как lab11.txt в блокноте и как lab11.html для просмотра в браузере.
Практическая работа №12
«Анимация»
Технология работы:
1. function openWin(AddressURL,NUM) { if (NUM == 1) {VarWin = "else {VarWin = "open(AddressURL,"DWIN"+NUM,VarWin) } Создайте пример анимационного изображения, используя функцию animate. Размер всех картинок - 400x60 пикселей. Кроме кнопок "Быстрее" и "Медленнее", добавить еще кнопки "Стоп" и "Старт" (подумайте, как это можно сделать). Использование данной функции зависит от типа просмотрщика: 
2. Сохранить файл как lab12.txt в блокноте и как lab12.html для просмотра в браузере.
Практическая работа №13
Графические часы
Технология работы:
Первый пример - это часы, отображающие время загрузки страницы (т.е. момент вызова скрипта). Используются методы объекта Date (getHours, getMinutes) и графические файлы, отображающие полученное время (имена этих файлов соответствуют цифрам 0-9).
| Во втором примере, отображающем текущую дату, также используются методы объекта Date (getDate, getMonth, getYear) и графические файлы, отображающие полученную дату. |
Задание - сделать идущие часы.
Для этого:
· Задать пары для 10 цифр вида
dig0 = new Image(); dig0.src = "dg0.gif";
· Создать таблицу, в которой будут выводиться цифры.
· В таблице использовать команды <IMG> с обязательным атрибутом name:
<img name="dg1" src="dg0.gif" height=21>
· Написать функцию clockTick(), в которой
o вычисляется текущее время (час, минуты, секунды);
o с помощью вспомогательной функции setRis() определяется, какая картинка куда выводится;
o с помощью функции setTimeout("clockTick()", 1000) запускается сама clockTick().
· Функция setRis() должна иметь два аргумента: первый аргумент - какая цифра должна быть, второй аргумент - вместо какой картинки что подставлять. Для этого использовать конструкцию вида
ris.src = dig0.src (для цифры 0).
В качестве значения аргумента ris должно передаваться соответствующее значение атрибута name из команды <IMG>.
Картинки:
| dg0.gif | dg1.gif | dg2.gif | dg3.gif | dg4.gif | dg5.gif | dg6.gif | dg7.gif | dg8.gif | dg9.gif |
| dgam.gif | dgpm.gif | dgc.gif | dgp.gif |
. Сохранить файл как lab13.txt в блокноте и как lab13.html для просмотра в браузере.