Терминология Элемент

Терминология
 Элемент(element)- конструкция языка HTML. Это контейнер, содержащий данные и
позволяющий отформатировать их определенным образом. Любая Web-страница
представляет собой ряд элементов. Одна из идей гипертекста- возможность вложения
различных элементов.
 Тег(tag)- начальный или конечный маркеры элемента. Теги определяют границы
действия элементов и отделяют элементы друг от друга. В тексте Web- страницы теги
заключаются в угловые скобки, а конечный тег ещё с косой чертой (/)
 Атрибут(atrubute)- параметр или свойства элемента. Это, по сути, переменная, которой
может придаваться определенное значение в кавычках. Атрибуты расположены внутри
начального тега и отделяются они пробелами.
 Гиперссылка(hyperlink)- фрагмент гипертекста, который указывает на другой файл
или объект.
 Фрейм(frame)- этот термин имеет два значения. Первое- область документа со своими
полосами прокрутки. Второе- один кадр сложного анимированного изображения.
 HTML-файл или HTML-страница- документ, созданный в виде гипертекста на основе
языка HTML.
 Апплет(applet) -программа, передаваемая на компьютер клиента в виде отдельно
файла и запускаемая при просмотре Web- страниц.
 Скрипт или Сценарий(script) -программа лежащая в HTML- страницы, расширяя её
возможность при помощи средств мультимедиа.
 Расширение (extension) — элемент, не входящий в спецификацию языка, но
использующийся, обеспечивая возможность создания нового интересного эффекта
форматирования.
 CGI (Common Gateway Interface) — общее название для программ, которые, работая на
сервере, позволяют расширить возможности Web-страниц. Например, без таких программ
невозможно создание интерактивных страниц. К таким программам относят виртуальные
магазины, некоторые чаты и т.д.
 Программный код или просто код — аналог понятия «текст программы».
 Код HTML — гипертекстовый документ в своем первоначальном виде, когда видны
все элементы и атрибуты.
 World Wide Web, WWW или просто Web — Всемирная паутина, распределенная
система доступа к гипертекстовым документам, существующая в Интернете. HTML
является основным языком для создания документов в WWW. Изучая его, мы,
фактически, изучаем часть этой системы, хотя область применения языка намного шире.
 Web-страница — документ (файл), подготовленный в формате гипертекста и
размещенный в World Wide Web.
 Сайт (site) — набор Web-страниц, принадлежащих одному владельцу.
 Броузер (browser) — программа для просмотра Web-страниц.
 Загрузка (downloading) — копирование файлов с сервера на компьютер-клиент.
 URL (Uniform Resource Locator) или универсальный указатель ресурса — адрес
некоторого объекта в Интернете. Типичный URL для WWW имеет вид:
http://www.название.домен/имя файла Здесь название — это часть адреса, который часто
употребляется для обозначения владельца сайта, а домен — обозначение крупного
«раздела» Интернета: страны, области деятельности и т. д. URL используются для того,
чтобы указать конкретную Web-страницу или графический файл в гиперссылках, а также
везде, где требуется однозначно определить месторасположение Web-страницы или
файла.
 Базовый URL — часть адреса, которая является общей для всех ссылок текущей
Web-страницы.
 Базовый цвет — каждый цветовой оттенок на экране монитора получается
соединением трех базовых цветов: красного, зеленого и синего.
 Цветовой канал - интенсивность красного, синего, зеленого цветов. Цвет пикселей
определяется этой величиной.
Версии HTML
Первая версия ХТМЛ была разработана в 1990-х годах Тимом Бенерс-Ли для популярного
браузера Mosaic. Но в то время применения ни для браузера ни для ХТМЛ не нашлось.
В 1993 году была разработана следующая версия HTML+, как и предыдущая, она осталась
практически незаметной.
Наконец, в июне 1994 года появилась версия 2.0, которая стала популярной. Элементы
этой версии используются и по сей день.
В 1994 году появилась версия 3.0, в которую были добавлены возможности прорисовки
математических символов, таких знаков как: интеграл, бесконечность, дроби, фигурные
скобки и т.д.
В 1996 году появилась HTML версия 3.2. Это просто революционное решение, так как в
эту версию была введена специфика фреймов, которые нашли своё применение во многих
сайтах. Практически все современные браузеры полностью поддерживают все элементы
этой версии, поэтому авторы не сомневаются в работоспособности этой версии.
В 1997 году появилась следующая версия 4.0, называемая Dinamik HTML. Новаторство
этой версии заключается в возможности делать Web-страницы интерактивными.
Появились такие понятия, как JavaScript, Java, VisualBasic Script. До сих пор практически
нет определенного стандарта поддержки сценариев, поэтому сколько браузеров, столько и
методов поддержки скриптов. Результатом использования сценариев стали пометки в
каких браузерах лучше просматривать страницы. Сейчас многим разработчикам
приходится выбирать между новаторством и надежностью страницы.
Большую популярностью пользуется технология FLASH. С её помощью можно создавать
целые сайты, клипы, изображения, мультфильмы и даже игры и многое другое!!!
Превосходства очевидны: маленький размер готового файла, интерактивность, простота в
использовании, а главное, красота готового проекта. Марка Flash принадлежит
корпорации Macromedia Inc .
Шаблон Web-страницы (пример-заготовка готовой страницы)
<HTML>
<HEAD>
<TITLE></title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META name="Keywords" content="">
<STYLE>
#{
;
}
</style>
</head>
<BODY bgcolor="" background="" text="" link="" vlink="" alink="">
<P></p>
<P></p>
<P></p>
<P></p>
<P></p>
</body>
</html>
Как Вы видите почти все теги имеют конечный тег. Если вы забыли поставить конечный
тег, то его действие будет распространяться от начала постановки до конца документа.
Это очень распространенная ошибка, так что будьте внимательны!
Если вы просмотрите несколько страниц, то вы должны заметить, что они имеют схожие
элементы.
Специальные символы
Спецсимволы употребляются:
& #код символа
Набор основных символов
Код
Код
Символ
Комментарий
Коды 32-63
Код символа Символ Комментарий
34
"
"
Прямая кавычка
32
38
&
&
Амперсанд
33
!
60
<
<
Знак "меньше"
34
"
62
>
>
Знак "больше"
35
#
™
Знак TM
36
$
Неразрывный пробел
37
%
¢
Цент
38
&
163 £ £
Фунт
39
'
164 ¤ ¤
Знак валюты
40
(
165 ¥
Йена
41
)
166 ¦ ¦
Вертикальная черта
42
*
167 §
§
Знак параграфа
43
+
169 ©
©
Знак копирайта
44
,
171 «
«
Левая типографская
45
-
153 ™
160  
162 ¢
¥
Пробел
кавычка
46
.
172 ¬
¬
Знак отрицания
47
/
174 ®
®
Знак (R)
48
0
176 °
°
Знак градуса
49
1
177 ± ±
Знак "плюс минус"
50
2
178 ²
²
Степень 2
51
3
179 ³
³
Степень 3
52
4
181 µ
µ
Знак "микро"
53
5
182 ¶
¶
Знак абзаца
54
6
183 · ·
Точка-маркер
55
7
185 ¹
¹
Степень 1
56
8
187 »
»
Правая типографская
кавычка
57
9
58
:
188 ¼ ¼
Одна четвертая
59
;
189 ½ ½
Одна вторая
60
<
215 ×
Крестик
61
=
Знак деления
62
>
63
?
×
247 ÷ ÷
Коды 64-95
Коды 96-127
Код символа Символ Комментарий
Код символа Символ Комментарий
64
@
96
`
65
A
97
a
66
B
98
b
67
C
99
c
68
D
100
d
69
E
101
e
70
F
102
f
71
G
103
g
72
H
104
h
73
I
105
i
74
J
106
j
75
K
107
k
76
L
108
l
77
M
109
m
78
N
110
n
79
O
111
o
80
P
112
p
81
Q
113
q
82
R
114
r
83
S
115
s
84
T
116
t
85
U
117
u
86
V
118
v
87
W
119
w
88
X
120
x
89
Y
121
y
90
Z
122
z
91
[
123
{
92
\
124
|
93
]
125
}
94
^
126
~
95
_
127
•
Коды 128-159
Код символа Символ Комментарий
128
€
129
�
130
‚
131
ƒ
132
„
133
…
134
†
135
‡
136
ˆ
137
‰
138
Š
139
‹
140
Œ
141
�
142
Ž
143
�
144
�
145
‘
Коды 160-191
Код
символа
Символ Комментарий
Неразр. пробел
160
161
¡
162
¢
Цент
163
£
Фунт
164
¤
Знак валюты
165
¥
Йена
166
¦
Верт. черта
167
§
Знак параграфа
168
¨
169
©
170
ª
171
«
172
¬
Знак копирайта
Левая кавычка
173
Знак (R)
174
®
175
¯
176
°
Знак градуса
177
±
"плюс минус"
146
’
178
²
147
“
179
³
148
”
180
´
149
•
181
µ
Знак "микро"
150
–
182
¶
Знак абзаца
151
—
·
152
˜
183
Точка
посередине
153
™
184
¸
154
š
185
¹
155
›
186
º
156
œ
187
»
Правая кавычка
157
�
188
¼
Знак 1/4
158
ž
189
½
Знак 1/2
159
Ÿ
190
¾
Знак 3/4
191
¿
Номер
Коды 192-223
Коды 224-255
Код символа Символ Комментарий
Код символа Символ Комментарий
192
À
224
à
193
Á
225
á
194
Â
226
â
195
Ã
227
ã
196
Ä
228
ä
197
Å
229
å
198
Æ
230
æ
199
Ç
231
ç
200
È
232
è
201
É
233
é
202
Ê
234
ê
203
Ë
235
ë
204
Ì
236
ì
205
Í
237
í
206
Î
238
î
207
Ï
239
ï
208
Ð
240
ð
209
Ñ
241
ñ
210
Ò
242
ò
211
Ó
243
ó
212
Ô
244
ô
213
Õ
245
õ
214
Ö
246
ö
215
×
247
÷
216
Ø
248
ø
217
Ù
249
ù
218
Ú
250
ú
219
Û
251
û
220
Ü
252
ü
221
Ý
253
ý
222
Þ
254
þ
223
ß
255
ÿ
Управление цветом
Стандартные цвета
Индиго
Аквамарин
Белый
Желтый
Зеленый
Золотистый
Компьютерная радуга:
#FF0000
#FF7800
#FFFF00
#00FF00
#43D8FB
#0000FF
#8000C0
Каштановый
Красный
Оливковый
Пурпурный
Светло-зеленый
Серебристый
Серый
Сизый
Синий
Ультрамарин
Фиолетовый
Фуксиновый
Черный
Код
Градации красного
Цвет
Код
Цвет
Код
Градации зеленого
Цвет
Код
Цвет
#010000
#800000
#000100
#008000
#100000
#900000
#001000
#009000
#200000
#A00000
#002000
#00A000
#300000
#B00000
#003000
#00B000
#400000
#C00000
#004000
#00C000
#500000
#D00000
#005000
#00D000
#600000
#E00000
#006000
#00E000
#700000
#FF0000
#007000
#00FF00
Код
Градации синего
Цвет
Код
Цвет
Код
Градации оранжевого
Цвет
Код
#000001
#000080
#FFB000
#FF7000
#000010
#000090
#FFA800
#FF6800
#000020
#0000A0
#FFA000
#FF6000
#000030
#0000B0
#FF9800
#FF5800
#000040
#0000C0
#FF9000
#FF5000
#000050
#0000D0
#FF8000
#FF4800
#000060
#0000E0
#FF8800
#FF3000
#000070
#0000FF
#FF7800
#FF3800
Цвет
<HTML></html>
Данный элемент можно считать самым внешним, так как внутри его содержится сама
Web- страница. В принципе этот элемент можно посчитать формальностью. В этот
элемент бывают вложены и другие элементы, которые отвечают за интерактивность
страницы.
Данный элемент может иметь атрибуты: version (означает версию языка HTML), lang, dir,
которыми редко кто пользуется.
<HEAD></head>
Этот элемент, как и элемент HTML, можно считать просто формирующим. Этот элемент
должен содержать заголовок страницы. Этот элемент должен включать тег TITLE.
Информация, сосредоточенная в META, определяющая настройки страницы называется
профилем. Профиль может хранится в отдельном файле. Для того, чтобы ввести этот файл
наберите следующую структуру:
<HEAD profile="URL">
Этот тег позволяет включать в свой состав элементы: BASE, META , LINK, ODJECT,
SCRIPT, STYLE.
<TITLE></title>
Этот элемент предназначен для размещения заголовка Web -страницы. Надпись,
включенная в эти теги, будет отображаться в окне браузера.
Кстати, эту строку часто используют поисковые машины, типа Yandexa, поэтому Web мастера должны заботиться о исчерпывающем описании страницы!
<META>
Этот элемент содержит информацию, которая не выводится на дисплей, а обрабатывается
браузером при загрузки и просмотре Web -страницы. Каждый элемент META содержит
два атрибута, первый определяет тип данных, второй -содержание.
Ниже показаны несколько примеров:
«Срок годности» документа:
<META name="expires" content="Дата">
Адрес электронной почты:
<META name="reply-to" content="Имя@Адрес.домен">
Имя автора Web -страницы:
<META name="Author" content="Имя автора">
Набор ключевых слов для поиска:
<META name="Keywords" content="слово1, слово2 и т.д.">
Описание Web -страницы:
<META name="Description" content="Содержание страницы">
Названия приложения, в котором была сделана Web - страница:
<META name="Generator" content="Название HTML -редактора">
Названия типа кодировки, в которой была сделана страница:
<META http-equiv="Content-type" content="text/html; charset= кодировка">
Время (в секундах), с которым будет обновляться страница:
<META refresh="http-equiv" content="Число(в секундах)" >
<BODY></body>
Этот элемент включает в себя гипертекст, который определяет страницу в целом.
Содержание этого элемента определяется автором и оно может быть совершенно
произвольным. Конечный тег этого элемента можно найти в конце Web -страницы.
Внутри этого элемента можно расположить ряд атрибутов, которые играют большую роль
в дизайне. Это следующие атрибуты:
Можно украсить страницу при помощи внешнего файла -узора. Этот файл будет размазан
по странице. Делается это при помощи атрибута
background="Путь к файлу"
Можно обойтись проще, задав цвет фона атрибутом
bgcolor="#RRGGBB"
Можно задать цвет шрифта, который будет использован для всего текста атрибутом:
text="#RRGGBB"
Для задания цвета гиперссылок можно использовать атрибут:
link="#RRGGBB"
Для просмотренных гиперссылок пользуются атрибутом:
vlink="#RRGGBB"
Для последней просмотренной гиперссылки пользуются атрибутом:
alink="#RRGGBB"
Текст, находящийся внутри этих тегов имеет произвольное строение и определяется
только умом и фантазией разработчика страницы.
<!--Комментарий-->
При создании больших и сложных страниц нельзя ,глядя на код, быстро разобраться в
назначении того или иного документа. Для этого в HTML специально встроены теги,
которые игнорирует браузер при загрузки страницы. Эти теги используются
исключительно для удобства разработчика страницы. Комментарии могут быть
повсеместно, где это нужно. Разработчик прописывает внутрь тега:
Например,
<!--Начало таблицы-->
или:
<!--Правый фрейм-- >
<H1></h1>
Элемент заголовка. В HTML существуют шесть уровней заголовков, которые
обозначаются H1...H6. Заголовок H1 считается самым крупным, а заголовок H6 -самым
мелким, соответственно.
Для заголовков можно использовать атрибут align:
align="left" для выравнивания по левому краю
align= "right" для выравнивания по правому краю
align= "center" для выравнивания по центру.
<HR>
Горизонтальная линия (Horizontal rule) -этот элемент можно часто встретить, потому что,
благодаря нему, страницу удобно разделить на части. Иногда можно встретить
графический файл, размером(размером один -два пикселя) -заменитель этого тега. Это
очень оригинальное решение, так как это смещает грани в разночтении кодов этого языка.
Этот элемент не имеет конечного тега! Этому элементу присущи несколько атрибутов:
align="left" для выравнивания по левому краю
align="right" для выравнивания по правому краю
align="center" для выравнивания по центру.
align="justify" для выравнивания по ширине страницы.
Также можно задать толщину линии, при помощи атрибута:
size=толщина линии в пикселях
Также можно управлять длиной линии при помощи атрибута:
width=длина в пикселях или в процентах
Можно и выбрать цвет линии:
color="цвет"
<BASE>
Этот элемент предназначен для создания базового адреса (URL)для ссылок. Элемент
очень удобен, хотя и редко используется. BASE задает первоначальный адрес и позволяет
опустить начальный адрес, так как он будет подставлен автоматически. Для
использования этого элемента вводят:
<BASE href="http://компьютер/">
Если вводится адрес для какого- либо локального диска, то используют:
<BASE href="file://диск\путь">
Хотя можно опустить и указание на схему доступа:(file://).Тогда будет учитываться только
левая часть ссылки до первого \.
<p></p>
Это - один из самый часто употребляемых элементов. Он позволяет использовать только
начальный тег, так как следующий элемент Р означает не только начало следующего
абзаца, но и конец предыдущего.
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
Вместе с этим элементом можно использовать атрибут align, который будет действовать
на весь абзац.
<BR>
Этот элемент Обеспечивает принудительный переход на следующую (новую) строку. Он
имеет только начальный тег!
<NOBR></nobr>
Этот элемент является полной противоположностью элемента BR. Текст, который
находится внутри этого элемента, будет выводится на экран одной строкой. И для
просмотра этого текста придется использовать горизонтальную строку прокрутки.
<PRE></pre>
Элемент используется для обозначения текста отформатированного заранее (preformated).
Под этим элементом понимается, что текст будет выведен в том виде, в каком он был
введен автором. Например, учитывается концы строк, которые были введены в редакторе.
В других случаях такое форматирование будет игнорироваться браузером! Или, если
автор введет большую и длинную строку, то она уйдет за пределы окна (сходное действие
имеет элемент NOBR) Этот элемент удобно использовать, если форматирование текста
приведет к искажению смысла.
<B></b>
Этот тег придает тексту полужирное начертание. Очень популярный элемент.
Использование полужирного начертания - прием, который позаимствовали из текстовых
редакторов.
<I></i>
Этот элемент также изъят из текстовых редакторов. Он придает тексту начертание
курсивом.
<U></u>
Этот элемент подчеркивает содержимое этого тега.
<SUB></sub>
Вы, наверное, знаете, что некоторые текстовые редакторы поддерживают нижний индекс,
так вот этот тег придаёт такое начертание. Таким образом
<SUP></sup>
Этот тег, наоборот, придает эффект верхнего индекса. Так
<BASEFONT>
Этот элемент задает базовый размер шрифта для всей страницы. Внутри элемента
указывают атрибут size.
<FONT></font>
Этот элемент имеет огромное значение в HTML, так как он определяет форматирование
текста внутри себя. Все характеристики используют при помощи специальных атрибутов:
 size определяет абсолютный размер шрифта от 1 до 7 (4 - по умолчанию).[Можно
использовать значения: +1;+2;+3;+4;-1;-2 Это увеличение(+) или уменьшение(-),
относительно шрифта по умолчанию]
 color определяет цвет шрифта.
 face определяет, какой шрифт (группа шрифтов) будет использоваться при просмотре
страницы.[Шрифты должны быть установлены на клиентском компьютере]
Пример:
<FONT size="4" color="black" face="Arial; Webdings; Times New
Roman">Текст</font>
элемент имеет дополнительные атрибуты: align, class, dir, id, lang, style, title
<BLOCKQUOTE></blockquote>
Элемент означает форматирование текста, как цитаты. Визуально текст мало меняется, но
делается небольшой отступ. С кавычками текст не имеет никакой связи.
Этот элемент имеет специфический атрибут cite.
Этому элементу присущи атрибуты: dir, lang, title, style, class, id.
<Q></q>
Этот элемент очень похож на blockquote, но он применяется для отступа цитаты внутри
абзаца.
Этому элементу присущи атрибуты: dir, lang, title, style, class, id.
<ABBR></abbr>
Этот элемент выделяет аббревиатуры, например:
MSIE(Microsoft Internet Explorer), HTML, WWW и другие.
<ACRONYM></acronym>
Элемент выделяет акронимы (сокращения, образованные несколькими словами).
Например, и т.д.; и т.п.
Устаревшие и нестандартные элементы
В HTML есть элементы, которые поддерживаются не всеми броузерами. Их
существование обязано появлению новых версий языка. Во-вторых, результаты действий
некоторых элементов заменяются более популярними методами. Каждый разработчик
должен иметь ввиду то, что его страница будет просматриваться разными броузерами, а
следовательно документ не должен изменять вид оригинала.
На сегодняшний момент есть официальная специфика языка, и все новые броузеры
поддерживают старые элементы, но это не обязательно.
Так сложилось, что сам язык разрабатывается и совершенствуется одной организацией, а
броузеры -другими. Следовательно, новые или старые элементы могут не
поддерживаться.
BGSOUND
Этот элемент используется для создания звуковых эффектов. Он употребляется в секции
HEAD.
Элемент имеет ряд атрибутов:
loop -обозначает число повторений звукового фрагмента.
Для бесконечного повтора применяют:
loop="infinite" или loop="-1"
Можно задать громкость звука:
volume=число
Атрибут src очень важный, так как выбирает звуковой файл:
<BGSOUND src="имя_файла.wav">
Также имеет стандартные атрибуты: class, id, lang, title.
<BLINK></blink>
Этот элемент задает мгание текста. Очень часьл этот тег заменяется программами сценариями.
<EMBED></embed>
Элемент был придуман в качестве хранилища некоторого объекта. Он употребляется по
следующей схеме:
<EMBED>
src="источник данных"
height="высота"
width="ширина"
attribute_1="значение 1-го атрибута"
attribute_2="значение 2-го атрибута"
</EMBED>
<NOEMBED></noembed>
Элемент может содержаться внутри <EMBED></embed> и содержит определеный текст,
который появляется, если браузер не поддерживает тег EMBED.
<BANNER></banner>
Этот элемент обеспечивает постоянный показ на экране содержимого этого элемента, не
зависимо от прокрутки.
<MARQUEE></marquee>
Элемент, создающий бегущую строку. Сам по себе прием интересен, но наибольшего
эффекта можно добиться, если удачно подобрать атрибуты.
Фоновый цвет задается обычным способом:
bgcolor="цвет"
Если фон задан, то этот элемент выглядит как цветная полоса, вдоль которой бежит текст.
Высоту полосы можно регулировать двумя способами:
height="высота в пикселах"
height="чило в %"
Если высота полосы задается в пикселах, то можно порекомендовать задавать ее в
диапазоне 30...50. Высоту можно задавать и в процентах. Процент определяет долю от
высоты видимой части гипертекста внутри окна броузера. Эта величина, разумеется, не
является постоянной и зависит от размера окна. Если высота полосы достаточно большая,
имеет смысл использование атрибута align для выравнивания текста по верхнему краю, по
середине или по нижнему краю полосы:
align="top"
align="middle"
align="bottom"
Правда, не все броузеры поддерживают этот атрибут. Вот пример полосы; зеленого цвета,
высотой 50 пикселов, с выравниванием бегущего текста по середине:
<MARQUEE bgcolor="green" height="20" align="middle" scrollamount="8"> Бегущая
строка </marquee>
Направление движения строки тоже можно менять:
direction="left"
direction="right"
Удачным атрибутом, оказался тот, который управляет поведением (behavior) строки. По
умолчанию создается обычная бегущая строка, какие бывают на табло. Дойдя до края
экрана (окна), она уходит из поля зрения, а затем появляется с противоположной стороны.
Этот атрибут задается так:
behavior="scroll"
Второй вариант движения заключается в следующем: строка появляется из-за края окна,
достигает противоположного края и останавливается. Атрибут таков:
behavior="slide"
По третьему сценарию строка не исчезает с экрана, но и не останавливается. Она движется
вправо или влево, «отражаясь» от края окна и меняя направление движения. Атрибут в
этом случае должен быть задан так:
behavior="alternate"
Всю Полосу можно сдвинуть по горизонтали вправо:
sрасе="смещеше в пикселах"
Выше и ниже полосы можно создать пустое пространство:
vspace="высота в пикселах"
Количество проходов строки по экрану можно ограничить:
loop="число"
Выполнив необходимое число проходов, строка остановится. В данном случае отсчет
начнется только после того, как пользователь увидит на экране бегущую строку. Скорость
движения задает следующий атрибут:
scrollamount="число"
Если число равно 1, то строка будет еле ползти по сравнению с режимом по, умолчанию.
Если число больше 10, то строка будет двигаться очень быстро. Дадный атрибут задает
скорость движения как число пикселов, которые проходит1 строка за каждый шаг.
Существует второй атрибут скорости, определяющий временной интервал (в
миллисекундах) между шагами:
scrolldelay="число"
С помощью этого атрибута можно заставить строку двигаться рывками.
Немного о способе применения атрибутов
Атрибуты - часто применяемые части языка HTML. Это очень удобные конструкции,
которые облегчают жизнь разработчика. Использование атрибутов лучше всего объяснить
на примере элемента FONT:
<font color="red" size=4 align="right"> Текст </font>
Как вы видите - способ применения атрибутов предельно прост. Они отделяются друг от
друга только пробелом. Это всегда нужно учитывать при разработке страниц и при
использовании атрибутов!
Атрибуты также применяются в Стилях. Здесь синтаксис немного отличается от
стандартного. Атрибуты, входящие в набор какого-либо стиля, отделяются друг от друга
не пробелом, как было сказано выше, а знаком: ; [точка с запятой]. Запомните, что такое
разделение применимо только к атрибутам, входящим в состав стилей.
ALIGN
Атрибут align используется для выравнивания объектов. Этот атрибут может принимать
следующие значения:







left -выравнивание по левому краю;
right -выравнивание по правому краю;
center -выравнивание по центру (по горизонтали);
middle -выравнивание по центру (по вертикали);
top -выравнивание по верхней границе;
bottom -выравнивание по нижней границе;
justify -выравнивание по ширине (для текста).
Для таблиц применяют атрибут valign:(выравнивание по вертикали)




top -см. выше
bottom -см. выше
center -см. выше
baseline -выравнивание по первой строке.
Пример:
<P align="center">
CHARSET
Атрибут применяется для определения кодировки документа.
В основном этот атрибут применяется внутри тега META.
Например:
charset="windows-1251"
КЛАССЫ (CLASS)
Этот элемент позволяет расширить возможности стилей, путем создания собственных
имен стилей и последующего присвоения имени какому-либо элементу. Например,
<STYLE type="text/css">
H1.red {
color: RGB(215,40,40); text-align: center
}
</style>
Здесь мы видим, что буквам придан красивый красный цвет, а текст выровнен по центру.
Применять классы предельно просто:
<H1 class="red">текст абзаца</h1>
Прелестью классов является то, что можно создавать на одной странице несколько
различных стилей(форматирований) для одного элемента.
Универсальные классы(атрибут ID)
Универсальные классы можно применять тогда, когда требуется создание класса,
подходящего многим элементам сразу. Например,
#red {
color: RGB(215,40,40); font-weight:bold
}
Здесь написан стиль для полужирного начертания букв красивого красного цвета. Кстати,
функция RGB незаменима при потребности в очень точном подборе цвета. Применяется
этот метод при помощи атрибута ID:
<h2 id="red">Заголовок</h2>
Результатом является заголовок красного цвета полужирного начертания.
CLASSID
Этот атрибут задает программу или объект, которые могут быть использованы в
определенных элементах.
COLOR
Атрибут color используется для предания определенного оттенка объектам.
Использование этого атрибута очень простое. Вот пример:
color="цвет"
Можно применять в качестве цвета английское название, а можно RGB оттенок.
Например:
<P color="red">абзац красного цвета</p>
DIR
в некоторых языках буквы читаются справа на лево. Для этого существует атрибут dir. Он
может принимать значения:
dir="LTR" -слева направо
dir="RTL" -справа налево
ID
Этот атрибут применяется для расширения возможностей разработчика. Он является
универсальным именем элемента. В зависимости от типа элемента, этот атрибут
выполняет различные функции. Атрибут позволяет использовать классы(следующая
ссылка в меню). Например, надо придать уникальный цвет, размер, шрифт и т.д. для
кокой-либо части страницы. Придадим буквам серо-стальной цвет. Назовем его « rus ».
Для чего, внутри элемента style вводите таблицу стилей:
#rus {
color: RGB(155,180,190); font-weight: bold
}
Из-за того, что оттенок подбирается очень точно без функции RGB() не обойтись. Буквы
будут очень светлыми, поэтому придадим им полужирное начертание. Этот стиль можно
будет применять к различным элементам, например:
<H2 id="rus"> Заголовок, отформатированный стилем "rus"</h2>
Такой абзац будет выглядеть очень оригинально, так как будет отличаться от других. Так
можно менять обилие установок по умолчанию.
LANG
Атрибут определяет, на каком языке написан текст внутри элемента. Хотя этот атрибут
применяется очень редко. Его даже можно назвать устаревшим.
lang= "код языка"
Вот пример основных кодов: ar -арабский
de -немецкий
el -греческий
en -английский
eu-us -американская версия английского языка
es -испанский
fr -французский
he -иврит
hi -хинди
it -итальянский
ja -японский
nl -голландский
pt -португальский
ru -русский
zh -китайский
но в некоторых языках буквы читаются справа налево. Для этого существует атрибут dir.
Пример:
<FONT lang="en">Text</font>
SIZE
Этот атрибут применяют для указания желаемого размера шрифта. Он применяется
внутри элементов BASEFONT, FONT Атрибут принимает размеры от 1 до 7, но можно
указать не точную цифру, а прибавление или вычитание из величины по умолчанию (по
умолчанию используется 3-й размер). Пример использования:
size="число"
size="+число(до 4)"
size= "-число(до 2)"
Вот визуальные примеры использования атрибута:
Шрифт 1
Шрифт 2
Шрифт 3
Шрифт 4
Шрифт 5
Шрифт 6
Шрифт 7
Шрифт -1
Шрифт -2
Шрифт +1
Шрифт +2
Шрифт +3
Шрифт +4
TITLE
Этот атрибут применяют к элементу для короткого комментария, который появляется на
экране в виде всплывающей строки.
title="маленький комментарий"
Например:
<P title="Комментарий к абзацу">Абзац</p>
TYPE
Атрибут type определяет тип документа, который используется в ссылке. Первоначально
type применялся для определения формата отправленной электронной почты, но сеанс
служит для указания форматов документов, в составе Web -страниц. Например:
 text/plain -обычный текст;
 text/css -каскадная таблица стилей;
 text/html -текст в формате HTML;
 application/postscript -документ в формате PostScript;
 application/java -апплет;
 image/gif; image/jpg; image/png -изображения в формате GIF, JPG и PNG,
соответственно;
 video/mpeg -видеоролик;
 text/javascript --программа-сценарий на JavaScript;
 text/vbscript -программа-сценарий на VBScript.
Для форм атрибут имеет другой смысл: определенного элемента формы (кнопки, поле
ввода и т.д.)
Например:
<STYLE type="text/css">Стиль</style>
STYLE
Применение атрибута style:
<P style="свойство1: значение; свойство2: значение; ...">
Например:
<P style="font-size: 14pt; font-style: italic; color: red">
Здесь для абзаца выбран 14-й размер букв, курсив и красный цвет букв.
Так выглядит абзац, отформатированный стилем, указанном в примере.
CLEAR
Атрибут clear позволяет выравнивать объекты, например рисунки, относительно текста, в
котором использован элемент BR.
Значения атрибута:
 left -выравнивание по левому краю
 right -выравнивание по правому краю
 center -выравнивание по центру
Например:
<BR clear="center">
FACE
Этот атрибут применяется вместе с элементом FONT. Он задает один или несколько
шрифтов (через точку с запятой)
Например,
face="arial; verdana; tahoma"
К сожалению есть проблема: Так как Web -страницы просматривают много людей, то нет
гарантии, что отобразится нужный шрифт на всех компьютерах. Если на компьютере нет
шрифта из списка, то страница будет просматриваться с шрифтом по умолчанию.
HEIGHT
Атрибут выражает высоту какого-либо объекта. Этот атрибут обычно используется для
задания высоты изображения.
height=число
WIDTH
Атрибут выражает ширину какого-либо объекта. Этот атрибут обычно используется для
задания ширины изображения.
width=число
Число может принимать ряд значений: в пикселях, в процентах и т.д.
HSPAСE
Атрибут определяет пустое пространство справа и слева от объекта и употребляется:
hspace="число(в пикселях)"
VSPAСE
Атрибут определяет пустое пространство сверху и снизу от объекта и употребляется:
vspace="число(в пикселях)"
Атрибуты, применяемые для форматирования таблиц.
Таблицы в HTML можно сделать похожими на EXEL-евские таблицы. Например мы
можем объединить ячейки:
 rowspan=n, где n- число объединяемых ячеек по горизонтали
 colspan=n, где n- число объединяемых ячеек по вертикали
Данные в ячейках можно выровнять при помощи атрибута align. Этот атрибут можно
применять как ко всей таблице, так и к отдельной ячейке.
Мы можем задавать определенную ширину ячейки при помощи атрибутов height (высота)
и width (ширина).
< TABLE> < /table>
Этот элемент обозначает границы таблицы и отделяет её от других частей страницы. Он
позволяет задать свойства таблицы. Этот элемент имеет ряд атрибутов:align, width, height
Для элемента table характерны ряд специальных для таблиц атрибутов:
border -ширина боковой грани. Если этот атрибут принимает нулевое значение, то рамка
вовсе исчезает.
cellspacing -определяет ширину фронтальной границы(внутренняя часть). Если атрибут
принимает значение, равное нулю, то рамка очень тонкая и заостренная.
cellpadding -этот атрибут применяют для определения пустого пространства,
окружающего данные в ячейках. Задание атрибута позволяет улучшить восприятие
таблицы, т.к. между данными и границей сохраняется определенное расстояние. Этот
атрибут выражается в пикселях, процентах и т.д.
bgcolor -задание этого атрибута позволяет задать цвет конкретной ячейки или всей
таблицы.
background -задает фон для таблицы или ячейки.
Атрибуты bgcolor и background можно задавать с другими элементами, кроме caption.
frame="параметр" -используется только с table.
Выделяют ряд параметров:
 void -рамка отсутствует;
 above -верхняя сторона рамки;
 below -нижняя сторона рамки;
 hsides -рамка сверху и снизу;
 vsides -рамка слева и справа;
 lhs -левая часть рамки;
 rhs -правая часть рамки;
 border или box -рамка показана полностью(в принципе, можно просто не использовать
этот атрибут)
rules="параметр" -определяет вид сетки таблицы внутри. Как и предыдущий, он имеет
ряд параметров:





none -сетка отсутствует;
groups -сетка вокруг групп ячеек;
rows -горизонтальние линии между строками;
cols -вертикальние линии между колонками;
all -обычная сетка(в принципе, можно просто не использовать этот атрибут)
Существует также специальный комментарий к таблице:
summary="текст комментария"
К таблицам можно применить также стандартные атрибуты: class, dir, id, lang, title, style.
Например:
<TABLE border="0" cellpadding="5" cellspacing="0" align="center">
<TR><TH>первый заголовок <TH>второй заголовок
<TR><TD>первая ячейка <TD>вторая ячейка
</table>
<CAPTION></caption>
Этот элемент используется для задания заголовка таблицы. Он должен быть расположен
внутри элемента TABLE, хотя сам выводится вне рамки таблицы.
К таблицам применимы также стандартные атрибуты: class, dir, id, lang, title, style.
<TR>
Этот элемент создаёт строку таблицы. Этот элемент не имеет конечного тега.
Следовательно начало новой строки - следующий тег TR. Внутри находятся другие теги,
определяющие состав таблицы TD, TH
Этот тег допускает использование выравнивания align
<TH>
Этот элемент управляется тегом TR и должен быть внутри него. Элемент ячейки,
являющийся заголовком строки или столбца. Элемент отличается от обычного TD тем,
что браузер выводит содержимое полужирным начертанием.
<TD>
Этот элемент определяет обычную ячейку. Эти элементы могут не иметь конечного тега,
так как его функцию определяет следующий тег TR, TH и TD.
Для каждого тега таблицы можно задать атрибуты цвета (bgcolor), фона(background).
<THEAD>
Элемент обозначает заголовок таблицы.
<TFOOT>
Этот элемент обозначает низ таблицы
<TBODY>
Этот элемент дает понять браузеру о том, что он имеет дело с основной частью таблицы.
 В таблице можно употребить лишь один раз TFOOT и THEAD, но много раз TBODY!
 Существует строгая последовательность употребления групп строк: THEAD -TFOOT TBODY!
 Блоки должны содержать одинаковое количество колонок.
<COLGROUP>
Тег позволяет создать группы колонок(столбцов) с одинаковыми свойствами. С этим
тегом применяется атрибут span, который обозначает количество столбцов, на которые
распространяется данный элемент.
<COL>
Этот элемент, в отличие от предыдущего, назначает свойство одной колонки(столбца).
Заметьте, что свойства колонок (столбцов) задаются по порядку, то есть первому столбцу
соответствует первый элемент COL или COLGROUP, второму -второй, третьему -третий и
т.д.
<FRAMESET><FRAME></frameset>
Фреймы -это области страницы, в которых отражаются несколько ресурсов(HTM или
HTML и др. файлов). Страница с фреймами содержит два или более файлов, которые
определяют, во-первых, документ раскладки(структура страницы), во-вторых, документы,
в которых содержатся сама страница.
Для начала надо решить, какое разбиение требуется для страницы: вертикальное или
горизонтальное
 вертикальное разбиение получается при помощи атрибута cols:(получается разбиение,
как в Norton Commander-е)
cols="значение" -значение может быть только цифровым (проценты, пиксели, пункты и
т.д. Или "*" для оставшейся части экрана)
 Горизонтальное - при поморщи атрибута:
rows="значение" -значение может быть только цифровым (проценты, пиксели, пункты и
т.д. Или " *" для оставшейся части экрана)
Создание страницы с фреймами можно разделит на два этапа:
 Первый -создание файла, в котором будет отображена структура страницы.
 Второй -подготовка отдельных файлов-фреймов, в которых содержится сама страница.
Вместе с этим элементом можно употреблять стандартные атрибуты: id, class, title, style.
Атрибуты, применяемые с элементом FRAME
Кроме стандартных атрибутов, элемент имеет ряд собственных, которые
усовершенствывают внешний вид окна страницы. Внутри элемента FRAME должны
содержаться ссылки на файлы -части страницы. Кроме того, каждый элемент FRAME
полезно снабжать именем, при помощи атрибута name. Это имя впоследствии можно
использовать в гиперссылках. Результат может быть такой.
<FRAME src="имя файла.htm" name="имя фрейма">
После загрузки страницы пользователь может передвигать границы фреймов. С помощью
атрибута noresize вы можете запретить пользователю передвигать границы окон.
Вы можете управлять полосами прокрутки с помощью атрибута scrolling, который может
принимать значения:
scrolling="yes" -полоса прокрутки будет автоматически включена, независимо от её
необходимости.
scrolling="no" -этот атрибут запрещает появление полосы прокрутки, даже если она
требуется.
scrolling="auto" -(значение по умолчанию) атрибут передает все полномочия появления и
исчезновения полосы прокрутки системе.
Существует атрибут longdesc, который придает фрейму описание.
Атрибутом frameborder -вы можете создать рамку вокруг фрейма.
frameborder=1 -рамка включена;
frameborder=0 -рамки нет.
Можно задать отступы от верхнего и нижнего краев окна при помощи атрибута:
marginheight (значение указывается в пикселях).
marinheight="100"
Также можно регулировать отступы справа и слева, с помощью атрибута
marinwidth(значение указывается в пикселях.)
marinwidth="100"
<NOFRAMES></noframes>
Этот элемент специально предусмотрен для случаев, когда броузер не поддерживает
фреймы. В этом случае надо предупредить и переадресовать клиента к другой старицы
(без фреймов). Этот код выглядит следующим образом:
<HTML>
<HEAD>
<TITLE>Заголовок </title>
</head>
<FRAMESET cols="nn%, mm%">
<FRAME src="page1.htm">
<FRAME src="page2.htm">
<NOFRAMES>
<P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без
фреймов</a></p>
</noframes>
</frameset>
</html>
Естественно, что браузеры, поддерживающие фреймы не будут воспроизводить эту
надпись.
Организация перехода по фреймам
Файл Frame1.htm
<HTML>
<HEAD>
<TITLE>Заголовок для фреймов</title>
</head>
<FRAMESET frameborder=1 framespacing=5 cols="160, *">
<FRAME src="m1.htm" name="menu01" noresize >
<FRAME src="right1.htm" name="info01">
<NOFRAMES>
<P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без фреймов</a></p>
</noframes>
</frameset>
</html>
Файл M1.htm <HTML>
<HEAD>
<TITLE>Левый фрейм</title>
</head>
<BODY text="black" bgcolor="gold" link=" green" vlink="purple" alink="red">
<H3>Меню</h3>
<HR>
<a target="info01" href="right1.htm"> Правый 1</a>
<a target="info01"href="right2.htm"> Правый 2</a>
</body>
</html>
Файл Right1.htm
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<BODY text="black" bgcolor="#9CB3BE" link="green" vlink="purple" alink="red">
<H2>Правый фрейм № 1</h2>
<a href="right2.htm">Следующая страница</a>
<hr>
</body>
</html>
Файл Right2.htm
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<BODY text="black" bgcolor="pink" link="green" vlink=" purple" alink="red">
<H2>Правый фрейм № 2</h2>
<a href="right1.htm">Предыдущая страница</a>
    
<hr>
</body>
</html>
Теперь давайте разберем организацию ссылок. Первый файл: Frame1.htm не содержит
информации для отображения на странице, но он задает разбиение на фреймы
страницы(размеры областей, документы содержания). Здесь важно, чтобы каждый фрейм
содержал атрибут name
name=" info01"
Страницы, показываемые внутри фрейма могут быть разными, а имя не меняется и
остается постоянным и используется в гиперссылках.
Левый фрейм (файл M1.htm) содержит страницу -меню, с помощью которой можно легко
совершать серфинг по странице. Этот фрейм содержит две ссылки, но их может быть
гораздо больше. Он более узкий, нежели правый.
Заметьте, что заголовок взят из файла Frame1.htm. Это единственная информация из этого
файла, которую мы увидим в окне браузера. А теги TITLE из других страниц скрыты.
В принципе файлы Right1.htm и Right2.htm служат для размещения какой-либо
информации. Также в них можно разместить разные ссылки возвращения назад и
дальше(для удобства).
В примере вы можете видеть два вида ссылок: в меню и на странице.
Атрибут target нужен для определения окна, в котором откроется объект. Атрибут target
имеет несколько значений:
 _parent -заставляет браузер открыть ссылку, заменив содержимое текущего окна, но не
фрейма!
 _self -как будто атрибута и нет, то есть страница открывается внутри текущего фрейма;
 _top -то же, что и parent;
 _blank -браузер открывает ссылку в новом окне.
Употребляется атрибут по следующей схеме:
<a target_blank href="ссылка">Текст ссылки</a>
<IFRAME></iframe>
Шаблон для создания такого файла выглядит следующим образом:
<IFRAME src="имя_файла.htm" width="nnn" height="mmm">
<P>Для просмотра этой страницы нужен броузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без
фреймов</a></p>
</iframe>
Этот элемент имеет ряд атрибутов, например height и width, frame, scrolling, target и др.
атрибуты фреймов
Допускается использование стандартных атрибутов: id, class, title, longdesc, style, align.
Наверх
Таблицы Стилей
Таблицы стилей(style sheets) являются одной из самых интересных и красивых
нововведений HTML 4. Они позволяют изменять свойства разных элементов в
соответствии с желаниями разработчика.
Таблицы стилей применяют по принципу:
Элемент.имя_стиля {
свойство1: значение; свойство2: значение; ...
}
В конечном счете мы имеем набор свойств для выбранного элемента. Так мы значительно
расширяем возможности HTML. Спецификой применения стилей является то, что при
присвоении стиля элементу, выделяется все содержимое начального и конечного тегов!
Например, присвоив стиль элементу BODY, он будет распространяться на всю Web страницу. В соответствии с синтаксисом HTML, автор должен включить в заголовок
соответствующее определение:
<META http-equiv="Content-Style-Type" content="text/css">
Таким образом браузер получит информацию о применении стилей
Нужно отметить, что есть другие способы определения свойств элементов, например,
JavaScript, VBScript и т.д.
Стили можно применять, как атрибуты, подробнее здесь.
Наверх
<STYLE></style>
Элемент STYLE позволяет задать(изменить) свойства одноименных элементов, например:
<STYLE type="text/css">
H1 {border-width: 1; border: groove; text-aligh: center; color: green}
H2 {color: maroon; font-style: italic}
</style>
Как мы видим, здесь немного расширены возможности элемента заголовков. Для строки
H1 {border-width: 1; border: groove; text-align: center; color: green} Ширина рамки, сама
рамка, выравнивание текста и цвет текста, соответственно.
Для строки H2 {color: maroon; font-style: italic} выбран цвет заголовка и курсив,
соответственно.
Внимание! Если вы решили задать одинаковые значения нескольким элементам сразу, то
не надо писать много строк, указывая каждому элементу общие значения, а просто
сделайте пробел между элементами; браузер должен понять, что элементы имеют
одинаковые атрибуты.
Наверх
КЛАССЫ (CLASS)
Этот элемент позволяет расширить возможности стилей, путем создания собственных
имен стилей и последующего присвоения имени какому-либо элементу. Например,
<STYLE type="text/css">
H1.red {color: RGB(215,40,40); text-align: center}
</style>
Здесь мы видим, что буквам придан красивый красный цвет, а текст выровнен по центру.
Применять классы предельно просто:
<H1 class="red">текст абзаца</h1>
Прелестью классов является то, что можно создавать на одной странице несколько
различных стилей(форматирований) для одного элемента.
Наверх
Универсальные классы(атрибут ID)
Универсальные классы можно применять тогда, когда требуется создание класса,
подходящего многим элементам сразу. Например,
#red {color: RGB(215,40,40); font-weight:bold}
Здесь написан стиль для полужирного начертания букв красивого красного цвета. Кстати,
функция RGB незаменима при потребности в очень точном подборе цвета. Применяется
этот метод при помощи атрибута ID:
<h2 id="red">Заголовок</h2>
Результатом является заголовок красного цвета полужирного начертания.
Всего должно быть в меру! Обилие стилей ухудшает восприятие, а страница выглядит
новогодней ёлкой!
Наверх
<LINK>
Этот элемент используется для подключения отдельных файлов, в которых хранятся
стили. Все дело в том, что автор может применять несколько файлов со стилями, которые
будут называться каскадными(CSS). Для этого создается файл, в котором прописываются
стили в формате универсальных классов
Элемент LINK применяется по типу:
<LINK href="имя_файла.css" rel="stylesheet" type="text/css">
Атрибут REL указывает на то, что это ссылка на каскадные таблицы стилей; про атрибут
type вы можете узнать здесь.
Наверх
<DIV></div>
Этот элемент специально предназначен для применения стилей. Специфика этого
элемента состоит в указании ячейки, то есть его собственный стиль должен влиять на
стили элементов, находящихся внутри DIV. Элемент DIV применяют по принципу:
<HEAD>
<STYLE type="text/css">
DIV.имя {Свойство: значение;...}
</style>
<BODY>
<DIV class="имя">
<H1>Заголовок</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
</body>
Наверх
<SPAN></span>
Элемент SPAN, наоборот включают в в состав других элементов.
<HEAD>
<STYLE type="text/css">
SPAN.имя {Свойство: значение;...}
</style>
</HEAD>
<BODY>
<H1>Заголовок</h1>
<p>Первый абзац</p>
<p><span class="имя">Второй абзац</p>
</body>
Наверх
Списки
Списки (list) появились в HTML из-за большой популярности в текстовых редакторах.
Главное отличие списка от текста состоит в том, что браузер автоматически нумерует
пункты списка. Если список ненумерованный, то программа автоматически ставит
маркеры перед пунктами(кружки, прямоугольники и т.д.) результатом является легко
читаемый список. Теги в списках можно разделить на две группы: внешние и внутренние.
Первые информируют браузер о том, что это список, второй, о конструкции списка. Есть
несколько разновидностей списков: ненумерованные и нумерованные, вложенные и т.д..
В принципе использование списков можно легко заменить таблицей, как впрочем и
делают большинство Web мастеров.
Наверх
<UL><LI></ul>
Это самый простой вид списка. Его легко представить:
<UL>
<LI>1-й пункт списка
<LI>2-й пункт списка
<LI>3-й пункт списка
</ul>
Элементы UL: начало и конец списка, а LI: обозначение каждого нового пункта. Внешне
наш список выглядит так:



1-й пункт списка
2-й пункт списка
3-й пункт списка
Наверх
<OL><LI></ol>
Это более сложный вид списка. Его представляют:
<ОL>
<LI>1-й пункт списка
<LI>2-й пункт списка
<LI>3-й пункт списка
</оl>
Элементы ОL: начало и конец списка, а LI: обозначение каждого нового пункта. Внешне
наш список выглядит так:
I.
II.
III.
1-й пункт списка
2-й пункт списка
3-й пункт списка
Этот элемент имеет свои собственные атрибуты:
Значение обязательного атрибута type:
Значение
Вывод
Type 1
1,2,3,4,...
Type i
i,ii,ii,iv,...
Type I
I,II,III,IV,...
Type a
a,b,c,d,...
Type A
A,B,C,D,...
Есть атрибут, который позволяет указать значение, с которого должна начаться нумерация
списка:
start=номер
Например, если перед нами список type=I и start=4, то первая строка будет содержать
номер IV, вторая V, третья VI и т.д.
Для элемента LI можно выбрать номер текущего пункта списка при помощи атрибута
value=номер
Наверх
<DL><DT><DD></dl>
Это более сложный вид списка. Его представляют:
<dl>
<DT>1-й пункт
<DD>Определение пункта 1
<DD>другое определение пункта 1
<DT>2-й пункт
<DD>Определение пункта 2
<DT>3-й пункт
<DD>Определение пункта 3
</dl>
Этот список визуально выглядит так:
1-й пункт
Определение пункта 1
другое определение пункта 1
2-й пункт
Определение пункта 2
3-й пункт
Определение пункта 3
Можно создать список из нескольких элементов, который будет выглядеть очень
благородно:
<UL>
<LI>Пункт 1
<OL>
<LI>пункт 1.1
<LI>пункт 1.2
</ol>
<LI>Пункт 2
<OL>
<LI>Пункт 2.1
<LI>Пункт 2.2
</ol>
<LI>Пункт 3
<OL>
<LI>Пункт 3.1
<LI>Пункт 3.2
</ol>
</ul>
Визуально этот список выглядит так:



Пункт 1
1. пункт 1.1
2. пункт 1.2
Пункт 2
1. Пункт 2.1
2. Пункт 2.2
Пункт 3
1. Пункт 3.1
2. Пункт 3.2
Наверх
<A></a>
Этот элемент можно назвать одним из самых важных, так как он обеспечивает создание
гиперссылок. Чаще всего используются такие шаблоны:
Любой текст <a href="Адрес ссылки">Текст для клика</а>
или:
<a href="Адрес ссылки"><IMG src="Ссылка на рисунок"></а>
Первый шаблон используется для гиперссылки в тексте. Второй, если видимая часть
гиперссылки - это рисунок.
Если надо указать ссылку на локальный ресурс, то используют такой вид:
Любой текст <a href="file:// Диск:/Путь к файлу/файл.тип">Текст для клика</а>
В принципе, все страницы - файлы сайта можно разместить в одной папке. В этом случае
просто указываете имя файла и тип. Часто используют относительные ссылки; это
позволяет легко менять местоположение набора страниц, тогда фрагмент ссылки строится
по принципу:
href="./Папка/файл.тип"
Здесь на структуру вложенных папок указывает точка перед наклонной чертой. Если
необходимо указать папку, которая находится на том же уровне вложения, что и текущая,
то добавляют ещё одну точку:
href="../Папка/файл.тип"
Как большинство элементов, A имеет некоторые атрибуты:
href="URL"
Например, href="http://www.opera.com".
HTTP- означает способ доступа для ссылки.
Есть и другие схемы доступа:








file -ссылка на файл, находящийся на локальном диске;
ftp - ссылка на файл по протоколу передачи данных(file transfer protocol);
http - ссылка на WWW;
mailto - ссылка на отправку электронной почты;
news - ссылка на новости USENET;
nntp - ссылка на новости USENET через протокол NNTP;
telnet - ссылка на подключение по протоколу telnet;
wais - ссылка на подключение к системе поиска WAIS;
Для ссылки на электронную почту используют:
<a href="mailto:имя@название.домен">Текст для клика</а>
Для больших страниц удобно использовать ссылки для перехода внутри страницы:
<a name="Метка">Текст для клика</а>
Для перехода к фрагменту на другой странице используют:
<a href="http://URL/file.type/#Метка">Текст для клика</а>
Для перехода внутри страницы используют:
Подсказка<a href="#Метка">Текст для клика</а>
Для элемента А также предусмотрены атрибуты:
 hreflang - этот атрибут имеет сходное действие с lang
 rel и rev -это прямая и обратная ссылка, соответственно. Прямая - если переход
осуществляется на другую страницу. Обратная для перехода назад, как в браузере.
Применяют по принципу:
rel=" Тип прямой ссылки"
rev=" Тип обратной ссылки"
Выделяют следующие стандартные типы ссылок:
 alternate - другая версия документа;
 stylesheet - таблица стилей в виде отдельного файла;
 start - первая страница;
 next - следующая страница(в смысле перехода);
 prev - предыдущая страница(в смысле перехода);
 contents - страница со содержанием документа;
 index - страница с алфавитным указателем;
 glossary - страница со словарём терминов;
 copyright - информация об авторских правах на документ;
 chapter - признак главы документа;
 section - признак раздела документа;
 subsection - признак подраздела документа;
 appendix - признак приложения документа;
 help - справочные данные;
 bookmark - закладка внутри документа.
Вместе можно использовать стандартные атрибуты:
class, dir, id, lang, title, style, type.
Наверх
Объекты и формы
В ХТМЛ есть определение объекта и звучит оно так: это некая нестандартная часть
страницы, которую определяет пользователь.
К объектам относятcя рисунки, таблицы, окна и т.д.
Особняком стоят объекты- программы. При их помощи можно создавать нестандартные
части страниц. Они вставляются при помощи универсального элемента OBJECT.
Наверх
Атрибуты, применяемые в объектах
Элементы объектов (IMG, OBJECT, APPLET) можно использовать с атрибутами: border,
width, height, hspace, vspace и стандартными атрибутами: align, charset, class, classid, color,
dir, id, lang, longdesc, size, title, type, style.
Наверх
<IMG>
Элемент для вставки графических объектов - файлов(images). Элемент не имеет конечного
тега, так как вся нужная информация задается при помощи атрибутов.
Атрибут src - указатель на графический файл:
src="ссылка на файл"
<IMG src="http://www.название.домен/имя файла">
Атрибут alt - описание рисунка. Это полезно для комментариев, в которых иногда
нуждается рисунок.
alt="текст комментария"
Также можно использовать атрибуты: width, heigth и стандартные атрибуты: class, dir, id,
lang, title, style, type, longdesc.
Также этот элемент позволяет назначать некоторые части рисунка, как ссылки. В этом
случае включаются атрибут ismap.
ismap="ismap"
Хотя значение атрибута не обязательно!
Также включается атрибут usemap:
usemap="#имя карты"
Имя выбирается в соответствии с элементами MAP и AREA
При использовании этого атрибута элемент IMG приобретает свойства гиперссылки и
обязательное использование 3-х элементов: MAP и AREA и IMG.
Наверх
<MAP><AREA></MAP>
Элемент нужен для общего определения карты. Внутри при помощи элемента AREA
задаются области карты и имя карты при помощи атрибута name.
name="Имя объекта"
Для каждой области карты должен быть определен свой тег AREA, вклочающий атрибут ссылку href.
Внуть элемента можно включить и описание alt.
Для определения формы карты применяется атрибут shape, имеющий 3 значения:
circle(круг), rect(прямоугольник) и polygon(многоугольник произвольной формы)
Круг (circle)
shape="circle" coords="x,y,r"
где x;y - координаты центра(отсчет от верха (х) и левого края (у) рисунка) и r - радиус
карты.
Многоугольник произвольной формы (polygon)
shape="poly" coords="x1,y1, x2,y2, x3,y3..."
где x1,y1, x2,y2, x3,y3... - координаты каждого из углов многоугольника (по часовой
стрелке).
Прямоугольник (rect)
shape="rect" coords="x1,y1, x2,y2"
где x1,y1, x2,y2 - координаты верхнего левого и нижнего правого углов прямоугольника.
При помощи атрибута nohref (используется без значений) можно запретить переход по
ссылке для определенной области карты.
Примеры карт:
Для обращения к карте можно использовать элемент OBJECT
<OBJECT data="Имя.gif" type="image/gif" usemap="#Имя карты"></object>
Для составления карт удобней всего пользоваться графическими редакторами для
установления координат карты. Координаты должны соответствовать положению курсора
на картинке.
Наверх
<APPLET></applet>
Элемент предназначен для вставки программы на Java-языке в броузеры, имеющие java
плагины.
<APPLET code="Имя.class" width="число" height="число">Комментарий</applet>
Атрибут code задает имя файла - программы и путь к ней.
Атрибут codebase задает базовое имя файла - программы и путь к ней.
Также этот элемент поддерживает атрибуты alt, name, vspace, hspace и стандартные
атрибуты: id, class, title, style.
Наверх
<OBJECT></object>
Простейшее применение этого объекта - размещение рисунка:
<OBJECT data="Имя.gif" type="image/gif"></object>
Также можно использовать этот элемент вместо IFRAME или APPLET:
<OBJECT codetype="application/java" classid="java:идентификатор" width="число"
height="число"> Комментарий</object>
Атрибуты, характерные для OBLECT:








classid="имя объекта" - идентификатор или адрес объекта;
codebase="URL" - ссылка на базовый URL с объектом;
data="URL" - URL с местонахождением объекта;
archive="список адресов" - аналог date, но позволяющий указывать список адресов;
codetype="тип" - используется только вместе с classid;
type="тип объекта" - тип объекта;
declare - объект, обозначенный таким типом загружается, но не выводится на дисплей;
standby="текст сообщения" -текст, который выводится на экран при загрузке объекта.
Наверх
<PARAM>
Элемент используется внутри APPLET или OBJECT:
<OBJECT classid="Адрес объекта" standby="значение">
<PARAM name="имя параметра" value="Значение параметра" valuetype="Тип параметра">
<PARAM name="имя параметра" value="Значение параметра">
</object>
Или:
<APPLET code="Имя.class" width="число" height="число">
<PARAM name=" имя параметра" value=" Значение параметра">
Комментарий
</applet>
Этот элемент должен обязательно содержать атрибуты name и value="значение"
Атрибут valuetype имеет следующие значения:
 data - параметр передается в качестве строки;
 object - параметр является идентификатором объекта;
 ref - значение параметра является ссылкой(Обязательно надо указать type - тип
параметра).
Наверх
Общие атрибуты форм
Формы могут иметь ряд составляющих: поля ввода, кнопки, переключатели и т.д. Для
тегов указывают атрибуты, влияющие на их работу.
Большинство элементов принимают определенные значения. Для доступа программ к
значениям используют атрибут name. Для задания подписей в поле ввода текста,
определение вида переключателей используется атрибут value.
tabindex=номер
Атрибут tabindex определяет последовательность перехода курсора (при нажатии
клавиши TAB) от одного поля формы к другой. Соответственно, если атрибут будет
tabindex=1, то курсор при открытии броузера установится на элемент, содержащий
атрибут с таким значением.
Можно назначить сочетание клавиш быстрого доступа при помощи атрибута accesskey.
accesskey="Клавиша"
При нажатии ALT+клавиша курсор автоматически переместится к полю формы,
обозначенному соответствующим атрибутом.
Атрибут disabled делает форму недоступной, то есть элемент нельзя выбрать и изменить.
Причем форма не может измениться.
Есть ряд специфических атрибутов-событий:
 onfocus - элемент фокусируется (изменяется);
 onchange - информация элемента изменена;
 onblur - элемент теряет фокус.
Наверх
<ISINDEX>
Этот элемент самый простой среди всех. Он предназначен для ввода текста и
генерирования запроса на сервер.
Для подсказки можно добавить аргумент prompt:
<ISINDEX prompt="Строка для ввода текста поиска">
Вот результат:
Строка для ввода текста поиска
Работа этого элемента напрямую связана с элементом BASE. К примеру задан базовый
URL:
<BASE href="http://www.название.домен/путь">
Значение атрибута href - это адрес некоторой поисковой системы Интернета. Если
пользователь ввел запрос из 3-х слов, то броузер автоматически сгенерирует запрос типа:
http://www.название.домен/?слово1+слово2+слово3
Строка будет отправлена на сервер для активизации поисковой машины. Теоретически
метод очень удобен, но на практике не все поисковые машины поддерживают знаки: {?} и
{+}. Следовательно, этот способ поиска годится для некоторых поисковых машин.
Стандартные атрибуты: id, class, lang, dir, title, style.
Наверх
<FORM></form>
Этот элемент предназначен для построения сложных форм. После заполнения формы она
обрабатывается при помощи CGI программ.
Атрибут action указывает на имя программы:
<FORM action="http://www.название.домен/имя программы" method="post">
Форма
</form>
Можно переслать форму по электронной почте:
<FORM action="mailto:адрес@сервер.домен" method="post">
Форма
</form>
Атрибут method предназначен для назначения протокола пересылки данных на сервер.
Протокол GET назначен по умолчанию. Он может не удовлетворять требований
разработчика, поэтому применяют протокол POST, который используется чаще.
Атрибут enctype указывает на способ кодирования содержимого формы.
Атрибут accept-charset предназначен для задания списка допустимых кодировок.
accept-charset="список кодировок"
Этот атрибут предназначен для определения типа данных:
accept="список типа данных"
Большинство форм снабжается кнопками, которые очищают (reset) или подтверждают
форму(submit) и отправляют на сервер.
Есть 2 атрибута событий, применяемые вместе с программами-сценариями: onsubmit,
onreset.
Стандартные атрибуты: id, class, lang, dir, title, style, title и атрибуты событий.
Наверх
<INPUT>
Элемент позволяет создать различные части формы: флажки, переключатели, поля ввода и
др.
Этот элемент не имеет конечного тега.
Вид элемента определяет атрибут type:
 type="text" name="inputtext" - поле формы для ввода текста (атрибут value
определяет текст по умолчанию внутри поля);
<INPUT type="text" value="введите текст">
??????? ????
 type="password" - создает поле ввода для пароля, информация отображается в виде
звездочек;
<INPUT type="text" value="Пароль" name="passwrd">
******
- введите пароль
 type="checkbox" -создает флажок;
<INPUT type="checkbox" value="1" name="checkbox">
<INPUT type="checkbox" value="2" name="checkbox" checked>
<INPUT type="checkbox" value="3" name="checkbox">
- флажки
 type="radio" -создает один переключатель. Для создания группы переключателей
создают несколько элементов INPUT (Имена, помеченные красным цветом должны
совпадать!).
<INPUT type="radio" name="switch" value="1">
<INPUT type="radio" name="switch" value="2" checked>
<INPUT type="radio" name="switch" value="3">
- переключатели
 type="button" - создает произвольную кнопку;
<INPUT type="button" value="Кнопка" name="but">
 type="submit" - создает кнопку, которая подтверждает и передает форму на сервер;
<INPUT type="submit" value="Послать">
???????
 type="reset" - создает кнопку, которая очищает форму;
<INPUT type="reset" value="Очистить">
? ???????
 type="image" - создает кнопку - рисунок. Применяется с атрибутами src, align, которым
лучше не пользоваться, так как не все броузеры его поддерживают в такой комбинации;
<INPUT type="image" src="button.gif" name="image">
 type="file" - создает кнопку - выбора файла и его присоединение к форме.
Пользователь может вручную ввести имя файла и путь к нему.
<INPUT type="file"name="browser">
 type="hidden" - элемент скрыт от пользователя. Это используют для включения некой
информации в форму. По сути это просто имя переменной и ее значение.
<INPUT type="hidden" name="info">
- здесь находится элемент, скрытый от пользователя.
Существует ряд атрибутов, употребление которых просто необходимо для правильной
работы и обработки сервером формы.
Атрибут name должен присутствовать во всех элементах INPUT, кроме кнопок
подтверждения сброса. Значение этого атрибута - имя поля формы. Благодаря этому
атрибуту происходит обработка формы CGI программой на сервере.
Атрибут value задает значение кнопки по умолчанию или надпись на кнопке.
Наличие атрибута checked показывает броузеру, что флажок должен стоять по
умолчанию. В флажка может быть выделено произвольное количество, в отличие от
переключателей, где должен быть выбран только один элемент.
Aтрибут size задает длину поля ввода текста. Длина задается в символах.
Атрибут maxlength задает: во-первых, максимальное количество символов, которое
может быть записано в строке ввода, а во-вторых, может ограничить размер файла,
присоединяемого к форме.
Атрибут readonly позволяет создать нередактируемый элемент.
Атрибут usemap используется в картах.
Атрибут accept выше.
Применяются атрибуты accesskey, tabindex, disabled.
Стандартные атрибуты: id, class, lang, dir, title, style, title и атрибуты событий.
При помощи элемента FORM можно заменить ISINDEX:
<FORM action="действие" method="POST">
<P>Строка поиска:<BR>
<INPUT type="text">
</form>
Строка поиска:
Наверх
<LABEL></label>
Этот элемент - контейнер для других элементов:
<LABEL> Адрес: <INPUT type="text" id="adress"></label>
Адрес:
Если элемент LABEL и другой элемент находятся отдельно, то используют атрибут for,
значение которого соответствует id другого элемента:
<LABEL for="adress"> Адрес: </label>
<INPUT type="text" id="adress">
Адрес:
Для каждого элемента формы создается свой элемент LABEL. Как правило, удобно
использовать таблицы для выравнивания формы.
Стандартные атрибуты: accesskey, id, class, lang, dir, title, style, title и атрибуты событий.
Наверх
Пример формы
<TABLE border="3">
<FORM action="mailto:Имя@сервер.домен" method="POST">
<TR>
<TD><LABEL for="imja">Имя:</label>
<TD><INPUT type="text" id="imja">
<TR>
<TD><LABEL for="familija">Фамилия:</label>
<TD><INPUT type="text" id="familija">
<TR>
<TD><LABEL for="ICQ">ICQ:</label>
<TD><INPUT type="text" id="telephon">
<TR>
<TD>Пол:  
<INPUT type="radio" name="gender" value="Male"> М 
<INPUT type="radio" name="gender" value="FeMale"> Ж 
<TD align="bottom">
<INPUT type="submit" value="Послать" align="bottom">
<INPUT type="reset">
</form>
</table>
Имя:
Фамилия:
ICQ:
Пол:
М
Ж
???????
?????
Наверх
<SELECT><OPTION></select>
Эти элементы предназначены для создания списка (SELECT) и пунктов списка (OPTION)
<SELECT>
<OPTION value="1">Первый
<OPTION value="2">Второй
<OPTION value="3">Третий
<OPTION value="4">Четвертый
</select>
????? ?
Атрибуты SELECT:
 name;
 multiple -этот атрибут позволяет выбрать сразу несколько пунктов сразу. Он не имеет
значений;
<SELECT multiple>
 size -показывает количество видимых на экране пунктов списка (после щелчка по
кнопке выбора);
Стандартные атрибуты элемента SELECT: disabled, tabindex, id, class, lang, dir, title, style,
title и атрибуты событий.
Атрибуты OPTION:
 selected -(без значений) определяет пункт меню, выбранный по умолчанию (в списке
может быть выбран только один пункт). Выбранный пункт характеризуется
дополнительными атрибутами name, value.
Стандартные атрибуты OPTION: disabled, id, class, lang, dir, title, style, title и атрибуты
событий.
Наверх
<TEXTAREA></textarea>
<TEXTAREA name="text" rows="5" cols="20">
Объект TEXTAREA
</textarea>
Объект TEXTAREA
Атрибуты:




rows -количество строк по вертикали;
cols -количество столбцов по горизонтали;
name - см.выше;
readonly - см.выше.
Этот элемент очень удобен, так как внутри него можно ввести очень большой фрагмент
текста.
TEXTAREA может использоваться и отдельно от форм, как самостоятельный объект.
Стандартные атрибуты элемента SELECT: disabled, tabindex, id, class, lang, dir, title, style,
title и атрибуты событий.
Наверх
<BUTTON></button>
Находится в стадии разработки
Этот элемент подобен INPUT, но с помощью этого объекта можно составлять более
сложные комбинации (текст и рисунок)
<BUTTON name="Имя" value="submit" type="submit">
Текст<IMG src="Файл.gif" alt="Подсказка" type="submit"></button>
Текст
Атрибут type принимает значения:
 button- произвольная кнопка;
 submit- кнопка, подтверждающая форму;
 reset- кнопка, очитки формы.
Стандартные атрибуты элемента SELECT: accesskey, disabled, tabindex, id, class, lang, dir,
title, style, title и атрибуты событий.
Наверх
<FIELSET><LEGEND></legend></fielset>
<FIELDSET>
<LEGEND>Заголовок</legend>
Имя: <INPUT name="imja" type="text">
Фамилия: <INPUT name="familija" type="text">
ICQ: <INPUT name="ICQ" type="text">
Подсказка
</fieldset>
ЗаголовокИмя:
Фамилия:
ICQ:
Подсказка
C помощью FIELDSET элементы формы выделяются рамочкой. Это элемент-контейнер,
следовательно, в него можно поместить и другие элементы.
Атрибуты:
 align -см.выше;
Стандартные атрибуты элемента LEGEND: accesskey, id, class, lang, dir, title, style, title и
атрибуты событий.
Наверх
Атрибуты событий
Для страницы могут быть определены программы, выполняемые только при
определенных действиях пользователя. Для этого момент запуска программы
привязывается к определенным событиям.
События, связанные с мышью:
 onclick -щелчок мышью на элементе;






ondblclick -двойной щелчок мышью на элементе;
onmousedown -кнопка мыши нажата;
onmouseup -кнопка мыши отпущена;
onmousemove -указатель мыши перемещен в область элемента;
onmouseover -указатель мыши расположен на элементе;
onmouseout -указатель мыши перемещен за границы области элемента.
События, связанные с выбором элементов и редактированием форм:




onfocus -элемент выбран (фокусирован);
onselect -часть текста внутри элемента выделена;
onchange -данные в элементе были изменены;
onblur -элемент перестал быть выбран (потерял фокус).
События, связанные с клавиатурой:
 onkeydown -клавиша нажата;
 onkeyup -клавиша отпущена;
 onkeypress -клавиша нажата и отпущена.
Наверх
Свойства таблиц стилей
Это свойства, которые можно использовать в таблицах стилей. Этот перечень называется
CSS2 -каскадные таблицы стилей второго уровня.
Все свойства могут иметь стандартное занчение inherit - наследование свойств
родительского элемента.
Наверх
Единицы измерения
Если используются числовые значения, то они могут принимать следующие значения:
Единицы длины:






cm -сантиметр;
in -дюйм (2,54 см);
mm -миллиметр;
pc -пика (1/6 дюйма);
pt -пункт (1/72 дюйма);
px -пиксел;
Единицы времени:
 ms -миллисекунда;
 s -секунда;
Величины, указанные в процентах, обозначаются знаком %.
Наверх
Шрифты
font-family
Значения: названия шрифтов, которые могут быть использованы на Web-странице.
Пример:
BODY {font-family: Times New Roman, Verdana, Tahoma}
font-style
Стиль шрифта
Значения:
 normal -обычный;
 italic, oblique -курсив.
font-variant
Это еще один стиль шрифта
Значения:
 normal -обычный;
 small-caps -малые прописные.
Пример:
P {font-variant:small-caps}
font-weight
Это толщина символов.
Значения:
 normal -обычный (400);
 bold -жирные (600-700);
 bolder -жирнее;
 lighter -менее жирнее;
 100, 200, 300, 400, 500, 600, 700, 800, 900 -допустимые числовые значения.
font-size
Это размер шрифта.
Значения:




xx-small, x-small, small, medium, large, x-large, xx-large -абсолютные значения;
Npt -значение в пунктах;
N% -процентное значение;
larger, smaller -относительные значения.
Пример:
P {font-size:10pt}
font
Это выбор определенного шрифта, применяемого к конкретным элементам.
Значения могут принимать свойства: font-family, font-style, font-variant, font-weight, fontsize, line-height.
Значения:






caption -полужирный шрифт для элементов управления;
icon -шрифт для пиктограмм;
menu -шрифт для меню;
messagebox -шрифт для окон диалога;
smallcups -шрифт для небольших элементов управления;
statusbar -шрифт для строки состояния.
Пример:
P.iconka {font:icon}
Наверх
Форматирование текста
text-indent
Это величина отступа первой строки абзаца.
Значения: числовые.
text-align
Выравнивание текста.
Значения:




left -по левому краю;
right -по правому краю;
center -по центру;
justify -по ширине.
text-decoration
Это оформление текста.
Значения:





none -без оформления;
underline -подчеркивание;
overline -черта сверху;
line-though -перечеркивание;
blink -мигание (не для всех броузеров).
text-shadow
Не поддерживается большинством знаменитых броузеров. Вы можете создавать тени к
тексту.
Значения - список величин, определяющих характеристики тени.
Пример:
P {text-shadow: 3pt 3pt 4pt white} - создание тени белого цвета справа и снизу с 4-м
радиусом размытия
letter-spacing
Задает межбуквенный интервал.
Значения:
 normal -определяется броузером;
 числовые;
 auto - интервал меняется так, что текст строки умещается в одну строку. Не
поддерживается рядом броузеров.
Пример:
P {letter-spacing: 15pt}
line-height
Высота строк.
Значения:




normal -определяется броузером (1..0 - 1.2);
числовые.
число -размер шрифта (значение свойства font-size) умножается на эту величину;
процентное -по отношению к значению font-size.
word-spacing
Выбор расстояния между словами.
Значения:
 normal -определяется броузером;
 числовые.
text-transform
Изменение вида букв.
Значения:




none -без изменения;
capitalize -первая буква каждого слова прописная;
uppercase -все буквы прописные;
lowercase -все буквы строчные.
white-space
Определяет вид пробелов.
Значения:
 normal -автоматическое форматирование текста;
 pre -текст остается без изменений (сходно с PRE);
 nowrap -запрет на автоматический разрыв строк.
Пример:
<P style="white-space: normal">
direction
Направление текста (сходно с dir).
Значения:
 ltr -слева направо;
 rtl -справа налево.
Наверх
Свойства списков
list-style-type
Определение видов маркеров в списке.
Значения:









none -без маркеров;
disc -круги;
circle -окружности;
square -квадраты;
demical -арабские цифры;
lower-roman -римские цифры на основе строчных латинских букв (i, v, x...);
upper-roman -римские цифры на основе прописных латинских букв (I, V, X...);
lower-alpha -строчные латинские буквы (a, b, c...);
upper-alpha -прописные латинские буквы (A, B, C...).
Пример:
li {list-style-type: square}
list-style-image
Определение рисунка, который будет использован в качестве маркеров.
Значения:
 none;
 адрес графического файла.
list-style-position
Положение маркера относительно списка.
Значения:
 inside -маркер внутри списка;
 outside -маркер вне списка.
list-style
Определяет вид маркеров. В качестве значения может использоваться несколько величин
свойств: list-style-type, list-style-image, list-style-position.
Пример:
UL {list-style: circle outside}
Наверх
Свойства таблиц
display
.
Значения:









table -таблица (аналог элемента TABLE);
table-caption -заголовок таблицы (аналог элемента CAPTION);
table-column -колонка таблицы (аналог элемента COL);
table-colunm-group -группа колонок (аналог элемента COLGROUP);
table-row -строка таблицы (аналог элемента TR);
table-row-group -группа строк (аналог элемента TBODY);
table-header-group -группа строк в начале таблицы (аналог элемента THEAD);
table-footer-group -группа строк в конце таблицы (аналог элемента TFOOT);
table-cell -ячейка таблицы (аналог элемента TD).
row-span
Количество строк, которое займет ячейка.
column-span
Количество столбцов, которые займет ячейка.
border-collapse
Способ прорисовки рамки.
Значения:
 separate -трехмерная рамка;
 collapse -плоская рамка.
border
Свойства рамки (толщина, цвет, тип).
Значения:









none или hidden -нет рамки;
dotted -точечная рамка;
dashed -пунктирная рамка;
solid -сплошная рамка;
double -двойная рамка;
groove -двугранная рамка;
ridge -такая же, как groove, но темная и светлая грани расположены иначе;
inset -грань наклонена внутрь;
outset -такая же, как inset, но свет грани другой.
vertical-align
Способ вертикального выравнивания.
Значения:





процентное;
top -по верхнему краю;
middle -по центру;
bottom -по нижнему краю;
baseline -по первой строке текста в ячейке.
table-layout
Способ формирования таблицы.
Значения:
 auto -по умолчанию;
 fixed -ускоренный.
Наверх
Свойства границ элементов
width
Ширина.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
min-width и max-width
Минимально и максимально допустимая ширина объекта.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
height
Высота.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
min-height и max-height
Минимально и максимально допустимая высота объекта.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
position
Алгоритм вычисления координат границ объекта.
Значения:




normal -по умолчанию;
relative -вычисляется положение объекта, a потом смещение объекта;
absolute -координаты вычисляются относительно границ контейнера;
fixed -то же, что и absolute, но с запрещенной прокруткой.
top, bottom, right, left
Координаты верхней, нижней, правой, левой границ элемента.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
margin-top, margin-right, margin-bottom, margin-left
Размер пустого пространства рядом с определенной стороной элемента.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
margin
Отступы вокруг элемента.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
Пример:
P {margin: 10pt 10pt 10pt 10pt}
padding-top, padding-right, padding-bottom, padding-left
Отступы между определенной границей элемента и его содержимым.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
padding
Отступы между границами элемента и его содержимым.
Значения:
 auto -по умолчанию;
 числовые;
 процентные.
Пример:
P {padding: 10pt 10pt 10pt 10pt}
border-top-width, border-right-width, border-bottom-width, border-left-width
Ширина рамки.
Значения:




thin -тонкая;
medium -средняя;
thick -широкая;
числовое.
border-width
Толщина рамки.
Значения:




thin -тонкая;
medium -средняя;
thick -широкая;
числовое.
border-top-color, border-right-color, border-bottom-color, border-left-color
Цвет элементов рамки.
border-color
Цвет рамки.
border-top-style, border-right-style, border-bottom-style, border-left-style
Вид элементов рамки.
Значения:









none или hidden -нет рамки;
dotted -точечная рамка;
dashed -пунктирная рамка;
solid -сплошная рамка;
double -двойная рамка;
groove -двугранная рамка;
ridge -такая же, как groove, но темная и светлая грани расположены иначе;
inset -грань наклонена внутрь;
outset -такая же, как inset, но свет грани другой.
border-style
Вид рамки.
Значения:









none или hidden -нет рамки;
dotted -точечная рамка;
dashed -пунктирная рамка;
solid -сплошная рамка;
double -двойная рамка;
groove -двугранная рамка;
ridge -такая же, как groove, но темная и светлая грани расположены иначе;
inset -грань наклонена внутрь;
outset -такая же, как inset, но свет грани другой.
border-top
Одновременное задание свойств border-top-width, border-top-color, border-top-style.
Пример:
P {border-top: thick dotted white}
border-bottom
Одновременное задание свойств border-bottom-width, border-bottom-color, border-bottomstyle.
Пример:
P {border-bottom: thick dotted white}
border-left
Одновременное задание свойств border-left-width, border-left-color, border-left-style.
Пример:
P {border-left: thick dotted white}
border-right
Одновременное задание свойств border-right-width, border-right-color, border-right-style.
Пример:
P {border-right: thick dotted white}
border
Одновременное задание свойств border-width, border-color, border-style.
Пример:
P {border: thick dotted white}
overflow
Способ изменения размеров объекта, если оно не может быть показано целиком.
Значения:




auto -определяется броузером (по умолчанию);
visible -содержимое видно;
hidden -размеры не изменяются;
scroll -с прокруткой.
float
Способ обтекания элемента другими элементами.
Значения:
 none -нет обтекания;
 left -слева;
 right -справа.
Пример:
IMG {float: right}
clear
Способ расположения элемента, следующего за элементом, выровненном по левому
(правому) краю.
Значения:




none -по умолчанию;
left -слева;
right -справа;
both -слева и справа.
clip
Определение видимой части объекта.
Значения:
 auto -определяется броузером (по умолчанию);
 прямоугольник, «вырезающий» часть объекта.
Пример:
P {clip: rect(10px 15px 15px 10px);}
visibility
Видимость объекта.
Значения:
 visible -видимый;
 hidden -невидимый.
z-index
Способ перекрытия объектов. Объект с большим значение находится выше.
Значения:
 auto -«нулевой уровень» по умолчанию;
 отрицательное числовое -«ниже» «нулевого уровня»;
 положительное числовое -«выше» «нулевого уровня».
Наверх
Свойства фона и цвета
color
Цвет элемента или содержимого.
Пример:
P {color:rgb(255, 120, 120)}
U {color: white}
background-color
Цвет фона.
Значения:
 transparent -прозрачный цвет;
 значение цвета в стандартном формате.
Пример:
P {background-color: transparent}
background-image
Фоновый рисунок.
Значения:
 none -нет рисунка;
 ссылка на файл.
Пример:
TABLE {background-image: url(http://www.name.domen/picture.gif)}
background-repeat
Свойство определяющее необходимость повторения фонового рисунка для заполнения
пространства элемента.
Значения:




repeat -заполнять все пространство элемента;
repeat-x -заполнять первый горизонтальный ряд;
repeat-y -заполнять первый вертикальный ряд;
no-repeat -без заполнения.
Пример:
BODY {background-image: url(http://www.name.domen/picture.gif); background-repeat:
repeat}
background-attachment
Прокрутка фона.
Значения:
 scroll -прокрутка разрешена;
 fixed -прокрутка запрещена.
background-position
Начальное положение фонового рисунка.
Значения:










0% 0% -по умолчанию;
top left или left top -значение 50% 0%;
top, top center или center top -значение 100% 0%;
right top или top right -значение 0% 50%;
left left center или center left -значение 0% 100%;
center или center center -значение 50% 50%;
right, right center или center right -значение 100% 50%;
bottom left, или left bottom -значение 0% 100%;
bottom, bottom center или center bottom -значение 50% 100%;
bottom right или right bottom -значение 100% 100%.
Если указана одна величина, то она является отступом по горизонтали, а по вертикали
значение 50%.
Пример:
BODY {background-image: url(http://www.name.domen/picture.gif); backgroundposition: top left}
background
Фон элемента. Одновременное задание свойств: background-color, background-image,
background-repeat, background-attachment, background-position.
Пример:
TR {background: url(http://www.name.domen/picture.gif)}
P {background: url(http://www.name.domen/picture.gif) white 0% repeat fixed}
Наверх
Свойства мультимедиа
volume
Громкость.
Значения:








числовое с пределах 0-100;
процентное с пределах 0-100% -;
silent -без звука;
x-soft -уровень звука 0 (самый тихий);
soft -уровень звука 25;
medium -уровень звука 50 (по умолчанию);
loud -уровень звука 75;
x-loud -уровень звука 100 (самый громкий).
speak
Синтезатор речи для озвучивания текстов, записанных в документе.
Значения:
 none -не использовать;
 normal - использовать правила произношения указанного языка;
 spell-out -озвучивать побуквенно.
speech-rate
Темп речи при работе синтезатора речи.
Значения (количество слов в минуту):







slower;
x-slow;
slow;
medium -по умолчанию;
fast;
x-fast;
faster.
pause-before, pause-after
Величина паузы перед или после воспроизведения содержимого.
Значения:
 числовое -в секундах или миллисекундах;
 процентное -по отношению к speech-rate.
pause
Одновременное задание свойств: pause-before и pause-after.
Пример:
P.pause {pause: 20ms 40ms}
cue-before, cue-after
Задание звуковых файлов, воспроизводимых до и после использования элемента.
Значения:
 none -не использовать;
 адрес URL.
Пример:
A.sound {cue-before:url(sound1.wav) cue-after:url(sound2.wav)}
cue
Одновременное задание свойств: cue-before и cue-after.
Пример:
A.sound {cue:url(sound1.wav) url(sound2.wav)} -разные звуки
A.sound {cue:url(sound.wav)} -оба звука одинаковы.
play-during
Задание файла, который определит «фоновый звук» во время воспроизведения
озвученного элемента.
Значения:





none - фоновый звук не воспроизводится;
auto -звуковой фон, определенный прежде(по умолчанию);
адрес URL;
mix -звук является фоновым;
repeat -повторение звукового фрагмента, если он оказался короче основного.
Пример:
ADRESS {play-during: url(sound.wav) auto}
azimuth
Задание стереоэффекта, при котором направление определяется в горизонтальной
плоскости.
Задаются в градусах (deg) от -360deg до +360deg или с помощью значений:
 left-slide -аналог величины 270deg;
 far-left -аналог величины 240deg;
 left -аналог величины 320deg;
 center-left -аналог величины 340deg;
 center - аналог величины 0deg(по умолчанию);
 center-right -аналог величины 20deg;
 right -аналог величины 140deg;
 far-right -аналог величины 60deg;
 right-slide -аналог величины 90deg;
 leftwards -дополнительный сдвиг источника на 20 градусов влево;
 rightwards -дополнительный сдвиг источника на 20 градусов вправо;
 behind -дополнительный параметр, смещающий источник звука назад (минус 180
градусов).
Пример:
H1 {azimuth: 15deg}
P {azimuth: center-right}
H3 {azimuth: center-right behind}
elevation
Задание стереоэффекта, при котором направление определяется в вертикальной
плоскости.
Задаются в градусах (deg) от -360deg до +360deg или с помощью значений:





below -аналог величины -90deg;
level -аналог величины 0deg;
above -аналог величины 90deg;
higher -плюс 10 градусов к текущему углу;
lower -минус 10 градусов от текущего угла.
Пример:
P {elevation: above}
Наверх
Свойства интерфейса
cursor
.
Значения:
 auto -вид определяется броузером (по умолчанию);
 default -вид определяется операционной системой;
 crosshair -крестик;
 pointer -перст;
 move -четырехглавая стрелка;
 e-, ne-, nw-, n-, se-, sw-, s-, w-resize -стрелки перемещения границ (соответствует частям
света);
 text -текстовый указатель;
 wait -песочные часы;
 help -указатель-знак вопроса;
 ссылка URL на указатель.
Пример:
P {cursor: pointer url(cursor.cur)}
color, background-color
Есть возможность задания цвета элемента и его фона таким, каким обладает
соответствующий элемент окна или элемент управления.
Значения:
















activeborder -рамка активного окна;
activecaption -заголовок активного окна;
appworkspace -цвет фона документа;
background -фон рабочего стола;
buttonface -цвет кнопки;
buttonhighlight -светлый участок кнопки (боковая грань);
buttontext -текст кнопки;
captiontext -цвет текста в строке заголовка;
graytext -недоступный текст (команда);
highlight -выбранный элемент управления;
highlighttext -выделенный текст;
inactiveborder -рамка невыбранного окна;
inactivecaption -заголовок невыбранного окна;
inactivecaptiontext -текст в заголовке невыбранного окна;
infobackground -фон элемента управления;
infotext -текст элемента управления;











menu -фон меню;
menutext -текст меню;
scrollbar -полоса прокрутки;
threeddarkshadow -темная тень трехмерного элемента;
threedface -поверхность трехмерного элемента;
threedhighlight -выбранный трехмерный элемент;
threedlightshadow -светлая тень трехмерного элемента;
threedshadow -тень трехмерного объекта;
window -фон окна;
windowframe -рамка окна;
windowtext -текст окна.
Пример:
P {color: windowext; background-color: window}
Наверх
Свойства полосы прокрутки
Следующие свойства задаются все вместе в секции BODY. C их помощью Вы можете
полностью изменить расцветку полосы прокрутки.
scrollbar-face-color
Задает цвет рельефных объетов полосы прокрутки.
Пример:
BODY {scrollbar-face-color: white}
scrollbar-shadow-color
Задает цвет тени рельефных объектов прокрутки.
Пример:
BODY {scrollbar-shadow-color: white}
scrollbar-3dlight-color
Задает цвет границы полосы прокрутки слева и сверху.
Пример:
BODY {scrollbar-3dlight-color: white}
scrollbar-arrow-color
Задает цвет стрелок прокрутки.
Пример:
BODY {scrollbar-arrow-color: white}
scrollbar-track-color
Задает цвет самой полосы прокрутки.
Пример:
BODY {scrollbar-track-color: white}
scrollbar-darkshadow-color
Задает цвет границы полосы прокрутки справа снизу.
Пример:
BODY {scrollbar-darkshadow-color: white}