Форма отчетности: Защита лабораторной работы. Тема: Вставка изображений, создание карты изображений (активных областей), создание форм

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

Тема: Вставка изображений, создание карты изображений (активных областей), создание форм.

Цель: Знакомство с возможностями языка HTML при создании документа с изображениями, картами активных областей, формами.

Задача: Создание страницы HTML-документа с форматированным текстом при помощи редактора «Блокнот» и визуализация при помощи интернет-браузера.

Вопросы для подготовки к лабораторной работе:

1. Какой тег предназначен для вставки изображения?
2. Какой атрибут применяет к изображению навигационную карту (image map)?
3. Какой тег используется для создания карты изображения?
4. Какой атрибут создает активную область на карте? Назовите формы активных областей.
5. Какие теги существуют для создания форм?

Задание:

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

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

3. Создайте HTML-страницу с формой для опроса посетителей сайта, фоном страницы, заголовками, гиперссылкой на страницу с картой.

Материал для подготовки к лабораторной работе:

Вставка изображений

IMG	Используется для вставки в HTML изображений Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) , Compuserve GIF (включая прозрачные и анимированные) PNG. Не имеет конечного тега.
Атрибуты:
SRC	Обязательный атрибут. Указывает адрес (URL) файла с изображением
HEIGHT и WIDTH	Определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).
HSPACE и VSPACE	Определяют отступ картинки (в пикселях) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.
ALIGN	Обязательный атрибут. Указывает способ выравнивания изображения в документе. Может принимать следующие значения left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа. right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева. top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. middle – выравнивает базовую линию текущей текстовой строки с центром изображения. absmiddle – выравнивает центр текущей текстовой строки с центром изображения. bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки. absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
NAME	Определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
ALT	Определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения
BORDER	Определяет ширину рамки вокруг изображения в пикселях. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю
LOWSRC	Указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.
USEMAP	Применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1". Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные.
ISMAP	Определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения

Карты изображений

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

Элементы
MAP	Представление графического изображения в виде карты с активными областями. Может быть связан с тэгом <IMG>или тэгом <INPUT> с помощью атрибута USEMAP
AREA	Определяет активную область в составе карты изображений на стороне клиента
Атрибуты
SHAPE	Задает форму активной области на карте
Значения	- rect – прямоугольная область - circle – область в форме круга - poly – область в форме многоугольника - default – вся область
COORDS	Определяет позицию области на экране. (Координаты) Набор координат соответствует форме области. Координаты задаются в ед. длины (пикселях) и разделяются запятыми. Отсчитываются от левого и верхнего краев рисунка § Для круга – координаты центра и радиус § Для прямоугольной области задаются координаты всех четырех углов § Для многоугольной области задаются координаты каждого из углов
HREF	Задает URL-адрес для ссылки
ALT	Задает альтернативный текст для браузеров, которые не поддерживают тэг <AREA>
TITLE	Задает текст подсказки, всплывающей при наведении указателя мыши на активную область
TARGET	Идентифицирует фрейм, в который должен быть открыт целевой ресурс
Параметры	Имя – документ открывается во фрейме с именем, задаваемым с помощью атрибута NAME тэга<FRAME> _blank – Документ открывается в новом неименованном окне _self – Документ открывается в том же окне, в котором содержится текущий документ _parent – Документ открывается во фрейме, родительском по отношению к фрейму, содержащему текущий документ (если родительского фрейма не существует, то документ открывается в текущем фрейме) _top – Документ открывается в текущем окне и занимает все окно
NOHREF	Указывает, что с областью не связана ссылка
TABINDEX	Определяет порядок получения фокуса после нажатия клавиши Tab (значение – число)
ACCESSKEY	Определяет комбинацию клавиш, используемую для доступа к активной области
ONFOCUS	Определяет обработчик события, возникающего при получении активной области фокуса ввода
ONBLUR	Определяет обработчик событий при потере активной областью фокуса ввода
USEMAP	Необязательный атрибут. Связывает с данным элементом карту изображения
ISMAP	Необязательный атрибут. Используется для определения карты изображения на стороне сервера

Создание бегущей строки

MARQUEE	Создает бегущую строку на странице. На самом деле содержимое контейнера <MARQUEE> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.
Атрибуты:
BEHAVIOR	Устанавливает способ движения содержимого Возможные значения: alternate - Контент перемещается между правым и левым краем элемента. scroll - Контент перемещается в направлении, заданным параметром direction, затем скрывается за пределами области, после чего начинает движение с начала. Значение по умолчанию slide - Контент перемещается в направлении, заданным параметром direction, доходит до края области и останавливается.
BGCOLOR	Устанавливает цвет фона под содержимым элемента MARQUEE
DIRECTION	Содержимое контейнера <MARQUEE> может перемещаться в четырех направлениях, не только влево и вправо, но также вверх и вниз. Возможные значения: down - Движение сверху вниз. left - Движение справа налево. right - Движение в правую сторону. up - Движение вверх.
HEIGHT	Высота элемента MARQUEE. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры <MARQUEE> вычисляются относительно родительского элемента, обычно это тег BODY. Значение по умолчанию 12 пикселов.
WIDTH	Ширина элемента MARQUEE. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры <MARQUEE> вычисляются относительно родительского элемента, обычно это тег BODY. Значение по умолчанию 100%
HSPACE	Устанавливает поля слева и справа от элемента (по горизонтали). Поля не увеличивают фоновую область под содержимым и служат для изменения расстояния между тегом <MARQUEE> и другими элементами веб-страницы. Значение по умолчанию -1
VSPACE	Устанавливает поля сверху и снизу (по вертикали). Поля не увеличивают фоновую область под содержимым и служат для изменения расстояния между тегом <MARQUEE> и другими элементами веб-страницы. Значение по умолчанию -1
LOOP	Устанавливает, сколько раз скролировать содержимое тега <MARQUEE>. После того, как заданное число раз отсчитано, содержимое остается в конечной точке. Значение - Любое целое положительное число или -1 для бесконечного воспроизведения движения, по умолчанию - -1
SCROLLAMOUNT	Анимация содержимого элемента <MARQUEE> происходит за счет периодического стирания информации и отображения ее на новом месте. Параметр scrollamount устанавливает расстояние в пикселях между старым и новым положениями, которые влияют на скорость движения и плавность хода. Чем выше значение, тем быстрее перемещается содержимое контейнера. Если значение равно нулю, то движения не происходит. Значение - Любое целое положительное число пикселов, по умолчанию - 6
SCROLLDELAY	На скорость скролирования, как и изменение позиции, влияет частота обновления содержания. Параметр scrolldelay задает время задержки между движениями в миллисекундах, чем ниже значение, тем выше скорость движения, и наоборот. Значение - Любое целое положительное число миллисекунд, по умолчанию - 85
TRUESPEED	Если содержимое тега <MARQUEE> перемещается слишком быстро, то срабатывает встроенный ограничитель скорости, который насильно замедляет скролирование. Это сделано для того, чтобы сохранить читабельность текста. Если вы намерены обойти это ограничение, добавьте параметр truespeed, он заставляет прокручиваться содержимое с заданной скоростью. Для параметра scrolldelay ограничение скорости начинается со значения 60 миллисекунд и ниже. По умолчанию этот параметр выключен.

Формы

FORM	Создает заполняемую форму
Атрибуты
NAME	Определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.
ACTION	Обязательный атрибут. Определяет URL, по которому будет отправлено содержимое формы – путь к скрипту сервера, обслуживающему данную форму.
METHOD	Определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию не позволяет передать скрипту большой объём данных) и POST (если предполагается, что пользователь будет заполнять очень большую форму или вводить объёмные текстовые данные, или пересылать файл).
ENCTYPE	определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".
TARGET	Определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения: _self, _parent, _top, _blank или явно указанное имя окна.
TEXTAREA	Создает поле для ввода нескольких строк текста
Атрибуты:
NAME	Обязательный атрибут. Определяет название, которое будет использоваться при идентификации заполненного поля сервером.
ROWS	Определяет количество строк текста, видимых на экране.
COLS	Определяет ширину текстового поля – в печатных символах
WRAP	Определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения: off – перенос слов не происходит (значение по умолчанию) virtual – перенос слов только отображается, на сервер же поступает неделимая строка. physical– перенос слов будет происходить во всех точках переноса.
DISABLED	Блокирует доступ и изменение элемента.
READONLY	Устанавливает, что поле не может изменяться пользователем.
SELECT	Создает меню в заполняемой форме создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента FORM и иметь как начальный, так и конечный теги. Содержит несколько элементов OPTION, иначе не имеет смысла
Атрибуты
MULTIPLE	Дает возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. По умолчанию можно выбрать только один пункт меню.
NAME	Определяет имя меню, уникальное для данной формы, которое будет использоваться при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION
SIZE	Определяет количество видимых пунктов в меню. Если значение этого атрибута больше единицы, то результатом будет список пунктов.
OPTION	Используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Не имеет конечного тега.
Атрибуты:
SELECTED	Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом SELECTED может быть помечен лишь один пунктов меню
VALUE	Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением атрибута NAME в элементе SELECT.
INPUT	Создает поле в форме
Атрибуты:
NAME	Определяет имя, используемое при передаче содержания данной формы на сервер. Этот атрибут необходим для большинства типов элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.
TYPE	Определяет тип поля для ввода данных. По умолчанию – это "text". Возможные значения: text – создает поле ввода под одну строку текста. Как правило используется совместно с атрибутами SIZE и MAXLENGTH. textarea – создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA file – дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с атрибутом ACCEPT. password – создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз. checkbox – создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей checkbox, которые могут иметь одинаковые имена. Каждое выбранное поле checkbox создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле этого типа обязательно должно иметь атрибуты NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано. radio – создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей checkbox, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button). submit – создает кнопку, при нажатии которой заполненная форма посылается на сервер. Атрибут VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если атрибут NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для атрибута SUBMIT, в противном случае пара не добавляется. image – создает графическую кнопку-картинку, инициализирующую передачу данных на сервер. Местонахождение графического изображения можно задать с помощью атрибута SRC. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля суффиксов ".x" (абсциссы), и ".y" (ординаты). reset – создает кнопку, сбрасывающую значения полей формы к их первоначальным значениям. При нажатии кнопки данные на сервер не отправляются. Надпись на кнопке может быть изменена с помощью атрибута VALUE. По умолчанию надпись на кнопке зависит от версии браузера. hidden – поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип полей удобно использовать для передачи данных от скрипта скрипту незаметно для пользователя. button – позволяет создать пользовательскую кнопку в HTML документе, что, при умелом использовании JavaScript, добавляет форме функциональность. Атрибут NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Атрибут VALUE позволяет задать текст, который будет отображен на кнопке в документе.
VALUE	Задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для таких полей как checkbox или radio, будет возвращено значение, заданное в атрибуте VALUE
CHECKED	Указывает, что поля типов checkbox и/или radio активизированы.
SIZE	Определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE="24".
MAXLENGTH	Определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.
SRC	Задает URL-адрес картинки, используемой при создании графической кнопки. Используется совместно с атрибутом TYPE="image".
ALIGN	Определяет способ вертикального выравнивания для изображений. Используется совместно с атрибутом TYPE="image". Полностью аналогичен атрибуту ALIGN элемента IMG. По умолчанию имеет значение bottom.
ACCEPT	Конкретизирует тип файла. Используется только совместно с параметром TYPE="file". Значение задается в виде MIME-типа.
FIELDSET	Группирование элементов формы. Такая группировка облегчает работу с формами, содержащих большое число данных. Например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков. Браузеры для повышения наглядности отображают результат использования тега <FIELDSET> в виде рамки. Ее вид зависит от операционной системы, а также используемого браузера
Атрибуты:
TITLE	Добавляет всплывающую подсказку к группе формы.
BUTTON	Создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <INPUT> (с параметром type="button | reset | submit"). В отличие от этого тега, <BUTTON> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров. Теоретически, тег <BUTTON> должен располагаться внутри формы, устанавливаемой элементом <FORM>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <BUTTON>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <BUTTON> в контейнер <FORM> обязательно.
Атрибуты:
DISABLET	Блокирует доступ и изменение элемента.
TYPE	Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы. Возможные значения: button - Обычная кнопка. Значение по умолчанию reset - Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние. submit - Кнопка для отправки данных формы на сервер.
VALUE	Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
LABEL	Устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы INPUT. Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <LABEL> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам. Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри тега INPUT и указании его имени в качестве параметра for тега <LABEL>. При втором способе тег <INPUT> помещается внутрь контейнера <LABEL>.
Атрибуты:
ACCESSKEY	Доступ к элементам формы с помощью горячих клавиш. Такая горячая клавиша в браузере обычно используется совместно с управляющей кнопкой <Alt> и не зависит от регистра.
FOR	Идентификатор элемента <INPUT>, с которым следует установить связь. Задает уникальный идентификатор, определяемый с помощью атрибута id элемента <INPUT>, с которым следует установить связь. Параметр for необходимо задавать в том случае, когда элемент формы и текст разделены. Если <INPUT> размещается внутри контейнера <LABEL>, то применять параметр for не требуется.
LEGEND	Применяется для создания заголовка группы элементов формы, которая определяется с помощью тега <FIELDSET>. Группа элементов обозначается в браузере с помощью рамки, а текст, который располагается внутри контейнера <LEGEND>, встраивается в эту рамку.
Атрибуты:
ALIGN	Определяет выравнивание текста.
TITLE	Добавляет всплывающую подсказку к тексту заголовка.
OPTGROUP	Представляет собой контейнер, внутри которого располагаются теги <OPTION> объединенные в одну группу. Особенностью тега <OPTGROUP> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения.
Атрибуты:
LABEL	Текст, который будет входить в список в виде заголовка группы.

Форма отчетности: Защита лабораторной работы