2. Основные конструкции языка html. Оформление списков, вставка рисунков, видеороликов, звуковых файлов и гиперссылок в html- документ.

Основными компонентами HTML являются:

1. Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу типа создания абзаца или вставки изображения. Являются командами начала и конца элемента, могут быть, соответственно, открывающими и закрывающими

2. Атрибут (или аргумент). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.

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

Создание списков.

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

Создайте структуру Web-документа, напечатав основные тэги:

<html> <head> <title></title> </head> <body> </body> </html>

В качестве заголовка документа в тэге <title></title> введите: Чем мы занимаемся?:

<title>Чем мы занимаемся?</title>

Такой же заголовок для списка введите в теле документа между тэгами <body> и </body>, использовав для его отображения тэги <h2></h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:

<h2 align=center>Чем мы занимаемся?</h2>

Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся тэге <body>, например, так:

<body bgcolor=aqua text=navy>

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

Теперь вставим на страницу ненумерованный список с информацией о сфере деятельности нашего лицея. Ненумерованные списки создаются с помощью пары тэгов <ul></ul>, которые ограничивают список.

Между ними располагается столько элементов, начинающихся с тэга <li>, сколько элементов в списке.

Вставьте пустую строку под строкой с кодом <h2 align=center>Чем мы занимаемся?</h2> и введите в теле документа следующий код:

<ul> <li>Изучением фундаментальных курсов физико-математических дисциплин. <li>Изучением курсов дисциплин, составляющих основу современной теоретической и прикладной экономики. <li>Изучением цикла гуманитарных дисциплин. <li>Изучением сценического искусства. </ul>

Обратите внимание: тэг <li> может использоваться как одиночный, т.е. без парного, закрывающего тэга </li>.

Полный HTML-код документа должен иметь следующий вид:

<html> <head> <title>Чем мы занимаемся?</title> </head> <body bgcolor=aqua text=navy> <h2 align=center>Чем мы занимаемся?</h2> <ul> <li>Изучением фундаментальных курсов физико-математических дисциплин. <li>Изучение курсов дисциплин, составляющих основу современной теоретической и прикладной экономики. <li>Изучением цикла гуманитарных дисциплин. <li>Изучением сценического искусства. </ul> </body>

</html>

Когда ввод кода будет закончен, сохраните документ в папке Web под именем spisok.html.

Воспользовавшись командой Открыть меню Файл в браузере Internet Explorer или командой Открыть страницу меню Файл в браузере Netscape Communicator, откройте файл spisok.html из папки Web.

Вы увидите, что каждый элемент ненумерованного списка выделяется специальным маркером.

В нумерованном списке каждый элемент будет отмечаться его порядковым номером. Для создания нумерованных списков используются тэги <оl></оl>, между которыми помещаются элементы <li>.

Вставка рисунков

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

Графические изображения, которые вы вставляете в свои Web-документы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.

Вставим на первую страницу нашего сайта рисунок МИР.JPG, который обычно находится в папке Windows, т.е. той папке, в которой установлена операционная система Windows. Прежде всего, этот файл следует скопировать в папку Web, которую мы создали для хранения файлов сайта.

Скопируйте файл МИР.JPG или любой другой файл с расширением .JPG или .GIF из папки Windows в папку Web.

Для вставки изображения в Web-документ используется одиночный тэг <img> с атрибутом src, значение которого соответствует имени вставляемого файла или его адресу в Интернете. С помощью необязательного атрибута <border> можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку толщиной 1 пиксел. Таким образом, тэг, вставляющий рисунок, должен выглядеть следующим образом:

<img src=МИР.JPG border=1>

Вставим его после заголовка Добро пожаловать на страничку лицея № 1548!

Операционная система Windows не различает регистр букв в названиях имен файлов, но операционные системы семейства Unix различают его, поэтому следует тщательно следить за тем, чтобы имя файла в тэге указывалось с соблюдением регистра. Начинающие Web-дизайнеры часто недоумевают: почему рисунок был виден на странице при тестировании на локальном компьютере и не появляется при загрузке страниц с удаленного сервера. А все дело в том, что они указали Мир.jpg, а на диске хранится МИР.JPG.

Вставьте пустую строку после элемента <h1 align=center>Добро пожаловать на страничку лицея № 1548!</h1> и введите в ней тэг <img src=МИР.JPG border=1> для включения изображения в документ.

Чтобы выровнять рисунок по центру, следует, воспользовавшись тэгами <center></center>, записать строку кода HTML, вставляющего рисунок, следующим образом:

<center><img src=МИР.JPG border=1</center>

Ограничим размер рисунка по ширине 300 пикселами, а по высоте – 400 пикселами:

<center><img src= МИР.JPG border=1 Widht=300 height=400></center>

Тег <video>

Описание

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. 

Синтаксис

<video>

<source src="URL">

</video>

Атрибуты

autoplay

Видео начинает воспроизводиться автоматически после загрузки страницы.

controls

Добавляет панель управления к видеоролику.

height

Задает высоту области для воспроизведения видеоролика.

loop

Повторяет воспроизведение видео с начала после его завершения.

poster

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

preload

Используется для загрузки видео вместе с загрузкой веб-страницы.

src

Указывает путь к воспроизводимому видеоролику.

width

Задает ширину области для воспроизведения видеоролика.

Закрывающий тег

Обязателен.

Пример

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>video</title>

</head>

<body>

<video width="400" height="300" controls="controls" poster="video/duel.jpg">

<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>

<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>

Тег video не поддерживается вашим браузером.

<a href="video/duel.mp4">Скачайте видео</a>.

</video>

</body>

</html>

Вставка анимации

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

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

В настоящее время существует несколько технологий создания анимации для WWW: анимационный (animated) GIF, Flash, Java и JavaScript.

Из этих технологий анимационный GIF является, пожалуй, самым простым в создании, и практически любой современный браузер может его показать. Формат GIFпозволяет размещать в одном файле несколько кадров или фреймов (frames) с изображениями для их последовательного вывода на экран. В отличие от обычного фильма, где длительность анимации определяется скоростью воспроизведения, для каждого кадра GIF-анимации может быть задана длительность его показа на экране, а для всей анимации может быть указано количество повторений. Кроме того, в отличие от обычного фильма, изображения, содержащиеся в кадрах GIF-анимации, не обязательно должны быть одного размера. Для изображения каждого кадра или слоя анимации вы можете установить индивидуальный размер и расположить его по своему усмотрению, независимо от других слоев.

Вставка гипертекстовых ссылок

Аббревиатура HTML означает «Язык разметки гипертекста». Что же такое гипертекст?

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

Для задания перехода по гиперссылке в языке HTML используются тэги <а></а> с атрибутом href, значением которого является адрес перехода. В

качестве адреса может использоваться имя файла другого документа или URL-адрес.

Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес, который может быть представлен или в числовом виде, например, 204.146.46.133, или определенным сочетанием символов, например, www.microsoft.com. Поскольку каждый компьютер имеет свою уникальную структуру каталогов и файлов, то и каждая страница Web также имеет уникальный адрес, называемый URL (Uniform Resource Locator — Унифицированный указатель ресурсов). Как видно из названия, URL может указывать не только на страницы Web, но также и на другие ресурсы Интернета, например, FTP (File Transfer Protocol - Протокол передачи файлов) - хранилища файлов. В самом общем виде URL включает в себя указатель на протокол, который применяется для доступа к ресурсу - http, ftp и др. — и символьный адрес компьютера в сочетании с именем конкретного файла в структуре каталогов этого компьютера. Например, URL-адрес http://www.chat.ru/user/faq.html состоит из указателя на протокол http, который применяется для доступа к Web, имени компьютера www.chat.ru и имени файла-документа faq.html, который находится в каталоге user.

Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. Однако вы можете заметить, что во многих URL-адресах отсутствует имя файла, например, http://www.microsoft.com. Тем не менее, в окне браузера все же появляется конкретная страница. Дело в том, что администраторы Web-серверов могут указать на своих узлах некоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явно не задано. Обычно эти файлы имеют имена index.html или index.htm.

Посмотрим, как создать переход по ссылке с конца текущего документа spisok.html на первую страницу нашего сайта, т.е. к файлу licey1548.html. Чтобы сообщить посетителю сайта о возможности вернуться к первой странице, необходимо предусмотреть между открывающим <а> и закрывающим </а> тэгами соответствующий текст, например:

<а href="licey1548.html">Ha первую страницу</а>

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

Чтобы ссылка На первую страницу была центрирована, следует ограничить элемент <а>...</а> тэгами <center> и </center>.

Вставьте в файле spisok.html пустую строку перед закрывающим тэгом </body> и введите в ней следующий код:

<center><a href="licey1548.html">Ha первую страницу</а></сеnter>

Теперь создадим гиперссылку для перехода с первой страницы – licey1548.html - на вторую - spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент о нашей деятельности, так как список на второй странице раскрывает содержание именно этого фрагмента текста. Поэтому нам нужно в файле licey1548.html поместить открывающий тэг <а> с атрибутом href="spisok.html" перед фрагментом текста о нашей деятельности, а закрывающий тэг </а> - после него.

Для этого:

Откройте в программе Блокнот файл licey1548.html.

Отредактируйте этот файл, вставив тэг <а href="spisok.html"> перед текстом о нашей деятельности, а закрывающий тэг </а> - после него. Код HTML в файле licey1548.html должен принять следующий вид:

<html> <head> <title>Лицей № 1548</title> </head> <body bgcolor=blue text=yellow> <h1 align=center> Добро пожаловать на страничку лицея № 1548!</h1> <center><img src=МИР.JPG border=1><a></center> <p style="font-weight: bold; font-style: italic; font-size: 150%; text-align: сеnter">Здесь Вы узнаете <а href="spisok.html">о нашей деятельности</a>, о наших интересах иувлечениях, о наших успехах и достижениях</р> </body> </html>

Очень вероятно, что когда вы просмотрите результат в браузере, вы обнаружите, что ссылка о нашей деятельности видна очень плохо или вообще не видна. Это связано с тем, что цвет, которым браузер отображает непросмотренные ссылки, совпадает с цветом фона вашего документа. В таком случае цвет ссылок следует изменить, воспользовавшись атрибутами link и vlink тэга <body>. Атрибут link определяет цвет непросмотренной ссылки, а vlink - просмотренной. Еще один атрибут - alink определяет цвет ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.

Если вы устанавливаете какой-либо из атрибутов: bgcolor, text, link, vlink, alink - то устанавливайте их все. Иначе, например, установленный вами фоновый цвет может совпасть с цветом текста, установленным пользователем в браузере.

Установим для непросмотренной ссылки белый цвет (white), для просмотренной - светло-зеленый (lime), а для ссылки в момент щелчка мышью - красный (red), добавив в тэг <body> атрибуты link=white, vlink=lime, alink=red так, чтобы этот тэг имел следующий вид:

<body bgcolor=blue text=yellow link=white, vlink=lime, alink=red>

Вставить переход в документе можно не только с текстовой ссылки, но также и с рисунка. Посмотрим, как вставить переход с рисунка на вторую страницу.

Для создания такой ссылки достаточно в файле licey1548.html вставить открывающий тэг <а href="spisok.html"> перед тэгом <img src=МИР.JPG border=1> и закрывающий тэг </а> после него.

Отредактируйте файл licey1548.html так, чтобы окончательный HTML-код документа имел следующий вид:

<html> <head> <title>Лицей № 1548</title> </head> <body bgcolor=blue text=yellow link=white vlink=lime, alink=red> <body bgcolor=blue text=yellow> <h1 align=center>Добро пожаловать на страничку лицея № 1548!</h1> <center><img src=МИР.JPG border=1><a></center> <p style="font-weight: bold; font-style: italic; font-size: 150%; text-align: сеnter">Здесь Вы узнаете <а href="spisok.html">о нашей деятельности</a>, о н

аших интересах иувлечениях, о наших успехах и достижениях</р> </body> </html>

Создавая ссылки на страницы нашего сайта, мы использовали в качестве адреса имя файла. При таком указании адреса браузер всегда ищет файл в текущем каталоге. Если бы нужный файл - spisok.html - находился, предположим, в подкаталоге Doc текущего каталога, то в адресе необходимо было бы указать путь к нему от текущего каталога: <а href="Doc\spisok.html">. Такая ссылка, в которой адрес указывается относительно текущего каталога на том же компьютере, называется относительной.

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

Вставка аудио

Атрибуты тега audio autoplay- файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound) controls - отобразить панель управления плеера в браузере loop - проигрывает файл заново после его окончания preload - загрузка аудио файла произойдёт вместе с загрузкой страницы src - путь к аудио файлу (mp3 или ogg) Пример кода с тегом audio

<!DOCTYPE html><br style="margin: 0px; padding: 0px;">

<html><br style="margin: 0px; padding: 0px;">

<head><br style="margin: 0px; padding: 0px;">

<meta charset="utf-8"><br style="margin: 0px; padding: 0px;">

<title>Тег audio</title><br style="margin: 0px; padding: 0px;">

</head><br style="margin: 0px; padding: 0px;">

<body><br style="margin: 0px; padding: 0px;">

<p>Аудио в HTML 5</p><br style="margin: 0px; padding: 0px;">

<audio controls><br style="margin: 0px; padding: 0px;">

<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis" controls="controls"><br style="margin: 0px; padding: 0px;">

<source src="audio/music.mp3" type="audio/mpeg"><br style="margin: 0px; padding: 0px;">

Тег audio не поддерживается вашим браузером. <br style="margin: 0px; padding: 0px;">

<a href="audio/music.mp3">Скачайте музыку</a>.<br style="margin: 0px; padding: 0px;">

</audio><br style="margin: 0px; padding: 0px;">

</body><br style="margin: 0px; padding: 0px;">

</html></br ></br ></br ></br ></br ></br ></br ></br ></br ></br ></br ></br ></br ></br ></br >

3. Таблицы и формы в html-документе. Примеры их оформления и использования.

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

Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

Пример 12.1. Создание таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Тег TABLE</title>

</head>

<body>

<table border="1" width="100%" cellpadding="5">

<tr>

<th>Ячейка 1</th>

<th>Ячейка 2</th>

</tr>

<tr>

<td>Ячейка 3</td>

<td>Ячейка 4</td>

</tr>

</table>

</body>

</html>

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию атрибутов тегов <table>, <tr> и <td>. Далее перечислены некоторые атрибуты тега <table>, которые применяются наиболее часто.

align

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right, текст начинает обтекать таблицу сбоку и снизу.

bgcolor

Устанавливает цвет фона таблицы.

border

Устанавливает толщину границы в пикселах вокруг таблицы. При наличии этого атрибута также отображаются границы между ячеек.

cellpadding

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

cellspacing

Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.

cols

Атрибут cols указывает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все ее содержимое будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.

rules

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>. Толщина границы указывается с помощью атрибута border.

width

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

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

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

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

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

ФОРМЫ

Html-форма – это специальное языковое средство, позволяющее пользователю вводить информацию на веб-странице и передавать ее серверу.

Механизм работы с такой информацией следующий:

1). Пользователь вводит информацию в соответствующие поля формы (варианты ввода могут быть разные).

2). Браузер интерпретирует эту информацию и представляет в определенном виде для передачи серверу по сети.

3). Сервер принимает информацию и осуществляет ее обработку с помощью специальной программы – скрипта, или GGI- сценария, написанного на языке Perl или C++ (Common Gate Way Interface). В качестве программы-обработчика также могут выступать программы, написанные на серверном языке PHP.

4). Результат обработки возвращается через Web-сервер на соответствующую веб-страницу назад к пользователю, если в этом заключается его запрос, либо исполняется иное действие. В частности, это может быть отправка заказа по адресу, предопределенному соответствующим html-доку-ментом (с php-вставками). В любом случае пользователь должен получить сообщение о реакции на свой запрос.

Таким образом, специфика работы с формами – это наличие обратной связи. Способы интерактивного общения могут быть разные, например интернет-форум и чат. Чат, в отличие от форума, – это многострочное сообщение через интернет в реальном времени.

Формы также используются для авторизации пользователя на сайтах. Форма описывается парным тегом <form> и не может содержать другие формы внутри себя. Имеет следующие основные параметры:

- action – адрес (URL) серверной программы-обработчика формы;

- method – способ отправки информации. По умолчанию имеет значе-ние get, однако рекомендуется использовать значение post. В последнем случае

информация будет конфидециальной, тогда как значение get делает ее открытой (передается как дополнение к URL, адресу отправки);

- name, для присвоения данной веб-форме. Этот параметр удобен для идентификации формы, но не явлется обязательным.

- enctype, для указания типа кодирования данных. По умолчанию дей-ствует универсальный тип urlencoded. Другие типы, например multipart, ипользуются редко.

На практике из основных параметров в форме отражают обычно только два из основных параметров: action и method.

Для описания форм помимо основных параметров используются и дополнительные параметры, которые оказывают влияние на их внешнее оформление. За это отвечают теги <input>, <textarea>, <select>.

Непарный тег <input> используется для создания поля ввода в виде текстовой строки, которая может иметь разновидности в зависимости от значения параметра type:

- Простая текстовая строка ( <input> type = “text”…>);

- Поле ввода пароля ( <input> type= “password”…>);

- Элемент для установки флажка выбора (<input> type= “checkbox”…>);

- Элемент для установки переключателя (<input> type= “radio”…>);

- Элемент в виде стандартной кнопки отправки содержимого формы (<input> type= “radio”…>);

- Элемент в виде нестандартной (графической) кнопки отправки

(<input> type= “image”…>);

- Элемент в виде кнопки сброса содержимого всех полей формы (<input> type= “reset”…>);

- Скрытое поле, отсылаемое неотображаемое значение, установленное параметром value (<input> type= “hidden”…>).

Для тега input в отдельных случаях применяют параметры:

- name – название объекта (строки, кнопки и т.п.);

- value – отображение названия поля выбора, кнопки выбора, поля пере-ключателя, кнопки отправки, кнопки сброса;

- size – размер поля ввода (в символах);

- maxlength – предельное число вводимых символов ( по умолчанию нет ограничений);

- checked– фиксация флажка ( установка по умолчанию).

Тег <textarea> в отличие от тега <input> предоставляет возможность вводить многострочное поле в виде строк и столбцов, количество которых указывается с помощью атрибутов rows, числа строк текстового поля, и cols, числа столбцов, если они есть. Возможно использование атрибута name как оглавления внутри текстового поля. Обычно тег <textarea> применяют для ввода комментария.

В случаях, когда в форму нужно вводить большое число данных, применение тега <input> приводит к неоптимальному размещению текста на веб-странице. Оформление формы в виде списка, с использованием парного тега <select> – более компактно.

Он имеет параметры:

name – имя для идентификации списка обработчиком;

size – количество видимых элементов списка;

multiple – разрешает выбор сразу нескольких позиций в списке, с указанием их числа.

Элементы списка оформляют с использованием непарного тега <option> с обязательным параметром value, который необходим для обработки результатов выбора обработчиком. Параметр selected определяет выбор из списка по умолчанию. Если параметр size не задан, то вместо многострочного меню будет виден только первый элемент списка. Для списка всегда действует вертикальная прокрутка.

Пример1. Формат обычного списка.

<select name = “…” size = “5”> <option value = “…” selected > элемент 1 <option value = “…” > элемент 2 ………………………………….. элемент i

<option value = “…” > элемент 5 </selected >

Пример2. Формат списка с множественным выбором.

<select name = “…” size = “5” multiple =2 > <option value = “…” selected > элемент 1 <option value = “…” > элемент 2 … элемент 5 <option value = “…” > элемент 5 </selected >