5.7.5. Средства языка html
Хотя многие теомины уже были опмсаны ранеее, рассмотрим основные термины еще раз применительно к языку HTML.
Элемент (element) – конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой ряд элементов. Одна из идей гипертекста – возможность вложения различных элементов.
Тег (tag) – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег ещё с косой чертой (< … />).
Атрибут (atrubute) – параметр или свойства элемента. Это, по сути, переменная, которой может придаваться определенное значение в кавычках. Атрибуты расположены внутри начального тега и отделяются они пробелами.
Гиперссылка (hyperlink)- фрагмент гипертекста, который указывает на другой файл или объект.
Фрейм (frame) – этот термин имеет два значения. Первое – область документа со своими полосами прокрутки. Второе – один кадр сложного анимированного изображения.
HTML – файл или HTML-страница-документ, созданный в виде гипертекста на основе языка HTML.
Апплет (applet) – программа, передаваемая на компьютер клиента в виде отдельно файла и запускаемая при просмотре Web-страниц.
Скрипт или Сценарий (script) – программа лежащая в HTML-страницы, расширяя её возможность при помощи средств мультимедиа.
Расширение (extension) – элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.
CGI (Common Gateway Interface) – общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц. К таким программам относят виртуальные магазины, некоторые чаты и т.д.
Программный код или просто код – аналог понятия «текста программы».
Код HTML – гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
World Wide Web, WWW или просто Web – Всемирная паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. HTML является основным языком для создания документов в WWW. Изучая его, мы, фактически, изучаем часть этой системы, хотя область применения языка намного шире.
Web-страница – документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.
Сайт (site) – набор Web-страниц, принадлежащих одному владельцу.
Броузер (browser) – программа для просмотра Web-страниц.
Загрузка (downloading) – копирование файлов с сервера на компьютер-клиент.
URL (Uniform Resource Locator) или универсальный указатель ресурса – адрес некоторого объекта в Интернете. Типичный URL для WWW имеет вид: http://www.название.домен/имя файла. Здесь название – это часть адреса, который часто употребляется для обозначения владельца сайта, а домен — обозначение крупного «раздела» Интернета: страны, области деятельности и т. д. URL используются для того, чтобы указать конкретную Web-страницу или графический файл в гиперссылках, а также везде, где требуется однозначно определить месторасположение Web-страницы или файла.
Базовый URL – часть адреса, которая является общей для всех ссылок текущей Web-страницы.
Базовый цвет – каждый цветовой оттенок на экране монитора получается соединением трех базовых цветов: красного, зеленого и синего.
Цветовой канал – интенсивность красного, синего, зеленого цветов. Цвет пикселей определяется этой величиной.
Первая версия HTML была разработана в 1990-х годах для браузера Mosaic.
В 1997 году появилась версия 4.0, называемая Dinamik HTML. Новаторство этой версии заключается в возможности делать Web-страницы интерактивными. Появились такие понятия, как JavaScript, Java, VisualBasic Script. До сих пор практически нет определенного стандарта поддержки сценариев, поэтому, сколько браузеров, столько и методов поддержки скриптов. Результатом использования сценариев стали пометки, в каких браузерах лучше просматривать страницы.
Большую популярность у разработчиков страниц получила технология FLASH. С её помощью можно создавать целые сайты, клипы, изображения, мультфильмы и даже игры и многое другое. Превосходства очевидны: маленький размер готового файла, интерактивность, простота в использовании, а главное, красота готового проекта.
Посколько при разработке Web-страницы в лабораторном практикуме предполагается использовать VS .NET, то при создании новой страницы необходимо в открывшемся меню выполнить команду Создать элемента основногоменю Fale, а затем в окне Создать файл указать шаблон HTML Page и нажать кнопку Выполнить.
Так как при разработке Web-страницы в лабораторном практикуме предполагается использовать VS .NET, то для создания нового сайта необходимо выполнить команду Создать Web-сайт... элемента главного меню Файл. В открывшемся окне New Web-Cite указать шаблон Empty Web-Cite и его расположения, а затем нажать кнопку <OK>. В результате этих действий откроется пустой Web-Cite. Выполнить команду Add New Item … (Добавить новый элемент…) элемента главного меню Web-Cite. В результате откроется окно Add New Item (Добавит новый элемент) – путь расположения Web-сайта, в котором необходимо указать шаблон HTML-страница и имя этой страницы, например, index.htm.
В результате откроется окно Web-страницы с именем index.htm (рис. 5.7-5-1), в котором можно увидеть Web-страницы.
Аналогичным образом создаются и другие htm-файлы, а также файлы таблиц стилей (css-файлы) и др.
В результате вышеописанных действий откроется пустое окно Конструктор Web-страницы с именем HTMLPage1.htm (рис. 5.7.5-1).
Рис. 5.7.5-1
Если перейти в окно Исходный код, можно увидеть заготовку Web-страницы (рис. 5.7.5-2).
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>
Рис. 5.7.5-2
В результате Обозреватель решений будет иметь вид как на рис. 5.7.5-3.
Рис. 5.7.5-3
Почти все теги имеют конечный тег. Если не был поставлен конечный тег, то его действие будет распространяться от начала постановки до конца документа. Это очень распространенная ошибка.
Если просмотреть несколько страниц, то можно заметить, что они имеют схожие элементы.
Таким образом, HTML – язык гипертекстовой разметки, который используется для создания Web-страниц, являющимися HTML-документами. Он состоит из специальных символов, так называемых тэгов, с помощью которых мы управляем содержимым документа.
Все тэги в HTML выделены ограничивающими символами "<" и ">", что позволяет
легко узнавать их в
процессе редактирования готового
документа. А закрывающий тэг начинается
со знака "/". В
процессе создания документа часто
возникает необходимость делать заметки
– комментарии, для того, что бы впоследствии
свободнее ориентироваться в
HTML-пространстве. Для этого, комментарии
в документе необходимо заключить в
знаки "<!--"
и "-->".
Например:
<!--saved from url=(0063)http://www.t1.com/us.html -->
У тэгов могут быть параметры. У одних их очень много, а у других нет вообще. Параметры в свою очередь могут иметь значения. Если значение не задано, параметр примет значение по умолчанию. Короче, если не заданы значения, браузер задаст его сам. Например:
<body bgcolor="#335533">,
где body – тэг, bgColor bgcolor – параметр, ="#335533 – значение.
HTML-документ, отвечающий спецификации HTML4.1 начинается со строки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Эта строка говорит браузеру о том, что документ соответствует международной спецификации версии 4.1. Затем мы должны открыть документ с помощью элемента <HTML>. Запомним, что любой HTML-документ всегда открывается с помощью тэга <HTML> и закрывается с помощью тэга </HTML>. Между ними расположен сам документ, состоящий из двух разделов: HEAD и BODY (заголовка и тела).
Нельзя не сказать пару слов о таблицах стилей CSS (cascading style sheets), представляющих собой инструменты присоединения стилей к HTML-документам. С их помощью мы можем управлять шрифтом и цветом текста, распределением материала, и т.д. То есть задаются для всего документа определённые правила отображения на экране монитора тех или иных элементов данного HTML-документа. Допустим, нам нужно все заголовки первого уровня отобразить белым цветом, а заголовки третьего уровня - красным. Всё это реализуют CSS. Например:
<style type="text/css">
h1 { color: white }
h3 { color: red }
</style>
Раздел документа HEAD
HEAD - раздел документа, определяющий его заголовок. Определяется элементом <HEAD>, внутри которого располагаются следующие тэги и элементы:
<TITLE>
<META>
<BASE>
<LINK>
<STYLE>
<SCRIPT>
В заголовке содержится техническая информация, которая не видна на экране, за исключением той, что описана внутри элемента <TITLE>. Она выводится в заголовок окна браузера. Как правило, мы не обращаем на неё никакого внимания. Однако всё, что содержится в разделе HEAD, имеет огромное значение для роботов поисковых систем - автоматических сборщиков информации. Поэтому, оттого насколько правильно и грамотно оформлен заголовок, напрямую зависит посещаемость вашего сайта (под заголовком подразумеваю весь раздел HEAD).
TITLE - элемент, который задаёт название вашей странице, отображаемое в заголовке окна браузера. Например:
<TITLE>Учебник по HTML4.1</TITLE>
META. Так как роботы поисковых машин существа очень примитивные, вам придётся это учитывать при разработке своего сайта. Для этой цели и существует тэг <META>, у которого есть три параметра:
HTTP-EQUIVE
name
content
HTTP-EQUIVE используется для передачи дополнительной информации, в частности, при указании кодировки. Например:
<meta http-equive="content-type" content="text/html; charset=windows-1251">
name задаёт определение тэга. Имеет множество значений, из которых самыми
популярными являются description и keywords.
content задаёт значение, определяющее содержание тэга <META>. Примеры:
<META name="description" content="Виртуальный учебник по HTML4.0">
<META name="keywords" content="HTML, учебник, интернет">.
Рекомендуется при составлении ключевых слов максимально продумать стратегию сайта.
BASE задаёт базовый адрес документа (URL), с помощью которого работают относительные ссылки в документе. Относительная ссылка – это ссылка, в которой указывается не полный URL-адрес документа, а лишь имя файла. Тэг <BASE> имеет один обязательный параметр href, который и задаёт URL-адрес. Например:
<base href="weoffer.html">
LINK – это тэг, который определяет взаимоотношения документов внутри сайта. Он представляет интерес исключительно для роботов поисковых систем. Имеет ряд параметров и массу значений к ним.
Параметры:
href - задаёт url-адрес другого документа
rel - определяет тип взаимоотношений с другими документами
type - задаёт тип таблицы стилей
STYLE - элемент, с помощью которого в документ вставляется таблица стилей CSS. Имеет параметр type, который задаёт тип вставляемой таблицы. Например:
<style type="text/css">
a { text-decoration : none }
</style>
SCRIPTE - элемент, который используется для внедрения JavaScript-сценариев в HTML-документ. Например:
<script>
<!-- операторы javascript //-->
</script>
Раздел документа BODY.
Тело документа определяется элементом <BODY>, внутри которого располагаются HTML-элементы и тэги, задающие свойства содержимого документа и отвечающие за то, что мы видим на экране монитора. Тэг <BODY> имеет ряд полезных параметров:
bgcolor - задаёт цвет фона документа
background - задаёт url-адрес файла, который будет использоваться в качестве фона.
link - задаёт цвет не просмотренной ссылки
alink - задаёт цвет активной ссылки
vlink - задаёт цвет просмотренной ссылки
Если вы уже работали с каким-нибудь графическим приложением, вам должна быть знакома цветовая система RGB (Red, Green, Blue), т.е. ( Красный, Зелёный, Синий ). Каждый цвет в системе RGB имеет своё собственное шестнадцатеричное значение в виде цифр и латинских букв, а также название на английском языке.
При определении цвета в HTML-документе можно использовать как название, так и шестнадцатеричное значение. Рассмотрим пример простого HTML-документа:
<head>
<meta content="text/html; charset=windows12-51 ">
<meta name="description" content="виртуальный учебник по html4.0">
<meta name="keywords" content="html, учебник, интернет">
<title>учебник по html4.0</title>
<style type="text/css">
a { text-decoration : none }
</style>
</head>
<body bgcolor="#ffa500" text="white">
<!--текст вашего документа-->
</body>
Гипертекстовые ссылки. Основным инструментом в сети интернет являются гиперссылки. Щёлкнув по ссылке, мы даём браузеру команду загрузить на наш компьютер нужный документ. Внешний вид ссылки зависит от вашей фантазии и дизайнерского замысла. Это может быть как текст, так и изображение, и даже части изображения. В HTML-документе ссылки задаются с помощью элемента <A>, который имеет параметры href и name.
Параметр href задаёт url-адрес документа? на который указывает ссылка. Например:
<A href="http://www.real.ru">главная</A>
где слово "главная" является ссылкой на сайт: www.real.ru.
Параметр name задаёт имя для части документа, на которую делается ссылка (внутренняя ссылка). В этом случае мы создаём что-то вроде метки, например:
<A name="first"> </A>
где А это ссылка на "помеченную" часть: <A href="#first"> </A>
Для облегчения просмотра больших документов, достаточно раскидать по нему несколько меток, не забыв создать соответствующие ссылки, и разместить их в начале страницы.
Форматирование текста. Рассмотрим элементы и тэги, участвующие в процессе форматирования текста HTML-документа. Они делятся на тэги логического и физического форматирования. Тэги логического форматирования определяют "характер" текстового фрагмента, который разные браузеры отображают по разному (по умолчанию). Тэги физического форматирования задают вид отображения выделенных участков текста в окне браузера.
Тэги логического форматирования:
<CODE> - используется для выделения текста в качестве программного кода. Текст внутри элемента браузерами обычно отображается моноширинным шрифтом. Например:
<code>$a1ref-> [o] = "q" </code>
<CITE> - используется для выделения текста в качестве цитаты. Текст внутри элемента браузерами обычно отображается курсивом. Например:
<cite>чем больше женщину мы любим, тем меньше нравимся мы ей.</cite>
<EM> - используется для смыслового выделения фрагмента, имеющего некоторую важность. Текст внутри элемента браузерами обычно отображается курсивом. Например:
<em>важный фрагмент</em>
<KBD> - используется для выделения фрагмента текста, в качестве вводимого с клавиатуры. Текст внутри элемента браузерами обычно отображается моноширинным шрифтом. Например, для того, что бы воспользоваться базой данных следует набрать
<kbd>exit</kbd>
<STRONG> - используется для выделения очень важных участков текста. Текст внутри элемента браузерами обычно отображается полужирным шрифтом. Например:
<strong>ну очень важный фрагмент</strong>
Тэги физического форматирования:
<I> - задаёт отображение текста курсивом. Например,
<i>курсивом </i>
<B> - задаёт отображение текста полужирным шрифтом. Например,
<b>полужирным шрифтом</b>
<U> - задаёт подчёркивание фрагмента текста. Например,
<u>подчёркнут</u>
<S> и <STRIKE> задают перечёркнутый текст. Например,
<s>перечёркнутый</s>
<TT> - задаёт текст моноширинным шрифтом. Например,
<tt>моноширинным шрифт</tt>
<SUP> - отображает текст со сдвигом вверх, иногда шрифтом меньшего размера: верхний индекс. Например,
<sup>tm</sup>
<SUB> - отображает текст со сдвигом вниз, иногда шрифтом меньшего размера: нижний индекс. Например,
<sub>log</sub>
<BIG> - задаёт фрагмент текста шрифтом большего размера. Например,
<big>большего размера</big>
<SMALL> - задаёт фрагмент текста шрифтом меньшего размера. Например,
<small>меньшего размера</small>
<BASEFONT> - задаёт основной цвет, размер и тип шрифта HTML-документа. Если в какой-нибудь части документа требуется изменить вид текста, используйте тэг <FONT>.
Тэг<BASEFONT> имеет три параметра: size, face, color. Например,
<basefont size=3 color="black" face="arial">
<FONT> - задаёт параметры шрифта для фрагмента текста, расположенного между начальным и конечным тэгами данного элемента. Имеет параметры: size, face, color. Параметром face следует задавать несколько схожих типов шрифта, т.к. на компьютере пользователя может не быть именно того шрифта, который вы указали. В этом случае текст будет отображён шрифтом по умолчанию, что может не отвечать вашим дизайнерским замыслам. Например,
<basefont size=3 color="black" face="arial">
Форматирование HTML-документа.
Рассмотрим такие элементы, как абзацы, заголовки, разделительные линии, принудительный перевод строки и всё, что имеет отношение к структурной разметке HTML-документа. P - элемент, с помощью которого текст в HTML-документе разбивается на абзацы. Имеет один параметр - align, возможные значения которого:
left - выравнивает абзац по левому краю
center - текст выравнивается по центру
right - выравнивает абзац по правому краю
justify - выравнивает текст абзаца по ширине
Абзац, заданный с помощью элемента <P>, отделяется от остального текста пустой строкой. Например:
<p align="left">
текст вашего абзаца
</p>
В данном примере текст абзаца будет выровнен по левой стороне.
BR – тэг принудительного перевода строки. Может иметь параметр clear, прекращающий обтекание изображения текстом. Возможные значения параметра clear : all, left и right. Например:
первая строка<br>вторая строка<br>третья строка<br>
Результат:
первая строка вторая строка третья строка
HR – этот тэг вставляет в текст HTML-документа горизонтальную распределительную линию. Имеет параметры:
width - задаёт ширину линии в пикселях или в процентах от ширины окнабраузера.
size - задаёт толщину линии в пикселях
align - задаёт горизонтальное выравнивание (left, center, right)
noshade - отменяет объёмность линии. (советую использовать всегда).
Заголовки в HTML-документе задаются элементами: H1, H2, H3, H4, H5, H6. Шесть уровней заголовков различаются между собой величиной шрифта. H1 - самый большой и самый "жирный" заголовок, а H6 - самый "тонкий" и маленький. Заголовки отделяются от остального текста пустой строкой сверху и снизу. Элемент может иметь параметр align, с помощью которого заголовок выравнивается по горизонтали (left, center, right). Например:
<h1 align="center">самый большой заголовок, выровненный по центру</h1>
CENTER - элемент, который выравнивает всё содержимое HTML-документа, расположенное между тегами <CENTER> и </CENTER>, посередине окна просмотра браузера. В основном используется для выравнивания таблиц. Например:
<center>
<table border="1">
<tr>
<td>первая ячейка</td><td>вторая ячейка</td>
</tr>
</table>
</center>
PRE - используется для вставки в HTML-документ отформатированного текста, который будет отображён браузером с сохранением всех пробелов моноширинным шрифтом. Например:
<pre>
отформатированный текст
</pre>
DIV - элемент, с помощью которого фрагмент HTML-документа выделяется в качестве блока или раздела. Может иметь параметр align, выравнивающий блок по горизонтали (left, center, right). Например:
<div>
текст блока
</div>
ADDRESS - элемент, который задаёт фрагмент текста в качестве почтового адреса. Браузеры такой текст обычно отображают курсивом. Например, наш адрес
<address>москва, ул.строителей, 15</address>
BLOCKQUOTE - элемент задаёт фрагмент текста в качестве цитаты. Текст, размеченный данным элементом на экране, отображается с отступом вправо. Например,
<blockquote>
текст блока
</blockquote>
Таблицы в HTML-документе.
У таблиц в HTML-документах есть два предназначения. Одно из них - представление данных в виде таблицы, другое - табличный дизайн. Кто бы вам ни говорил, что табличный дизайн является неправильным, используйте его всегда, когда посчитаете нужным. Я не занимался статистическими вычислениями, какой процент сайтов в сети имеет табличный каркас. Однако, открыв наугад пять корпоративных сайтов и просмотрев их "HTML-внутренности", я обнаружил, что все они использовали таблицы в качестве инструмента форматирования HTML-документа. Таблицу определяет элемент <TABLE>, внутри которого располагаются следующие элементы:
<CAPTION>
<TR>
<TD>
<TH>
TABLE - элемент, который создаёт таблицу на вашей странице. Внутри него располагаются остальные элементы, участвующие в формировании таблицы. <TABLE> имеет следующие параметры:
bgcolor - задаёт цвет фона всех ячеек таблицы.
background - задаёт URL-адрес изображения в качестве фона таблицы.
border - задаёт толщину рамки таблицы в пикселях. При значении border="0" и по умолчанию браузер не прорисовывает рамку.
width - задаёт ширину таблицы в пикселях или в процентах по отношению к окну браузера. По умолчанию браузер сам определит оптимальную ширину, в зависимости от содержимого таблицы.
height - задаёт высоту таблицы в пикселях или в процентах по отношению к окну браузера. По умолчанию браузер сам определит оптимальную высоту, в зависимости от содержимого таблицы.
align - выравнивает таблицу по горизонтали. Имеет значения: left, center, right. По умолчанию - left.
cellpadding - задаёт расстояние (отступ) между содержимым каждой ячейки таблицы и рамкой этой ячейки в пикселях.
cellspacing - задаёт толщину внутренних рамок таблицы (расстояние между соседними ячейками) в пикселях.
Например:
<table bgcolor="orange" border="1" cellspacing="0" cellpadding="5" width="300" >
<tr>
<td>первая ячейка</td><td>вторая ячейка</td>
</tr>
<tr>
<td>первая ячейка</td><td>вторая ячейка</td>
</tr>
</table>
-
первая ячейка
вторая ячейка
первая ячейка
вторая ячейка
CAPTION - элемент, который задаёт заголовок таблицы. Имеет параметр align, который выравнивает заголовок по вертикали: top - над таблицей, bottom - под таблицей. Например,
<caption>заголовок таблицы</caption>
TR определяет строку таблицы, которая может быть разбита на любое количество ячеек элементами <TD> или <TH>. Элемент <TR> имеет следующие параметры:
bgcolor - задаёт цвет фона всех ячеек в строке.
align - выравнивает содержимое всех ячеек в строке по горизонтали. Имеет значения: left, center, right.
valign - выравнивает содержимое всех ячеек в строке по вертикали. Имеет значения: top,middle,bottom.
TD – это элемент задаёт ячейку в строке. Имеет параметры:
bgcolor - задаёт цвет фона всех ячейки.
background - задаёт URL-адрес изображения в качестве фона данной ячейки.
align - выравнивает содержимое данной ячейки по горизонтали. Имеет значения: left, center, right.
valign - выравнивает содержимое данной ячейки по вертикали. Имеет значения: top,middle,bottom.
width - задаёт ширину ячейки в пикселях или в процентах по отношению к ширине таблицы.
height - задаёт высоту ячейки в пикселях или в процентах по отношению к высоте таблицы.
nowrap - блокирует автоматический перенос по словам в пределах данной ячейки.
owspan - задаёт объединение нескольких соседних ячеек в одну по вертикали.
colspan - задаёт объединение нескольких соседних ячеек в одну по горизонтали.
TH определяет ячейку в качестве заголовка. Имеет те же самые параметры, что и элемент <TD>. Например,
<table bgcolor="orange" border="1" cellspacing="0" cellpadding="5" width="300" >
<caption>таблица с объединением ячеек по вертикали</caption>
<tr>
<th rowspan="3">я большая ячейка!</th><td>а я маленькая</td>
</tr>
<tr>
<td>и я маленькая</td>
</tr>
<tr>
<td>и я тоже.</td>
</tr>
</table>
-
Таблица с объединением ячеек по вертикали
Я большая ячейка!
А я маленькая
и я маленькая
и я тоже.
Или
<table bgcolor="orange" border="1" cellspacing="0" cellpadding="5" width="300" >
<caption>таблица с объединением ячеек по горизонтали</caption>
<tr>
<th colspan="3">я большая ячейка!</th>
</tr>
<tr>
<td>а я маленькая</td><td>и я маленькая</td>
</tr>
<tr>
<td>и я маленькая.</td><td>и я маленькая</td>
</tr>
</table>
-
Таблица с объединением ячеек по горизонтали
Я большая ячейка!
А я маленькая
и я маленькая
и я маленькая
и я маленькая
Формы в HTML-документе.
Формы в HTML-документе предназначены для передачи данных на Web-сервер, где они обрабатываются CGI-программой, либо для пересылки информации по электронной почте. Формы HTML-документа можно сравнить со всевозможными бланками и анкетами в нашей обычной (не виртуальной) жизни: при приёме на работу, оплате счетов и т.д. В основном разработчики веб-сайтов используют формы для различных регистраций, опросов и запросов. В итоге, с помощью форм реализуется элементарный диалог между пользователем интернета и сервером. Формы создаются в HTML-документе при помощи следующих тэгов и элементов:
<FORM>
<TEXTAREA>
<INPUT>
<SELECT>
<OPTION>
FORM. Элемент, который собственно обозначает наличие формы в HTML-документе. Между его начальным и конечным тэгами содержатся все теги и элементы, участвующие в построение формы. Тэг<FORM> имеет следующие параметры:
action - единственный обязательный параметр. Задаёт URL-адрес электронной почты или CGI-программы, по которому отправляется содержимое формы.
method - задаёт способ отправки данных. Возможные значения: get (по умолчанию) и post.
name - присваивает форме имя. Используется при наличии нескольких форм.
enctype - задаёт способ кодировки содержимого формы. Возможные значения: application/x-www-form-urlencoded (по умолчанию) и multipart/form-data.
Например:
<form action="http://www.real.com/dr/cgi" method="post" ame="second">
</form>
TEXTAREA - создаёт область в виде прямоугольника для ввода нескольких строк текста. Имеет следующие параметры:
name - задаёт название области.
cols - задаёт ширину области в количестве печатных символов.
rows - задаёт высоту области в количестве строк.
Например,
<form action="http://www.real.com/cgi-bin/dr/cgi" method="post" name="first">
дополнительная информация:<br>
<textarea name="additional" cols="40" rows="5">
</textarea>
</form>
Начало формы
Дополнительная информация:
INPUT - используется для создания полей ввода информации, а также различных
кнопок и переключателей. Имеет следующие параметры:
name - задаёт полю или кнопке идентификационное имя.
type - задаёт тип поля (по умолчанию – text и может принимать следующие значения:
text - создаёт поле для ввода одной строки текста. Используется совместно с параметрами: maxlength - задаёт максимальное количество символов, вводимых в строку; size - задаёт ширину поля в символах; value - задаёт начальное значение поля, которое может изменить пользователь.
Например,
<input type= "text" name="t1" maxlength="40" size="20" value="фамилия">
Начало формы
Конец формы
password - создаёт поле для ввода пароля, в котором вводимая пользователем информация отображается в виде звёздочек. Используется совместно с параметрами: maxlength - задаёт максимальное количество символов, вводимых в строку; size - задаёт ширину поля в символах.
Например,
<input name="t2" type="password" maxlength="40" size="20">
Начало формы
Конец формы
file - создаёт поле для ввода имени файла, который пользователь может приобщить к данной форме.
Например,
<INPUT name="t3" type="file" maxlength="40" size="20">
Начало формы
Конец формы
hidden - задаёт поле, которое не отображается на экране монитора, но содержит информацию, которую не может изменить ни пользователь, ни браузер.
checkbox - создаёт поле для односложных ответов (да/нет, вкл/выкл, истина/ложь) в виде установки флажка или галочки. Используется совместно с параметрами: value - задаёт значение для выбранной кнопки; checked - определяет обозначенный вариант выбранным по умолчанию; name - задаёт полю идентификационное имя.
Например,
<INPUT type="checkbox" name="t4" value="Англия">Англия <INPUT type="checkbox" name="t4" value="Франция">Англия <INPUT type="checkbox" name="t4" value="Италия">Англия
Начало формы
Англия
Франция
Италия
Конец формы
radio - создаёт переключатель в группе. На экране отображается в виде круглой кнопки. Все кнопки в группе имеют одинаковый параметр name. Используется совместно с параметром value - задаёт значение для выбранной кнопки.
Например,
<INPUT type="radio" name="t4" value="день">день <INPUT type="radio" name="t4" value="неделя">неделя <INPUT type="radio" name="t4" value="месяц">месяц
Начало формы
день
неделя
месяц
Конец формы
submit - создаёт кнопку, при нажатии которой происходит пересылка содержимого формы. Используется совместно с параметром value - значение которого определяет надпись на кнопке.
Например,
<INPUT type="submit" value="отправить">
Начало формы
Конец формы
image - создаёт кнопку отправки данных в виде изображения (заменяет кнопку submit). Адрес изображения задаётся параметром src. Параметр align выравнивает изображение по вертикали.
Например,
<INPUT type="image" src="button.gif">
reset - создаёт кнопку сброса всех введённых значений формы. В момент нажатия данной кнопки форма приобретает первоначаль- ный вид.
Например,
<INPUT type="reset" value="сброс">
Начало формы
Конец формы
SELECT - создаёт раскрывающийся список или прокручиваемое меню, из которого можно выбрать как одно, так и несколько значений. Имеет следующие параметры:
name - задаёт имя списка.
size - задаёт количество видимых пунктов списка. При значении size равным единице, отображается раскрывающийся список, а при значении больше единицы - прокручиваемое меню.
multiple - задаёт возможность выбора нескольких пунктов из списка.
Пункты меню внутри элемента <SELECT> задаются при помощи тэга <OPTION>. Например,
<SELECT size="1"> <OPTION value=1>from 1 to 3 days <OPTION value=2>from 4 to 7 days <OPTION value=3>from 8 to 14 days <OPTION value=4>from 15 to 18 days <OPTION value=5>from 19 to 23 days <OPTION value=6>from 24 to 30 days </SELECT>