Конспект HTML: основные дескрипторы

< на главную

Общая структура html-странички:

<Информация о версии HTML>
<html>
    <head>
        <title> ... </title>
        <meta ...>
        . . . .
        <meta ...>
    </head>
    <body>
        . . . .
    </body>
</html>

Подробнее

1. <Информация о версии HTML>
2. <head> ... </head> и его содержимое
3. <body> ... </body>

1. <Информация о версии HTML>

Первая строка web-страницы содержит информацию об используемой версии языка HTML и определяет тип документа (обычно DTD), который должен использовать браузер при анализе содержимого. Наиболее распространены следующие строки (относительно пояснений я не уверена):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> - строгий HTML v4.01, не включающий нежелательные для версии 4.01 элементы и атрибуты, а также фреймы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> - HTML v4.01 + нежелательные для версии 4.01 элементы и атрибуты. (transitional - англ. переходный, промежуточный)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> - HTML v4.01 + нежелательные для версии 4.01 элементы и атрибуты + фреймы. (frameset можно перевести как набор фреймов)

Здесь же дополнительно может быть указан URL, откуда браузер может загрузить последнюю версию файла с DTD-определением используемой версии HTML. Для указанных выше случаев это выглядит так:
<!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">
(strict - англ. строгий, точный
loose - англ. свободный, приблизительный)

ИНОГДА ДОБАВЛЕНИЕ URL-АДРЕСА ИЗМЕНЯЕТ ПОВЕДЕНИЕ НЕКОТОРЫХ ЭЛЕМЕНТОВ. В ЭТОМ ВОПРОСЕ НЕ ТАК ВСЁ ПРОСТО, МНЕ ЕЩЁ НУЖНО ДОРАЗОБРАТЬСЯ. - ответ: иногда добавление URL-адреса изменяет режим работы браузер (Standards mode/Quirks mode/Almost Standards mode). Подробности этого и соотвествующую таблицу можно обнаружить на сайте http://hsivonen.iki.fi/doctype/ (eng).

P.S. W3C предлагает копировать и вставлять объявления типов документов с сайта http://www.w3.org/QA/2002/04/valid-dtd-list.html .

к оглавлению

2. <head> ... </head> и его содержимое

(head - англ. голова, глава, верхняя часть ч.-л.) Дескриптор <head> ... </head> обозначает границы заголовка ("шапки") web-страницы. Внутри может содержать нижеуказанные информативные элементы. (Замечу, что атрибут name используется для указания информации, необходимой поисковым системам и самим программистам, а атрибут http-equiv применяется для отдачи браузеру дополнительных команд по обработке документа)

<title> . . . </title>: Название HTML-документа, выводится в заголовке браузера. (title - англ. название, заглавие)
--------------------------------------------
<meta name="keywords" content="текст">: Список ключевых слов (через запятую), описывающих содержание странички. Используется поисковыми системами.
<meta name="description" content="текст">: Краткое описание содержимого странички. (description - англ. описание) Эта информация также крайне полезна для поисковых систем. Некоторые поисковые системы используют только первые 20 слов описания.
<meta name="author" content="текст">: Автор документа.
<meta name="copyright" content="текст">: Информация об авторских правах на документ (произвольный текст). К примеру, <meta name="copyright" content="2005, O'Reilly Media">.
<meta lang="язык" . . . >: Позволяет создать несколько описаний и списков ключевых слов на разных языках. Пример.
<meta name="robots" content="индексация,переход_по_ссылкам">: Определяет взаимодействие веб-страницы с поисковыми роботами. Подробнее.
Допускается создавать свои собственные элементы name.
--------------------------------------------
<meta http-equiv="content-type" content="значение">: Указывает тип документа (обычно text/html). Также здесь можно объявить используемую кодировку символов (к примеру, windows-1251). В большинстве случаев пишут <meta http-equiv="content-type" content="text/html; charset=windows-1251">.
<meta http-equiv="content-language" content="значение">: Задание основного языка документа (аналогично атрибуту lang элемента HTML).
<meta http-equiv="refresh" content="цифра">: Отдаёт браузеру распоряжение через указанное количество секунд обновить документ. (refresh - англ. освежать, подновлять) Если дополнительно указать URL, то через указанное количество секунд произойдёт переход по указанному адресу. К примеру, <meta http-equiv="refresh" content="15; url=http://bhlady.narod.ru/">.
<meta http-equiv="expires" content="дата">: Задаёт дату и время, после которых документ считается устаревшим и нуждающимся в обновлении. (expire - англ. истекать, терять силу) Например, <meta http-equiv="expire" content="2009 Jan 1 12:00:00 GMT"> (если ничего не напутала) или <meta http-equiv="expire" content="Wed 12 Jun 2001 10:52:00 EST>.

P.S. Полный список разновидностей элемента meta можно найти на сайте http://vancouver-webpages.com/META/ .

к оглавлению

3. <body> ... </body>

(body - англ. тело, основная часть) Контейнер для непосредственной содержательной части html-документа. Его атрибуты коренным образом способны изменить эффект, оказываемой данной страницей. Из них можно отметить следующие:

text="цвет": Цвет текста. (На данной странице text = maroon.)
bgcolor="цвет": Цвет фона. (bgcolor - background color - англ. цвет заднего фона) (Для данной страницы bgcolor = wheat.)
background="адрес_рисунка": Позволяет задать фоновый рисунок, отображаемый мозайкой. (background - англ. задний план, фон)
bgproperties=fixed: Запрет браузеру перемещать фоновый рисунок при прокрутке содержимого документа (текст движется, а фон неподвижен). (property - англ. свойство) Для отмены эффекта либо удалите атрибут, либо присвойте ему пустую строку ("").
leftmargin="цифра"
rightmargin="цифра"
topmargin="цифра"
bottommargin="цифра": Задание ширины поля страницы соответственно слева, справа, сверху и снизу. (margin - англ. грань, край; поле (страницы)) Параметры капризные, в разных браузерах свои особенности, углубляться в них хлопотно, но обуздать можно. По умолчанию leftmargin и rightmargin =10, а topmargin и bottommargin =15. (На данной странице я написала leftmargin=25 rightmargin=25 topmargin=40.)
Пример 1. Пример 2. Пример 3. Пример 4.
marginwidth ="цифра": Задание полей одновременно слева и справа. Не работает в IE.
marginheight ="цифра": Задание полей одновременно сверху и снизу. Не работает в IE. Пример.
link="цвет": Цвет ссылки на другую страничку (ранее не просматривавшуюся). (link - англ. связь, соединение) По умолчанию - синий. (Здесь link=#1E7B47.)
vlink="цвет": Цвет ссылки на страничку, на которой вы когда-то уже бывали. (vlink - visited link - англ. посещённая ссылка) По умолчанию - фиолетовый. (В данном моём проекте цвет обеих разновидностей ссылок одинаков: vlink=#1E7B47.)
alink="цвет": Цвет ссылки в момент щелчка. В тот короткий промежуток, когда кнопка мышки нажата, но ещё не отпущена. (alink - предположу activated link - англ. активированная ссылка) По умолчанию в MF, Safari и GCh он красный, а в Opera и IE ссылка в процессе нажатия никак не выделяется. (В данном проекте я использовала аlink=lime.) (В IE также дополнительно определяет цвет ссылки, получившей фокус, к примеру, посредством нажатия клавиш <Tab> / <Shift+Tab>.) Пример.
scroll="значение": Управление полосами прокрутки. (scroll - англ. прокручивать) Три возможных значения: yes (по умолчанию, полоса вертикальной прокрутки всегда присутствует), auto (на усмотрение браузера), no (полос прокрутки никогда нет) Поскольку здесь примеров не привожу, то отдельно отмечу большую капризности данного свойства в различных браузерах.
contenteditable: Разрешение на редактирование информации прямо в браузере (подробнее см. страницу, посвящённую работе с текстом).
nowrap: Запрет браузеру на автоматический перенос слов (подробнее см. страницу, посвящённую работе с текстом).

< на главную

к оглавлению