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

Терминология
 Элемент(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 указывает на то, что это ссылка на каскадные таблицы стилей.
<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.
<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.
<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 позволяет создать нередактируемый элемент.
Стандартные атрибуты: 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 и атрибуты событий.
Атрибуты событий
Для страницы могут быть определены программы, выполняемые только при
определенных действиях пользователя. Для этого момент запуска программы
привязывается к определенным событиям.
События, связанные с мышью:







onclick -щелчок мышью на элементе;
ondblclick -двойной щелчок мышью на элементе;
onmousedown -кнопка мыши нажата;
onmouseup -кнопка мыши отпущена;
onmousemove -указатель мыши перемещен в область элемента;
onmouseover -указатель мыши расположен на элементе;
onmouseout -указатель мыши перемещен за границы области элемента.
События, связанные с выбором элементов и редактированием форм:




onfocus -элемент выбран (фокусирован);
onselect -часть текста внутри элемента выделена;
onchange -данные в элементе были изменены;
onblur -элемент перестал быть выбран (потерял фокус).
События, связанные с клавиатурой:
 onkeydown -клавиша нажата;
 onkeyup -клавиша отпущена;
 onkeypress -клавиша нажата и отпущена.