Практика разработки Web-страниц

Приложение А. Список тэгов HTML

Показывать лекцию целиком

Ниже приведены наиболее широко используемые тэги и атрибуты HTML и рассмотрены примеры, которые могут оказаться полезными. Тэги организованы по их функциям. Чтобы сделать этот раздел более коротким и удобным для использования, в него включены только наиболее используемые тэги и атрибуты. За полным списком тэгов, атрибутов и возможных значений обратитесь к описанию HTML на www.w3.org/tr/html4 или к описанию HTML для двух наиболее распространенных браузеров на msdn.microsoft.com/workshop/author и developer.netscape.com/docs/manuals/htmlguid.

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

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

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

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

Структура и тэги заголовка страницы

<HTML>…</HTML>

Заключите в эти блоки всю страницу HTML.

<HEAD>…</HEAD>

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

<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)

<TITLE>…</TITLE>

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

<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">
 Ключевые слова для вашей страницы доступны для поисковых систем, которые их используют

<BASE>

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

Возможный результат
<base href="http://www.callahansoftware.com/">
 Все родственные гиперссылки обращаются к указанному веб сайту, даже если страница расположена не здесь 
<base target=main>
 Все гиперссылки загружают страницы в фрейм с названием "main"

<LINK>

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

Возможный результат
<link rel="stylesheet"type="text/css"
  href="styles.css">
 Страница использует стили, найденные во внешней таблице стилей styles.css 
<link rel="shortcut icon"
  href="favicon.ico">
 Internet Explorer использует указанный файл значка для меню Favorites

<STYLE>…</STYLE>

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

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

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

Возможный результат
<script language="JavaScript">
  <!--
    if (document.styleSheets)
      window.location='new.htm';.
  //-->
</script>
 Этот код переадресовывает посетителей, использующих Internet Explorer 4 или более поздних версий или Netscape 6 или более поздних версий на страницу с названием new.htm; благодаря индикаторам комментария сценарий будет проигнорирован старыми браузерами

<!-- comment -->

позволяет вам ввести комментарии в ваш 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 пикселов

<H1>…</H1> - <H6>…</H6>

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

<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 в таблице стилей

<BR>

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

Возможный результат
<br clear=all>
 Браузер разрывает строку и переходит на следующую

<NOBR>…</NOBR>

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

Форматирование текста

<FONT>…</FONT>

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

Возможный результат
<font size=4 face=
  "'Courier New',courier,monospace">
  My old friend the typewriter.</font>
 Показывает текст шрифтом Courier New (или другим имеющимся шрифтом), размер шрифта больше чем обычно

<B>…</B> или <STRONG>…</STRONG>

Пишет включенный текст жирно.

<I>…</I> или <EM>…</EM>

Пишет включенный текст наклонно.

<U>…</U>

Подчеркивает включенный текст.

<PRE>…</PRE>

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

Возможный результат
<pre>        
  AGE       
    OF       
      AQUARIUS
           </pre>
 
AGE       
    OF       
      AQUARIUS

<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

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

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

Возможный результат
<ol start=4>
  <li>Cuatro</li>  
  <li>Cinco</li>  
  <li>Seis</li>
</ol>
 
4. Cuatro
5. Cinco
6. Seis

Гиперссылки

<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; когда посетитель проводит мышкой по ссылке, в строке статуса появляется сообщение

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

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

Возможный результат
<map name=clickbot>
  <area shape=rect coords="26,40,86,177" 
    href="http://www.microsoft.com">
  <area shape=circle coords="67,207,21"
  href="http://www.chillbot.com">
</map>
<img usemap=#clickbot src="robot.gif"
  width=200 height=300 border=0>
 Отображает рисунок robot.gif с двумя невидимыми "горячими точками" на которые может нажать посетитель

Объекты и рисунки

<IMG>

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

Возможный результат
<img src="green.jpg"width=100 height=50
  align=right vspace=8 hspace=8>
 Помещает рисунок green.jpg в правое поле соответственно текст будет обтекать его слева. Рисунок появляется как минимум в 8 пикселах от краев текста или объектов 
<img src="welcome.gif"width=80
  height=30 alt="Welcome to Lewes,DE">
 Отображает рисунок welcome.gif и обеспечивает альтернативный текст для браузеров, которые не могут показать изображение

<HR>

Отображает горизонтальную линию поперек страницы.

<BGSOUND>

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

<EMBED>

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

Возможный результат
<embed src="Groove.wav"hidden=true
  autostart=true volume=50 loop=true>
 Автоматически проигрывает WAVE файл при открытии страницы 
<embed width=280 height=200
  src="chomsky.mov"autoplay=true
  controller=false
  type="video/quicktime"pluginspage=
    "http://www.apple.com/quicktime/">
 Отображает плагин QuickTime и проигрывает указанный файл movie (.mov).

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

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

Возможный результат
<object id="real"classid=
"clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
    width=300 height=100>
  <param name="src"value="Ocean.ram">
  <param name="hidden"value="false">
  <param name="autostart"value="false">
</object>
 Отображает средство RealAudio ActiveX, загружает указанный аудио файл (.ram) после чего можно прослушивать

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

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

Возможный результат
<applet code="chat.class"
  width=495 height=83>
  <param name="server"value="ares">
  <param name="user"value="evan">
  <param name="picture"value="evan.jpg">
</applet>
 Отображает апплет, код которого находится в файле chat.class, отправляет три параметра апплету

Таблицы и фреймы

<TABLE>…</TABLE>, <TR>…</TR>, <TD>…</TD>, <TH>…</TH> и <CAPTION>

Создает таблицу с одной или несколькими строками (блоки <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>
 Таблица размещения страницы в две колонки без пробелов или границ между ячейками

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

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

Возможный результат
<frameset cols="120,*"frameborder=0 
  framespacing=0 frameborder=no border=0> 
  <frame src="navbar.htm">
  <frame src="main.htm">
</frameset>
 Страница с фреймами без границ. Левый фрейм 120 пикселов в ширину, а правый занимает оставшееся пространство

<IFRAME>…</IFRAME>

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

Формы

<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 для выполнения

<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 обеспечивает кнопку "отправить" для формы

<TEXTAREA>…</TEXTAREA>

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

Возможный результат
<textarea name=story rows=6 cols=20>
</textarea>
 Область текста 20 символов в ширину и 6 строк в высоту

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

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

Возможный результат
Who’s on first?<br>
  <select name=answer>
    <option selected>What?
    <option>I dunno
  </select>
 Ниспадающее меню с выбранным первым пунктом
Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^