Элементы 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 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">
В отличие от предыдущих версий тег всего один [1]
<!DOCTYPE html>
Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://yahoo.com"> и <a href="http://yahoo.com"> означают одно и то же.
В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.
<A HREF="filename" target="_self">название ссылки</A>
HREF задает значение адреса документа, на который указывает ссылка.filename — имя файла или адрес Internet, на который необходимо сослаться.название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу.TARGET — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
_top — открытие документа в текущем окне;_blank — открытие документа в новом окне;_self — открытие документа в текущем фрейме;_parent — открытие документа в родительском фрейме.Значение по умолчанию: _self.
<H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6> — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый большой, 6 — почти равен обычном тексту по умолчанию).<P> — новый абзац. Можно в конце абзаца поставить </P>, но это не обязательно.<BR> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>)<HR> — горизонтальная линия<BLOCKQUOTE> … </BLOCKQUOTE> — цитата. Обычно текст сдвигается вправо.<PRE> … </PRE> — режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе).<DIV> … </DIV> — блок (обычно используется для применения стилей CSS)<SPAN> … </SPAN> — строка (обычно используется для применения стилей CSS)<EM> … </EM> — логическое ударение (обычно отображается курсивным шрифтом)<STRONG> … </STRONG> — усиленное логическое ударение (обычно отображается жирным шрифтом)<I> … </I> — выделение текста курсивом<B> … </B> — выделение текста жирным шрифтом<U> … </U> — подчёркивание текста<S> … </S> — зачёркивание текста. Вот так: <STRIKE> … </STRIKE> — то же самое, что <S> … </S><BIG> … </BIG> — увеличение шрифта<SMALL> … </SMALL> — уменьшение шрифта<BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег может не работать в браузере Internet Explorer версий 5 и ниже без применения JavaScript<MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст.<SUB> … </SUB> — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H2O.<SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc2.<FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:
Так, например,
Сигналом к началу атаки являются <U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.
создаст текст
<UL> <LI> первый элемент </LI> <LI> второй элемент </LI> <LI> третий элемент </LI> </UL>
создаёт список
Если вместо <UL> (Unordered List, что означает ненумерованный список) поставить <OL> (Ordered List, нумерованный список), список получится нумерованным:
У этих тегов есть параметры:
«type»="тип"
где тип — форма цифр или букв (может быть в ul -
а в ol -
пишется так:
<ol type="i"> <li> Первое </li> <li> Второе </li> <li> И т.д. </li> </ol>
, параметр «start» (для <ol), определяющий начало нового отсчета, например, не 1, 2, 3, а 14, 15, 16
Пишется так:
<ol start="24"> <li> Двадцать четыре </li> <li> Двадцать пять </li> <li> И т.д. </li>
и, наконец для тега <li параметр «value» - если необходимо перескочить с одной цифры на другую, например, не 1, 2, 3, а 1, 2, 4, 5, и т.д.
<ol> <li> Один </li> <li> Два </li> <li value="22"> Двадцать два </li> <li> Двадцать три </li>
.
Наконец, третьим, и последним, списком, является список определений:
<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>
Так, например,
<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 является довольно сложным делом. Здесь приводятся только названия основных тегов.
Чтобы создать символ, необязательно найти на клавиатуре. Можно просто набрать тег (например: цент — чтобы создать надо набрать следующее: ¢). Пробел - , ударение - ́ и т. д.
В 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 |
| Код | Символ | Смысл |
|---|---|---|
| < | < | |
| > | > | |
| & | & | |
| | неразрывный пробел (на этом пробеле не переводится строка) | |
| § | § | |
| № | № | |
| © | © | копирайт (copyright) |
| ® | ® | зарегистрированный товарный знак (registered trademark) |
| ™ | ™ | товарный знак (trademark) |
| ° | ° | градусы |
| « | " | открывающая кавычка в русском языке |
| » | « | закрывающая кавычка в русском языке |
| … | … | многоточие |
| — | — | тире |
| • | • | жирная точка |
| ± | ± | плюс-минус |
| − | − | минус |
Клавиатурные символы ' и » в руском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), ™, C.
Дефис, тире и минус — три разных знака.
В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.
Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл.
Полный набор специальных символов см. на сайте Владимира Городулина.
Для автоматической замены символов на специальные см. Типограф на сайте Артёма Лебедева.
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
