Color

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

Стандартные цвета

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

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

Код	Цвет	Код	Цвет
#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	&#35
36	&#36
37	&#37
38	&#38
39	&#39
40	&#40
41	&#41
42	&#42
43	&#43
44	&#44
45	&#45
46	&#46
47	&#47
48	&#48
49	&#49
50	&#50
51	&#51
52	&#52
53	&#53
54	&#54
55	&#55
56	&#56
57	&#57
58	&#58
59	&#59
60	&#60
61	&#61
62	&#62
63	&#63

Коды 64-95

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

64 &#64 65 &#65 66 &#66 67 &#67 68 &#68 69 &#69 70 &#70 71 &#71 72 &#72 73 &#73 74 &#74 75 &#75 76 &#76 77 &#77 78 &#78 79 &#79 80 &#80 81 &#81 82 &#82 83 &#83 84 &#84

85	&#85
86	&#86
87	&#87
88	&#88
89	&#89
90	&#90
91	&#91
92	&#92
93	&#93
94	&#94
95	&#95

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

Коды 96-127

&#96

&#97

&#98

&#99

100

&#100

101

&#101

102

&#102

103

&#103

104

&#104

105

&#105

106

&#106

107

&#107

108

&#108

109

&#109

110

&#110

111

&#111

112

&#112

113

&#113

114

&#114

115

&#115

116

&#116

117

&#117

118

&#118

119

&#119

120

&#120

121

&#121

122

&#122

123

&#123

124

&#124

125

&#125

126

&#126

127

&#127

Коды 128-159

128

&#128

129

&#129

130

&#130

131

&#131

132

&#132

133

&#133

134

&#134

135

&#135

136

&#136

137

&#137

138

&#138

139

&#139

140

&#140

141

&#141

142

&#142

143

&#143

144

&#144

145

&#145

146

&#146

147

&#147

148

&#148

149

&#149

150

&#150

151

&#151

152

&#152

153

&#153

154

&#154

155

&#155

156

&#156

157

&#157

158

&#158

159

&#159

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

Коды 160-191

160

&#160

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

161

&#161

162

&#162

Цент

163

&#163

Фунт

164

&#164

Знак валюты

165

&#165

Йена

166

&#166

Верт. черта

167

&#167

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

168

&#168

169

&#169

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

170

&#170

171

&#171

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

172

&#172

173

&#173

174

&#174

Знак (R)

175

&#175

176

&#176

Знак градуса

177

&#177

"плюс минус"

178

&#178

179

&#179

180

&#180

181

&#181

Знак "микро"

182

&#182

Знак абзаца

183

&#183

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

184

&#184

185

&#185

Номер

186

&#186

187

&#187

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

188

&#188

Знак 1/4

189

&#189

Знак 1/2

190

&#190

Знак 3/4

191

&#191

Коды 192-223

192

&#192

193

&#193

194

&#194

195

&#195

196

&#196

197

&#197

198

&#198

199

&#199

200

&#200

201

&#201

202

&#202

203

&#203

204

&#204

205

&#205

206

&#206

207

&#207

208

&#208

209

&#209

210

&#210

211

&#211

212

&#212

213

&#213

214

&#214

215

&#215

216

&#216

217

&#217

218

&#218

219

&#219

220

&#220

221

&#221

222

&#222

223

&#223

Коды 224-255

Код символаСимволКомментарий 224 &#224 225 &#225 226 &#226 227 &#227 228 &#228 229 &#229 230 &#230 231 &#231 232 &#232 233 &#233 234 &#234 235 &#235 236 &#236 237 &#237 238 &#238 239 &#239 240 &#240 241 &#241 242 &#242 243 &#243 244 &#244 245 &#245 246 &#246 247 &#247 248 &#248 249 &#249 250 &#250 251 &#251 252 &#252 253 &#253 254 &#254 255 &#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

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

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

&#160 Заголовок 1 Заголовок 2Заголовок 3 Заголовок 4

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