Основные теги HTML

Автор работы: Пользователь скрыл имя, 04 Декабря 2014 в 12:16, лабораторная работа

Краткое описание

Цель работы:
Научить студентов:
• созданию первичного HTML-документа,
• использованию основных тегов,
• построению простейших HTML-документов.

Скачать полностью (1.11 Мб) Сколько стоит заказать работу?
Прикрепленные файлы: 1 файл

10-методические указания по проведению лабораторных занятий Web-технологии.docx

— 1.14 Мб (Скачать документ)

Ответом на данный вопрос является планирование взаимодействия фреймов (далее - планирование). Каждый фрейм может иметь собственное имя, определяемое параметром NAME при описании данного фрейма. Существует, также, специальный атрибут - TARGET, позволяющий определять, к какому фрейму относится та или иная операция. Формат данного атрибута следующий:

TARGET="windows_name"

Данный атрибут может встречаться внутри различных тегов:

TARGET в теге A

Это самое прямое использование TARGET. Обычно, при активизации пользователем ссылки соответствующий документ появляется в том же окне (или фрейме), что и исходный, в котором была ссылка. Добавление атрибута TARGET позволяет произвести вывод документа в другой фрейм. Например:

<A HREF="mydoc.html" TARGET="Frame1"> Переход в фрейм № 1 </A>

TARGET в теге BASE

Размещение TARGET в теге BASE позволит вам не указывать при описании каждой ссылки фрейм-приемник документов, вызываемых по ссылкам. Это очень удобно, если в одном фрейме у вас находится меню, а в другой - выводится информация. Например:

Документ 1.

<FRAMESET ROWS="20,*">  
<FRAME SRC="doc2.htm" NAME="Frame1">  
<FRAME SRC="doc3.htm" NAME="Frame2">  
</FRAMESET>

Документ 2 (doc2.htm).

<HTML>  
<HEAD>  
<BASE TARGET="Frame2">  
</HEAD>  
<BODY>  
<A HREF="url1"> Первая часть</A> |  
<A HREF="url2"> Вторая часть</A>  
</BODY>  
</HTML>

TARGET в теге AREA

Таже можно включать тег TARGET в описание ссылки при создании карты изображения. Например:

<AREA SHAPE="circle" COORDS="100,100,50" HREF="http://www.softexpress.com" TARGET="Frame1">

TARGET в теге FORM

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

<FORM ACTION="url" TARGET="window_name">

Внимание! Имя окна (фрейма) в параметре TARGET должно начинаться с латинской буквы или цифры. Также необходимо помнить, что существуют зарезервированные имена для разрешения специальных ситуаций.

Зарезервированные имена фреймов

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

TARGET="_blank"

Данное значение определяет, что документ, полученный по ссылке будет отображаться в новом окне броузера.

TARGET="_self"

Данное значение определяет, что документ, полученный по ссылке будет отображаться в том же фрейме, в котором находится ссылка. Это имя удобно для переопределения окна назначения, указанного ранее в теге BASE.

TARGET="_parent"

Данное значение определяет, что документ, полученный по ссылке будет отображаться в родительском окне, вне зависимости от параметров FRAMESET. Если родительского окна нет, то данное имя аналогично "_self".

TARGET="_top"

Данное значение определяет, что документ, полученный по ссылке будет отображаться на всей поверхности окна, вне зависимости от наличия фреймов. Использование данного параметра удобно в случае вложенных фреймов.

 

Лабораторная работа №6  Формы в HTML-документах

Цель работы научить студентов:

  • использованию основных тегов по созданию форм,

  • создавать различные элементы форм в HTML-документах.

Формы HTML позволяют получать информацию от читателей. До сих пор мы обсуждали только способы вывода данных, теперь речь пойдет об обратном действии. Формы дают возможность запрашивать информацию в виде свободного текста, получать ответы типа "да/нет" или делать выбор из нескольких опций.

Вы можете использовать формы с различными целями. Простейшим примером является размещение формы, куда читатели, посетившие сайт, смогут записать свои отзывы. Круг применения форм HTML ограничивается только вашей фантазией.

В виде форм создаются экранные элементы такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT – специальный тип кнопки, который задается при описании документа), информация, введенная пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

Тег <FORM>

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

Атрибут

Назначение

ACTION

Определяет URL, который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма

METHOD

Указывает форме, как послать информацию соответствующей программе обработки (скрипту). Обычно он получает значение post, тогда информация формы посылается отдельно от URL. Значению get соответствует посылка вместе с URL


Пример:

<FORM METHOD="post" ACTION="/cgi-bin/comment_script">

...

</FORM>

В этом примере дано указание браузеру отправить заполненную форму для обработки скриптом comment_script, расположенным в каталоге cgi-bin вашего сервера, и использовать метод посылки post.

Атрибут METHOD в зависимости от используемого метода может посылать результаты ввода данных в форму двумя путями:

  • GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.

  • POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.

Работа с тегами форм

В HTML существует три тега для создания различного типа полей в форме: <TEXTAREA>, <SELECT> и <INPUT>. Любое их количество может быть размещено в контейнере между тегами <FORM> и </FORM>. Ниже дано их краткое описание, а подробнее они будут рассмотрены чуть позже.

Тег

Назначение

<TEXTAREA>

Определяет поле, в которое пользователь вводит многострочную текстовую информацию

<SELECT>

Позволяет пользователю сделать выбор в окне с полосой прокрутки, либо в раскрывающемся меню

<INPUT>

Обеспечивает некоторые другие виды ввода информации: ввод одной строки текста, установку и сброс флажков (check boxes), выбор переключателя (radio buttons) и нажатие кнопки для отправки данных или очистки формы


 

Тег <TEXTAREA> предназначен для построения поля с целью ввода многострочный текстовой информации. В контейнере TEXTAREA допускается размещать любой текст, который будет выведен в поле ввода по умолчанию. Перечислим атрибуты этого тега.

Атрибут

Назначение

NAME

Определяет название поля, обязателен

ROWS

Устанавливает высоту поля ввода в символах, т. е. число строк в нем

COLS

Устанавливает ширину поля ввода в символах, т. е. длину строки


Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и  </TEXT–AREA>.

Например:

<HTML><BODY>

<FORM>

   <TEXTAREA NAME="address"   ROWS=2   COLS=40>

   Алматы, ул. Масанчи, д. 96, офис 417. Кафедра информационных  систем

   </TEXTAREA>

</FORM>  

</BODY></HTML>

 

При помощи атрибутов ROWS и COLS можно задать поле любого размера. Хотя эти атрибуты не являются обязательными, они не имеют определенных значений по умолчанию (для каждого браузера эти значения различны), поэтому лучше их всегда указывать явно.

Тег <SELECT>

Этот тег используется для создания всплывающего меню или списка опций с полосой прокрутки. Список опций и пункты меню располагаются внутри контейнера SELECT. Аналогично тегу <TEXTAREA>, <SELECT> требует обязательного определения имени в атрибуте NAME. Количество опций указывается в атрибуте SIZE. Ниже перечислены атрибуты тега <SELECT>.

Атрибут

Назначение

NAME

Определяет название информации

SIZE

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

MULTIPLE

Позволяет выбирать сразу нескольких опций


Список опций включается в контейнер <SELECT> при помощи тега <OPTION>. Этот тег имеет два атрибута.

 

Атрибут

Назначение

VALUE

Указывает значение, возвращаемое программе обработки (скрипту), в случае выбора опции пользователем

SELECTED

Указывает на опцию, выбранную по умолчанию


Пример:

Ниже приведено содержимое двух HTML-документов, содержащих похожие формы. Во втором документе предварительно выбран один элемент из списка (добавлен атрибут SELECTED).

<HTML>

<BODY>

 Выберите время  года:

<FORM>

<SELECT NAME=year>

<OPTION SELECTED VALUE="winter"> зима 

<OPTION VALUE="spring"> весна 

<OPTION VALUE="summer"> лето

<OPTION VALUE="autumn"> осень

</SELECT>

</FORM>

</BODY>

</HTML>

Если применить атрибут многострочного поля <SELECT MULTIPLE NAME="year">, тогда результат будет как на следующем рисунке.

Тег <INPUT>

Тег <INPUT>, в отличие от <TEXTAREA> и <SELECT>, является одиночным тегом. Он предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и для очистки формы (Reset, Clear).

Тег <INPUT> располагает следующими атрибутами.

Атрибут

Назначение

NAMESIZE

Указывает размер поля ввода в символах

MAXLENGTH

Определяет максимально возможное число символов, вводимых в поле

VALUE

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

CHECKED

Устанавливает флажок или переключатель во включенное состояние по умолчанию. С другими типами тегов <INPUT> не употребляется

TYPE

Устанавливает тип поля ввода


 

Тип поля ввода, атрибут TYPE

Атрибут TYPE тега <INPUT> может принимать следующие значения.

Атрибут

Назначение

TEXT

Является значением по умолчанию и предполагает создание одной строки для ввода данных. Для этого типа поля ввода употребляются атрибуты NAME (обязательный), SIZE, VALUE и MAXLENGTH

PASSWORD

Позволяет заменять вводимые символы пароля звездочками. Для этого типа поля ввода используются атрибуты NAME (обязательный), SIZE, MAXLENGTH и VALUE


 

 

 

CHECKBOX

Позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опции "галочкой". Может использоваться совместно с атрибутами NAME (обязательный), VALUE и CHECKED (определяет установленный по умолчанию флажок). Флажки обычно употребляются, когда мож но выбрать сразу несколько опций из числа предложенных.  
Нужно быть очень осторожным в использовании флажков и переключателей, если цвет фона страницы определяется не документом, а пользователем при помощи установок программы просмотра. Не допускайте, чтобы опции сливались с фоном страницы.

RADIO

Позволяет выбрать только одну из представленного числа опций. Переключатели можно группировать, задавая одно и то же значение атрибута NAME (обязательный). Так же используются атрибуты VALUE и CHECKED

RESET

Позволяет создать кнопку для очистки формы. Атрибут VALUE может быть использован здесь для наименования этой кнопки (по умолчанию кнопка имеет надпись Reset)

SUBMIT

Используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой-скриптом. В атрибуте VALUE может быть указано название для этой кнопки (по умолчанию – Submit Query)

Информация о работе Основные теги HTML