Теги HTML
Материал из Pocket Fallout для КПК на PDA PC PPC Mobile.
Содержание |
Основные элементы («теги»)
Теги и их параметры нечувствительны к регистру. То есть <A HREF=http://yahoo.com> и <a href=http://yahoo.com> означают одно и то же.
В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.
Гиперссылки
-
<A HREF=url > гиперссылка </A>— гиперссылка.
Текстовые блоки
-
<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)
Форматирование текста
-
<EM> … </EM>— логическое ударение (обычно отображается курсивным шрифтом) -
<CITE> … </CITE>— цитата или ссылка на другой ресурс. -
<STRONG> … </STRONG>— усиленное логическое ударение (обычно отображается жирным шрифтом) -
<I> … </I>— выделение текста курсивом -
<B> … </B>— выделение текста жирным шрифтом -
<U> … </U>— подчёркивание текста -
<S> … </S>— зачёркивание текста. Вот так:зачёркнутый текст. -
<STRIKE> … </STRIKE>— то же самое, что<S> … </S> -
<BIG> … </BIG>— увеличение шрифта -
<SMALL> … </SMALL>— уменьшение шрифта -
<BLINK> … </BLINK>— мигающий текст. Это один из самых ненавидимых тегов, потому что мигающий текст неприятен для глаз. -
<MARQUEE> … </MARQUEEK>— сдвигающийся по экрану текст. Степень народной любви к этому тэгу примерно такая же, как и к мигающему. -
<SUB> … </SUB>— подстрочный текст. Например, H<SUB>2</SUB>Oсоздаст текст H2O. -
<SUP> … </SUP>— надстрочный текст. Например, E=mc<SUP>2</SUP>создаст текст E=mc2. -
<TT>TYPEWRITER-LIKE</TT>— не пропорциональный моноширинный шрифт такой или ТАКОЙ. CSS-аналог:{font-family: monospace} -
<FONT параметры> … </FONT>— задание параметров шрифта. У этого тега есть следующие параметры:- COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.
- FACE=шрифт меняет шрифт
- SIZE=размер меняет размер шрифта. Размер от 1 до 7, стандартный по умолчанию 3. (Есть много способов изменить стандартный размер для данной страницы.)
- SIZE=+размер или SIZE=-размер — размер задаётся по сравнению со стандартным. Например, +2 означает размер на 2 больше стандартного.
Так, например,
Сигналом к началу атаки являются <U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.
создаст текст
- Сигналом к началу атаки являются три больших зелёных свистка.
Комментарии HTML
<!--…-->
- Encloses a comment. This is an SGML tag and not limited to HTML, so it may appear anywhere in the document, even before the DTD or after
</html>. A client should render none of its enclosed contents. The closing ">" is required. For compatibility with some pre-1995 browsers, SGML comments are sometimes used inside<style>or<script>tags, but this is not necessary and may in fact cause undesired effects.
Списки
<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> можно и не закрывать.
Объекты
-
<IMG SRC=имя или URL>— вставка изображения. Этот таг не закрывается. - EMBED — вставка различных объектов: не-HTML документов и media-файлов
- APPLET — вставка Java-апплетов
- SCRIPT — вставка скриптов.
Таблицы
- TABLE — создание таблицы. Параметры тега:
- BORDER — толщина разделительных линий в таблице
- CELLSPACING — расстояние между клетками
- CAPTION — заголовок таблицы (этот тег необязателен)
- TR — строка таблицы
- TH — заголовок столбца таблицы (этот тег необязателен)
- TD — ячейка таблицы
- height - высота таблицы
Так, например,
<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 — пункт списка