WEB-технологии

Автор работы: Пользователь скрыл имя, 28 Января 2013 в 17:03, лекция

Описание

В 1962 г. Дж. Ликлайдером, руководителем исследовательского компьютерного проекта экспериментальной сети передачи пакетов в Управлении перспективных исследований и разработок Министерства обороны США (Defense Advanced Research Project Agency, DARPA), была опубликована серия заметок, в которых обсуждалась концепция "Галактической сети" ("Galactic Network"). "Галактическая сеть" представлялась как глобальная сеть взаимосвязанных компьютеров, позволяющая любому пользователю получить доступ к данным и программам на компьютерах, объединенных данной сетью. Можно сказать, что эта идея положила начало развитию сети Интернет.

Скачать (845.04 Кб) Сколько стоит заказать работу?

Работа состоит из 1 файл

Лекции_Web-тех.doc

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

Пример: Бегущая строка, заданная элементом
<MARQUEE height=10 behavior="scroll">СТРОКА</MARQUEE>

Элемент <APPLET>

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

CLASS
Этот атрибут указывает имя апплета.
SRC
Этот атрибут указывает URL каталога, в котором должен быть обнаружен откомпилированный апплет с символом / на конце. Ни в коем случае нельзя указывать само имя аплета т.к. оно названо атрибутом CLASS.
WIDTH
Этот атрибут указывает ширину области вывода апплета в пикселях.
HEIGHT
Этот атрибут указывает высоту области вывода апплета в пикселях.
ALIGN
Этот атрибут указывает режим выравнивания апплета относительно текста, принимает значения TOP, MIDDLE и BOTTOM.

Синтаксис: <APPLET class="имя.class" src="URL/" width="число" height="число" align="значение">
<PARAM NAME=имя параметра VALUE=его значение REF="адрес расположения объекта">

Лекция 10. HTML-4.0 (фреймы, формы)

1. Фреймы

Создание документа с помощью кадров

Использование <FRAME> позволяет помещать в окна одной страницы несколько отдельных страниц, произвольно менять их размеры и организовывать изменение содержимого одного окна после выполнения пользователем действий в другом окне. Это позволяет использовать их в качестве инструмента навигации. Тэги <FRAMESET> и </FRAMESET> в данном случае заменяют тэги <BODY> и </BODY> соответственно.

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

Пара <FRAMESET> и </FRAMESET>

Использование <FRAME>

Использование <IFRAME>

Примеры простейших макетов страниц с фреймами .

Пара <FRAMESET> и </FRAMESET>

Тэги <FRAMESET> и </FRAMESET> позволяют задать относительный и абсолютный размеры фреймов, <FRAMESET> может иметь атрибуты:

border
Атрибут задает толщину обрамления в пикселах для всех производных фреймов.
<FRAMESET border="число" >

cols
Атрибут задает количество и размер колонок в создаваемом наборе кадров в пикселах, процентах или *пропорционально другим кадрам. Значения ширины различных кадров перечисляются в кавычках и через запятую.
<FRAMESET cols="число, число* или % ">

rows
Атрибут задает количество и размер строк в создаваемом наборе кадров в пикселах, процентах или *пропорционально другим кадрам. Значения высоты различных кадров перечисляются в кавычках и через запятую.
<FRAMESET rows="число, число* или % ">

frameborder
Атрибут задает наличие или отсутствие обрамления у фреймов. Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
<FRAMESET frameborder="1 или 0" >

Использование <FRAME>

Элемент <FRAME> определяет содержимое заданных фреймов. Он может иметь атрибуты:

src
Атрибут задает документ, который должен быть отображен в фрейме.
<FRAME src="URL" >

frameborder
Атрибут задает наличие или отсутствие обрамления у фреймов. Может принимать значения Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
<FRAME frameborder="1 или 0 ">

marginheight
Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
<FRAME marginheight="число ">

marginwidth
Атрибут задает толщину правого и левого обрамления в пикселах.
<FRAME marginwidth="число ">

name
Атрибут задает любое имя фрейма, по которому можно будет обращаться к нему с помощью атрибута target в ссылках <A href>. Но существует четыре зарезервированных имени:

_blank
Имя открывает в новом окне содержимое указанного URL.

_parent
Имя открывает содержимое указанного URL в родительском, относительно текущего, фрейме.

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

_top
Имя отображает содержимое указанного URL в развёрнутом на всё окно фрейме.

noresize
Атрибут лишает пользователя возможности изменить размеры текущего и смежного фреймов с помощью мыши.
<FRAME noresize >

scrolling
Атрибут задает наличие у кадра полос прокрутки, принимает значения YES, NO и AUTO.
<FRAME scrolling="значение ">

Использование <IFRAME>.

Этот тэг позволяет вставить в тело BODY окно, в котором визуализируется другая страница, при этом тэг IFRAME, в отличие от тэга FRAME вставляется не между тэгамиFRAMESET и /FRAMESET, а между тэгами BODY и /BODY

src
Атрибут задает документ, который должен быть отображен в фрейме.
<IFRAME src="URL" >
.

frameborder
Атрибут задает наличие или отсутствие обрамления у фреймов. Может принимать значения Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
<IFRAME frameborder="1 или 0 ">

marginheight
Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
<IFRAME marginheight="число ">

marginwidth
Атрибут задает толщину правого и левого обрамления в пикселах.
<IFRAME marginwidth="число ">

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

align
Атрибут позволяет позиционировать кадр по отношению к тексту, принимает значения left, right, middle, top и bottom.
<IFRAME align="left" >

scrolling
Атрибут задает наличие у кадра полос прокрутки, принимает значения YES, NO и AUTO.
<FRAME scrolling="значение ">

width
Атрибут определяет ширину кадра в пикселях.
<IFRAME width="число ">

height
Атрибут определяет высоту кадра в пикселях.
<IFRAME height="число ">

Примеры простейших макетов страниц с фреймами.

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

cols=50%,50%
Деление области просмотра на равные, правую и левую, части.
Пример

cols=20%,80%
Деление области просмотра на неравные, правую и левую, части.
Пример

rows=100,20%,*
Деление области просмотра на три части: первой отведено 100 пикселей, второй - 20% доступного пространства, а третьей - все остальное.
Пример

cols=*,3*
Деление области просмотра на неравные, правую и левую, части. Правая часть в три раза шире левой.
Пример

cols=25%,75%
Деление области просмотра аналогично предыдущему примеру.
Пример

Пример исходного кода фреймов более сложной структуры.

<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=1 BORDER=2 ROWS=150,*>
<FRAME SCROLLING="YES" NORESIZE SRC="page1.html" NAME="1">
<FRAMESET FRAMEBORDER=1 BORDER=2 COLS=150,*>
<FRAME SCROLLING="YES" NORESIZE SRC="page2.html" NAME="2">
<FRAME SCROLLING="YES" NORESIZE SRC="page3.html" NAME="3">
</FRAMESET>
</FRAMESET>
</HTML>

Пример исходного кода фреймов c навигацией, тут при клике на ссылке в фрейме 2 меняется содержимое фрейма 3, в него загружается файл page1.html, при этом файл page2.htmlдолжен иметь следующий вид:

2. Формы

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <FORM></FORM>:

Элемент <FORM>.

Элемент <INPUT>.

Элемент <TEXTAREA>.

Элемент <SELECT>.

Элемент <OPTION>.

Элемент <OPTGROUP>.

Элемент <ISINDEX>.

Элемент <BUTTON>.

Элемент <LABEL>.

Элемент <FIELDSET>.

Элемент <LEGEND>.

Элемент <FORM>.

Элемент <FORM> является необходимым условием для всех форм. Он может иметь следующие атрибуты:

Method - Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколомPOST, который позволяет передавать большие объемы данных.

Action - Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.

Enctype - Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.

Синтаксис формы для сценария: <FORM method="get" или "post" action="URL сценария" ></FORM>
Синтаксис формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>

Подробнее:

Синтаксис:

<FORM action="mailto:имя@домен.ru?subject="Comment from Home Page" method="post" enctype="text/plain">
<br> Комментарии:<br>
<TEXTAREA type="text" NAME="комментарий" ROWS=5 COLS=50></TEXTAREA> <br>
Имя: <br>
<INPUT type="text" NAME="имя" SIZE="57"> <br>
E-mail: <br>
<INPUT type="text" name="e-mail" size="52" maxlength="360"> <br>
<INPUT type="reset" VALUE=Сброс >
<INPUT type=SUBMIT VALUE=Послать>
</FORM>

Пример:

Комментарии:

Имя:

E-mail:

Элемент <INPUT>.

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

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

maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.

size. Задаёт максимально допустимую длину поля в символах.

value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Shopping">
Пример:

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

maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.

size. Задаёт максимально допустимую длину поля в символах.

value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">
Пример:

HIDDEN
Еще один тип скрытого ввода информации. Позволяет пересылать сценариям информацию, которая не может быть изменена пользователем. Некоторые программы CGI используют скрытые поля для передачи информации из одной страницы в другую, например, имя или номер. Такой подход существенно облегчает работу пользователя, избавляя его от необходимости повторного ввода данных.
Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:
<INPUT type="HIDDEN" name="file" value="anyfile.html">

CHECKBOX
Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:

checked. Задаёт начальный статус флажка по умолчанию.

value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="checkbox" name="send_mail" value="yes" checked>
Пример:

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

Visa <INPUT type="radio" name="payment_type" value="visa">
Mastercard <INPUT type="radio" name="payment_type" value="mastercard">
American Express <INPUT type="radio" name="payment_type" value="AmEx" checked>

Visa Mastercard American Express

SUBMIT
Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе <FORM>. C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения.
Синтаксис:

Информация о работе WEB-технологии