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

Лабораторная работа №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 Текст, который будет входить в список в виде заголовка группы.

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

Наши рекомендации