Итак, мы изучили технологию создания HTML-документов, научились сохранять и отображать исходный код. Ниже представлена структура, характерная для любого HTML-документа.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head>) и содержательной части (между тегами <body> и </body>).
Множество всех тегов HTML можно разбить на следующие группы:
структура документа;
ссылки;
вставка содержимого из внешних источников;
разметка страницы;
форматирование текста;
формы и элементы пользовательского интерфейса.
Кратко рассмотрим основные теги этих групп.
Тег !DOCTYPE
Во многих HTML-документах, созданных в специальных редакторах типа Dreamweaver, перед открывающимся тегом <html> нередко можно увидеть тег <!DOCTYPE>, с помощью которого объявляется тип и формат содержимого документа. Однако современные Web-браузеры обрабатывают документы и без него. Ниже приведено содержимое тега <!DOCTYPE>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Здесь определен тип документа HTML, публичное DTD-описание которого принадлежит организации W3C, соответствует стандарту HTML 4.01 и ориентировано на английскоязычные документы.
Если HTML-документ без тега <!DOCTYPE> открыть в браузере Internet Explorer, а затем выполнить команду Файл -> Сохранить как, выбрав при этом тип файла html, то браузер добавит в сохраняемый файл тег <!DOCTYPE>.
Возможны следующие версии DTD (Document Type Definition — определение типа документа):
Strict DTD — исключает все нерекомендованные консорциумом W3C теги и атрибуты, такие как <FONT>, <CENTER>, align и другие, связанные с форматированием, которые можно заменить соответствующими параметрами CSS.
Transitional DTD — включает все версии Strict DTD,а также все нерекомендованные элементы для обеспечения обратной совместимости со всеми существующими браузерами.
Frameset DTD — включает такие же элементы, что и Transitional DTD,а также элементы, необходимые для Web-страниц с фреймовой структурой.
Раздел HEAD
Раздел HEAD содержит техническую информацию о странице — заголовке, ее описание и ключевые слова для поисковых машин, данные об авторе и времени создания страницы, базовом адресе страницы и т.д. и расположен в контейнерном теге <head>. В этом теге размещаются также следующие теги:
<title>Заголовок страницы</title> — единственный обязательный тег, текст которого отображается в окне веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он полность не поместится в заголовке окна;
<meta> — одинарный тег, задает описание содержимого страницы и ключевые слова для поисковых машин;
<script> — контейнерный тег, размещающий код сценария.
Тег meta
Информация, содержащаяся в тегах <meta>, не отображается веб-браузером, однако имеет важное значение. Если текст между тегами<title>и</title>используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой:
<meta name="description" content=" Описание содержимого страницы">
Где, description— описание документа. Один из наиболее важных параметров. Информация, содержащаяся в нем, влияет на результаты поиска, осуществляемого поисковыми системами
Пример: <meta name="description" content="Основы HTML. Основные понятия. Первый HTML-документ ">
<meta name="keywords" content="Ключевые слова через запятую ">
Где, keywords — ключевые слова, Набор слов и фраз, наиболее полно характеризующий данный документ, который является основным критерием поиска вашего документа поисковыми системами. В конечном счете, эти слова учитываются при выдаче результатов поиска и способствуют повышению рейтинга сайта.
Пример: <meta name="keywords" content="Основы HTML, основные понятия, первый HTML-документ ">
Кроме того, тег <meta> позволяет запретить или разрешить индексацию веб-страницы поисковыми машинами:
<meta name="robots" content=" <Индексация>, <Переход по ссылке>">
В параметре contentуказывается комбинация следующих значений:
index — индексация разрешена;
noindex — индексация запрещена;
follow — разрешено переходить по ссылкам, которые находятся на этой веб-странице;
nofollow —запрещено переходить по ссылкам;
all — комбинация indexплюс follow;
none — комбинация noindexплюс nofollow.
Примеры:
Индексация и переход по ссылкам разрешены:
<meta name="robots" content="index, follow">
Индексация разрешена, а переход по ссылкам запрещен:
<meta name="robots" content="index, nofollow">
Индексация и переход по ссылкам запрещены:
<meta name="robots" content="noindex , nofollow">
С помощью тега <meta>устанавливается кодировка текста:
meta http-equiv= "Content-Type" content="text/html; charset=windows-1251">
Для автоматической перезагрузки страницы через заданный промежуток времени используется свойство refresh:
<meta http - equiv = "refresh" content = "30">
В этом примере страница будет перезагружена через 30 секунд. Если необходимо перенаправить пользователя на другую страницу, то указывается URL-адрес страницы:
Здесь указано, что спустя 30 секунд произойдет перезагрузка страницы по указанному адресу.
Автоматическую периодическую перезагрузку документа обычно устанавливают в случиях часто обновляемых данных (котировки акций на фондовом рынке, например).
Для управления частотой индексации документа поисковыми серверами используется параметр document-state.
<meta nane = "document-state" content = "static">
Где, static — документ статичен, т.е. не меняется, и следовательно, индексировать его нужно только один раз.
<meta name = "document-state" content = "dynamic">
Где, dynamic — значение для часто изменяющихся документов, которые нужно реиндексировать.
<meta name= "resource-type" content = "document"> — определяет тип ресурса. Для обычных HTML-документов значение этогго параметра устанавливается равным "document".
<meta name= "updated" content = "29.06.09">— определяет дату обновления страницы.
<meta name= "URL" lang = "ru" content = "http://sevidi.narod.ru">— определяет какой документ следует индексировать (чтобы не обрабатывать зеркала). Где URL— базовый URL-адрес.
<meta name= "AUTHOR" content = "имя автора">— определяет имя автора данного документа.
Тег base
В HTML-документах обычно используются относительные ссылки на ресурсы. Например, в ссылке нередко приводится только имя файла. В этом случае предполагается, что его местоположение совпадает с расположением документа, из которого этот файл вызывается. Однако можно явно указать базовый URL-адрес, который будет использоваться во всех случаях применения относительных ссылок. Это делается с помощью тега<base> с атрибутом href, значением которого является базовый URL-адрес:
<base href = "URL-адрес">
Пример:
<!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=windows-1251"> <title>Использование тега <base></title> <base href="http://sevidi.narod.ru/images/"> </head>
<body> <img src="sv1.gif"> </body> </html>
В окне веб-браузера это будет выглядеть ТАК.
В этом примере графическое изображение имеет относительную ссылку (просто имя файла). Если базовый URL-адрес не был бы указан, то браузер искал бы файл sv1.gif в той же папке, где расположен HTML-документ со ссылкой на него. Поскольку базовый URL-адрес задан, то браузер будет искать файл в папке imagesна узле http://sevidi.narod.ru.
При указании в теге <base> базового URL-адреса относительные ссылки продолжают работать, даже если вы переместите HTML-документ в другую папку. Это обеспечивает определенные удобства с локальной версией HTML-документа в условиях, когда компьютер подключен к сети.
Тег link
Тег <link> предназначен для обозначения связей между документами в больших и сложных по своей структуре узлах. Атрибут href содержит ссылку на другой документ, связанный с текущим. Адрес может быть абсолютным или относительным. Атрибут rel указывает отношения между документами:
home — расположение домашней страницы веб-узла;
next — расположение следующего документа серии, связанного с текущим;
previous — расположение предыдущего документа серии, связанного с текущим;
up — расположение следующего документа вверх по иерархии;
copyright — расположение документа с информацией об авторских правах для данного веб-узла;
stylesheet — расположение файла с таблицей стилей.
Используются также и другие значения для атрибута rel: glossary, help, toc, index, contents.
В одном и том же HTML-документе тег <link> может присутствовать несколько раз.
Тег style
В контейнерном теге <style> размещаются правила каскадных таблиц стилей, определяющих внешний вид и позиционирование элементов HTML-документа. Более подробно каскадные таблицы стилей будут рассмотрены далее. В одном и том же HTML-документе тег <style>может встречаться несколько раз. При этом они могут размещаться вне тега <head>.
Тег script
В контейнерном теге <script> размещается код сценария (скрипт), выполняемый веб-браузером. В одном и том же HTML-документе тег<script>может встречаться несколько раз. При этом они могут размещаться вне тега <head>. Внутри тега <script>не могут находиться теги HTML и правила каскадных таблиц стилей.
Код сценария может быть написан на языке JavaScript или VBScript. Последний понимает только веб-браузер Internet Explorer. Языком по умолчанию является JavaScript. Созданию сценариев на JavaScript посвящен целый раздел сайта. Но обо всем по порядку.
Форматирование отдельных символов. Бегущая строка
Мы знаем, что HTML — это язык разметки. Следовательно, важно уметь форматировать отдельные символы, а также целые фрагменты текста. Но прежде чем изучать теги, рассмотрим возможность отображения специальных символов. Такими символами, например, являются знаки меньше(<) и (>) больше, так как с помощью этих символов описываются HTML-теги. Для отображения специальных символов используются так называемые HTML-эквиваленты.
Например для вывода текста
<title>Форматирование отдельных символов</title>
необходимо написать так
<title>Форматирование отдельных символов</title>
В этом примере мы заменили знак меньше (<) на <, а знак больше (>) на >.
Наиболее часто используемые HTML-эквиваленты:
< — знак меньше (<);
> — знак больше (>);
& — амсперанд (&);
— неразрывный пробел;
" — кавычка (");
® — знак зарегистрированной торговой марки (®);
<body> Формула спирта С<sub>2</sub>H<sub>5</sub>OH <br> Площадь помещения 20 м<sup>2</sup> </body> </html>
В окне веб-браузера это будет выглядеть ТАК.
Вывод текста заданным шрифтом
Тег <font> определяет размер, тип и цвет шрифта. Он имеет следующие параметры:
face — указывает тип шрифта. Можно указать как один, так и несколько типов, разделяя их запятыми. При этом список шрифтов просматривается слева направо. Указанное название должно точно соответствовать названию типа шрифта. Если шрифт не найден на компьютере пользователя, то используется шрифт по умолчанию. Пример:
size —задает размер шрифта в условных единицах от 1 до 7. Размер, используемый веб-браузером по умолчанию принимает значение 3. Размер шрифта можно указывать ка цифрой от 1 до 7, так и в относительных единицах, указывая на сколько единиц нужно увеличить (знак "+") или уменьшить (знак "-") размер шрифта относительно базового. Пример:
<body> Текст <big>большего</big> размера. <br> Текст <small>меньшего</small> размера <br> <tt>Моноширинный текст</tt> </body> </html>
В окне веб-браузера это будет выглядеть ТАК.
Текст с отступом
Для выделения фрагмента текста строками сверху и снизу, а также отступом от левого края окна браузера служит контейнерный тег <blockquote>. Для увеличения отступа тег <blockquote> следует применять несколько раз.
Пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Текст с отступом</title> </head>
<body> <blockquote><blockquote>Текст с двойным отступом</blockquote></blockquote> </body> </html>
В окне веб-браузера это будет выглядеть ТАК.
Бегущая строка
Браузер Internet Explorer поддерживает контейнерный тег <marquee>, который позволяет создать так называемую бегущую строку, т.е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими параметрами:
width —ширина поля бегущей строки в пикселах или процентах от ширины окна;
height — высота бегущей строки в пикселах;
hspace, vspace — интервалы по горизонтали и вертикали между текстом строки и краями ее поля в пикселах;
align — положение текста бегущей строки в ее поле. Возможные значения:
top — вверху;
bottom — внизу;
middle — посередине;
direction — определяет направление движения. Возможные значения:
left — справа налево;
right — слева направо;
behavior — характер движения строки;
scroll — текст появляется от одного края и скрывается за другим;
slide — строка вытягивается от одного края поля и останавливается у другого;
alternate — задает переменное направление движения от одного края к другому, а затем обратно;
loop — количество повторений в бегущей строке, задаваемое числом; если необходимо бесконечное количество повторений, то следует задать параметр в виде ключевого слова infinity. Параметр loop не влияет на поведение бегущей строки, если для атрибута behavior заданы значения alternate и slide;
scrollamount — устанавливает длину в пикселах "прыжка" текста за один такт. При большом значении этого параметра текст движется рывками, а при малом — замедленно;
scrolldelay — определяет величину паузы между тактами перемещения текста в миллисекундах;
bgcolor — устанавливает цвет поля бегущей строки, задаваемый шестнадцатитеричным числом или именем.
Соотношения между длиной текста, размером шрифта и скоростью перемещения, при которых бегущая строка выглядит приемлемо, подбираются опытным путем. Рассмотрим пример, где бегущая строка бесконечно прокручивается на желтом поле шириной 75% от ширины окна веб-браузера.
<body> <marquee height="50" width="75%" hspace="5" vspace="5" align="top" bgcolor="#FFFF00" direction="left" loop="infinity" behavior="scroll" scrollamount="5" scrolldelay="100"> <h1>Это сообщение будет прокручиваться на экране справа налево</h1> </marquee> </body> </html>
В окне веб-браузера это будет выглядеть ТАК.
В тег <marquee> в качестве прокручиваемого объекта можно вставлять не только текстовые элементы, но и , например графические изображения.
В случае вставки изображений в тег <marquee> высота области определяется не атрибутом height этого тега, а высотой самого крупного изображения. Размеры изображения можно задать с помощью атрибутов height и width тега <img>.
Фреймы. Разделение окна веб-браузера на несколько областей
Фреймы позволяют разбить окно веб-браузера на несколько прямоугольных областей, в каждую из которых можно загрузить отдельный HTML-документ.
Разделение окна веб-браузера на несколько областей
Обычно заголовок и панель навигации для всех страниц сайта содержат одну и ту же информацию, а изменяется только основное содержание страниц. С помощью фреймовой структуры можно заголовок поместить в одно окно навигации — во второе, а основное содержание страницы — в третье. Это позволит, оставляя в неизменном состоянии два первых окна, изменять содержание третьего.
Создадим веб-страницу с такой структурой. Для этого создадим 5 файлов:
Все созданные файлы сохраним в одной папке. Откроем файл 97.html.
В окне веб-браузера это будет выглядеть ТАК.
Окно разделено на три прямоугольные области. В верхней части окна находится заголовок. В нижней — расположена панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными. Если теперь посмотреть HTML-код документа (Вид > Просмотр HTML-кода), то мы увидим только код структуры веб-страницы, не исходный код каждого из HTML-документов. Иными словами, будет отображен исходный код файла 97.html. Чтобы увидеть исходный код заголовка (файл 93.html), необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пунктПросмотр HTML-кода. Чтобы посмотреть исходный код файла 94.html, необходимо правой кнопкой мыши щелкнуть по области, содержащей оглавление и т.д.
Примечание. При использовании фреймов следует учитывать, что поисковые машины при индексации сайтов заносят в свой базы данных именно отдельные страницы структуры фреймов, а не саму структуру. Это обстоятельство полностью разрушает структуру сайта. Ведь если паналь навигации расположена на одной странице, а основная часть страницы на другой, то при переходе посетителя с поискового портала он попадает сразу на основную часть, а панель навигации ему не доступна.
Структура HTML-документа, содержащего фреймы
Структура HTML-документа с фреймами отличается от обычной структуры.
<frameset rows="100, *"> <frame> <frameset cols="20%, 80%" > <frame> <frame> </frameset> </frameset> <noframes> Ваш веб-браузер не отражает фреймы </noframes> </html>
Как и в обычном HTML-документе, весь код расположен между тегами <html> и </html>, а в разделе <head> и </head> располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами отсутствует раздел body, отсутствует содержимое страницы, а присутствуют только теги, служащие для определения фреймовой структуры. Иными словами, документ с фреймами не может содержать раздела body и наоборот, обычный HTML-документ не может содержать фреймовую структуру.
Вместо тега <body> применяется парный тег <frameset>, описывающий фреймовую структуру. Каждое отдельное окно описывается тегом <frame>. Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. Рассмотрим эти теги подробно.
Описание фреймовой структуры
Парный тег <frameset> описывает фреймовую структуру. Внутри тегов <frameset> и </frameset> могут содержаться только теги <frame> или другой набор фреймов, описанный тегами <frameset> и </frameset>. Тег <frameset> имеет следующие параметры:
rows — описывает разбиение на строки; <frameset rows="100, *">
cols — описывает разбиение на столбцы; <frameset cols="20%, 80%" >
В качестве значений параметров rows и cols указываются размеры фреймов. Должно быть указано как минимум два значения. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или процентах:
cols="20%, 80%"
Кроме того, в качестве ширины или высоты может быть указана звездочка (*), которая означает, что под фрейм нужно отвести все оставшееся пространство:
rows="100, *"
border — задает толщину границы между фреймами в пикселах; <frameset rows="100, *" border = "2">
bordercolor — указывает цвет границы между фреймами; <frameset rows="100, *" bordercolor = "red">
frameborder —включает или отключает показ границы между фреймами. Он может принимать одно из двух значений:
yes — граница отображается (значение по умолчанию); <frameset rows="100, *" frameborder = "yes">
no — граница не отображается; <frameset rows="100, *" frameborder = "no">
framespacing — определяет расстояние между фреймами в пикселах; <frameset rows="100, *" framespacing = "2">
Описание отдельных областей
Тег <frame> описывает одиночный фрейм и не имеет закрывающего тега. Он располагается между тегами <frameset> и </frameset> и имеет следующие параметры:
src — определяет URL-адрес документа, который должен быть загружен во фрейм. Может быть указан абсолютный или относительный URL-адрес;
<frame src="95.html ">
name — задает уникальное имя фрейма;
<frame src="95.html" name="charter">
scrolling — запрещает или разрешает отображение полос прокрутки во фрейме. Этот параметр может принимать следующие значения:
auto — полосы отображаются, только если содержимое не помещается во фрейме (значение по умолчанию);
noresize — отключает возможность изменения размеров фрейма пользователем. По умолчанию любой пользователь может изменить размер фрейма путем перемещения границы. Добавляется этот параметр так:
Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. В противном случае содержимое этих тегов будет проигнорировано.
Пример:
<noframes> Ваш веб-браузер не отражает фреймы </noframes>
Загрузка документа в определенный фрейм
Для загрузки документа в определенный фрейм существует параметр target тега <a>. В параметре target указывается имя фрейма (которое задается с помощью параметра name тега <frame>) или одно из зарегистрированных значений:
_blank — документ будет загружен в новом окне веб-браузера;
С помощью парного тега <iframe> можно вставлять фреймы в обычный HTML-документ. Если тег <iframe> не поддерживается, то будет выведен текст между тегами <iframe> и </iframe>. Иногда такие фреймы называют плавающими. Тег <iframe> имеет следующие параметры:
src —определяет URL-адрес документа, который должен быть загружен во фрейм. Может быть указан абсолютный или относительный URL-адрес;
Здесь заголовок и панель навигации остаются в неизменном состоянии, а при переходе по ссылкам соответствующая страница загружается в окно фрейма.
Очень часто тег <iframe> используется в ходе сетей обмена банерами и коде рекламных сетей. В других целях использование тега очень ограниченно из-за отсутствия поддержки большинством веб-браузеров.
Раскрывающейся список. Текстовая область. Теги fieldset, legend, label
Раскрывающейся список
Тег <select> используется для создания раскрывающегося списка, из которого можно выбрать элемент. Это контейнерный тег, внутри которого используются теги <option>, предназначенные для задания элементов (опций) списка.
Тег <select> имеет следующие параметры:
align —горизнтальное выравнивание списка. Возможны следующие значения:
absbottom — выравнивание нижней границы списка по нижней границе текущей строки;
absmiddle — выравнивание середины списка по середине текущей строки;
baseline — выравнивание нижней границы списка по базовой линии текущей строки;
bottom — то же , что и baseline;
top — верхняя граница списка выравнивается по самому высокому элементу текущей строки;
texttop — верхняя граница списка выравнивается по самому высокому текстовому элементу текущей строки;
left — список располагается у левого края окна. Текст и другие элементы обтекают его справа;
right — список располагается у правого края окна. Текст и другие элементы обтекают его слева;
accesskey — определяет клавишу быстрого доступа к раскрывающемуся списку. Значением атрибута является строка, содержащая букву или цыфру. Если нажать указанную клавишу в сочетании с клавишей <Alt>, то элемент получит фокус.
<select accesskey = "S">
name —имя (идентификатор) списка;
<select name="select1">
disabled —делает список недоступным пользователю;
<select name="select1" disabled>
multiple — обозначает возможность выбора из списка одновременно нескольких элементов;
<select name="select1" disabled multiple>
size — количество одновременно видимых элементов списка. По умолчанию — 1. Если это число больше 1, то список снабжается полосой прокрутки;
<select name="select1" size="3">
tabindex — целое число, определяющее порядок перехода к элементу с помощью клавиши <Tab>. Обычно используется, когда в форме присутствуют несколько элементов интерфейса, а порядок ввода данных в них важен.
<select name="select1" size="3" tabindex="1">
Тег <option> имеет следующие параметры:
selected — обозначает выбранный (выделенный) элемент списка;
<option selected>
value — значение, ассоциированное с элементом списка;
<option selected value="Первый">
Текстовое содержимое элемента списка указывается сразу после тега <option>.
Теги форматирования текста, указанные до и после тега <option>, не действуют на вид элементов списка. Чтобы установить параметры шрифта элементов списка, следует воспользоваться каскадными таблицами стилей для тега <select>.
Параметр value предназначен для хранения значений, ассоциировнных сэлементами списка. Элемент списка на экране и ассоциированное с ним значение могут быть как одинаковыми, так и различными. Если раскрывающейся список находится в форме (тег <form>), то при отправке данных формы на сервер передается значение параметра value выбранного элемента.
Для создания иерархических списков внутри тега <select> можно использовать контейнерный тег <optgroup>, в который заключаются теги <option>элементов списка, объединяемых в одну группу. Атрибут label тега <optgroup>принимает в качестве значения текстовую строку, отображаемую в списке жирным курсивом. Этот невыбираемый элемент списка, выполняющий роль заголовка группы элементов. При этом выбираемые элементы группы, заданные посредством тега <option>, отображаются с левым отступом.
Контейнерный тег <textarea> позволяет создать элемент, называемый текстовой областью. Это прямоугольная область с полосами прокрутки. Внутри нее легко разместить многострочный текст, который можно сделать как редактируемым, так и доступным только для просмотра. Текстовую область обычно используют как большое поле ввода данных. Важной особенностью тега <textarea> является то, что все теги, заключенные в него, не выполняются браузером, а отображаются как обыкновенный текст.
Тег <textarea> имеет следующие параметры:
align — горизонтальное выравнивание текстовой области. Возможны следующие значения:
absbottom — выравнивание нижней границы области по нижней границе текущей строки;
absmiddle — выравнивание середины области по середине текущей строки;
baseline — выравнивание нижней границы области по базовой линии текущей строки;
bottom — то же , что и baseline;
top — верхняя граница области выравнивается по самому высокому элементу текущей строки;
texttop — верхняя граница области выравнивается по самому высокому текстовому элементу текущей строки;
left — текстовая область располагается у левого края окна. Текст и другие элементы обтекают его справа;
right — область располагается у правого края окна. Текст и другие элементы обтекают его слева;
accesskey — определяет клавишу быстрого доступа к текстовой области. Значением атрибута является строка, содержащая букву или цыфру. Если нажать указанную клавишу в сочетании с клавишей <Alt>, то элемент получит фокус.
cols —количество символьных позиций по горизонтали для отображения текста;
rows — количество строк, одновременно видимых в окне текстовой области;
readonly — устанавливает текстовую область в режим просмотра (только для чтения). Если этот атрибут не использовать, то текстовая область будет работать как поле ввода и редактирования данных;
name — имя (идентификатор) текстовой области;
disabled —делает область недоступным пользователю;
tabindex — целое число, определяющее порядок перехода к элементу с помощью клавиши <Tab>. Обычно используется, когда в форме присутствуют несколько элементов интерфейса, а порядок ввода данных в них важен.
wrap —определяет режим автоматического переноса символов на другую строку. Возможные значения: physical, virtual, off (выключено)
<body> <textarea name="" cols="15" rows="5"> Текстовая область </textarea> </body> </html>
В окне веб-браузера это будет выглядеть ТАК.
Все теги, включенные в контейнер <textarea>, не интерпретируются браузером, а выводятся в текстовой области как обыкновенный текст.
Тег fieldset. Тег legend. Тег label
Для создания выделенного рамкой блока элементов пользовательского интерфейса служит контейнерный тег <fieldset>. В нем может находится контейнерный тег <legend>, содержимое которого отображается в верхней части блока (на рамке). Обычно это текстовой заголовок группы элементов, хотя можно использовать графическое изображения и другие элементы.
Блок с радиокнопками
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Блок с радиокнопками</title> </head>
Размещение радиокнопок в одном блоке еще не делает их селекторными переключателями, среди которых толькоодин может быть в установленном состоянии. Для этого, как уже отмечалось, требуется, чтобы они имели одинаковые значения атрибута name.
Тег <fieldset> не имеет параметров, с помощью которых можно былобы установить размеры блока. Высота блока зависит от количества расположенных в нем по вертикали элементов и их размеров. Однако прямоугольная рамка блока растягивается на всю ширину окна браузера. Установить размеры блока по своему усмотрению можно с помощью таблиц стилей.
Тег <legend> имеет атрибуты:
align —горизонтальное выравнивание содержимого, которое располагается на верхней рамке блока. Возможные значения:
left — по левому краю (значение по умолчанию);
right — по правому краю;
center — по центру;
accesskey — определяет клавишу быстрого доступа к первому элементу пользовательского интерфейса, расположенному в крнтейнере<legend>. В том случае, когда <legend> содержит только текст, быстрая клавиша не действует;
tabindex — целое число, определяющее порядок перехода с помощью клавиши <Tab> к первому элементу пользовательского интерфейса, расположенному в крнтейнере <legend>. В том случае, когда <legend> содержит только текст, быстрая клавиша не действует;
Обычно элементы пользовательского интерфейса сопровождаются поясняющими надписями (метками). Это можно сделать, расположив текст надписи до или после тега элемента или воспользовавшись таблицей для задания требуемого положения. Вместе с тем, с помощью контейнерного тега <label> можно определить автоматическое расположение надписи рядом с элементом.
<body> <label> Введите ваше имя <input type="text"> </label> </body> </html>
В окне веб-браузера это будет выглядеть ТАК.
Тег <label> обладает атрибутами accesskey и for. Атрибут for позволяет указать, к какому элементу относится надпись: в качестве значения он принимает значение атрибута id элемента.
