Самоучитель HTML

Color

Управление цветом
Стандартные цвета

Аквамарин
Белый
Желтый
Зеленый
Золотистый
Индиго
Каштановый
Красный
Оливковый
Пурпурный
Светло-зеленый
Серебристый
Серый
Сизый
Синий
Ультрамарин
Фиолетовый
Фуксиновый
Черный

Градации красного

Код	Цвет	Код	Цвет
#010000		#800000
#100000		#900000
#200000		#A00000
#300000		#B00000
#400000		#C00000
#500000		#D00000
#600000		#E00000
#700000		#FF0000

Градации зеленого

Код	Цвет	Код	Цвет
#000100		#008000
#001000		#009000
#002000		#00A000
#003000		#00B000
#004000		#00C000
#005000		#00D000
#006000		#00E000
#007000		#00FF00

Градации синего

Код	Цвет	Код	Цвет
#000001		#000080
#000010		#000090
#000020		#0000A0
#000030		#0000B0
#000040		#0000C0
#000050		#0000D0
#000060		#0000E0
#000070		#0000FF

Горизонтальная линия в качестве цветного прямоугольника:
А так может выглядеть компьютерная радуга:

Варианты оранжевого цвета:
Необходимо, чтобы монитор воспроизводил режим HighColor (16 разрядов) или TrueColor (24 разряда)

Код	Цвет
#FFB000	1
#FFA800	2
#FFA000	3
#FF9800	4
#FF9000	5
#FF8800	6
#FF8000	7
#FF7800	8
#FF7000	9
#FF6800	10
#FF6000	11
#FF5800	12

Еще один пример таблицы

Таблица с объединенными ячейками и фоновым рисунком
Заголовок 1Заголовок 1.1Заголовок 1.2Заголовок 2Заголовок 3

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Форматирование ячеек-заголовков

Заголовок таблицы

Заголовок 1	Заголовок 2
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Левую часть страницы делают, как

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

управляет прокруткой внутри одной области.

Правая часть страницы

Атрибут scrolling управляет прокруткой внутри одной области. Он может принимать значения YES (полосы прокрутки создаются в обязательном порядке), NO (прокрутка запрещена) и AUTO (полосы прокрутки появляются, когда необходимо). Если этот атрибут отсутствует, броузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях. Запретив прокрутку, можно создать так называемый баннер.

Frame

Фреймы
Этот броузер не может воспроизводить фреймы

Группа полей

Заголовок группы
Имя:
Фамилия:

Телефон:

Текст подсказки

Использование элементов THEAD, TBODY и TFOOT

Заголовок 1	Заголовок 2
Нижний блок таблицы
Строка 1	Ячейка 1.2
Строка 2	Ячейка 2.2
Строка 3	Ячейка 3.2
Строка 4	Ячейка 4.2
Строка 5	Ячейка 5.2

Использование классов

Текст абзаца без форматирования
Текст абзаца (class="spec1") - эффект "малые прописные".
Текст абзаца (class="new1") - курсив и цвет букв.
Текст абзаца (class="new2") - добавлена разрядка.

Эксперименты с линией

Заданы высота, длина и серый цвет

Линия внутри таблицы

Горизонтальная линия в качестве цветного прямоугольника

(щелкни его, чтобы перейти в начало страницы)

На этой странице представлены две

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

Щелчок по зеленому кругу обеспечит переход к Web-странице издательства "Питер". Желтый многоугольник вернет вас на страницу Start.htm. Красный прямоугольник (см. ниже) обеспечивает переход в начало этой страницы.

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

(использован атрибут value =3)

Пункт 1

Пункт 2

Пункт 3

Пункт 4

Объединение ячеек

Заголовок 1	Заголовок 2
Ячейка 1	Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5

ОРАНЖЕВЫЙ ЛИСТ

Прозрачные осени дали

Пронизаны солнцем насквозь.

Но нет, недостойно печали

Все то, что еще не сбылось.

Ветер шумит над кленом

И кувыркается вниз

На травы еще зеленые

Яркий оранжевый лист. Я подниму его бережно,

Возьму из леса с собой.

Влажный, душистый и свежий -

Будет теперь со мной. В белую стужу зимнюю,

С думами о своем

Свяжутся нитью незримою

Я, этот лист и клен.

Основная страница

Основная страница (Main.htm) не имеет фреймов, а две другие построены по стандартному принципу: слева меню, справа информация. Конфигурацию фреймов в этом примере задает файл Frame1.htm. Такую структуру имеют многие сайты. Кроме того, «цепочки» страниц удобно использовать для создания виртуальных книг, галерей изображений, то есть там, где пользователю требуется последовательно просматривать ряд страниц.
Используйте ссылки для перехода по страницам.

Phrase

Элементы содержания
Использование элемента ABBR: WWW
На этом месте должна находиться цитата (элемент BLOCKQUOTE)
Использование элемента INS
Использование элемента DEL
Использование элемента Q
Использование элемента EM
Использование элемента STRONG
Использование элемента CODE
Использование элемента SAMP
Использование элемента KBD
Использование элемента VAR
Использование элемента CITE
Так выглядит формат адреса (элемент ADDRESS)
Использование элемента ACRONYM

Пример формы

Имя:
Фамилия:
Телефон:
Пол: М Ж

Примеры карт

Изображения карт иллюстрируют способы задания координат областей для переходов

Spec

Спецсимволы
Некоторые спецсимволы

Код символаСимволКомментарий

34	"	Прямая кавычка
38	&	Амперсанд
60	<	Знак "меньше"
62	>	Знак "больше"
153	™	Знак TM
160		Неразрывный пробел
162	¢	Цент
163	£	Фунт
164	¤	Знак валюты
165	¥	Йена
166	¦	Вертикальная черта
167	§	Знак параграфа
169	©	Знак копирайта
171	"	Левая типографская кавычка
172	¬	Знак отрицания
174	®	Знак (R)
176	°	Знак градуса
177	±	Знак "плюс минус"
178	²	Степень 2
179	³	Степень 3
181	µ	Знак "микро"
182	¶	Знак абзаца
183	·	Точка-маркер
185	¹	Степень 1
187	"	Правая типографская кавычка
188	¼	Одна четвертая
189	½	Одна вторая
215	×	Крестик
247	÷	Знак деления

Прорисовка символов по их кодам

Коды 32-63
Код символа СимволКомментарий

32		Пробел
33	!
34	"
35	#
36	$
37	%
38	&
39	'
40	(
41	)
42	*
43	+
44	,
45	-
46	.
47	/
48	0
49	1
50	2
51	3
52	4
53	5
54	6
55	7
56	8
57	9
58	:
59	;
60	<
61	=
62	>
63	?

Коды 64-95
Код символаСимволКомментарий

64 @ 65 A 66 B 67 C 68 D 69 E 70 F 71 G 72 H 73 I 74 J 75 K 76 L 77 M 78 N 79 O 80 P 81 Q 82 R 83 S 84 T

85	U
86	V
87	W
88	X
89	Y
90	Z
91	[
92	\
93	]
94	^
95	_

Код символаСимволКомментарийКод символаСимволКомментарий

Коды 96-127

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

{

124

125

}

126

127

Коды 128-159

128

€

129

130

‚

131

132

„

133

…

134

†

135

‡

136

137

‰

138

139

‹

140

141

142

143

144

145

‘

146

’

147

“

148

”

149

•

150

–

151

—

152

153

™

154

155

›

156

157

158

159

Код символаСимволКомментарий
Код символаСимволКомментарий

Коды 160-191

160

Неразр. пробел

161

162

Цент

163

Фунт

164

Знак валюты

165

Йена

166

Верт. черта

167

Знак параграфа

168

169

Знак копирайта

170

171

Левая кавычка

172

173

174

Знак (R)

175

176

Знак градуса

177

"плюс минус"

178

179

180

181

Знак "микро"

182

Знак абзаца

183

Точка посередине

184

185

Номер

186

187

Правая кавычка

188

Знак 1/4

189

Знак 1/2

190

Знак 3/4

191

Коды 192-223

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

Коды 224-255

Код символаСимволКомментарий 224 à 225 á 226 â 227 ã 228 ä 229 å 230 æ 231 ç 232 è 233 é 234 ê 235 ë 236 ì 237 í 238 î 239 ï 240 ð 241 ñ 242 ò 243 ó 244 ô 245 õ 246 ö 247 ÷ 248 ø 249 ù 250 ú 251 û 252 ü 253 ý 254 þ 255 ÿ Тест: Кириллица, набранная в HoTMetal Pro

(см. источник)

Àà Áá Ââ Ãã Ää Åå ??

Ææ Çç Èè Éé Êê Ëë

Ìì Íí Îî Ïï Ðð Ññ

Òò Óó Ôô Õõ Öö ??

Øø Ùù Úú Ûû Üü

Ýý Þþ ßÿ

Список с определениями

Пункт 1 Определение пункта 1 Другое определение пункта 1 Пункт 2 Определение пункта 2 Пункт 3 Определение пункта 3

Стандартная таблица

Заголовок таблицы
Заголовок 1 Заголовок 2

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Start

Эти страницы лучше всего просматривать в MS Internet Explorer 5

Вариант 2

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5

Вложенная таблица

Для Netscape Communicator вложенная таблица должна иметь конечные теги TD!!!

Таблица 1

Таблица 2	Ячейка 2-2
Ячейка 3-2	Ячейка 4-2

Ячейка 3-1 Ячейка 4-1

Вложенные списки

Пункт 1

Пункт 1.1

Пункт 1.2

Пункт 2

Пункт 2.1

Пункт 2.2

Пункт 3

Пункт 3.1

Пункт 3.2

На этой странице меняются свойства

Ссылка

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

Задание абсолютных размеров шрифтов

Шрифт размера 7
Шрифт размера 6
Шрифт размера 5
Шрифт размера 4
Шрифт размера 3
Шрифт размера 2
Шрифт размера 1

Задание относительных размеров шрифтов

Шрифт размера +4
Шрифт размера +3
Шрифт размера +2
Шрифт размера +1
Шрифт размера +0
Шрифт размера -1
Шрифт размера -2
Задан зеленый цвет шрифта
Шрифт типа Courier

только рисунки. Когда указатель мыши

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

Заголовок 3 (по умолчанию)

Текст, не отформатированный никаким стилем (т.е. формат по умолчанию).

Для этого абзаца использован собственный (inline) стиль.
Это стиль, назначенный в элементе STYLE, для абзацев P всей страницы. В частности, выбран отступ первой строки.
Свойства элемента CODE можно переопределить, например, задать фон
Тоже элемент CODE, но с атрибутом background="white"
А этот стиль действует, если элемент CODE вложен в элемент P

Существует шесть уровней заголовков, которые

Заголовок 5

Заголовок 6

Существует шесть уровней заголовков, которые обозначаются H1...H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Шаблон дает представление об относительных размерах букв в заголовках. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо.

Здесь расположена ссылка 1

Здесь должен располагаться оригинальный текст Web-страницы

Переход в документа.

Заголовок формата "steel"

Абзац, отформатированный универсальным стилем "steel"
Таблица стилей для этой страницы находится в файле FORMATS.CSS

Здесь больше ячеек-заголовков

Заголовок таблицы
Заголовок 1 Заголовок 2Заголовок 3 Заголовок 4

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Бизнес в интернете: Сайты - Софт - Языки - Дизайн