Лабораторная работа №6
Тема: Вставка изображений, создание карты изображений (активных областей), создание форм.
Цель: Знакомство с возможностями языка HTML при создании документа с изображениями, картами активных областей, формами.
Задача: Создание страницы HTML-документа с форматированным текстом при помощи редактора «Блокнот» и визуализация при помощи интернет-браузера.
Вопросы для подготовки к лабораторной работе:
- Какой тег предназначен для вставки изображения?
- Какой атрибут применяет к изображению навигационную карту (image map)?
- Какой тег используется для создания карты изображения?
- Какой атрибут создает активную область на карте? Назовите формы активных областей.
- Какие теги существуют для создания форм?
Задание:
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 | Текст, который будет входить в список в виде заголовка группы. |
Форма отчетности: Защита лабораторной работы
