Конспект 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 - англ. свободный, приблизительный)

к оглавлению

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

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

<title> . . . </title>: Название HTML-документа, выводится в заголовке браузера. (title - англ. название, заглавие)
--------------------------------------------
<meta name="keywords" content="текст">: Список ключевых слов (через запятую), описывающих содержание странички. Активно используется поисковыми системами.
<meta name="description" content="текст">: Краткое описание содержимого странички. (description - англ. описание)Эта информация также крайне полезна для поисковых систем.
<meta name="author" content="текст">: Автор документа.
<meta name="copyright" content="текст">: Информация об авторских правах на документ (произвольный текст).
--------------------------------------------
<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"> (если ничего не напутала).

к оглавлению

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

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

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

< на главную

к оглавлению