Создайте фоновый звук при загрузке файла.
Индивидуальное задание №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
Прямое включение стиля
ID
Идентификатор, по торому можно ссылаться на форму из языка написания сценариев и т.д.
Об обрабточиках событий (ONRESET и ONSUBMIT) можно подробно говорить на занятиях, посвященных JavaScript.
Элементы формы: TEXTAREA
Тэг <TEXTAREA> используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Область ввода начинается тэгом <TEXTAREA> и заканчивается тэгом </TEXTAREA>.
<TEXTAREA
ROWS= «число»
COLS= «число»
WRAP= «OFF | VIRTUAL | PHYSICAL»
ACCESSKEY= «символ»
ALIGN= «absbottom|absmiddle|baseline|
bottom|left|middle|right|texttop|top»
TABINDEX= «число»
DISABLED
READONLY
NAME= «имя»
TITLE= «текст подсказки»
LANG= «язык (ru, en, de, и т.д.)»
>
…..........
Текст, который будет показан изначально, по умолчанию
…..........
</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= «число»
MULTIPLE
SINGLE
ALIGN=»absbottom|absmiddle|baseline|bottom|left|middle|right|texttop|top»
ACCESSKEY=»символ»
TABINDEX=»число»
DISABLED
NAME= «имя»
TITLE= «текст подсказки»
LANG= «язык (ru, en, de, и т.д.)»
>
…..........
один или несколько элементов <OPTION>
…..........
</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|
radio|reset|submit|text|textarea|file”
SIZE=”число”
MAXLENGTH=”число”
SRC=”URL”
BORDER=”число”
CHECKED
VALUE=”значение”
ALIGN=”absbottom|absmiddle|baseline|bottom|left|middle|right|texttop|top”
ACCESSKEY=”символ”
TABINDEX=”число”
DISABLED
NAME=”имя”
TITLE=”текст подсказки”
>
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 …>