Гиперссылки

<A></a>

В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:

<A HREF="адрес перехода">выделенный фрагмент текста</A>

При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или метку. Разберем это на примере.

Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такую метку в файле 2.html:

<A NAME="AAA">Переход закончен</A>

Слова "Переход закончен" при этом никак не будут выделены в тексте документа.

Затем в файле 1.html (или в любом другом) можно определить переход на эту метку:

<A HREF="2.html#AAA">Переход к метке AAA</A>

Переход к этой метке можно определить и внутри самого документа 2.html — достаточно только включить в него вот такой фрагмент:

<A HREF="#AAA">Переход к метке AAA</A>

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

Во избежание недоразумений рекомендуется задавать имена меток латинскими буквами. Следите за написанием имен меток: большинство броузеров отличают большие буквы от маленьких. Если имя метки определено как AAA, ссылка на aaa или AaA не выведет Вас на метку AAA, хотя документ, скорее всего, будет загружен корректно.

Изображения-карты

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

<MAP> </map>

Тег определяет имя карты и внутри себя содержит теги <area> определяющие чувствительные области на рисунке.

Атрибут: name=”имя карты”.

<AREA>

Задается чувствительная к перемещению мыши область изображения.

Атрибуты: shape=форма зоны

Задается формы:

shape=circle - окружность

shape=polygon - многоугольник

shape=rect - прямоугольник

coords=список координат - указывается (через запятую). Список зависит от формы зоны и определяет её границы

href=URL - Указывается URL связанного с данной зоной документа

nohref - Указывает, что с данной зоной никакой документ не связан; щелчок кнопкой мыши в этой зоне никакого результата не дает.

Пример:

<map name="color">

<area shape="polygon" coords="30,67,65,20,65,71" href="prim4.html#polygon">

<area shape="rect" coords="130,20,170,70" href="prim4.html#rect">

<area shape="circle" coords="245,45,25" href="prim4.htm#circle" >

</map>

<img src="pict3.jpg" usemap="#color">

Формы

Форма предназначена для размещения в ней элементов управления: поля ввода, кнопки, переключатели, флажки и т.д. Каждый элемент управления создается при помощи тегов.

<FORM></FORM>

Форма открывается меткой <form> и заканчивается</form>. Страница может содержать в себе несколько форм, однако формы не могу располагаться одна внутри другой.

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

В момент использования формы часть элементов может иметь значения.

Атрибут	Описание	Пример задания значения
Action	Определяет местоположения обработчика формы. action=mailto: адрес@сервер.домен”	<form action=”http://www.название.домен/имя_программы” method=post>… </form>
Method	Метод пересылки данных из формы обработчику. Допустимые значения: Method=post Method=get Если значение атрибута не задано, по умолчанию предполагается Method=get
Enctype	Указывает способ кодировки содержимого формы. По умолчанию Enctype=application/x-www-form-urlencoded	Enctype=”тип кодировки”
Tabindex	Определяет последовательность перехода курсора с поля на поле при помощи клавиши Tab. На элемент с атрибутом Tabindex=1 устанавливается курсор в момент открытия броузера.	<form><Button name=”OK” Tabindex=1 value=”submit” type=”submit”></button></form>

<SELECT><OPTION></SELECT>

Элемент предназначен для создания списка или меню. Элемент <option> - для создания пункта списка. Элемент может не входить в область формы, а использоваться самостоятельно.

Атрибуты	Описание	Пример задания значения
name	Имя объекта
multiple	Атрибут не имеет значений. Если он используется, то пользователю разрешается выбрать сразу несколько пунктов.
size	Определяет количество видимых на экране пунктов списка. Если данный атрибут не задан то список требуется раскрыть щелчком на кнопке со стрелкой, иначе он представляет собой прокручиваемые поля причем количество их ограничивается указанным в атрибуте числом.	Size=”число”
value	Атрибут необходим для обработки данных	Value=otvet_a
selected	Без значений. Определяет, какой из пунктов списка должен быть выбран по умолчанию.

Пример:

<html><body>

<Form><Input Type="hidden" Name="select value">

<Select Name="sel" Size="1" OnChange="top.location.href = this.options[this.selectedIndex].value;">

<Option selected value=#>Навигация по сайту</Option>

<Option value=http://>Ваш текст - 1</Option>

<Option value=http://>Ваш текст - 2</Option>

<Option value=http://>Ваш текст - 3</Option>

<Option value=http://>Ваш текст - 4</Option>

</Select></Form>

</body></html>

Пример использование формы

<ISINDEX>

Элемент для ввода строки текста. Поле ввода созданное этим элементом непосредственно связано с определенным на текущей странице базовым URL. Атрибут href тега base – адрес некоторого поискового средства в интернете. Поле ввода можно дополнить строкой подсказки используя атрибут promt=”комментарий”.

Пример:

<base href=”http://www.название.домен/путь”>

<isindex promt=”Критерий поиска”>

<INPUT>

Позволяет создавать элементы управления: флажки, переключатели, поля ввода.

Атрибут	Описание
Type	Определяет вид элемента: Type=”text” – создание поля ввода, в котором можно автоматически разместить произвольный текст, используя атрибут value; Type=”password” – создание поля для ввода пароля, причем введенная информация отображается звездочками; Type=”checkbox” – создание квадратного флажка. Использование аналогично radio; Type=”radio” – определение одного переключателя. Для создание группы переключателей необходимо использовать несколько элементов input; Type=”button” – создание кнопки произвольного назначения; Type=”submit” – создание кнопки, щелчок на которой подтверждает ввод информации в форму; Type=”reset” – кнопка для отмены ввода данных в форму; Type=”image” – создание кнопки с рисунком. Для указания графического файла используется атрибут src; Type=”file” – средство выбора файла для присоединения к форме. Пользователю предлагается записать имя файла в поле ввода. Броузер автоматически создает рядом с полем ввода кнопку “Обзор”, для запуска стандартного диалога; Type=”hidden” – скрытый от пользователя элемент. Для включения в форму некоторой фиксированной информации, например, определение имени переменной и ее значения. Передается обработчику без изменений;
Name	Должен присутствовать во всех элементах input, кроме кнопок подтверждения и сброса.
Value	Значение атрибута задает значение по умолчанию для поля ввода или определяет надпись на кнопке.
Size	Задает длину поля ввода. Длина исчисляется символах, может быть заданна только приближенно (в зависимости от броузера). Длину поля требуется задавать с запасом.
maxlength	Может быть использован двумя способами: задавать максимальную длину строки, которая может быть записана в поле; может ограничивать размер файла, присоединенного к форме.
Readonly	Элемент становиться не доступен для редактирования.
Usemap	Атрибут может использоваться, если в форме создается карта.
Accept	Можно определить список допустимых данных: accept=”список типов данных”
accesskey	Определяет горячие клавиши для перехода к объекту: accesskey=”C”
Tabindex	Определяет последовательность перехода курсора с поля на поле при помощи клавиши Tab. На элемент с атрибутом Tabindex=1 устанавливается курсор в момент открытия броузера.

Пример

<html>

<body>

<form action=”gl_8.htm”>

<input type=submit value=”перейти к главе 8 ..”>

</form>

</body>

</html>

<LABEL></LABEL>

Является контейнером для других элементов формы. Например, может объединять надпись и поле ввода. Для каждого элемента <label> используется только один элемент формы.

Пример:

<Label>Имя: <Input type=text id=last_name></label>

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

Пример:

<html><body><table border=1><form>

<tr><td><label for=”im”>Имя: </label>

<td><input type=”text” id=”im”>

</form></table></body></html>

<TEXTAREA></TEXTAREA>

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

Атрибут	Описание	Пример задания значения
name	Имя объекта.	<textarea name=text readonly rows=6 cols=50> текст </textarea>
rows	Высота окна в строках.
cols	Устанавливает ширину окна в символах.
readonly	Запрещает редактировать содержимое объекта.

Пример:

<html><body><textarea name=text rows=6 cols=50>

Область для ввода текста

</textarea></body></html>

<BUTTON></BUTTON>

Тег предназначен для создания кнопок. Является контейнером для текста и графики.

Атрибут	Описание	Пример задания значения
type	Может принимать следующие значения: Type=button – вызывает запрограммированную разработчиком реакцию на щелчок; Type=submit – подтверждает, что кнопка заполнена; Type=reset – кнопка для очистки формы.	<html><body><form><button name=“пример” value=reset type=reset>Надпись <img src=”имя.gif” alt=”Это кнопка”> </button></form></body></html>

<FIELDSET><LEGEND></LEGEND></FIELDSET>

Элементы предназначены для создания группы полей в форме.

Пример:

<Form>

<Fieldset>

<Legend>Содержание</legend>

<Input type=radio name=”a” value=”Белый” checked> Белый

<Input type=radio name=”b” value=”Прозрачный”> Прозрачный

<Input type=radio name=”c” value=”Цвет фона”> Цвет фона

</fieldset>

</form>

С помощью элемента Fieldset несколько элементов объединяются. При просмотре страницы сгруппированные элементы заключены в рамку. Элемент Ligend позволяет создавать заголовок группы (рамки). Для выравнивания элементов используется атрибут align:

align=top – заголовок сверху; align=botton – заголовок внизу; align=left – заголовок вверху и слева; align=right – заголовок вверху и справа.