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

         

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 &#96  
97 &#97  
98 &#98  
99 &#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