Инструменты
На других языках
Элементы HTML
 |
Эта статья или раздел нуждается в переработке.
Пожалуйста, улучшите её в соответствии с правилами написания статей.
|
Эта статья посвящена в основном элементам HTML. Чтобы узнать о формате элементов Википедии, см. Википедия:Как редактировать статью и m:Помощь: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
- Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
[править] Основные элементы («теги»)
Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://yahoo.com"> и <a href="http://yahoo.com"> означают одно и то же.
В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.
[править] Гиперссылки
<А HREF="filename" target="_self">текст ссылки</A> Атрибут HREF задает значение адреса документа, на который указывает ссылка, filename - имя файла или адрес Internet, на который необходимо сослаться, а текст_ссылки - текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе. Атрибут TARGET задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута: • _top - открытие документа в текущем окне • _blank - открытие документа в новом окне • _self - открытие документа в текущем фрейме • _parent - открытие документа в родительском фрейме Значение по умолчанию: _self
[править] Текстовые блоки
<H1> … </H1>,<H2> … </H2>, … ,<H6> … </H6>— заголовки 1, 2, … 6 уровня.<P>— новый абзац. Можно в конце абзаца поставить</P>, но это не обязательно.<BR>— новая строка. Этот тег не закрывается (то есть не существует тега</BR>)<HR>— горизонтальная линия<BLOCKQUOTE> … </BLOCKQUOTE>— цитата. Обычно текст сдвигается вправо.<PRE> … </PRE>— режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе).<DIV> … </DIV>— блок (обычно используется для применения стилей CSS)<SPAN> … </SPAN>— строка (обычно используется для применения стилей CSS)
[править] Списки
<UL> <LI> первый элемент </LI> <LI> второй элемент </LI> <LI> третий элемент </LI> </UL>
создаёт список
- первый элемент
- второй элемент
- третий элемент
Если вместо <UL> (Unordered List, что означает ненумерованный список) поставить <OL> (Ordered List, нумерованный список), список получится нумерованным:
- первый элемент
- второй элемент
- третий элемент
Наконец, третьим, и последним, списком, является список определений:
<DL> <DT> Кошка </DT> <DD> мяукающее домашнее животное </DD> <DT> Кот </DT> <DD> муж кошки </DD> <DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD> </DL>
создаст следующее:
- Кошка
- мяукающее домашнее животное
- Кот
- муж кошки
- Крокодил
- большой африканский зверь с острыми зубами
Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.
[править] Объекты
- EMBED — вставка различных объектов: не-HTML документов и media-файлов
- APPLET — вставка Java-апплетов
- SCRIPT — вставка скриптов.
[править] Изображения
- IMG - вставка изображения. Этот тег не закрывается.
- SRC - имя или URL
- ALT - альтернативное имя (отобразится, если в браузере запретить отображать картинки)
- TITLE - краткое описание изображения (отобразится при наведении курсора на картинку)
- WIDTH, HEIGHT - размеры (если не совпадают с истинными размерами картинки, то изображение "растянется"http://ru.wikipedia.org/"сожмется")
- ALIGN - задает параметры обтекания текстом (top, middle, bottom, left, right)
- VSPACE, HSPACE - задают размеры вертикального и горизонтального пространства вокруг изображения
Пример:
<IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">
Изображение можно сделать ссылкой:
<A HREF=url ><IMG SRC=url></A>
[править] Таблицы
- TABLE — создание таблицы. Параметры тега:
- BORDER — толщина разделительных линий в таблице
- CELLSPACING — расстояние между клетками
- CAPTION — заголовок таблицы (этот тег необязателен)
- TR — строка таблицы
- TH — заголовок столбца таблицы (этот тег необязателен)
- TD — ячейка таблицы
- height - высота таблицы
- width - ширина таблицы
Так, например,
<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 является довольно сложным делом. Здесь приводятся только названия основных тегов.
- FORM — создание формы
- INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)
- TEXTAREA — текстовая область (многострочное поле для ввода текста)
- SELECT — список (обычно в виде выпадающего меню)
- OPTION — пункт списка
