Файловый архив студентов. Файловый архив студентов.
1261 вуз, 4609 предмет.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Санкт-Петербургский государственный университет информационных технологий, механики и оптики
Предмет:
Программирование для Web
Файл:
отчеты по лабораторным работам / лабораторная работа 5 (html, css, js) / HTML.docx
Скачиваний:
100
Добавлен:
09.05.2014
Размер:
601.5 Кб
Скачать
☆
►Содержание►

[Править]Браузерные войны

Основная статья: Война браузеров

В середине 1990-х годов возникло следующее явление. Основные производители браузеров — компании Netscape и Microsoft — начали внедрять собственные наборы элементов в HTML-разметку. Создалась путаница из различных конструкций для работы во Всемирной паутине, доступных для просмотра то в одном, то в другом браузере. Особенно большие трудности были при создании кросс-браузерных программ на языке JavaScript. Веб-мастерам приходилось создавать несколько вариантов страниц или прибегать к другим ухищрениям. На какое-то время проблема потеряла актуальность по двум причинам:

Из-за вытеснения браузером Internet Explorer всех остальных браузеров. Соответственно, проблема веб-мастеров становилась проблемой пользователей альтернативных браузеров.

Благодаря усилиям производителей других браузеров, которые либо следовали стандартам W3C (как Mozilla и Opera), либо пытались создать максимальную совместимость с Internet Explorer.

На современном этапе можно констатировать рост популярности браузеров, следующих рекомендациям W3C (это Mozilla Firefox и другие браузеры на движке Gecko; Safari,Google Chrome и другие браузеры на движке WebKit; Opera с движком Presto). Доля Internet Explorer на данный момент составляет менее 50 %.

Коротко о HTML

HTML (Hyper Text Markup Language) означает язык разметки гипертекста. Этот язык был разработан Тимом Бернерсом-Ли в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Документ на языке HTML может включать следующие компоненты:

стилизованный и форматированный текст;

команды включения графических и звуковых файлов;

гиперсвязи с различными ресурсами Internet;

скрипты на языке JavaScript и VBScript;

различные объекты, например Flash-анимацию.

Документы HTML являются обычными текстовыми файлами, содержащими специальные теги (или управляющие элементы) разметки. Теги разметки указывают браузеру Web, как надо вывести страницу. В HTML-документах то, что мы обычно видим на страничках, перемежается невидимым для просмотра из броузера кодом. Вот этот-то невидимый код и есть язык разметки HTML.  HTML — это не язык программирования, — он служит лишь для разметки странички, придания определенного вида тому или иному элементу, будь то таблица, текст или картинки.  Осуществляется это путем присвоения каждому элементу своих параметров, которые распознает броузер. Параметры эти могут быть заданы как для одного, так и для группы или типа элементов. Тип элементов может быть таким: таблицы, ячейки, ссылки, текст и т.п. То есть что-то, что можно назвать одним термином. Отдельные свойства можно присваивать и выбранным элементам персонально.  Параметры отображения элементов задаются при помощи тегов, в которых и задается желаемый вид того или иного элемента нашей странички. Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Это заголовок страницы</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link href="css/styles.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>Здравствуйте!</h1>

<!-- Это комментарий -->

<p>Это моя первая страница HTML. <b>Этот текст выводится жирным

шрифтом.</b></p>

</body>

</html>

Разбор примера <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> –- обозначает тип документа и формат. Облегчает распознавание другими программами этого файла. Указывает в начале версию стандарта HTML и язык документа. Рекомендуется оставлять без изменений для одинакового отображения в большинстве браузеров. HTML-документ начинается с тега <html>, который сообщает браузеру о начале документа HTML и заканчивается тегом </html>, который информирует браузер о достижении конца документа HTML. После тега </html> больше ничего не пишут. Текст между тегами <head> и </head> является информацией заголовка документа. Эта информация не выводится в окне браузера. Текст «Это заголовок страницы» между тегами <title> и </title> является заголовком документа. Этот заголовок выводится в строке заголовка окна браузера. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> — укзаывает на то, что документ содержит HTML-текст в кодировке windows-1251 — это кириллица.  <link href="css/styles.css" rel="stylesheet" type="text/css"> — подключает к документу таблицу стилей CSS. Текст между тегами <body> и </body> является текстом, который будет выведен в окне браузера. Текст «Здравствуйте!» между тегами <h1> и </h1> будет отображен стилем заголовка, обычно жирным шрифтом большего размера. <!-- Это комментарий --> — комментарии в HTML заключаются в <!-- и --> Тег <p> означает, что начинается новый параграф, тег </p> означает конец параграфа. Текст «Этот текст выводится жирным шрифтом.» между тегами <b> и </b> будет выведен жирным шрифтом.

Язык гипертекстовой разметки HTML

Таговая модель документа:

"элемент" := <"имя элемента" "список атрибутов"> содержание элемента  </"имя элемента">

Структура документа

Элемент HTML или гипертекстовый документ  состоит из двух частей:

заголовка документа (HEAD)

тела документа (BODY)

<HTML>

<HEAD>

Содержание заголовка

</HEAD>

<BODY>

Содержание тела документа

</BODY>

</HTML>

Элементы заголовка

<TITLE>

поля документа

<BASE>

базовый адрес

<ISINDEX>

поисковый документ

<LINK>

общая гипертекстовая ссылка

<META>

Примеры элементов заголовка:

<TITLE> Название документа </TITLE>

<BASE HREF="http://polyn.net.kiae.su/>,

<A HREF="/altai/index.html">

<A HREF="http://polyn.net.kiae.su/altai/index.html">

<img SRC="/gif/test.gif">

<img SRC="http://polyn.net.kiae.su/gif/test.gif">

<ISINDEX HREF="http://polyn.net.kiae.su/cgi-bin/search" PROMPT="Enter Keywords:">

<LINK REL=Help HREF="http://polyn.net.kiae.su/dss/syshelp.html">

<LINK REL=Banner HREF=banner.html>

<META HTTP-EQUIV="Keywords"

CONTENT="Plsma, Nuclear Physics">

Keywords: Plasma, Nuclear Physics

Основные классы элементов тела

Тело документа состоит из:

Иерархических контейнеров и заставок

Заглавий (от H1 до H6)

Блоков (параграфы, списки, формы, таблицы, картинки и т. п.)

Горизонтальных отчеркиваний и адресов

Текста, разбитого на области действия стилей (подчеркивание, выделение, курсив), математические описания, графику и гипертекстовые ссылки

Элементы стиля

Элемент

Значение

Примечание

<I>.....</I>

Курсив(Italic)

 

<B>...</B>

Усиление(BOLD)

 

<TT>...</TT>

Телетайп

 

<U>...</U>

Подчеркивание

 

<S>...</S>

Перечеркнутый текст

Только Arena при наличии соответствующего фонта

<BIG>...</BIG>

Увеличенный текст

только Arena

<SMALL>...</SMALL>

Уменьшенный фонт

только Arena

<SUB>...</SUB>

Подстрочные символы

только Arena

<SUP>...</SUP>

Надстрочные символы

только Arena

Информационные элементы

Элемент

Значение

Примечание

<EM>...</EM>

Типографское  усиление

Часто отображается как Italic

<CITE>...</CITE>

Цитирование

Не реализовано в  Mosaic

<STRONG>...</STRONG>

Усиление

Отображается как BOLD

<CODE>...</CODE>

Отображает  примеры кода (например, коды программ)

Отображается непропорциональным фонтом

<SAMP>...</SAMP>

Последователь-ность литералов

Не реализован в Mosaic

<KBD>...</KBD>

Пример ввода символов с клавиатуры

Используется при разработке руководств

<VAR>...</VAR>

Переменная

<DFN>...</DFN>

Определение

только Arena

<Q>...</Q>

Текст, заключенный в скобки

Вид скобок зависит от атрибута LANG. Реализован только в Arena

<LANG>...</LANG>

Определяет язык отображения

только Arena

<AU>...</AU>

Автор

только Arena

<PERSON>...</PERSON>

Имя персоны

Введено для простоты выделения при индексировании документов. Реализован только в Arena

<ACRONIM>...</ACRONIM>

Акроним

только Arena

<ABBREV>...</ABBREV>

Аббревиатура

только Arena

<INS>...<INS>

Вставленный текст

только Arena

<DEL>...</DEL>

Удаленный текст

только Arena

Управление отображением стиля символов текста

Гипертекстовые контекстные ссылки

<A HREF="http://polyn.net.kiae.su/index.html">

Индекс базы данных "Полынь"</A>

<A NAME="point">

<A HREF="http://polyn.net.kiae.su/index.html#point">

Ссылка на точку "point" в документе "index.html"</A>

Элемент img

<img SRC="http://polyn.net.kiae.su/gif/sarclast.gif" ALT="Sarcofagus.Winter, 1997">

<A HREF="doc.html"><img SRC="icon.gif" ALIGN=MIDDLE></A>

Таблицы

<TABLE BORDER>

<CAPTION>A test table with merged cells.<CREDIT>(T.Berners Lee/WWWC,1995.)</CREDIT></CAPTION>

<TR><TH ROWSPAN=2><TH COLSPAN=2>Average>

<TH rowspan=2>other<BR>category<TH ROWSPAN=2>Misc</TR>

<TR><TH>height<TH>weght</TR>

<TR><TH ALIGN=left>males<TD>1.9<TD>0.003

<TR><TH ALIGN=left>females<TD>1.7<TD>0.002

</TABLE>

Пример таблицы

Пример таблицы построенной в текстовом редакторе

Формы

Элемент

Назначение

INPUT

поля ввода информации имеют множество типов

TEXTAREA

поле ввода многострочного текста

SELECT

описание меню

OPTION

описание элемента меню

Пример использования полей ввода

<FORM METHOD=POST ACTION=http://polyn.net.kiae.su/cgi-bin/test>

<P> Ниже приведен список примеров полей ввода:<BR>

Простое текстовое поле: <INPUT NAME="test1" VALUE="test1" TYPE="text"><BR>

Поле типа checkbox: <INPUT NAME="test2" TYPE="checkbox" CHECKED><BR>

Поле типа radiobutton: <INPUT NAME="test3" TYPE="radio"><BR>

Поле типа password: <INPUT NAME="test4" TYPE="password"><BR>

Невидимое поле: <INPUT NAME="test5" TYPE="hidden" VALUE="kuku"><BR>

Кнопка Submit: <INPUT NAME="submit" VALUE="Submit" TYPE="submit"><BR>

Кнопка Reset: <INPUT NAME="reset" VALUE="Reset" TYPE="reset"><BR>

Графическая кнопка: <INPUT NAME="graph" VALUE="default" SRC="test.gif" TYPE="image"><BR>

</FORM>

Элемент TEXTAREA

<TEXTAREA NAME="multi" ROWS=5 COLS=20>

This is a test

TEXTAREA элемент

</TEXTAREA>

БАЗИСНЫЕ ЭЛЕМЕНТЫ

 

Тип документа

<HTML></HTML>

(начало и конец файла)

 

Имя документа

<TITLE></TITLE>

(должно быть в заголовке)

 

Заголовок

<HEAD></HEAD>

(описание документа, например его имя)

 

Тело

<BODY></BODY>

(содержимое страницы)

  

ОПРЕДЕЛЕНИЕ СТРУКТУРЫ

 

Заглавие

<H?></H?>

(стандарт определяет 6 уровней)

 

с выравниванием

<H? ALIGN=LEFT|CENTER|RIGHT></H?>

 

 

Секция

<DIV></DIV>

 

 

с выравниванием

<DIV ALIGN=LEFT|RIGHT|CENTER></DIV>

 

 

Цитата

<BLOCKQUOTE></BLOCKQUOTE>

(обычно выделяется отступом)

 

Выделение

<EM></EM>

(обычно изображается курсивом)

 

Дополнительное выделение

<STRONG></STRONG>

(обычно изображается жирным шрифтом)

 

Отсылка, цитата

<CITE></CITE>

(обычно курсив)

 

Код

<CODE></CODE>

(для листингов кода)

 

Пример вывода

<SAMP></SAMP>

 

 

Ввод с клавиатуры

<KBD></KBD>

 

 

Переменная

<VAR></VAR>

 

 

Определение

<DFN></DFN>

(часто не поддерживается)

 

Адрес автора

<ADDRESS></ADDRESS>

 

 

Большой шрифт

<BIG></BIG>

 

 

Маленький шрифт

<SMALL></SMALL>

 

 

ВНЕШНИЙ ВИД

 

Жирный

<B></B>

 

 

Курсив

<I></I>

 

N3.0b

Подчеркнутый

<U></U>

(часто не поддерживается)

 

Перечеркнутый

<STRIKE></STRIKE>

(часто не поддерживается)

N3.0b

Перечеркнутый

<S></S>

(часто не поддерживается)

 

Верхний индекс

<SUB></SUB>

 

 

Нижний индекс

<SUP></SUP>

 

 

Печатная машинка

<TT></TT>

(изображается как шрифт фиксированой ширины)

 

Форматированый

<PRE></PRE>

(сохранить формат текста как есть)

 

Ширина

<PRE WIDTH=?></PRE>

(в символах)

 

Центрировать

<CENTER></CENTER> >

(как текст, так и графика)

N1.0

Мигающий

<BLINK></BLINK>

(наиболее осмеянный элемент)

 

Размер шрифта

<FONT SIZE=?></FONT>

(от 1 до 7)

 

Изменить размер шрифта

<FONT SIZE="+|-?"></FONT>

 

N1.0

Базовый размер шрифта

<BASEFONT SIZE=?>

(от 1 до 7; по умолчанию 3)

 

Цвет шрифта

<FONT COLOR="#$$$$$$"></FONT>

 

N3.0b

Выбор шрифта

<FONT FACE="***"></FONT>

 

N3.0b

Многоколоночный текст

<MULTICOL COLS=?></MULTICOL>

 

N3.0b

Пробел между колонками

<MULTICOL GUTTER=?></MULTICOL>

(по умолчанию 10 точек)

N3.0b

Ширина колонки

<MULTICOL WIDTH=?></MULTICOL>

 

N3.0b

Пустой блок

<SPACER>

 

N3.0b

Тип пустого блока

<SPACER TYPE=horizontal| vertical|block>

 

N3.0b

Величина пустого блока

<SPACER SIZE=?>

 

N3.0b

Размеры пустого блока

<SPACER WIDTH=? HEIGHT=?>

 

N3.0b

Выравнивание

<SPACER ALIGN=left|right|center>

 

  

ССЫЛКИ И ГРАФИКА

 

Ссылка

<A HREF="URL"></A>

 

 

Ссылка на закладку

<A HREF="URL#***"></A>

(в другом документе)

<A HREF="#***"></A>

(в том же документе)

N2.0

На другое окно

<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>

 

 

Определить закладку

<A NAME="***"></A>

 

 

Отношение

<A REL="***"></A>

(часто не поддерживается)

 

Обратное отношение

<A REV="***"></A>

(часто не поддерживается)

 

Графика

<IMG SRC="URL">

 

 

Выравнивание

<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

 

N1.0

Выравнивание

<IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM>

 

 

Альтернатива

<IMG SRC="URL" ALT="***">

(выводится если картинка не изображается)

 

Карта

<IMG SRC="URL" ISMAP>

(нужна также программа)

 

Локальная карта

<IMG SRC="URL" USEMAP="URL">

 

 

Определение карты

<MAP NAME="***"></MAP>

 

 

Области карты

<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>

 

 

Размеры

<IMG SRC="URL" WIDTH=? HEIGHT=?>

(в точках)

 

Окантовка

<IMG SRC="URL" BORDER=?>

(в точках)

 

Отступ

<IMG SRC="URL" HSPACE=? VSPACE=?>

(в точках)

N1.0

Заменитель в низком разрешении

<IMG SRC="URL" LOWSRC="URL">

 

N1.1

Обновить

<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

 

N2.0

Включить об'ект

<EMBED SRC="URL">

(вставить об'ект в страницу)

N2.0

Размер об'екта

<EMBED SRC="URL" WIDTH=? HEIGHT=?>

 

 

РАЗДЕЛИТЕЛИ

 

Параграф

<P></P>

(закрывать элемент часто не обязательно)

 

Выравнивание

<P ALIGN=LEFT|CENTER|RIGHT></P>

 

 

Новая строка

<BR>

(одиночный перевод строки)

 

Убрать выравнивание

<BR CLEAR=LEFT|RIGHT|ALL>

 

 

Горизонтальный разделитель

<HR>

 

 

Выравнивание

<HR ALIGN=LEFT|RIGHT|CENTER>

 

 

Толщина

<HR SIZE=?>

(в точках)

 

Ширина

<HR WIDTH=?>

(в точках)

N1.0

Ширина в процентах

<HR WIDTH="%">

(в процентах от ширины страницы)

 

Сплошная линия

<HR NOSHADE>

(без трехмерных эффектов)

N1.0

Нет разбивки

<NOBR></NOBR>

(запрещает перевод строки)

N1.0

Перенос

<WBR>

(где разбивать строку для переноса при необходимости)

 

СПИСКИ

 

 

Неупорядоченный

<UL><LI></UL>

(<LI> перед каждым элементом)

 

 

Компактный

<UL COMPACT></UL>

 

 

Тип метки

<UL TYPE=DISC|CIRCLE|SQUARE>

(для всего списка)

 

<LI TYPE=DISC|CIRCLE|SQUARE>

(этот и последующие)

 

 

Нумерованый

<OL><LI></OL>

(<LI> перед каждым элементом)

 

 

Компактный

<OL COMPACT></OL>

 

 

Тип нумерации

<OL TYPE=A|a|I|i|1>

(для всего списка)

 

<LI TYPE=A|a|I|i|1>

(этот и следующие)

 

 

Первый номер

<OL START=?>

(для всего списка)

 

<LI VALUE=?>

(этот и следующие)

 

 

Список определений

<DL><DT><DD></DL>

(<DT>=термин, <DD>=определение)

 

 

Компактный

<DL COMPACT></DL>

 

 

Меню

<MENU><LI></MENU>

(<LI> перед каждым элементом)

 

 

Компактное

<MENU COMPACT></MENU>

 

 

Каталог

<DIR><LI></DIR>

(<LI>перед каждым элементом)

 

 

Компактный

<DIR COMPACT></DIR>

 

 

ФОН И ЦВЕТА

 

Фоновая картинка

<BODY BACKGROUND="URL">

 

 

Цвет фона

<BODY BGCOLOR="#$$$$$$">

(порядок: красный/зеленый/синий)

 

Цвет текста

<BODY TEXT="#$$$$$$">

 

 

Цвет ссылки

<BODY LINK="#$$$$$$">

 

 

Пройденная ссылка

<BODY VLINK="#$$$$$$">

 

 

Активная ссылка

<BODY ALINK="#$$$$$$">

 

(Дополнительная информация)

СПЕЦИАЛЬНЫЕ СИМВОЛЫ(обязаны быть в нижнем регистре)

 

Специальный символ

&#?;

(где ? это код ISO 8859-1)

 

<

<

 

 

>

>

 

 

&

&

 

 

"

"

 

 

Торговая марка ТМ

®

 

 

Copyright

©

 

 

Неразделяющий пробел

 

 

(Полный список)

ФОРМЫ

 

Определить форму

<FORM ACTION="URL" METHOD=GET|POST></FORM>

 

N2.0

Посылка файла

<FORM ENCTYPE="multipart/form-data"></FORM>

 

 

Поле ввода

<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">

 

 

Имя поля

<INPUT NAME="***">

 

 

Значение поля

<INPUT VALUE="***">

 

 

Отмечен?

<INPUT CHECKED>

(checkboxes и radio boxes)

 

Размер поля

<INPUT SIZE=?>

(в символах)

 

Максимальная длина

<INPUT MAXLENGTH=?>

(в символах)

 

Список вариантов

<SELECT></SELECT>

 

 

Имя списка

<SELECT NAME="***"></SELECT>

 

 

Число вариантов

<SELECT SIZE=?></SELECT>

 

 

Множественний выбор

<SELECT MULTIPLE>

(можно выбрать больше одного)

 

Опция

<OPTION>

(элемент который может быть выбран)

 

Опция по умолчанию

<OPTION SELECTED>

 

 

Ввод текста, размер

<TEXTAREA ROWS=? COLS=?></TEXTAREA>

 

 

Имя текста

<TEXTAREA NAME="***"></TEXTAREA>

 

N2.0

Разбивка на строки

<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

 

 

Таблицы

 

Определить таблицу

<TABLE></TABLE>

 

 

Окантовка таблицы

<table border=?></TABLE>

 

 

Расстояние между ячейками

<TABLE CELLSPACING=?>

 

 

Дополнение ячеек

<TABLE CELLPADDING=?>

 

 

Желаемая ширина

<TABLE WIDTH=?>

(в точках)

 

Ширина в процентах

<TABLE WIDTH="%">

(проценты от ширины страницы)

 

Строка таблицы

<TR></TR>

 

 

Выравнивание

<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>

 

 

Ячейка таблицы

<TD></TD>

(должна быть внутри строки)

 

Выравнивание

<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>

 

 

Без перевода строки

<TD NOWRAP>

 

 

Растягивание по колонке

<TD COLSPAN=?>

 

 

Растягивание по строке

<TD ROWSPAN=?>

 

N1.1

Желаемая ширина

<TD WIDTH=?>

(в точках)

N1.1

Ширина в процентах

<TD WIDTH="%">

(проценты от ширины страницы)

N3.0b

Цвет ячейки

<TD BGCOLOR="#$$$$$$">

 

 

Заголовок таблицы

<TH></TH>

(как данные, но жирный шрифт и центровка)

 

Выравнивание

<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>

 

 

Без перевода строки

<TH NOWRAP>

 

 

Растягивание по колонке

<TH COLSPAN=?>

 

 

Растягивание по строке

<TH ROWSPAN=?>

 

N1.1

Желаемая ширина

<TH WIDTH=?>

(в точках)

N1.1

Ширина в процентах

<TH WIDTH="%">

(проценты ширины таблицы)

N3.0b

Цвет ячейки

<TH BGCOLOR="#$$$$$$">

 

 

Заглавие таблицы

<CAPTION></CAPTION>

 

 

Выравнивание

<CAPTION ALIGN=TOP|BOTTOM>

(сверху/снизу таблицы)

 

ФРЕЙМЫ

N2.0

Документ с фреймами

<FRAMESET></FRAMESET>

(вместо <BODY>)

N2.0

Высота строк

<FRAMESET ROWS=,,,></FRAMESET>

(точки или %)

N2.0

Высота строк

<FRAMESET ROWS=*></FRAMESET>

(* = относительный размер)

N2.0

Ширина колонок

<FRAMESET COLS=,,,></FRAMESET>

(точки или %)

N2.0

Ширина колонок

<FRAMESET COLS=*></FRAMESET>

(* = относительный размер)

N3.0b

Ширина окантовки

<FRAMESET BORDER=?>

 

N3.0b

Окантовка

<FRAMESET FRAMEBORDER="yes|no">

 

N3.0b

Цвет окантовки

<FRAMESET BORDERCOLOR="#$$$$$$">

 

N2.0

Определить фрейм

<FRAME>

(содержание отдельного фрейма)

N2.0

Документ

<FRAME SRC="URL">

 

N2.0

Имя фрейма

<FRAME NAME="***"|_blank|_self| _parent|_top>

 

N2.0

Ширина границы

<FRAME MARGINWIDTH=?>

(правая и левая границы)

N2.0

Высота границы

<FRAME MARGINHEIGHT=?>

(верхняя и нижняя границы)

N2.0

Скроллинг?

<FRAME SCROLLING="YES|NO|AUTO">

 

N2.0

Постоянный размер

<FRAME NORESIZE>

 

N3.0b

Окантовка

<FRAME FRAMEBORDER="yes|no">

 

N3.0b

Цвет окантовки

<FRAME BORDERCOLOR="#$$$$$$">

 

N2.0

Содержание без фреймов

<NOFRAMES></NOFRAMES>

(для просмотрщиков не поддерживающих фреймы)

 

ЯЗЫК JAVA

 

Applet

<APPLET></APPLET>

 

 

Applet - имя файла

<APPLET CODE="***">

 

 

Параметры

<APPLET PARAM NAME="***">

 

 

Applet - адрес

<APPLET CODEBASE="URL">

 

 

Applet - имя

<APPLET NAME="***">

(для ссылок из других частей страницы)

 

Альтернативный текст

<APPLET ALT="***">

(для программ не поддерживающих Java)

 

Выравнивание

<APPLET ALIGN="LEFT|RIGHT|CENTER">

 

 

Размеры

<APPLET WIDTH=? HEIGHT=?>

(в точках)

 

Отступ

<APPLET HSPACE=? VSPACE=?>

(в точках)

 

РАЗНОЕ

 

Комментарий

<!-- *** -->

(игнорируется просмотрщиком)

 

Пролог HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

 

 

Поиск

<ISINDEX>

(означает начальную точку поиска)

 

Приглашение

<ISINDEX PROMPT="***">

(текст приглашения для поля ввода)

 

Запустить поиск

<A HREF="URL?***"></a>

(используйте действительно знак вопроса)

 

URL этого файла

<BASE HREF="URL">

(должно быть в заголовке)

N2.0

Имя базового окна

<BASE TARGET="***">

(должно быть в заголовке)

 

Отношение

<LINK REV="***" REL="***" HREF="URL">

(должно быть в заголовке)

 

Метаинформация

<META>

(должно быть в заголовке)

 

Стили

<STYLE></STYLE>

(часто не поддерживается)

 

Программа

<SCRIPT></SCRIPT>

(часто не поддерживается)

Объектная модель документа DOM

Объектная модель, реализованная в Internet Explorer 5.0, полностью соответствует рекомендациям REC-DOM-Level-1-19981001 Консорциума WWW. В ней, как и в модели DHTML, документ представляется в виде логической древовидной структуры, но она предоставляет программисту большие удобства при работе с иерархической структурой объектов документа, чем объектная модель DHTML, позволяя:

Перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново

Создавать новые элементы и присоединять их к структуре документа в любом ее месте

Организовывать и манипулировать новыми или существующими ветвями структуры фрагмента документа до помещения объектов в структурное дерево документа

Для понимания объектной модели документов важно осознавать, что логическая древовидная структура представления документа никак не связана с реализацией этой модели именно в виде древовидной структуры. Рекомендации не регламентируют способ реализации модели, она может быть произвольной. Основное - это принцип структурного изоморфизма: две реализации объектной модели документа, используемые для представления одного и того же документа, создадут одну и ту же структурную модель с одинаковыми объектами и их связями.

Другой важный аспект модели DOM - она оперирует с объектами в полном соответствии с традиционными объектно-ориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением.

Объектная модель документов, таким образом, как объектная модель, определяет:

интерфейсы и объекты, используемые для представления документа и манипулирования с ним;

семантику (смысл) этих интерфейсов и объектов, включая и поведение, и атрибуты;

"родственные" связи и взаимодействие между этими интерфейсами и объектами.

Узлы объектной модели DOM

Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.

Узлы в модели DOM документа HTML могут быть следующих типов:

Тип

Что представляет

1

Элемент HTML

3

Текстовое содержимое тега HTML

8

Комментарий HTML

9

Корневой элемент иерархической структуры

11

Фрагмент документа

Простейший документ HTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке:

Рис. 1

Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1).

Текстовое содержимое элемента HTML хранится в специальном текстовом узле (тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов.

Например, рассмотрим следующий фрагмент документа HTML:

<P>Это <B>содержимое</B> абзаца <I>документа</I> HTML</P>

В объектной модели DOM он будет представлен следующим иерархическим деревом:

Рис. 2

На рисунке в текстовых узлах также представлено их содержимое. В DOM HTML содержимое, получаемое с помощью свойства nodeValue узла может быть только у текстовых узлов и узлов комментария (свойство nodeName равно#comment), являющихся листьями иерархического дерева объектов документа.

Перемещение по объектной модели

К узлам, и даже целым ветвям, можно получить доступ из сценария JavaScript, встроенного в документ. Концепция объектной модели документа позволяет изменить узел или целую ветвь структуры, не разрушая ее. Это приводит к более простому и ясному коду по сравнению с кодом, реализующим изменение структуры документа в объектной модели DHTML.

На примере структуры, создаваемой вложенными списками, продемонстрируем, с помощью каких свойств объектов в модели DOM можно перемещаться по ее узлам:

<UL ID="parent">

<LI ID="Node1">Узел 1

<LI ID="Node2">Узел 2

<UL ID="inside">

<LI ID="Child1">Потомок 1

<LI ID="Child2">Потомок 2

<LI ID="Child3">Потомок 3

</UL>

<LI ID="Node3">Узел 3

</UL>

В объектной модели документов этот фрагмент будет представлен в виде структуры с отношениями "родства", показанной на рисунке:

Рис. 3

Элементы с именами Node1, Node2 и Node3 являются узлами-потомками элемента-родителя с именем parent. В семействе childNodes объекта parent хранятся ссылки на всех потомков этого элемента (Node1, Node2 и Node3). Для получения ссылок на первого и последнего потомка узла в объектной модели предусмотрены соответственно свойстваfirstChild и lastChild.

Свойство parentNode объектов-потомков возвращает ссылку родителя объектов, поэтому значением этих свойств объектов Node1, Node2 и Node3 будет ссылка на узел parent.

Объекты Node1, Node2 и Node3 являются ближайшими родственниками одного поколения и открываются друг другу с помощью своих свойств previousSibling (предыдущий ближайший родственник) и nextSibling (следующий ближайший родственник). Если у элемента-узла нет соответствующих ближайших родственников, то эти свойства возвращают значение null.

Конечно, если все элементы HTML документа заданы с уникальными атрибутами ID, то разработчику документа достаточно просто в сценариях получать ссылки на такие объекты-узлы (значение атрибута ID элемента является именем соответствующего ему объекта в языках сценариев с использованием модели DHTML и DOM). Но идентифицировать все элементы страницы дело утомительное, поэтому для перемещения по объектной модели можно использовать указанные выше свойства узлов.

Для изменения, установки или получения содержимого текстового узла (узлы остальных типов не имеют текстового содержимого ) в DOM используется свойство nodeValue, тогда как в модели DHTML следует применять свойстваinnerHTML и innerText для любого элемента HTML:

// Объектная модель DOM

Node.childNodes[0].nodeValue = "Новое содержимое";

// Модель DHTML

Node.innerHTML = "Новое содержимое";

Отметим отличие этих двух моделей при доступе к текстовому содержимому объектов. В DOM текстовое содержимое элемента HTML может храниться в одном или нескольких узлах-потомках типа 3, непосредственно порождаемых элементом HTML. Тогда как в объектной модели DHTML достаточно использовать одно из свойств innerHTML илиinnerText объекта, соответствующего элементу HTML.

Для доступа к объектной модели DOM загруженной в браузер страницы HTML прежде всего необходимо иметь ссылку на корневой элемент #document. Она создается автоматически и хранится в объекте window.document. Получить в DOM ссылку на корневой объект документа, соответствующий элементу, задаваемому тегом <HTML> можно единственным способом - использовать свойство documentElement объекта document. После чего, используя приведенные выше свойства узлов DOM, переместиться к требуемому элементу HTML и его содержимому.

Изменение объектной модели документа

Каждый узловой элемент порождается другим узловым элементом и может сам выступить родителем других узлов-элементов (за исключением узла #text). Объектная модель DOM предоставляет возможность в сценарии создать узел, соответствующий любому элементу HTML, задать значения его атрибутов, а затем встроить его в существующую модель документа, что приведет к автоматическому изменению вида документа в браузере.

Создание узла любого типа выполняется методами объекта document - createElement() создает узел типа 1,createTextNode() узел типа 3, createComment() узел типа 8 и createDocumentFragment() узел типа 11.

В метод createElement() передается строка, соответствующая открывающему тегу создаваемого элемента вместе с заданными атрибутами:

var newParagraph = document.createElement('<p id="par1">');

Если не надо задавать атрибуты вновь создаваемого элемента или используются их значения по умолчанию, то для создания нового элемента достаточно только его HTML-имя:

var newParagraph = document.createElement('P');

После создания, если потребуется, атрибуты становятся доступными как свойства созданного объекта:

newParagraph.style.backgroundColor = 'gray';

В методы createTextNode() и createComment() передается текстовая строка, являющаяся содержимым указанных узлов, получаемое через их свойство nodeValue:

var newTextElement = document.createTextNode('xxxxx');

var newComment = document.createComment('yyyyyyyyyy');

У метода создания фрагмента документа параметров createDocumentFragment() нет:

var newFragment = document.createDocumentFragment();

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

Рассмотрим на примере таблицы HTML процесс динамического создания элемента и встраивания его в документ HTML. Любая таблица объектной модели документа обязательно состоит, по крайней мере, из двух узлов: TABLE и TBODY. Поэтому при динамическом создании таблиц не следует забывать об этом обстоятельстве:

var Table=document.createElement('TABLE');

var TBody=document.createElement('TBODY');

var Row=document.createElement('TR');

var Cell1=document.createElement('TD');

var Cell2=Cell1.cloneNode();

Row.appendChild(Cell1);

Row.appendChild(Cell2);

Table.appendChild(TBody);

TBody.appendChild(Row);

document.body.appendChild(Table);

Cell1.appendChild(document.createTextNode('Ячейка 1'));

Cell2.appendChild(document.createTextNode('Ячейка 2'));

Процедура создания таблицы, собственно говоря, повторяет задание тегов в коде HTML документа (не пропуская тегов, вставляемых по умолчанию). Методом appendChild(элемент) любого узла осуществляется добавление к нему потомка - порождаемого этим объектом элемент HTML. В нашем примере этим методом в строку таблицы были добавлены две ячейки, в тело таблицы добавлена строка, а само тело было добавлено к объекту таблицы Table.

Для создания объекта, соответствующего второй ячейке таблицы использован метод cloneNode(), который создает объект - полную копию объект, для которого он вызывается, включая его атрибуты и семейство childNodes, если в качестве параметра задано значение true. Если параметр метода не задан, то используется значение по умолчаниюfalse, при котором семейство ссылок на порождаемые объекты не копируется.

Для включения вновь созданной структуры в документ ее необходимо добавить к объекту body методомappendChild().

Для манипуляции узлами используются их методы removeNode(), replaceNode() и swapNode().

Метод removeNode() удаляет объект, для которого он вызван, из структуры документа. Его единственный параметр может принимать булевы значения true или false. Значение true предписывает удалить и все порожденные данным объектом объекты, тогда как значение false (умалчиваемое) удаляет только сам объект, оставляя в документе все подчиненные ему объекты.

Замену одного объекта другим можно осуществить методом replaceNode(), вызываемым для замещаемого объекта. Замещающий объект передается в качестве параметра метода. При замене объекта замещаемый объект удаляется из структуры документа.

Поменять местами два объекта в иерархии документа позволяет метод swapNode(). Меняются местами объект, метод которого вызывается, и объект, определяемый параметром метода.

Как помним, в объектной модели DHTML, чтобы поменять местами два "равноправных" элемента, например строк таблицы, пришлось видоизменять структуру документа: удалять и добавлять ряды и ячейки. Иначе обстоит дело в объектной модели документа. Методом swapNode() можно просто поменять местами узлы-элементы в структуре документа:

function fncInterchange(row){

row.swapNode(row.previousSibling);

}

Параметром этого метода является элемент, с которым необходимо поменять местами текущий элемент.

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

В приводимых ниже таблицах собраны все методы и свойства объектной модели DOM для динамической работы с документом HTML.

Методы и свойства объекта document

Метод/свойство

Параметры

Возвращаемое значение

getElementById()

Строка - значение атрибута id элемента

Узел DOM

getElementsByName()

Строка - значение атрибута name элемента

Семейство узлов DOM

getElementsByTagName()

Строка - наименование тега элемента

Семейство узлов DOM

createElement()

Строка - наименование тега элемента или открывающий тег элемента с атрибутами

Узел DOM

createTextNode()

Строка - содержимое текстового узла

Узел DOM

createComment()

Строка - содержимое комментария

Узел DOM

createAttribute()

Строка - название атрибута

Объект-атрибут DOM

documentElement

 

Объект HTML

body

 

Объект body

Свойства узлов DOM

Свойство

Возвращаемое значение

firstChild

Первый дочерний узел

lastChild

Последний дочерний узел

previousSibling

Предыдущий ближайший узел одного уровня

nextSibling

Следующий ближайший узел одного уровня

childNodes

Семейство непосредственно порожденных узлов

nodeName

Наименование узла

nodeType

Тип узла

nodeValue

Значение узла (содержимое текстового узла, для остальных узлов null)

Методы узлов DOM

Метод

Параметры

Возвращаемое значение

appendChild()

Новый дочерний узел

Добавленный узел

cloneNode()

Истина - клонировать и дочерние узлы, ложь - клонировать без дочерних

Новый (клонированный) узел

insertBefore()

Новый дочерний узел; необязательный параметр - дочерний узел, перед которым требуется вставить новый

Новый узел

replaceChild()

Новый дочерний узел и подлежащий замене дочерний узел

Замещенный узел

replaceNode()

Новый узел для замены существующего

Замещенный узел

removeChild()

Дочерний узел, подлежащий удалению

Удаленный узел

removeNode()

Истина - удалить и дочерние элементы, ложь - дочерние оставить

Удаленный узел

swapNode()

Узел, с которым исходный меняется местами

Узел, с которым осуществлялась замены

hasChildNodes()

Имеет ли узел дочерние - параметров нет

Истина, если да, ложь - в противном случае

getAttributeNode()

Строка - название атрибута элемента

Атрибут в виде объектаIHTMLDOMAttribute

setAttributeNode()

Узел-атрибут

Атрибут в виде объектаIHTMLDOMAttribute

getElementsByTagName()

Строка - наименование тега элемента

Семейство узлов DOM

В заключение отметим, что реализация DOM в IE 5.0 не устранила существовавшую, начиная с IE 4.0, объектную модель DHTML. Просто для объектов были добавлены свойства, методы и семейства объектной модели DOM. Так что можно работать с любой из двух моделей и даже "смешивать" их, например, создав элемент в модели DOM, а изменять его содержимое свойствами innerHTML и innerText объектной модели DHTML.

DOM - ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА

Объектная модель документа (Document Object Model – DOM) является стандартом, предложенным веб-консорциумом, и регламентирует способ представления содержимого документа (в частности веб-страницы) в виде набора объектов. Под содержимым понимается все, что может находиться на веб-странице: рисунки, ссылки, абзацы, текст и т. д.

В отличие от объектной модели браузера (BOM), которая уникальна для каждого браузера, объектная модель документа является стандартом и должна поддерживаться всеми браузерами. И хотя на практике поддержка DOM реализована не в полной мере, тем не менее необходимо стремиться следовать требованиям этого стандарта как производителям браузеров, так и разработчикам веб-сайтов.

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

DOM является развивающимся стандартом и разбит на три уровня. Первый уровень является первой версией стандарта и пока что единственной законченной. Он состоит из двух разделов: первый является ядром и определяет принципы манипуляции со структурой документа (генерация и навигация), а второй посвящен представлению в DOM элементов HTML, определяемых одноименными тегами.

Второй и третий уровни описывают модель событий, дополняют таблицы стилей, проходы по структуре.

Представление документа в виде древовидной структуры

В DOM документ представляется в виде древовидной структуры (рис. 19), являющейся одной из наиболее употребительных структур в программировании. Это обеспечивает унифицированный способ навигации по документу.

Рис. 19. Представление HTML-документа в виде древовидной структуры

Навигация по документу

В модели DOM к элементу можно обратиться непосредственно по его идентификатору id, воспользовавшись методом getElementById объекта Document:

<html> <head> <title>Основы DOM</title> </head> <body> <h1 id = "head">Основы DOM</h1> <p>A Text</p> <script language = "JavaScript"> var a = document.getElementById("head"); alert(a); </script> </body> </html>

Для получения коллекции всех элементов, соответствующих какому-либо тегу, используется метод объекта Document – getElementsByTagName. Например, var a = document.getElementsByTagName("TD") присвоит переменной a коллекцию всех элементов <td>. Обратите внимание, что имя элемента следует писать прописными буквами ("TD"). Рассмотрим пример использования метода getElementsByTagName:

<html> <head> <title>Основы DOM</title> </head> <body> <h1 id = "head">Основы DOM</h1> <table border = "2"> <tr> <td>1,1</td> <td>1,2</td> </tr> <tr> <td>2,1</td> <td>2,2</td> </tr> </table> <script language = "JavaScript"> var a = document.getElementsByTagName("TD"); a.item(0).style.color = "red"; a.item(3).style.fontFamily = "arial"; a.item(3).style.color = "green"; </script> </body> </html>

Чтобы воспользоваться преимуществом древовидной структуры, принятой в DOM для представления документа, следует использовать навигационные атрибуты (рис. 20), представленные в табл. 11.

Рис. 20. Навигационные атрибуты объекта Node

Таблица 11

Навигационные атрибуты объекта Node

Атрибут

Описание

firstChild

Возвращает первый узел-потомок

lastChild

Возвращает последний узел-потомок

previousSibling

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

nextSibling

Возвращает следующий соседний узел, имеющий с текущим одного родителя

parentNode

Возвращает родительский узел

ownerDocument

Возвращает корневой узел документа, содержащий текущей узел

nodeName

Возвращает имя узла

nodeValue

Возвращает значение узла в текстовом формате

nodeType

Возвращает тип узла в виде числа

В следующем примере осуществляется проход по древовидной структуре документа:

<html> <head> <title>Навигация по документу</title> </head> <body> <h1>Изучение навигации по документу</h1> <p>Абзац 1</p> <p>Абзац 2</p> <script language = "JavaScript"> var temp = document.documentElement; temp = temp.firstChild; alert(temp.tagName); if(temp.nextSibling == 3) temp = temp.nextSibling.next.Sibling; else temp = temp.nextSibling; alert(temp.tagName); temp = temp.firstChild; alert(temp.tagName); temp.style.color = "red"; if(temp.nextSibling == 3) temp = temp.nextSibling.nextSibling; else temp = temp.nextSibling; alert(temp.tagName); temp.style.color = "blue"; temp = temp.parentNode; alert(temp.tagName); </script> </body> </html>

Динамическая генерация веб-страниц средствами DHTML на основе DOM

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

Для создания объектов у объекта Document имеются следующие методы (табл. 12):

Таблица 12

Методы объекта Document, позволяющие создавать объекты

Метод

Описание

createElement(имя_элемента)

Создает новый узел элемента с указанным именем

createTextNode(текст)

Создает текстовый узел с указанным текстом

createAttribute(имя_атрибута)

Создает новый узел атрибута с указанным именем

Вновь созданные объекты добавляются в структуру документа при помощи методов объекта Node (табл. 13):

Таблица 13

Методы объекта Node, добавляющие и удаляющие элементы документа

Метод

Описание

appendChild(новый_узел)

Добавляет объект Node в конец списка узлов-потомков

cloneNode(потомок-опция)

Создает объект Node, идентичный указанному в аргументе. В качестве аргумента можно использовать и все узлы-потомки одновременно

hasChildNodes()

Возвращает true, если узел имеет потомков

insertBefore(новый_узел, текущий_узел)

Вставляет объект Node в список потомков перед узлом, указанным в качестве второго параметра

removeChild(узел-потомок)

Удаляет узел-потомок, указанный в качестве параметра

replaceChild(новый_потомок, старый_потомок)

Заменяет старого потомка на нового

Приведем пример динамической генерации документа средствами DOM (рис. 21).

Рис. 21. Динамически сгенерированная веб-страница

<html> <head> <title>Пример динамической генерации документа</title> </head> <body> <script language = "JavaScript"> var newText; var newElem; newText = document.createTextNode("Пример  динмического создания HTML-документа"); newElem = document.createElement("H1"); newElem.appendChild(newText); document.body.appendChild(newElem); newText = document.createTextNode("Абзац"); newElem = document.createElement("P"); newElem.appendChild(newText); document.body.appendChild(newElem); </script> </body> </html>

Для чтения и установки атрибутов используются следующие методы объекта Element (табл. 14).

Таблица 14

Методы объекта Element

Метод

Описание

getAttribute(имя_атрибута)

Возвращает значение атрибута

setAttribute(имя_атрибута, значение)

Устанавливает значение атрибута

removeAttribute(имя_атрибута)

Устанавливает значение атрибута по умолчанию, затирая текущее значение

Ниже приведен пример на задание атрибутов. И хотя применение атрибутов физического форматирования не рекомендовано к применению (для этих целей используются стили), они были выбраны в качестве примера, так как наглядно демонстрируют идею задания атрибутов методами DOM.

<html> <head> <title>Пример динамического создания HTML-документа</title> </head> <body> <script language = "JavaScript"> var newText; var newElem; newText = document.createTextNode("Пример динамического создания HTML-документа"); newElem = document.createElement("H1"); newElem.appendChild(newText); newElem.setAttribute("align", "center"); document.body.appendChild(newElem); alert(newElem.getAttribute("align")); newText = document.createTextNode("Абзац"); newElem = document.createElement("P"); newElem.appendChild(newText); newElem.setAttribute("align", "right"); document.body.appendChild(newElem); alert(newElem.getAttribute("align")); newElem.removeAttribute("align"); </script> </body> </html>

Модель событий DOM

Особенностью программ, создаваемых для среды веб является то, что они управляются событиями. Чтобы узнать, какое событие произошло, в DOM имеется объект события event(табл. 15). Объект event является локальным и его следует явным образом передавать в обработчик события.

Таблица 15

Свойства объекта event

Свойство

Описание

bubbles

Указывает возможность «всплывания» события (передачи управления вверх по иерархической структуре)

cancelable

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

currentTarget

Указывает событие, обрабатываемое в данный момент

eventPhase

Указывает фазу возбуждения события

target (только NN 6)

Указывает элемент, вызвавший событие

timestamp (только NN 6)

Указывает время возникновения события

type

Указывает имя события

События, связанные с мышью, генерируют объект mouse (табл. 16).

Приведем пример динамически изменяемого текста.

<html> <head> <script language = "JavaScript"> function onMouseover() { var temp = document.getElementById("DynamicText"); temp.firstChild.nodeValue = "Указатель мыши на тексте"; temp.style.color = "red"; } function onMouseout() { var temp = document.getElementById("DynamicText"); temp.firstChild.nodeValue = "Динамический текст"; temp.style.color = "black"; } </script> <title>Динамический текст</title> </head> <body> <p id = "DynamicText" onmouseover = "return onMouseover()"  onmouseout = "return onMouseout()">Динамический текст</p> </body> <html>

Таблица 16

Свойства объекта mouse

Свойство

Описание

altKey

Указывает, была ли нажата клавиша <Alt> в момент возникновения события

button

Указывает, какая клавиша мыши была нажата

clientX

Сообщает горизонтальную координату указателя мыши в окне браузера на момент возникновения события

clientY

Сообщает вертикальную координату указателя мыши в окне браузера на момент возникновения события

ctrKey

Указывает, была ли нажата клавиша <Ctrl> в момент возникновения события

metaKey

Указывает, была ли нажата метаклавиша в момент возникновения события

relatedTarget (только NN 6)

Указывает цель события

screenX

Сообщает горизонтальную координату указателя мыши в окне браузера, вычисленную от начала экранных координат, на момент возникновения события

screenY

Сообщает вертикальную координату указателя мыши в окне браузера, вычисленную от начала экранных координат, на момент возникновения события

shiftKey

Указывает, была ли нажата клавиша <Shift> в момент возникновения события

Пример, определяющий координаты нахождения курсора мыши.

<html> <head> <title>Определение координат курсора</title> <script language = "JavaScript"> function onClick(e) { alert("X = " + e.clientX + "; " + "Y = " + e.clientY); } </script> </head> <body onclick = "onClick(event)"> <p>Щелкните мышью на экране<p> </body> </html>

Что такое html формы и зачем они нужны.

Html формы - это наверное самая сложная часть языка html. Так что наберитесь терпения и давайте потихоньку начинать.

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

Начало формы

Введите ФИО:   Введите пароль:   Какой диск вы хотите получить?

 CD  DVD

Какие обучающие курсы вы хотите видеть на диске?

 Курсы по Фотошопу   Курсы по Adobe Dreamweaver   Курсы по PHP

Выберите способ доставки:

                                                         Введите адрес для доставки:

        

 

Конец формы

Здесь все работает, кроме отправки данных, можете поклацать :)

Ну как видели такое? вот-вот, сейчас везде такое, так что давайте разберемся:

html форма - это всего лишь каркас, созданный при помощи языка html, т.е. мы можем указать браузеру где у нас будет какое поле и что написано на той или иной кнопке. Но для того, чтобы при нажатии на кнопку ваш комментарий добавился в гостевую книгу или данные заказа полетели в офис - нужна иная технология - программа, скрипт, который привязывается к форме. Обычно такие программы делаются на php . Но не расстраивайтесь раньше времени, я дам Вам простейший обработчик для тренировки, а более сложные можно найти в интернете или самому написать.

Давайте рассмотрим все элементы формы из примера выше по-порядку:

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

Пример 1:

<form> <!-- сюда вставляют различные элементы --> </form>

Как видите здесь два базовых тега : открывающий <form> и обязательный закрывающий тег </form> .

Но в этом выше, как бы голый каркас, т.е. без атрибутов. А теперь рассмотрим более реальный каркас html формы:

Пример 2:

<form name="forma zakaza" method="post" action="obrabotchik.php"> <!-- сюда вставляют различные элементы --> </form> 

Атрибуты:

NAME – определяет имя формы, уникальное для данного документа. Используется только , если в документе присутствует несколько форм.

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

METHOD – определяет способ отправки содержимого html формы. Возможные значения GET (по умолчанию) и POST. 

Пару слов о методах передачи:

Метод GET используется для передачи различных переменных , или очень коротких сообщений. Информация передается в явном виде через строку браузера , т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В html формах обычно не используется. Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Передает информацию в скрытом виде.

Пока все понятно? тогда давайте начнем разбирать элементы формы:

<form name="primer1" method="post" action="obrabotchik.php"> Введите ФИО: <br> <input type="text" name="fio" size="30"> <br> Введите пароль:<br> <input type="password" name ="pass"> </form>

В результате получим:

Введите ФИО:   Введите пароль:

Что мы видим в исходном коде? а мы видим следующее:

Элемент INPUT - создает поле html формы (кнопку, поле ввода, чекбокс и т.п.), Элемент не имеет конечного тега.

Основные атрибуты :

TYPE - определяет тип поля для ввода данных. По умолчанию – это "text". В данном примере еще используется тип "password" который указывает на то, чтоб информация показывалась звездочками.

NAME - определяет имя, используемое при передаче содержания данной html формы на сервер. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя.

SIZE - определяет размер поля в символах. По умолчанию имеет значение равное 24. Т.е. если этот атрибут не писать то длина будет равна 24 символа.

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

Ну вот например:

<form name="primer2" method="post" action="obrabotchik.php"> Введите пароль(максимум шесть символов):<br> <input type="password" name ="pass" maxlength="6"> </form>

Результат: 

Введите пароль(максимум шесть символов):

Ну как работает? А вы попробуйте ввести больше шести символов :)

Еще есть атрибут VALUE который определеят что будет по умолчанию написано в поле для ввода.

Смотрите пример:

<form name="primer3" method="post" action="obrabotchik.php"> Введите свой e-mail: <br> <input type="text" name="e-mail" size="35" value="пример: admin@zvirec.com"> </form>

Результат:

Введите свой е-mail:  

 

Теперь рассмотрим следующий элемент формы:

<form name="primer4" method="post" action="obrabotchik.php"> <p> Какой диск вы хотите получить?</p> <p> <input name="disc" type="radio" value="cd" checked> CD<br> <input name="disc" type="radio" value="dvd"> DVD </p></form>

Результат:

Какой диск вы хотите получить?

 CD  DVD

Данный тип элементов html формы называется радиопереключатель(переключает: либо одно значение, либо другое - два одновременно быть не может). Поэтому атрибут type имеет значение type="radio". Раз мы выбераем между CD и DVD то радиопереключателя у нас два, поэтому два раза пользуемся элементом INPUT. Как видите у них одинаковое имя - name="disc" и разные значения value . Почему это так? давайте подумаем логически:

Нас интересует какой диск хочет получить клиент, CD или DVD . Поэтому у нас одинаковое значение имени name="disc" и разные значение ( value="cd" иvalue="dvd"). Т.е. если мы выбираем первый вариант, то переменная disc примет значение cd а если второй- то dvd. Логично? по другому и быть не может...

Если вы хотите сделать, чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флагchecked(включен).

Примечание:в радиопереключателе обязательно должен присутствовать атрибут value иначе ничего работать не будет.

Последний элемент в этом уроке:

<form name="primer5" method="post" action="obrabotchik.php"> <p>Какие обучающие курсы вы хотите видеть на диске?</p> <input type="checkbox" name="fotoshop" value="yes" checked> Курсы по Фотошопу <br> <input type="checkbox" name="dreamweaver" value="yes"> Курсы по Adobe Dreamweaver <br> <input type="checkbox" name="php" value="yes">Курсы по PHP </form>

Результат:

Какие обучающие курсы вы хотите видить на диске?

 Курсы по Фотошопу   Курсы по Adobe Dreamweaver   Курсы по PHP

Данный тип элементов html формы называется checkbox и отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов. Как видите type="checkbox" означает что тип элемента - Чекбокс, атрибут nameнужен для того, чтобы обработчик мог идентифицировать данное поле и наконецvalue - определяет тот параметр, который будет отправлен при поставленной галочке.

В данном элементе, атрибут value не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке,как значение переменной в обработчик полетит текст который написан рядом с галочкой.

Остальные элементы формы мы разберем в следующем уроке. Пока поэксперементируйте и придумайте свои формы.

HTML-формы

Формы были созданы и используются в WWW для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения пользователем формы и запуска процесса ее обработки, информация из нее попадает к программе, работающей на сервере. Простота использования тега <MAILTO:> в формахпозволяет даже владельцам небольших страниц получать отклик от своих читателей. Для обработки большого количества откликов используются программы, поддерживающие Common Gateway Interface (CGI) и расположенные на сервере, в адрес которого поступают отклики. Таким образом пользователь может интерактивно взаимодействовать с Web-сервером через Internet.

Задание формы — элемент FORM

Элемент FORM обозначает документ как форму и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов<INPUT>, размещенных внутри пары <FORM> и </FORM>. В форме используется как метод (method), так и действие (action) для описания обработки данных, вводимых пользователем в форму. Метод (GET или POST) определяет, как должны обрабатываться входные данные из формы, а действие указывает на URI (Uniform Resource Identifier) программы, ответственной за обработку этих данных.

<FORM METHOD=post

ACTION=mailto:yourname@your.email.address>

Определение элементов управления формы — тег <INPUT>

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

Атрибут TYPE=text

Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег <INPUT>, и атрибут TYPE устанавливается в значениеtext. Это значение принято по умолчанию и указывать его необязательно. Кроме того, задается атрибут NAME для определения наименования переменной поля.

Ваше имя <INPUT NAME=Name SIZE=35>

Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется MAXLENGTH, он ограничивает число символов, вводимых пользователем в текущееполе. По умолчанию данное число не ограничено. Вторым атрибутом является SIZE, определяющий размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение MAXLENGTH больше, чем SIZE, браузер будет прокручивать данные в окне. Последним из дополнительных атрибутов является атрибут VALUE, обеспечивающий начальное значение поля ввода.

Атрибут TYPE=checkbox

Для создания независимых флагов в формах HTML используется тег <INPUT> со значением атрибута TYPE=checkbox. В зависимости от содержания формы пользователь может отметить несколько флагов. Когда форма использует тег <INPUT> со значением атрибута CHECKBOX, в нем должны присутствовать и атрибуты NAME, и VALUE. Атрибут NAMEуказывает на наименование данного поля (флага) ввода. В атрибуте VALUE будет содержаться значение поля.

<BR>Россия<INPUT NAME="Страна" TYPE=checkbox

VALUE="Россия">

Страны СНГ<INPUT NAME="Страна" TYPE=checkbox

VALUE="СНГ">

В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED.

Атрибут TYPE=radio

В некоторых случаях требуется организовать выбор одного из нескольких возможных значений. Для создания формы ввода при выборе пользователем одного значения из нескольких возможных необходимо использовать тег <INPUT> с атрибутом TYPE=radio. Когда в форме применяется данный атрибут, в теге <INPUT> должны быть указаны атрибуты NAME и VALUE. Атрибут NAME указывает наименование соответствующего поля (кнопки). Атрибут VALUE содержит значение поля.

<BR>Пол мужской<INPUT NAME="Пол" TYPE=radio

VALUE="Мужской">

Пол женский<INPUT NAME="Пол" TYPE=radio

VALUE="Женский">

Атрибут TYPE=image

В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для этого программисты используют тег <INPUT> с атрибутом TYPE=image. Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. Когда форма использует атрибут image, тег <INPUT> должен содержать также атрибуты NAME и SRC. NAMEуказывает наименование поля ввода формы. Атрибут SRC содержит URI файла — источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG>.

<BR>Выберите точку<INPUT TYPE=image NAME=point

SRC=image.gif>

Атрибут TYPE=password

Если в форме требуется организовать ввод пароля, то атрибут TYPE можно установить в значение password (TYPE=password). Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены.

<BR>Подпись<INPUT NAME=login>Пароль

<INPUT TYPE=password NAME="Слово">

Атрибут TYPE=reset

Когда пользователь заполняет форму, ему может потребоваться начать все сначала. На такой случай существует кнопка Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей. Когда пользователь выбирает данную кнопку, форма восстанавливает первоначальные значения всех элементов, в которых присутствует атрибут TYPE=reset. Для создания кнопки Reset используется тег <INPUT> с атрибутом TYPE=reset. Браузер в свою очередь будет выводить изображение данной кнопки. Если в форме используется атрибут reset, тег <INPUT> может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки.

<INPUT TYPE=reset VALUE="Очистить форму">

Атрибут TYPE=submit

Используя форму HTML для ввода информации от пользователя, необходимо обеспечить пользователю возможность завершить ввод данных. Для этого используется тег<INPUT> с атрибутом TYPE=submit. Браузер, в свою очередь, выводит данный элемент, как кнопку, по которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Когда в форме используется тег <INPUT> с атрибутом submit, данный элемент может содержать два дополнительных атрибута: NAME и VALUE. Атрибут NAMEхранит название переменной поля в вашей форме. Атрибут VALUE — определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов.

<BR><INPUT TYPE=submit

VALUE="Отправить сообщение">

Атрибут TYPE=hidden

Скрытые поля. Добавление в тег INPUT атрибута TYPE=hidden позволит включить в отправляемую форму значения атрибутов NAME и VALUE, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.

Создание многострочных областей ввода текста — тег <TEXTAREA>

В зависимости от типа формы может потребоваться организовать ввод большого количества текста. В таких случаях используется тег <TEXTAREA> для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS, NAME и ROWS.

Атрибут COLS

Указывает (число символов) число колонок, содержащихся в текстовой области.

Атрибут NAME

Определяет наименование поля.

Атрибут ROWS

Задает количество видимых строк текстовой области.

<BR><TEXTAREA NAME="тема" COLS="38" ROWS="3">

</TEXTAREA>

Использование списков в форме — тег <SELECT>

Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег SELECT с атрибутом TYPE=select. Для определения списка пунктов используют тег <OPTION>. Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.

Атрибут MULTIPLE

Позволяет выбрать более чем одно наименование.

Атрибут NAME

Определяет наименование объекта.

Атрибут SIZE

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

В форме может использоваться тег <OPTION> только внутри тега <SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE.

Атрибут SELECTED

Используется для первоначального выбора значения элемента по умолчанию.

Атрибут VALUE

Указывает на значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно значению тега <OPTION> (открыть).

<BR>Выбор

<SELECT NAME="Выбор">

<OPTION>Вариант 1

<OPTION>Вариант 2

<OPTION VALUE="Вариант 3">Вариант 3

<OPTION SELECTED>Вариант 4

</SELECT>

Рис. 6.1.  Выпадающее меню

HTTP запрос

Общие понятия

Запрос - это сообщение, посылаемое клиентом серверу. Первая строка этого сообщения включает в себя метод, который должен быть применен к запрашиваемому ресурсу, идентификатор ресурса и используемую версию протокола. Для совместимости с протоколом HTTP/0.9, существует два формата HTTP запроса:

Запрос = Простой-Запрос | Полный-Запрос

Простой-Запрос = "GET" SP Запрашиваемый-URI CRLF

Полный-Запрос = Строка-Статус

*(Общий-Заголовок | Заголовок-Запроса | Заголовок-Содержания ) CRLF

[ Содержание-Запроса ]

Если HTTP/1.0 сервер получает Простой-Запрос, он должен отвечать Простым-Ответом HTTP/0.9. HTTP/1.0 клиент, способный обрабатывать Полный-Ответ, никогда не должен посылать Простой-Запрос.

Строка Статус

Строка Статус начинается со строки с названием метода, за которым следует URI-Запроса и использующаяся версия протокола. Строка Статус заканчивается символами CRLF. Элементы строки разделяются пробелами (SP). В Строке Статус не допускаются символы LF и CR, за исключением заключающей последовательности CRLF.

Строка-Статус = Метод SP URI-Запроса SP Версия-HTTP CRLF

Следует отметить, что отличие Строки Статус Полного-Запроса от Строки Статус Простого- Запроса заключается в присутствии поля Версия-HTTP.

Метод

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

Метод = "GET" | "HEAD" | "PUT" | "POST" | "DELETE" | "LINK" | "UNLINK" | дополнительный-метод

Список методов, допускаемых отдельным ресурсом, может быть указан в поле Заголовок-Содержание "Баллов". Тем не менее, клиент всегда оповещается сервером через код статуса ответа, допускается ли применение данного метода для указанного ресурса, так как допустимость применения различных методов может динамически изменяться. Если данный метод известен серверу, но не допускается для указанного ресурса, сервер должен вернуть код статуса "405 Method Not Allowed", и код статуса "501 Not Implemented", если метод не известен или не поддерживается данным сервером. Общие методы HTTP/1.0 описываются ниже.

GET

Метод GET служит для получения любой информации, идентифицированной URI-Запроса. Если URI- Запроса ссылается на процесс, выдающий данные, в качестве ответа будут выступать данные, сгенерированные данным процессом, а не код самого процесса (если только это не является выходными данными процесса).

Метод GET изменяется на "условный GET", если сообщение запроса включает в себя поле заголовка "If-Modified-Since". В ответ на условный GET, тело запрашиваемого ресурса передается только, если он изменялся после даты, указанной в заголовке "If-Modified-Since". Алгоритм определения этого включает в себя следующие случаи:

Если код статуса ответа на запрос будет отличаться от "200 OK", или дата, указанная в поле заголовка "If-Modified-Since" некорректна, ответ будет идентичен ответу на обычный запрос GET.

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

Если ресурс не изменялся после указанной даты, сервер вернет код статуса "304 Not Modified".

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

HEAD

Метод HEAD аналогичен методу GET, за исключением того, что в ответе сервер не возвращает Тело- Ответа. Метаинформация, содержащаяся в HTTP заголовках ответа на запрос HEAD, должна быть идентична информации HTTP заголовков ответа на запрос GET. Данный метод может использоваться для получения метаинформации о ресурсе без передачи по сети самого ресурса. Метод "Условный HEAD", аналогичный условному GET, не определен.

POST

Метод POST используется для запроса сервера, чтобы тот принял информацию, включенную в запрос, как субординантную для ресурса, указанного в Строке Статус в поле URI-Запроса. Метод POST был разработан, чтобы была возможность использовать один общий метод для следующих функций:

Аннотация существующих ресурсов

Добавление сообщений в группы новостей, почтовые списки или подобные группы статей

Доставка блоков данных процессам, обрабатывающим данные

Расширение баз данных через операцию добавления

Реальная функция, выполняемая методом POST, определяется сервером и обычно зависит от URI- Запроса. Добавляемая информация рассматривается как субординатная указанному URI в том же смысле, как файл субординатен каталогу, в котором он находится, новая статья субординатна группе новостей, в которую она добавляется, запись субординатна базе данных.

Клиент может предложить URI для идентификации нового ресурса, включив в запрос заголовок "URI". Тем не менее, сервер должен рассматривать этот URI только как совет и может сохранить тело запроса под другим URI или вообще без него.

Если в результате обработки запроса POST был создан новый ресурс, ответ должен иметь код статуса, равный "201 Created", и содержать URI нового ресурса.

PUT

Метод PUT запрашивает сервер о сохранении Тело-Запроса под URI, равным URI-Запроса. Если URI-Запроса ссылается на уже существующий ресурс, Тело-Запроса должно рассматриваться как модифицированная версия данного ресурса. Если ресурс, на который ссылается URI-Запроса не существует, и данный URI может рассматриваться как описание для нового ресурса, сервер может создать ресурс с данным URI. Если был создан новый ресурс, сервер должен информировать направившего запрос клиента через ответ с кодом статуса "201 Created". Если существующий ресурс был модифицирован, должен быть послан ответ "200 OK", для информирования клиента об успешном завершении операции. Если ресурс с указанным URI не может быть создан или модифицирован, должно быть послано соответствующее сообщение об ошибке.

Фундаментальное различие между методами POST и PUT заключается в различном значении поля URI-Запроса. Для метода POST данный URI указывает ресурс, который будет управлять информацией, содержащейся в теле запроса, как неким придатком. Ресурс может быть обрабатывающим данные процессом, шлюзом в какой-нибудь другой протокол, или отдельным ресурсом, допускающим аннотации. В противоположность этому, URI для запроса PUT идентифицирует информацию, содержащуюся в Содержание-Запроса. Использующий запрос PUT точно знает какой URI он собирается использовать, и получатель запроса не должен пытаться применить этот запрос к какому-нибудь другому ресурсу.

DELETE

Метод DELETE используется для удаления ресурсов, идентифицированных с помощью URI-Запроса. Результаты работы данного метода на сервере могут быть изменены с помощью человеческого вмешательства (или каким-нибудь другим способом). В принципе, клиент никогда не может быть уверен, что операция удаления была выполнена, даже если код статуса, переданный сервером, информирует об успешном выполнении действия. Тем не менее, сервер не должен информировать об успехе до тех пор, пока на момент ответа он не будет собираться стереть данный ресурс или переместить его в некоторую недостижимую область.

LINK

Метод LINK устанавливает взаимосвязи между существующим ресурсом, указанным в URI-Запроса, и другими существующими ресурсами. Отличие метода LINK от остальных методов, допускающих установление ссылок между документами, заключается в том, что метод LINK не позволяет передавать в запросе Тело-Запроса, и в том, что в результате работы данного метода не создаются новые ресурсы.

UNLINK

Метод UNLINK удаляет одну или более ссылочных взаимосвязей для ресурса, указанного в URI- Запроса. Эти взаимосвязи могут быть установлены с помощью метода LINK или какого-нибудь другого метода, поддерживающего заголовок "Link". Удаление ссылки на ресурс не означает, что ресурс прекращает существование или становится недоступным для будущих ссылок.

Поля Заголовок-Запроса

Поля Заголовок-Запроса позволяют клиенту передавать серверу дополнительную информацию о запросе и о самом клиенте.

Заголовок-Запроса = Accept | Accept-Charset | Accept-Encoding |

Accept-Language | Authorization | From |

If-Modified-Since |

Pragma | Referer | User-Agent | extension-header

Кроме того через механизм расширения могут быть определены дополнительные заголовки; приложения, которые их не распознают, должны трактовать эти заголовки, как Заголовок-Содержание.

Ниже будут рассмотрены некоторые поля заголовка запроса.

From

В случае присутствия поля From, оно должно содержать полный E-mail адрес пользователя, который управляет программой-агентом, осуществляющей запросы. Этот адрес должен быть задан в формате, определенном в RFC 822. Формат данного поля следующий: From = "From" ":" спецификация адреса. Например:

From: webmaster@WWW.org

Данное поле может быть использовано для функций захода в систему, а также для идентификации источника некорректных или нежелательных запросов. Оно не должно использоваться, как несекретная форма разграничения прав доступа. Интерпретация этого поля состоит в том, что обрабатываемый запрос производится от имени данного пользователя, который принимает ответственность за применяемый метод. В частности, агенты-роботы должны использовать этот заголовок для того, чтобы можно было связаться с тем человеком, который отвечает за работу робота, в случае возникновения проблем. Почтовый Internet адрес, указывающийся в этом поле, не обязан соответствовать адресу того хоста, с которого был послан данный запрос. По возможности, адрес должен быть доступным Internet адресом вне зависимости от того, является ли он в действительности Internet E-mail адресом или Internet E-mail представлением адреса других почтовых систем.

Замечание: Клиент не должен использовать поле заголовка From без позволения пользователя, так как это может войти в конфликт с его частными интересами или с местной, используемой им, системой безопасности. Настоятельно рекомендуется предоставление пользователю возможности запретить, разрешить или модифицировать это поле в любой момент перед запросом.

If-Modified-Since

Поле заголовка If-Modified-Since используется с методом GET для того, чтобы сделать его условным: если запрашиваемый ресурс не изменялся во времени, указанного в этом поле, копия этого ресурса не будет возвращена сервером; вместо этого, будет возвращен ответ "304 Not Modified" без Тела- Ответа.

If-Modified-Since = "If-Modified-Since" ":" HTTP-дата

Пример использования заголовка:

If-Modified-Since: Sat, 29 Oct 1994 19:43:31 GMT

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

Пишем наш первый HTTP запрос

Если Вы думаете, что все слишком сложно, то Вы ошибаетесь. Человек так устроен, что просто не способен создавать что-то сложное, иначе он сам в этом запутается :-) Итак, есть браузер и есть Web-сервер. Инициатором обмена данными всегда выступает браузер. Web-сервер никому, никогда просто так ничего не пошлет, чтобы он что-нибудь отправил браузеру — надо, чтобы браузер об этом попросил. Простейший HTTP запрос моет выглядеть, например, так:

GET http://www.php.net/ HTTP/1.0\r\n\r\n

GET (В переводе с английского означает "получить") — тип запроса, тип запроса может быть разным, например POST, HEAD, PUT, DELETE (часть из них мы рассмотрим ниже).

http://www.php.net/ — URI (адрес) от которого мы хотим получить хоть какую-нибудь информацию (естественно мы надеемся подучить HTML страницу).

HTTP/1.0 — тип и версия протокола, который мы будем использовать в процессе общения с сервером.

\r\n — конец строки, который необходимо повторить два раза, зачем, станет понятно немного позднее.

Вы можете выполнить данный запрос очень просто. Запустите программу telnet.exe, введите в качестве хоста www.php.net, укажите порт 80, и просто наберите данный запрос, нажав два раза Enter в качестве \r\n\r\n. В ответ вы получите HTML код главной страницы сайта www.php.net.

Соседние файлы в папке лабораторная работа 5 (html, css, js)
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности