Самоучитель 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
    96 `
    97 a
    98 b
    99 c
    100 d
    101 e
    102 f
    103 g
    104 h
    105 i
    106 j
    107 k
    108 l
    109 m
    110 n
    111 o
    112 p
    113 q
    114 r
    115 s
    116 t
    117 u
    118 v
    119 w
    120 x
    121 y
    122 z
    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

    Start
    Start
    Start
    Start

    Start


    Start


    Start


    Start


    Start


    Start


    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


    

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