Теги HTML

Материал из PocketZ_wiki
Перейти к: навигация, поиск

Оригинал

Содержание

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

Теги и их параметры нечувствительны к регистру. То есть <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, нумерованный список), список получится нумерованным:

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

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

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

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

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

Между прочим, теги <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 — пункт списка


Источник — «http://wiki.pocketz.ru/wiki/%D0%A2%D0%B5%D0%B3%D0%B8_HTML»
Личные инструменты