Элемент HTML — это основная структурная единица веб-страницы, написанная на языке HTML

 

Структура HTML-документа

HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки<br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:

<p>Текст между двумя тегами - открывающим и закрывающим.</p>
<a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>
А вот пример пустого элемента: <br>

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:

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

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Варианты DOCTYPE для HTML 4.01

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

DOCTYPE для HTML 5[править | править исходный текст]

В отличие от предыдущих версий тег всего один [1]

<!DOCTYPE html>

Основные элементы («теги»)

Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://example.com"> и <a href="http://example.com"> означают одно и то же.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.

Гиперссылки[править | править исходный текст]

<A HREF="filename" target="_self">название ссылки</A>

Значение по умолчанию: _self.

Текстовые блоки[править | править исходный текст]

Форматирование текста[править | править исходный текст]

Так, например,

Сигналом к началу атаки являются
<U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.

создаст текст

Сигналом к началу атаки являются три больших зелёных свистка.

Списки[править | править исходный текст]

 <UL>
<LI> первый элемент </LI>
<LI> второй элемент </LI>
<LI> третий элемент </LI>
</UL>

создаёт список

Если вместо <UL> (Unordered List — ненумерованный список) поставить <OL> (Ordered List — нумерованный список), список получится нумерованным:

  1. первый элемент
  2. второй элемент
  3. третий элемент

У этих тегов есть параметры:

type = "тип" 

где тип — форма: в <UL>  — символов

а в <OL>  — цифр или букв

пишется так:

<ol type="i">
 
<li> Первое </li>
 
<li> Второе </li>
 
<li> И т.д. </li>
 
</ol>

и создаст следующее:

  1. Первое
  2. Второе
  3. И т. д.

Параметр start="начало" (только для <OL> ), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26

Пишется так:

<ol start="24">
 
<li> Двадцать четыре </li>
 
<li> Двадцать пять </li>
 
<li> И т.д. </li>

и создаст следующее:

  1. Двадцать четыре
  2. Двадцать пять
  3. И т. д.

и, наконец для тега <LI> параметр value="следующий" — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23

<ol>
 
<li> Один </li>
 
<li> Два </li>
 
<li value="22"> Двадцать два </li>
 
<li> Двадцать три </li>

создаст следующее:

  1. Один
  2. Два
  3. Двадцать два
  4. Двадцать три

Наконец, третьим, и последним, списком является список определений:

 
<DL>
<DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>
<DT> Кот </DT> <DD> муж кошки </DD>
<DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD>
</DL>

создаст следующее:

Кошка
мяукающее домашнее животное
Кот
муж кошки
Крокодил
большой африканский зверь с острыми зубами

Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

Объекты[править | править исходный текст]

Изображения[править | править исходный текст]

Пример:

<IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">

Изображение можно сделать ссылкой:

<A HREF=url ><IMG SRC=url></A>

Карта изображений[править | править исходный текст]

Пример:

<IMG width="500" height="200" usemap="#somemap" src="url">
<MAP name="somemap">
<AREA shape="rect" coords="6, 7, 140, 196" href="url1">
<AREA shape="circle" coords="239, 98, 92" href="url2">
<AREA shape="polygon" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74" href="url3">
</MAP>

Таблицы

Так, например,

<TABLE BORDER="1" CELLSPACING="0">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH> 
<TH> Улов </TH>
<TR>
<TD> 1997 </TD> 
<TD> 214 </TD>
</TR>
<TR>
<TD> 1998 </TD> 
<TD> 216 </TD>
</TR>
<TR>
<TD> 1999 </TD> 
<TD> 207 </TD>
</TR>
</TABLE>

Создаст таблицу:

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207

У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207

Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

Например, если заменить первые строки таблицы на

<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207

Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе со вложенными таблицами.

Формы

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

Символы

Чтобы создать символ, необязательно искать его на клавиатуре. Можно просто набрать тег (например, чтобы получить ¢, надо набрать следующее: &cent;). Пробел — &nbsp; , ударение — &#x301; и т. д.

Названия цветов

В HTML определены следующие цвета.

Название Шестнадцатеричный цвет
black #000000
silver #c0c0c0
maroon #800000
red #ff0000
navy #000080
blue #0000ff
purple #800080
fuchsia #ff00ff
green #008000
lime #00ff00
olive #808000
yellow #ffff00
teal #008080
aqua #00ffff
gray #808080
white #ffffff

Основные символы

Код Символ Смысл
&lt; < меньше
&gt; > больше
&amp; & амперсанд
&nbsp;   неразрывный пробел (на этом пробеле не переводится строка)
&sect; § параграф
&#8470; номер
&copy; © копирайт (copyright)
&reg; ® зарегистрированный товарный знак (registered trademark)
&#153; товарный знак (trademark)
&deg; ° градусы
&laquo; «  открывающая кавычка в русском языке
&raquo;  » закрывающая кавычка в русском языке
&hellip; многоточие
&mdash; тире
&#149; жирная точка
&plusmn; ± плюс-минус
&minus; минус

Клавиатурные символы ' и " в русском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.

Дефис, тире и минус — три разных знака.

  1. Клавиатурный символ - называется дефис и используется внутри слов.
  2. Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.
  3. Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.

Более подробно: Артемий Лебедев. Тире, минус и дефис, или Черты русской типографики. Ководство (15 января 2003). Архивировано из первоисточника 24 августа 2011.

В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.

Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются &lt;, &gt; и &amp; соответственно.

Большинство спецсимволов см. на сайте about.com