Краткий справочник по HTML

Среда, 03 Марта 2010 г. 02:39 + в цитатник

Advayta все записи автора

Краткий справочник по HTML

1. Элементы WEB-страницы

Таблица 1.1. Организующие страницу элементы:

Элемент

Назначение

Начальный и заключительный тег HTML-документа

Объявление заголовка WEB-страницы, содержит описание страницы

Элемент определяет название страницы, которое выводится в строке заголовка окна браузера. Располагается внутри заголовка <html> WEB-страницы, учитывается при индексации страницы поисковыми машинами

Между этими тегами находится основное содержание страницы

Атрибуты:

Атрибут	Назначение
bgcolor="значение"	Задает фоновый цвет страницы. Переменная "значение" представлена в виде текстовой величины (принятые в WEB названия цветов), либо в виде шестнадцатиричного числа, обозначающего цвет - "#ddf112"
background="адрес"	Задает фоновый рисунок страницы. "значение" - адрес файла изображения, которое станет фоновым рисунком страницы. При этом рисунок не растягивается, а заполняет всю страницу путем клонирования

Определение "базового" URL каталога сайта. Все относительные ссылки на странице, содержащей этот элемент будут определяться относительно него. Располагается внутри элемента <head>

Комментарий. Может располагаться в любом месте страницы. На экран браузера не выводится. Надежное средство для борьбы со склерозом..

2. Элементы форматирования текста

Таблица 2.1. Элементы стилей абзаца и списков:

Элемент

Назначение

Заголовки первого уровня

Заголовки второго уровня

Заголовки третьего уровня

Заголовки четвертого уровня

Заголовки пятого уровня

Заголовки шестого уровня

Простой абзац. Приведенные атрибуты могут быть использованы со всеми элементами, определяющими стиль абзаца, в том числе и с заголовками.

Атрибуты:

Атрибут

Назначение

align="значение"

Расположение текста абзаца относительно границ окна (выравнивание текста). Может принимать значения: "left" - выравнивание по левому краю, "right" - выравнивание по правому краю, "justify" - выравникание по ширине и "center" - выравнивание по центру

Виртуальное выделение абзаца путем добавления отступа слева

Преформатированный абзац. Выводится в окне браузера точно также, как был набран в редакторе. Учитывает пробелы и переводы строки при вводе. Результат выводится на экран моноширинным шрифтом

Разрыв строки. Браузером распознается и выполняется как перевод строки. Может быть использован внутри элементов, определяющих абзац

Рисует горизонтальную линию

Атрибуты:

Атрибут	Назначение
width="значение"	Длина линии, указанная либо в относительных единицах (процентах) либо в абсолютных - пикселях
size="значение"	Ширина линии в пикселах
align="значение"	Расположение: выравнивание по левому, правому краю либо по центру
noshade="noshade"	Изменяет внешний вид линии, убирая тень линии

Нумерованный список

Атрибуты:

Атрибут	Назначение
type="значение"	Значение определяет вид нумерации: "A" - Прописные буквы "a" - Строчные буквы "I" - Большие римские цифры "i" - Малые римские цифры "1" - Арабские цифры (по умолчанию)
start="значение"	Указывает, какое значение для данного списка будет являться стартовым

Маркированный список.

Атрибуты:

Атрибут	Назначение
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="значение"	Высота рисунка (резервируется место под изображение, создавая рамку)

Вставка гиперссылки на страницу. Между начальным и закрывающим тегами должен находиться текст или картинка, которые отображают гиперссылку на экране браузера

Атрибуты:

Атрибут	Назначение
href="адрес"	указывает URL-адрес, по которому находится документ, который должна открывать ссылка. Может быть как относительным, так и абсолютным
title="значение"	Содержит поясняющий текст, который выводится на экран браузера при наведении курсора мыши на гиперссылку
name="значение"	Устанавливает закладку на странице, используемую для переходов внутри страницы
target="_blank"	Позволяет автоматически открывать гиперссылку в новом окне
Пример: <a href="Адрес" title="Заголовок" target="_blank">Текст ссылки или картнка</a>

Таблица 3.2. Добавление таблиц на страницу:

Элемент

Назначение

Вставка таблицы на страницу

Атрибуты:

Атрибут	Назначение
bgcolor="значение"	Фоновый цвет таблицы. Значение - WEB-название цвета или его шестнадцатиричный код * - может применяться с элементами <td> и <tr>
width="значение"	ширина таблицы. Задается либо в пикселях (абсолютный размер), либо в процентах от ширины страницы (относительный размер) * - может применяться с элементом <td>
align="значение"	Определяет порядок вывода таблицы относительно границ WEB-страницы: "left" - таблица располагается слева у границы страницы, обтекается текстом; "right" - таблица располагается справа у границы страницы, обтекается текстом; "center" - таблица расположена по центру страницы.
cellpadding="значение"	определяет расстояние между границами ячеек и их содержимым (в пикселах)
cellspacing="значение"	задает расстояние в пикселах между ячейками таблицы
border="значение"	задает ширину внутренних и внешних границ таблицы в пикселах

Определяет строку таблицы

Атрибуты:

Атрибут	Назначение
align="значение"	Определяет порядок вывода данных в ячейках: "left" - с выравниванием по левому краю ячеек; "right" - с выравниванием по правому краю ячеек; "center" - с выравниванием по центру ячеек * может использоваться с элементом <td>
valign="значение"	Определяет порядок вывода данных в ячейках: "top" - вверху ячеек; "bottom" - внизу ячеек "center" - по центру ячеек * может использоваться с элементом <td>

* См. атрибуты элемента <table>

Определяет ячейки таблицы

Атрибуты:

Атрибут	Назначение
colspan="значение"	задает количество ячеек для объединения в строке таблицы
rowspan="значение"	задает количество ячеек для объединения в столбце таблицы

* См. атрибуты элемента <tr> и <table>

Вставка описания таблицы

Атрибуты:

Атрибут	Назначение
align="значение"	определяет размещение названия таблицы: "top" - над таблицей; "bottom" - под таблицей.

Пример HTML-кода страницы

<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">   
     <meta http-equiv="content-language" content="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>