Коды символов HTML:

Символ

HTML код

&

&

§

§

"

"

Пробел

 

<

&lt;

>

&gt;

&le;

&ge;

«

&laquo;

»

&raquo;

±

&plusmn;

©

&copy;

®

®

&trade;

&euro;

$

&dollar;

&para;

½

&frac12;

¼

&frac14;

&frac18;

&larr;

&rarr;

&uarr;

&darr;

&lArr;

&rArr;

&uArr;

&dArr;

&spades;

&clubs;

&hearts;

&diams;

æ

&aelig;

Æ

&AElig;

à

&agrave;

á

&aacute;

â

&acirc;

ä

&auml;

å

&aring;

ç

&ccedil;

ë

&euml;

é

&eacute;

&#8448;

&#8449;

&#8450;

&#8451;

&#8452;

&#8453;

&#8454;

&#8455;

&#8456;

&#8457;

&#8458;

&#8459;

&#8460;

&#8461;

&#8462;

&#8463;

&#8464;

&#8465;

&#8466;

&#8467;

&#8468;

&#8469;

&#8470;

&#8471;

&#8472;

&#8473;

&#8474;

&#8475;

&#8476;

&#8477;

&#8478;

&#8479;

&#8480;

&#8481;

&#8482;

&#8483;

&#8484;

&#8485;

&#8486;

&#8487;

&#8488;

&#8489;

&#8490;

&#8491;

&#8492;

&#8493;

&#8494;

&#8495;

&#8496;

&#8497;

&#8498;

&#8499;

&#8500;

&#8592;

&#8593;

&#8594;

&#8595;

&#8596;

&#8597;

&#8598;

&#8599;

&#8600;

&#8601;

&#8602;

&#8603;

&#8604;

&#8605;

&#8606;

&#8607;

&#8608;

&#8609;

&#8610;

&#8611;

&#8612;

&#8613;

&#8614;

&#8615;

&#8616;

&#8617;

&#8618;

&#8619;

&#8620;

&#8621;

&#8622;

&#8623;

&#8624;

&#8625;

&#8626;

&#8627;

&#8628;

&#8629;

&#8630;

&#8631;

&#8632;

&#8633;

&#8634;

&#8635;

&#8636;

&#8637;

&#8638;

&#8639;

&#8640;

&#8641;

&#8642;

&#8643;

&#8644;

&#8645;

&#8646;

&#8647;

&#8648;

&#8649;

&#8650;

&#8651;

&#8652;

&#8653;

&#8654;

&#8655;

&#8656;

&#8657;

&#8658;

&#8659;

&#8660;

&#8661;

&#8662;

&#8663;

&#8664;

&#8665;

&#8666;

&#8667;

&#8668;

&#8669;

&#8670;

&#8671;

&#8672;

&#8673;

&#8674;

&#8675;

&#8676;

&#8677;

&#8678;

&#8679;

&#8680;

&#8681;

&#8704;

&#8705;

&#8706;

&#8707;

&#8708;

&#8709;

&#8710;

&#8711;

&#8712;

&#8713;

&#8714;

&#8715;

&#8716;

&#8717;

&#8718;

&#8719;

&#8720;

&#8721;

&#8722;

&#8723;

&#8724;

&#8725;

&#8726;

&#8727;

&#8728;

&#8729;

&#8730;

&#8731;

&#8732;

&#8733;

&#8734;

&#8735;

&#8736;

&#8737;

&#8738;

&#8739;

&#8740;

&#8741;

&#8742;

&#8743;

&#8744;

&#8745;

&#8746;

&#8747;

&#8748;

&#8749;

&#8750;

&#8751;

&#8752;

&#8753;

&#8754;

&#8755;

&#8756;

&#8757;

&#8758;

&#8759;

&#8760;

&#8761;

&#8762;

&#8763;

&#8764;

&#8765;

&#8766;

&#8767;

&#8768;

&#8769;

&#8770;

&#8771;

&#8772;

&#8773;

&#8774;

&#8775;

&#8776;

&#8777;

&#8778;

&#8779;

&#8780;

&#8781;

&#8782;

&#8783;

&#8784;

&#8785;

&#8786;

&#8787;

&#8788;

&#8789;

&#8790;

&#8791;

&#8792;

&#8793;

&#8794;

&#8795;

&#8796;

&#8797;

&#8798;

&#8799;

&#8800;

&#8801;

&#8802;

&#8803;

&#8804;

&#8805;

&#8806;

&#8807;

&#8808;

&#8809;

&#8810;

&#8811;

&#8812;

&#8813;

&#8814;

&#8815;

&#8816;

&#8817;

&#8818;

&#8819;

&#8820;

&#8821;

&#8822;

&#8823;

&#8824;

&#8825;

&#8826;

&#8827;

&#8828;

&#8829;

&#8830;

&#8831;

&#8832;

&#8833;

&#8834;

&#8835;

&#8836;

&#8837;

&#8838;

&#8839;

&#8840;

&#8841;

&#8842;

&#8843;

&#8844;

&#8845;

&#8846;

&#8847;

&#8848;

&#8849;

&#8850;

&#8851;

&#8852;

&#8853;

&#8854;

&#8855;

&#8856;

&#8857;

&#8858;

&#8859;

&#8860;

&#8861;

&#8862;

&#8863;

&#8864;

&#8865;

&#8866;

&#8867;

&#8868;

&#8869;

&#8870;

&#8871;

&#8872;

&#8873;

&#8874;

&#8875;

&#8876;

&#8877;

&#8878;

&#8879;

&#8880;

&#8881;

&#8882;

&#8883;

&#8884;

&#8885;

&#8886;

&#8887;

&#8888;

&#8889;

&#8890;

&#8891;

&#8892;

&#8893;

&#8894;

&#8895;

&#8896;

&#8897;

&#8898;

&#8899;

&#8900;

&#8901;

&#8902;

&#8903;

&#8904;

&#8905;

&#8906;

&#8907;

&#8908;

&#8909;

&#8910;

&#8911;

&#8912;

&#8913;

&#8914;

&#8915;

&#8916;

&#8917;

&#8918;

&#8919;

&#8920;

&#8921;

&#8922;

&#8923;

&#8924;

&#8925;

&#8926;

&#8927;

&#8928;

&#8929;

&#8930;

&#8931;

&#8932;

&#8933;

&#8934;

&#8935;

&#8936;

&#8937;

&#8938;

&#8939;

&#8940;

&#8941;

&#8942;

&#8943;

&#8944;

Краткий справочник по 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=UTF-8">   <!-- Задание русской кодировки "UTF-8" -->
         <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 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">Страница 2</a><br>
         <a href="page3.html" title="Страница 3">Страница 3</a><br>
         <a href="page4.html" title="Страница 4">Страница 4</a><br>
         <a href="page5.html" title="Страница 5">Страница 5</a><br>
         <a href="page6.html" title="Страница 6">Страница 6</a><br>

         <a href="http://www.mail.ru/" target="_blank">Внешняя ссылка</a><br>
    </td><td width="100%">
         <h2 style="text-align:center;">Подзаголовок страницы</h2>    <!-- Заголовок второго уровня выравнен по центру -->
         <p>Первый тестовый абзац страницы</p>
         <p>Второй тестовый абзац страницы</p>
         <p>Третий тестовый абзац страницы</p>
    </td></tr>
    </table>

    </body>
    </html>
    >> Web АДР >> Это полезно >> Краткий справочник по HTML
    Политика конфиденциальности
    Страница создана: 10-10-2002; Последнее обновление: 27-02-2025

    «WebADR»

     
    Анализ сайтаАнализ сайтовАнализирование сайтаДоработка сайтовДоработка сайтаДоработка сайтовДоработка сайтаАнализ сайтаАнализ сайтовАнализирование сайтаДоработка сайтовДоработка сайтаДоработка сайтовДоработка сайтаАнализ сайтаАнализ сайтовАнализирование сайтаДоработка сайтовДоработка сайтаДоработка сайтовДоработка сайта

    Мы в Соц.Сетях:

    VKontakteОдноклассники