Каталог Рефератов - Специализированные языки разметки документов (HTML)

	Информационно-образоательный портал
	Рефераты, курсовые, дипломы, научные работы,



МЕНЮ\|

поиск

Специализированные языки разметки документов (HTML)

rc - задает адрес открываемой в данном фрейме страницы.

frameborder - определяет границы фреймов и аналогичен соответствующему атрибуту тега <FRAMESET>

noresize - устанавливает запрет на изменение пользователем размеров окна фрейма.

marginwidth определяет размер в пикселах пустого пространства, оставляемого во фрейме в качестве правого и левого полей.

marginheight задает верхний и нижний отступы.

Директива <NOFRAMES> позволяет записать произвольное количество html-кода, который будет динамически преобразован в самостоятельную web-страницу в случае, если клиентский броузер не поддерживает фреймы.

9.2 Целевые фреймы и элементы привязки
При активизации ссылки выполняется загрузка страницы в определенный фрейм, который называется целевым. Целевому фрейму нужно присвоить уникальное имя с помощью атрибута name тега <FRAME>.

Представление гиперссылок для страниц, использующих фреймы, также требует обязательного использования атрибута target:

<А href="URL"

target=”значение”>

Текст или элемент IMG

</A>

Если вместо значения атрибута target подставить имя фрейма, заданное в качестве параметра атрибута name тега <FRAME>, при активизации ссылки целевой документ загружается в окне с указанным именем.

9.3 Базовый фрейм
Документ, на который указывает ссылка, загружается в целевой фрейм. Этот фрейм определяется атрибутом target. Для того, чтобы все документы, соответствующие ссылкам, загружались в один и тот же фрейм, можно воспользоваться элементом <BASE>.

Фрейм, в который производится загрузка по гиперссылкам, называется базовым фреймом. Он задается значением атрибута target в одиночном теге <BASE>. То есть, задание базового фрейма позволяет только один раз в документе указать конкретный фрейм загрузки ссылок, а не записывать его в каждом элементе привязки.

9.4 Плавающие фреймы
Используются для размещения в обычном HTML-документе (в пределах элемента <BODY>) можно с помощью элемента IFRAME. Фреймы, создаваемые этими элементами, называются плавающими. Задание плавающего фрейма аналогично вставке обычного рисунка.

Формат задания плавающего фрейма:

<IFRAMEname=”значение”

src=”URL”

width=”значение”

height=”значение”

align=”значение”

marginwidth=”значение”

marginheight=”значение”

frameborder=”значение”

scrolling=”значение”>

</IFRAME>

В отличие от обычных фреймов, размеры плавающего фрейма не могут быть изменены пользователем.

Атрибуты тега:

name - задает имя целевого фрейма;

src - определяет адрес загружаемого файла;

width - определяет ширину плавающего фрейма;

height - определяет высоту плавающего фрейма;

align - устанавливает выравнивание фрейма относительно окна броузера;

marginwidth, marginheight - определяют размеры свободных полей между рамкой фрейма;

frameborder - устанавливает вывод рамки фрейма;

scrolling - определяет наличие полосы прокрутки.

Пример 1. Компоновка страницы, используя фреймы.

Файл frame1. html

<HTML>

<HEAD>

<TITLE>Первый вариант компоновки</TITLE>

</HEAD>

</FRAMESET>

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

</NOFRAMES>

</FRAMESET>

</HTML>

Файл page1. html

<HTML>

<BODY>

Заголовок страницы. Файл page1. html

</BODY>

</HTML>

Файл page2. html

<HTML>

<BODY>

Меню<BR>

<A href="page3. html" target="contents">Пункт 1</A><BR>

<A href="page5. html" target="contents">Пункт 2</A><BR>

<A href="page6. html" target="contents">Пункт 3</A><BR>

</BODY>

</HTML>

Файл page3. html

<HTML>

<BODY>

Пункт меню 1. Файл page3. html

</BODY>

</HTML>

Файл page4. html

<HTML>

<BODY>

Подвал страницы. Файл page4. html

</BODY>

</HTML>

Файл page5. html

<HTML>

<BODY>

Пункт меню 2. Файл page5. html

</BODY>

</HTML>

Файл page6. html

<HTML>

<BODY>

Пункт меню 3. Файл page6. html

</BODY>

</HTML>

Пример 2. Компоновка страницы, используя базовый фрейм.

Файл frame2. html

<HTML>

<HEAD>

<TITLE>Второй вариант компоновки</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Файл page2. html

<HTML>

<BODY>

Меню

<A href="page3. html">Пункт 1</A>

<A href="page5. html">Пункт 2</A>

<A href="page6. html">Пункт 3</A>

</BODY>

</HTML>

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

Недостатки фреймовой структуры документа.

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

Во-вторых, фреймы распознаются не всеми браузерами.

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

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

Поэтому использовать фреймы лучше всего только тогда, когда это действительно необходимо, например, при создании web-чата или интерактивной доски объявлений. Во всех остальных случаях от их применения лучше отказаться.

10. Формы
10.1 Формат задания формы
Формой называется объединение логически связанных элементов управления в документе. Формы являются основным средством для ввода и обработки данных.

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

Формат задания формы:

<FORM name="имя_формы"

action="URL"

method="метод_передачи_данных"

enctype="тип_кодировки"

target="значение">

Содержание формы

</FORM>

В качестве параметра атрибута action в кавычках указывается строка вызова скрипта, который использует данная форма (при нажатии кнопки Submit), например, "http: // www. myserver. by/имя_сцена-рия. php". Если в качестве значения атрибута action указать обращение к электронной почте, например,

action=”mailto: ivanov@gsu. unibel. by”

браузер автоматически отправит результаты, введенные в форму, по указанному адресу. Для корректной интерпретации данных используется параметр enctype=”text/plain”

Если же атрибут action отсутствует, то в качестве значения action подставляется URL самого документа, т.е. после отправки формы текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Значение атрибута method устанавливает метод передачи данных из формы на сервер: "GET" с помощью стандартного интерфейса HTTP или "POST" - по каналам электронной почты.

При задании значения "GET" передача данных происходит в один этап адресной строкой. Пары "имя=значение" присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (&). Метод GET используется для передачи данных с небольших форм с короткими полями.

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

Атрибут enctype устанавливает тип для данных, отправляемых вместе с формой. Обычно не требуется определять значения параметра enctype, однако если используется поле для отправки файла (INPUT type=file), то следует задать параметр enctype =”multipart/form-data”.

Атрибут target определяет окно, в которое будет загружаться итоговая web-страница. Значения этого атрибута такие же, как и при задании фреймовой структуры.

Содержание формы описывается тегом <INPUT>, запись которого в общем виде следующая:

<INPUT type="тип_элемента"

nаme="имя"

value="строка"

checked

size="целое_число"

maxlength="целое_число"

align="значение"

scr="URL"

tabindex="значение">

Атрибуты тега INPUT:

type задает тип элемента формы;

name задает уникальное имя для каждого элемента формы;

value указывает первоначальное значение текущего поля;

checked устанавливает выделенный объект из нескольких в случае, если значением атрибута type является radio или checkbox;

size определяет размер текстового поля в символах;

maxlength определяет максимально возможную длину текстового поля в символах для полей ввода текста;

align определяет положение элементов формы на web-странице;

src используется совместно с атрибутом type=image и задает URL нужного изображения;

tabindex позволяет установить порядок перемещения фокуса по элементам формы при нажатии клавиши Tab.

10.2 Элементы формы
На рис.10.1 представлены основные элементы формы.

Рис.10.1 Основные элементы формы

Однострочное текстовое поле. Оно называется полем ввода или полем редактирования и предназначено для ввода пользователем строки текста. Формат записи:

<INPUT type="text"

nаme="имя_поля"

value="начальный текст, содержащийся в поле"

size="ширина поля"

maxlength="максимальное количество вводимых символов">

Пример:

<INPUT type=text

size=40

name=user_name

value=”Введите ваше имя”>

Поле для ввода пароля. Это обычное текстовое поле, вводимый текст в котором отображается звездочками. Формат задания:

<INPUT type=password

nаme="имя_поля"

value="начальный текст, содержащийся в поле"

size="ширина поля"

maxlength="максимальное количество вводимых символов">

Скрытые поля. Это поля, которые не отображаются на странице и встраиваются в HTML-файл, когда необходимо передать серверу техническую информацию. Скрытые поля служат доступной альтернативой файлам cookies - специальным файлам, в которых сохраняются индивидуальные настройки пользователя и позволяющим, например, восстановить последнее состояние формы при повторном посещении пользователем содержащей эту форму страницы. Формат задания:

<INPUT type=hidden

nаme="имя_поля"

value="текст, содержащийся в поле">

Пример:

<INPUT type=hidden

name="form1"

value="c3576-236-2113">

Многострочное текстовое поле. Используется для передачи текста большого размера. Формат задания:

<TEXTAREA name="имя элемента"

rows="целое число"

cols="целое число"

wrap=значение

disabled

readonly>

Текст, выводимый в текстовом поле по умолчанию

</TEXTAREA>

Атрибуты тега:

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

wrap управляет переносом слов и имеет следующие значения:

wrap=off - запрет автоматического переноса; при этом сохраняются переносы, определенные пользователем;

wrap=virtual - перенос слов при отображении броузером, а серверу введенные данные передаются одной строкой;

wrap=physical - сохраняется перенос слов как при отображении броузером, так и при передаче серверу.

disabled - блокирует доступ и изменение текстового поля. Поле отображается серым цветом, недоступно для активации пользователем, и не может получить фокус. Состояние этого поля можно изменять с помощью скриптов.

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

Пример:

<TEXTAREA name="message"

rows=25

cols=40>

Введите сюда текст сообщения

</TEXTAREA>

Поле выбора файлов. Генерирует на экране кнопку, при нажатии на которую на экране появляется Проводник Windows, позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя. Рядом с кнопкой отображается небольшое текстовое поле, куда автоматически заносится имя отсылаемого файла и путь к нему на локальном диске. Поле выбора файлов работает корректно лишь при методе пересылки Post и формате кодировки multipart/form-data. Формат задания:

Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11

© 2003-2013
Рефераты бесплатно, курсовые, рефераты биология, большая бибилиотека рефератов, дипломы, научные работы, рефераты право, рефераты, рефераты скачать, рефераты литература, курсовые работы, реферат, доклады, рефераты медицина, рефераты на тему, сочинения, реферат бесплатно, рефераты авиация, рефераты психология, рефераты математика, рефераты кулинария, рефераты логистика, рефераты анатомия, рефераты маркетинг, рефераты релиния, рефераты социология, рефераты менеджемент.