HTML: Популярный самоучитель
Добавить в закладки К обложке
- Введение - Страница 1
- Глава 1Введение в HTML - Страница 2
- 1.1. Краткая история HTML - Страница 3
- 1.2. Базовые понятия HTML - Страница 4
- Элементы - Страница 5
- Атрибуты - Страница 6
- Вложенные элементы - Страница 7
- Блочные и встроенные элементы - Страница 8
- 1.3. Просмотр HTML-документа - Страница 9
- 1.4. Универсальный идентификатор ресурса URI - Страница 10
- Глава 2Структура HTML-документа - Страница 11
- 2.1. Информация о версии HTML - Страница 12
- 2.2. Элемент HTML - Страница 13
- 2.3. Заголовок - Страница 14
- Элемент HEAD - Страница 15
- Элемент TITLE - Страница 16
- Элемент BASE - Страница 17
- Метаданные - Страница 18
- 2.4. Тело HTML-документа - Страница 19
- Глава 3Текст - Страница 20
- 3.1. Особенности ввода текста - Страница 21
- 3.2. Форматирование текста - Страница 22
- Задание начертания текста - Страница 23
- Задание шрифта текста - Страница 24
- Задание выравнивания текста - Страница 25
- Сохранение авторского форматирования - Страница 26
- Запрет разрыва строки - Страница 27
- Переносы - Страница 28
- Обтекание текстом нетекстовых элементов - Страница 29
- 3.3. Структурирование текста - Страница 30
- Разбиение на абзацы - Страница 31
- Заголовки - Страница 32
- Задание типов фраз - Страница 33
- Цитаты - Страница 34
- Указание изменений в документе - Страница 35
- Контактная информация - Страница 36
- 3.4. Комментарии в HTML-коде - Страница 37
- Глава 4Списки - Страница 38
- 4.1. Маркированные списки - Страница 39
- 4.2. Нумерованные списки - Страница 40
- 4.3. Списки определений - Страница 41
- 4.4. Создание вложенных списков - Страница 42
- Глава 5Гиперссылки - Страница 43
- 5.1. Простой переход к ресурсам - Страница 44
- Навигация между HTML-документами - Страница 45
- Загрузка файлов - Страница 46
- Ссылки на другие службы - Страница 47
- 5.2. Навигация в пределах документа - Страница 48
- 5.3. Прочие атрибуты гиперссылок - Страница 49
- Глава 6Линейки, изображения, внедренные объекты - Страница 50
- 6.1. Линейки - Страница 51
- 6.2. Изображения - Страница 52
- Изображения-гиперссылки - Страница 53
- Изображения-карты - Страница 54
- 6.3. Добавление фоновой музыки - Страница 56
- 6.4. Простое проигрывание видео - Страница 57
- 6.5. Внедрение объектов - Страница 58
- Глава 7Таблицы - Страница 60
- 7.1. Структура простейшей таблицы - Страница 61
- 7.2. Элементы таблицы - Страница 62
- Заголовок таблицы - Страница 63
- Параметры отображения таблицы - Страница 64
- Параметры отображения строк таблицы - Страница 65
- Параметры отображения ячеек. Слияние ячеек - Страница 66
- Ячейки заголовков - Страница 67
- 7.3. Структурирование таблицы - Страница 68
- Группировка строк - Страница 69
- Описание и группировка столбцов - Страница 70
- Особенности задания ширины столбцов - Страница 73
- 7.4. Использование таблиц для формирования дизайна HTML-документа - Страница 74
- Глава 8Фреймы - Страница 76
- 8.1. Понятие фрейма - Страница 77
- 8.2. Создание набора фреймов - Страница 78
- 8.3. Новые возможности гиперссылок - Страница 79
- Целевой фрейм отдельных гиперссылок - Страница 80
- Целевой фрейм по умолчанию - Страница 82
- 8.4. Элемент NOFRAMES - Страница 83
- 8.5. Плавающие фреймы - Страница 84
- 8.6. Замена фреймов внедренными HTML-документами - Страница 85
- Глава 9Формы - Страница 86
- 9.1. Создание формы - Страница 87
- 9.2. Элементы управления формы - Страница 88
- Стандартные элементы управления - Страница 89
- Многострочное текстовое поле - Страница 91
- Снова кнопки - Страница 92
- Меню - Страница 93
- Подписи элементов управления - Страница 95
- 9.3. Группировка элементов управления - Страница 96
- Глава 10Введение в CSS - Страница 97
- 10.1. Возможности CSS - Страница 98
- 10.2. Внешние и встроенные таблицы стилей - Страница 99
- 10.3. Записи таблицы стилей - Страница 100
- Правила отображения HTML-элементов - Страница 101
- Использование стилевых классов - Страница 102
- Задание отображения единичных элементов документа - Страница 103
- Контекстные селекторы - Страница 104
- Комментарии в таблице стилей - Страница 105
- 10.4. Порядок применения стилей - Страница 106
- 10.5. Единицы измерения CSS - Страница 108
- Линейный размер и положение - Страница 109
- Цвета - Страница 110
- 10.6. Скрытие таблиц стилей - Страница 111
- Глава 11Использование таблиц стилей - Страница 112
- 11.1. Шрифт - Страница 113
- 11.2. Стиль текста - Страница 114
- 11.3. Cписки - Страница 116
- 11.4. Границы - Страница 117
- 11.5. Поля и отступы - Страница 119
- 11.6. Цвет и фон - Страница 120
- 11.7. Свободное позиционирование - Страница 122
- 11.8. Использование элементов DIV и SPAN - Страница 124
- 11.9. Псевдоклассы гиперссылок - Страница 125
- 11.10. Псевдоклассы текста - Страница 126
- 11.11. Создание CSS для различных устройств - Страница 127
- Глава 12Краткий курс JavaScript - Страница 128
- 12.1. Замечание о строках кода JavaScript - Страница 129
- 12.2. Комментарии - Страница 130
- 12.3. Типы данных, переменные, выражения - Страница 131
- 12.4. Простые и составные операторы - Страница 132
- 12.5. Операторы языка JavaScript - Страница 133
- Логические операторы и операторы сравнения - Страница 134
- Двоичные операторы - Страница 135
- Приоритет операторов - Страница 136
- Условные операторы - Страница 137
- Циклы - Страница 138
- Операторы break и continue - Страница 139
- Оператор запятая - Страница 140
- 12.6. Функции - Страница 141
- Пользовательские функции - Страница 142
- Встроенные функции JavaScript - Страница 143
- Глобальные и локальные переменные - Страница 144
- Ссылки на функции - Страница 145
- 12.7. Массивы - Страница 146
- 12.8. Работа с объектами - Страница 147
- Понятие объекта. Свойства и методы - Страница 148
- Встроенные классы JavaScript - Страница 149
- 12.9. Взаимодействие с пользователем - Страница 151
- 12.10. Поиск ошибок в программе - Страница 152
- Глава 13Динамический HTML - Страница 153
- 13.1. Основы использования сценариев в HTML-документе - Страница 154
- Скрытие сценария - Страница 155
- 13.2. Исполнение сценария - Страница 156
- Исполнение при загрузке документа - Страница 157
- Реакция на события - Страница 158
- 13.3. Объектная модель документа - Страница 159
- Объект document - Страница 160
- Объект navigator - Страница 164
- Объект window - Страница 165
- Объект style - Страница 167
- Объект screen - Страница 172
- Объект event - Страница 173
- Глава 14Создаем настоящий веб-сайт - Страница 175
- 14.1. Содержание сайта - Страница 176
- 14.2. Навигация по сайту - Страница 177
- 14.3. Расположение файлов - Страница 178
- 14.4. Реализация сайта - Страница 179
- Реализация меню - Страница 180
- Разворачивающиеся абзацы - Страница 185
- Прочие сценарии - Страница 186
- Используемые таблицы стилей - Страница 187
- 14.5. Примеры работы сайта - Страница 188
- Глава 15Публикация сайта в Интернете - Страница 189
- 15.1. Ищем место для сайта - Страница 190
- 15.2. Доменное имя для сайта - Страница 191
- 15.3. Проблема стартовой страницы - Страница 192
- 15.4. Администрирование сайта - Страница 193
- Использование форм - Страница 194
- Использование Проводника Windows - Страница 195
- 15.5. Увеличение посещаемости сайта - Страница 196
- Заключение - Страница 197
- Приложение 1Именованные ссылки на символы - Страница 198
- Приложение 2Свойства CSS - Страница 199
- Приложение 3Названия основных цветов - Страница 200
Изменение цвета в примере осуществляется по таймеру. Значения RGB‑составляющих цвета случайным образом изменяются на небольшие значения, что обеспечивает эффект этакого плавного перехода цвета. Еще следует отметить, что цвет всех отобранных элементов всегда одинаков. Это сделано для упрощения программы.
В примере 13.14 показано, как используется рассматриваемый сценарий.
Пример 13.14. Страница с разноцветным текстом<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Разноцветный текст</TITLE>
<STYLE type = "text/css">
.colored {}
</STYLE>
</HEAD>
<BODY>
<H1>Обычный заголовок</H1>
<H1 class = "colored">Разноцветный заголовок</H1>
<P class>Обычный текст
<P class = "colored">Разноцветный текст
<SCRIPT type = "text/javascript" src = "coloredtext.js"></SCRIPT>
</BODY>
</HTML>
Теперь создадим усовершенствованный вариант рассмотренного ранее меню. Сейчас это будет не просто набор пунктов, все время находящийся на странице, а настоящее меню, похожее на то, которое имеют многие Windows‑приложения.
Пример реализован следующим образом: вверху окна организуется строка меню, в которой присутствуют два пункта, открывающих два различных меню. Первое меню выглядит так, как показано на рис. 13.5.

Рис. 13.5. Открыто первое меню
Второе меню, вызываемое при выборе второго пункта в строке меню, показано на рис. 13.6.

Рис. 13.6. Открыто второе меню
Как видно, оба меню появляются под соответствующими пунктами строки меню. Теперь рассмотрим, как реализован этот пример, а также какие существуют направления усовершенствования этого примера. Пример разбит на две части: HTML‑документ и сценарий (файл popup_menu.js). Сначала разберем текст HTML‑документа (пример 13.15).
Пример 13.15. Документ со строкой меню<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»>
<HTML>
<HEAD>
<TITLE>Страница с меню</TITLE>
<STYLE type = "text/css">
.item {background-color: rgb(170, 170, 170)}
.selected {background-color: magenta}
.menu {border-style: ridge; visibility: visible; position: absolute}
.hidden {display: none}
.menu_line {border-style: solid; border-width: 1px;
background-color: rgb(170,170,170); width:100%}
</STYLE>
<SCRIPT src = "popup_menu.js" type = "text/javascript"></SCRIPT>
</HEAD>
<BODY>
<!–Создаем первое меню (изначально оно скрывается)–>
<TABLE id = "menu1" class = "hidden">
<!–Первый пункт меню–>
<TR id = "menu1_item1" class = "item" onClick = "menu1_item1_click()"
onMouseOver = "menu1_item1.className = 'selected'"
onMouseOut = "menu1_item1.className = 'item'">
<TD><IMG src = "icons/1.jpg"><TD>Первый пункт меню
<!–Второй пункт меню–>
<TR id = "menu1_item2" class = "item" onClick = "menu1_item2_click()"
onMouseOver = "menu1_item2.className = 'selected'"
onMouseOut = "menu1_item2.className = 'item'">
<TD><IMG src = "icons/2.jpg"><TD>Второй пункт меню
<!–Третий пункт меню–>
<TR id = "menu1_item3" class = "item" onClick = "menu1_item3_click()"
onMouseOver = "menu1_item3.className = 'selected'"
onMouseOut = "menu1_item3.className = 'item'">
<TD><IMG src = "icons/3.jpg"><TD>Третий пункт меню
<!–Четвертый пункт меню–>
<TR id = "menu1_item4" class = "item" onClick = "menu1_item4_click()"
onMouseOver = "menu1_item4.className = 'selected'"
onMouseOut = "menu1_item4.className = 'item'">
<TD><IMG src = "icons/4.jpg"><TD>Четвертый пункт меню
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 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
- 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
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200