Краткий справочник по HTML
Краткий справочник по 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> | Заголовки третьего уровня |
| <p> ... </p> | Заголовки четвертого уровня |
| <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>
