voliuf.narod.ru

9.Дополнительные возможности HTML

Компоновка документа в HTML

Выше были рассмотрены основные теги HTML. Используя их, уже можно создавать свои страницы. Но создание страницы это не только верстка материалов, но и компоновка всех элементов (меню, заголовок страницы, основное информационное наполнение, баннеры и др.) на странице HTML документа. Если все элементы должны располагаться один за другим, тогда понятно как поступить - размещаем все блоки последовательно друг за другом и получаем результат. А как быть, если два элемента должны размещаться на одном уровне по горизонтали? Например, меню должно находиться слева или справа от текста? Ответ очевиден, использовать свойство HTML тегов, позволяющее вкладывать один тег в другой.

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

Компоновка HTML - использование таблиц

Как известно тег <table> используется для отображения таблиц в HTML документах. У этого тега имеется атрибут border, указывающий толщину границы. И если его значение равно нулю, то граница не видна, видно лишь содержимое ячеек. Это и используется для компоновки страниц. В распоряжении дизайнера появляется не одна большая область для вставки элементов, а бесконечное число более мелких зон.

Наберите следующий пример.

<html>
<body>
<p>Часть этой страницы отформатирована с помощью двух столбцов, как
газетная страница. Все что находится ниже этого текста располагается в двух
ячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p>
<table border="0" width="100%">
<tr><td width="50%" valign="top">Этот текст выводится в левом
столбце.</td><td width="50%" valign="top">А этот текст выводится в
правом столбце.</td></tr>
</table>
</body>
</html>

В этом примере тег HTML <table> используется для деления части Web-страницы на два столбца, причем в данном случае ширина столбцов одинакова. Однако это не является обязательным условием, что показано в следующем примере.

<html>
<body>
<p>Часть этой страницы отформатирована с помощью двух столбцов, как
газетная страница. Все что находиться ниже этого текста располагается в двух
ячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p>
<table border="0" width="100%">
<tr><td width="20%" valign="top">Этот текст выводится в левом
столбце. Ширина этого столбца 20%</td><td width="80%"
valign="top">А этот текст выводится в правом столбце. Ширина столбца
80%</td></tr>
</table>
</body>
</html>

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

Не имеет значения сколько текста будет размещено на этой странице, он будет оставаться в пределах своего столбца.

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

<html>
<body>
<p>Часть этой страницы отформатирована с помощью двух столбцов, как
газетная страница, и общего заголовка. Все что находиться ниже этого текста
располагается в трех ячейках таблицы, причем для верхней ячейки указан атрибут
colspan="2". Как можно видеть, есть левый столбец и правый столбец, а также
общий заголовок. Для каждой ячейки указан свой цвет фона.</p>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr height="150px"><td width="100%" valign="top" colspan="2" bgcolor="#cccccc">
Этот текст выводится в верхней ячейке таблицы.</td></tr>
<tr height="500px"><td width="20%" valign="top" bgcolor="#dddddd">
Этот текст выводится в левом столбце.
Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee">А
этот текст выводится в правом столбце. Ширина столбца 80%</td></tr>
</table>
</body>
</html>

Этот же эффект можно получить и применив две таблицы вложенных одна в другую.

<html>
<body>
<p>Часть этой страницы отформатирована с помощью двух столбцов, как
газетная страница, и общего заголовка. Все что находиться ниже этого текста
располагается в ячейках таблицы, причем здесь применяется вложенность одной
таблицы в другую. Как можно видеть, есть левый столбец и правый столбец, а
также общий заголовок. Для каждой ячейки указан свой цвет фона.</p>

<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr height="150px"><td width="100%" valign="top" bgcolor="#cccccc">
Этот текст выводится в верхней ячейке таблицы.</td></tr>

<tr height="500px"><td width="100%">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr><td width="20%" valign="top" bgcolor="#dddddd">
Этот текст выводится в левом столбце.
Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee">
А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr></table>
</td></tr>
</table>

</body>
</html>

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

Использование шрифтов в HTML

Тег <font> в HTML использовать не рекомендуется. Предполагается, что он будет удален в будущей версии HTML.

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

С помощью следующего кода HTML можно определить как размер шрифта, так и тип вывода в браузере:

<html>
<body>

<p>
<font size="2" face="Verdana">
Это параграф.
</font>
</p>

<p>
<font size="5" face="Times">
Это другой параграф.
</font>
</p>

</body>
</html>

Атрибуты шрифта
Атрибут	Пример	Назначение
size="число"	size="2"	Определяет размер шрифта
size="+число"	size="+1"	Увеличивает размер шрифта
size="-число"	size="-1"	Уменьшает размер шрифта
face="название шрифта"	face="Times"	Определяет название шрифта
color="значение цвета"	color="#eeff00"	Определяет цвет шрифта
color="название цвета"	color="red"	Определяет цвет шрифта

Тег <font> НЕ должен использоваться.

Тег <font> не рекомендуется использовать в последних версиях HTML (HTML 4 и XHTML).

Консорциум World Wide Web (W3C) удалил тег <font> из своих рекомендаций. В будущих версиях HTML, для определения свойств компоновки и вывода элементов HTML будут использоваться таблицы стилей (CSS).

Правильно будет использовать стили - Примеры

Задание шрифта текста

<html>
<body>
<h1 style="font-family:verdana">Заголовок </h1>
<p style="font-family:courier">Параграф</p>
</body>
</html>

Задание размера шрифта текста

<html>
<body>
<h1 style="font-size:150%">Заголовок</h1>
<p style="font-size:80%">Параграф</p>
</body>
</html>

Задание цвета шрифта текста

<html>
<body>
<h1 style="color:blue">Заголовок </h1>
<p style="color:red">Параграф</p>
</body>
</html>

Задание для текста шрифта, его размера и цвета

<html>
<body>
<p style="font-family:verdana;font-size:80%;color:green">
Это параграф, содержащий некоторый текст. Это текст, содержащийся в параграфе.
Это все тот-же параграф с текстом.
</p>
</body>
</html>

Прежде всего: Дочитайте до конца это учебное руководство по HTML!!! В последующих лекциях будет показано, почему некоторые теги, такие как <font>, должны быть удалены из рекомендаций HTML, и как использовать таблицы стилей в документе HTML.

Чтобы больше узнать о таблицах стилей, найдите хороший учебник.

Зачем использовать HTML 4.0?

HTML предназначался для других целей!

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

<p>Это параграф</p>

<h1>Это заголовок</h1>

Когда в спецификацию HTML 3.2 были добавлены такие теги как <font> и атрибуты цвета, то для разработчиков Web начался просто кошмар. Разработка больших Web-сайтов, где информацию о шрифтах и цвете нужно добавлять на каждую Web-страницу, стала длительным, дорогим и чрезмерно болезненным процессом.

В чем достоинство HTML 4.0 ?

В HTML 4.0 все форматирование можно удалить из документа HTML и хранить в отдельной таблице стилей.

Так как HTML 4.0 отделяет представление от структуры документа, мы получили то, что всегда требовалось: полный контроль за компоновкой представления без потери содержимого документа.

Не используйте атрибуты представления в тегах HTML, если этого можно избежать. Начните использовать стили! Прочтите учебник по CSS, чтобы познакомиться с таблицами стилей.

Не используйте не рекомендованные теги. Просмотрите полный справочник по HTML 4.01, чтобы узнать, какие теги и атрибуты не рекомендовано использовать.

Готовьтесь к использованию XHTML

XHTML является "новым" HTML. Самая важная вещь, которую можно сделать на данном этапе, -- начать писать действительный HTML 4.01 код. Начните также записывать свои теги в нижнем регистре. Всегда закрывайте свои теговые элементы. Никогда не заканчивайте параграф без завершающего </p>.

Примечание: Официальный HTML 4.01 рекомендует использовать теги в нижнем регистре.

Если вы хотите больше узнать о XHTML, почитайте соответствующий учебник.

Проверяйте свои файлы HTML на соответствие HTML 4.01

Документ HTML проверяется согласно Определению типа документа (DTD). Прежде чем файл HTML можно будет проверить, необходимо добавить в качестве первой строки файла правильный DTD.

DTD Strict (строгий) для HTML 4.01 включает элементы и атрибуты, которые рекомендованы к использованию и не появляются в наборах фреймов:

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

DTD Transitional (переходный) для HTML 4.01 включает все из строгого DTD плюс не рекомендованные элементы и атрибуты:

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

DTD Frameset (набор фреймов) для HTML 4.01 включает все из переходного DTD плюс также фреймы:

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

Проверьте свой файл HTML с помощью средства проверки W3C

Введите адрес своей страницы в поле формы, показанной ниже:

<html>
<head>
<form method="get" action="http://validator.w3.org/check" >
Введите адрес своей страницы в расположенное ниже поле <br />
<br />
<input name="uri" size="50" />
<br /><br />
<input type="submit" value="Validate the page" />
</form>
</body>
</html>

Использование стилей в HTML

В HTML 4.0 все форматирование можно переместить из документа HTML в отдельную таблицу стилей.

<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>

<body>
<h1>Это заголовок 1</h1>
<h3>Это заголовок 3</h3>
</body>
</html>

Этот пример показывает, как форматировать документ HTML с помощью информации о стилях, добавленной в раздел заголовка <head>.

<html>
<body>

<a href="lastpage.htm"
style="text-decoration:none">
ЭТО НЕПОДЧЕРКНУТАЯ ССЫЛКА!
</a>

</body>
</html>

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

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>

<body>
<h1>Я отформатирован с помощью присоединенной таблицы стилей</h1>
<p>Я тоже!</p>
</body>
</html>

Этот пример показывает, как использовать тег <link> для соединения с внешней таблицей стилей.

Как использовать стили

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

Внешняя таблица стилей

Внешняя таблица стилей является идеальной, когда стиль применяется к нескольким страницам. С помощью внешней таблицы стилей можно изменить внешний вид всего Web-сайта, изменяя один файл. Каждая страница должна соединяться с таблицей стилей с помощью тега <link>. Тег <link> находится в разделе заголовка <head>.

Внутренняя таблица стилей

Внутренняя таблица стилей должна использоваться, когда один документ использует единый стиль. Внутренние стили определяют в разделе заголовка с помощью тега <style>.

<html>
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
</html>

Встроенные стили

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

Чтобы использовать встроенные стили, используется атрибут style в соответствующем теге. Атрибут style может содержать любое свойство CSS. Следующий пример показывает, как изменить цвет и левое поле параграфа:

<html>
<body>
<p style="color: red; margin-left: 20px">
Это параграф
</p>
</body>
</html>

Чтобы больше узнать о стилях, почитайте учебник о CSS.

Теги стилей
Тег	Описание
Тег	Описание
<style>	Задает определение стиля
<link>	Задает ссылку на ресурс
<div>	Определяет раздел в документе
<span>	Определяет раздел в документе
<font>	Не рекомендуется. Используйте вместо этого стили.
<basefont>	Не рекомендуется. Используйте вместо этого стили.
<center>	Не рекомендуется. Используйте вместо этого стили.

Раздел заголовка HTML

Заглавие документа

<html>

<head>
<title>Название документа не выводится</title>
</head>

<body>
<p>Выводится этот текст</p>
</body>

</html>

Информация о названии документа в элементе заголовка не выводится в окне браузера.

Одно место назначения для всех ссылок

<html>
<head>
<base >
</head>

<body>

<p>
<a style="color:#666666;" href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru" onMouseOver="menuSetHelpText('intuit');return false;" onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru"
>Эта ссылка </a>
будет загружаться в новом окне, так как атрибут target задан как "_blank".
</p>

<p>
<a style="color:#666666;" href="/external/?popup=0&url=http%3A%2F%2Fwww.osp.ru" onMouseOver="menuSetHelpText('external');return false;" onMouseOut="menuClearHelpText()">
Эта ссылка</a>
также будет загружаться в новом окне, даже без атрибута target.
</p>

</body>
</html>

Этот пример показывает, как использовать тег base, чтобы все ссылки на странице открывались в новом окне.

Элемент head

Элемент head содержит общую информацию, называемую также мета-информацией, о документе. Мета означает "информация о чем-то".

Можно сказать, что мета-данные означают информацию о данных, или мета-информация означает информацию об информации.

Элементы внутри элемента head не выводятся браузером. Согласно стандарту HTML, внутри раздела head допустимы только несколько тегов. Это теги <base>, <link>, <meta>, <title>, <style>, и <script>.

Посмотрите на следующую незаконную конструкцию:

<head>
<p>Это какой-то текст</p>
</head>

В этом случае у браузера есть две возможности:

Вывести текст, потому что он находится внутри элемента параграфа
Скрыть текст, потому что он находится внутри элемента заголовка

Если поместить элемент HTML, такой как <h1> или <p>, внутрь элемента head, как в этом случае, большинство браузеров его выведут, даже если это незаконно.

Должны ли браузеры прощать подобные ошибки? Наверно, это неправильно.

Теги заголовка
Тег	Описание
<head>	Определяет информацию о документе
<title>	Определяет заглавие документа
<base>	Определяет базовый URL для всех ссылок на странице
<link>	Определяет ссылку на ресурс
<meta>	Определяет мета-информацию
<!DOCTYPE>	Определяет тип документа. Этот тег идет перед начальным тегом <html>.

Мета-информация в HTML

Описание документа

<html>
<head>

<meta name="author" content="Иван Петров">
<meta name="revised" content="Иван Петров,16/10/05">
<meta name="generator" content="Microsoft FrontPage 4.0">

</head>
<body>
<p>
Атрибуты meta этого документа определяют автора и использованную программу редактора.</p>
</body>
</html>

Информация внутри элемента meta описывает документ.

Ключевые слова документа

<html>
<head>

<meta name="description" content="примеры HTML">
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

</head>
<body>
<p>Атрибуты meta этого документа описывают документ и его ключевые слова.</p>
</body>
</html>

Информация внутри элемента meta описывает ключевые слова документа.

Перенаправление пользователя

<html>
<head>
<meta http-equiv="Refresh" content="5;url=http://www.intuit.ru">
</head>

<body>
<p>
Извините! Мы переехали! Новый URL: <a style="color:#666666;" href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru" onMouseOver="menuSetHelpText('intuit');return false;" onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">http://www.osp.ru</a>
</p>

<p>
Вы будете перенаправлены на новый адрес через пять секунд.
</p>

<p>
Если вы видите это сообщение более 5 секунд, щелкните,
пожалуйста, на приведенной выше ссылке!
</p>

</body>
</html>

Этот пример показывает, как перенаправить пользователя, если адрес сайта изменился.

Элемент meta

Как было показано в предыдущей лекции, элемент head содержит общую информацию (мета-информацию) о документе.

HTML имеет также элемент meta, который помещается внутри элемента head. Элемент meta предназначен для предоставления мета-информации о документе.

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

Примечание: Консорциум W3C заявляет в документе http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv, что "Некоторые агенты пользователей поддерживают использование META для обновления текущей страницы после указанного количества секунд, с возможностью заменить ее другим URI. Авторы не должны использовать эту технику для пересылки пользователей на другие страницы, так как это делает страницу недоступной для некоторых пользователей. Вместо этого автоматическое перенаправление страницы должно делаться с помощью перенаправления на сервере".

Ключевые слова для поисковых машин

Некоторые поисковые машины в WWW будут использовать атрибуты name и content тега meta для индексации страницы.

Этот элемент meta определяет описание страницы:

Этот элемент meta определяет ключевые слова для страницы:

Назначение атрибутов name и content состоит в описании содержимого страницы.

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

О машинах поиска можно почитать в учебнике по созданию Web-сайтов.

Неизвестные атрибуты meta

Иногда можно встретить атрибуты meta, которые могут оказаться совершенно незнакомыми, например:

Тогда необходимо просто принять для себя, что это является чем-то уникальным для сайта или для автора сайта и не имеет, вероятно, к вам никакого отношения.

Весь список атрибутов элемента meta можно найти в Полном справочнике тегов HTML 4.01 в конце книги.

Универсальные указатели ресурсов в HTML

Ссылки в HTML

Во время щелчка мышью на ссылке в документе HTML нижележащий тег <a> указывает на определенное место (адрес) в Web с помощью значения атрибута href, например, следующим образом:

<a href="lastpage.htm">Последняя</a>.

Ссылка "Последняя" в этом примере является ссылкой относительно Web-сайта, который вы просматриваете, а браузер создаст для доступа к странице полный адрес Web вида http://www.osp.ru/html/lastpage.htm.

Универсальные указатели ресурсов

Для адресации документа (или других данных) в WWW используется так называемый Универсальный указатель ресурса (URL - Uniform Resource Locator). Полный адрес в Web, такой как http://www.osp.ru/html/lastpage.htm следует следующим правилам синтаксиса:

scheme://host.domain:port/path/filename

scheme определяет тип службы Интернет. Наиболее распространенным типом является http.
domain определяет имя домена Интернет, например, osp.ru.
host определяет хост домена. Если он отсутствует, то по умолчанию для http используется хост www.
:port определяет номер порта на хосте. Номер порта обычно отсутствует. По умолчанию для http используется порт с номером 80.
path определяет путь доступа (подкаталог) на сервере. Если путь доступа отсутствует, то ресурс (документ) должен быть расположен в корневом каталоге сайта Web.
filename определяет имя документа. По умолчанию может использоваться имя файла default.asp, или index.html или что-то еще, в зависимости от настроек Web-сервера.

Схемы обращения к ресурсу URL

Несколько примеров наиболее распространенных схем обращения к ресурсу:

Схема	Доступ
file	файл на локальном ПК
ftp	файл на сервере FTP
http	файл на сервере WWW
gopher	файл на сервере Gopher
news	группа новостей Usenet
telnet	соединение Telnet
WAIS	файл на сервере WAIS

Доступ к группе новостей. Следующий код HTML:

<a href="news:alt.html">HTML Newsgroup</a>

создает ссылку на группу новостей вида "HTML Newsgroup".

Загрузка с помощью FTP. Следующий код HTML:

<a href="ftp://www.osp.ru/ftp/winzip.exe">Загрузить WinZip</a>

создает ссылку для загрузки файла следующего вида: "Загрузить WinZip". (Эта ссылка не работает. Это просто пример.)

Ссылка на почтовую систему. Следующий код HTML:

<a href="mailto:info@intuit.ru">info@intuit.ru</a>

создает ссылку на вашу собственную почтовую систему.

Сценарии в HTML

Сценарии на страницах HTML позволяют сделать их более динамичными и интерактивными.

<html>
<body>

<script type="text/javascript">
document.write("<h1>Всем привет!</h1>")
</script>

</body>
</html>

Этот пример показывает, как использовать сценарий в документе HTML.

Работа с браузерами, не поддерживающими сценарии

<html>
<body>

<script type="text/javascript">

</script>

<noscript>Нет поддержки JavaScript!</noscript>

<p>
Браузер без поддержки JavaScript выведет текст из элемента noscript.
</p>

</body>
</html>

Этот пример показывает, как работать с браузерами, которые не поддерживают сценарии.

Добавление сценария на страницу HTML

Сценарий в HTML определяют с помощью тега <script>. Обратите внимание, что для определения языка сценария необходимо использовать атрибут type.

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

<script type="text/javascript">
document.write("Всем привет!")
</script>

</body>
</html>

Этот сценарий создаст следующий вывод:

Всем привет!

Примечание: Чтобы узнать больше о сценариях в HTML, почитайте соответствующий учебник по JavaScript.

Как работать со старыми браузерами

Браузер, который вообще не распознает тег <script>, будет выводить содержимое тега <script> в виде текста на странице. Чтобы браузер этого не делал, необходимо спрятать сценарий в тегах комментария. Старый браузер (который не распознает тег <script>) проигнорирует комментарий и не будет выводить содержимое тега на странице, в то время как более новые браузеры поймут, что скрипт необходимо выполнить, даже если он окружен тегами комментария.

JavaScript:

VBScript:

Тег <noscript>

Кроме скрытия сценария внутри комментария можно добавить также тег <noscript>.

Тег <noscript> используется для определения заменяющего текста, если сценарий НЕ выполняется. Этот тег используется для браузеров, которые распознают тег <script>, но не поддерживают расположенный внутри сценарий, поэтому эти браузеры будут выводить вместо этого текст внутри тега <noscript>. Однако, если браузер поддерживает сценарий внутри тега <script>, то он проигнорирует тег <noscript>.

JavaScript:

VBScript:

Теги сценариев
Тег	Описание
<script>	Определяет сценарий
<noscript>	Определяет заменяющий текст, если сценарий не выполняется
<object>	Определяет встроенный объект
<param>	Определяет для объекта настройки времени выполнения (параметры)
<applet>	Не рекомендуется. Используйте вместо этого <object>

Стандартные атрибуты HTML 4.0

Теги HTML могут иметь атрибуты. Специальные атрибуты для каждого тега перечислены в описании каждого тега, Перечисленные здесь атрибуты являются базовыми и атрибутами языка, которые стандартны для всех тегов (с небольшими исключениями):

Базовые атрибуты

Не действительны в элементах base, head, html, meta, param, script, style, и title.

Атрибут	Значение	Описание
class	class_rule или style_rule	Класс элемента
id	номер_id	Уникальный id элемента
style	определение_стиля	Определение встроенного стиля
title	текст_подсказки	Текст, выводимый в качестве подсказки

Атрибуты языка

Не действительны в элементах base, br, frame, frameset, hr, iframe, param и script.

Атрибут	Значение	Описание
dir	ltr \| rtl	Задает направление вывода текста
lang	код_языка	Задает код языка

Атрибуты клавиатуры

Атрибут	Значение	Описание
accesskey	символ	Задает клавишу быстрого доступа для элемента
tabindex	число	Задает для элемента порядок перехода по клавише табуляции

Атрибуты событий в HTML 4.0

Новым в HTML 4.0 является возможность для событий HTML запускать действия браузера, такие как запуск JavaScript, когда пользователь щелкает на элементе HTML.

Ниже представлен список атрибутов, которые можно использовать в тегах HTML для определения действий событий.

Чтобы больше узнать о программировании с помощью этих событий, почитайте учебники по JavaScript и DHTML.

Атрибуты событий окна

Действительны только в элементах body и frameset.

Атрибут	Значение	Описание
onload	сценарий	Сценарий, который выполняется при загрузке документа
onunload	сценарий	Сценарий, который выполняется при выгрузке документа

Атрибуты событий формы

Действительны только в элементах form.

Атрибут	Значение	Описание
onchange	сценарий	Сценарий, который выполняется при изменении элемента
onsubmit	сценарий	Сценарий, который выполняется при отправке формы
onreset	сценарий	Сценарий, который выполняется при сбросе формы
onselect	сценарий	Сценарий, который выполняется при выборе элемента
onblur	сценарий	Сценарий, который выполняется, когда элемент теряет фокус
onfocus	сценарий	Сценарий, который выполняется, когда элемент получает фокус

Атрибуты событий клавиатуры

Не действительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title.

Атрибут	Значение	Описание
onkeydown	сценарий	Что делать, когда нажата клавиша
onkeypress	сценарий	Что делать, когда клавиша нажата и отпущена
onkeyup	сценарий	Что делать, когда клавиша отпущена

Атрибуты событий мыши

Не действительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title.

Атрибут	Значение	Описание
onclick	сценарий	Что делать при щелчке мыши
ondblclick	сценарий	Что делать при двойном щелчке мыши
onmousedown	сценарий	Что делать, когда нажата клавиша мыши
onmousemove	сценарий	Что делать, когда перемещается указатель мыши
onmouseout	сценарий	Что делать, когда указатель мыши покидает элемент
onmouseover	сценарий	Что делать, когда указатель мыши проходит над элементом
onmouseup	сценарий	Что делать, когда кнопка мыши отпущена

Вы изучили HTML, что дальше?

Краткое заключение

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

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

Ключевым моментом в HTML являются теги, которые указывают, какое далее следует содержимое.

Теперь вы знаете HTML, что дальше?

Следующим шагом должно стать изучение XHTML и CSS, а также следует обратить внимание на JavaScript и VBscript.

XHTML

XHTML является "новым" HTML. Самыми последними рекомендациями по HTML является версия HTML 4.01. Это последняя и окончательная версия HTML.

HTML будет заменен XHTML, который является более строгой и четкой версией HTML.

Каскадные таблицы стилей (CSS)

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

CSS обеспечивает полный контроль за компоновкой, не теряя при этом содержимое документа. Иными словами, в html файле хранится только логическая структура документа, а все оформление вынесено в отдельный документ. И если вдруг возникнет необходимость изменить внешний вид какого-либо элемента, уже не придется править все страницы сайта, а достаточно будет лишь изменить описание в таблице стилей.

JavaScript и VBscript

JavaScript это разработанный корпорацией Netscape межплатформенный объектно-ориентированный язык сценариев. Язык JavaScript основан на языке Java, а VBscript - на Visual Basic. JavaScript содержит набор основных объектов и набор элементов языка. Используя его, можно на лету менять внешний вид документа, в зависимости от изменения каких-либо условий, проводить первичную обработку информации, отправляемой через формы и многое другое.

Язык VBscript является "изобретением" компании Microsoft. Язык VBscript проще и понятней для начинающих программистов и Web-дизайнеров. Но несомненным преимуществом JavaScript является его всесторонняя поддержка, а также легкость и удобство кода, унаследованные из Java и C/C++. Практически все широко распространенные браузеры имеют встроенную поддержку JavaScript, так что нет необходимости беспокоиться, будет ли ваша интерактивная страница работать.

источник: http://www.INTUIT.ru