Сейчас:
Коды символов HTML:
|
Символ
|
HTML код
|
|
&
|
&
|
|
§
|
§
|
|
"
|
"
|
|
Пробел
|
|
|
<
|
<
|
|
>
|
>
|
|
≤
|
≤
|
|
≥
|
≥
|
|
«
|
«
|
|
»
|
»
|
|
±
|
±
|
|
©
|
©
|
|
®
|
®
|
|
™
|
™
|
|
€
|
€
|
|
$
|
$
|
|
¶
|
¶
|
|
½
|
½
|
|
¼
|
¼
|
|
⅛
|
⅛
|
|
←
|
←
|
|
→
|
→
|
|
↑
|
↑
|
|
↓
|
↓
|
|
⇐
|
⇐
|
|
⇒
|
⇒
|
|
⇑
|
⇑
|
|
⇓
|
⇓
|
|
♠
|
♠
|
|
♣
|
♣
|
|
♥
|
♥
|
|
♦
|
♦
|
|
æ
|
æ
|
|
Æ
|
Æ
|
|
à
|
à
|
|
á
|
á
|
|
â
|
â
|
|
ä
|
ä
|
|
å
|
å
|
|
ç
|
ç
|
|
ë
|
ë
|
|
é
|
é
|
|
|
|
|
℀
|
℀
|
|
℁
|
℁
|
|
ℂ
|
ℂ
|
|
℃
|
℃
|
|
℄
|
℄
|
|
℅
|
℅
|
|
℆
|
℆
|
|
ℇ
|
ℇ
|
|
℈
|
℈
|
|
℉
|
℉
|
|
ℊ
|
ℊ
|
|
ℋ
|
ℋ
|
|
ℌ
|
ℌ
|
|
ℍ
|
ℍ
|
|
ℎ
|
ℎ
|
|
ℏ
|
ℏ
|
|
ℐ
|
ℐ
|
|
ℑ
|
ℑ
|
|
ℒ
|
ℒ
|
|
ℓ
|
ℓ
|
|
℔
|
℔
|
|
ℕ
|
ℕ
|
|
№
|
№
|
|
℗
|
℗
|
|
℘
|
℘
|
|
ℙ
|
ℙ
|
|
ℚ
|
ℚ
|
|
ℛ
|
ℛ
|
|
ℜ
|
ℜ
|
|
ℝ
|
ℝ
|
|
℞
|
℞
|
|
℟
|
℟
|
|
℠
|
℠
|
|
℡
|
℡
|
|
™
|
™
|
|
℣
|
℣
|
|
ℤ
|
ℤ
|
|
℥
|
℥
|
|
Ω
|
Ω
|
|
℧
|
℧
|
|
ℨ
|
ℨ
|
|
℩
|
℩
|
|
K
|
K
|
|
Å
|
Å
|
|
ℬ
|
ℬ
|
|
ℭ
|
ℭ
|
|
℮
|
℮
|
|
ℯ
|
ℯ
|
|
ℰ
|
ℰ
|
|
ℱ
|
ℱ
|
|
Ⅎ
|
Ⅎ
|
|
ℳ
|
ℳ
|
|
ℴ
|
ℴ
|
|
←
|
←
|
|
↑
|
↑
|
|
→
|
→
|
|
↓
|
↓
|
|
↔
|
↔
|
|
↕
|
↕
|
|
↖
|
↖
|
|
↗
|
↗
|
|
↘
|
↘
|
|
↙
|
↙
|
|
↚
|
↚
|
|
↛
|
↛
|
|
↜
|
↜
|
|
↝
|
↝
|
|
↞
|
↞
|
|
↟
|
↟
|
|
↠
|
↠
|
|
↡
|
↡
|
|
↢
|
↢
|
|
↣
|
↣
|
|
↤
|
↤
|
|
↥
|
↥
|
|
↦
|
↦
|
|
↧
|
↧
|
|
↨
|
↨
|
|
↩
|
↩
|
|
↪
|
↪
|
|
↫
|
↫
|
|
↬
|
↬
|
|
↭
|
↭
|
|
↮
|
↮
|
|
↯
|
↯
|
|
↰
|
↰
|
|
↱
|
↱
|
|
↲
|
↲
|
|
↳
|
↳
|
|
↴
|
↴
|
|
↵
|
↵
|
|
↶
|
↶
|
|
↷
|
↷
|
|
↸
|
↸
|
|
↹
|
↹
|
|
↺
|
↺
|
|
↻
|
↻
|
|
↼
|
↼
|
|
↽
|
↽
|
|
↾
|
↾
|
|
↿
|
↿
|
|
⇀
|
⇀
|
|
⇁
|
⇁
|
|
⇂
|
⇂
|
|
⇃
|
⇃
|
|
⇄
|
⇄
|
|
⇅
|
⇅
|
|
⇆
|
⇆
|
|
⇇
|
⇇
|
|
⇈
|
⇈
|
|
⇉
|
⇉
|
|
⇊
|
⇊
|
|
⇋
|
⇋
|
|
⇌
|
⇌
|
|
⇍
|
⇍
|
|
⇎
|
⇎
|
|
⇏
|
⇏
|
|
⇐
|
⇐
|
|
⇑
|
⇑
|
|
⇒
|
⇒
|
|
⇓
|
⇓
|
|
⇔
|
⇔
|
|
⇕
|
⇕
|
|
⇖
|
⇖
|
|
⇗
|
⇗
|
|
⇘
|
⇘
|
|
⇙
|
⇙
|
|
⇚
|
⇚
|
|
⇛
|
⇛
|
|
⇜
|
⇜
|
|
⇝
|
⇝
|
|
⇞
|
⇞
|
|
⇟
|
⇟
|
|
⇠
|
⇠
|
|
⇡
|
⇡
|
|
⇢
|
⇢
|
|
⇣
|
⇣
|
|
⇤
|
⇤
|
|
⇥
|
⇥
|
|
⇦
|
⇦
|
|
⇧
|
⇧
|
|
⇨
|
⇨
|
|
⇩
|
⇩
|
|
∀
|
∀
|
|
∁
|
∁
|
|
∂
|
∂
|
|
∃
|
∃
|
|
∄
|
∄
|
|
∅
|
∅
|
|
∆
|
∆
|
|
∇
|
∇
|
|
∈
|
∈
|
|
∉
|
∉
|
|
∊
|
∊
|
|
∋
|
∋
|
|
∌
|
∌
|
|
∍
|
∍
|
|
∎
|
∎
|
|
∏
|
∏
|
|
∐
|
∐
|
|
∑
|
∑
|
|
−
|
−
|
|
∓
|
∓
|
|
∔
|
∔
|
|
∕
|
∕
|
|
∖
|
∖
|
|
∗
|
∗
|
|
∘
|
∘
|
|
∙
|
∙
|
|
√
|
√
|
|
∛
|
∛
|
|
∜
|
∜
|
|
∝
|
∝
|
|
∞
|
∞
|
|
∟
|
∟
|
|
∠
|
∠
|
|
∡
|
∡
|
|
∢
|
∢
|
|
∣
|
∣
|
|
∤
|
∤
|
|
∥
|
∥
|
|
∦
|
∦
|
|
∧
|
∧
|
|
∨
|
∨
|
|
∩
|
∩
|
|
∪
|
∪
|
|
∫
|
∫
|
|
∬
|
∬
|
|
∭
|
∭
|
|
∮
|
∮
|
|
∯
|
∯
|
|
∰
|
∰
|
|
∱
|
∱
|
|
∲
|
∲
|
|
∳
|
∳
|
|
∴
|
∴
|
|
∵
|
∵
|
|
∶
|
∶
|
|
∷
|
∷
|
|
∸
|
∸
|
|
∹
|
∹
|
|
∺
|
∺
|
|
∻
|
∻
|
|
∼
|
∼
|
|
∽
|
∽
|
|
∾
|
∾
|
|
∿
|
∿
|
|
≀
|
≀
|
|
≁
|
≁
|
|
≂
|
≂
|
|
≃
|
≃
|
|
≄
|
≄
|
|
≅
|
≅
|
|
≆
|
≆
|
|
≇
|
≇
|
|
≈
|
≈
|
|
≉
|
≉
|
|
≊
|
≊
|
|
≋
|
≋
|
|
≌
|
≌
|
|
≍
|
≍
|
|
≎
|
≎
|
|
≏
|
≏
|
|
≐
|
≐
|
|
≑
|
≑
|
|
≒
|
≒
|
|
≓
|
≓
|
|
≔
|
≔
|
|
≕
|
≕
|
|
≖
|
≖
|
|
≗
|
≗
|
|
≘
|
≘
|
|
≙
|
≙
|
|
≚
|
≚
|
|
≛
|
≛
|
|
≜
|
≜
|
|
≝
|
≝
|
|
≞
|
≞
|
|
≟
|
≟
|
|
≠
|
≠
|
|
≡
|
≡
|
|
≢
|
≢
|
|
≣
|
≣
|
|
≤
|
≤
|
|
≥
|
≥
|
|
≦
|
≦
|
|
≧
|
≧
|
|
≨
|
≨
|
|
≩
|
≩
|
|
≪
|
≪
|
|
≫
|
≫
|
|
≬
|
≬
|
|
≭
|
≭
|
|
≮
|
≮
|
|
≯
|
≯
|
|
≰
|
≰
|
|
≱
|
≱
|
|
≲
|
≲
|
|
≳
|
≳
|
|
≴
|
≴
|
|
≵
|
≵
|
|
≶
|
≶
|
|
≷
|
≷
|
|
≸
|
≸
|
|
≹
|
≹
|
|
≺
|
≺
|
|
≻
|
≻
|
|
≼
|
≼
|
|
≽
|
≽
|
|
≾
|
≾
|
|
≿
|
≿
|
|
⊀
|
⊀
|
|
⊁
|
⊁
|
|
⊂
|
⊂
|
|
⊃
|
⊃
|
|
⊄
|
⊄
|
|
⊅
|
⊅
|
|
⊆
|
⊆
|
|
⊇
|
⊇
|
|
⊈
|
⊈
|
|
⊉
|
⊉
|
|
⊊
|
⊊
|
|
⊋
|
⊋
|
|
⊌
|
⊌
|
|
⊍
|
⊍
|
|
⊎
|
⊎
|
|
⊏
|
⊏
|
|
⊐
|
⊐
|
|
⊑
|
⊑
|
|
⊒
|
⊒
|
|
⊓
|
⊓
|
|
⊔
|
⊔
|
|
⊕
|
⊕
|
|
⊖
|
⊖
|
|
⊗
|
⊗
|
|
⊘
|
⊘
|
|
⊙
|
⊙
|
|
⊚
|
⊚
|
|
⊛
|
⊛
|
|
⊜
|
⊜
|
|
⊝
|
⊝
|
|
⊞
|
⊞
|
|
⊟
|
⊟
|
|
⊠
|
⊠
|
|
⊡
|
⊡
|
|
⊢
|
⊢
|
|
⊣
|
⊣
|
|
⊤
|
⊤
|
|
⊥
|
⊥
|
|
⊦
|
⊦
|
|
⊧
|
⊧
|
|
⊨
|
⊨
|
|
⊩
|
⊩
|
|
⊪
|
⊪
|
|
⊫
|
⊫
|
|
⊬
|
⊬
|
|
⊭
|
⊭
|
|
⊮
|
⊮
|
|
⊯
|
⊯
|
|
⊰
|
⊰
|
|
⊱
|
⊱
|
|
⊲
|
⊲
|
|
⊳
|
⊳
|
|
⊴
|
⊴
|
|
⊵
|
⊵
|
|
⊶
|
⊶
|
|
⊷
|
⊷
|
|
⊸
|
⊸
|
|
⊹
|
⊹
|
|
⊺
|
⊺
|
|
⊻
|
⊻
|
|
⊼
|
⊼
|
|
⊽
|
⊽
|
|
⊾
|
⊾
|
|
⊿
|
⊿
|
|
⋀
|
⋀
|
|
⋁
|
⋁
|
|
⋂
|
⋂
|
|
⋃
|
⋃
|
|
⋄
|
⋄
|
|
⋅
|
⋅
|
|
⋆
|
⋆
|
|
⋇
|
⋇
|
|
⋈
|
⋈
|
|
⋉
|
⋉
|
|
⋊
|
⋊
|
|
⋋
|
⋋
|
|
⋌
|
⋌
|
|
⋍
|
⋍
|
|
⋎
|
⋎
|
|
⋏
|
⋏
|
|
⋐
|
⋐
|
|
⋑
|
⋑
|
|
⋒
|
⋒
|
|
⋓
|
⋓
|
|
⋔
|
⋔
|
|
⋕
|
⋕
|
|
⋖
|
⋖
|
|
⋗
|
⋗
|
|
⋘
|
⋘
|
|
⋙
|
⋙
|
|
⋚
|
⋚
|
|
⋛
|
⋛
|
|
⋜
|
⋜
|
|
⋝
|
⋝
|
|
⋞
|
⋞
|
|
⋟
|
⋟
|
|
⋠
|
⋠
|
|
⋡
|
⋡
|
|
⋢
|
⋢
|
|
⋣
|
⋣
|
|
⋤
|
⋤
|
|
⋥
|
⋥
|
|
⋦
|
⋦
|
|
⋧
|
⋧
|
|
⋨
|
⋨
|
|
⋩
|
⋩
|
|
⋪
|
⋪
|
|
⋫
|
⋫
|
|
⋬
|
⋬
|
|
⋭
|
⋭
|
|
⋮
|
⋮
|
|
⋯
|
⋯
|
|
⋰
|
⋰
|
|
Краткий справочник по HTML
1. Элементы WEB-страницы
Таблица 1.1. Организующие страницу элементы:
|
Элемент
|
Назначение
| |
<html> ... </html>
|
Начальный и заключительный тег HTML-документа
| |
<head> ... </head>
|
Объявление заголовка WEB-страницы, содержит описание страницы
| |
<title> ... </title>
|
Элемент определяет название страницы, которое выводится в строке заголовка окна браузера. Располагается внутри заголовка <html> WEB-страницы, учитывается при индексации страницы поисковыми машинами
| |
<body> ... </body>
|
Между этими тегами находится основное содержание страницы
Атрибуты:
|
Атрибут
|
Назначение
| |
bgcolor="значение"
|
Задает фоновый цвет страницы. Переменная "значение" представлена в виде текстовой величины (принятые в WEB названия цветов), либо в виде шестнадцатиричного числа, обозначающего цвет - "#ddf112"
| |
background="адрес"
|
Задает фоновый рисунок страницы. "значение" - адрес файла изображения, которое станет фоновым рисунком страницы. При этом рисунок не растягивается, а заполняет всю страницу путем клонирования
| |
|
|
| |
<base href="адрес">
|
Определение "базового" URL каталога сайта. Все относительные ссылки на странице, содержащей этот элемент будут определяться относительно него. Располагается внутри элемента <head>
| |
<!-- ..... -->
|
Комментарий. Может располагаться в любом месте страницы. На экран браузера не выводится. Надежное средство для борьбы со склерозом..
|
2. Элементы форматирования текста
Таблица 2.1. Элементы стилей абзаца и списков:
|
Элемент
|
Назначение
| |
<h1> ... </h1>
|
Заголовки первого уровня
| |
<h2>... </h2>
|
Заголовки второго уровня
| |
<h3> ... </h3>
|
Заголовки третьего уровня
| |
<h4> ... </h4>
|
Заголовки четвертого уровня
| |
<h5> ... </h5>
|
Заголовки пятого уровня
| |
<h6> ... </h6>
|
Заголовки шестого уровня
| |
<p> ... </p>
|
Простой абзац. Приведенные атрибуты могут быть использованы со всеми элементами, определяющими стиль абзаца, в том числе и с заголовками.
Атрибуты:
|
Атрибут
|
Назначение
| |
align="значение"
|
Расположение текста абзаца относительно границ окна (выравнивание текста). Может принимать значения: "left" - выравнивание по левому краю, "right" - выравнивание по правому краю, "justify" - выравникание по ширине и "center" - выравнивание по центру
|
| |
<blockquote> ... </blockquote>
|
Виртуальное выделение абзаца путем добавления отступа слева
| |
<pre> ... </pre>
|
Преформатированный абзац. Выводится в окне браузера точно также, как был набран в редакторе. Учитывает пробелы и переводы строки при вводе. Результат выводится на экран моноширинным шрифтом
| |
<br> или, <br>
|
Разрыв строки. Браузером распознается и выполняется как перевод строки. Может быть использован внутри элементов, определяющих абзац
| |
<hr> или <hr>
|
Рисует горизонтальную линию
Атрибуты:
|
Атрибут
|
Назначение
| |
width="значение"
|
Длина линии, указанная либо в относительных единицах (процентах) либо в абсолютных - пикселях
| |
size="значение"
|
Ширина линии в пикселах
| |
align="значение"
|
Расположение: выравнивание по левому, правому краю либо по центру
| |
noshade="noshade"
|
Изменяет внешний вид линии, убирая тень линии
|
|
<ol> <li>..</li> <li>..</li> </ol>
|
Нумерованный список
Атрибуты:
|
Атрибут
|
Назначение
| |
type="значение"
|
Значение определяет вид нумерации:
"A" - Прописные буквы
"a" - Строчные буквы
"I" - Большие римские цифры
"i" - Малые римские цифры
"1" - Арабские цифры (по умолчанию) |
|
start="значение"
|
Указывает, какое значение для данного списка будет являться стартовым
|
|
<ul> <li>..</li> <li>..</li> </ul>
|
Маркированный список.
Атрибуты:
|
Атрибут
|
Назначение
| |
type="значение"
|
Значение определяет вид маркера:
"disc" - Кружок (по умолчанию)
"square" - Квадратик
"circle" - Кольцо
|
Списки различных типов могут быть вложены один в другой. В этом случае отдельная строка списка должна содержать полностью оформленный список нижнего подуровня
|
Таблица 2.2. Логические стили форматирования текста WEB-страницы:
|
Элемент
|
Назначение
| |
<em> ... </em>
|
Выделение
| |
<strong> ... </strong>
|
Усиленное выделение
| |
<cite> ... </cite>
|
Цитата или ссылка на внешний источник
| |
<dfn> ... </dfn>
|
Исходный код программы
| |
<samp> ... </samp>
|
Пример работы программы, часто отображается так же, как и предыдущий
| |
<kbd> ... </kbd>
|
Текст, вводимый с клавиатуры
| |
<var> ... </var>
|
Переменная или значение
| |
<q> ... </q>
|
Цитируемый текст
| |
<abbr> ... </abbr>
|
Аббревиатура
| |
<acronym> ... </acronym>
|
Акроним
|
Таблица 2.3. Физические стили форматирования текста WEB-страницы:
|
Элемент
|
Назначение
| |
<b> ... </b>
|
Жирный
| |
<i> ... </i>
|
Курсив
| |
<tt> ... </tt>
|
Моноширинный
| |
<u> ... </u>
|
Подчеркнутый
| |
<big> ... </big>
|
Увеличенный размер
| |
<small> ... </small>
|
Уменьшенный размер
| |
<sub> ... </sub>
|
Нижний индекс
| |
<sup> ... </sup>
|
Верхний индекс
|
3. Добавление объектов
Таблица 3.1. Добавление объектов на страницу:
|
Элемент
|
Назначение
| |
<img>
|
Вставка изображения на страницу
Атрибуты:
|
Атрибут
|
Назначение
| |
src="адрес"
|
указывает URL-адрес, по которому находится файл изображения. Может быть как относительным, так и абсолютным
| |
alt="значение"
|
Содержит текст, который выводится на экран браузера при невозможности вывести изображение
| |
align="значение"
|
Определяет поряддок вывода текста относительно боковых сторон изображения:
"top" - текст располагается рядом с верхней границей изображения;
"middle" - текст располагается рядом с серединой изображения;
"bottom" - текст располагается рядом с нижней границей изображения (по умолчанию)
Еще два параметра, делающие изображения "плавающими", при этом текст обтекает изображение:
"right" - помещает изображение к правой границе WEB-страницы;
"left" - помещает изображение к левой границе WEB-страницы
| |
width="значение"
|
Ширина рисунка (резервируется место под изображение, создавая рамку)
| |
height="значение"
|
Высота рисунка (резервируется место под изображение, создавая рамку)
|
| |
<a> ... </a>
|
Вставка гиперссылки на страницу. Между начальным и закрывающим тегами должен находиться текст или картинка, которые отображают гиперссылку на экране браузера
Атрибуты:
|
Атрибут
|
Назначение
| |
href="адрес"
|
указывает URL-адрес, по которому находится документ, который должна открывать ссылка. Может быть как относительным, так и абсолютным
| |
title="значение"
|
Содержит поясняющий текст, который выводится на экран браузера при наведении курсора мыши на гиперссылку
| |
name="значение"
|
Устанавливает закладку на странице, используемую для переходов внутри страницы
| |
target="_blank"
|
Позволяет автоматически открывать гиперссылку в новом окне
| |
Пример: <a href="Адрес" title="Заголовок" target="_blank">Текст ссылки или картнка</a>
|
|
Таблица 3.2. Добавление таблиц на страницу:
|
Элемент
|
Назначение
| |
<table> ... </table>
|
Вставка таблицы на страницу
Атрибуты:
|
Атрибут
|
Назначение
| |
bgcolor="значение"
|
Фоновый цвет таблицы. Значение - WEB-название цвета или его шестнадцатиричный код
* - может применяться с элементами <td> и <tr>
| |
width="значение"
|
ширина таблицы. Задается либо в пикселях (абсолютный размер), либо в процентах от ширины страницы (относительный размер)
* - может применяться с элементом <td>
| |
align="значение"
|
Определяет порядок вывода таблицы относительно границ WEB-страницы:
"left" - таблица располагается слева у границы страницы, обтекается текстом;
"right" - таблица располагается справа у границы страницы, обтекается текстом;
"center" - таблица расположена по центру страницы.
| |
cellpadding="значение"
|
определяет расстояние между границами ячеек и их содержимым (в пикселах)
| |
cellspacing="значение"
|
задает расстояние в пикселах между ячейками таблицы
| |
border="значение"
|
задает ширину внутренних и внешних границ таблицы в пикселах
|
| |
<tr> ... </tr>
|
Определяет строку таблицы
Атрибуты:
|
Атрибут
|
Назначение
| |
align="значение"
|
Определяет порядок вывода данных в ячейках:
"left" - с выравниванием по левому краю ячеек;
"right" - с выравниванием по правому краю ячеек;
"center" - с выравниванием по центру ячеек
* может использоваться с элементом <td>
| |
valign="значение"
|
Определяет порядок вывода данных в ячейках:
"top" - вверху ячеек;
"bottom" - внизу ячеек
"center" - по центру ячеек
* может использоваться с элементом <td>
|
* См. атрибуты элемента <table>
| |
<td> ... </td>
|
Определяет ячейки таблицы
Атрибуты:
|
Атрибут
|
Назначение
| |
colspan="значение"
|
задает количество ячеек для объединения в строке таблицы
| |
rowspan="значение"
|
задает количество ячеек для объединения в столбце таблицы
| |
|
|
* См. атрибуты элемента <tr> и <table>
| |
<caption> ... </caption>
|
Вставка описания таблицы
Атрибуты:
|
Атрибут
|
Назначение
| |
align="значение"
|
определяет размещение названия таблицы:
"top" - над таблицей;
"bottom" - под таблицей.
| |
|
|
|
Пример HTML-кода страницы
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <!-- Задание русской кодировки "Windows-1251" -->
<meta http-equiv="content-language" content="ru, russian"> <!-- Задание русского языка "ru, russian" -->
<title>Заголовок страницы</title>
<meta name="keywords" content="Здесь пишутся ключевые слова страницы">
<meta name="description" content="Здесь кратко описывается страница">
</head>
<body>
<h1>Заголовок страницы</h1>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td width="200">
<a href="page1.html" title="Страница 1">Страница 1</a><br>
<a href="page2.html" title="Страница 2">Страница 1</a><br>
<a href="page3.html" title="Страница 3">Страница 1</a><br>
<a href="page4.html" title="Страница 4">Страница 1</a><br>
<a href="page5.html" title="Страница 5">Страница 1</a><br>
<a href="page6.html" title="Страница 6">Страница 1</a><br>
<a href="http://www.mail.ru/" target="_blank">Внешняя ссылка</a><br>
</td><td width="100%">
<h2 align="center">Подзаголовок страницы</h2> <!-- Заголовок второго уровня выравнен по центру -->
<p>Первый тестовый абзац страницы</p>
<p>Второй тестовый абзац страницы</p>
<p>Третий тестовый абзац страницы</p>
</td></tr>
</table>
</body>
</html>
|