<A>…</A>

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

Возможный результат

<a href="matt.htm">Matthew’s Page</a>		Отображает подчеркнутую гиперссылку (Matthew’s Page) на страницу с названием matt.htm в той же папке
<a name="news">News about Fiona</a>		Определяет якорь на странице на который перепрыгнет другая гиперссылка
<a href="#news">Read the News</a>		Отображает гиперссылку на якорь
<a href="baby.htm"onmouseover= "window.status='Babies!';return true"> <img src="baby.jpg"width=40 height=30></a>		Отображает рисунок baby.jpg как гиперссылку на страницу baby.htm; когда посетитель проводит мышкой по ссылке, в строке статуса появляется сообщение

<APPLET>…</APPLET>, <PARAM>

Встраивает апплет Java. Используйте тэг <PARAM> для указания параметров апплета.

Возможный результат

Отображает апплет, код которого находится в файле chat.class, отправляет три параметра апплету

<BASE>

Установливает "базовый" сетевой адрес для гиперссылок (вместо положения страницы). Или, используется на страницах с фреймами для указания целевого фрейма для гиперссылок.

Возможный результат

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

Все гиперссылки загружают страницы в фрейм с названием "main"

<BGSOUND>

В Internet Explorer, проигрывает фоновый звук. Используйте атрибут src для указания аудио файла, вроде файла WAVE (.wav) или MIDI (.mid).

<BODY>…</BODY>

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

Возможный результат

<body bgcolor="#cccc99" text="#003300">		Устанавливает цвет фона и текста
<body link="#993300" alink="#cc6600" vlink="#993333">		Устанавливает цвет обычной, активной и посещенной гиперссылки
<body background="images/bkgd.gif">		Устанавливает фоновый рисунок
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>		Страница появляется в левом верхнем углу окна броузера. (Используйте все четыре атрибута для поддержки и Internet Explorer и Netscape)

<BR>

Разрыв с переходом на следующую строку.

Возможный результат

Броузер разрывает строку и переходит на следующую

позволяет вам ввести комментарии в ваш HTML, который не появится на вашей странице в броузере.

<DIV>…</DIV> и <SPAN>…</SPAN>

Является признаком текстового блока, к которому вы хотите применить стиль. Установите стиль блоку текста с помощью атрибутов style, class или id. Броузеры отобразят конец строки до и после тэга <DIV>, а тэг <SPAN> может быть использован в части параграфа, не разрывая строку.

Возможный результат

<div align=center> Middle of the road. </div>

Разделы центрированы, строка разрывается до и после

<div style= "position:absolute;top:80;left:80"> Unbearable lightness of being. </div>

Раздел выровнен по верхнему краю других элементов страницы, это ровно 80 пикселов от верха и левого края окна броузера

This predicament is utterly <span class="crazy">mad</span>.

Слово "mad" принимает стилевые характеристики, описанные в классе crazy в таблице стилей

<EMBED>

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

Возможный результат

Автоматически проигрывает WAVE файл при открытии страницы

Отображает плагин QuickTime и проигрывает указанный файл movie (.mov).

<FONT>…</FONT>

Устанавливает гарнитуру и размер шрифта для блока текста. Размер указывается цифрами от 1 до 7, где 3 обычно стоит по умолчанию. Чтобы более точно установить шрифт, используйте стили вместо <FONT>.

Возможный результат

<font size=4 face= "'Courier New',courier,monospace"> My old friend the typewriter.</font>

Показывает текст шрифтом Courier New (или другим имеющимся шрифтом), размер шрифта больше чем обычно

<FORM>…</FORM>

Создает форму для ввода информации посетителем. Используйте атрибут action для указания страницы или программы, которой форма будет пересылать информацию. Используйте другие тэги формы (вроде <INPUT> и <TEXTAREA>) внутри блока <FORM>.

Возможный результат

<form action="search.asp"method="POST"> Search: <input name=query type=text size=10> <input type=submit value="Go"> </form>

Небольшая форма для поиска. Когда посетитель нажимает кнопку Go, форма отправляет текст сценарию Active Server Page search.asp для выполнения

<FRAMESET>…</FRAMESET>, <FRAME> и <NOFRAMES>…</NOFRAMES>

Создает страницу с фреймами. Используйте блок <NOFRAMES> для обеспечения альтернативного HTML для посетителей, чьи броузеры не поддерживают фреймы.

Возможный результат

Страница с фреймами без границ. Левый фрейм 120 пикселов в ширину, а правый занимает оставшееся пространство

Показывает жирный текст заголовка. Заголовки уровня 1 – больше, а уровня 6 – меньше, чем обычный текст. По умолчанию заголовки выровнены по левому краю; чтобы центрировать их, установите атрибуту align значение center.

<HEAD>…</HEAD>

Включите в этот блок тэг <TITLE> и другие тэги общей информации о странице (вроде <META> и <STYLE>).

<IFRAME>…</IFRAME>

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

<IMG>

Отображает GIF, JPEG, или PNG рисунок.

Возможный результат

Помещает рисунок green.jpg в правое поле соответственно текст будет обтекать его слева. Рисунок появляется как минимум в 8 пикселах от краев текста или объектов

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

<INPUT> и <BUTTON>…</BUTTON>

В зависимости от значения и типа атрибута тэг <INPUT> отображает независимый или зависимый переключатель или текстовую область для ввода информации посетителем, а также кнопку или рисунок, который отправляет или обновляет форму. С помощью блока <BUTTON> ваша кнопка может содержать любой HTML.

Возможный результат

ID:<input type=text name=uid size=8><br> Password: <input type=password name=pwd size=8>		Две области для ввода текста посетителем. Первая показывает введенный текст, а вторая прячет его
<input type=checkbox name=xcheez value="please"checked>Extra Cheese		Независимый переключатель, который выбран по умолчанию. Если посетитель отправляет эту форму, параметру xcheez присваивается значение please
<input type=radio name=browser value="ie"checked>MSIE <input type=radio name=browser value="ns">Netscape		Два зависимых переключателя. Если посетитель отправляет эту форму, параметр browser становится или ie или ns
<input type=image src="gobtn.gif" height=16 width=16>		Рисунок gobtn.gif обеспечивает кнопку "отправить" для формы

<LINK>

Ссылается на внешнюю таблицу стилей или создает отношения с другой страницей или файлом.

Возможный результат

Страница использует стили, найденные во внешней таблице стилей styles.css

Internet Explorer использует указанный файл значка для меню Favorites

<MAP>…</MAP> и <AREA>

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

Возможный результат

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

<META>

Устанавливает переменные для страницы. При указании атрибута http-equiv ваш веб-сервер посылает переменные в броузер (как заголовок HTTP) до отправления страницы.

Возможный результат

<meta http-equiv="Content-Type" content="text/html charset=windows-1252">		Броузеры с другими параметрами языка будут правильно отображать специальные символы
<meta http-equiv="Refresh"content="7">		Броузер обновляет страницу каждые 7 секунд
<meta http-equiv="Refresh" content="7; URL=http://microsoft.com">		Броузер переадресует посетителя на microsoft.com через 7 секунд
<meta name="keywords"content="soup, nuts,kitchen sinks">		Ключевые слова для вашей страницы доступны для поисковых систем, которые их используют

<NOBR>…</NOBR>

Не дает броузеру разрывать строку. Если текст не умещается на экране, посетителям придется воспользоваться полосой прокрутки; если текст не умещается в колонке, она расширится.

<OBJECT>…</OBJECT>, <PARAM>

В Internet Explorer для Windows встраивает средство ActiveX для проигрывания медиа или отображения информации. Используйте тэг <PARAM> для указания параметров объекта.

Возможный результат

Отображает средство RealAudio ActiveX, загружает указанный аудио файл (.ram) после чего можно прослушивать

<OL>…</OL>, <LI>…</LI>

Отображает нумерованный список. Список с отступом и имеет отбивки сверху и снизу.

Возможный результат

<ol start=4> <li>Cuatro</li> <li>Cinco</li> <li>Seis</li> </ol>

4. Cuatro 5. Cinco 6. Seis

Основная структура страницы HTML

Страница HTML – это текстовый файл со следуюшей основной структурой:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <html> <head> <title>Page Title</title> </head> <body>  </body> </html>

Первая строка является необязательной, но она сообщает HTML программам подтверждения (вроде сервиса на www.w3.org), какую версию HTML вы собираетесь использовать на своей странице.

<P>…</P>

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

Возможный результат

<p align=center>This is a paragraph.</p>

Текст центрирован и имеет пустую строку сверху и снизу

<p style="margin-top:6;margin-bottom:6"> This P is tight with the neighbors.</p>

Между текстом и следующим параграфом 6 пикселов

<PRE>…</PRE>

Устанавливает моноширинный (машинописный) шрифт, и отображает текст точно, как он появляется в HTML (с такими же пробелами и разрывами строк).

Возможный результат

<pre> AGE OF AQUARIUS </pre>

AGE OF AQUARIUS

<SCRIPT>…</SCRIPT> и <NOSCRIPT>…</NOSCRIPT>

Обеспечивает код сценария, вроде JavaScript, для вашей страницы. Можно использовать блок <NOSCRIPT>, чтобы написать альттернативный HTML для броузеров, которые не понимают сценарии.

Возможный результат

Этот код переадресовывает посетителей, использующих Internet Explorer 4 или более поздних версий или Netscape 6 или более поздних версий на страницу с названием new.htm; благодаря индикаторам комментария сценарий будет проигнорирован старыми броузерами

<SELECT>…</SELECT> и <OPTION>

Отображает ниспадающее меню для выбора пользователем.

Возможный результат

Who’s on first?<br> <select name=answer> <option selected>What? <option>I dunno </select>

Ниспадающее меню с выбранным первым пунктом

<STYLE>…</STYLE>

Обеспечивает стиль из каскадированных таблиц стилей (cascading style sheet, сокращенно CSS) для страницы. Кратко о CSS которые вы можете создать, см. Приложение В.

<TABLE>…</TABLE>

Создает таблицу с одной или несколькими строками (блоки <TR>) и столбцами (блоки <TD>). По желанию вы можете добавить заголовки столбцов (блоки <TH>) или заголовок для всей таблицы.

Возможный результат

<table border=3 cellpadding=5> <caption>The Happy Life</caption> <tr> <th>Desire</th><th>Satisfaction</th </tr> <tr> <td>Greed</td><td>Generosity</td> </tr> </table>

Таблица данных с заголовком, строкой заголовка, и одной строкой данных

<table cellpadding=0 cellspacing=0 border=0 width=620> <tr> <td width=220> Narrow left column </td> <td width=400> Wide right column </td> </tr> </table>

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

<TEXTAREA>…</TEXTAREA>

Отображает область в несколько строк для ввода посетителем текста.

Возможный результат

Область текста 20 символов в ширину и 6 строк в высоту

<TITLE>…</TITLE>

Обеспечивает заголовок страницы, который появляется в строке заголовка броузера.

<UL>…</UL>, <LI>…</LI>

Отображает маркированный список. Список с отступом и имеет отбивки сверху и снизу.

Возможный результат

<p>I hope we have heard the last of:</p> <ul type=square> <li>Conformity</li> <li>Consistency</li> </ul>

I hope we have heard the last of: · Conformity · Consistency