Создайте фоновый звук при загрузке файла.

Индивидуальное задание №1 «Моя личная web-страница»

Создать свою личную страничку с информацией о себе (по типу резюме):

ЗАГОЛОВОК
ФИО	ФОТО
Возраст (дата рождения)
Адрес, телефон, семья
Достижения в учебе, работе (список): Гг-гг – учился в школе… Гг-гг – окончил с золотой медалью и т.д.
Почему выбрал эту специальность, история поступления, один день из жизни студента…
Друзья, увлечения, отдых, Идеи, проекты, мечты…

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

Затем сделать ссылку на другой документ – Мое расписание.

Некоторые дизайны страниц представлены ниже:

Треугольный дизайн	Зимний дизайн
Дизайн: косые треугольники	Кислотный дизайн с отпечатками пальцев
Дизайн: телевизор	Дизайн: трехмерная проекция
Дизайн: вертикальные полоски	Дизайн: иллюминаторы

Часть II. Формы

Практически все современные WWW браузеры позволяют пользователю, заполнив специальную форму, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется WEB-браузером, создаются специальные экранные элементы GUI, такие, как поля ввода, кнопки подтвержденний (check-boxes), кнопки выбора альтернатив (radio-buttons), выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь, заполнив форму, нажимает кнопку «Подтверждение» (SUBMIT – специальный тип кнопки, который задается при описании документа), информация, введенная пользователем в форму, посылается WWW-серверу для обработки и передачи другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом. С помощью языка написания сценариев JavaScript (VBScript) можно проверить правильность заполнения формы до ее отправки серверу, обработать нажатие других (отличных от SUBMIT) кнопок и многие другие события.

Тэг FORM

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

<FORM

ACTION=”URL”
METHOD=”get | post”
NAME=”имя”
ENCTYPE=”application/x-www-form-urlencoded | multipart/form-data”
TARGET=”окно, по умолчанию _sefl”
TITLE=”текст подсказки”
LANG=”язык (ru, en, de, и т.д.)”
LANGUAGE=”JavaScript | Jscript | VBScript | VBS”
CLASS=”имя класса CSS”
STYLE=”непосредственный стиль”
ID=”идентификатор”
ONRESET=”обработчик события”
ONSUBMIT=”обработчик события”

>
…..........
Элементы формы и другие элементы HTML
…..........
</FORM>

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

Ни один из перечисленных параметров тэга FORM не является обязательным. Коротко о параметрах:

ACTION

Указывает URL, куда следует передать информацию, занесенную в форму. Обычно, это адрес CGI программы или e-mail, оформленный через mailto:. Однако достаточно часто здесь можно встретить и другие вещи, типа javascript:0, когда форма обрабатывается сценарием. Если ACTION не указан, то информация передается тому же документу, в котором находится форма.

METHOD

При использовании метода GET (по умолчанию), информация из формы добавляется в конец URL, который был указан в ACTION. Поскольку максимальная длина URL ограничена, этот метод стоит использовать только для простейших форм. Метод POST предпочтительнее, т.к. данный метод передает всю информацию о форме немедленно после обращения к указанному URL. CGI-программа получает данные из формы в стандартный поток ввода.

NAME

Задает имя формы для использовании в программах-сценарриях.

ENCTYPE

Всегда следует использовать значение по умолчанию (просто опускать этот параметр), кроме тех случаев, когда нужно передать файл от клиента к серверу (см. ниже).

TARGET

Также как и в тэге <A…>, указывает окно, в которое попадет вся выходная информация формы. По умолчанию – в то же окно, где и сама форма.

TITLE

Подсказка, которая будет появляться, когда мышка указывает на форму (MSIE 4.0+)

LANG

Язык – «ru» – русский, «de»-немецкий и т.д.

LANGUAGE

Язык, используемый для интерпретации элементов сценария для данной формы (таких как обработчики событий)

CLASS

Имя CSS – стиля

STYLE

Прямое включение стиля

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

Об обрабточиках событий (ONRESET и ONSUBMIT) можно подробно говорить на занятиях, посвященных JavaScript.

Элементы формы: TEXTAREA

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

<TEXTAREA

…..........
Текст, который будет показан изначально, по умолчанию
…..........
</TEXTAREA>

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

Параметры:

ROWS

Количество строк в поле

COLS

Количество столбцов в поле

WRAP

Разрывать ли длинные строки. OFF – не разрывать. VIRTUAL – разрывать на экране, но внутри, оставлять их целыми. PHYSICAL – честно разрывать.

ACCESSKEY

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

ALIGN

Задает выравнивание элемента относительно окружающего текста.

TABINDEX

Задает номер данного элемента в последовательности прохождения элементов формы с помощью клавиши Tab.

DISABLED

Поле не получает пользовательского ввода и ни на что не реагирует. Служит только для показа изначальной (по умолчанию) информации.

READONLY

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

Остальные параметры аналогичны соответствующим параметрам тэга FORM.

Вот пример использования тэга <TEXTAREA>. Слева HTML текст, а справа, то, что получается.

<TEXTAREA NAME=”addr” ROWS=6 COLS=32>Запорожская ГосударственнаяИнжнерная Академия.Кафедра ЭК. </TEXTAREA>

Обратите внимание, что внутри этого тэга, все переводы строк вызывают переводы строк и при выводе на экран.

Элементы формы: SELECT

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

<SELECT

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

SIZE

Количество элементов списка видимых на экране. Если этот параметр больше 1, то имеем дело со списком, иначе – с ниспадающим меню.

MULTIPLE

Если указано, то пользователь может выбирать несколько элементов списка одновременно.

SINGLE

Если указано, то пользователь не может выбирать несколько элементов списка одновременно. Если не указано ни SINGLE, ни MULTIPLE, подразумевается SINGLE.

Элемент <OPTION>,

упомянутый при описании синтаксиса, задает один элемент списка.

Его формат:

<OPTION

SELECTED
NAME= «имя»
TITLE= «текст подсказки»
>
текст
</OPTION>

Текст, стоящий между <OPTION …> и </OPTION>, будет показан пользователю как значение данного элемента списка.

Если указан параметр SELECTED, то этот элемент будет изначально «выбран». Остальные параметры используются крайне редко. Параметр VALUE задает значение для данного поля «по умолчанию». Это имеет смысл, если Вы собираетесь менять поля с помощью программ сценариев. Все остальные параметры уже были описаны ранее.

Примеры различных элементов SELECT.

<SELECT MULTIPLE NAME=group SIZE=4><OPTION> ATLON </OPTION><OPTION SELECTED> CELERON </OPTION><OPTION> DURON </OPTION><OPTION> Pentium III </OPTION><OPTION> Pentium IV </OPTION> </SELECT>
<SELECT NAME=group SIZE=4><OPTION> AT 386 </OPTION><OPTION> AT 486 </OPTION><OPTION> AT 586 </OPTION><OPTION SELECTED> Pentium PRO </OPTION><OPTION> Pentium II </OPTION> </SELECT>
<SELECT NAME=group><OPTION> LG</OPTION><OPTION> SAMSUNG </OPTION><OPTION> SIEMENS </OPTION><OPTION SELECTED> MOTOROLA </OPTION><OPTION> PHILIPS </OPTION> </SELECT>

Элементы формы: <INPUT>

Тэг <INPUT> используется для очень многих вещей в HTML. Что конкретно он означает, определяется его параметром TYPE.

<INPUT

TYPE=”button|checkbox|image|password|

TYPE

Определяет что собой представляет данный элемент. Возможны следующие значения:

BUTTON – кнопка. Имеет смысл только если Вы обрабатываете ее нажатие из программы сценария. Без программы сценария – вещь бесполезная.
CHECKBOX – элемент, который можно включить и выключить.	Checkbox
IMAGE – это не просто изображение. Оно работает как кнопка SUBMIT, т.е., если навести на изображение мышь и нажать кнопку, информация формы немедленно передается по адресу указанному в ACTION. При этом передаются и координаты того места, где была мышь.
PASSWORD – поле ввода пароля. Вводимые символы не отображаются.	Пароль
RADIO – радио-кнопка. Их обычно объединяют в группы (группа – несколько кнопок с одним и тем же NAME). Во включенном состоянии всегда находится только одна из кнопок группы.	Yes No
RESET – кнопка сброса. Очищает форму.
SUBMIT – кнопка, при нажатии которой информация из формы передается по адресу, указанному в ACTION для обработки.
TEXT – Простое поле для ввода одной строки текста.
FILE – дает возможность пользователю выбрать файл, находящийся на его локальном диске. В дальнейшем этот файл можно переслать на сервер.

SIZE

Задает размер видимого поля там, где это имеет смысл. Например, для полей типа TEXT, PASSWORD, FILE и т.п.

MAXLENGTH

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

SRC

Для типа IMAGE задает URL файла изображения.

BORDER

Для типа IMAGE задает размер бордюра вокруг изображения.

CHECKED

Для типов CHECKBOX и RADIO указывает, что данный элемент изначально «включен».

VALUE

Значение элемента. Обычно это текст на кнопке или изначальный текст в поле ввода.

ALIGN

Для типа IMAGE полностью аналогично ALIGN в тэге <IMG …>