HTML

2 3 ББК 32.988.02-18 УДК 004.738.5 К63 К63 Н. Комолова, Е. Яковлева HTML: Самоучитель. 2-е изд. — СПб.: Питер, 20...

Author: Н. Комолова | Е. Яковлева

331 downloads 2495 Views 12MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Report copyright / DMCA form

DOWNLOAD PDF

2

3

ББК 32.988.02-18 УДК 004.738.5 К63

К63

Н. Комолова, Е. Яковлева HTML: Самоучитель. 2-е изд. — СПб.: Питер, 2011. — 288 с.: ил. ISBN 978-5-4237-0144-4 Самоучитель содержит последовательное изложение процесса создания вебстраниц с помощью языка HTML. Подробно рассмотрены процесс создания изображений для размещения на веб-странице (в программе Adobe Photoshop) и общие вопросы веб-дизайна. Книга содержит более 100 упражнений, позволяющих на практике закрепить изучаемый материал. Новое издание существенно обновлено актуальной информацией и дополнено материалом о технологиях XML, XHTML, DHTML, а также описанием нового стандарта HTML5. Для студентов, преподавателей вузов и широкого круга читателей, желающих самостоятельно научиться созданию веб-страниц с помощью HTML.

ББК 32.988.02-18 УДК 004.738.5

Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги.

© ООО Издательство «Питер», 2011

ISBN 978-5-4237-0144-4

4

Содержание Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Урок 1. Основные сведения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Основные понятия . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Браузер . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Структура документа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Гипертекстовые ссылки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Изменение программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Теги и атрибуты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Основные правила создания веб-страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Атрибуты тега . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Урок 2. Текст . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Первая веб-страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Уровни заголовков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Шрифт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Абзацы и разрывы строк . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Выравнивание . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Предварительное форматирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Задание начертания . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Неразрывные строки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

6 Содержание Вставка цитат . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Комментарии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Акронимы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Определения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Шрифтовое выделение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Использование моноширинных шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Добавление текста с другой страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Расстановка пробелов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Урок 3. Графика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Размещение графики на веб-странице . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Форматы графических файлов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Формат GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Формат JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Формат PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Формат BMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Формат PCX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Пикселы и разрешение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Примеры размещения графики на веб-странице . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Выравнивание изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Карты изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Тег <MAP> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Тег . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Примеры карт изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Масштабирование изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Урок 4. Фон веб-страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Фоновые рисунки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Задание стандартных цветов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Урок 5. Линии, точки и другие объекты . . . . . . . . . . . . . . . . . . . 88 Горизонтальные линии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Содержание

7

Клавиатурные символы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Специальные символы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Информация об авторе документа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Java-апплеты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Сценарии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Внешние объекты и комментарии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Листы стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Урок 6. Бегущая строка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Вставка бегущей строки на веб-страницу . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Пример бегущей строки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Рисунок в качестве бегущей строки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Урок 7. Списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Виды списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Нумерованные списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Маркированные списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Вложенные списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Списки определений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Урок 8. Таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Основные теги таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Создание таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Создание строк и столбцов таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Создание ячеек таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Создание заголовка и подписи таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Теги группирования элементов таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Группирование столбцов таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Группирование строк таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Основные атрибуты элементов таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Примеры таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

8 Содержание

Урок 9. Формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Создание форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Размещение на форме элементов управления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Списки выбора . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Многострочные текстовые поля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Урок 10. Фреймы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Свойства фреймов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Наборы фреймов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Вставка фрейма в документ с набором фреймов . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Вставка фрейма в документ без набора фреймов . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Взаимодействие фреймов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Примеры использования фреймов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Примеры взаимодействия фреймов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Урок 11. Ссылки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Универсальный указатель ресурса . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Вставка ссылок в документ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Внутренние ссылки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Внешние ссылки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Переходы внутри документа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Графические ссылки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Урок 12. Технологии XML, XHTML, DHTML . . . . . . . . . . . . . . . . . 201 Технология XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Технология XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Технология DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Урок 13. Баннерная реклама . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Определение баннера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Эффективность баннеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211


9

Примеры баннеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Урок 14. Публикация и поиск документов . . . . . . . . . . . . . . . . 216 Подготовка и публикация веб-сайта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Поиск информации в Интернете . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Поиск информации по URL-адресам . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Популярные адреса . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Поисковые системы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Взаимодействие в сети . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Урок 15. Еще раз с начала . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Версия языка HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 META-информация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Атрибут NAME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Атрибут HTTP-EQUIV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Связь веб-страницы с дополнительными файлами . . . . . . . . . . . . . . . . . . . . . . . . 227 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Урок 16. Слои . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Понятие слоя . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Создание слоя с помощью тега . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Создание слоя с помощью тега . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Создание динамического слоя . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Урок 17. Каскадные листы стилей . . . . . . . . . . . . . . . . . . . . . . 236 Поддержка стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Уровни CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Синтаксис листа стиля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Группирование стилей и селекторы классов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Четыре варианта использования CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Встраиваемые стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Подключаемые стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

10 Содержание Связываемые стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Импортируемые стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Примеры использования стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

Урок 18. Подготовка изображений для веб-страниц . . . . . . . . 255 Файловые операции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Инструменты выделения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Изменение разрешения и размеров изображения . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Коррекция изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

Урок 19. HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Пример веб-страницы HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Размещение объектов мультимедиа на веб-страницах . . . . . . . . . . . . . . . . . . 264 Файловые форматы аудио и видео . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Формат SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Формат Ogg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Формат AVI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Формат MOV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Семейство форматов MPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Формат WAV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Формат AIFF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Формат MP3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Потоковое видео . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Текстовые данные . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Аббревиатура . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Внешние данные . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Направление текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Кнопки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Канва . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Список данных . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Заголовок объекта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272


11

Маркировка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Заголовки в таблице . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Контроль времени . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Обработка событий . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Атрибуты тега при обработке событий . . . . . . . . . . . . . . . . . . . . . . . . . 273 События в форме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 События, связанные с клавиатурой . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 События, связанные с мышью . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Медиа-события . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Подведем итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Алфавитный указатель ��277

Благодарности Появлением этой книги я обязана многим людям. Начать я хочу со слов благодарности президенту издательского дома «Питер» Вадиму Усманову и главному редактору Екатерине Строгановой за то, что, несмотря на свою занятость, они всегда откликались на приглашение Северо-Западного института печати Санкт-Петербургского государственного университета технологии и дизайна и приезжали 1 сентября на праздник «День Первокурсника», одним из организаторов которого я являлась. Они приветствовали напутственной речью студентов 1 курса, которые решили связать свою жизнь с отраслью печати и стать редакторами, технологами полиграфического производства или специалистами по полиграфическому оборудованию. Я очень благодарна за организацию и помощь в работе руководителю проекта, к. т. н. Анатолию Адаменко, с которым меня связывает наша альма-матер — математико-механический факультет Санкт-Петербургского государственного университета. Я очень благодарна директору Северо-Западного института печати СанктПетербургского государственного университета технологии и дизайна, д. т. н., профессору Дроздову Валентину Ниловичу за то, что он поверил в мой талант преподавателя и доверил мне преподавание в институте. Я очень благодарна заведующему кафедрой прикладной математики и информатики Санкт-Петербургского государственного архитектурно-строительного университета, д. ф.-м. н., профессору Вагеру Борису Георгиевичу, который инициировал чтение мною курса лекций «Введение в Интернет-технологии». Благодарна студентам факультета «Промышленное и гражданское строительство», потоку, состоящему из четырех групп, которые приветствовали меня вставанием, когда я входила в аудиторию. Я очень благодарна моему научному консультанту, академику Российской академии образования, заслуженному деятелю науки и техники РФ, д. т. н., профессору, зав. кафедрой АСОИУ Санкт-Петербургского государственного электротехнического университета «ЛЭТИ» Советову Борису Яковлевичу за то, что он оказывал мне помощь при поступлении в докторантуру Санкт-Петербургского государственного электротехнического университета «ЛЭТИ». Я очень благодарна моему редактору Алексею Жданову, который непосредственно работал с рукописью, за его кропотливую и профессиональную работу.

Благодарности

13

Очень признательна всем сотрудникам издательства, чьими усилиями появилась моя книга. Благодарна тому человеку, который мне как-то сказал: «Надо писать новую книгу. Читатели ждут». Благодарна своим родным и близким за поддержание творческого настроя. А больше всего я благодарна своим ученикам, которые стремятся к знаниям, требуют их и заставляют постоянно быть в форме: листать книги, читать книги, общаться с профессионалами, путешествовать по веб-страницам Интернета. Комолова Нина Владимировна

Введение Если бы я знал тогда, сколько людей будут указывать URL, то не стал бы использовать в синтаксисе два слэша Тим Бернерс-Ли

Сегодня каждый знает, что такое Интернет и веб-страница; эти понятия стали частью повседневной жизни. О них говорят, о них думают, учреждения включают адреса своих узлов Интернета в рекламные проспекты. Электронные адреса показывают по телевизору, называют в радиопередачах. Поэтому и тема создания веб-страниц интересна многим. Статистический отдел поисковой системы Яндекс провел анализ русскоязычной части Интернета. Согласно их исследованиям на сегодняшний день насчитывается примерно 15 миллионов русскоязычных сайтов, что равно 6,5 процентов от общей численности сайтов в сети, поэтому авторы книги пытаются сделать все, что в их силах, чтобы русскоязычных сайтов в Интернете было как можно больше. Создавайте русскоязычные сайты! С появлением первых компьютеров возникла проблема передачи информации между ними. И средства были найдены — это различные носители и кабель. Были написаны программы, позволяющие передавать и получать данные, и практически сразу возникла вторая проблема — проблема совместимости: как заставить два и более компьютеров, соединенных кабелем, работать в локальной сети. Официальным днем рождения Интернета считается 2 января 1969 года, когда Управление перспективных исследований (Advanced Research Project Agency, ARPA) Министерства обороны США начало работу над проектом связи оборонных компьютеров.

Введение

15

В 1970-е Интернет вырос в международную сеть. Первыми службами Интернета стали электронная почта (electronic mail, e-mail) и группы новостей (Usernet). В 1980-е годы была разработана сеть Bitnet. Эта сеть, созданная специалистами Нью-йоркского университета (City University of New York), имела большое значение, поскольку первоначально не предназначалась ни для военных, ни для исследовательских целей и в то же время входила в состав Интернета. В 1984 году была предложена доменная система имен (Domain Name System, DNS), отображающая символьные имена на IP-адреса. Служба (сервис) Интернет DNS предназначена для установки соответствия между символьными и цифровыми именами доменов. В 1986 году Международная организация по стандартизации (International Organization for Standardizations, ISO) приняла первый стандарт ISO-8879, названный SGML (Standard Generalized Markup Language — стандартный обобщенный язык разметки). SGML — обогащенный метаязык, позволяющий строить системы логической и структурной разметки текстов любых разновидностей. Структурная разметка — форматирование текста, в которой управляющие коды не несут никакой информации о внешнем виде документа, а лишь указывают границы и соподчинение его составных частей, то есть задают его логическую структуру. SGML-документ требует определения типа документа (Document Type Definition, DTD). DTD посылается вместе с SGML-документом или включается в SGML-документ для того, чтобы можно было распознать теги, созданные пользователем. Язык SGML не получил распространения, однако его идеология повлияла на многие компьютерные разработки. В 1989 году выпускник Оксфордского университета, бакалавр в области физики, сотрудник Европейского центра ядерных исследований (CERN) Тим Бернерс-Ли (Tim Berners-Lee) разработал язык HTML (HyperText Markup Language — язык разметки гипертекста), ставший основным языком создания веб-документов и прототипом Всемирной паутины (World Wide Web, WWW). Тим Бернс-Ли — автор идеологии гиперссылок (рис. 0.1). По сути, язык HTML — это набор SGMLпредписаний, сформулированный в виде DTD. В случае языка HTML определение типа документа хранится в браузере, и это определение намного проще, чем DTD языка SGML. Однако нельзя сказать, что именно Тим Бернерс-Ли один все и придумал. К открытию подошло все человечество, накопив достаточные знания. Так, еще в середине XX столетия Ванневар Буш (Vannevar Bush) объявил миру новое слово — «гипертекст», а Тед Нельсон (Ted Nelson) предложил создать «документарную вселенную», связав все тексты, произведенные человечеством на свет, перекрестными ссылками, но в начале шестидесятых годов двадцатого столетия у академической публики это воззвание не вызвало ничего, кроме снисходительной улыбки. Осенью 1990 года сотрудники CERN получили в пользование первый веб-сервер и веб-браузер, созданные Тимом Бернерсом-Ли в среде NeXTStep. Для работы с текстами был разработан специальный протокол передачи гипертекста (HyperText Transfer Protocol, HTTP). Эта технология дала огромный толчок развитию Сети, и Интернет стал действительно интернациональной сетью.

16 Введение

Рис. 0.1. Тим Бернерс-Ли — создатель языка HTML

Летом 1991 года проект WWW, покоривший научный мир Европы, пересек океан и влился в американский проект Internet. Появился ряд новых аббревиатур: URL, HTTP, HTML. Вспыхнувшее было соперничество между Европой и Америкой за новую информационную технологию сошло «на нет» с переездом Тима Бернерса-Ли в США. В 1994-м он сначала возглавил кафедру в Массачусетском технологическом институте, а затем — международный консорциум W3C (World Wide Web Consortium), играющий роль органа по стандартизации Всемирной Паутины. Интернет представляет собой объединение множества локальных компьютерных сетей. Хотя говорят, что у Интернета нет хозяина и он не принадлежит никому, в нем, как показано на рис. 0.2, наблюдается четкая иерархическая структура: магистрали, провайдеры, пользователи. На рисунке использованы следующие обозначения. P — �� точка�� присутствия�� (Point of Presence, POP). �� Точками присутствия называют места подключения к магистрали сети поставщика услуг Интернета (Internet Service Provider, ISP), или провайдера, обслуживающего локальных пользователей. N — точка доступа (Network Access Points, NAP). Точками доступа, или центрами обмена (Internet eXсhange, IX), называют места объединения сетей нескольких провайдеров.

Введение

17

DNS — сервер доменной системы имен (Domain Name System, DNS). DNSсерверы служат для трансляции доменных имен в IP-адреса. F — файловый (file) сервер. W — веб-сервер (web-server). D — домен (domain).

Рис. 0.2. Структура Интернета

Многие компании стали выпускать собственные браузеры и к ним собственные расширения языка HTML, например в 1993 году был разработан первый графический браузер Mosaic. После этого появилось еще более ста различных браузеров. Самыми популярными стали Netscape Navigator и Microsoft Internet Explorer. Консорциум W3C разработал стандарты, необходимые для дальнейшего развития World Wide Web. В 1996 году Консорциум W3C объявил о сотрудничестве с лидерами рынка в целях стандартизации программного обеспечения. Появившийся в 1991 году язык HTML постоянно дорабатывался и дополнялся. Из всех этих видоизменений выделяют следующие версии:

18 Введение HTML 1.0. Первая версия языка, считая год его появления. HTML 2.0. Эта версия (RFC 1866) была разработана в 1994 г. Рабочая группа по HTML в составе IETF (Internet Engineering Task Force) ввела соответствующие изменения, и набор базовых элементов HTML 2.0 приобрел статус стандарта. HTML 3.0. Эта версия языка была реализована в начале 1996 г. Появилось много нововведений, включая теги для создания таблиц, для разметки математических формул, для вставки обтекаемых текстом рисунков, для вставки примечаний и т. д. Не нарушая основные концепции разметки гипертекста, авторы версии 3.0 ввели новое средство — каскадные листы стилей (Cascading Style Sheets, CSS). HTML 3.2. Эта версия языка была реализована в 1996 г. В ней были предусмотрены дополнительные элементы, предназначенные для создания апплетов, задания регистра символов и т. д. Версия HTML 3.2 стала компромиссным решением — попыткой примирить Microsoft и Netscape и объединить их оригинальные решения. HTML 4.0. Эта версия языка была реализована в 1997 г. Вторая скорректированная реализация вышла в 1998 г. В HTML 4.0 была введена поддержка мультимедиа, языков сценариев, а также средств воспроизведения документов для пользователей с физическими ограничениями. Когда консорциум W3C опубликовал спецификацию языка HTML 4.0, он указал, что почти все атрибуты, определяющие вид HTML-документа (цвет, выравнивание, шрифты, графика и т. д.), являются нежелательными, взамен рекомендуется использовать листы стилей и классы. Однако большинство разработчиков веб-страниц по-прежнему пользуются тегами, которые давно знают.

HTML 4.01. Эта версия вышла в 1999 г. В ней были исправлены ошибки, замеченные в предыдущей версии. HTML 5. Разработка этой версии началась в рабочей группе W3C в 2007 г. и 22 января 2008 г. появились в новой спецификации. Спецификация и сейчас находится в разработке и может находиться в этой стадии еще несколько лет. В поддержку языка HTML была создана целая серия языков программирования, таких как Java, JavaScript, Perl, PHP и т. д. С помощью этих языков стало возможным создание динамических веб-страниц, включающих формы, таблицы, фреймы и другие элементы. В феврале 1998 г. был предложен язык XML (Extensible Markup Language — расширяемый язык разметки). Этот язык похож на HTML тем, что для описания различных разделов документа в нем используются теги. Однако в отличие от HTML язык XML позволяет разработчикам определять собственные теги и ставить им в соответствие собственные способы воспроизведения информации. XMLдескрипторы чувствительны к регистру символов. Последняя версия Internet Explorer поддерживает XML. Что касается Netscape Navigator, то Mozilla (рабочая группа в составе Netscape) лишь экспериментирует со средствами поддержки XML.

Введение

19

Язык �� XHTML�� (Extensible HyperText Markup Language — расширяемый язык разметки гипертекста) — это сочетание HTML�� и �� XML�� . Консорциум �� W�� 3�� C�� , объединяющий представителей более 500 организаций из разных стран, рекомендует использовать XHTML вместо HTML, однако на сегодняшний день большинство разработчиков остаются верными HTML. Язык Dynamic HTML (динамический язык HTML) — это попытка объединить объектную модель документа (Document Object Model, DOM), язык JavaScript и каскадные листы стилей (CSS). Dynamic HTML позволяет создавать интерактивные веб-страницы с расширенной поддержкой мультимедиа. Многие средства Dynamic HTML описаны в спецификации HTML 4.01. Язык Java произошел от языка программирования Oak, ориентированного на работу в Интернете. Синтаксис языка Java близок к синтаксису языка C++. Программы на языке Java можно разделить на две большие группы. К первой группе относятся Java-приложения, предназначенные для автономной работы под управлением специальной интерпретирующей машины Java. Реализации этой машины созданы для всех основных компьютерных платформ. Вторая группа — это так называемые апплеты. Апплет — это небольшая программа, написанная на языке Java и включенная в состав HTML-файла. Среду для выполнения Java-апплетов обеспечивает другая программа, например, веб-браузер. В отличие от приложений апплеты не могут непосредственно выполняться в операционной системе. Код апплета интерпретируется браузером или сервером. В зависимости от того, какая из программ выступает в роли интерпретатора, апплеты могут выполняться на стороне клиента либо на стороне сервера. Java — это компилируемый язык. JavaScript — это язык сценариев, с помощью которого можно расширять возможности HTML-страниц. Этот язык разрабатывался корпорацией Netscape Communications для использования в веб-браузере Netscape Navigator (JavaScript для клиента) и веб-серверных продуктах (JavaScript для сервера), созданных этой корпорацией. Многие элементы этого языка, предназначенные для поддержки дополнительных функциональных возможностей статических веб-страниц, разработала фирма Sun Microsystem. В отличие от Java-апплетов, загружаемых отдельно от HTML-документа, в котором они используются, программы, написанные на языке JavaScript, встраиваются непосредственно в HTML-документы с помощью парного тега <SCRIPT>. Некоторые начинающие пользователи считают, что JavaScript является версией языка Java. Это курьезное заблуждение, между JavaScript и Java нет ничего общего. Java — это язык программирования, а JavaScript — интерпретируемый язык, предназначенный для написания сценариев. VBScript — язык, который был разработан Microsoft как подмножество языка Visual Basic. VBScript создавался для работы с Internet Explorer и Microsoft Internet Information Server. ColdFusion — это набор инструментальных средств разработки веб-приложений. Достоинством этого пакета является наличие удобных средств для работы с базами данных.

20 Введение PHP — это язык сценариев, обрабатываемый сервером. Подобно ColdFusion, PHP-код непосредственно включается в состав HTML-документа. Первоначальным названием PHP являлось Personal Home Page Tools (Персональная домашняя страница). Позднее эта технология, допускающая размещение на сервере выполняющихся скриптов веб-страниц, работающая, главным образом, на платформах Unix, Linux и Solaris, стала расшифровываться по-другому: PHP (PHP Hypertext Preprocessor). В PHP реализованы лучшие решения многих языков, таких как C и Perl; кроме того, PHP предоставляет разработчику мощные средства для работы с базами данных. Слово Perl является аббревиатурой выражения Practical Extraction and Report Language. Подобно Perl, PHP — свободно распространяемая открытая система, и сообщество разработчиков имеет возможность ее модернизировать. Новой технологией для создания лучшего, удобного и более интерактивного вебприложения, а не новым языком программирования является AJAX . AJAX — это акроним Asynchronous JavaScript And XML. AJAX использует JavaScript, чтобы посылать и получать данные между веб-браузером и веб-сервером. Приложения AJAX являются браузерами и платформно-независимы (кроссплатформенная и кросс-браузерная технология). Вместе со AJAX, интернетприложения можно сделать богаче (меньше, быстрее и легче для использования). К известным средствам разработки можно отнести также CGI (Common Gateway Interface), ASP, JSP (Java Server Pager), SSI (Server Side Includes), VRML (Virtual Reality Markup Language) и другие. Apache — это открытый веб-сервер, наиболее часто используемый для платформ Unix, Linux и Solaris. ASP (Active Server Pages) — технология, используемая для написания мощных клиент-серверных интернет-приложений, позволяющая создание динамических страниц HTML. Какие программы лучше использовать для создания веб-страниц? Это, несомненно, Adobe GoLive, Microsoft FrontPage, Macromedia Dreamweaver. Для редактирования изображения могут применяться программы Adobe Photoshop, Macromedia Fireworks, Corel Photo-Paint, Adobe Illustrator, Macromedia Freehand, CorelDRAW, Adobe LiveMotion, Macromedia Flash. Для работы с аудио- и видеоданными — программы Adobe Premier, Apple Final Cut Pro, Apple Quick Time, RealProducer, Windows Media. Существует множество простых и сложных программ для написания HTMLстраниц. В своей основе все они делятся на две категории: программы, автоматизирующие вставку тегов, и обыкновенные стандартные текстовые редакторы и процессоры, созданные для любых платформ. Хотя во многих перечисленных программах веб-страницы создаются автоматически, следует обязательно учить язык HTML, чтобы понимать, как строится веб-страница. Поэтому в данной книге мы будем создавать веб-страницы с помощью простейшего текстового редактора.

От издательства

21

Не следует использовать для создания веб-страниц программу Microsoft Word или Microsoft PowerPoint.

В книге подробно рассмотрены процессы обработки изображения для размещения на веб-страницах и общие вопросы веб-дизайна. Всё внимательно читая, а главное, самостоятельно вводя все приводимые в книге коды веб-страниц, можно очень скоро научиться разрабатывать сайты на хорошем уровне.

От издательства Ваши замечания, предложения и вопросы отправляйте по адресу электронной почты [email protected] (издательство «Питер», компьютерная редакция). Мы будем рады узнать ваше мнение! Подробную информацию о наших книгах вы найдете на веб-сайте издательства http://www.piter.com.

Урок1. Основные сведения Урок В этом уроке рассматриваются основные понятия HTML и элементы веб-страниц. Даны определения HTML, WWW, Интернета, веб-сайта. Рассказано, с чего следует начинать при создании HTML-документа. Даны определения тегов, гипертекста, гипертекстовых ссылок, приведены основные теги, определяющие структуру HTML-документа...

Основные понятия

23

Основные понятия Язык HTML (HyperText Markup Language — язык разметки гипертекста) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WWW (World Wide Web — Всемирная паутина). HTML-документы (или веб-документы) могут просматриваться различными типами веб-браузеров. Если документ создан с использованием HTML, веб-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Основное преимущество HTML заключается в том, что документ может быть просмотрен на веб-браузерах различных типов и на различных платформах. HTML — один из наиболее простых языков создания веб-страниц. WWW — это сообщество веб-серверов (сетевых компьютеров), входящих в Интернет, на которых хранятся текстовые, графические, видео-, аудио- и другие информационные файлы. WWW — широкомасштабная гипермедиа-среда, ориентированная на предоставление универсального доступа к огромному количеству документов, расположенных на серверах. WWW — распределенная структура данных сетевого мультимедийного гипертекста. По всему миру разбросаны тысячи информационных серверов. Любой новый компьютер, подключенный к Интернету, может сам стать сервером, получать необходимую информацию от других серверов, отправлять письма и получать ответы с помощью любой из многочисленных почтовых служб. Поисковые серверы хранят миллионы ссылок на разнообразные документы и производят поиск нужной информации по запросу пользователя. Глобальный поиск электронных публикаций проводится с использованием технологий WWW. Помимо известных англоязычных и русскоязычных поисковых систем, расположенных на крупных серверах, собственные серверы имеют информационные агентства, издательства, банки и другие организации. Интернет — это совокупность сетей, применяющих единый протокол обмена (точнее, обширное семейство из сотен протоколов) для передачи информации. Веб-сайт (web site) — совокупность веб-документов, организованных в виде титульной страницы и нескольких связанных с ней страниц. Каждая такая совокупность, доступная в Интернете, может иметь любые размер и содержание, информационную и эмоциональную направленность. Веб-мастер — лицо, ответственное за поддержание и обновление документов на веб-серверах. Как создаются HTML-документы? HTML-документы могут быть созданы при помощи любых текстовых редакторов или специализированных HTML-редакторов и конвертеров. HTML-документ — это обычный файл в формате ASCII. В его основе лежат специальные дескрипторы (теги), которые и определяют правила форматирования данных.

24 Урок 1. Основные сведения Код программы на языке HTML — обычный текстовый файл, поэтому проще всего написать его в Блокноте — стандартном Windows-приложении, которое вызывается командой Пуск  Программы  Стандартные  Блокнот. Пример программы, написанной на языке HTML в Блокноте, показан на рис. 1.1.

Рис. 1.1. Пример программы, написанной на языке HTML в Блокноте

Когда программа написана, ее файл следует сохранить не с расширением .txt, а с расширением .htm (рис. 1.2). Имя HTML-файла следует писать строчными латинскими буквами без пробелов. Можно использовать цифры, знаки подчеркивания и тире.

Рис. 1.2. Диалоговое окно сохранения файла в программе Блокнот

Основные понятия

25

Как только файл будет записан с расширением .htm, его значок сразу примет вид «интернетовского», что показано на рис. 1.3. Второй рисунок соответствует файлу с расширением .htm в программе Internet Explorer, третий — в программе Mozilla Firefox.

Рис. 1.3. Примеры значков TXT- и HTML-файлов

Еслииспользуетсяоперационнаясистема,отличнаяотWindows,томожновыбратьаналогичный простой текстовый редактор. Например, Pico (Linux) или TextEdit (Mac). HTML — это язык тегов. Под тегами понимаются специальные управляющие коды, записываемые в тексте в угловых скобках. Теги, окружающие текстовые или графические команды, определяют параметры форматирования текста, местоположение рисунков относительно текста, расположение объектов на странице. Все HTML-теги начинаются с символа левой угловой скобки (). Как правило, существуют открывающий и закрывающий теги. Для примера приведем открывающий и закрывающий теги, определяющие заголовок документа: <TITLE> Заголовок документа

Итак, тег — последовательность символов, заключенных между символами < и >. Почти все теги образуют пары, то есть для открывающего тега существует закрывающий тег. Есть и непарные теги, например
, , но их мало. Закрывающий тег выглядит так же, как открывающий, и отличается от него символом прямого слэша перед текстом внутри угловых скобок. В данном примере тег <TITLE> говорит веб-браузеру об использовании формата заголовка, а тег — о завершении текста заголовка. Некоторые теги, такие как
(тег, определяющий абзац), не требуют завершающего тега, но его наличие придает исходному тексту документа стройность, делает его понятнее. Язык HTML нечувствителен к регистру символов, описывающих тег, и приведенный ранее пример мог бы выглядеть следующим образом: Заголовок документа

Дополнительные пробелы, символы табуляции и конца строки, добавленные в исходный текст HTML-документа, чтобы сделать его понятнее, игнорируются веб-браузером при интерпретации документа. HTML-документ может включать вышеописанные элементы, только если они помещены внутрь тегов и (более подробно о теге рассказывается в уроке 2). Вся программа состоит из набора тегов. Теги могут иметь параметры, или атрибуты, которые играют роль дополнения тегов. Иногда теги называют дескрипторами. Дескриптор (в переводе с лат. описатель) — лексическая единица (слово, словосочетание) информационно-поискового языка, выражающая основное смысловое содержа-

26 Урок 1. Основные сведения ние какого-либо текста. Дескриптор используется при информационном поиске документов в информационно-поисковых системах. В каком регистре писать код программы? Большинству браузеров безразлично, в каком регистре введены буквы тегов. Записи , или обычно дают одинаковый результат.

Браузер Для просмотра HTML-документов в WWW необходимо специальное программное обеспечение. Такие программы называются браузерами (от англ. browse — листать, просматривать, читать). С их помощью можно загружать и просматривать веб-страницы, осуществлять навигацию в WWW и т. д. Браузер — программа просмотра HTML-файлов, программа-интерпретатор языка HTML. Браузер показывает на экране текст и графику, интерпретируя команды (теги), указанные в исходном тексте в угловых скобках. Веб-браузер — это прикладная программа, которая отображает содержимое файлов, полученных с локального или удаленного компьютера, в соответствии с инструкциями, включенными в этот файл. Браузер представляет собой клиентскую программу и использует для передачи запросов веб-серверам протокол HTTP (HyperText Transfer Protocol — протокол передачи гипертекста). Существует довольно большое количество браузеров, из которых самыми популярными являются браузеры Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Chrome, Safari и NCSA Mosaic. Браузер, прочитав HTMLфайл, с помощью тегов интерпретирует содержащиеся в документе данные и соответствующим образом отображает их на экране компьютера. Браузеры Netscape Navigator и Internet Explorer имеют встроенные программы чтения новостей.

Структура документа Когда веб-браузер получает документ, он по тегам определяет, как документ должен быть интерпретирован. Тег . Самый первый тег, который встречается в документе, должен быть тегом . Данный тег сообщает веб-браузеру, что документ написан на языке HTML. Минимальный HTML-документ мог бы выглядеть так: ...тело документа...

Таким образом, теги и образуют для HTML�� -документа так называемый контейнер. Тег . Структурно документ распадается на две части: заголовочную и основную, или тело документа. Заголовочная часть размещается между тегами и , основная — между тегами и .

Гипертекстовые ссылки

27

Тег <TITLE>. Внутри контейнера и размещается единственный обязательный контейнер из тегов <TITLE> и , содержащий текст заголовка. Тег заголовочной части документа должен быть указан сразу после тега и более нигде в теле документа. Данный тег представляет собой обобщенное описание документа. Следует избегать размещения какого-либо текста внутри тега . Открывающий тег указывается непосредственно перед тегом <TITLE> и другими тегами, описывающими документ, а закрывающий тег — сразу после окончания описания документа. Большинство веб-браузеров отображают содержимое тега <TITLE> в заголовке окна, содержащего документ, и в файле закладок, если он поддерживается веббраузером. Заголовок, ограниченный тегами <TITLE> и , размещается внутри тегов . Заголовок документа при отображении самого документа в окне браузера не виден. Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию. Тег . Тело документа должно находиться между тегами и . Это та часть документа, которая отображает его текстовую и графическую информацию. Следует заметить, что открывающие и закрывающие теги , и необязательны, но их настоятельно рекомендуется использовать, поскольку это позволяет веб-браузеру уверенно отделить друг от друга заголовочную и непосредственно смысловую части документа. Тег парный. Между открывающим тегом и закрывающим тегом размещаются все другие теги программы, составляющие основное содержание документа. Тег предназначается для выделения той части документа, которая должна быть показана пользователю на экране. Технически стартовые и завершающие тэги типа , и необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тегов позволяет веб-браузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Гипертекстовые ссылки Гипертекстовые ссылки являются ключевым компонентом, делающим вебстраницы привлекательными для пользователей. Благодаря гипертекстовым ссылкам (или просто гиперссылкам) веб-страница структурируется и связывается с другими документами, что обеспечивает быстрое и удобное получение информации. Технология гиперссылок позволяет объединить множество документов в один.

28 Урок 1. Основные сведения Гипертекст — информационная структура, обеспечивающая навигацию посредством гипертекстовых ссылок. Гипертекстовыми ссылками называются фрагменты текста или изображения, при активизации которых отображаются связанные с ними документы. Гипертекстовая ссылка — основной элемент всех гипертекстовых систем, которые указывают на другой документ или на другую часть того же документа. Такая ссылка задается тегами и . Она имеет несколько атрибутов, наличие одного из двух (HREF или NAME) обязательно. Первый указывает на ссылку за пределы данного документа, например: название ссылки

Второй позволяет перейти к определенным образом отмеченному (с помощью так называемого якоря, или закладки) месту того же самого документа, например: название ссылки

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по протоколу FTP (File Transfer Protocol — протокол передачи файлов) для отображения его браузером. В ссылку включается URL (Uniform Resource Locator — унифицированный указатель ресурса) — адрес особого формата, идентифицирующий другие локальные или удаленные документы, что часто требуется при организации больших структурированных веб-сайтов. Ссылки можно использовать для перемещения как по одному документу, так и от одного документа к другому. Однако HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходит внутри документа.

Изменение программы Если в коде веб-документа (файле с расширением .htm), который можно просмотреть в браузере Internet Explorer, требуется выполнить изменения, то следует открыть этот файл в программе Блокнот, выбрав в браузере Internet Explorer команду Вид  Просмотр HTML-кода (рис. 1.4).

Рис. 1.4. Просмотр HTML-кода документа

Теги и атрибуты

29

HTML-файл будет открыт в окне программы Блокнот (см. рис. 1.1). Выполнив изменения кода программы, следует воспользоваться командой Файл  Сохранить (рис. 1.5).

Рис. 1.5. Сохранение программы

Чтобы увидеть изменения программы в браузере Internet Explorer, необходимо щелкнуть на кнопке Обновить (она четвертая слева на рис. 1.6) или выполнить команду Вид  Обновить (см. рис. 1.4).

Рис. 1.6. Панель инструментов программы Internet Explorer

При следующих изменениях все перечисленные операции следует повторить. В некоторых браузерах обновления в программе можно отбразить другими способами.

Теги и атрибуты Тег — код языка HTML, с помощью которого выполняется разметка исходного текста. Тег записывается в угловых скобках. Как уже отмечалось, все теги начинаются с символа < и заканчиваются символом >. После открывающей угловой скобки следует имя тега (команды). Каждый тег может иметь атрибуты. После перечисления всех атрибутов начальный, или открывающий, тег закрывается. После открывающего тега располагается содержимое тега. Код HTML-документа заканчивается конечным, или закрывающим, тегом (рис. 1.7). Закрывающие теги начинаются с символа косой черты (/).

Рис. 1.7. Структура HTML-элемента

30 Урок 1. Основные сведения При написании тегов не учитывается регистр букв, то есть код может быть написан как строчными, так и прописными буквами, но в основном используют прописные, чтобы отличать теги от информационного наполнения документа. Если тег написан с ошибкой, то программа его игнорирует, не сообщая об ошибке. Теги не отображаются сами, а влияют на способ отображения документа. Атрибуты — дополнительные управляющие слова, отделенные от тега и друг от друга пробелами. Можно сказать, что атрибуты — это имена свойств тегов, которые могут принимать определенные значения. Атрибуты имеются только у открывающих тегов, у закрывающих тегов их нет. Атрибуты влияют на результат интерпретации тега браузером. Некоторые атрибуты имеют конкретное значение, которое задается после знака равенства. Раньше значения атрибута требовалось заключать в кавычки, но теперь во многих случаях эти кавычки можно опускать без каких-либо последствий.

Основные правила создания веб-страниц При создании веб-страницы необходимо придерживаться определенных правил, которые перечислены ниже. Следите за тем, чтобы веб-страницы не получились слишком широкими, и пользователям не приходилось пользоваться прокруткой. Обычно если вебстраница не помещается на экране, большинство браузеров добавляют внизу экрана горизонтальную полосу прокрутки. Типичной шириной экрана считается ширина в 640 пикселов. Каждая веб-страница должна иметь заголовок. Не перегружайте страницу графикой. Попытка визуально выделить все означает не выделить ничего. Не забывайте житейскую мудрость: «Все гениальное — просто». Помните про пословицу: «Выплескивая воду из корыта, не выплесните с водой ребенка». Иногда веб-страница сделана так красиво и оригинально, что непонятно, чему она посвящена. Используйте свободное пространство для привлечения внимания. Многие создатели сайтов концентрируют текст в середине экрана, оставляя широкие поля слева и справа от текста пустыми. Подобное пустое пространство заставляет пользователей компьютера сосредоточиться на тексте, который находится в середине.

Атрибуты тега В противоположность тегу тег содержит всю ту информацию, из которой собственно и состоит рассматриваемый документ. Порядок следования тегов здесь именно такой, в каком они предстают перед читателем.

Атрибуты тега

31

Начальный тег может иметь несколько атрибутов, например:

Атрибут BACKGROUND задает графическое изображение, которое как кафельная плитка заполнит фон документа. Файл с изображением должен быть сохранен в формате GIF или JPEG. Пример:

Файл с изображением фона лучше размещать в том же каталоге, что и файл самого документа, тогда URL-адрес и путь указывать не нужно. Пример использования этого атрибута в HTML-документе имеется в уроке 4. Атрибут BGCOLOR задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветовой модели RGB (Red, Green, Blue — красный, зеленый, синий) или строчного литерала, соответствующего названию цвета, например:

Примеры использования этого атрибута в HTML-документе имеются в уроке 2. Атрибут TEXT задает используемый по умолчанию цвет текста, не являющегося гиперссылкой. По умолчанию такой текст черный. Пример:

Пример использования этого атрибута в HTML-документе имеется в уроке 4. Атрибут LINK задает цвет гиперссылки; в большинстве браузеров он по умолчанию темно-синий. Пример:

Пример использования этого атрибута в HTML-документе имеется в уроке 15. Атрибут ALINK задает цвет активной гиперссылки, который меняется в момент щелчка на ней мышью и который желательно делать отличным от цвета фона (задаваемого атрибутом LINK). Пример:

Пример использования этого атрибута в HTML-документе имеется в уроке 15. Атрибут VLINK задает цвет посещенной гиперссылки, который желательно делать отличным от цвета фона (задаваемого атрибутом LINK) и от цвета активной гиперссылки (задаваемого атрибутом ALINK). Пример:

Пример использования этого атрибута в HTML-документе имеется в уроке 15. Атрибут BGPROPERTIES задает свойства фонового изображения. В данный момент браузерами поддерживается единственное его значение fixed, запрещающее прокрутку изображения. Пример:

32 Урок 1. Основные сведения Атрибут TOPMARGIN задает верхнюю границу страницы в пикселах. Пример:

Атрибут BOTTOMMARGIN задает нижнюю границу страницы в пикселах. Пример:

Атрибут LEFTMARGIN задает левую границу страницы в пикселах. Пример:

Атрибут RIGHTMARGIN задает правую границу страницы в пикселах. Пример:

Примеры использования в �� HTML�� -документе атрибутов, регулирующих положение границ страницы, имеются в уроке 4. На рис. 1.8 показана веб-страница (листинг 1.1), для которой верхняя, левая, правая и нижняя границы не заданы, то есть равны 0. Видно, что текст как бы прилипает к левому краю страницы, отступов сверху и снизу не наблюдается. Правый край текста имеет отступ от правой границы только из-за того, что в нем после каждой строки указан тег перехода на новую строку (тег
). Листинг 1.1. Пример создания веб-страницы, для которой не заданы границы МОЯ ПЕРВАЯ ПРОГРАММА А. С. Пушкин Зимняя дорогаСквозь волнистые туманы
Пробирается луна,
На печальные поляны
Льет печально свет она

По дороге зимней, скучной
Тройка борзая бежит,
Колокольчик однозвучный
Утомительно гремит.

Что-то слышится родное
В долгих песнях ямщика:
То разгулье удалое
То сердечная тоска...

Ни огня, ни черной хаты,
Глушь и снег... Навстречу мне,
Только версты полосаты
Попадаются одне...

Скучно, грустно...Завтра, Нина,
Завтра к милой возвратясь,
Я забудусь у камина,
Загляжусь не наглядясь.

Звучно стрелка часовая
Медный круг свой совершит,
И, докучных удаляя,
Полночь нас не разлучит

Грустно, Нина: путь мой скучен,
Дремля смолкнул мой ямщик,
Колокольчик однозвучный,
Отуманен лунный лик.
1826

На рис. 1.9 показана веб-страница, для которой верхняя, левая, правая и нижняя границы заданы и равны 150 пикселов (листинг 1.2). Видно, что текст имеет отступы от левого и правого краев, а также сверху (и снизу, в чем можно убедиться, выполнив прокрутку). Так как текст полностью в окно не помещается, автоматически справа появляется вертикальная полоса прокрутки.

Атрибуты тега

33

Рис. 1.8. Веб-страница, для которой не заданы границы

Рис. 1.9. Веб-страница с отступами от границ

Листинг 1.2. Пример создания веб-страницы, для которой заданы границы МОЯ ПЕРВАЯ ПРОГРАММА А. С. Пушкин Зимнее утро Мороз и солнце; день чудесный;
Еще ты дремлешь, друг прелестный,
Пора, красавица, проснись:
Открой сомкнуты негой взоры
Навстречу северной Авроры,
Звездою Севера явись!

Вечор, ты помнишь, вьюга злилась,
На мутном небе мгла носилась;
Луна, как бледное пятно,

34 Урок 1. Основные сведения
Сквозь тучи мрачные желтела,
А ты печальная сидела-
А нынче погляди в окно:

Под голубыми небесами
Великолепными коврами,
Блестя на солнце, снег лежит;
Прозрачный лес один чернеет,
И ель сквозь иней зеленеет,
И речка подо льдом блестит.

Вся комната янтарным блеском
Озарена. Веселым треском
Трещит затопленная печь
Приятно думать у лежанки.
Но знаешь: не велеть ли в санки
Кобылку бурую запречь?

Скользя по утреннему снегу,
Друг милый, предадимся бегу
Нетерпеливого коня
И навестим поля пустые,
Леса, недавно столь густые,
И берег, милый для меня
1829

Подведем итоги В этом уроке рассматриваются базовые понятия, относящиеся к созданию вебстраниц. Показаны структура �� HTML�� -документа и некоторые основные теги. Перечислены правила создания веб-страниц. В заключение урока представлено несколько примеров веб-страниц.

Урок2. Текст Урок В этом уроке рассматриваются основные теги, предназначенные для работы с текстом. Эти теги позволяют форматировать текст, красиво располагать его на странице, а также выводить в виде всплывающих подсказок.

36 Урок 2. Текст

Первая веб-страница Можно открыть Блокнот и в теле документа записать текст, не задумываясь о его размерах и цвете. На рис. 2.1 показана такая программа при просмотре в браузере (листинг 2.1).

Рис. 2.1. Веб-страница с текстом

Листинг 2.1. Пример создания веб-страницы с текстом <TITLE> Моя первая Веб-страничка 33 удивительнейшие буквы русского алфавита передают человечеству события, факты, настроение, переживания, радость и вдохновение, то есть все, что можно видеть, слышать, пробовать, трогать, чем можно наслаждаться. Как же буквы могут передать огромное количество информации? Буквы образуют слово, слова собираются в предложения, предложения могут составить целую книгу. Книги состоят из текста и рисунков.

Как видно на рисунке, то что находится между тегами <TITLE> и , не появляется на экране. Однако при загрузке документа в браузер этот текст загружается в первую очередь и отображается в заголовке окна браузера. Если текст заголовка достаточно информативен, пользователь в процессе поиска нужных документов уже на этапе загрузки может определить, действительно ли ему нужен этот документ, а если не нужен, то сразу отказаться от его загрузки и перейти к загрузке следующего. Текст названия требуется и при создании закладки на данный документ, с этой точки зрения его информативность также очень важна.

Уровни заголовков Заголовки различного уровня позволяют структурно разделить формально не ограниченный по длине текст на отдельные разделы и абзацы. Первый уровень заголовков (самый высокий) обозначается цифрой 1, следующий — 2, и т. д. Теги

Уровни заголовков

37

с меньшими номерами определяют заголовки более высокого уровня. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовок самого верхнего уровня имеет признак 1. Синтаксис заголовка первого уровня (H от англ. head — заголовок): Заголовок первого уровня

Заголовок любого уровня может быть представлен в общем случае так: Заголовок x-го уровня

Здесь x — цифра от 1 до 6, определяющая уровень заголовка. Атрибут ALIGN управляет горизонтальным выравниванием, принимая значения LEFT (влево), CENTER (по центру), RIGHT (вправо) или JUSTIFY (по ширине от левой границы до правой). На рис. 2.2 показано окно программы, содержащей заголовки, при просмотре в браузере (листинг 2.2).

Рис. 2.2. Веб-страница с заголовками разных уровней

Листинг 2.2. Пример создания веб-страницы с заголовками <TITLE> Заголовки Заголовок 1 - Транспортный протокол Заголовок 2 - Протокол маршрутизации Заголовок 3 - Протокол передачи файлов Заголовок 4 - Протокол передачи почты Заголовок 5 - Сетевой протокол Заголовок 6 - Протокол поддержки сетевого адреса

38 Урок 2. Текст Данный тег появился в HTML версии 2.0. Заголовки более высокого уровня отображаются шрифтом большего размера.

Шрифт Тег позволяет с помощью атрибутов управлять размером и цветом шрифта. Атрибут SIZE управляет размером шрифта. Шрифт может иметь размер от 1 до 7. Можно указать размер шрифта непосредственно цифрой или задать смещение относительно базового значения (по умолчанию — 3) в положительную или отрицательную сторону. Соответствие размера шрифта величине в пунктах иллюстрирует табл. 2.1. Таблица 2.1. Типичные размеры шрифтов и их величины в пунктах Размер шрифта 1 2 3 4 5 6 7

Типичная величина в пунктах 8 10 12 14 18 24 36

Размер шрифта можно изменить при помощи следующей команды:

Для изменения базового значения служит такая команда:

Пример использования шрифтов разного размера показан на рис. 2.3 (листинг 2.3).

Рис. 2.3. Веб-страница с буквами разного размера

Листинг 2.3. Пример создания веб-страницы, содержащей буквы разного размера <TITLE> Размер шрифта

Шрифт

39

П Е Т Е Р Б У Р Г

Данный тег появился в HTML версии 3.2, однако в настоящее время он не рекомендован к применению. Вместо него желательно использовать средства каскадных листов стилей (см. урок 17). Чтобы изменить цвет шрифта используется атрибут COLOR тега :

Цвет указывается в цветовой модели RGB соответствующими значениями цветовых составляющих в шестнадцатеричном формате. Например, белый цвет обозначается FFFFFF, черный — 000000, синий — 0000FF и т. п. Пример веб-страницы, содержащей текст разного цвета, показан на рис. 2.4 (листинг 2.4).

Рис. 2.4. Веб-страница с разноцветным текстом

Листинг 2.4. Пример создания веб-страницы с разноцветным текстом <TITLE> Цвет шрифта Красный

40 Урок 2. Текст Зеленый Синий

Тег определяет базовый (основной для всей страницы) размер шрифта, имеет открывающий дескриптор. SIZE — атрибут тега, который определяет базовый размер этого шрифта. SIZE меняется в пределах от 1 до 7. По умолчанию используется величина 3. Пример применения этого тега можно посмотреть на рис. 2.5, а код программы — в листинге 2.5.

Рис. 2.5. Веб-страница, содержащая тег

Листинг 2.5. Пример создания веб-страницы, содержащей тег <TITLE>Теги форматирования символов Логотип - элемент фирменного стиля,
оригинальное начертание наименования рекламодателя,
одна из форм торгового знака

Тег появился в версии HTML 3.2. Вместо данного тега рекомендуется использовать средства каскадных листов стилей (см. урок 17), а шрифт может быть изменен с помощью тега .

Абзацы и разрывы строк В HTML-документе невозможно разбить текст на абзацы, используя клавишу Enter. Нажатие этой клавиши улучшает внешний вид исходного текста, но не влияет на получаемое изображение. Для перехода на следующую строку следует воспользоваться тегом
, а для создания пустой строки — тегом
. Тег
позволяет разделить текст на абзацы. Если этого не сделать, документ будет выглядеть как один большой абзац. ALIGN — атрибут выравнивания тега
. Этот атрибут может иметь значения LEFT, CENTER, RIGHT, JUSTIFY, что позволяет выровнять абзац соответственно по

Абзацы и разрывы строк

41

левому краю, по центру, по правому краю или по ширине. Например, следующая запись выравнивает абзац по левому краю:

Данный тег появился в HTML версии 2.0, он не может содержать другие открывающие и закрывающие теги, то есть между тегами
и
может быть только текст и разрыв строки, но не другие теги. Тег
извещает браузер о разрыве строки. Дополнительный параметр CLEAR позволяет расширить возможности тега
, обеспечивая не просто перевод строки, а размещая следующую строку, начиная с левой (LEFT), правой (RIGHT), обеих (ALL) границ окна браузера, или обычным способом (NONE). Например, если рядом с текстом слева должен располагаться рисунок, то можно использовать тег
для смещения текста под рисунок. Данный тег появился в HTML версии 2.0. В настоящее время атрибут CLEAR не рекомендован к применению, вместо него желательно использовать средства каскадных листов стилей (см. урок 17). Тег (от англ. division — раздел) позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу
. Если закрывающий тег
опущен, то эффективно заменяет его, начиная новый абзац. Он может иметь атрибут ALIGN, который имеет значения LEFT, CENTER или RIGHT и указывает отступ. Каждый следующий раздел игнорирует значение ALIGN, заданное для предыдущего раздела. Синтаксис: Текст раздела

Пример использования этого тега можно посмотреть на рис. 2.6, а код программы — в листинге 2.6.


Листинг 2.6. Пример создания веб-страницы, содержащей тег <TITLE> Теги форматирования символов Аттитюд - социально-психологическая установка, внутренняя потребность человека к каким-либо действиям (например, к покупке рекламируемого товара)

42 Урок 2. Текст Афиша - старейшее средство наружной рекламы, выполненное на плотной бумаге или картоне Булл-Марк - реклама издательства, вкладываемая в книгу, журнал, каталог, в виде красочной закладки Марка - имя, термин, знак, символ, рисунок или их сочетание, идентифицирующее товары или услуги одного или нескольких производителей (продавцов) и отличающие их от товаров и услуг конкурентов

Так как данный тег появился в версии HTML 3.2 и используется в сочетании с каскадными листами стилей, он представляет собой мощное средство задания структуры документа.

Выравнивание Как уже упоминалось, атрибут ALIGN позволяет выровнять текст по левому или правому краю, по центру или по ширине страницы. По умолчанию текст, графика и элементы таблицы выравниваются по левому краю и не выравниваются по правому краю, то есть начало строк находится на одном уровне, а конец — на разных. Выравнивание по левому краю задается атрибутом ALIGN=LEFT, выравнивание по правому краю — атрибутом ALIGN=RIGHT. Центрирование элементов документа можно производить разными способами, например с помощью тега

Вы можете также центрировать все элементы документа в окне браузера. Для этого можно использовать тег . Все элементы между тегами и будут находиться в центре окна. Центрирование можно производить и в абзаце:

Пример веб-страницы, содержащей текст, выровненный различными способами, показан на рис. 2.7 (листинг 2.7).

Рис. 2.7. Веб-страница с текстом, выровненным различными способами

Предварительное форматирование

43

Листинг 2.7. Пример выравнивания текста различными способами <TITLE> Центрирование и выравнивание
Атрибут ALIGN позволяет выровнять текст по левому или правому краю,
по центру или по ширине

По умолчанию текст, графика и элементы таблицы выравниваются по левому краю
и не выравнивается по правому краю, то есть начало строк находится на одном уровне, а конец - на разных.
Выравнивание по левому краю задается атрибутом ALIGN=LEFT. Выравнивание по правому краю задается
атрибутом ALIGN=RIGHT

Центрирование элементов документа можно производить разными способами,
например с помощью тега ALIGN=CENTER

Предварительное форматирование Тег позволяет представлять на экране текст со специфическим форматированием. Предварительно отформатированный текст заканчивается завершающим тегом . Внутри предварительно отформатированного текста разрешается использовать: символы перевода строки; символы табуляции (сдвиг на 8 символов вправо); непропорциональный шрифт, устанавливаемый браузером. Форматирование абзаца, заданное другими тегами, такими как и , будет игнорироваться браузером при помещении их между тегами и .

Рис. 2.8. Веб-страница с текстом, имеющим специфическое форматирование

44 Урок 2. Текст Пример веб-страницы, содержащей текст со специфическим форматированием, показан на рис. 2.8 (листинг 2.8). Листинг 2.8. Пример специфического форматирования текста <TITLE> Специфическое форматирование Тег предварительного форматирования PRE позволяет представлять текст со специфическим
форматированием на экране. Предварительно отформатированный текст заканчивается
завершающим тегом /PRE. Внутри предварительно отформатированного текста разрешается
использовать: · символы перевода строки · символы табуляции (сдвиг на 8 символов вправо) · непропорциональный шрифт, устанавливаемый браузером

Данный тег появился в HTML версии 2.0. В заранее отформатированный текст нежелательно включать символы табуляции, поскольку при этом может нарушиться выравнивание. Пример, который можно посмотреть на рис. 2.9, а код программы в листинге 2.9, содержит текст разной высоты и тег .

Рис. 2.9. Веб-страница с текстом разной высоты

Листинг 2.9. Пример создания веб-страницы, содержащей текст разной высоты <TITLE>Размер шрифта Размер шрифта изменяется в пунктах 1пункт равен 1/72 дюйма 1пункт равен 0,353 мм текст n - число пунктов,на которое необходимо увеличить или уменьшить размер шрифта

Задание начертания

45

Теги PRE - теги отформатированного текста

Задание начертания Для выделения текстовой информации в документах можно использовать различное начертание. Большинством браузеров поддерживаются полужирное и курсивное начертание, моноширинный шрифт, большой и маленький шрифты, а также подстрочный и надстрочный индексы. Эти и подобные им варианты начертания задаются следующими тегами: Этот текст жирный Этот текст наклонный Этот текст подчеркнутый Этот текст с моноширинным шрифтом Этот текст большой Этот текст <SMALL> маленький Этот текст <STRONG> увеличенный Этот текст <STRIKE> перечеркнутый Этот текст <SUB> подстрочный Этот текст <SUP> надстрочный

Результат применения этих тегов показан на рис. 2.10 (листинг 2.10).

Рис. 2.10. Веб-страница с текстом разного начертания

Теги , , , <STRONG> появились в HTML версии 2.0, теги , , <SMALL>, <STRIKE>, <SUB>, <SUP> — в HTML версии 3.2. Хотя пользоваться этими тегами не запрещено, консорциум W3C (World Wide Web Consortium) рекомендует применять вместо них средства каскадных листов стилей (см. урок 17). Листинг 2.10. Пример создания веб-страницы, содержащей текст разного начертания <TITLE> Стили шрифта

46 Урок 2. Текст Этот текст жирный
Этот текст наклонный
Этот текст подчеркнутый
Этот текст с непропорциональным шрифтом
Этот текст большой
Этот текст <SMALL> маленький
Этот текст <STRONG> увеличенный
Этот текст <STRIKE> перечеркнутый
Этот текст <SUB> подстрочный
Этот текст <SUP> надстрочный

Тег используется с целью дополнительного выделения переменных в коде. Синтаксис: переменная



Листинг 2.11. Пример создания веб-страницы, содержащей тег <TITLE>Теги форматирования Доджер - рекламный проспект

Тег появился в версии HTML 2.0. Он определяет переменную или параметр программы и обычно отображается курсивом. Тег <SPAN> позволяет выделить фрагмент текста для его последующего форматирования, однако в отличие от тега не начинает новый абзац. Тег <SPAN> создает структуру текстового уровня, определяемую пользователем. Пример использования этого тега можно посмотреть на рис. 2.12, а код программы — в листинге 2.12. Данный тег появился в HTML 4.0. Так как он используется в сочетании с каскадными листами стилей (см. урок 17), в данном примере его преимущества не слишком заметны.

Задание начертания

47

Листинг 2.12. Пример создания веб-страницы, содержащей тег <SPAN> <TITLE>Теги форматирования символов Медиапланирование -<SPAN> составление оптимального плана размещения рекламы в СМИ на основе маркетинговых и медиаисследований. Паблисити - <SPAN>неоплаченная информация, стимулирующая спрос на товар или деловую кампанию посредством распространения о них коммерческих и (или) социальных сведений в средствах коммуникации <SPAN>Характерные признаки: достоверность (в сравнении с рекламными сообщениями); широкий охват аудитории (новинка, сенсация, напоминание); броскость (эффективная и многожанровая форма).

Рис. 2.12. Веб-страница, содержащая тег <SPAN>

Тег <S> выводит текст зачеркнутым. Все, находящееся между тегами <S> и , будет написано перечеркнутым шрифтом. Это встроенный парный тег. Обязательных атрибутов не имеет. Пример использования тега можно посмотреть на рис. 2.13, а код программы — в листинге 2.13.

Рис. 2.13. Веб-страница, содержащая тег <S>

Листинг 2.13. Пример создания веб-страницы, содержащей тег <S> <TITLE>Перечеркнутый текст <S> Хот-шоп-творческое рекламное ателье, выполняющее отдельные функции дизайна по созданию элементов фирменного стиля, разработке оригинал-макетов печатной рекламы.

48 Урок 2. Текст Тег <S> появился в версии HTML 4.0. Вместо данного тега консорциум W3C рекомендует использовать средства каскадных листов стилей (см. урок 17).

Неразрывные строки Тег (от англ. no break — без разрыва) дает команду браузеру отображать весь текст в одной строке, не разрывая ее. Этим тегом размечается текст, который необходимо уместить на одной строке, причем этот текст ни при каких обстоятельствах не должен быть разбит на несколько строк. Таким образом, тег противоположен по функциям тегу
. Если строку текста разместить между тегами и , то браузер не начнет новую строку, даже если она выйдет за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно. Пример такой строки показан на рис. 2.14 (листинг 2.14).

Рис. 2.14. Веб-страница с неразрывной строкой

Листинг 2.14. Пример создания веб-страницы, содержащей текст в одной строке без разрыва <TITLE> Строки без разрыва Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было

Если все же необходимо разбить строку на две, то в нужное место вставляется тег <WBR>, хотя в последнее время он не рекомендуется к использованию. Тег <WBR> задает «мягкий разрыв строки» внутри тега . С помощью тега <WBR> в данном месте текста при необходимости браузер выполняет переход на новую строку. Пример использования этого тега можно посмотреть на рис. 2.15, а код программы — в листинге 2.15.

Вставка цитат

49

Листинг 2.15. Пример создания веб-страницы, содержащей теги <WBR> и <TITLE>Теги форматирования символов Ключевые понятия - <WBR> Классифицированная реклама<WBR> Профессиональный риск<WBR> Персонализация рекламы<WBR> Фактор интеграции<WBR> Бесприбыльные связи<WBR>

Рис. 2.15. Веб-страница, содержащая теги <WBR> и

Вставка цитат Тег определяет текст как цитату большого размера и отображает его с отступами от левого и правого краев. Этот тег позволяет расположить текст компактно в центре страницы. При использовании этого тега несколько раз, текст все больше сжимается к центру. Тег имеет атрибут CITE=»URI», где URI задает цитируемый документ или сообщение. URI (Uniform Resource Identifier) — это унифицированный идентификатор ресурса, в состав которого входит URL. Текст, обозначенный тегом , выводится с отступом от левого края документа на 8 пробелов. Пример использования тега показан на рис. 2.16 (листинг 2.16).

Рис. 2.16. Фрагмент веб-страницы с длинной цитатой

50 Урок 2. Текст Листинг 2.16. Пример создания веб-страницы, содержащей цитату <TITLE> Цитата Тег BLOCKQUOTE добавляет поля слева и справа от текста.
Этот тег позволяет расположить текст компактно и в центре страницы.
При использовании этого тега несколько раз текст все больше сжимается к центру.
Данный тег предназначен для обозначения в документе цитаты из другого источника.
Текст, помеченный тегом, отступает от левого края документа на 8 пробелов

Данный тег появился в HTML версии 2.0. Он обеспечивает вставку более длинных цитат по сравнению с тегом . Тег оформляет текст в виде краткой цитаты. Тег имеет атрибут CITE=»URI», где URI задает цитируемый документ или сообщение. Тег предназначен для отображения более коротких цитат по сравнению с тегом . Обычно в состав цитаты не входят символы разрыва строки, и цитата считается элементом текстового уровня. Символы кавычек отображает браузер. Пример использования тега показан на рис. 2.17 (листинг 2.17).

Рис. 2.17. Фрагмент веб-страницы с короткой цитатой

Листинг 2.17. Пример создания веб-страницы, содержащей тег <TITLE>Цитата ”Постер” - наружная реклама, плакат

Комментарии Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария:

Акронимы

51

СЗИП СПГУТД

Не следует забывать, что знак равенства (=) в программе не должен быть окружен пробелами.

Тег появился в HTML версии 4.0.


Определения Если название поместить между тегами , то это название отобразится курсивом. Термины можно задать еще и тегом . Пример использования этих тегов показан на рис. 2.19 (листинг 2.19). Листинг 2.19. Пример создания веб-страницы, содержащей определения <TITLE> Определение “Переулок Джамбула, дом 13” Это адрес Северо-Западного института печати
Санкт-Петербургского государственного университета технологии и дизайна
PR - деньги из воздуха В России PR пока недооценивается.
Его репутация не слишком высока, а само слово PR превратилось в “пиар” и вызывает негативные
ассоциации. Ежегодный оборот на рынке заказных публикаций оценивается в 20$ млн.
Теперь эти деньги с незаконного рынка заказухи перетекают в легальный рекламный рынок
- стало больше статей под шапкой “на правах рекламы”.

Рис. 2.19. Фрагмент веб-страницы с определениями

Тег появился в HTML версии 2.0. Он определяет цитату или ссылку на источник, содержимое данного тега обычно воспроизводится курсивом.

Шрифтовое выделение Тег <EM> используется с целью выделения особым шрифтом (обычно курсивом) слова или текста. Синтаксис: <EM> Текст


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

53

Листинг 2.20. Пример создания веб-страницы со специфическим форматированием <TITLE>Теги форматирования Имидж -<EM> образ, (знаковый символ фоторекламного успеха и рекламного бизнеса, устойчивый престиж искусства фоторекламы, полномасштабная профессиональная компетентность команды фоторекламистов и их лидера, философия индивидуальной позиции фоторекламного творчества), исключительный и качественный признак в ряду иных подобий, впечатление, которое свойственно данному товару/услуге, рекламному агентству, мастеру-фоторекламисту, фоторекламной акции, рекламной корпорации Интернет-услуг.

Рис. 2.20. Веб-страница, содержащая тег <EM>

Тег <EM> появился в версии HTML 2.0, чаще всего содержимое данного тега выводится курсивом.

Использование моноширинных шрифтов Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов , и <SAMP>. Результаты применения этих тегов обычно идентичны. Тег используется с целью дополнительного выделения фрагментов программного кода моноширинным шрифтом. Данный элемент предпочтительнее, чем элемент (см. раздел «Задание начертания»). Синтаксис: Код

Пример использования этого тега можно посмотреть на рис. 2.21, а код программы — в листинге 2.21. Листинг 2.21. Пример создания веб-страницы, содержащей тег <TITLE>Теги форматирования Промоушн - продвижение продаж - комплекс различных мер стимулирования покупки товаров. Промоушн включает в себя такие методы, как купонирование, продажи со скидкой, лотереи, викторины, представление бесплатных образцов.



Тег появился в версии HTML 2.0; чаще всего содержимое данного тега выводится моноширинным шрифтом. Тег используется с целью выделения диалога пользователя с компьютером. Синтаксис: Ввод с клавиатуры

Пример применения этого тега можно посмотреть на рис. 2.22, а код программы — в листинге 2.22.


Листинг 2.22. Пример создания веб-страницы, содержащей тег <TITLE>Теги форматирования Имидж - модификация образа личности, фирмы, товара путем сгущения красок, приукрашивания или очернения. Теория создания имиджей именуется имиджелогией, или иконикой.

Тег появился в версии HTML 2.0. Чаще всего содержимое данного тега выводится моноширинным шрифтом. Тег <SAMP> используется с целью выделения диалога пользователя с компьютером. Синтаксис:

Добавление текста с другой страницы

55

<SAMP> Системное сообщение компьютера

Пример использования этого тега можно посмотреть на рис. 2.23, а код программы — в листинге 2.23. Листинг 2.23. Пример создания веб-страницы, содержащей тег <SAMP> <TITLE>Теги форматирования символов Корпоративная реклама – <SAMP>реклама, создающая потребность не в конкретной марке товара, а в полном товарном ассортименте.

Рис. 2.23. Веб-страница, содержащая тег <SAMP>

Тег <SAMP> появился в версии HTML 2.0. Обычно содержимое данного тега отображается моноширинным шрифтом.

Добавление текста с другой страницы Тег позволяет вывести на странице текст с другой страницы, указав ее адрес. Определяет и отображает текст, который был включен в документ по сравнению с его предыдущей версией. Визуально вставленный текст выделяется подчеркиванием, например: (доступный фрагмент текста)

Для вывода даты предусмотрен атрибут DATETIME. Пример можно посмотреть на рис. 2.24, а код программы — в листинге 2.24. Листинг 2.24. Пример создания веб-страницы, содержащей тег <TITLE>Пример вставки ДОСТУПНЫЙ ФРАГМЕНТ

Данный тег появился в версии HTML 4.0. Он может быть элементом блочного либо текстового уровня. Изменение вложенного блокового содержания должно выполняться на нижнем уровне.



Расстановка пробелов Если набрать текст в Блокноте и расставить в нем множество пробелов, то браузер проигнорирует эти пробелы и сократит их до минимума, а если воспользоваться тегом , который выводит блок текста моноширинным шрифтом, то текст отразится таким, как он есть, со всеми пробелами и т. д. Пример текста с множеством пробелов, окруженного тегами и , можно посмотреть на рис. 2.25, а код программы — в листинге 2.25.

Рис. 2.25. Веб-страница, содержащая текст и теги

Листинг 2.25. Пример создания веб-страницы, содержащей текст и теги <TITLE>Цитата Реклама - одна из форм маркетинговых коммуникаций, Оплаченная рекламодателем, имеющая неличный характер, распространяемая через СМИ с целью оказать воздействие на целевую аудиторию. Существуют следующие виды рекламы: товарная, корпоративная, социальная, политическая.

Подведем итоги

57

Подведем итоги В этом уроке рассматриваются основные теги, предназначенные для работы с текстом. Тег предназначен для создания заголовков. Теги ,
, , , , , <STRONG>, , , <SMALL>, <STRIKE>, <SUB>, <SUP>, , , , <EM>, , , , <SAMP>, <WBR>, , , <SPAN>, , , , <S> позволяют форматировать текст, изменять его цвет, красиво располагать на странице. Для разрыва строк служат теги
и . Тег используется для создания всплывающих подсказок.

Урок Урок3. Графика Одна из наиболее привлекательных черт �� WWW�� — возможность включения ссылок на графические файлы в HTML-документ. Графика — лучшее украшение веб-узла. Под графикой подразумевают значки, рисунки, фотографии и карты изображений, занимающие часть окна браузера. При размещении графики на веб-странице необходимо следить за тем, чтобы размер графических файлов был как можно меньше. Хотя в принципе размеры графических файлов в байтах могут быть неограниченными, следует помнить, что передача большого файла может занять очень много времени, особенно при низкой пропускной способности линий. Если тот, кто смотрит вашу веб-страницу, платит деньги за время нахождения в Интернете, вряд ли он захочет смотреть ваши следующие страницы, учитывая, что первая страница загружается очень долго. В этом уроке будут рассмотрены приемы работы с графикой.

Размещение графики на веб-странице

59

Размещение графики на веб-странице Для вставки графики в веб-страницу используется тег . Графика позволяет значительно улучшить внешний вид и функциональность документов. Тег (от англ. image — изображение) появился в HTML версии 2.0. Он имеет атрибуты SRC, ALT, LONGDESC, HEIGHT, WIDTH, USEMAP, ISMAP, ALIGN, BORDER, HSPACE, VSPACE. Пример: .

Атрибут SRC. Атрибут SRC (от англ. source — источник) определяет месторасположение изображения, включаемого в состав документа. URL — обязательный параметр, который указывает браузеру, где находится рисунок. Рисунок должен храниться в графическом формате, например в формате GIF или JPG. Если графический файл находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:

Если графический файл находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя этого файла, например: .

Если графический файл находится не на том сервере, на котором находится содержащий его HTML-документ, необходимо указать полный адрес этого файла, например: .

Атрибут ALT. Необязательный атрибут ALT задает альтернативный текст, который выводится браузером, пока идет загрузка изображения (или браузером, не поддерживающим отображение графики). Обычно это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если этот атрибут не задан, на месте изображения большинство браузеров выводят значок, щелкнув на котором, пользователь сможет увидеть изображение. Атрибут ALT рекомендуется указывать, если ваши пользователи применяют браузер, не поддерживающий графический режим, например Lunix. Атрибут LONGDESC. Необязательный атрибут LONGDESC задает ссылку на удаленный ресурс. Атрибут HEIGTH. Необязательный атрибут HEIGTH определяет высоту рисунка в пикселах. Если данный параметр не указан, используется оригинальная высота рисунка. Этот параметр позволяет сжимать или растягивать изображения по вертикали, что дает возможность точнее контролировать внешний вид документа. Однако некоторые браузеры не поддерживают данный параметр. Иногда экранное разрешение на разных компьютерах может быть разным, поэтому при задании абсолютной величины графического объекта следует быть внимательным. Атрибут WIDTH. Необязательный атрибут, используется для указания ширины рисунка в пикселах.

60 Урок 3. Графика Атрибут ALIGN. Необязательный атрибут, используется для точного позиционирования объектов на экране. Доступные значения: top — верхний край объекта выравнивается по верхнему краю строки; middle — центр объекта выравнивается по базовой линии строки; bottom — нижний край объекта выравнивается по базовой линии строки; left — объект выравнивается по левому краю, при этом возможно обтекание объекта текстом; right — объект выравнивается по правому краю, при этом возможно обтекание объекта текстом. Если данный параметр не указан, большинство браузеров располагает изображение в левой части экрана, а текст — справа от него. Атрибут BORDER. Атрибут BORDER задает толщину обрамления для изображения. Атрибут VSPACE. Атрибут VSPACE позволяет задать размер в пикселах пустого пространства над и под изображением, чтобы текст не «наезжал» на изображение. Атрибут HSPACE. Атрибут HSPACE позволяет задать размер в пикселах пустого пространства слева и справа от изображения, чтобы текст не «наезжал» на изображение.

Форматы графических файлов Большинство форматов файлов в компьютерной графике позволяет хранить информацию об изображении как о наборе точек. Точно так же (в виде набора точек) изображения выводятся на экран. Обычно в Интернете используются два растровых формата — JPEG и GIF. Кроме того, в Интернете довольно много изображений, имеющих форматы BMP и PCX. Специалисты считают, что довольно большие перспективы есть у формата PNG — самого современного формата переносимой сетевой графики.

Формат GIF Формат GIF (Graphic Interchange Format — формат обмена графическими данными) служит для записи и хранения растровых графических изображений. Этот формат был разработан корпорацией Compuserve с использованием технологии Unisys. Формат GIF применяется для хранения 256-цветных изображений (или изображений с меньшим количеством цветов), сжатых по методу Лемпела—Зива (LZW). Тот же метод сжатия характерен для архиваторов файлов. Формат GIF дольше других представлен в Интернете и поддерживается разными графическими редакторами. В нем используются индексированные цвета. Версия GIF89a этого формата обеспечивает возможность чересстрочной развертки, что позволяет постепенно повышать качество принятого через канал связи изображения. Это самый распространенный формат изображений в Интернете.

Форматы графических файлов

61

Изображения в формате GIF хранятся в файлах с расширением .gif. К достоинствам GIF-изображений относится то, что вид изображения не зависит от браузера и платформы. Лучше всего отображаются чертежи, рисунки, изображения с небольшим количеством однородных цветов, прозрачные изображения и анимационные последовательности. В GIF-изображениях используется алгоритм сжатия без потери информации.

Формат JPEG Применяющийся в формате JPEG (Joint Photographic Expert Group — объединенная группа экспертов в области фотографии) алгоритм обработки изображений разработан группой экспертов как средство сжатия изображений с палитрой 24 бита на пиксел, что обеспечивает отображение 16,7 миллиона цветов. JPEG — один из самых мощных алгоритмов. Практически он является стандартом де-факто для полноцветных изображений. Формат JPEG был создан для того, чтобы избавиться от недостатков формата GIF. Алгоритм оперирует областями 8×8 пикселов, в которых яркость и цвет плавно меняются. Сжатие в формате JPEG осуществляется за счет того, что в реальных изображениях, в частности в фотографиях, цвет обычно меняется достаточно плавно. Обеспечивается высокий коэффициент сжатия, значение которого достигает 100 и зависит от допустимого уровня потерь изобразительной информации. Формат широко используется в HTML-документах и для передачи графики по сети. Сохраняет параметры графики в цветовой модели RGB. Изображения в формате JPEG хранятся в файлах с расширением .jpg. В формате JPEG используется алгоритмы сжатия с потерей информации. При сжатии из изображения исключаются данные, которые считаются несущественными. При этом есть риск получить нечеткое, размытое изображение с искажением деталей.

Формат PNG Последнее время получили распространение файлы в формате PNG (Portable Network Graphics — переносимая сетевая графика). Само название формата говорит о его назначении — использовании при передаче изображений в сетях. Формат поддерживает полноцветные RGB-изображения и индексированные изображения. Допускает наличие дополнительного канала для хранения маски обрезки. Имеет эффективный алгоритм сжатия без потери информации.

Формат BMP Первым графическим форматом для IBM-совместимых компьютеров, нашедшим широкое применение, был формат BMP (Bit Map — битовая карта). Можно сказать, что с него все началось. В формате BMP первоначально использовалось простейшее кодирование — по пикселам (самое неэкономное). Пикселы обходились последовательно по строкам, начиная с нижнего левого угла графического изображения. Файлы именно этого формата поддерживались первыми версиями

62 Урок 3. Графика оболочки Windows. В них использовались только индексированные цвета в количестве 256, то есть один пиксел представлялся одним байтом. В дальнейшем формат стал применяться и для кодирования полноцветных изображений. Это стандартный формат растровой графики. Поскольку BMP-файлы представляют собой «родной» формат графики для Microsoft Windows, подобных изображений в Интернете достаточно много.

Формат PCX Формат PCX использует только индексированные палитры. Он был разработан фирмой Z-soft специально для пакета PaintBrush, а в дальнейшем получил более широкое распространение. В нем предусмотрено сжатие, обеспечивающее большую компактность по сравнению с форматом BMP. Тем не менее практически он пригоден только для простых изображений или изображений с индексированными цветами.

Пикселы и разрешение В Интернете для передачи изображений в основном используется растровая графика. Растровая графика — это, во-первых, графика, представляемая в компьютере в виде множества точек (пикселов), во-вторых, файл определенного формата. Для растровой графики важной характеристикой является разрешение изображения. Одна и та же картинка может быть представлена с лучшим или худшим качеством в соответствии с количеством точек на единицу длины. Разрешение — количество точек на единицу измерения: dpi (dots per inch) — количество точек на дюйм; ppi (points/pixels per inch) — количество пикселов на дюйм; spi (samples per inch) — оптическое, первоначальное разрешение сканера, означающее количество проб на дюйм, то есть число «просмотров» сканером изображения во время сканирования. dpi — наиболее часто используемый термин, который относится только к маленьким точкам, создаваемым выходным устройством. Точки выходного устройства ничего общего не имеют с разрешением изображения, они связаны с минимальным воспроизводимым принтером размером точки. Разрешение иллюстрации обычно измеряется в dpi. Чем больше разрешение, тем более качественным является изображение, но и тем больший размер имеет файл, в котором изображение сохранятся. Различают разрешение изображения, разрешение экрана и разрешение принтера. Мониторы, выпускаемые различными фирмами, как правило, имеют стандартные разрешения: 640×470, 700×600, 1024×768, 1270×1024, 1600×1270, 1920×1600 точек. Расстояние между люминофорами хорошего монитора составляет 0,2–0,25 мм.

Примеры размещения графики на веб-странице

63

Конечно, для качественного дизайна требуется монитор с большим разрешением. Иногда дизайнер может редактировать изображение попиксельно. Разрешающая способность экрана зависит от монитора и видеоадаптера компьютера. Статические растровые изображения представляют собой двухмерный массив чисел. Элементы этого массива называют пикселами (от англ. pixel — picture element, или элемент изображения). Пиксел — минимальный адресуемый элемент двухмерного растрового изображения; одна точка изображения.

Примеры размещения графики . на веб-странице Прежде чем размещать изображение на веб-странице, проведем эксперимент. Возьмем любительскую фотографию высотой 11 см и шириной 13 см. Как она будет выглядеть на экране? Если мы отсканируем фотографию в трех вариантах, в первом выберем цветной режим с разрешением 300 dpi, во втором — чернобелый режим с разрешением 300 dpi, в третьем — цветной режим с разрешением 72 dpi, то в первых двух вариантах отсканированная фотография будет иметь размер 1304×1479 пикселов, а в третьем варианте — 313×355 пикселов.

Рис. 3.1. Купола на веб-странице

64 Урок 3. Графика Поскольку размеры фотографии в пикселах в первых двух вариантах оказались больше размера экрана в пикселах (размер, например, моего экрана составляет 768×1024 пикселов), при размещении фотографии на веб-странице для ее просмотра потребуются полосы прокрутки. В третьем варианте отсканированная фотография занимает только часть экрана. Таким образом, для изображений, распространяемых через Интернет, обычно устанавливается разрешение 72 dpi, а разрешение в 300 dpi характерно больше для печатных изображений. На рис. 3.1 показан пример размещения на веб-странице произвольного изображения (отсканированной фотографии), соответствующий код приведен в листинге 3.1. Листинг 3.1. Пример создания веб-страницы с изображением церкви РИСУНОК

В этом примере при размещении изображения на странице мы не касались вопросов его размеров и положения на странице. На самом деле эти вопросы необходимо учитывать. Размеры изображения можно уточнить и при необходимости изменить в программе Adobe Photoshop.

Рис. 3.2. Изображение ромашки на веб-странице

Примеры размещения графики на веб-странице

65

На рис. 3.2 показан пример размещения изображения шириной 198 и высотой 155 пикселов (листинг 3.2). Хотя листинги 3.1 и 3.2 практически совпадают, изображения имеют разные размеры в пикселах и поэтому занимают разную площадь. Листинг 3.2. Пример создания веб-страницы с изображением ромашки РИСУНОК

По умолчанию рисунок разместился в левом верхнем углу. На рис. 3.3 показан еще один пример размещения на веб-странице изображения, но на этот раз в коде заданы значения атрибутов ширины и высоты (ширина 281, высота 300 пикселов), а также указана подпись (листинг 3.3).

Рис. 3.3. Веб-страница с изображением и подписью

66 Урок 3. Графика Листинг 3.3. Размещение на веб-странице изображения и подписи Рисунок Атланты на Фонтанке
Россия * Санкт-Петербург*Еще одни атланты на Фонтанке
Угол Невского проспекта и Набережной реки Фонтанки

На рис. 3.4 показан пример размещения четырех изображений шириной 92 и высотой 114 пикселов каждое в таблице (листинг 3.4). Подробно принципы работы с таблицами будут рассмотрены далее.

Рис. 3.4. Четыре рисунка в таблице

Выравнивание изображений

67

Листинг 3.4. Пример создания четырех рисунков в таблице ЧЕТЫРЕ РИСУНКА В ТАБЛИЦЕ

Выравнивание изображений С помощью атрибута ALIGN можно задать способ выравнивания изображения на веб-странице. На рис. 3.5 первый рисунок выровнен вправо, второй — влево (листинг 3.5).

Рис. 3.5. Пример выравнивания изображений на веб-странице

68 Урок 3. Графика Листинг 3.5. Пример выравнивания изображений на веб-странице ОБТЕКАНИЕ ГРАФИКИ ТЕКСТОМ Обтекание текстом объектов Activemovie stream - это дополнительный пакет для работы с internet explorer.
C помощью этой программы можно проигрывать файлы в формате asf в таких не слишком быстрых сетях, как интернет.
за счет инкапсуляции в active movie stream можно эффективно синхронизировать
и хранить на различных серверах файлы в популярных форматах мультимедиа,
таких как mpeg, avi, wav и apple Quick Time
необходимо ввести в веб-страницу звук, видео и интерактивность. OLE - объектноориентированная технология создания программных объектов

Необходимо ввести в веб-страницу звук, видео и интерактивность. OLE - объектноориентированная технология создания программных объектов

Карты изображений Карты изображений (image maps) позволяют пользователю связывать ссылки на другие документы с отдельными частями изображений. Щелкая мышью на частях изображения, так называемых активных областях (hot spots), пользователь может выполнять те или иные действия, переходить к другим документам и т. п. Если пользователь позиционирует указатель мыши на изображении, которое с помощью атрибута ISMAP в теге определено как карта изображения, и щелкает левой кнопкой мыши, то координаты точки щелчка передаются на веб-сервер. При получении этих координат сервер ищет на карте активную область, содержащую эти координаты. Если такая область существует, то заданный URL-адрес активируется, и браузер пользователя переходит по этому адресу на новую страницу. Описанный вариант функционирования характерен для случая, когда карта изображения размещается на сервере, однако она также может размещаться на клиентском компьютере. В этом случае браузер самостоятельно выясняет URL-адрес нужной страницы и передает серверу не координаты точки щелчка, а этот адрес. Второй случай предпочтительнее, так как на сервере не приходится запускать программу (сценарий), выполняющую просмотр изображения с целью определения активной области. По соображениям безопасности многие системные админи-

Карты изображений

69

страторы не разрешают посторонним работать на сервере и записывать сценарии в каталоги. К сожалению, с картами изображений, функционирующими на клиентской машине, могут работать не все браузеры.

Тег <MAP> Тег <MAP> применяется для представления графического изображения в виде карты с активными областями. Активные области можно идентифицировать по всплывающей подсказке, которая появляется при наведении на такую область указателя мыши. Данный тег появился в версии HTML 3.2. Контейнер, состоящий из тегов <MAP> и , является блоком описателей активных областей. Тег <MAP> может быть связан с тегом или тегом с помощью атрибута USEMAP. Чтобы включить поддержку карты изображения, необходимо ввести атрибут USEMAP в тег IMG:

Атрибут USEMAP указывает, в каком месте находится карта изображения. Карта изображения определяет, какому участку изображения какой URL-адрес соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе. Размещение карты в другом документе позволяет объединить вместе изображения из разных документов, но добавляет еще одну итерацию в механизм функционирования карты, поскольку за первую итерацию выясняется местонахождение карты, а за вторую выполнение действия, предписанного URL-адресом данного участка изображения. Параметр map_name указывает имя карты для изображения, а предшествующий ему URL-адрес — местонахождение карты. Если параметр URL отсутствует, карта с указанным именем ищется в текущем документе. Пример синтаксиса определения карты изображения: <map name="map_name"> <area [shape=" shape "] coords="x,y,..." [href=" reference "] [nohref]>.

Атрибут NAME задает имя карты, например: NAME="КАРТА" — имя карты.

Тег Тег определяет активную область в составе карты изображений на стороне клиента (это описатель активной области). Тег не имеет закрывающего тега. Синтаксис: <map name="имя"><area атрибуты>

Для каждой активной области карты имеется свой тег . Атрибут SHAPE. Атрибут SHAPE задает форму активной области на карте и ее координаты, он может принимать значения: rect — прямоугольная область;

70 Урок 3. Графика circle — область в форме круга; poly — область в форме многоугольника; default — вся область. Атрибуты, определяющие форму области на карте, являются обязательными. Атрибут COORDS. Атрибут COORDS определяет позицию области на экране. Синтаксис: coords="координаты"

Набор координат соответствует форме области. Координаты задаются в единицах длины и разделяются запятыми: для круга необходимо задать координаты центра и радиус в пикселах (координаты центра отсчитываются от левого края и верхнего края рисунка); для прямоугольной области задаются координаты всех четырех углов; для многоугольной области задаются координаты каждого из углов много угольника, который точно или приблизительно соответствует форме области. Атрибут HREF. Атрибут HREF задает URL-адрес для ссылки. Синтаксис: <area href="url">

Атрибут ALT. Атрибут ALT задает альтернативный текст для браузеров, которые не поддерживают тег . Синтаксис: <area alt = "альтернативный текст">

Атрибут TITLE. Атрибут TITLE задает текст подсказки, всплывающей при наведении указателя мыши на активную область. Синтаксис: <area title = "текст подсказки">

Атрибут TARGET. Атрибут TARGET идентифицирует фрейм, в котором должен быть открыт целевой ресурс. Синтаксис: target="имя|_blank|_self|_parent|_top"

Параметры: имя — документ открывается во фрейме с именем, задаваемым с помощью атрибута NAME дескриптора (имя фрейма должно начинаться с буквы); _blank — документ открывается в новом неименованном окне; _self — документ открывается в том же окне, в котором содержится текущий документ; _parent — документ открывается во фрейме, родительском по отношению к фрейму, содержащему текущий документ (если родительского фрейма не существует, документ открывается в текущем фрейме); _top — документ открывается в текущем окне и занимает все окно. Атрибут NOHREF. Атрибут NOHREF указывает на то, что с областью не связана ссылка. Атрибут TABINDEX. Атрибут TABINDEX определяет порядок, в котором активные области получают фокус после нажатия клавиши Tab. Синтаксис:


71

tabindex="число"

Атрибут ACCESSKEY. Атрибут ACCESSKEY определяет комбинацию клавиш, используемую для доступа к активной области (перехода по URL). Синтаксис: accesskey="символ"

Атрибут ONFOCUS. Атрибут ONFOCUS определяет обработчик события, возникающего при получении активной областью фокуса ввода (фокус ввода может быть получен как с помощью мыши, так и в результате перебора после нажатия клавиши Tab). Синтаксис: onfocus="сценарий"

Атрибут ONBLUR. Атрибут ONBLUR определяет обработчик события, возникающего при потере активной областью фокуса ввода (фокус ввода может быть потерян как в результате выбора другого элемента с помощью мыши, так и в результате перебора после нажатия клавиши Tab). Синтаксис: onblur="сценарий"

Атрибут USEMAP. Необязательный атрибут USEMAP связывает с данным элементом карту изображения. Синтаксис: usemap="URL"

Этот атрибут разрешает использовать изображения, отдельные части которого связаны с картами и объединяются тегом <MAP>. В этом случае щелчок на карте обрабатывает браузер:

Атрибут ISMAP. Необязательный атрибут, используется для определения карты изображения на стороне сервера. Синтаксис: ismap="длина"

Тег должен быть включен в тег . Атрибут ISMAP сообщает браузеру, что данное изображение дает пользователю возможность выполнять какиелибо действия, щелкая мышью на активных областях. Этот атрибут разрешает использовать изображения, отдельные части которого связаны со ссылками и позволяют выполнять переходы. Такие изображения применяются совместно с тегом . В этом случае реакцию на щелчок отрабатывает сервер:

Примеры карт изображений В качестве примера карты изображения рассмотрим семейную фотографию. При наведении указателя мыши на каждого члена семьи появляется соответствующая всплывающая подсказка и возможен переход на другую веб-страницу с более подробными данными о нем. Код карты представлен в листинге 3.6, а на рис. 3.6 показаны варианты карты изображения с активными областями в виде круга, прямоугольника и многоугольника. Под изображением находится поле, в котором появляется название области при наведении на нее указателя мыши. Изображение, которое выбрано для примера, имеет размер 400×300 пикселов.

72 Урок 3. Графика

Рис. 3.6. Пример карты изображения Листинг 3.6. Пример создания карты изображения с активными областями в виде круга,

прямоугольника, многоугольника

ФОТОГРАФИЯ-КАРТА <map name=map> <area onmouseover="document.where.who.value='Папа'" shape=circle coords=70,70,70 href="father.htm"> <area onmouseover="document.where.who.value='Сынок'" shape=poly coords=130,50,250,50,270,156,260,196,220,290,140,141 href="son.htm">


73

<area onmouseover="document.where.who.value='Дочка'" shape=rect coords=59,125,170,220 href="daughter.htm"> <area onmouseover="document.where.who.value='Мама'" shape=circle coords=310,80,70 href="mather.htm">

В данном примере изображение, размещенное на странице с помощью тега , становится картой с помощью атрибута USEMAP. В листинге 3.7 представлен код еще одного примера карты изображения, позволяющей просмотреть более подробно пригороды Санкт-Петербург, выбирая часть большой фотографии. Фотография разделена на четыре прямоугольника (рис. 3.7).

Рис. 3.7. Еще один пример карты изображения Листинг 3.7. Пример создания карты изображения с активными областями в виде

прямоугольников

МЕНЮ-КАРТА Пригороды Санкт-Петербурга


Возможно

обтекание текста

вокруг таблицы

Петродворец Ломоносов Пушкин Павловск
Графические ссылки <map name = "mymap"> <area shape = "rect" coords = "0,0,270,190" href = Петродворец.htm> <area shape = "rect" coords = "270,0,540,190" href = Ломоносов.htm> <area shape = "rect" coords = "0,190,270,380" href = Павловск.htm> <area shape = "rect" coords = "270,190,540,380" href = Пушкин.htm>

Чтобы лучше понять, как задаются координаты областей, приведен рис. 3.8 с координатами в пикселах для каждой прямоугольной области.

Рис. 3.8. Разметка прямоугольных областей карты

Это изображение, состоящее из четырех видов пригородов Санкт-Петербурга, имеет размеры 380×540 пикселов.

Масштабирование изображений На рис. 3.9 показана веб-страница (листинг 3.8), содержащая три изображения разного размера, источником которых является один и тот же файл. Файл имеет

Масштабирование изображений

75

размеры 154 пиксела в ширину и 248 пикселов в высоту. Первое изображение увеличено в два раза, второе имеет реальный размер, размеры третьего изображения уменьшены в два раза.

Рис. 3.9. Три изображения разного размера из одного файла

Листинг 3.8. Пример создания трех изображений разного размера из одного файла РАЗМЕРЫ РИСУНКА

Изображения отделены друг от друга на расстояние трех неразрывных пробелов (которые задаются символами ). Если непродуманно задать ширину и высоту изображения, оно исказится. Такой пример приведен на рисунке 3.10 (листинг 3.9). Листинг 3.9. Пример неудачного получения трех изображений разного размера из одного файла ИСКАЖЕННЫЕ РИСУНКИ


Рис. 3.10. Три изображения разного размера, полученные из одного файла

Стандартные современные мониторы имеют разрешение 1024 пикселов в ширину и 768 пикселов в высоту. При разработке изображений следует учитывать, что окно просмотра будет занимать лишь часть этой области. На рис. 3.11 показаны изображения в виде полос с указанием их ширины и высоты в пикселах (лис тинг 3.10). Первая полоса имеет размеры 90 пикселов в высоту и 980 в ширину, вторая — 80 пикселов в высоту и 780 в ширину, третья — 75 пикселов в высоту и 600 в ширину, четвертая — 70 пикселов в высоту и 500 в ширину, пятая — 65 пикселов в высоту и 400 в ширину, шестая — 60 пикселов в высоту и 200 в ширину, седьмая — 50 пикселов в высоту и 100 в ширину. Листинг 3.10. Примеры создания изображений с указанием их размеров в пикселах РАЗМЕРЫ РИСУНКОВ В ПИКСЕЛАХ

Если размер изображения по ширине превышает 980 пикселов, оно не может полностью поместиться на экране, и появляется горизонтальная полоса прокрутки. Если размер изображения по высоте превышает 570 пикселов, оно не может полностью поместиться на экране, и появляется вертикальная полоса прокрутки. Для мониторов, размеры которых в пикселах отличаются от величи-


77

ны 1024×768, размеры полностью размещаемого на экране изображения будут другие, но суть останется та же.

Рис. 3.11. Примеры изображений с указанием их размеров в пикселах

Подведем итоги В этом уроке рассмотрены теги, позволяющие размещать графику на веб-страницах. Главным из них является тег с его атрибутами SRC, ALT, LONGDESC, HEIGTH, WIDTH, ALIGN, BORDER, VSPACE, HSPACE. Местоположением изображения на странице управляет атрибут выравнивания ALIGN, который может принимать значения top, middle, bottom, left и right (сверху, посередине, снизу, слева, справа). Рассказано также о теге <MAP>, который применяется для представления графического изображения в виде карты с активными областями. Представлены примеры карт. Рассмотрены форматы графических файлов JPEG и GIF, которые обычно используются в Интернете. Рассказано также о форматах BMP, PCX и PNG. Для лучшего понимания природы изображений раскрыты такие понятия, как пикселы и разрешение.

Урок Урок4. Фон веб-страниц Каждая веб-страница имеет фон, на котором можно размещать текст и рисунки. В этом уроке рассмотрены особенности создания фона веб-страниц. Приведена таблица цветов, наиболее часто использующихся в Интернете.

Фоновые рисунки

79

Фоновые рисунки Большинство браузеров позволяет включать в документ фоновый рисунок, который будет отображаться на заднем плане всего документа. Некоторым пользователям нравится видеть на веб-страницах фоновую графику, другим нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона большинства документов. Описание фонового рисунка включается в тег и выглядит следующим образом:

На рис. 4.1 показана страница с фоном, соответствующая в листингу 4.1.

Рис. 4.1. Веб-страница с фоновым рисунком

Рис. 4.2. Рисунок, выбранный в качестве фона, и диалоговое окно с размерами этого рисунка

В качестве фона выбран рисунок с размерами 4,97×4,52 см. Несмотря на небольшие размеры, рисунок покрывает всю площадь страницы, словно множество плиток кафеля. На рис. 4.2 слева показан исходный рисунок, а справа — диалоговое окно с размерами этого рисунка, открытое в программе Adobe Photoshop.

80 Урок 4. Фон веб-страниц Листинг 4.1. Пример создания веб-страницы, содержащей фоновый рисунок <TITLE> Графический фон

Задание стандартных цветов Многие создатели веб-страниц используют для фона документа, обычного текста и ссылок предопределенные цвета. Чтобы задать эти цвета, необходимо включить в тег дополнительные параметры:

Здесь каждый из параметров определяет цвет того или иного элемента страницы: BGCOLOR — цвет фона документа; TEXT — цвет простого текста документа; LINK — цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате и цветовой модели RGB. Значение #000000 соответствует черному цвету, значение #FFFFFF — белому. Например:

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки. На рис. 4.3 показана веб-страница, содержащая текст белого цвета на синем фоне (листинг 4.2).

Рис. 4.3. Веб-страница, содержащая текст белого цвета на синем фоне

Задание стандартных цветов

81

Листинг 4.2. Пример создания веб-страницы, содержащей текст белого цвета на синем фоне <TITLE>Цветовой фон Текст белого цвета

На рис. 4.4 показана та же веб-страница, что и на рис. 4.3, но с атрибутами, которые задают верхнюю, нижнюю, левую, правую границы страницы в пикселах (листинг 4.3). Видно, что текст смещен относительно границ страницы.

Рис. 4.4. Веб-страница, текст на которой имеет отступы

Рис. 4.5. Фрагмент веб-страницы, содержащей таблицу цветов

82 Урок 4. Фон веб-страниц Листинг 4.3. Пример создания веб-страницы, текст на которой имеет отступы <TITLE>Цветовой фон Текст белого цвета

На рис. 4.5 показана часть веб-страницы с названиями цветов, которые могут использоваться на веб-странице в качестве фоновых (листинг 4.4). Такую таблицу разработчикам веб-страниц полезно иметь под рукой, поскольку с ее помощью очень удобно подбирать цвета и определять их значения. Листинг 4.4. Пример создания таблицы цветов <TITLE>Таблица цветов Таблица цветов


83

продолжение 

84 Урок 4. Фон веб-страниц Листинг 4.4 (продолжение)


85


86 Урок 4. Фон веб-страниц Листинг 4.4 (продолжение)


87

ALICEBLUE-ГРЯЗНО ГОЛУБОЙ
(#F0F8FF) ANTIQUEWHITE-АНТИЧНЫЙ БЕЛЫЙ
(#FAEBD7) AQUA-АКВА
(#00FFFF) AQUAMARINE-АКВАМАРИНЗЕЛЕНОВАТОГОЛУБОЙ
(#7FFFD4)

AZUREЛАЗУРНЫЙ
(#F0FFFF) BEIGE-БЕЖЕВЫЙ
(#F5F5DC) BISQUE-БИСКВИТ
(#FFE4C4) BLACK-ЧЕРНЫЙ
(#000000)

BLANCHEDALMONDБЛЕДНЫЙ ДАЛЬМОНД
(#FFEBCD) BLUE-СИНИЙ
(#0000FF) BLUEVIOLETФИОЛЕТОВЫЙ
(#8A2BE2) BROWN-КОРИЧНЕВЫЙ
(#A52A2A)

BURLYWOODДРЕВЕСНЫЙ
(#DEB887) CADETBLUEМОРСКОЙ
(#5F9EA0) CHARTREUSE-ЛИКЕР ШАРТРЕЗ
(#7FFF00) CHOCOLATEШОКОЛАДНЫЙ
(#D2691E)

CORAL-КОРАЛЛ
(#FF7F50) CORNFLOWER-КУКУРУЗНЫЙ ЦВЕТОК
(#6495ED) CORNSILK-КУКУРУЗНЫЙ ШЕЛК
(#FFF8DC) CRIMSONМАЛИНОВЫЙ
(#DC143C)

CYAN-ГОЛУБОЙ
(#00FFFF) DARKBLUEТЕМНОСИНИЙ
(#00008B) DARKCYANТЕМНОГОЛУБОЙ
(#008B8B) DARKGOLDENRODТЕМНОЗОЛОТОЙ
(#B8860B)

DARKGRAYТЕМНОСЕРЫЙ
(#A9A9A9) DARKGREENТЕМНОЗЕЛЕНЫЙ
(#006400) DARKKHAKI- ТЕМНЫЙ ХАКИ
(#BDB76B) DARKMAGENTAТЕМНОПУРПУРНЫЙ
(#8B008B)

DARKOLIVEGREENТЕМНОЗЕЛЕНООЛИВКОВЫЙ
(#556B2F) DARKORANGEТЕМНООРАНЖЕВЫЙ
(#FF8C00) DARKORCHID- ТЕМНОЙ ОРХИДЕИ
(#9932CC) DARKREDТЕМНОКРАСНЫЙ
(#8B0000)

DARKSALMONТЕМНООРАНЖЕВО РОЗОВЫЙ
(#E9967A) DARKSEAGREENТЕМНОЗЕЛЕНЫЙ МОРСКОЙ
(#8FBC8B) DARKSLATEBLUEТЕМНОСЕРОГОЛУБОЙ
(#483D8B) DARKSLATEGRAYТЕМНОГОЛУБОСЕРЫЙ
(#2F4F4F)

DARKTURQUOISEТЕМНОБИРЮЗОВЫЙ
(#00CED1) DARKVIOLETТЕМНОФИОЛЕТОВЫЙ
(#9400D3) DEEPPINK- НАСЫЩЕННО РОЗОВЫЙ
(#FF1493) DEEPSKYBLUE- НАСЫЩЕНО НЕБЕСНЫЙ
(#00BFFF)

DIMGRAYТУСКЛОСЕРЫЙ
(#696969) DODGERBLUE- ИЗМЕНЕННЫЙ СИНИЙ
(#1E90FF) FIREBRICK- ОГНЕННО КИРПИЧНЫЙ
(#B22222) FLORALWHITEЦВЕТОЧНОБЕЛЫЙ
(#FFFAF0)

FORESTGREEN- ЛЕСНОЙ ЗЕЛЕНИ
(#228B22) FUCHIAФИСТАШКОВЫЙ
(#FF00FF) GAINSBOROГЕЙНСБОРО
(#DCDCDC) GHOSTWHITE-ЕЛЕ ЗАМЕТНЫЙ БЕЛЫЙ
(#F8F8FF)

GOLDЗОЛОТОЙ
(#FFD700) GOLDENRODТЕМНОЗОЛОТОЙ
(#DAA520) GRAY-СЕРЫЙ
(#808080) GREEN-ЗЕЛЕНЫЙ
(#008000)

GREENYELLOWЗЕЛЕНОЖЕЛТЫЙ
(#ADFF2F) HONEYDEW- МЕДВЕНОЙ РОСЫ
(#F0FFF0) HOTPINKЖАРКОРОЗОВЫЙ
(#FF69B4) INDIANRED- КРАСНЫЙ ИНДИГО
(#CD5C5C)

INDIGOИНДИГО
(#4B0082) IVORY- СЛОНОВОЙ КОСТИ
(#FFFFF0) KHAKI-ХАКИ
(#F0E68C) LAVENDERЛАВАНДОВЫЙ
(#E6E6FA)

LAVENDERBLUSHПОКРАСНЕННОЙ ЛАВАНДЫ
(#FFF0F5) LAWNGREEN- ТРАВЯНОЙ ЗЕЛЕНИ
(#7CFC00) LEMONCHIFFONЛИМОННОКОРИЧНЕВЫЙ
(#FFFACD) LIGHTBLUEСВЕТЛОСИНИЙ
(#ADD8E6)

LIGHTCORALСВЕТЛОКОРАЛЛОВЫЙ
(#F08080) LIGHTCYANСВЕТЛОГОЛУБОЙ
(#E0FFFF) LIGHTGOLDENRODYELLOW- СВЕТЛОЗОЛОТОЙ
(#FAFAD2) LIGHTGREENСВЕТЛОЗЕЛЕНЫЙ
(#90EE90)

LIGHTGREYСВЕТЛОСЕРЫЙ
(#D3D3D3) LIGHTPINKСВЕТЛОРОЗОВЫЙ
(#FFB6C1) LIGHTSALMON- СВЕТЛООРАНЖЕВО РОЗОВЫЙ
(#FFA07A) LIGHTSEAGREEN- СВЕТЛОЙ МОРСКОЙ ВОЛНЫ
(#20B2AA)

LIGHTSKYBLUEСВЕТЛО-НЕБЕСНО-СИНИЙ
(#87CEFA) LIGHTSLATEGRAY- СВЕТЛОГОЛУБОСЕРЫЙ
(#778899) LIGHTSTEELBLUE- СВЕТЛЫЙ СЕРО-СИНИЙ
(#B0C4DE) LIGHTYELLOWСВЕТЛОЖЕЛТЫЙ
(#FFFFE0)

LIME-ЛИПОВЫЙ ЦВЕТ
(#00FF00) LIMEGREENЛИПОВОЗЕЛЕНЫЙ
(#32CD32) LINEN-ЛЬНЯНОЙ
(#FAF0E6) MAGENTAПУРПУРНЫЙ
(#FF00FF)

MAROONКАШТАНОВЫЙ
(#800000) MEDIUMAQUAMARINEУМЕРЕННЫЙ АКВАМАРИН
(#66CDAA) MEDIUMBLUE- УМЕРЕННЫЙ СИНИЙ
(#0000CD) MEDIUMORCHID- УМЕРЕННОЙ АРХИДЕИ
(#BA55D3)

MEDIUMPURPLEУМЕРЕННО-ПУРПУРНЫЙ
(#9370DB) MEDIUMSEAGREENУМЕРЕННОМОРСКОЙ
(#3CB371) MEDIUMSLATEBLUE
(#7B68EE) MEDIUMSPRINGGREENУМЕРЕННО-СЕРОСИНИЙ
(#00FA9A)

MEDIUMTURQUOISEУМЕРЕННОБИРЮЗОВЫЙ
(#48D1CC) MEDIUMVIOLETREDУМЕРЕННО ФИОЛЕТОВОКРАСНЫЙ
(#C71585) MIDNIGHTBLUE- СРЕДНИЙ ТЕМНО-СИНИЙ
(#191970) MINTCREAMКРЕМОВЫЙ
(#F5FFFA)

MISTYROSE- КРАСНЫЙ ТУМАН
(#FFE4E1) MOCCASIN- ЦВЕТ ОБУВИ ИНДЕЙЦЕВ
(#FFE4B5) NAVAJOWHITEСВЕТЛОКОРИЧНЕВЫЙ
(#FFDEAD) NAVY-МОРСКОЙ
(#000080)

OLDLACE- СТАРЫЕ КРУЖЕВА
(#FDF5E6) OLIVE- ОЛИВКОВЫЙ
(#808000) OLIVEDRAB- СЕРЫЕ ОЛИВКИ
(#6B8E23) ORANGEОРАНЖЕВЫЙ
(#FFA500)

ORANGEREDОРАНЖЕВОКРАСНЫЙ
(#FF4500) ORCHID- ОРХИДЕИ
(#DA70D6) PALEGOLDENRODБЛЕДНОЗОЛОТОЙ
(#EEE8AA) PALEGREENБЛЕДНОЗЕЛЕНЫЙ
(#98FB98)

PALETURQUOISEБЛЕДНОБИРЮЗОВЫЙ
(#AFEEEE) PALEVIOLETRED- БЛЕДНО ФИОЛЕТОВО КРАСНЫЙ
(#DB7093) PAPAYAWHIP- ДЫННАЯ ПЛЕТЬ
(#FFEFD5) PEACHPUFF- ПЕРСИКОВЫЙ ДЫМ
(#FFDAB9)

PERU- ЦВЕТ ПУСТЫНИ
(#CD853F) PINK- РОЗОВЫЙ
(#FFC0CB) PLUM- СЛИВОВЫЙ
(#DDA0DD) POWDERBLUE- ПОРОШКОВО СИНИЙ
(#B0E0E6)

PURPLEПУРПУРНЫЙ
(#800080) RED- КРАСНЫЙ
(#FF0000) ROSYBROWN- РОЗОВО КОРИЧНЕВЫЙ
(#BC8F8F) ROYALBLUE- КОРОЛЕВСКО СИНИЙ
(#4169E1)

SADDLEBROWNКОРИЧНЕВОЕ СЕДЛО
(#8B4513) SALMON- ЦВЕТ ЛОСОСЯ
(#FA8072) SANDYBROWN- РЫЖЕВАТО КОРИЧНЕВЫЙ
(#F4A460) SEAGREEN- МОРСКОЙ ЗЕЛЕНИ
(#2E8B57)

SEASHELL- МОРСКИХ РАКОВИН
(#FFF5EE) SIENNA- ОХРА
(#A0522D) SILVERСЕРЕБРЯНЫЙ
(#C0C0C0) SKYBLUE- СИНЕГО НЕБА
(#87CEEB)

SLATEBLUEСЛАНЦЕВОСИНИЙ
(#6A5ACD) SLATEGRAY- СЛАНЦЕВОСЕРЫЙ
(#708090) SNOW- СНЕГ
(#FFFAFA) SPRINGGREEN- ВЕСЕННЯЯ ЗЕЛЕНЬ
(#00FF7F)

STEELBLUE-СИНЕВАТО СТАЛЬНОЙ
(#4682B4) TAN-КОРА ДУБА
(#D2B48C) TEAL-ЧИРОК
(#008080) THISTLEЧЕРТОПОЛОХ
(#D8BFD8)

TOMATOТОМАТНЫЙ
(#FF6347) TURQUOISEБИРЮЗА
(#40E0D0) VIOLETФИОЛЕТОВЫЙ
(#EE82EE) WHEAT-ПШЕНИЦА
(#F5DEB3)

WHITE-БЕЛЫЙ
(#FFFFFF) WHITESMOKEДЫМ
(#F5F5F5) YELLOW-ЖЕЛТЫЙ
(#FFFF00) YELLOWGREEN- ЖЕЛТОЗЕЛЕНЫЙ
(#9ACD32)
&NBSP;

Подведем итоги В этом уроке рассказано, как создать фон веб-страницы. В качестве фона можно использовать рисунок или сделать фон однотонным. В конце урока приведен листинг очень полезной для разработчиков веб-страниц программы, описывающей 140 различных цветов с указанием их оригинальных названий и шестнадцатеричных кодов в цветовой модели RGB.

Урок5. Линии, точки . Урок и другие объекты В этом уроке рассматриваются способы создания линий, которые могут стать украшением страниц, а также способы вставки на вебстраницы кавычек, знаков сравнения и пр., то есть специальных символов. Кроме того, в конце урока описываются средства размещения на веб-страницах более сложных объектов, таких как Java-апплеты, сценарии и пр.

Горизонтальные линии

89

Горизонтальные линии Для вставки горизонтальной линии используется тег . Это одинарный тег, закрывающего тега он не имеет. По умолчанию линия является объемной и с тенью. Горизонтальные линии позволяют разделить длинный формально неограниченный текст на отдельные разделы. Горизонтальные линии на веб-страницах играют такую же роль, как орнаментальные полосы в печатных изданиях. Синтаксис:

Атрибуты: SIZE — толщина линии в пикселах; WIDTH — ширина линии в пикселах или процентах от ширины окна браузера; ALIGN — положение на экране (слева, по центру, справа); NOSHADE — линия представляется простой однотонной темной полосой. Примеры горизонтальных линий различной толщины показаны на рис. 5.1 (листинг 5.1).

Рис. 5.1. Горизонтальные линии различной толщины

90 Урок 5. Линии, точки и другие объекты Листинг 5.1. Примеры создания горизонтальных линий различной толщины КРАСИВЫЕ ТОЛСТЫЕ И ТОНКИЕ ЛИНИИ КРАСИВЫЕ ТОЛСТЫЕ И ТОНКИЕ ЛИНИИ Horizontal rule - горизонтальная черта - одинарный тег. значение size = и width = size = 40 width = " 20 % " size = 30 width = " 30 % " size = 20 width = " 40 % " size = 10 width = " 50 % " size = 5 width = " 60 % "

Примеры коротких горизонтальных линий показаны на рис. 5.2 (листинг 5.2).

Рис. 5.2. Короткие горизонтальные линии

Листинг 5.2. Примеры создания коротких горизонтальных линий КОРОТКИЕ ГОРИЗОНТАЛЬНЫЕ ЛИНИИ Линии в виде фигур _______________________________________________________
Данная линия есть совокупность символов подчеркивания

Клавиатурные символы

91

Примеры горизонтальных линий, выровненных по правому краю, показаны на рис. 5.3 (листинг 5.3).

Рис. 5.3. Горизонтальные линии, выровненные по правому краю страницы

Листинг 5.3. Примеры создания горизонтальных линий, выровненных по правому краю страницы ЛИНИИ, ВЫРОВНЕННЫЕ ПО ПРАВОМУ КРАЮ Линии, выровненные по правому краю

Клавиатурные символы Как показано на рис. 5.3, с помощью клавиатуры можно рисовать горизонтальные линии (клавиша подчеркивания _), а также наклонные налево (\) и направо (/) линии, вертикальные линии (|). Сочетания таких линий позволяют получать интересные рисунки. На рис. 5.4 показан рисунок листа, выполненный с помощью клавиатурных символов (листинг 5.4). Листинг 5.4. Пример создания листа с помощью символов клавиатуры СИМВОЛЫ, ВВЕДЕННЫЕ С КЛАВИАТУРЫ

92 Урок 5. Линии, точки и другие объекты Лист,
нарисованный с помощью символов,
введенных с клавиатуры <pre> ^ /|\ \\|// \\\|/// \\\\|//// \\\|/// \\\\\\|////// \\\\\|///// \\\|/// |

Рис. 5.4. Лист, нарисованный с помощью символов клавиатуры

На рис. 5.5 показан рисунок солнышка, выполненный с помощью клавиатурных символов (листинг 5.5). Листинг 5.5. Пример рисования солнышка с помощью символов клавиатуры СОЛНЫШКО, ПОСТРОЕННОЕ С ПОМОЩЬЮ СИМВОЛОВ КЛАВИАТУРЫ Солнышко,
построенное с помощью символов,
введенных с клавиатуры <pre> \|||/ \ ___ / __/ \__ __| |__ /\___/\ /|||\

Клавиатурные символы

93

Рис. 5.5. Солнышко, нарисованное с помощью символов клавиатуры

На рис. 5.6 показан рисунок человечка, выполненный с помощью клавиатуры (листинг 5.6).

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

Листинг 5.6. Пример рисования лица человека с помощью символов клавиатуры ЧЕЛОВЕЧЕК <pre> oooooo o o o ! ! o o o o ==== o o o oooo

Как вы уже убедились, с помощью клавиатуры можно рисовать самые разные забавные фигуры — дополнительные примеры имеются в листингах 5.7 и 5.8.

94 Урок 5. Линии, точки и другие объекты Листинг 5.7. Пример рисования зверя с помощью символов клавиатуры ЗВЕРЬ <pre> / / / /
/ / / /
/ /---------/ /
{ }
( * * )
{ }
{ } ----

Листинг 5.8. Пример рисования птицы с помощью специальных символов ПТИЦА <pre>

?

>>>>
>
>

><

Специальные символы На странице могут размещаться кавычки, знаки сравнения, знаки параграфа и другие специальные символы. И даже «пресловутый» пробел относится к специальным символам. Примеры показаны на рис. 5.7 (листинг 5.9). Листинг 5.9. Пример создания веб-страницы со специальными символами СПЕЦ СИМВОЛЫ Амперсант &
Знак меньше

Знак торговой марки ™
Неразрывный пробел
Цент ¢
Фунт £
Знак валюты ¤
Вертикальная черта ¦
Знак параграфа §
Знак копирайта ©

Специальные символы

95

Прямая кавычка "
Левая типографская кавычка «
Правая типографская кавычка »
Знак зарегистрировано ®
знак градуса °
Степень1 ¹
Степень2 ²
Степень3 ³
Знак микро µ
Знак абзаца ¶
Точка маркер ·
1/4 ¼
1/2 ½
Знак умножения ×
Знак деления ÷

Рис. 5.7. Веб-страница, содержащая специальные символы

Примеры открывающих и закрывающих тегов показаны на рис. 5.8 (листинг 5.10). Здесь же представлены надписи различного цвета. Листинг 5.10. Пример создания веб-страницы, содержащей открывающие и закрывающие теги ЦВЕТ ТЕКСТА font size=5 < font color=maroon >
< font color=navy >
< font color=purple >
< font color=fuchsia >
< font color=teal >
< font color=lime >

96 Урок 5. Линии, точки и другие объекты < font color=aqua >
< font color=olive >
< font color=plum >
< font color=black >
< font color=silver >
< font color=royalblue >
< font color=mediumvioletred >
< font color=springgreen >

Рис. 5.8. Веб-страница, содержащая открывающие и закрывающие теги

Информация об авторе документа Для визуального выделения информации об авторе документа, например его адреса электронной почты, служит тег . Синтаксис: Адрес-автора

Этот тег обычно указывается в конце документа. Содержимое тега выводится, как правило, курсивом. Пример документа, содержащего адрес, показан на рис. 5.9 (листинг 5.11). Листинг 5.11. Пример создания документа, содержащего адрес АДРЕС HTML- Учебный курс
Комолова Нина Владимировна
Северо=Западный институт печати
Санкт-Петербургского государственного университета технологии и дизайна
[email protected]

Java-апплеты

97

Рис. 5.9. Документ, содержащий адрес автора

Java-апплеты Для вставки в состав документа Java-апплетов применяют тег <APPLET>. Javaапплеты — это программы на языке Java, которые загружаются и выполняются браузером. Программы, переданные браузеру, придают странице интерактивность, не свойственную страницам, написанным без использования апплетов. Процесс вставки Java-апплета состоит из двух этапов. Во-первых, необходимо убедиться, что все классы и связанные файлы, такие как графические изображения и аудиофрагменты, размещены в доступном каталоге — чаще всего это подкаталог classes каталога с HTML-документами. Во-вторых, в исходный код страницы должен быть внедрен тег <APPLET>, а также все необходимые для его работы атрибуты. Тег <APPLET> имеет атрибуты CODEBASE, ARHIVE, CODE, OBJECT, ALT, NAME, WIDHT, HEIGHT, ALIGN, TOP, MIDDLE, BOTTOM, LEFT, RIGHT, HSPACE, VSPACE. Он появился в версии HTML 3.2. Обязательным является либо атрибут CODE, либо CODEBASE. Тег , включаемый в состав тега <APPLET>, должен предшествовать остальному содержимому. Тег <APPLET> не рекомендован к применению. Вместо него желательно использовать тег (см. далее).

Сценарии Для включения в документ сценария служит тег <SCRIPT>. Сценарии позволяют придать документу дополнительные возможности, недостижимые средствами языка HTML. Встраиваемые в документ объекты придают ему динамичность, интерактивность, позволяют управлять содержимым страницы после ее загрузки. Тег <SCRIPT> появился в HTML версии 3.2. Он может повторяться как угодно часто как в разделе , так и в разделе документа. Если задан атрибут

98 Урок 5. Линии, точки и другие объекты SRC, браузер загружает внешний сценарий. В противном случае содержимое тега <SCRIPT> интерпретируется как код сценария. Атрибут CHARSET. Атрибут CHARSET определяет кодировку содержимого. Синтаксис: charset="набор_символов"

Для указания набора символов могут быть использованы значения, утвержденные организацией IANA (Internet Assigned Numbers Authority), например ISO-8859-1 или US-ASII. Атрибут TYPE. Атрибут TYPE определяет MIME-тип языка сценариев (например, text/javascript). Синтаксис: type="тип_содержимого"

Атрибут LANGUAGE. Атрибут LANGUAGE определяет язык сценария с помощью зарезервированного имени. Синтаксис: language="данные"

Атрибут SRC. Атрибут SRC задает местоположение внешнего сценария. Синтаксис: src="URL"

Атрибут DEFER. Атрибут DEFER указывает браузеру на то, что сценарий не генерирует данные, предназначенные для отображения. В этом случае браузер может продолжить вывод документа, не дожидаясь окончания выполнения сценария.

Внешние объекты и комментарии Для включения в состав документа внешнего объекта служит тег . Внешним объектом может быть Java-апплет, изображение или внешнее приложение. Данный тег появился в HTML версии 4.0. Тег может располагаться в разделе , но при этом объект выводиться не будет, то есть в этот раздел можно помещать только те объекты, которые не требуют отображения. Тег допускает вложение. Он имеет атрибуты ID, DECLARE, CLASSID, CODEBASE, DATA, TYPE, CODETYPE, ARHIVE, STANDBY, HEIGHT, WIDHT, USEMAP, NAME, TABINDEX, ALIGN, BORDER, HSPACE и VSPACE. Тег используется для задания комментариев в документе. Пример: Данный текст не выводится.

Листы стилей Для включения в документ листов стилей используется тег <STYLE>. Он может присутствовать только в HTML-заголовке (внутри тега ).


99

Обязательный атрибут указывает браузеру на использование листов стилей (см. урок 17). Синтаксис: ="Тип данных MIME"

Этот атрибут определяет MIME-тип языка стилей (например, "text/css"). Атрибут <MEDIA> идентифицирует предполагаемую среду для воспроизведения информации, заданной с помощью стилей, например: media="screen|print|all"

Подведем итоги В этом уроке рассказывается о теге , позволяющем чертить горизонтальные линии, параметры которых определяются атрибутами SIZE, WIDTH, ALIGN, NOSHADE. Кроме того, показано, как с помощью тега и клавиатуры можно создавать незамысловатые рисунки. В конце урока описываются средства размещения на вебстраницах более сложных объектов, таких как Java-апплеты, сценарии и прочее.

Урок6. Бегущая строка Урок В этом уроке рассматриваются средства создания бегущей строки — одного из самых эффектных украшений веб-страницы.

Вставка бегущей строки на веб-страницу

101

Вставка бегущей строки на веб-страницу Тег бегущей строки <MARQUEE> (от англ. marquee — большой навес, шатер) имеет атрибуты ALIGN, BEHAVIOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, SCROLLAMOUNT. Атрибут ALIGN. Атрибут ALIGN позволяет разместить текст в верхней (TOP), средней (MIDDLE) или нижней (BOTTON) области бегущей строки. Атрибут BEHAVIOR. Атрибут BEHAVIOR управляет поведением бегущей строки на экране: SCROLL — текст пересекает экран (это значение задано по умолчанию); SLIDE — текст выдвигается на экран и останавливается; ALTERNATE — текст выдвигается на экран, а затем перемещается взад-вперед. Атрибут BGCOLOR. Атрибут BGCOLOR задает цвет фона бегущей строки в модели RGB либо названиями цветов, либо шестнадцатеричным значением. Атрибут DIRECTION. Атрибут DIRECTION задает направление движения текста: LEFT — слева направо (это значение задано по умолчанию); RIGHT — справа налево. Атрибут HEIGHT. Атрибут HEIGHT управляет высотой строки в пикселах или в процентах от высоты экрана (тогда к числу добавляется знак процента). Атрибут WIDTH. Атрибут WIDTH управляет длиной строки в пикселах или в процентах от ширины экрана (тогда к числу добавляется знак процента). Атрибут HSPACE. Атрибут HSPACE позволяет задать ширину в пикселах левого и правого полей между областью бегущей строки и окружающим ее текстом или графикой. Атрибут VSPACE. Атрибут VSPACE позволяет задать высоту в пикселах верхнего и нижнего полей между областью бегущей строки и окружающим ее текстом или графикой. Атрибут LOOP. Атрибут LOOP задает количество проходов бегущей строки по экрану. Если атрибут опущен, то строка будет появляться до тех пор, пока страница находится на экране. Атрибут SCROLLAMOUNT. Атрибут SCROLLAMOUNT управляет скоростью перемещения текста. Значение этого параметра, равное 1, означает самую маленькую скорость, значение 2000 — самую большую (в этом случае строка будет просто мелькать). Атрибут SCROLLDELAY. Атрибут SCROLLDELAY по своим функциям напоминает предыдущий и определяет время в миллисекундах до перерисовки текста бегущей строки. Комбинация двух последних атрибутов позволяет подобрать оптимальную скорость вывода строки.

102 Урок 6. Бегущая строка

Пример бегущей строки Программа, показывающая движение бегущей строки, представлена в листинге 6.1, а результат работы этой программы показан на рис. 6.1. Листинг 6.1. Пример создания веб-страницы с бегущей строкой БЕГУЩАЯ СТРОКА Тег бегущей строки обозначается в угловых скобках английским словом marquee
<marquee bgcolor=red vspace=5 width=80% height=50 align=middle behavior=scroll> Есть теги, а есть атрибуты Атрибут align управляет размещением текста в верхней (top), средней (middle) или нижней (bottom) области бегущей строки
<marquee bgcolor=red vspace=30 width=20% align=bottom behavior=slide> Есть теги, а есть атрибуты Атрибут behavior управляет выводом бегущей строки на экран
scroll - текст пересекает экран (это значение установлено по умолчанию)
slide - текст выдвигается на экран и останавливается
alternate - текст выдвигается на экран, а затем перемещается взад и вперед
<marquee bgcolor=aaaaaa vspace=20 width=50% align=bottom behavior=alternate> Есть теги, а есть атрибуты Атрибут bgcolor управляет цветом фона бегущей строки
Цвет задается в модели rgb
либо названием, либо шестнадцатеричным значением
<marquee bgcolor=magenta vspace=20 width=90% align=top direction=right height=15%> Есть теги, а есть атрибуты
Атрибут direction управляет направлением движения текста
left – слева направо (задается по умолчанию), right – справа налево
Атрибут height управляет шириной строки
высота строки может задаваться в пикселах
или в процентах от высоты экрана
(тогда к числу добавляется знак процента) атрибут width= управляет длиной строки
длина строки может задаваться в пикселах
или в процентах от ширины экрана
(тогда к числу добавляется знак процента) Атрибут hspace управляет шириной в пикселах
левого и правого полей между областью бегущей строки и окружающим ее текстом или графикой
Атрибут vspace управляет размером высотой в пикселах

Рисунок в качестве бегущей строки

103

верхнего и нижнего полей между областью бегущей строки и окружающим ее текстом или графикой
Этот атрибут успешно используется при размещении бегущей строки в таблице
Атрибут loop задает количество проходов текста по экрану
Если этот атрибут опущен, то бегущая строка будет двигаться до тех пор, пока страница находится на экране
Атрибут scrollamount управляет скоростью перемещения текста
значение этого параметра, равное 1, означает самую маленькую скорость, значение 2000 — самую большую (в этом случае строка будет просто мелькать)
Атрибут scrolldelay по своим функциям напоминает предыдущий
и определяет время в миллисекундах до перерисовки текста бегущей строки
Комбинация двух последних атрибутов позволяет подобрать оптимальную скорость вывода строки на экран.

Рис. 6.1. Веб-страница с бегущей строкой

Рисунок в качестве бегущей строки Бегущей строкой может быть не только текст, но и рисунок. Программа с графической бегущей строкой представлена в листинге 6.2, а результат работы этой программы показан на рис. 6.2. Рисунок для бегущей строки (в данном случае файл Фон.gif) и код программы должны храниться в одном каталоге. Листинг 6.2. Пример создания веб-страницы с рисунком в качестве бегущей строки БЕГУЩИЙ РИСУНОК <marquee scrollamount=10 border=»0»>

104 Урок 6. Бегущая строка

Рис. 6.2. Веб-страница с графической бегущей строкой

Подведем итоги В этом уроке рассказано, как с помощью тега <MARQUEE> украсить веб-страницу бегущей строкой. Внешний вид и поведение бегущей строки определяют атрибуты тега <MARQUEE>, в том числе ALIGN, BEHAVIOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, SCROLLAMOUNT.

Урок7. Списки Урок В этом уроке рассматриваются способы создания разнообразных списков.

106 Урок 7. Списки

Виды списков Существует три основных вида списков в HTML-документе: нумерованный список; маркированный список; список определений. Можно создавать вложенные списки, используя различные теги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тегов (открывающий и закрывающий) внутри другой.

Нумерованные списки В нумерованный список браузер автоматически вставляет номера элементов по порядку. Это означает, что если удалить один или несколько элементов нумерованного списка, остальные номера автоматически будут пересчитаны. Нумерованные списки создаются с помощью парного тега (от англ. Ordered List — нумерованный список). Каждый элемент списка начинается с тега
. Пример нумерованного списка, в котором нумерация осуществляется по умолчанию, показан на рис. 7.1 (листинг 7.1).

Рис. 7.1. Список с нумерацией, заданной по умолчанию

Листинг 7.1. Пример создания списка, нумерованного по умолчанию НУМЕРОВАННЫЙ СПИСОК

Виды списков

107

ПРОТОКОЛЫ И МОДЕЛИ ИНТЕРНЕТ-ВЗАИМОДЕЙСТВИЯ Протокол - это набор правил, регламентирующих обмен информацией между различными устройствами, в частности, между компьютерами.

Веб-браузер - прикладная программа, которая отображает содержимое файлов, полученных с локального или удаленного компьютера, в соответствии с инструкциями, включенными в этот файл.
Модель клиент-сервер
Протокол TCP/IP (Transmission Control Protocol/Internet Protocol)
Протокол http (Hyper Text Transfer Protocol)
URL(Uniform Resource Locator) - унифицированный указатель ресурса
Протокол FTP (File Transfer Protocol)
Microsoft Internet Explorer - самый популярный браузер
Netscape Navigator - популярный браузер фирмы Netscape

Тег может иметь атрибуты TYPE и START. Синтаксис:

Здесь: TYPE — символы списка: A — прописные латинские буквы (A, B, C...); a — строчные латинские буквы (a, b, c...); I — большие римские цифры (I, II, III...); i — маленькие римские цифры (i, ii, iii...); 1 — арабские цифры (1, 2, 3...); START=n — начальное значение списка. Пример нумерованного списка с большими римскими цифрами и начальным значением XLIX показан на рис. 7.2 (листинг 7.2).

Рис. 7.2. Список с нумерацией из больших римских цифр

108 Урок 7. Списки Листинг 7.2. Пример создания списка с нумерацией из больших римских цифр СПИСОК С НУМЕРАЦИЕЙ ИЗ БОЛЬШИХ РИМСКИХ ЦИФР WWW – World Wide Web (Всемирная паутина) – одна из служб,
доступных пользователям Интернета
_____________________________________________________________
Характеристики языка HTML:
Простота
Универсальность
Совместимость _____________________________________________________________
Интернет развивается с конца 1950-х годов

Пример списка с нумерацией из прописных латинских букв и начальным значением I показан на рис. 7.3 (листинг 7.3).

Рис. 7.3. Список с нумерацией из прописных латинских букв

Листинг 7.3. Пример создания списка с нумерацией из прописных латинских букв КОНЦЕПТУАЛЬНАЯ МОДЕЛЬ WEB
_____________________________________________________________
WWW - это не только текст и изображение, это еще и поведение
Представление
Структура
Поведение


109

_____________________________________________________________
IAB (Internet Advisory Board) - координационный совет Интернета

Пример списка с нумерацией из строчных латинских букв и начальным значением e показан на рис. 7.4 (листинг 7.4).

Рис. 7.4. Список с нумерацией из строчных латинских букв

Листинг 7.4. Пример создания списка с нумерацией из строчных латинских букв КОНЦЕПТУАЛЬНАЯ МОДЕЛЬ WEB
_____________________________________________________________
Этап, предшествующий разработке
Получение заказа на выполнение проекта
Работа с заказчиком
Взаимодействие с представителем заказчика
Мозговой штурм
Определение предполагаемой аудитории
Определение масштаба Web-узла
Анализ информации, представленной конкурентами
Бюджет и время выполнения проекта
Переговоры и подписание договора _____________________________________________________________
ISOC (Internet Society) - неправительственная некоммерческая организация,
специально созданная для поддержки и развития Интернета

Пример списка с нумерацией из маленьких римских цифр и начальным значением iii показан на рис. 7.5 (листинг 7.5).


Рис. 7.5. Список с нумерацией из маленьких римских цифр

Листинг 7.5. Пример создания списка с нумерацией из маленьких римских цифр СПИСОК С НУМЕРАЦИЕЙ ИЗ МАЛЕНЬКИХ РИМСКИХ ЦИФР Участники разработки веб-страницы
_____________________________________________________________

Веб-дизайнер
Главный конструктор
Веб-мастер
Аудиодизайнер
Видеодизайнер
Аниматор
Программист
Авторы текстов
Специалист, оценивающий применимость узла
Руководитель проекта _____________________________________________________________
IETF - международная организация, в которую входят специалисты по сетевым технологиям

Пример списка с нумерацией из арабских цифр и начальным значением 11 показан на рис. 7.6 (листинг 7.6). Листинг 7.6. Пример создания списка с нумерацией из арабских цифр и начальным значением 11 ЯЗЫКИ РАЗМЕТКИ Языки разметки веб-страницы
_____________________________________________________________

HTML (Hyper Text Markup Language)
SGML (Standard Generalized Markup Language)
XML


111

XHTML
Dynamic HTML __________________________________________________________
Mozilla - рабочая группа в составе Netscape

Рис. 7.6. Список с нумерацией из арабских цифр и начальным значением 11

Маркированные списки Маркированные списки создаются с помощью парного тега
(от англ. Unordered List — ненумерованный список). Каждый элемент списка начинается с тега
(от англ. List Item — элемент списка). Тег
может иметь атрибут TYPE:

Атрибут TYPE определяет внешний вид маркера. Доступные значения: disc — закрашенные круглые маркеры (вариант, заданный по умолчанию); circle — незакрашенные круглые маркеры; square — квадратные маркеры. Пример маркированного списка с параметрами, заданными по умолчанию, показан на рис. 7.7 (листинг 7.7). Листинг 7.7. Пример создания маркированного списка с параметрами, заданными по умолчанию ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА Инструментальные средства
____________________________________________________________

HTML-редакторы
WYSIWYG-редакторы
Adobe GoLive
Microsoft FrontPage
Macromedia Dreamweaver
____________________________________________________________
Java - язык программирования
JavaScript - интерпретируемый язык, предназначенный для написания сценариев

Рис. 7.7. Маркированный список с параметрами, заданными по умолчанию

Пример списка с маркерами в виде квадратов показан на рис. 7.8 (листинг 7.8). Листинг 7.8. Пример создания списка с маркерами в виде квадратов ЭЛЕМЕНТЫ ДИЗАЙНА Элементы дизайна
____________________________________________________________

Пространство
Формат
Фрагмент
Основа
Линия
Форма
Фигура
Текстура
Цвет
____________________________________________________________
Дизайн - это организация визуальной информации


113

Рис. 7.8. Список с маркерами в виде квадратов

Пример списка с незакрашенными круглыми маркерами показан на рис. 7.9 (листинг 7.9).

Рис. 7.9. Список с незакрашенными круглыми маркерами

114 Урок 7. Списки Листинг 7.9. Пример создания списка с незакрашенными круглыми маркерами ПРИНЦИПЫ ВЕБ-ДИЗАЙНА Принципы веб-дизайна
____________________________________________________________

Элементы дизайна
Удобство восприятия
Согласованность
Единство стиля
Контрасты
Простота
Наличие структуры
Акценты
____________________________________________________________
Дизайнер должен предвидеть, как будет воспринята информация пользователем

Вложенные списки Примеры вложенных списков показаны на рис. 7.10 (листинг 7.10) и 7.11 (лис тинг 7.11).

Рис. 7.10. Вложенные списки

Листинг 7.10. Пример создания вложенных списков СПИСОК СОТРУДНИКОВ Северо-Западный институт печати Санкт-Петербургский государственный университет технологии и дизайна
Единственный в Северо-Западном регионе России государственный специализированный ВУЗ


Факультет

Издательское дело, реклама и книжная торговля
Полиграфические технологии и оборудование
Заочное отделение

Специальности

Издательское дело и редактирование
Книгораспространение
Реклама
Графика
Технология полиграфического производства
Полиграфические машины и автоматизированные комплексы
Автоматизация технологических процессов и производств

Рис. 7.11. Еще один пример вложенных списков

Листинг 7.11. Еще один пример создания вложенных списков ПРИМЕР ВЛОЖЕННЫХ СПИСКОВ

Пункт 1
Пункт 1.1
Пункт 1.2

Пункт 2
Пункт 2.1

115

Пункт 2.2

Пункт 3
Пункт 3.1
Пункт 3.2

Списки определений Список определений состоит из специальным образом расположенных терминов и их описаний (определений). Для создания списков определений на вебстраницах используются теги , и . Тег . Парный тег (от англ. Definition List — список определений) начинает список определений. Он включает в себя теги (помечает термин) и (помечает описание термина). Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии. Тег имеет атрибуты COMPACT (современными браузерами не поддерживается), CLASS, ID, LANG и STYLE. Если определяемые термины короткие, используется атрибут COMPACT, который предназначен для вывода элементов списка в компактной форме (с уменьшенным кеглем и расстоянием между строками): ...

Атрибут COMPACT не имеет значений, синтаксис остальных атрибутов: id="Имя" lang="Код языка" style="Определение встроенного стиля"

Тег . Тег (от англ. Definition Term — определяемое слово, термин) представляет собой блочный непарный тег, который помечает текст термина в списке определений. Атрибуты тега : id="Имя" lang="Код языка"

Тег . Тег (от англ. Definition Description — описание определяемого термина) представляет собой блочный непарный тег, который помечает текст определения в списке определений. Атрибуты тега : id="Имя" lang="Код языка" style="Определение встроенного стиля"

Пример списка определений показан на рис. 7.12 (листинг 7.12). Листинг 7.12. Пример создания списка определений ВВЕДЕНИЕ В ИНТЕРНЕТ


117

Интернет - совокупность сетей, применяющих единый протокол обмена (точнее, обширное семейство из сотен протоколов) для передачи информации Локальная сеть - соединение нескольких компьютеров при помощи технических и программных средств, которые позволяют объединять файловые системы входящих в нее компьютеров Глобальная сеть - такое соединение компьютеров, при котором допускается использование информации, физически находящейся на других компьютерах сети (однако пользовательским программам не представляется непосредственный доступ к файловой системе других компьютеров) Провайдер сетевых услуг - владелец конкретной сети, с которой клиент находится в юридических отношениях Бод - бит в секунду - единица измерения пропускной способности канала - основная характеристика канала связи Гипертекст - информационная структура, обеспечивающая навигацию посредством гипертекстовых ссылок Гипертекстовая ссылка - фрагмент текста или изображение, при активизации которого отображается документ, связанный со ссылкой

Рис. 7.12. Список определений

118 Урок 7. Списки В заключение этого урока рассмотрим еще один пример нескольких списков с разными маркерами, который показан на рис. 7.13 (листинг 7.13).

Рис. 7.13. Списки с разными маркерами

Листинг 7.13. Пример создания списков с разными маркерами ЕЩЕ ОДИН ПРИМЕР СПИСКОВ
....
Метод мозгового штурма ....
Метод моментов
....
Метод системологии ....
Метод системной ориентации ....
Метод проб и ошибок ....
Метод попарного сравнения ....
Метод профильного анализа ....
Метод Данахера-Руста

Помимо описанных в этом уроке для создания логически связанных списков можно использовать теги <MENU> и . Синтаксис тега <MENU>: <menu>
элемент списка

Синтаксис тега :


119

Пример списка с созданием меню полей выбора представлен в листинге 7.14. Листинг 7.14. Пример создания списка с созданием меню СПИСОК С СОЗДАНИЕМ МЕНЮ <menu>
КРАСНЫЙ

ЖЕЛТЫЙ

ГОЛУБОЙ
НЕ УГНАТЬСЯ ЗА ТОБОЙ

Подведем итоги В этом уроке рассматриваются способы создания разнообразных списков, в частности нумерованных списков (с арабскими и римскими цифрами), маркированных списков (с маркерами в виде кругов и квадратов) и списков определений. Допускается создание вложенных списков.

Урок8. Таблицы Урок В этом уроке рассматриваются методы работы с таблицами, которые в HTML-документах используются не только сами по себе, ни и с целью точного позиционирования фрагментов текста и изображений друг относительно друга.

Основные теги таблиц

121

Основные теги таблиц Ячейки таблиц в языке HTML могут содержать любые HTML-элементы, в том числе заголовки, списки, текстовые абзацы, графику, а также элементы форм.

Создание таблиц Основным тегом, описывающим таблицу, является парный тег . Все элементы таблицы должны находиться внутри тегов
и
. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER. Размер рамки может быть фиксированным или автоматически согласовываться с размерами окна просмотра браузера и размерами текста и рисунков в ячейках. Помимо своего естественного назначения (упорядочения текстовой информации), таблицы позволяют решать чисто дизайнерские задачи: выравнивать части фрагменты страниц друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на столбцы и т. д. Тег имеет атрибуты ALIGN, BORDER, BACKGROUND, BGCOLOR, BORDERCOLOR, CELLPADDING, CELLSPACING, HSPACE, SPACE, COLSPEC, WIDTH. Атрибут ALIGN. Если атрибут ALIGN располагается внутри тегов и , он определяет положение подписи таблицы и может принимать значения TOP (сверху, вариант заданный по умолчанию) и BOTTOM (снизу). Если атрибут ALIGN встречается внутри тегов ..., или , он управляет выравниванием данных в ячейках по горизонтали и может принимать значения LEFT (слева), RIGHT (справа) или CENTER (по центру). Атрибут BORDER. Атрибут BORDER определяет вид границ таблицы. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. Атрибут BORDER может принимать числовые значения, определяющие толщину границы, например: border=3

Атрибут BACKGROUND. Атрибут BACKGROUND позволяет создать фоновое изображение для всей таблицы: background = url

Атрибут BGCOLOR. Атрибут BGCOLOR задает фоновый цвет. Атрибут BORDERCOLOR. Атрибут BORDERCOLOR задает цвет рамки. Используется только с атрибутом BORDER, например:

Атрибут CELLPADDING. Атрибут CELLPADDING определяет расстояние от границ ячейки до ее содержимого в пикселах. Атрибут CELLSPACING. Атрибут CELLSPACING определяет расстояние между ячейками в пикселах. Атрибут HSPACE. Атрибут HSPACE задает свободное пространство слева и справа от таблицы в пикселах.

122 Урок 8. Таблицы Атрибут VSPACE. Атрибут VSPACE задает свободное пространство сверху и снизу от таблицы в пикселах. Атрибут COLSPEC. Атрибут COLSPEC позволяет создать столбцы фиксированный ширины. Значение ширины задается либо в символах, либо в процентах, например: colspec="20%"

Атрибут WIDTH. Атрибут WIDTH определяет ширину таблицы. Значение ширины задается либо в пикселах, либо в процентах от текущей ширины окна браузера; например: width=256 width=100%

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

Создание строк и столбцов таблицы Для создания строк и столбцов таблицы служат парные теги и . Тег (от англ. Table Row — строка таблицы) задает строку таблицы. Количество строк определяется количеством встречающихся пар тегов и . Строки могут иметь атрибуты ALIGN (выравнивание по горизонтали) и VALIGN (выравнивание по вертикали). Тег (от англ. Column — столбец) используется для задания столбцов таблицы и может иметь атрибуты WIDTH, BGCOLOR, ALIGN, VALIGN и ID. Атрибут WIDTH. Атрибут WIDTH задает ширину ячеек в столбце:

Атрибут BGCOLOR. Атрибут BGCOLOR задает цвет фона ячеек:

Атрибут ALIGN. Атрибут ALIGN задает режим горизонтального выравнивания содержимого внутри ячейки. Он может принимать значения LEFT (влево), CENTER (по центру) и RIGHT (вправо), например:

Атрибут VALIGN. Атрибут VALIGN задает режим вертикального выравнивания содержимого внутри ячейки. Он может принимать значения MIDDLE (посередине) и TOP (вверх), например:

Атрибут ID. Атрибут ID задает имя для ссылки, например:

Создание ячеек таблицы Для создания ячейки таблицы служит парный тег ,
... ...

(от англ. Table Data — табличные данные). Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером столбца, к которому она относится. Если в строке для некоторых столбцов отсутствует одна или несколько ячеек, браузер отображает пустую ячейку. Расположение данных в ячейке

Теги группирования элементов таблиц

123

по умолчанию определяется атрибутами ALIGN=LEFT и VALIGN=MIDDLE. Данное расположение может быть изменено как на уровне описания строки, так и на уровне описания ячейки.

Создание заголовка и подписи таблицы Для создания заголовка таблицы используется парный тег (от англ. Table Head — заголовок таблицы). Ячейка заголовка таблицы имеет ширину всей таблицы. Текст в данной ячейке имеет атрибуты BOLD и ALIGN=CENTER. Для создания подписи таблицы используется парный тег (от англ. caption — подпись). Тег должен присутствовать внутри тегов и
, но вне описания строки или ячейки. Атрибут ALIGN определяет, где будет находиться подпись. По умолчанию атрибут ALIGN имеет значение TOP (сверху), но может быть установлен равным BOTTOM (снизу). Подпись всегда центрирована в рамках таблицы по горизонтали.

Теги группирования элементов таблиц Для группирования элементов таблиц служат теги , и .

Группирование столбцов таблицы Тег используется с целью группирования столбцов таблицы и может иметь атрибуты BGCOLOR, ALIGN, VALIGN, SPAN, WIDTH, ID. Атрибут BGCOLOR. Атрибут BGCOLOR задает цвет фона ячеек, например:

Атрибут ALIGN. Атрибут ALIGN задает режим горизонтального выравнивания содержимого внутри ячейки. Он может принимать значения LEFT (влево), CENTER (по центру) и RIGHT (вправо), например:

Атрибут VALIGN. Атрибут VALIGN задает режим вертикального выравнивания содержимого внутри ячейки. Он может принимать значения MIDDLE (посередине) и TOP (вверх), например:

Атрибут SPAN. Атрибут SPAN задает количество столбцов в группе, например:

Атрибут WIDTH. Атрибут WIDTH задает ширину ячеек в столбцах, например:

Атрибут ID. Атрибут ID задает имя для ссылки, например:

Группирование строк таблицы Для создания логических связанных групп строк в теле таблицы используется тег , например:

124 Урок 8. Таблицы
... ...

У тега есть атрибуты BGCOLOR, ALIGN, VALIGN, которые имеют тот же смысл, что и одноименные атрибуты тега . Для логического группирования строк в верхней части таблицы (то есть для создания верхней шапки таблицы) используется тег , например:
... ...

У тега есть атрибуты BGCOLOR, ALIGN, VALIGN, ID, которые имеют тот же смысл, что и одноименные атрибуты тега . Для логического группирования строк в нижней части таблицы (то есть для создания нижней шапки таблицы) используется тег , например:
... ...

У тега есть атрибуты BGCOLOR, ALIGN, VALIGN, ID, которые имеют тот же смысл, что и одноименные атрибуты тега .

Основные атрибуты элементов таблицы Ниже перечислены основные атрибуты элементов таблиц. С некоторыми из них мы уже познакомились при изучении тегов, применяемых при создании таблиц, с другим познакомимся в этом разделе. Атрибут ALIGN. Атрибут ALIGN управляет выравниванием содержимого ячеек. Допустимые значения LEFT (влево), RIGHT (вправо) и CENTER (по центру). Атрибут BACKGROUND. Атрибут BACKGROUND задает фоновое изображение для ячеек строки: background=url

Атрибут BGCOLOR. Атрибут BGCOLOR задает фоновый цвет для ячеек строки. Атрибут BORDER. Атрибут BORDER задает толщину рамки, обрамляющей ячейки строки. Нулевое значение данного атрибута означает отсутствие обрамления. Атрибут VALIGN. Атрибут VALIGN встречается внутри тегов
и . Он определяет вертикальное выравнивание данных в ячейках. Доступные значения TOP (вверху), BOTTOM (внизу), CENTER (по центру), MIDDLE (посередине) и BASELINE (по базовой линии). Атрибут NOWRAP. Атрибут NOWRAP говорит о том, что данные в ячейке не могут логически разбиваться на строки и должны быть представлены одной строкой. Атрибут COLSPAN. Атрибут COLSPAN указывает, какое количество ячеек будет объединено по горизонтали с указанной ячейкой. По умолчанию значение этого атрибута равно 1. Атрибут ROWSPAN. Атрибут ROWSPAN указывает, какое количество ячеек будет объединено по вертикали с указанной ячейкой. По умолчанию значение этого атрибута равно 1.

Примеры таблиц

125

Атрибут RULES. Атрибут RULES определяет правила вывода линий между ячейками, например:

Доступные значения: NONE — нет линий (это значение используется по умолчанию); GROUPS — линии отображаются только между группами строк (которые задаются тегами , и ) или группами столбцов (которые задаются тегами 12

Программа, создающая таблицу, в которой отражены все цвета радуги, показана в листинге 8.16 (рис. 8.16). Рамка таблицы окрашена в томатный цвет.

Рис. 8.16. Таблица, в которой показаны все цвета радуги

Листинг 8.16. Пример создания таблицы, в которой показаны все цвета радуги РАДУГА РАДУГА

КРАСНЫЙ
ОРАНЖЕВЫЙ
ЖЕЛТЫЙ
ЗЕЛЕНЫЙ
ГОЛУБОЙ
СИНИЙ
ФИОЛЕТОВЫЙ

Программа, в которой фон таблицы и документа закрашен разными цветами, показана в листинге 8.17 (рис. 8.17).


Рис. 8.17. Веб-страница, на которой фон таблицы и документа закрашен разными цветами

Листинг 8.17. Пример, в котором фон таблицы отличается от фона документа ПРОСТАЯ ТАБЛИЦА ПРОСТАЯ ТАБЛИЦА ЗАГОЛОВОК ТАБЛИЦЫ
ячейка 11 ячейка 12

ячейка 21
ячейка 22

Программа, создающая таблицу, в которой отражены различные способы выравнивания, показана в листинге 8.18 (рис. 8.18). Рамка таблицы окрашена в черный и белый цвета. Листинг 8.18. Пример создания таблицы, в которой отражены различные способы выравнивания ВЫРАВНИВАНИЕ В ТАБЛИЦАХ <strong><em>Различные способы выравнивания Заголовок таблицы


141

Способ выравнивания

По левому краю Центрирование По правому краю

Направление По вертикали Этот текст выровнен по левому краю Этот текст отцентрирован Этот текст выровнен по правому краю

По горизонтали Вверху Посередине Внизу

Рис. 8.18. Таблица, в которой отражены различные способы выравнивания

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

Рис. 8.19. Таблица, у которой подпись располагается внизу

142 Урок 8. Таблицы Листинг 8.19. Пример создания таблицы, у которой подпись располагается внизу ТАБЛИЦЫ Таблица с тремя столбцами и четырьмя строками Подпись таблицы внизу и слева

Столбец 1 Столбец 2 Столбец 3

Текст выделен цветом ячейка 12 ячейка 13

ячейка 21 ячейка 22 ячейка 23


Программа, создающая таблицу с четырьмя столбцами и тремя строками, показана в листинге 8.20 (рис. 8.20).

Рис. 8.20. Таблица с четырьмя столбцами и тремя строками

Листинг 8.20. Пример создания таблицы с четырьмя столбцами и тремя строками ТАБЛИЦА С ЧЕТЫРЬМЯ СТОЛБЦАМИ И ТРЕМЯ СТРОКАМИ Таблица с четырьмя столбцами и тремя строками CSS (Cascading Style Sheets - каскадные листы стилей)


143

Объединение двух ячеек по горизонтали Текст выделен цветом ячейка 12 ячейка 13


строка 3 ячейка 31 ячейка 32 ячейка 33

Еще один пример программы, создающий таблицу с тремя столбцами и четырьмя строками, у которой, в отличие рис. 8.19, подпись размещена сверху, показан в листинге 8.21 (рис. 8.21).

Рис. 8.21. Таблица, у которой подпись располагается сверху

Листинг 8.21. Пример создания таблицы, у которой подпись располагается сверху ТАБЛИЦЫ С ОБЪЕДИНЕННЫМИ ЯЧЕЙКАМИ ТАБЛИЦЫ С РАЗЛИЧНЫМИ РАМКАМИ Программный код - текст программы
столбец 1 Объединение двух ячеек по вертикале

Текст выделен цветом ячейка 12 ячейка 13



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


Рис. 8.22. Таблица без рамки

Листинг 8.22. Пример создания таблицы без рамки ЗАГОЛОВОК, ВЫРОВНЕННЫЙ ПО ЦЕНТРУ Заголовок, выровненный по центру Заголовок таблицы - параметр frame = void
Заголовок строки 1 - тег th Текст выделен цветом, курсивом и расположен с правого края ячейка 12 ячейка 13

Заголовок строки 2 - тег th ячейка 21 ячейка 22 ячейка 23

Заголовок строки 3 - тег th ячейка 31 ячейка 32 ячейка 33

Рассмотрим еще один пример создания таблицы, представленный в листинге 8.23. В этом примере показано, что жирные рамки могут создавать различные визуальные эффекты (рис. 8.23). Противоположный результат можно получить, если создать таблицу без рамки. При создании вложенных таблиц границы делают разной толщины, чтобы легче было различать таблицы. Листинг 8.23. Пример создания вложенных таблиц с разной толщиной рамок ТАБЛИЦЫ С РАЗНОЙ ТОЛЩИНОЙ РАМОК

ТИПЫ БРАУЗЕРОВ


145

первый гафический браузер появился в 1993 году

Microsoft Internet Explorer Mozilla Firefox Opera Safari

Рис. 8.23. Вложенные таблицы с разной толщиной рамок

Пример таблицы, в которой наблюдаются интересные эффекты размещения текста за счет использования атрибута CELLSPACING, показан на рис. 8.24 (листинг 8.24).

Рис. 8.24. Таблица с интересными эффектами размещения текста

146 Урок 8. Таблицы Листинг 8.24. Пример создания таблицы с интересными эффектами размещения текста АТРИБУТЫ ТЕГОВ ТАБЛИЦЫ

элемент 11 элемент 12 элемент 13






Пример таблицы, в которой с помощью атрибута CELLSPACING имитируется рамка вокруг изображения, показан на рис. 8.25 (листинг 8.25).

Рис. 8.25. Таблица, в которой имитируется рамка вокруг изображения

Листинг 8.25. Пример создания таблицы, в которой имитируется рамка вокруг изображения РАМКА ВОКРУГ ФОТОГРАФИИ


147

ПОРТРЕТ

Еще один пример таблицы, в которой имитируется рамка с тенью, показан на рис. 8.26 (листинг 8.26). Ячейка выглядит выпуклой.

Рис. 8.26. Таблица с выпуклой рамкой

Листинг 8.26. Пример создания таблицы с выпуклой рамкой РАМКА С ТЕНЬЮ

Родина мояСанкт-петербург

На том и этом свете буду вспоминать я

Как упоительны в россии вечера

Таблицы позволяют размещать текст в колонках. Такой пример показан на рис. 8.27 (листинг 8.27). Листинг 8.27. Размещение текста в колонках ТЕКСТ В КОЛОНКАХ


Как сделать красиво? Основные правила: Контраст, Выравнивание, Приближенность

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

Рис. 8.27. Текст в колонках

Пример разноцветной таблицы из четырех столбцов показан на рис. 8.28 (лис тинг 8.28).

Рис. 8.28. Таблица из четырех столбцов


Листинг 8.28. Пример создания таблицы из четырех столбцов ТЕКСТ В ЧЕТЫРЕХ СТОЛБЦАХ Даты возникновения математических знаков

149


Пример таблицы с общим заголовком и отдельными заголовками столбцов показан на рис. 8.29 (листинг 8.29).

Рис. 8.29. Таблица с общим заголовком и отдельными заголовками столбцов

Листинг 8.29. Пример создания таблицы с общим заголовком и отдельными заголовками столбцов ТАБЛИЦА С ОБЩИМ ЗАГОЛОВКОМ И ОТДЕЛЬНЫМИ ЗАГОЛОВКАМИ СТОЛБЦОВ

Знак Значение Кто ввел Год

= равенство Р.Рекорд 1557

>, < больше, меньше Т.Гарриот 1631

¶ Отношение длины окружности к диаметру У.Джонсон 1706

× умножение У.Оутред 1631

log логарифм И.Кеплер 1624

sin синус Б.Кавальери 1632

cos косинус Л.Эйлер 1748
Заголовок таблицы
Заголовок 1 Заголовок 2 Заголовок 3

Пример таблицы с общим заголовком и отдельными заголовками столбцов и строк показан на рис. 8.30 (листинг 8.30).


151

Рис. 8.30. Таблица с общим заголовком и отдельными заголовками столбцов и строк

Листинг 8.30. Пример создания таблицы с общим заголовком и отдельными заголовками столбцов и строк ТАБЛИЦА С ОБЩИМ ЗАГОЛОВКОМ И ОТДЕЛЬНЫМИ ЗАГОЛОВКАМИ СТОЛБЦОВ И СТРОК ЗАГОЛОВОК ТАБЛИЦЫ
Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4

Заголовок 5 ячейка 11 ячейка 12 ячейка 13 ячейка 14

Заголовок 6 ячейка 21 ячейка 22 ячейка 23 ячейка 24

Пример таблицы с объединенными ячейками в столбцах и строках показан на рис. 8.31 (листинг 8.31). Листинг 8.31. Пример создания таблицы с объединенными ячейками в столбцах и строках ТАБЛИЦА С ОБЪЕДИНЕННЫМИ ЯЧЕЙКАМИ В СТОЛБЦАХ И СТРОКАХ Заголовок таблицы
Заголовок 1 Заголовок 2

ячейка 3
ячейка 4
ячейка
ячейка
ячейка
ячейка

5 6 7 8

Рис. 8.31. Таблица с объединенными ячейками в столбцах и строках

Пример таблицы со сложным объединением ячеек в столбцах и строках показан на рис. 8.32 (листинг 8.32).

Рис. 8.32. Таблица со сложным объединением ячеек в столбцах и строках


153

Листинг 8.32. Пример создания таблицы со сложным объединением ячеек в столбцах и строках ОБЪЕДИНЕНИЕ ЯЧЕЕК В СТОЛБЦАХ И СТРОКАХ

Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4
ячейка 1
ячейка 3
ячейка 4
ячейка 6
ячейка 7

Пример таблицы, размещенной в ячейке другой таблицы, показан на рис. 8.33 (листинг 8.33).

Рис. 8.33. Таблица, которая размещается в ячейке другой таблицы

Листинг 8.33. Пример создания таблицы, которая размещается в ячейке другой таблицы ОБЪЕДИНЕНИЕ ЯЧЕЕК В СТОЛБЦАХ И СТРОКАХ

ячейка 1

ячейка 2-1 ячейка 2-2
ячейка 3-2 ячейка 4-2
ячейка 5
ячейка 3-1 ячейка 4-1 ячейка 6-1

154 Урок 8. Таблицы Примеры трех таблиц, состоящих из одной ячейки и имеющих рамки разной толщины, показаны на рис. 8.4 (листинг 8.34).

Рис. 8.34. Таблицы, состоящие из одной ячейки

Листинг 8.34. Примеры таблиц, состоящих из одной ячейки ОБЪЕДИНЕНИЕ ЯЧЕЕК В СТОЛБЦАХ И СТРОКАХ

одна ячейка



В заключении хотелось бы привести листинг таблицы, которую наши студенты шутя назвали «ТАБЛЕТКА» (листинг 8.35). Листинг 8.35. Пример вложенных таблиц ТАБЛЕТКА текст в таблицах ТАБЛИЦА


155

Подведем итоги В этом уроке рассказывается о создании таблиц. Тег определяет строку таблицы, тег — столбец таблицы, тег — ячейку таблицы, тег — заголовок таблицы, тег — подпись таблицы. Все эти теги должны располагаться внутри тегов и
. Поскольку таблицы имеют в веб-дизайне очень важное значение (они используются не только в качестве собственно таблиц, но и как средство точного позиционирования элементов на веб-странице), рассмотрено очень много примеров таблиц.

Урок9. Формы Урок Формы представляют собой важные элементы HTML-страниц, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может посылать комментарии по поводу посещения определенного узла, пересылать запросы, регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них, заполняя ее. Форма создается при помощи различных тегов и атрибутов, заключенных в пару тегов и . В этом уроке рассматриваются методы создания форм.

Создание форм

157

Создание форм Формы предназначены для ввода информации. Все формы начинаются тегом (от англ. form — форма) и завершаются тегом . У формы могут быть атрибуты NAME, ACTION, METHOD, TARGET. Атрибут NAME. Атрибут NAME определяет имя формы и обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм. Атрибут ACTION. Обязательный атрибут ACTION задает URL-адрес программы, которая будет вызываться для обработки формы. Атрибут METHOD. Атрибут METHOD определяет способ отправки параметров формы. Принимает значение GET или POST. В настоящее время использование метода GET не рекомендуется. Атрибут TARGET. Атрибут TARGET определяет окно, в которое возвращается результат обработки отправленной формы. Возможные значения SELF, PARENT, TOP, BLANK или явно указанное имя окна. Пример элементарной формы показан на рис. 9.1 (листинг 9.1). Имеющиеся на форме поля ввода задаются тегами . Атрибут SIZE регулирует длину поля ввода.

Рис. 9.1. Веб-страница, содержащая элементарную форму

Листинг 9.1. Пример создания веб-страницы, содержащей элементарную форму ФОРМЫ МОЯ ПЕРВАЯ ФОРМА ПЕРВОЕ ПОЛЕ
ВТОРОЕ ПОЛЕ

158 Урок 9. Формы Создать форму легко, но трудно красиво выстроить все элементы. Эта проблема не имеет простого решения. Можно разместить поля ввода и раскрывающиеся списки в левой части страницы, а весь сопроводительный текст — справа. Поскольку длина полей ввода задается атрибутом SIZE, можно выровнять строки по левому краю, а текст справа оставить не выровненным, как в большинстве документов. Такая форма выглядит аккуратнее. Пример такой формы показан на рис. 9.2 (листинг 9.2).

Рис. 9.2. Форма с выровненными элементами

Листинг 9.2. Пример создания формы с выровненными элементами ФОРМЫ КАКАЯ ФОРМА ВЫГЛЯДИТ ЛУЧШЕ?
ПЕРВЫЙ
ПОСЛЕДНИЙ
АДРЕС
ГОРОД
ОБЛАСТЬ
РАЙОН
ИЛИ ПЕРВЫЙ
ПОСЛЕДНИЙ
АДРЕС
ГОРОД
ОБЛАСТЬ
РАЙОН

Размещение на форме элементов управления

159

Размещение на форме элементов . управления Для создания полей ввода, с которыми мы познакомились в предыдущем разделе, и других элементов управления используется тег (от англ. input — ввод). Тег имеет атрибуты NAME, SIZE, CHECKED, MAXLENGTH, SRC, TYPE. Атрибут NAME. Атрибут NAME определяет имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому впоследствии можно получить данные, введенные пользователем в это поле. Атрибут SIZE. Атрибут SIZE определяет размер поля ввода в символах. Атрибут CHECKED. Атрибут CHECKED используется с флажками и переключателями. Он означает, что флажок или переключатель, имеющий этот атрибут, при открытии страницы будет установлен. Атрибут MAXLENGTH. Атрибут MAXLENGTH определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении этого количества браузер отреагирует на попытку ввода нового символа звуковым сигналом и не даст его ввести. Не следует путать этот атрибут с атрибутом SIZE, который определяет количество видимых в поле символов. Если количество введенных символов окажется больше чем SIZE, в поле появится возможность прокрутки. По умолчанию значение MAXLENGTH равно бесконечности. Атрибут SRC. Атрибут SRC задает URL-адрес, указывающий на изображение (используется совместно с атрибутом IMAGE). Атрибут TYPE. Атрибут TYPE определяет тип элемента управления. По умолчанию это однострочное поле ввода. Все остальные типы должны быть явно указаны. Значение CHECKBOX превращает поле ввода во флажок, который используется для передачи в вызываемую программу простых логических значений (ON или OFF), заданных пользователем. Значение HIDDEN скрывает элемент управления — он не отображается браузером и не дает пользователю возможность изменить присвоенное ему по умолчанию значение. Такой элемент управления используется для передачи в программу неизменной информации, например идентификатора пользователя или пароля. Значение IMAGE позволяет связать с именем элемента управления изображение. При щелчке мышью на таком изображении будет немедленно вызвана ассоциированная с формой программа. Значение PASSWORD внешне не меняет поле ввода, но вводимое пользователем значение не отображается браузером на экране. Значение RADIO превращает поле ввода в переключатель, который позволяет выбрать одно значение из нескольких, задаваемых переключателями с разными значениями атрибута VALUE, но с одинаковыми значениями атри-

160 Урок 9. Формы бута NAME. В вызываемую программу будет передано значение NAME=VALUE, причем VALUE примет значение установленного переключателя. При установке одного переключателя все остальные автоматически сбрасываются. Значение RESET превращает поле ввода в кнопку, при щелчке на которой все элементы управления формы примут значения, заданные для них по умолчанию. Значение SUBMIT превращает поле ввода в кнопку, при щелчке на которой будет вызвана ассоциированная с формой программа или произойдет переход по заданному URL-адресу. Значение TEXT описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длины вводимого значения в символах и размера поля ввода (по умолчанию 20 символов). Атрибут VALUE. Атрибут VALUE позволяет присвоить элементу управления значение по умолчанию или значение, которое будет присвоено атрибуту NAME при установке соответствующего переключателя (для типа переключателя данный атрибут обязателен). Пример формы с переключателями (TYPE=RADIO) показан на рис. 9.3 (листинг 9.3).

Рис. 9.3. Форма с переключателями

Листинг 9.3. Пример создания формы с переключателями ПРИМЕР ФОРМЫ С ПЕРЕКЛЮЧАТЕЛЯМИ 9600 бит/с
14400 бит/с
28800 бит/с
56600 бит/с

В листинге 9.4 представлен пример создания формы, содержащей кнопку отправки данных (TYPE=SUBMIT). Сама форма показана на рис. 9.4.

Размещение на форме элементов управления

161

Рис. 9.4. Форма с кнопкой отправки

Листинг 9.4. Пример создания формы с кнопкой отправки АТРИБУТ submit

В отличие от переключателей в группе флажков (TYPE=CHECKBOX) с одинаковыми именами может быть установлено сколько угодно флажков. В листинге 9.5 приведен пример создания формы с флажками, причем, как показано на рис. 9.5, при открытии формы второй и третий флажки оказываются установленными, поскольку для них указан атрибут CHECKED.

Рис. 9.5. Форма с флажками

162 Урок 9. Формы Листинг 9.5. Пример создания формы с флажками ФЛАЖКИ
Всемирная паутина
Hyper Text Transfer Protocol
Hyper Text Markup Language

В листинге 9.6 приведен пример создания формы с полем для ввода пароля (TYPE=PASSWORD). При вводе информации в такое поле она отображается в виде звездочек (рис. 9.6).

Рис. 9.6. Форма с полем для ввода пароля

Листинг 9.6. Пример создания формы с полем для ввода пароля Ввод пароля

Списки выбора Для создания списков на форме, позволяющих выбрать одно или несколько значений из множества возможных, используется парный тег <SELECT>. По умолчанию в поле списка отображается его первый элемент. Элемент списка создается с помощью тега . В листинге 9.7 представлен пример использования тегов <SELECT> и (рис. 9.7).

Списки выбора

163

Листинг 9.7. Пример создания веб-страницы, содержащей список выбора ФОРМЫ Устройства ввода-вывода компьютера <select name=group> Клавиатура Мышь Монитор Принтер Гибкий магнитный диск Cd-диск Dvd-диск Синхронизатор с карманным пк

Рис. 9.7. Веб-страница с раскрытым списком выбора

Список выбора, создаваемый тегом <SELECT>, не обязательно является однострочным. Количество одновременно видимых на экране элементов списка задается атрибутом SIZE. Если количество элементов списка превышает значение, указанное в атрибуте SIZE, справа появляется полоса прокрутки. Чтобы в списке одновременно можно было выбрать несколько элементов (с помощью клавиши Shift или Ctrl), применяется атрибут MULTIPLE, который задает максимальное количество одновременно выбранных элементов. Пример использования тега <SELECT> с атрибутами SIZE и MULTIPLE показан на рис. 9.8 (листинг 9.8). Листинг 9.8. Пример создания многострочного списка ТЕГ select multiple

164 Урок 9. Формы <select name=group size=4 multiPLE=2> Запись на формный цилиндр; Запись на форму; Запись на фотоформу; Печатная машина; Прямая запись;

Рис. 9.8. Многострочный список на форме

В теге обязательно надо указывать атрибут VALUE. Только в этом случае программа, ассоциированная с формой, сможет определить, какой элемент списка выбран. Соответствующий пример показан на рис. 9.9 (листинг 9.9).

Рис. 9.9. Список, в котором используется атрибут VALUE

Листинг 9.9. Пример создания списка, в котором используется атрибут VALUE select.htm Форматы графических файлов: <select name="GIF - Graphics Interchange Format"> GIF - Graphics Interchange Format JPEG - Joint Photographic Expert Group PNG - Portable Network Graphic BMP - Bit Map - битовая карта

Многострочные текстовые поля

165

Многострочные текстовые поля Для создания на форме многострочных текстовых полей, позволяющих пользователю вводить большие объемы информации, служит тег . Этот тег имеет атрибуты NAME, ROWS, COLS. Атрибут NAME. Атрибут NAME задает имя поля ввода. Атрибут ROWS. Атрибут ROWS задает высоту поля ввода в символах. Атрибут COLS. Атрибут COLS задает ширину поля ввода в символах. Для того чтобы в поле ввода по умолчанию при открытии формы выводился какой-либо текст, его необходимо вставить между тегами и . Пример использования тега показан на рис. 9.10 (листинг 9.10).

Рис. 9.10. Форма с многострочным текстовым полем

Листинг 9.10. Пример создания формы с многострочным текстовым полем ТЕГ textarea URL Uniform Resource Locator - унифицированный указатель ресурса Стандартный способ адресации файлов в WWW EPS Encapsulated PostScript Формат, позволяющий сохранять графические изображения и переносить их из одного приложения в другое.

166 Урок 9. Формы

Подведем итоги В этом уроке рассказано, как создавать формы, позволяющие разработчикам интерактивно взаимодействовать с посетителями своих страниц. Такое взаимодействие происходит посредством размещаемых на форме элементов управления, таких как однострочные и многострочные поля ввода, флажки, переключатели, кнопки, раскрывающиеся и прокручивающиеся списки. Для создания форм используется тег , для создания элементов управления — тег , для создания списков — тег <SELECT>, для создания многострочных полей ввода — тег .

Урок Урок 10. Фреймы Фреймы позволяют разбивать веб-страницы на подокна, причем каждое подокно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других подокон либо наоборот — управлять их содержанием. Фреймы могут значительно улучшить внешний вид веб-страниц и повысить их функциональность.

168 Урок 10. Фреймы

Свойства фреймов Ниже перечислены некоторые свойства фреймов. Каждый фрейм имеет свой URL-адрес, что позволяет обращаться к нему и загружать его независимо от других фреймов. Каждый фрейм имеет собственное имя (задаваемое атрибутом NAME), позволяющее обратиться к нему из другого фрейма. Размер фрейма может быть изменен пользователем прямо на экране мышью (если это не запрещено с помощью специального параметра). Перечисленные свойства фреймов позволяют создавать разнообразные интерфейсные решения. В отдельном фрейме, который будет все время оставаться на экране, можно разместить статическую информацию, которую автор считает необходимым постоянно показывать пользователю. Это может быть графический логотип фирмы, соглашение об авторских правах, набор управляющих кнопок, оглавление всех или части веб-документов, содержащихся на веб-сервере, что позволит пользователю быстро находить интересующую его информацию. При интенсивных обращениях пользователя к веб-серверу можно постоянно отображать на экране два фрейма — в одном фрейме пользователь будет вводить свои запросы к серверу, а в другом видеть результаты их обработки сервером. Для веб-приложений, обслуживающих базы данных, можно создавать формы с фреймами, связывая их отношениями главный—подчиненный. Тогда в главном фрейме будут отображаться общие данные из базы данных, а в подчиненном — подробные данные, относящиеся к выбранному в главном фрейме элементу.

Наборы фреймов Формат документа, использующего фреймы, внешне очень напоминает формат обычного документа, только вместо тега используется парный тег : ... ...

То есть перед тем как размещать на веб-страницы фреймы, с помощью тега (от англ. frame set — набор фреймов) создают так называемый набор фреймов, содержащий информацию о числе фреймов, их относительных и абсолютных размерах. Тег не несет какой-либо информационной нагрузки, он только описывает фреймы. Тег допускает вложения. Общий синтаксис набора фреймов: ...

Наборы фреймов

169

Общий контейнер описывает все фреймы, на которые делится экран. Можно разделить экран на несколько вертикальных или несколько горизонтальных фреймов. Для описания каждого фрейма в отдельности служит тег . Между тегами и могут находиться теги , вложенные теги и , а также контейнер из тегов и , который позволяет продублировать документ для браузеров, не поддерживающих фреймы. Тег допускает вложения и может иметь атрибуты COLS, ROWS, BORDER, FRAMEBORDER, причем атрибуты ROWS и COLS взаимоисключающие. Атрибут COLS. Атрибут COLS задает количество и размеры столбцов в создаваемом наборе фреймов. Значения ширины различных фреймов перечисляются в кавычках через запятую в пикселах, в процентах (%) или в связанных масштабных коэффициентах (*), например:

Атрибут ROWS. Атрибут ROWS задает количество и размеры строк в создаваемом наборе фреймов в пикселах, в процентах (%) или в связанных масштабных коэффициентах (*), например:

Количество фреймов определяется количеством значений в списке. Общая сумма значений высоты всех фреймов (при любом способе задания значений атрибута) должна составлять высоту всего окна. Отсутствие атрибута ROWS означает один фрейм высотой с окно браузера. Атрибут BORDER. Атрибут BORDER задает толщину обрамления в пикселах для всех фреймов, входящих в данный набор фреймов, например:

Атрибут FRAMEBORDER. Атрибут FRAMEBORDER позволяет отменить вывод обрамления у фреймов независимо от значения атрибута BORDER. Значение 1 соответствует наличию, а 0 — отсутствию обрамления, например:

Задание значений атрибута ROWS или COLS в пикселах — далеко не самый лучший способ описания высоты фрейма, поскольку пользователи могут произвольным образом менять размер рабочего поля браузера, не говоря уже о различных разрешениях экрана. Если вы все же выбрали данный способ описания размера, настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате получилось 100-процентное заполнение окна браузера. Если значения атрибута ROWS или COLS указываются в процентах (от 1 до 100), и общая сумма размеров описываемых фреймов превышает 100, то размеры всех фреймов пропорционально уменьшаются, чтобы в результате получилась сумма в 100 %. Если, соответственно, сумма меньше 100 %, то размеры пропорционально увеличиваются. Задание одного из значений атрибута ROWS или COLS с единичным масштабным коэффициентом (в этом случае указывается просто звездочка без числа) означает, что все оставшееся место будет принадлежать данному фрейму. Если единичные

170 Урок 10. Фреймы масштабные коэффициенты указываются для двух или более фреймов, то оставшееся пространство делится поровну между этими фреймами. Если перед звездочкой стоит цифра, то она задает масштабный коэффициент для данного фрейма (во сколько раз он должен быть больше аналогично фрейма, описанного звездочкой без числа). Рассмотрим примеры. cols="3*,*,*"

Эта запись говорит о том, что будет создано три фрейма, причем первый фрейм займет 3/5 свободного пространства по горизонтали, а два других — по 1/5. cols="50%,50%"

Такая запись означает деление области просмотра на две равные части. cols="20%,80%"

Эта запись означает деление области просмотра на неравные части (слева 20, справа 80 %): rows="100,20%,*"

Данная запись означает деление области просмотра на три части. Первой (верхней) отведено 100 пикселов, второй (средней) — 20 % оставшегося пространства, третьей (нижней) — все остальное. cols="*,3*"

Эта запись означает деление области просмотра на неравные части, причем правая часть в три раза шире левой. Того же эффекта можно добиться с помощью следующей записи: cols="25%,75%"

Совместное использование в одном теге атрибутов COLS и ROWS может привести к непредсказуемым результатам.

Фреймы поддерживаются не всеми браузерами. Чтобы пользователи таких браузеров могли видеть содержимое веб-страницы с фреймами, используется парный тег . Этот тег помещается внутри контейнера , и все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. То есть разработчику веб-страницы нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код между тегами и , тогда все пользователи смогут увидеть его веб-страницу.

Вставка фрейма в документ . с набором фреймов Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег с атрибутами NAME, SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE, FRAMEBORDER.

Вставка фрейма в документ без набора фреймов

171

Атрибут NAME. Атрибут NAME задает имя фрейма. Имя позволяет обратиться к этому фрейму в программе (это делается с помощью атрибута TARGET, о котором рассказывается в разделе «Взаимодействие фреймов»), например загрузить в него содержимое нового HTML-файла. Синтаксис: name="имя"

Атрибут SRC. Атрибут SRC задает документ, который должен отображаться внутри данного фрейма, например:

Если атрибут SRC отсутствует, отображается пустой фрейм. Атрибут MARGINWIDTH. Атрибут MARGINWIDTH позволяет указать величину вертикальных разделительных полос между фреймами: marginwidth="value"

Значение value указывается в пикселах и не может быть меньше единицы. Значение, устанавливаемое по умолчанию, зависит от используемого браузера. Атрибут MARGINHEIGHT. Атрибут MARGINHEIGHT позволяет указать величину горизонтальных разделительных полос между фреймами: marginheight="value"

Значение value указывается в пикселах и не может быть меньше единицы. Атрибут SCROLLING. Атрибут SCROLLING управляет выводом полос прокрутки фрейма: scrolling="yes|no|auto"

Значение yes указывает, что фрейм будет иметь полосы прокрутки в любом случае, значение no — что полос прокрутки не будет. Значение auto, заданное по умолчанию, говорит о том, что полосы прокрутки появятся только при необходимости. Атрибут NORESIZE. Атрибут NORESIZE позволяет создавать фреймы без возможности изменения их размеров. По умолчанию размер фрейма можно изменить мышью так же просто, как и размер окна Windows. Атрибут NORESIZE запрещает такую возможность. Если у одного из фреймов установлен атрибут NORESIZE, это лишает пользователя возможности перетаскивать границы не только данного фрейма, но и прилегающие к нему границы других фреймов. Атрибут FRAMEBORDER. Атрибут FRAMEBORDER задает обрамление у фреймов и может принимать значения 1 (есть обрамление) или 0 (нет обрамления), например:

Вставка фрейма в документ . без набора фреймов Для визуализации веб-страницы в другом документе не обязательно предварительно создавать в нем набор фреймов. Фрейм можно вставить не только в документ с набором фреймов, но и в «обычный» документ. Для этого использует-

172 Урок 10. Фреймы ся тег <IFRAME>, который в отличие от тега вставляется не между тегами и , а между тегами и . Тег <IFRAME> имеет атрибуты SRC, FRAMEBOARD, MARGINHEIGHT, MARGINWIDTH, NAME, ALIGN, SCROLLING, WIDTH, HEIGHT. Атрибут SRC. Атрибут SRC задает документ, который должен быть отображен во фрейме, например: <iframe src="url">

Атрибут FRAMEBORDER. Атрибут FRAMEBORDER задает обрамление у фреймов. Может принимать значения 1 (есть обрамление) или 0 (нет обрамления), например: <iframe frameborder="1"> <iframe frameborder="0">

Атрибут MARGINHEIGHT. Атрибут MARGINHEIGHT задает толщину верхней и нижней границ обрамления в пикселах, например: <iframe marginheight ="число">

Атрибут MARGINWIDTH. Атрибут MARGINWIDTH задает толщину правой и левой границ обрамления в пикселах, например: <iframe marginwidth="число">

Атрибут NAME. Атрибут NAME определяет имя фрейма, по которому к нему можно будет обращаться в ссылках. Атрибут ALIGN. Атрибут ALIGN позволяет позиционировать фрейм по отношению к тексту и принимает значения LEFT (слева), RIGHT (справа), MIDDLE (посередине), TOP (сверху) и BOTTOM (снизу), например: <iframe align="left">

Атрибут SCROLLING. Атрибут SCROLLING определяет вид полос прокрутки у фрейма и принимает значения yes (есть полосы), no (нет полос) и auto (полосы появляются при необходимости), например:

Атрибут WIDTH. Атрибут WIDTH определяет ширину фрейма в пикселах, например: <iframe width ="число">

Атрибут HEIGHT. Атрибут HEIGHT определяет высоту фрейма в пикселах, например: <iframe height="число">

Взаимодействие фреймов При разработке страниц с фреймами возникает вопрос: «А как сделать так, чтобы, щелкнув на ссылке в одном фрейме, инициировать появление информации в другом?». Ответом на данный вопрос является организация взаимодействия фреймов. Каждый фрейм может иметь собственное имя, определяемое при его создании атрибутом NAME. Существует также специальный атрибут TARGET, позволяющий адресовать целевой фрейм: target="имя"

Примеры использования фреймов

173

Данный атрибут можно указывать внутри самых разных тегов, например, в ссылках: Переход во фрейм с именем frame1

Размещение атрибута TARGET в теге позволяет не указывать при описании каждой ссылки фрейм-приемник документов, вызываемых по ссылкам. Это очень удобно, если в одном фрейме, например, находится меню, а в другом выводится информация, соответствующая выбранному пункту меню: Первая часть | Вторая часть

Допускается включение атрибута TARGET в ссылку при создании карты изображения, например: <area shape="circle" coords = "100,100,50" href="http://www.piter.com" target="frame1">

Атрибут TARGET можно включить в описание формы:

В этом случае, после обработки переданных параметров формы результирующий документ появится в указанном фрейме. Имя фрейма в атрибуте TARGET должно начинаться с латинской буквы или цифры. Также необходимо помнить, что существуют зарезервированные имена, которые начинаются со знака подчеркивания: _BLANK — документ, полученный по ссылке, будет отображаться в новом окне браузера. _SELF — документ, полученный по ссылке, будет отображаться в том же фрейме, в котором находится ссылка. Это имя удобно использовать для переопределения окна назначения, указанного ранее в теге . _PARENT — документ, полученный по ссылке, будет отображаться в родительском окне вне зависимости от атрибутов тега . Если родительского окна нет, то данное имя аналогично имени _SELF. _TOP — документ, полученный по ссылке, займет все окно вне зависимости от наличия фреймов. Использовать это имя удобно в случае вложенных фреймов. Любые другие имена фреймов, начинающиеся со знака подчеркивания, игнорируются браузером.

Примеры использования фреймов В первых двух примерах представлены веб-страницы, состоящие из горизонтальных (используется атрибут ROWS) фреймов. В примере, представленном на рис. 10.1 (листинг 10.1), соотношение верхнего и нижнего фреймов составляет двенадцать к пяти.


Рис. 10.1. Два горизонтальных фрейма

Листинг 10.1. Пример создания веб-страницы, содержащей два горизонтальных фрейма Два горизонтальных фрейма

В примере, приведенном на рис. 10.2 (листинг 10.2), верхний и нижний фреймы составляют 30 % от высоты экрана, а средний фрейм — 40 %. Листинг 10.2. Пример создания веб-страницы, содержащей три горизонтальных фрейма Три горизонтальных фрейма

В следующих двух примерах представлены веб-страницы, состоящие из вертикальных фреймов (используется атрибут COLS).


175

Рис. 10.2. Три горизонтальных фрейма

На рис. 10.3 показаны два фрейма, значения ширины которых относятся как два к трем (листинг 10.3). Граница, проходящая между фреймами достаточно широкая, так атрибут BORDER равен 35. Первый фрейм не имеет полос прокрутки, так как атрибут SCROLLING для него равен значению no.

Рис. 10.3. Веб-страница, содержащая два вертикальных фрейма

176 Урок 10. Фреймы Листинг 10.3. Пример создания веб-страницы, содержащей два вертикальных фрейма Два вертикальных фрейма

На рис. 10.4 показаны три вертикальных фрейма, значения ширины которых составляют 40, 30 и 30 % от размера всей веб-страницы (листинг 10.4).

Рис. 10.4. Веб-страница, содержащая три вертикальных фрейма

Листинг 10.4. Пример создания веб-страницы, содержащей три вертикальных фрейма Три вертикальных фрейма

На рис. 10.5 показана конструкция, состоящая из целого окна (сверху) и окна, разделенного на два фрейма (снизу). Значения ширины фреймов составляют соответственно 45 и 55 % (листинг 10.5). Листинг 10.5. Пример создания веб-страницы из нескольких окон с фреймами Несколько окон с фреймами


Рис. 10.5. Веб-страница, содержащая несколько окон с фреймами

Рис. 10.6. Еще одна веб-страница, содержащая несколько окон с фреймами

177

178 Урок 10. Фреймы На рис. 10.6 показана конструкция, состоящая из целого окна (слева) и окна, разделенного на три фрейма (справа), значения ширины которых составляют соответственно 25, 35 и 40 % (листинг 10.6). Листинг 10.6. Пример создания веб-страницы из нескольких окон с фреймами Три окна в одном

На рис. 10.7 показано окно, разделенное на 4 одинаковых фрейма (листинг 10.7).

Рис. 10.7. Веб-страница, разделенная на 4 одинаковых фрейма

Листинг 10.7. Пример создания веб-страницы, разделенной на четыре фрейма Четыре равных окна


179

На рис. 10.8 показано окно, разделенное на четыре фрейма разной формы (лис тинг 10.8). Первоначально заданные размер фреймов были затем изменены традиционным способом — перетаскиванием мышью.

Рис. 10.8. Веб-страница, разделенная на 4 неодинаковых фрейма

Листинг 10.8. Пример создания веб-страницы, разделенной на четыре неодинаковых фрейма

В листингах 10.9 и 10.10 представлены примеры использования тега . По рисункам видно, что используемый для просмотра этих страниц браузер поддерживает фреймы, поскольку в обоих случаях информация, размещенная между тегами и , была проигнорирована.


Рис. 10.9. Веб-страница, разделенная на несколько фреймов

Листинг 10.9. Пример использования тега ФРЕЙМЫ <noframes> Ваша версия веб-браузера не поддерживает фрэймы!

Листинг 10.10. Второй пример использования тега ФРЕЙМЫ


181

<noframes> Браузер не может работать с фреймами

Рис. 10.10. Еще одна веб-страница, разделенная на несколько фреймов

Еще один пример веб-страницы с фреймами показан на рис. 10.11 (лис тинг 10.11).

Рис. 10.11. Веб-страница с фреймами

182 Урок 10. Фреймы Листинг 10.11. Пример создания документа с фреймами ДОКУМЕНТ С ФРЕЙМАМИ <noframes>
Этот документ содержит:

Одна фотография

Еще одна фотография

Примеры взаимодействия фреймов В этом разделе рассматриваются примеры взаимодействия фреймов. Такую взаимозависимую структуру могут иметь веб-страницы учебников, виртуальных музеев и просто сайты фирм. Однако для начала рассмотрим код веб-страницы, на которой, как показано на рис. 10.12, нет фреймов, но есть ссылка на другую страницу (листинг 10.12).

Рис. 10.12. Веб-страница со ссылкой на другую страницу

Примеры взаимодействия фреймов

183

Листинг 10.12. Пример создания веб-страницы со ссылкой на другую страницу ГЛАВНАЯ СТРАНИЦА Любимый город Следующая страница

Страницу, наподобие показанной на рис. 10.12, можно разместить в отдельном фрейме, тогда в другом фрейме можно будет увидеть документ, на который указывает ссылка. Соответствующий пример представлен на рис. 10.13 (листинг 10.13).

Рис. 10.13. Пример веб-страницы со ссылками

Листинг 10.13. Пример взаимодействия фреймов ВЗАИМОДЕЙСТВИЕ ФРЕЙМОВ

На рис. 10.14 представлена веб-страница, которая вызывается со страницы, показанной на рис. 10.13 (листинг 10.14). Листинг 10.14. Код страницы, отображаемой при щелчке на ссылке «Литейный проспект» ПРАВЫЙ ФРЕЙМ Литейный проспект

184 Урок 10. Фреймы Предыдущая страница Основная страница

Рис. 10.14. Веб-страница, которая вызывается со страницы на рис. 10.13

На рис. 10.15 представлена еще одна веб-страница, которая вызывается со страницы, показанной на рис. 10.13 (листинг 10.15).



185

Листинг 10.15. Код страницы, отображаемой при щелчке на ссылке «Таврический дворец» ПРАВЫЙ ФРЕЙМ Таврический дворец
Предыдущая страница Основная страница

На рис. 10.16 представлена еще одна веб-страница, которая вызывается со страницы, показанной на рис. 10.13 (листинг 10.16).


Листинг 10.16. Код страницы, отображаемой при щелчке на ссылке «Памятник Есенину» ПРАВЫЙ ФРЕЙМ Памятник Сергею Есенину в Таврическом саду
Предыдущая страница Основная страница

Если на странице, показанной на рис. 10.12, щелкнуть на ссылке Следующая страница, вызывается документ, показанный на рис. 10.13. А уже с этой веб-страницы можно перейти к документам, представленным на рис. 10.14, 10.15 и 10.16. Как уже отмечалось, тег <IFRAME> позволяет вставлять фреймы в документы, в которых не создан набор фреймов. Пример такой веб-страницы показан на рис. 10.17 (листинг 10.17).


Рис. 10.17. Веб-страница со вставленным фреймом

Листинг 10.17. Использование тега <IFRAME> ФРЕЙМЫ <iframe src="7.htm" width="400" height="500" scrolling="auto" frameborder="1">

Фреймы, включаемые в документ с помощью тега <IFRAME>, называют плавающими. Еще один пример веб-страницы с плавающим фреймом показан на рис. 10.18 (листинг 10.18).

Рис. 10.18. Веб-страница с плавающим фреймом


187

Листинг 10.18. Тег IFRAME ПЛАВАЮЩИЙ ФРЕЙМ Фреймы, включаемые в документ с помощью тега iframe, называют плавающими. <iframe src="3.htm" align=center scrolling=auto frameborder=1 width=60% height=40%>

Следующий пример, демонстрирующий, как использовать плавающие фреймы, показан на рис. 10.19 (листинг 10.19).

Рис. 10.19. Вывод изображений в плавающем фрейме

Листинг 10.19. Пример вывода изображений в плавающем фрейме ПЛАВАЮЩИЙ ФРЕЙМ

Гиперссылки для загрузки файлов во фреймы

Плавающий фрейм (плавающая область) Ювелирный магазин
<small>Витрина 1 Витрина 2 Витрина 3 Витрина 4 <iframe width=400 height=200 hspace=6 vspace=6 marginwidth=0 name=shop border=0 align=left src="image9.gif">

Этот тип фрейма позволяет с помощью гиперссылок просматривать различные файлы внутри одного документа.
Фрейму присваивается имя: внутри тега iframe пишется код name=(имя). Внутри гиперссылки пишется код target=(имя фрейма), что указывает на загрузку файла в названный фрейм.

Как уже отмечалось, наборы фреймов могут быть вложенными. Соответствующий пример показан на рис. 10.20 (листинг 10.20).

188 Урок 10. Фреймы Листинг 10.20. Пример создания веб-страницы с вложенными фреймами ВЛОЖЕННЫЕ ФРЕЙМЫ

Рис. 10.20. Веб-страница с вложенными фреймами

На рис. 10.21 показан плавающий фрейм с бегущей строкой, в качестве которой используется рисунок (листинг 10.21). Листинг 10.21. Пример создания плавающего фрейма с рисунком в качестве бегущей строки БЕГУЩАЯ СТРОКА В ПЛАВАЮЩЕМ ФРЕЙМЕ
Что такое плавающий фрейм:
Вот он: <iframe align=left hspace=10 vspace=10 src="Бегущая строка.htm" width=100 scrolling=no height=150>
Плавающий фрейм нигде не плавает.
Он работает, как и все фреймы, но при этом создается прямо на веб-странице c помощью парного тега iframe.


189

Синтаксис:<iframe width= ... height= ... hspace=... vspace=... src "адрес документа">

Рис. 10.21. Веб-страница с плавающим фреймом и рисунком в качестве бегущей строки

На рис. 10.22 показаны три фрейма без рамок (листинг 10.22). Как видите, при отсутствии рамок фреймы невозможно узнать, а об их существовании можно догадаться только по наличию вертикальных полос прокрутки для каждого фрейма.

Рис. 10.22. Пример фреймов без рамок

Листинг 10.22. Пример создания фреймов без рамки ФРЕЙМЫ БЕЗ РАМКИ


Подведем итоги В этом уроке рассказано, для чего нужны фреймы. Рассмотрены теги , и их атрибуты ROWS и COLS, BORDER, FRAMEBORDER, NAME, SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE, FRAMEBORDER. Представлено очень много примеров разнообразных фреймов.

Урок Урок 11. Ссылки Ссылки являются ключевым компонентом, делающим веб-страницы привлекательными для пользователей. Благодаря ссылкам, или, как иногда говорят, гиперссылкам веб-страница структурируется и связывается с другими документами или с другими разделами данного документа, что обеспечивает быстрое и удобное получение информации. Именно ссылки стали основной причиной ошеломляющей популярности Всемирной паутины, в которой пользователь может легко переходить от одной страницы к другой простым щелчком мыши. В этом уроке рассказывается о вставке ссылок в документ.

192 Урок 11. Ссылки

Универсальный указатель ресурса Для организации ссылок в HTML используется универсальный указатель ресурса (Uniform Resource Locator, URL), в общем случае имеющий следующий формат: метод://имя_сервера:порт/путь#якорь

Первая часть URL (до двоеточия) описывает метод доступа или сетевую службу, вторая часть (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно два прямых слэша после двоеточия обозначают имя машины. Наиболее часто используемыми методами являются file, http, ftp, mailto, telnet и news. Метод file. Метод file обеспечивает чтение файла с локального диска. Например, следующая запись открывает HTML-файл document.html из каталога /spb/ institute на машине пользователя: file:/spb/institute/document.html

Метод http. Метод http предоставляет доступ к веб-странице по протоколу HTTP. Это наиболее часто используемый метод доступа к HTML-документам в Сети. Например, следующая запись открывает доступ к домашней странице компании Russian: http://www.russian.com/

Метод ftp. Методом ftp выполняется запрос к FTP-серверу на получение файла, например: ftp://myname/directory/ninaname

Метод mailto. Метод mailto активизирует сеанс почтовой связи с указанными пользователем и хостом. Например, следующая запись активизирует отправку сообщения пользователю ninapetergof на машине spb.com, если браузер поддерживает запуск электронной почты: mailto: [email protected]

При использовании метода mailto слэши после двоеточия указывать не нужно. Как правило, после двоеточия сразу вводится адрес электронной почты абонента. Метод telnet. Метод telnet используется для обращения к службе telnet. Метод news. Метод news обеспечивает вызов службы новостей, если браузер поддерживает такой вызов. Например: news:relcom.www.support

Как и в случае метода mailto, при использовании метода news слэши после двоеточия указывать не нужно. Как правило, после двоеточия сразу вводится адрес группы новостей. Имя сервера — необязательный параметр URL, описывающий полное сетевое имя машины. Например, www.piter.com — полное сетевое имя сервера издательства «Питер». Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL, относится к той же машине, на которой находится HTML-документ, содержащий ссылку. Вместо символьного имени сервера может быть использован IP-адрес, однако это не рекомендуется из-за возможного конфликта имен с фиксированными локальными адресами внутренней сети.

Вставка ссылок в документ

193

Следом за именем сервера в URL указывается номер порта TCP, на котором функционирует веб-сервер. Если порт не указан, по умолчанию используется порт 80 (что характерно для подавляющего большинства URL-адресов). Далее в URL указывается частичный или полный путь к документу, который должен вызываться в результате перехода по ссылке. Якорь — это ссылка на место внутри текущего HTML-документа. Как будет показано далее, места в документе, на которые ссылается якорь, указываются в документе при помощи атрибута NAME. Текст URL-адреса не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно щелчком мыши).

Вставка ссылок в документ Для вставки ссылок в документ используется парный тег . Этот же тег позволяет вставить в документ якорь. Тег имеет атрибуты HREF, NAME, ID, METHODS, FRAME, TITLE, ACCESSKEY. Ниже перечислены атрибуты тега . Атрибут HREF. При вставке ссылки в документ обязательно указывается атрибут HREF. Значением атрибута является URL-адрес документа, на который указывает ссылка:

При использовании атрибута HREF любой текст, находящийся между тегами и , специальным образом выделяется веб-браузером (обычно подчеркивается и выделяется синим цветом). Атрибут NAME. Атрибут NAME указывается вместо атрибута HREF при вставке якоря в документ (см. раздел «Переходы внутри документа»). Атрибут ID. Атрибут ID идентичен атрибуту NAME с той разницей, что может вставляться в другие теги, а не только в тег , например:

При наличии такой пометки ссылка на нее в текущем документе может быть создана следующим образом: ссылка

Атрибут METHODS. Атрибут METHODS задает метод извлечения документа, например, FTP, Gopher и т. д. Синтаксис: необязательный текст

Атрибут FRAME. Атрибут FRAME позволяет указать фрейм, в котором должен быть визуализирован целевой документ. Синтаксис: необязательный текст

Атрибут TITLE. Атрибут TITLE служит для визуализации подсказки. Синтаксис: ССЫЛКА

194 Урок 11. Ссылки Атрибут ACCESSKEY. Атрибут ACCESSKEY позволяет указать «горячую» клавишу, при нажатии которой будет выполнен переход по ссылке. Синтаксис: ССЫЛКА

Ниже перечислены некоторые примеры ссылок. Ссылка на HTML-файл с использованием протокола HTTP: ССЫЛКА

Ссылка на ZIP-файл с использованием протокола HTTP: ССЫЛКА

Ссылка на TXT-файл с использованием протокола HTTP: ССЫЛКА

Ссылка на MPG-файл с использованием протокола HTTP: ССЫЛКА

Ссылка на EXE-файл с использованием протокола FTP: ССЫЛКА

Ссылка, инициирующая создание сообщения электронной почты: ССЫЛКА

Ссылка, инициирующая создание сообщения электронной почты с автоматически введенной темой сообщения: ССЫЛКА

Ссылка, инициирующая создание сообщения электронной почты с автоматически введенными темой и текстом сообщения: ССЫЛКА

Ссылка, инициирующая создание сообщения электронной почты с автоматически введенными темой и текстом сообщения, а также адресами для отправки копии и скрытой копии: ССЫЛКА

Ссылка на группу новостей: ССЫЛКА

Эта ссылка будет работать только, если провайдер поддерживает доступ к группам новостей. При наведении указателя мыши на ссылку он меняет свою форму, превращаясь в изображение кисти руки.

Внутренние ссылки Внутренние ссылки указывают на другую веб-страницу текущего веб-узла. Поэтому при создании внутренней ссылки в атрибуте HREF тега достаточно указать относительный путь поиска. Пример документа, содержащего внутренние ссылки, показан на рис. 11.1 (лис тинг 11.1).

Внешние ссылки

195

Рис. 11.1. Документ с внутренними ссылками

Листинг 11.1. Пример создания внутренних ссылок Лекции по информатике лекции по информатике
лекция 1

лекция 2

лекция 3

Внешние ссылки Внешние ссылки указывают на веб-страницы, не расположенные на текущем вебузле. Поэтому в атрибуте HREF тега необходимо указывать полный URL-адрес документа, включая название протокола и адрес веб-узла. Если файлы Лекция1.htm, Лекция2.htm и Лекция3.htm разместить в каталоге C:/Nina/HTML/, то код веб-страницы, представленной на рис. 11.1, будет выглядеть так, как показано в листинге 11.2. Листинг 11.2. Пример создания внешних ссылок ЛЕКЦИИ ПО ИНФОРМАТИКЕ <meta http-equiv=content-type content="text/html; charset=windows-1251"> <meta content="mshtml 6.00.2600.0" name=generator>

196 Урок 11. Ссылки лекции по информатике Лекция 1
Лекция 2
Лекция 3

Переходы внутри документа Как уже отмечалось, ссылки можно делать не только на другие документы, но и на различные фрагменты одного и того же документа. Это позволяет быстро переходить от фрагмента к фрагменту внутри документа, не прибегая к прокрутке. Для организации таких переходов используются специальные якоря, которые обычно вставляются в первую строку или в заголовок фрагмента, к которому должен выполняться переход. При вставке якоря также используется тег , но вместо атрибута HREF указывается атрибут NAME. Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелов, например: Переходы внутри документа

Рис. 11.2. Пример веб-страницы с якорями

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

197

Для ссылки на установленный якорь необходимо указать имя якоря в конце URLадреса после имени документа, отделив его символом #: Ссылка

Пример использования якоря приведен на рис. 11.2 (листинг 11.3). Листинг 11.3. Пример создания якорей в документе ПРИМЕР ЯКОРЯ Пример якоря
Оглавление

Глава 1

Глава 2

Глава 1

Текст главы 1

Глава 2

Текст главы 2

Когда пользователь щелкнет мышью на ссылке Глава 1, браузер перейдет сразу к первому разделу главы 1. Якорь может быть вставлен как в текущий, так и в другой документ. Во втором случае браузер выполнит загрузку нового документа и перейдет к указанному в нем разделу. Еще один пример страницы с внедренными якорями представлен на рис. 11.3 (листинг 11.4). Листинг 11.4. Еще один пример создания якорей в документе Пример создания якорей в большом документе ДИЗАЙН
Принципы дизайна

1. Что такое дизайн издания?

2.Принципы дизайна

3. Типичные ошибки

4. Объединение

5. Пропорции

6. Направление

7. Единство стиля

8. Контраст

1. Что такое дизайн издания?

Словари иностранных слов трактуют дизайн как художественное конструирование предметов.
Еще одна формулировка: Дизайн есть художественное проектирование предметов и сред.
Дизайн - искусство оформления.
Графический дизайн предназначен для того, чтобы было красиво.
Дизайн - вид художественной деятельности, проектирование изделий, обладающих эстетическими свойствами.

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

198 Урок 11. Ссылки Принципы дизайна, которых следует придерживаться при создании веб-страницы:
1. приближенность к цели;
2. выравнивание;
3. обзор;
4. шрифт, типы шрифтов и контраст шрифтов;
5. уместность,
6. пропорциональность,
7. контрастность,
8. целостность,
9. сдержанность,
10. точность в деталях.
Можно сказать и другими словами, что основными принципами дизайна являются:
1. уместность;
2. пропорции;
3. направление;
4. контраст;
5. целостный образ;
6. сдержанность;
7. внимание к деталям.

3. Типичными ошибками являются:
1. Избыток визуальных доминант.

Рис. 11.3. Пример большой веб-страницы с якорями

Графические ссылки

199

Графические ссылки Как вы помните (см. урок 3), ссылкой может быть не только текст, но и изображение. При этом код программы на языке HTML и изображение должны находиться в одном каталоге. Пример графической ссылки показан на рис. 11.4 (листинг 11.5). При щелчке на изображении открывается файл Листинг 8.3.htm.

Рис. 11.4. Графическая ссылка

Листинг 11.5. Пример создания графической ссылки Памятник пушкину в городе пушкин Памятник пушкину в городе Пушкин

Рис. 11.5. Графическая ссылка при отсутствии изображения

200 Урок 11. Ссылки Если изображение для ссылки и код программы на языке HTML находятся в разных каталогах, то вместо изображения на экране появится квадрат с красным крестом посередине (рис. 11.5). При этом сама ссылка останется работоспособной, то есть при щелчке на ней произойдет переход по указанному URL-адресу.

Подведем итоги В этом уроке рассказывается о вставке в документ ссылок, делающих веб-страницы привлекательными для пользователей. Вы познакомились с разными типами ссылок, в том числе с внешними ссылками, реализующими переходы между вебузлами, с внутренними ссылками, реализующими переходы между документами одного веб-узла, со ссылками, реализующими переходы внутри документа, с графическими ссылками, в которых роль активной части исполняет не текст, а изображение.

Урок Урок 12. Технологии XML, XHTML, DHTML Языки XML, XHTML, DHTML появились одновременно и в качестве альтернативы HTML и, несомненно, имеют право на существование. Их достоинства и недостатки можно долго обсуждать. В данном уроке приведем основные сведения об этих языках, а более подробную информацию можно найти на сайте http://www.w3schools.com.

202 Урок 12. Технологии XML, XHTML, DHTML

Технология XML XML (EXtensible Markup Language — расширенный язык разметки) — текстовый формат, предназначенный для хранения структурированных данных и обмена данными между разными системами обработки информации. Он представляет собой набор общих синтаксических правил. Наиболее важные черты XML: XML — язык гипертекстовой разметки, ориентированный на описание структурированных данных; XML позволяет использовать не только предопределенные теги, но и вводить свои собственные теги; XML не зависит от платформы. XML является разработкой корпорации W3C (спецификация языка была утверждена 10 февраля 1998 года). Если наш читатель листает страницы этой книги и мечтает создать веб-страницу на языке HTML, то мы просто уверены в том, что следующим его желанием будет создание веб-страницы на языке PHP (PHP: Hypertext Preprocessor) с использованием AJAX (Asynchronous JavaScript And XML). AJAX — это не новый язык программирования, а новая технология для создания лучшего, удобного и более интерактивного веб-приложения. Сразу становится ясным, что следует разобраться и в том, что такое XML. Когда в 1986 году появился язык SGML (Standard Generalized Markup Language — стандартный обобщенный язык разметки), то веб-страницы создавались на этом гибком, комплексном и всеохватывающем метаязыке. Но его сложность и, как следствие, дороговизна привели к тому, что потребовался более простой язык создания веб-страниц, которым успешно стал язык HTML. Однако со временем посчитали, что HTML прост и это стало его главным недостатком. Ограниченность количества тегов и полное безразличие к структуре документа побудили разработчиков в лице консорциума W3C к созданию такого языка разметки, который был бы не столь сложен, как SGML, и не настолько примитивен, как HTML. В результате на свет появился язык XML, сочетающий в себе простоту HTML, логику разметки SGML и удовлетворяющий требованиям Интернета. Однако не забудьте, что для создания документов на языке XML следует найти и использовать специальную программу — редактор XML. Скорее всего ее можно найти у ваших друзей или «скачать из Интернета». Пример использования XML, приведенный в листинге 12.1 (показан на рис. 12.1), является обращением ПРЕПОДАВАТЕЛЯ к СТУДЕНТАМ: Листинг 12.1. Пример создания веб-страницы на языке XML <note> ПРЕПОДАВАТЕЛЬ СТУДЕНТАМ ЖИЗНЕННАЯ ПОЗИЦИЯ УЧЕНЬЕ – СВЕТ, А НЕУЧЕНЬЕ - ТЬМА!

Технология XHTML

203

Рис. 12.1. Веб-страница на языке XML

В этом примере такие теги, как <note>, , и , не являются стандартными XML-тегами, а придуманы авторами XML-документа. Если код программы на языке HTML создается в обыкновенной программе (например, в Блокноте), то код программы на языке XML создается в специальном XML-редакторе, который предварительно следует инсталлировать. Существует достаточно много бесплатных XML-редакторов, их можно легко найти в Интернете. В настоящее время технология XML является достаточно модной и многие программисты ее используют.

Технология XHTML Язык XHTML является комбинацией HTML и XML. XHTML использует теги HTML 4.01 в сочетании со строгим синтаксисом XML. Таким образом, XHTML — это более строгая версия HTML. Наиболее важные отличия XHTML от HTML: XHTML-элемент должен размещаться в тегах; XHTML-тег должен всегда иметь закрывающийся тег; XHTML-тег должен быть записан в нижнем регистре; XHTML-документ должен иметь один корневой элемент. В листинге 12.2 приведен пример шаблона простейшего XHTML-документа (показан на рис. 12.2): Листинг 12.2. Пример создания веб-страницы на языке XHTML Название страницы
Содержимое страницы


Рис. 12.2. Простейший XHTML-документ

Рисунок получился малоинформативным только из-за того, что документ XHTML оказался простейшим. Объявление XHTML-документа может быть нескольких типов: XHTML 1.0 Strict (Строгий):

XHTML 1.0 Transitional (Промежуточный):

XHTML 1.0 Frameset (Структурный):

Технология DHTML Dynamic HTML — усовершенствованная версия HTML, которая поддерживает объектную модель документа (Document Object Model). Наряду с возможностями форматирования DHTML поддерживает условную логику и динамическое выполнение. В листинге 12.3 приведен пример DHTML-документа, в котором нажатие на кнопку управляет отображением/скрытием текста (показан на рис. 12.3).

а б Рис. 12.3. Управление отображением текста: а — исходный документ; б — со скрытым текстом

Технология DHTML

205

Листинг 12.3. Пример веб-страницы, управляющей отображением текста УПРАВЛЕНИЕ Отображением Текста
DYNAMIC HTML — УСОВЕРШЕНСТВОВАННАЯ ВЕРСИЯ HTML, КОТОРАЯ ПОДДЕРЖИВАЕТ ОБЪЕКТНУЮ МОДЕЛЬ ДОКУМЕНТА (DOCUMENT OBJECT MODEL)

В листинге 12.4 приведен пример DHTML-документа, в котором изменяется содержание текста при наведении на него курсора мыши. На рис. 12.4 приведен первоначальный документ — а, его вид после наведения курсора мыши на надпись — б и после того как курсор покинул надпись — в.

а

б

в Рис. 12.4. Управление отображением текста: а — исходный документ; б — вид после наведения курсора мыши на надпись; в — и после того как курсор покинул надпись

Листинг 12.4. Пример изменения текста при наведении на него курсора <script type="text/javascript"> function nameon() { document.getElementById('h2text').innerHTML="ТОЧКА ЕСТЬ ТО, ЧТО НЕ ИМЕЕТ ЧАСТЕЙ"; } function nameout() { document.getElementById('h2text').innerHTML="ЛИНИЯ ЕСТЬ ДЛИНА БЕЗ ШИРИНЫ"; }

206 Урок 12. Технологии XML, XHTML, DHTML НАВЕДИТЕ КУРСОР НА ЭТОТ ТЕКСТ!!!

В листинге 12.5 приведен пример DHTML-документа, содержащего движущийся текст, раздвигающий границы документа (показан на рис. 12.5). В этом примере текст движется очень интересно. Слово «АКСИОМА» движется вправо, а слово «ЛЕММА» движется вниз.

Рис. 12.5. Пример движущегося текста

Листинг 12.5. Пример движущегося текста <script type="text/javascript"> var i=1 function starttimer() { document.getElementById('h_one').style.position="relative"; document.getElementById('h_one').style.left=+i; document.getElementById('h_two').style.position="relative"; document.getElementById('h_two').style.top=+i; i++; timer=setTimeout("starttimer()",10); } function stoptimer() { clearTimeout(timer); } АКСИОМА ЛЕММА

Технология DHTML

207

В листинге 12.6 приведен пример DHTML-документа (показан на рис. 12.6), в котором при движении курсора мыши по экрану будет перемещаться рисунок (файл рисунка, например БЕЛКА.jpg, должен находиться в этой же папке, что и документ веб-страницы).

Рис. 12.6. Пример передвижения рисунка вместе с курсором

Листинг 12.6. Пример движущейся за курсором картинки <script type="text/javascript"> function cursor(event) { document.getElementById('trail').style.visibility="visible"; document.getElementById('trail').style.position="absolute"; document.getElementById('trail').style.left=event.clientX+10; document.getElementById('trail').style.top=event.clientY; } ПЕРЕДВИГАЙТЕ КУРСОР ПО СТРАНИЦЕ

В листинге 12.7 приведен пример DHTML-документа, в котором нажатие на кнопку управляет дрожанием окна Windows. Исходный документ показан на рис. 12.8. Дрожание окна трудно отразить на рисунке, поэтому поверьте на слово, создайте страницу и посмотрите сами.


Рис. 12.7. Управление дрожанием окна WINDOWS

Листинг 12.7. Пример управления дрожанием окна WINDOWS <script> function startEQ() { richter=5; parent.moveBy(0,richter); parent.moveBy(0,-richter); parent.moveBy(richter,0); parent.moveBy(-richter,0); timer=setTimeout("startEQ()",10); } function stopEQ() { clearTimeout(timer); }

В листинге 12.8 приведен пример DHTML-документа, в котором появление/исчезновение текста управляется двойным щелчком кнопки мыши при наведении курсора на надпись (показан на рис. 12.8). Листинг 12.8. Появление надписи при двойным щелчке кнопки мыши <script type="text/javascript"> function gettip(txt) { document.getElementById('tip').innerHTML='Организация W3Schools является разработчиком стандартов для World Wide Web'; }
ДВАЖДЫ ЩЕЛКНИТЕ ПО НАДПИСИ"W3Schools.com"


209

W3Schools.com

Рис. 12.8. Появление надписи при двойным щелчке кнопки мыши

Подведем итоги В этом уроке приведены начальные сведения о создании веб-страниц на языках XML, XHTML, DHTML.

Урок Урок 13. Баннерная реклама В 1855 году в Лондоне вышла книга Томаса Смита, в которой он очень интересно писал про рекламу: «В первый раз человек смотрит на рекламное сообщение и не видит его. Во второй раз он не замечает его. В третий раз он осознает его присутствие. В четвертый раз он с трудом припоминает, что где-то это уже видел. В пятый раз он читает рекламное сообщение. В шестой раз он выхватывает его взглядом из массы других сообщений. В седьмой раз он перечитывает его и говорит: “О Господи!” В восьмой раз он произносит: “Ну вот, опять эта проклятая вещь!” В девятый раз он задумывается, что это за вещь? В десятый раз он подумывает расспросить соседа, не случалось ли ему покупать этой вещи. В одиннадцатый раз он поражается, каким образом эта вещь может приносить рекламодателю прибыль. В двенадцатый раз он приходит к выводу, что, вероятно, эта вещь чего-нибудь да стоит. В тринадцатый раз он заключает, что эта вещь может определенно ему понадобиться. В четырнадцатый раз он припоминает, что всю жизнь мечтал об этой вещи. В пятнадцатый раз он сокрушается, что не может себе позволить купить эту вещь. В шестнадцатый раз он говорит себе: “Придет время — и я обязательно куплю эту вещь”. В семнадцатый раз он вносит в свои планы покупку этой вещи. В восемнадцатый раз он клянет свою нищету. В девятнадцатый раз он тщательно пересчитывает деньги. В двадцатый раз он вновь видит рекламное объявление — и покупает эту вещь (или заставляет купить ее свою супругу)». Эту цитату, которая воспроизведена во многих учебниках по рекламе, издававшихся на протяжении всего XX столетия, в полной мере можно отнести к баннерной рекламе, являющейся темой этого урока.

Определение баннера

211

Определение баннера Баннер (от англ. banner — знамя, флаг) — небольшой рекламный модуль стандартного размера (468×60, 88×31 и т. д.), который обычно помещается сверху или внизу веб-страницы. Баннер может быть текстовым, графическим или интерактивным, содержать анимацию. Как правило, баннер представляет собой ссылку на сервер рекламодателя, рекламирующего тот или иной ресурс Интернета. Обычно изображение для баннера имеет формат GIF или JPG, хотя встречаются баннеры других форматов, созданные с помощью технологий Java, ShockWave и т. д. В настоящее время не существует официально принятых стандартов на размер баннеров, хотя наиболее распространенным является размер 468×60 пикселов. Первой вехой в стандартизации размеров баннеров стали рекомендации, предложенные организацией Internet Advertising Bureau совместно с CASIE (The Coalition for Advertising Supported Information & Entertainment): 468×60 — полный горизонтальный баннер (16,51×2,12 см); 460×55 — полный горизонтальный баннер (16,2×1,94 см); 234×60 — половинный баннер (8,26×2,12 см); 125×125 — квадратный баннер (4,41×4,41 см); 120×90 — кнопка (4,23×3,18 см); 120×60 — кнопка (4,23×2,12 см); 88×31 — микрокнопка (3,1×2,12 см); 120×240 — вертикальный баннер (4,23×8,47 см). Размеры в сантиметрах указаны для монитора, имеющего разрешение 72 пиксела на дюйм. Так как необходимо, чтобы баннер загружался на страницу как можно быстрее, существует ограничение на размер баннера в килобайтах. Так, для баннера 468×60 максимальный размер обычно составляет 10–15 Кбайт.

Эффективность баннеров Одной из самых важных характеристик баннера является отношение числа щелчков мышью на баннере к числу его показов. Так, если баннер был показан на какойлибо странице 1000 раз, а щелкнули на нем и, соответственно, с его помощью перешли на сайт рекламодателя 50 раз, то эффективность (его отклик) такого баннера равна 5 %. По статистике средний отклик баннеров в WWW составляет 2,11 %. На сайте www.promo.ru в энциклопедии интернет-рекламы Тимофей Бокарев приводит рекомендации по созданию баннеров. Волшебная фраза «Click Here». Самый простой способ увеличить количество щелчков на вашем баннере — попросить об этом пользователя. По статистике баннеры, содержащие слова типа «click here», «жми сюда», «visit now», «enter»

212 Урок 13. Баннерная реклама и т. д., имеют отклик на 30 % больше, чем без оных. Хорошей идеей является размещение на баннере псевдокнопки или полосы прокрутки. Ничто человеческое пользователю сети не чуждо. Следует сделать баннер загадочным, заинтриговать пользователя: Что они этим хотели сказать? Куда ведет сей баннер? Размер баннера. Баннеры большего размера имеют значительно больший отклик, чем баннеры меньшего размера. Хотя, разумеется, часто за размещение на веб-странице баннера большего размера приходится больше платить. Использование анимации. Движение, характерное для анимированных баннеров, всегда приковывает взгляд. По статистике отклик у таких баннеров на 25 % выше, чем у их статичных баннеров. Изображения. Изображения приковывают внимание пользователя и могут дополнять рекламный слоган по смыслу. Следует стараться органично встроить изображение в баннер, а не просто сделать его прямоугольной частью баннера. Цвет. Для баннера следует использовать яркие цвета — они привлекают к себе взгляд пользователя — и подобрать оптимальное цветовое сочетание. Тестирование. Попытайтесь одновременно разместить на странице несколько однотипных баннеров, а затем незначительно изменяйте текст, добавляйте, убирайте какие-либо черты. Иногда даже незначительные изменения текста или композиции баннера дают значительное изменение отклика. Протестируйте эти баннеры некоторое время, после этого можно убрать те, которые имеют более низкий отклик по сравнению с остальными. Положение на странице. Помимо дизайна баннера на его отклик имеет сильное влияние положение на странице. Как уже отмечалось, средний отклик баннера в Интернете составляет примерно 2 %. Возникает ощущение, что только 2 % показов баннера идут на пользу рекламодателя (приводят посетителей на его веб-сайт), а остальные 98 % тратятся впустую. Это совершенно не так! Каждый показ баннера приносит рекламодателю ощутимую пользу, являясь прекрасным инструментом продвижения торговой марки компании, ее товаров/услуг, ее веб-сайта. Чтобы реклама работала, баннер должен быть выполнен в соответствующем ключе: профессиональный дизайн, хорошо продуманный рекламный слоган, использование соответствующих изображений и т. д. Ниже приведены некоторые результаты исследований, которые показывают отношение пользователей Интернета к рекламе в сети (по данным сайта http://www. iab.net/): 18 % горячо поддерживают; 41 % одобряют; 34 % не возражают; 6 % против; 1 % крайне не одобряют.

Примеры баннеров

213

При размещении баннерной рекламы дополнительную прибыль за счет роста продаж своих товаров получают не только непосредственные рекламодатели, но и те компании, которые занимаются размещением рекламы на своих веб-страницах.

Примеры баннеров Хотя в начале этого урока были приведены размеры стандартных банеров, на современных сайтах появляются модули нестандартных размеров, причем наблюдается тенденция к увеличению размеров баннеров. На рис. 13.1 показан баннер размером 600×125 пикселов, что при разрешении 72 пиксела на дюйм составляет 21,17×4,41 см (листинг 13.1).

Рис. 13.1. Баннер размером 600×125 пикселов

Листинг 13.1. Пример создания баннера размером 600×125 пикселов БАННЕР ШКОЛЫ

Рис. 13.2. Вертикальный баннер размером 240×400 пикселов

214 Урок 13. Баннерная реклама В последнее время очень модными стали вертикальные баннеры, один из которых показан на рис. 13.2 (листинг 13.2). Этот баннер имеет размеры 240×400 пикселов, что составляет 8,47×14,11 см при разрешении 72 пиксела на дюйм. Иногда высота вертикального баннера увеличивается еще больше, и чтобы его просмотреть, требуется полоса прокрутки. Листинг 13.2. Пример создания вертикального баннера ВЕРТИКАЛЬНЫЙ БАННЕР

Одними из самых распространенных считаются баннеры размером 468×60 пикселов, что составляет 14,11×2,12 см при разрешении 72 пиксела на дюйм. Пример показан на рис. 13.3 (листинг 13.3).


Листинг 13.3. Пример создания баннера размером 468×60 пикселов БАННЕР

Иногда на страницу помещают баннер в виде кнопки размером 88×31 пикселов, что составляет 3,1×1,09 см при разрешении 72 пиксела на дюйм. Пример показан на рис. 13.4 (листинг 13.4).

Рис. 13.4. Баннер в виде кнопки

Листинг 13.4. Пример создания баннера в виде кнопки БАННЕР В ВИДЕ КНОПКИ

Баннер размером 234×60 пикселов, что составляет 8,26×2,12 см при разрешении 72 пиксела на дюйм, показан на рис. 13.5 (листинг 13.5).


215



Баннер размером 474×161 пикселов, что составляет 16,72×5,68 см при разрешении 72 пиксела на дюйм, показан на рис. 13.6 (листинг 13.6).



О том, как создать анимационное изображение для веб-страницы и в частности — для баннера, будет рассказано в уроке 19.

Подведем итоги В этом уроке рассказывается, что такое баннер и баннерная реклама. Рассмотрены вопросы эффективности баннерной рекламы. Приведены многочисленные примеры баннеров.

Урок Урок 14. Публикация и поиск документов В этом уроке рассматриваются вопросы размещения материалов в Интернете, что подразумевает выполнение двух этапов: подготовку веб-сайта; публикацию веб-сайта. Публикация веб-сайта осуществляется сохранением его страниц на доступном дисковом пространстве специальных веб-сайтов, которые называются хостами (от англ. host — хозяин), а сама эта услуга — хостингом. Хостинг — услуга по предоставлению вычислительных мощностей для физического размещения информации на сервере, постоянно находящемся в сети (обычно Интернет). По условиям предоставления хостинг часто разделяется на платный и бесплатный. Обычно компания, предоставляющая бесплатный хостинг, зарабатывает путем показа рекламы на страницах, размещенных на нем. Одним из важных критериев выбора хостинга является используемая операционная система, поскольку от этого зависит программное обеспечение, которое будет поддерживать функциональность тех или иных сервисов. Важным аспектом описания хостинга является наличие тех или иных служб и возможностей (Perl, PHP, ASP, Ruby, баз данных и др.). Наиболее известными хостингами являются www.narod.ru, www. domishko.ru, www.gudzon.net, www.echo-host.com. Список провайдеров бесплатного хостинга размещается по адресу http:// www.besthostings.ru/freehosting/search.php. Так, на сайте http://www.vanta.ru/hosting/host3.php перечислены сайты, в том числе русскоязычные, англоязычные, немецкоязычные, бесплатно предлагающие услуги веб-хостинга: www.AGAVA.ru, www. Boom.ru, www.By.ru, www.Chat.ru, www.Hoha.ru, www.Holm.ru, www.Hut. ru, www.Km.ru, www.narod.ru, www.newmail.ru, www.RussianZone.ru.

Подготовка и публикация веб-сайта

217

Подготовка и публикация веб-сайта Сайт (от англ. site — участок) — это ресурс Интернета, один из разделов сервера, полностью посвященный какой-либо одной теме. В отличие от сервера, для обслуживания сайта, как правило, не выделяется отдельная серверная программа, а все сайты, расположенные на сервере, обслуживаются одной такой программой. Сайт является частью сервера, хотя большинство сайтов имеют собственное доменное имя. Сайты могут включать в себя подразделы, но тем не менее все подразделы должны быть подчинены общей идее, единому стилю исполнения. Сайт — самостоятельная логическая единица, состоящая из комплекса связанных между собой по смыслу текстовых документов и графических иллюстраций. В качестве примера можно выполнить подготовку и публикацию сайта Народ.Ру, расположенного по адресу http://www.narod.yandex.ru (рис. 14.1).

Рис. 14.1. Главная страница сайта Народ.Ру

Для создания своего веб-сайта нужно щелкнуть по надписи Создайте свой сайт и следовать предложенным указаниям. Необходимо придумать название сайта для регистрации и пароль, с помощью которого можно входить на сайт и выполнять его коррекцию. Вариант своей главной страницы можно выбрать из предложенных заготовок, а можно создать свою главную страницу «с нуля», задав определенный фон и разместив на нем рисунки и текстовую информацию. Сайт Народ.Ру заботливо относится к своим клиентам, предлагая различные заготовки и варианты создания страниц, а также сообщая разнообразную полезную

218 Урок 14. Публикация и поиск документов информацию, например о размере получающегося файла или о других адресах, на которых можно разместить свои веб-страницы.

Поиск информации в Интернете Существуют три основных способа поиска информации в Интернете: по тематическим ссылкам, по URL-адресам и с помощью поисковых машин. Проще всего искать информацию по тематическим ссылкам — достаточно щелкать мышью на предлагаемых ссылках, последовательно сужая круг поиска, например: Покупки  Спортивные товары  Тренажеры и т. д. Другие виды поиска (по URL-адресам и поиск с помощью поисковых машин) несколько сложнее.

Поиск информации по URL-адресам Чтобы искать информацию по URL-адресам, нужно иметь представление о доменной системе имен. В соответствие с этой системой адреса компьютеров делятся на части — так называемые домены (от англ. domain — область), причем символы последней части URL-адреса представляют собой тематические или географические домены. Ниже перечислены некоторые наиболее известные домены подобного рода (домены верхнего уровня). Тематические домены: com — корпорации; edu — учебные заведения; gov — невоенные правительственные учреждения; mil — военные учреждения; net — сетевые организации;. org — прочие организации; int — международные организации; firm, biz — бизнес; store — виртуальные магазины; web — веб-организации; arts — организации культуры; rec — организации развлечений; info — организации, предоставляющие информацию; nom — индивидуальные пользователи; arpa — исторически возникший домен верхнего уровня, соответствующий сети ARPANET (предшественнице Интернета). Географические домены: at — Австрия (Austria); an — Австралия (Australia);

Поиск информации в Интернете

219

be — Бельгия (Belgium); bg — Болгария (Bolgaria); cа — Канада (Canada); ch — Швейцария (Switzerland); cy — Кипр (Cypr); de — Германия (Germany); es — Испания (Espania); fi — Финляндия (Finland); gr —Греция (Greece); it — Италия (Italy); jp — Япония (Japan); hl — Голландия (Holland); no — Норвегия (Norway); pl — Польша (Poland); ru — Россия (Russia); se — Швеция (Sweden); tr — Турция (Turkey); uk — Великобритания (United Kingdom); us — США (United State). Зная информацию о доменах верхнего уровня, пользователь при поиске сайта уже имеет примерное представление о том, что нужно вводить в адресную строку браузера. Далее представлены некоторые примеры. Для поиска корпоративных сайтов к названию фирмы, предприятия, организации нужно добавить домен .com, а впереди подставить символы, определяющие, как вы уже знаете, метод доступа (www). Вписав полученные символы в адресную строку браузера, вы наверняка получите адрес нужной веб-страницы, например: www.adobe.com — адрес компании Adobe, известного производителя графических приложений; www.microsoft.com — адрес корпорации Microsoft; www.europages.com — справочник на английском, французском, немецком, испанском и итальянском языках по более чем по 150 тыс. компаниям, расположенным во всех странах Европы; www.intellimatch.com — бесплатный банк данных резюме, предлагающий услуги как работодателям, так и тем, кто хочет найти работу в США. Для поиска российских серверов к названию фирмы, предприятия, организации следует добавить домен .ru, а впереди подставить символы www, например: www.students.ru — сервер российского студенчества; www.translate.ru — электронный переводчик текстов:

220 Урок 14. Публикация и поиск документов www.ntv.ru — телекомпания НТВ; www.hermitage.ru — сервер Эрмитажа; www.resume.ru — база данных вакансий и резюме. При поиске сайтов крупных учебных заведений к названию американского или английских университета прибавляется домен .edu, например: www.oxford.edu — сайт Оксфордского университета. В каждой стране есть свой региональный сервер, например: www.russia.net, www.ru.net — Россия; www.usa.net — США; www.uk.net — Великобритания.

Популярные адреса Сетевой проект ВКОНТАКТЕ.РУ (http://vkontakte.ru) появился сравнительно недавно, летом 2006 года, тем не менее этот проект получил широкое распространение в основном среди молодежи, и в настоящее время является универсальным средством поиска знакомых. Это самый посещаемый сайт в России и на Украине, им пользуется уже более 83 миллионов человек. Аналогичным сайтом является сайт www.odnoklassniki.ru (Одноклассники.ru), который поможет вам найти ваших старых друзей и узнать чем и как они живут сейчас. Каждый житель страны, несомненно, имеет желание заглянуть на сайт президента и воспользуется адресом www.kremlin.ru. На этом сайте много страниц и он предоставляет различные возможности (видео- и аудиосюжеты, терминологический глоссарий и др.). Например, можно написать электронное письмо президенту, отправить его и президент его обязательно получит. Можно обратиться к блогу. Что такое блог? Блог — это публичный электронный дневник в Интернете с комментариями. Обычный дневник мало кому показывают. Блог открыт для чтения, более того, читатели могут оставлять к записям свои комментарии. Широкую популярность получил сайт http://twitter.com, представляющий собой систему микроблогов, которые позволяют отправлять короткие текстовые заметки пользователям ресурса (до 140 символов), используя веб-интерфейс, смс или другие программы-клиенты. Название сайта происходит от англ. «tweet» — «щебетать, болтать». По состоянию на январь 2010 года число зарегистрированных пользователей составило около 60 миллионов человек, в России их более 183 тысяч человек. С 2009 года компания стала приносить доход, а с апреля 2010 года начала размещать на своем сайте рекламу. Чтобы общаться с читателями – другими блоггерами, ведущими свои блоги на твитере, необходимо зарегистрироваться и создать свое уникальное имя. При регистрации пользователь создает аккаунт. Аккаунт — это учетная запись, содержащая сведения, которые пользователь сообщает о себе некоторой компьютерной системе. В понятие аккаунт входит логин,

Поиск информации в Интернете

221

пароль, а так же набор прав доступа. Будьте внимательны, чтобы злоумышленники не создали ваш псевдо-аккаунт.

Поисковые системы Поисковых систем, которые еще называют поисковыми программами, поисковыми серверами или поисковыми машинами, в Интернете множество, в том числе русскоязычных. Чтобы вызвать поисковую систему, необходимо в адресную строку браузера ввести ее адрес. Вот адреса некоторых наиболее известных поисковых систем: http://www. google.com, http://www.rambler.ru, http://www.yahoo.com, http://www.bing.com, http:// www.aport.ru, http://www.yndex.ru, http://www.list.ru, http://www.lycos.com, http:// www.altavista.com, http://www.go.com, http://www.excite.com, http://www.nigma.com, http://www.hotbol.com. После загрузки поисковой системы в поле поиска пользователю следует ввести запрос (искомую строку текста) на любом языке (русском, английском и др.) и щелкнуть на кнопке поиска. В результате выполнения запроса появляется список адресов веб-страниц, содержащий документы, в которых встречаются введенные в запросе слова. В этом списке указываются веб-адреса страниц, их названия, фамилии авторов, краткие описания. Выбрав нужный адрес, можно перейти к найденному документу. Обычно в результате поиска предлагается множество документов (иногда тысячи), которые сгруппированы постранично. Чтобы проще было ориентироваться в таком количестве документов, поисковая система обычно сортирует их — первыми предлагаются те страницы, которые, по мнению поисковой системы, точнее удовлетворяют запросу. Основу любой поисковой системы составляет сетевой робот, называемый также пауком (spider), червем (worm), или ползуном (crawler). Поисковая система рассылает в сеть таких пауков, пытаясь по возможности просмотреть максимальное количество веб-страниц, и сохраняет их адреса и содержимое в своей базе данных. После того как пользователь вводит запрос и щелкает на кнопке поиска, поисковая система просматривает свою базу данных и выводит на экран результат поиска. Если есть запись электронного адреса ресурса (URL) http://www.google.ru/history/ gagarin1961.htm, то: history/gagarin1961.htm — относительный сетевой путь, на котором располагается указанный файл; http://www. google.ru/history/gagarin1961.htm — полный универсальный локатор ресурса, на котором находится запрашиваемый файл; http:// — сетевой протокол, по которому идет запрос данных. В данном случае гипертекстовый протокол передачи данных; www.google.ru — адрес сервера.

222 Урок 14. Публикация и поиск документов

Взаимодействие в сети В IP-сетях иногда встречаются проблемы, связанные с адресацией, поэтому иногда проверяют конфигурацию адресов. Командами, позволяющими протестировать сетевой комплекс, являются команды telnet, ping, trace, show ip route и show interfaces. Так, например, если проверить связь с сайтом электронной почты www. mail.ru, необходимо в командной строке написать команду трассировки trace: C:\>trace www.mail.ru

В результате будет указана трассировка маршрута с указанным числом пунктов прохождения информации.

Подведем итоги В этом уроке рассказано о подготовке и публикации собственного веб-сайта, перечислены адреса бесплатных веб-хостов, в качестве примера описана процедура создания сайта на примере сайта Народ.Ру. Во второй части урока рассказывается об основах поиска информации в Интернете.

Урок Урок 15. Еще раз с начала В этом уроке рассматриваются теги, которые находятся в самом начале веб-страницы, а именно теги , и <META>.

224 Урок 15. Еще раз с начала

Версия языка HTML Первым тегом созданной начинающим пользователем компьютера веб-страницы является тег . Но стоит только сохранить веб-страницу под новым именем, в ее начале появляется новая строка, начинающаяся с тега . Тег предоставляет сведения о версии языка HTML, используемой в текущем документе. Эти сведения размещаются в первой строке документа в форме SGML-объявления. Тег должен быть первым тегом в документе. Этот тег впервые появился в HTML версии 2.0. Теоретически тег должен помочь веб-серверу выбрать способ обработки документа, информируя его о том, какие дескрипторы могут находиться на странице, однако в настоящее время он обычно игнорируется браузерами, поэтому, строго говоря, указывать его не обязательно. Синтаксис:

Пример:

Ниже перечислены параметры тега . Элемент верхнего уровня объявляется в определении типа документа (Document Type Definition, DTD). Так как язык HTML развился из стандартного обобщенного языка описания документов (Standard General Markup Language, SGML), являясь его производной, созданной для разметки текстовых документов, этим и объясняется необходимость задания типа документа. Документы, в которых могут встречаться те или иные элементы, были отнесены к различным типам документов (document type). Чтобы описать элементы разметки документа, достаточно выбрать стандартное определение типа документа. Для HTML-документа используется значение HTML. Поскольку HTML-документы являются общедоступными, в качестве уровня доступа используется значение PUBLIC. Признак регистрации указывает на то, зарегистрирована (+) или нет (–) данная организация в ISO. Консорциум W3C (World Wide Web Consortium) в ISO не зарегистрирован, поэтом нужно указывать знак – (минус). В качестве организации указывается организация, ответственная за создание и поддержку DTD. За поддержку определения типа HTML-документа отвечает консорциум W3C, поэтом используется значение W3C. В случае языка HTML в качестве типа объекта используется значение DTD. Метка определяет версию языка HTML. Для HTML 4.0 используется значение HTML 4.0, HTML 4.0 Transitional или HTML 4.0 Frameset. Код языка — двухбуквенное обозначение, принятое в ISO. Например, код английского языка — EN. Идентификатор URI определяет расположение DTD. HTML 4.0 поддерживает следующие идентификаторы URI:

META-информация

225

http://www.w3.org/TR/REC-html40/strict.dtd; http://www.w3.org/TR/REC-html40/loose.dtd; http://www.w3.org/TR/REC-html40/frameset.dtd; http://www.w3.org/TR/REC-html40/HTMLlat1.ent; http://www.w3.org/TR/REC-html40/HTMLsymbol.ent; http://www.w3.org/TR/REC-html40/HTMLspecial.ent. Общая схема документа с тегом выглядит следующим образом: ЗАГОЛОВОК ДОКУМЕНТА "Тело" документа, содержащее теги, которые позволяют управлять информацией, выводимой на экран

META-информация Кроме обычных тегов существуют еще и так называемые META-теги. Они не отображаются браузером, но могут содержать некую служебную информацию, значимую для поисковых систем (например, ключевое слово, указание на авторство, описание). Как и тег , META-информация может появляться автоматически после первого сохранения страницы под новым именем, располагаясь между тегами и : ЗАГОЛОВОК ДОКУМЕНТА <meta http-equiv=content-type content="text/html; charset=windows-1251"> <meta content="mshtml 6.00.2600.0" name=generator> "Тело" документа, содержащее теги, которые позволяют управлять информацией, выводимой на экран

Тег <META> служит для размещения дополнительной информации о веб-странице, включая данные о документе, его авторе, дате создания, списки ключевых слов для поисковых машин и т. п. Общий синтаксис META-тега: <meta name="имя_meta-тега" content="содержание_meta-тега">

Еще один вариант: <meta http-equiv="имя_meta-тега" content="содержание_meta-тега">

Разница между этими двумя атрибутами в том, что атрибут NAME не обрабатывается браузером, а HTTP-EQUIV обрабатывается.

Атрибут NAME Ниже представлены примеры тега <META> с атрибутом NAME. Описание содержимого документа: <meta name="description" content="описание ресурса">

Описание ресурса рекомендуется делать небольшим (не более 250–300 символов), например: <meta name = "description" content = "Эта страница предназначена для предоставления справочной информации по html">

226 Урок 15. Еще раз с начала Список ключевых слов для поисковых систем: <META NAME="keywords" CONTENT="Ключевые слова">

Ключевые слова в списке пишутся через пробел или запятую. Эти слова нужны поисковым машинам для индексации страницы в своем каталоге, например: <meta name="keywords" content="HTML html JavaScript javascript css CSS VBScript vbscript VRML vrml php PHP Perl perl теги атрибуты листинг браузер">;

Имя автора документа, адрес его электронной почты, домашний адрес, другие данные: <meta name="author" content="Информация_об_авторе">

Название программы, с использованием которой создан документ: <meta name="generator" content="Название_программы">

Время «устаревания» документа (то есть срок годности): <meta name = "expires" content = "Дата>

Адрес электронной почты: <meta name="Reply-to" content="Имя@Адрес">

Описание авторских прав на документ: <meta name="Copyrigh" content="Авторские_права">

Атрибут HTTP-EQUIV Ниже представлены примеры тега <META> с атрибутом HTTP-EQUIV. Следующая запись позволяет вернуться через заданный промежуток времени на определенный адрес. <meta http-equiv="Refresh" content="0; URL=http://www.piter-press.ru">

В данном случае сразу после загрузки страницы браузер перейдет на адрес http://www.piter-press.ru. MIME-тип содержимого и его кодировка: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

В данном случае в качестве MIME-типа указано значение text/html, то есть гипертекст, а в качестве кодировки — значение windows-1251. Вообще говоря, явно указывать кодировку не рекомендуется. Браузеры и сами неплохо справляются с ее выбором. Время «устаревания» документа (то есть срок годности): <meta http-equiv="expires" content="Mon, 7 Nov 2004 10:00:00 GMT">

Срок годности указывается в формате RFC-850 (стандарт электронной почты): Mon — день недели; 7 Nov — день месяца и месяц; 2004 — год;

Связьвеб-страницысдополнительнымифайлами

227

10:00:00 — время (часы, минуты и секунды); GMT — временной пояс (в данном случае время указано московское). По истечении указанной даты документ будет удален из локального кэша и при повторном обращении заново запрошен из сети. В этой процедуре участвуют и браузер, и сервер. Если указывается нулевая дата, документ удаляется сразу после загрузки, то есть вообще не сохраняется в кэше.

Связь веб-страницы с дополнительными файлами Связь текущей страницы с другими файлами задается тегом . Основное применение — обращение к описанным в отдельном файле стилям. Тег вставляется между тегами : <nolayer> <span class=text1>В могучих елях цвел багульник <span class=text1>Вблизи Москвы. Не просто так. <span class=text1>БАГУЛЬНИК <span class=text1>Стихотворение Ивана Комолова <span class=text19>email:ninapetergof@ mail.ru<span class=text1>
<span class=text1>http://www.uprint.spb.ru <span class=tnormal>Он отвергал и мрак и тени, <span class=tnormal>В апреле май провозглашал

На рис. 17.9 показана еще одна веб-страница, выполненная с помощью CSS (листинг 17.10).

Рис. 17.9. Еще один пример использования стилей

252 Урок 17. Каскадные листы стилей Листинг 17.10. Пример более сложной программы на использование стилей ПРИМЕР ИСПОЛЬЗОВАНИЯ ФАЙЛОВ С РАСШИРЕНИЕМ CSS <meta http-equiv=content-type content="text/html; charset=windows-1251"> <meta content="mshtml 6.00.2600.0" name=generator>

Россия, Санкт-Петербург
петродворец

<span style="width: 443px; height: 100%">

Большой Дворец
фонтаны в нижнем парке <span class=spn id=mmm onmouseover="mmm.style.display='inline';bgmmm.style. display='inline';" style="display: none" onmouseout="mmm.style.display='none';bgmmm.style.display='none';"> Пирамида <span class=spn style="left: -40px; top: 16px">

Примеры использования стилей

253

Золотая Горка <span class=spn style="left: -22px; top: 16px"> Марли <span class=spn style="left: -34px; top: 16px"> Большой Дворец <span class=spn style="left: -16px; top: 16px"> Улица Аврова <span class=spn style="left: 0px; top: 16px"> Воронихинские колонны <span class=spn style="left: -20px; top: 16px"> Серпуховская <span class=spn style="left: -17px; top: 16px"> Особняк на фонтанке
Юсуповский дворец
Аничков мост
На Фонтанке
Невский проспект
собор
<style>#bn { display: block } #bt { display: block }

254 Урок 17. Каскадные листы стилей В последней программе используется парный тег <SPAN>, который создает структуру текстового уровня, определяемую пользователем. Тег <SPAN> появился в HTML версии 4.0 и применяется в сочетании с каскадными листами стилей.

Подведем итоги В этом уроке даны начальные сведения по большой и сложной теме каскадных листов стилей. Представлены определения стилей, их уровней, синтаксиса. Рассмотрены методы группирования листов стилей. Рассказано о четырех вариантах использования листов стилей в HTML-документе — встраивание, подключение, связывание, импорт. В заключение урока приведены реальные примеры применения стилей.

Урок Урок 18. Подготовка . изображений . для веб-страниц Изображение, которое помещается на веб-страницу, должно быть особым образом подготовлено, в частности иметь небольшой размер в байтах, чтобы содержащая его веб-страница быстро загружалась. В этом уроке вкратце рассматриваются принципы подготовки изображений для веб-страниц с помощью программы Adobe Photoshop — наиболее популярной программы обработки растровой графики.

256 Урок 18. Подготовка изображений для веб-страниц

Файловые операции Для обработки изображения его нужно открыть. Для этого служит команда File  Open (Файл  Открыть). Диалоговое окно, появляющееся после выбора этой команды, показано на рис. 18.1.

Рис. 18.1. Выбор обрабатываемого изображения

Как вы знаете (см. урок 3), на веб-страницах рекомендуется размещать изображения далеко не всех форматов, доступных в программе Adobe Photoshop. Поэтому первым шагом в обработке изображения является его преобразование из исходного формата (например, PSD — «родного» формата программы Adobe Photoshop) в формат, необходимый для размещения изображения на веб-странице. Для этого достаточно воспользоваться командой File  Save as (Файл  Сохранить как). При выборе этой команды открывается диалоговое окно, которое представлено на рис. 18.2. Все доступные в программе форматы перечислены в раскрывающемся списке Format (Формат). Для сохранения файла изображение в наиболее распространенном в Интернете формате GIF в этом списке нужно выбрать пункт CompuServ GIF (*.GIF), как показано на рис. 18.2, и щелкнуть на кнопке Save (Сохранить).

Инструменты выделения

257

Рис. 18.2. Сохранение изображения в выбранном формате

Инструменты выделения Очень часто возникает необходимость в коррекции отдельных частей изображения, например, что-то подправить, отрезать, сделать более ярким, изменить фон и т. д. Корректировать можно только выделенные области, поэтому первоначально нужно научиться их выделять. В программе Adobe Photoshop выделять области изображения можно по размеру, по форме, по цвету. К инструментам выделения относится группа инструментов прямоугольного выделения: Rectangular Marquee Tool (Прямоугольное выделение), Elliptical Marquee Tool (Эллиптическое выделение), Single Row Marquee Tool (Выделение строки пикселов), Single Column Marquee Tool (Выделение столбца пикселов), а также группа инструментов лассо: Lasso Tool (Лассо), Poliganol Lasso Tool (Многоугольное лассо), Magnetic Lasso Tool (Магнитное лассо). Кроме того, к инструментам выделения относится инструмент Magic Wand (Волшебная палочка), принцип работы которого основывается на сходстве цветовых параметров пикселов.

258 Урок 18. Подготовка изображений для веб-страниц Все инструменты выделения находятся в верхней части набора инструментов (рис. 18.4).

Рис. 18.3. Инструменты выделения в наборе инструментов

Помимо инструментов для выделения можно использовать команды меню Select (Выделить), в частности для выделения всего изображения применяется команда All (Все), для отмены выделения — команда Deselect (Снять выделение), для превращения всех выделенных фрагментов в невыделенные и наоборот — команда Invert (Инвертировать), для повторного выделения ранее снятого выделения — команда Reselect (Повторить выделение).

Изменение разрешения и размеров изображения Как известно, изображение, которое помещается на веб-страницу, должно иметь маленький размер в байтах, чтобы содержащая его веб-страница быстро загружалась. Для уменьшения размера изображения в байтах существует несколько приемов, в частности можно уменьшить разрешение изображение или его геометрический размер. Этой цели служит команда Image  Image Size (Изображение  Размеры изображения), при выборе которой открывается диалоговое окно, показанное на рис. 18.4. Хотя геометрические размеры изображения, помещаемого на веб-страницу, можно отрегулировать атрибутами WEIGHT и HEIGHT тегов языка HTML, эти регулировки никак не скажутся на размере изображения в байтах, а, значит, — и на скорости его загрузки. Показанная на рис. 18.4 фотография рыбы в аквариуме была выполнена цифровым фотоаппаратом. Как видно в диалоговом окне Image Size (Размеры изображения), разрешение полученной фотографии составляет 180 пикселов на дюйм, а геометрический размер — 36,58×27,43 см. Конечно, такой файл («весом» более 3 Мбайт) никто не поместит на свою веб-страницу. На рис. 18.5 показано то же диалоговое окно после уменьшения разрешения и размеров фотографии. Размер файла с новыми параметрами оказался в 132 раза меньше (!), чем был раньше, и составил 24 Кбайт. Естественно, при подобной настройке нужно все время

Изменениеразрешенияиразмеровизображения

259

визуально контролировать качество изображения, поскольку снижение разрешения означает уменьшение количества пикселов на единицу длины, что, в конце концов, обязательно скажется на визуальном восприятии.

Рис. 18.4. Настройка разрешения и размеров изображения

Рис. 18.5. Уменьшение разрешения и размеров фотографии

260 Урок 18. Подготовка изображений для веб-страниц

Коррекция изображения Программа Adobe Photoshop содержит множество средств для повышения качества изображений. Фотографии могут быть слишком темными, слишком светлыми, недостаточно контрастными, иметь неразличимые детали, плохую рельефность, поэтому появляется необходимость их изменения. Чем отличается хорошая фотография от плохой? Хорошая фотография имеет оптимальный баланс света и тени. Процесс изменения погрешностей в освещении и контрасте называют коррекцией. Коррекция обычно выполняется с помощью меню команд подменю Adjustments (Настройка) меню Image (Изображение). В качестве примера изменим внешность девушки, показанной слева на рис. 18.6. Справа на рисунке представлено диалоговое окно Brightness/Contrast (Яркость/ Контраст), открывшееся после выделения фрагмента изображения (показанных на заднем плане губ) и выбора команды Image  Adjustment  Brightness/Contrast (Изображение  Настройка  Яркость/Контраст). Как видите, для изменения контрастности и яркости выделенного фрагмента достаточно изменить положение ползунков Brightness (Яркость) и Contrast (Контраст) или ввести нужные значения в соответствующие поля.

Рис. 18.6. Изменение контрастности и яркости губ

Рисунок 18.7 иллюстрирует процесс цветовой коррекции глаза, выделенного инструментами выделения, с помощью команды Image  Adjustments  Hue/Saturation (Изображение  Настройка  Оттенок/Насыщенность). Рисунок 18.8 иллюстрирует процесс цветовой коррекции брови, выделенный инструментами выделения, с помощью команды Image  Adjustments  Color Balance (Изображение  Настройка  Цветовой баланс), которая применяется к области выделения.

Коррекция изображения

Рис. 18.7. Изменение оттенка, насыщенности и светлоты выделенного фрагмента

Рис. 18.8. Настройка цветового баланса выделенного фрагмента

Рис. 18.9. Изображение после коррекции

261

262 Урок 18. Подготовка изображений для веб-страниц Для обрезки краев изображений применяется инструмент Crop (Кадрирование) или команда Image  Crop (Изображение  Кадрирование) после выделения нужного фрагмента любым инструментом выделения. После выбора этой команды все изображение, лежащее вне рамки выделения, будет удалено. На рис. 18.9 показано полностью подготовленное для размещения на вебстранице изображение после выполнения всех операций, описанных в этом разделе (сравните его с изображением на рис. 18.6).

Подведем итоги В этом уроке рассматриваются основные принципы подготовки изображений для веб-страниц с помощью программы Adobe Photoshop. В частности, представлены команды и инструменты для выполнения файловых операций, для выделения фрагментов изображения, для изменения разрешения и геометрических размеров изображения, для тоновой и цветовой коррекции изображения.

Урок Урок 19. HTML 5 Язык HTML 5 является совместным продуктом корпорации World Wide Web Consortium (W3C) и рабочей группы Web Hypertext Application Technology Working Group (WHATWG). Рабочая группа WHATWG разрабатывала формы и приложения, корпорация W3C сосредоточила усилия на XHTML 2.0. Многие идеи HTML 5 были изначально предложены WHATWG в стандарте Web Applications 1.0. HTML 5 включает другой стандарт WHATWG, Web Forms 2.0.

264 Урок 19. HTML 5

Пример веб-страницы HTML 5 Когда веб-браузер получает документ, он по тегам определяет, как документ должен быть интерпретирован. HTML 5 вводит несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами и <span>, но имеют свое семантическое значение, например и . Эти теги должны облегчать работу поисковым системам. Другие элементы предоставляют новую функциональность, такие как и . Новый тег <section> выводит на экран данные, формируя их в разделы. Некоторые устаревшие элементы HTML 4, такие как и , были удалены из HTML 5. Пример создания веб-страницы на языке HTML 5 приведен в листинге 19.1. Листинг 19.1. Пример создания веб-страницы на языке HTML 5 Пример веб-страницы на языке HTML 5 ... ... <section> <article> ... ... ...

Спецификация является первым объявлением документа в версии HTML5 предшествуя тегу . Данный тег объявляет браузеру о спецификациях используемого HTML, выступая в роли объявления, инструкции браузеру. Документ, созданный в версии HTML 4.01, требует ссылки на DTD, так как версия языка HTML 4.01 была основана на SGML. HTML5 основан не на SGML и не требует ссылки на DTD, но использует спецификацию doctype для указания браузеру. Спецификация пишется прописными буквами и не имеет конечного тега.

Размещение объектов мультимедиа . на веб-страницах Мультимедийные файлы размещаются на веб-страницах с помощью тегов , , <embed> и .

Пример веб-страницы HTML 5

265

Тег имеет атрибуты autoplay, controls, loop, preload, src. Атрибут autoplay. Атрибут autoplay определяет порядок воспроизведения данных мультимедиа. Если он присутствует, то файл мультимедиа автоматически запускаться по окончании загрузки документа. Атрибут controls. Атрибут controls позволяет пользователю управлять воспроизведением, например, с помощью кнопки проигрывания. Атрибут loop. Атрибут loop указывает на то, что по окончании файл мультимедиа должен снова начать воспроизводиться. Данные мультимедиа могут сначала воспроизводится от начала до конца как в прямом, так и в обратном направлении. Атрибут preload. Атрибут preload контролирует загрузку файла. Принимает значения auto (автоматический), metadata (метаданные) и none (никакой). Атрибут src. Атрибут src (от англ. source — источник) определяет месторасположение изображения, включаемого в состав документа. Имеет параметр url, который указывает браузеру, где находится файл. Мультимедийные файлы имеют расширения Ogg Vorbis, MP3, Wav. Однако будьте внимательны — не все браузеры поддерживают аудио (табл. 19.1). Таблица 19.1. Поддержка аудиоформатов разными браузерами Формат Ogg Vorbis MP3 Wav

Microsoft Internet Explorer 8 нет нет нет

Firefox 3.5

Opera 10.5

Chrome 3.0

Safari 3.0

да нет да

да нет да

да да нет

нет да да

В листинге 19.2 приведен код программы, запускающей проигрывание аудиофайла. На экране видна только надпись, возможно музыка была бы слышна, но не нами. Звук появится, если вы поместите в папку с данным документом еще и аудиофайл. Листинг 19.2. Документ, содержащий встроенный аудиофайл Встроенный аудио-файл ВАШ БРАУЗЕР НЕ ПОДДЕРЖИВАЕТ АУДИО ЭЛЕМЕНТ

Тег (видео) имеет атрибуты autoplay, controls, loop, preload, src, height, width. Атрибут height. Атрибут height задает высоту окна для отображения видеоданных в пикселах или процентах. Атрибут width. Атрибут width задает ширину окна для отображения видеоданных в пикселах или процентах. В листинге 19.3 приведен код программы, запускающей видеоклипа. На экране можно увидеть только надпись, возможно видеоклип просматривается, только не нами. Видеоклип можно просмотреть, если вы поместите видеофайл в папку с данным документом.

266 Урок 19. HTML 5 Листинг 19.3. Документ, содержащий встроенные видео- и аудиофайлы Встроенный аудио-файл ВАШ БРАУЗЕР НЕ ПОДДЕРЖИВАЕТ ВИДЕО ТЕГИ

Тег <embed> используется для размещения мультимедиа, например, посредством кода: <embed src="helloworld.swf" />

Тег <embed> имеет атрибуты height, width, src, type. Хотя этот тег считается парным, но при наличии атрибутов достаточно только открывающего тега. В листинге 19.4 приведен еще один код программы, запускающей музыку и воспроизводящей видеоклип. Листинг 19.4. Еще один пример документа, содержащий встроенные мультимедийные файлы <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> ВАШ БРАУЗЕР ПОДДЕРЖИВАЕТ ВИДЕО-ФАЙЛЫ <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> ВАШ БРАУЗЕР ПОДДЕРЖИВАЕТ АУДИО-ФАЙЛЫ

Новый тег <source> определяет источник медиаданных.

Файловые форматы аудио и видео В анимационной графике используются форматы, предложенные разработчиками анимационных программных пакетов, например в программе Autodesk Animator Pro используются форматы FLI, FLC и ZEL. К анимационным программам для веб можно отнести: Microsoft GIF Animator, Animagic GIF, GIF Construction Set и др. Наиболее распространенными форматами звуковых файлов являются .aiff, .aif, .au, .avr, .hcom, .iff, .nsp, .sf, .smp, .snd, .sou, .voc, .wav. Такое многообразие расширений появилось из-за большого количества программ для работы со звуком. Файлы с нотной записью будут иметь расширения .amf, .cmf, .dmf, .far, .mid, .mod, .mtm, .nst, .okt, .org, .rol, .sbi, .sng, .stm, .s3m, .ult, .wow. xm.

Формат SWF Векторный формат SWF (Shockwave Flash) был разработан компанией Macromedia, затем права фирмы Macromedia были куплены фирмой Adobe и файлы формата SWF стали создаваться в программе Adobe Flash. Данный формат в первую очередь предназначен для хранения анимации. Для правильного ото-

Файловые форматы аудио и видео

267

бражения файлов формата SWF на компьютере пользователя должен быть установлен соответствующий подключаемый модуль. В настоящее время технология Flash (английское слово flash переводится как вспышка, сверкание) широко применяется для разработки документов с мультимедийным содержанием (анимация и звук). До появления технологии Flash применение мультимедиа в веб-дизайне было ограничено, поскольку растровая графика, звуковые и видеофайлы имеют большой объем и, следовательно, очень медленно загружаются в браузер. В технологии Flash используется векторный формат изображений, а растровые и звуковые файлы сжимаются. Файлы, созданные с помощью технологии Flash, имеют расширение .swf. Они могут содержать изображения в векторном формате, звук, мультфильмы, элементы управления, интерактивные эффекты. Для их просмотра используется проигрыватель Flash Рlауеr — элемент управления АсtiveX, который встроен в последние версии браузеров или его следует инсталлировать на компьютер.

Формат Ogg Формат Ogg Vorbis — открытый формат аудиосжатия, появившийся летом 2002 года. Он предназначен для аудиокомпрессии и относится к тому же типу форматов, что и МР3, AAC, VQF и WMA, то есть к форматам компрессии с потерями. Достоинством формата Ogg Vorbis является его полная открытость и свободность. Формат Ogg Vorbis не ограничивается двумя аудиоканалами (стерео — левый и правый), он поддерживает до 255 отдельных каналов с частотой дискретизации до 192 кГц и разрядностью до 32 бит (чего не позволяет ни один формат сжатия с потерями). Используется для кодирования 6-канального звука DVD-Audio. Данные формата Ogg Vorbis хранятся в файлах с расширением .ogg.

Формат AVI Формат AVI (Audio Video Interleaved — чередующиеся аудио- и видеоданные) предназначен для записи звука и движущихся изображений и соответствует спецификации RIFF (Resource Interchange File Format — файловый формат обмена ресурсами). Данные формата AVI, которые можно редактировать, экспортировать и сжимать, хранятся в файлах с расширением .avi. Для их воспроизведения необходима специальная программа, которая входит в комплект поставки некоторых браузеров. Если в составе вашего браузера нет такой программы, ее можно загрузить из Интернета.

Формат MOV Формат MOV, или QuickTime, разработанный фирмой Apple, предназначен для создания, хранения и воспроизведения данных мультимедиа. QuickTime позволяет объединить звук, текст, анимацию и видео в одном файле.

Семейство форматов MPEG При работе с цифровым видеосигналом возникает необходимость обработки, передачи и хранения очень больших объемов информации. В связи с этим стала

268 Урок 19. HTML 5 актуальной проблема сжатия видеоданных, для решения которой были разработаны эффективные методы и алгоритмы. Группа MPEG (Moving Pictures Experts Group) предложила технологию компактного представления цифровых видеои аудиосигналов. Эта группа занимается разработкой стандартов сжатия цифрового видео и звука. Такие форматы, как правило, требуют использования кодеков (кодеров/декодеров). Существует несколько версий кодека MPEG, например: MPEG-1, MPEG-2, MPEG-3, MPEG-4, MPEG-7, MPEG-J.

Формат WAV Формат WAV (от англ. wave — волна) был создан корпорацией Microsoft и принят в качестве стандарта для звукового сопровождения операционной системы и компьютерных игр. WAV-данные хранятся в файлах с расширением .wav. Первоначально этот формат был разработан для PC, а затем стал использоваться и в Macintosh. В WAV-файле данные хранятся в несжатом виде; кроме того, в нем содержится информация о числе дорожек (моно или стерео), количестве битов, а также образец.

Формат AIFF Формат AIFF (Audio Interchange File Format — формат обмена аудиоданными) — популярный формат, применяемый на платформе Macintosh, а также используемый для записи аудиоинформации на компакт-диски. Данные в формате AIFF хранятся в файлах с расширением .aif. В файле формата AIFF хранятся аудиоданные, информация о том, записан звук как стерео или как моно, число битов, образец, а также сведения, применяемые при обработке аудиофайлов.

Формат MP3 Формат MP3 (MPEG-1 Audio Layer-3) позволяет создавать файлы небольшого размера, при воспроизведении которых обеспечивается исходное качество звука.

Потоковое видео Потоковыми называются данные мультимедиа, передаваемые по сети и воспроизводимые в реальном времени. Информация может быть получена непосредственно от источника данных, например с видеокамеры или с радиостанции, либо храниться на веб-сервере. Потоковое видео — это процесс преобразования видео и аудио в сжатый цифровой формат, а затем распространение данных через компьютерные сети. Видео и аудио может быть постоянно потоковым или доставляться по требованию. Технология Real Audio/Video — это технология передачи аудио- и видеоинформации, разработанная фирмой Progressive Networks. Для воспроизведения данных необходим дополнительный модуль RealPlayer. Файлы, которые могут обрабатываться модулем RealPlayer, имеют расширения .ra, .ram, .rm, .rmn и .rmd.

Текстовые данные

269

Технология Windows Media Server предлагает набор цифровых компонентов для работы с мультимедиа. Windows Media Player поддерживает форматы WAV, AVI, MIDI, VOD, AIFF и MPEG-2 Layer-3 (MP3). Технология QuickTime поддерживает потоковую передачу видео, аудио, текста и MIDI-информации в реальном масштабе времени.

Текстовые данные Рассмотрим пример использования тега <article> (листинг 19.5). Этот новый тег выводит на экран внешние текстовые данные. Листинг 19.5. Пример создания веб-страницы, содержащей внешние текстовые данные ВНЕШНИЕ ДАННЫЕ <article> Netscape is dead
AOL has a long history on the internet

Новый тег <details> выводит на экран уточненные текстовые данные: <details> Версия HTML 5 появилась в январе 2008 года

Новый тег выводит на экран заголовок группы: ИСТОКИ МОДЕРНИЗМА "НАД" ИЛИ "ПОД" РЕАЛЬНОСТЬЮ
АБСУРД ВМЕСТО ЛОГИКИ

Новый тег <progress> выводит на экран оценку выполнения работы: СТЕПЕНЬ ЗАГРУЗКИ ОБЪЕКTА: <progress><span id="objprogress">76%

Аббревиатура В уроке 2 уже было показано использование тегов для акронима или аббревиатуры. Рассмотрим пример с тегом . Содержимое тега выводится в виде всплывающей подсказки, которая дает пользователю возможность увидеть расшифровку аббревиатуры (листинг 19.6). Листинг 19.6. Пример создания веб-страницы, содержащей аббревиатуру Аббревиатура УЧЕБНОЕ ЗАВЕДЕНИЕ ГАСУ БЫЛ ОСНОВАН 27 апреля (9 мая по н. ст.) 1832 г.

270 Урок 19. HTML 5

Внешние данные Новый тег управляет внешними данными. Пример использования тега приведен в листинге 19.7. Листинг 19.7. Пример создания веб-страницы, содержащей внешние данные Внешние данные
Операции отрицания, конъюнкции, дизъюнкции
АЛГЕБРА ЛОГИКИ Операции эквиваленции или двойной импликации

Направление текста Новый тег управляет направлением отображаемого текста. Имеет обязательный атрибут dir, который принимает значения ltr (слева направо) и rtl (справа налево). Пример использования тега приведен в листинге 19.8. Листинг 19.8. Пример создания веб-страницы, содержащей текст разного направления Текст разного направления ЭТОТ ТЕКСТ НАПИСАН СПРАВА-НА-ЛЕВО.

Кнопки Новый тег сам создает кнопку и управляет нажатием на нее. Пример использования тега приведен в листинге 19.9. Листинг 19.9. Пример создания веб-страницы, создающей кнопку Внешние данные НАЖМИ МЕНЯ!

Новый тег управляет внешними различными кнопками посредством кода: <menu> НАЖМИ МЕНЯ!

Канва Новый тег используется для рисования графических объектов списка данных. Если вы изучали Delphi, то вы, непременно, встречали уже эту команду. Тег предоставляет возможность отображения различной графической информации. Имеет атрибуты height (высота), width (ширина), которые определяют размер канвы. Пример использования тега , в котором рисуется красный квадрат, приведен в листинге 19.10.

Текстовые данные

271

Листинг 19.10. Пример создания веб-страницы, содержащей канву Красный квадрат <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);

Список данных Новый тег управляет выводом на экран списка данных. Пример использования тега приведен в листинге 19.11. В приведенном листинге используется тег Листинг 19.11. Пример создания веб-страницы, содержащей список данных Список данных

Формы Тег управляет выводом на экран формы с набором полей. Пример использования тега приведен в листинге 19.12. Листинг 19.12. Пример создания веб-страницы, содержащей форму с набором полей Форма с набором полей ПЕРСОНАЛЬНЫЕ ДАННЫЕ: ФАМИЛИЯ:
Email:
ДАТА РОЖДЕНИЯ:

Новый тег определяет ключ генерации. Новый тег используется в форме, определяя вывод:

Новый тег выводит на экран навигационную панель: ДОМОЙ

272 Урок 19. HTML 5 ПРЕДЫДУЩИЙ СЛЕДУЮЩИЙ

Заголовок объекта Тег управляет выводом на экран заголовка к фигуре. Пример использования тега приведен в листинге 19.13. Листинг 19.13. Пример создания веб-страницы, содержащей заголовок объекта Заголовок объекта WWF
Организация World Wildlife Foundation была основана в 1961 году...

Маркировка Тег <mark> форматирует текст, выполняя его маркировку. Пример использования тега <mark> приведен в листинге 19.14. Листинг 19.14. Пример создания веб-страницы, содержащей маркировку Маркировка
ОБЪЕКТНО-ОРИЕНТИРОВАННЫМИ ЯЗЫКАМИ ПРОГРАММИРОВАНИЯ ЯВЛЯЮТСЯ <mark>DELPHI, СИ++ И ДРУГИЕ ЯЗЫКИ.

Новый тег <meter> выводит на экран данные в ранжированной области: <meter min="0" max="10">2
<meter>2 out of 10
<meter>20%

Заголовки в таблице Тег определяет заголовки в таблице. Его атрибуты уже были описаны в уроке 8. Пример использования тега приведен в листинге 19.15. Листинг 19.15. Пример создания веб-страницы, содержащей заголовки в таблице Заголовок в таблице

МЕСЯЦ ПРОДАЖИ

СУММА €180000

ЯНВАРЬ €100000

ФЕВРАЛЬ €80000

Обработка событий

273

Контроль времени В версии языка HTML5 появился тег , который позволяет контролировать дату и время. Единственный атрибут определяет дату и время. Пример использования тега приведен в листинге 19.16. Листинг 19.16. Пример создания веб-страницы, содержащей контроль времени Дата и время
Занятия начинаются в университете в 9:00 каждое утро

ВЕЛИКИЙ РУССКИЙ ПОЭТ А.С. ПУШКИН родился в МОСКВЕ

Обработка событий Начиная с версии HTML 4 в технологию программирования при создании вебстраниц добавлена возможность обработки событий и действий и отображения результатов в браузере, аналогично программированию на JavaScript, когда пользователь нажимает на элемент или выполняет другие действия.

Атрибуты тега при обработке событий Основные атрибуты тега , используемые при программировании обработки событий, представлены в табл. 19.2. Таблица 19.2. Основные атрибуты тега , используемые при программировании обработки событий Атрибут

onafterprint onbeforeprint onbeforeonload onblur onerror onfocus onhaschange onload onmessage onoffline ononline onpagehide onpageshow onpopstate onredo onresize

Описание Управление действиями после печати документа Управление действиями перед печатью документа Управление действиями до загрузки документа Управление действиями при потере окном фокуса Управление действиями при возникновении ошибки Управление действиями при получении окном фокуса Управление действиями при изменении документа Управление действиями при загрузке документа Управление действиями при получении сообщения Управление действиями при переходе документа в режим off-line Управление действиями при переходе документа в режим on-line Управление действиями, когда окно скрыто Управление действиями, когда окно становится видимым Управление действиями, когда история окна изменяется Управление действиями, когда документ выполняет повтор Управление действиями при изменении размера окна


274 Урок 19. HTML 5 Таблица 19.2 (продолжение) Атрибут

onstorage onundo onunload

Описание Управление действиями при загрузке документа Управление действиями, когда документ выполняет отмену действий Управление действиями, когда пользователь выходит из документа

События в форме Основные атрибуты, используемые при обработке событий в форме, представлены в табл. 19.3. Таблица 19.3. Основные атрибуты, используемые при программировании обработки событий в форме Атрибут

onblur onchange oncontextmenu onfocus onformchange onforminput oninput oninvalid onselect onsubmit

Описание Управление действиями при потери элементом фокуса Управление действиями при изменении элемента Управление действиями при потере обновления контекстного меню Управление действиями при получении элементом фокуса Управление действиями при обновлении формы Управление действиями при обновлении ввода информации в форму Управление действиями при обновлении ввода информации Управление действиями при потере информации Управление действиями при выборе элемента Управление действиями нажатием на кнопку

События, связанные с клавиатурой Основные атрибуты, используемые при программировании обработки событий, связанных с клавиатурой, представлены в табл. 19.4. Таблица 19.4. Основные атрибуты при программировании обработки событий, связанных с клавиатурой Атрибут

onkeydown onkeypress onkeyup

Описание Управление действиями нажатием на клавишу Управление действиями нажатием на клавишу и при ее отпускании Управление действиями при отпускании клавиши

События, связанные с мышью Основные атрибуты, используемые при программировании обработки событий, связанных с мышью, представлены в табл. 19.5.

Обработка событий

275

Таблица 19.5. Основные атрибуты, используемые при обработки событий, связанных с мышью Атрибут

onclick ondblclick ondragNew ondragend ondragenter ondragleave ondragover ondragstart ondrop onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onscroll

Описание Управление действиями при щелчке мышью Управление действиями при двойном щелчке мышью Управление действиями при перетаскивании Управление действиями при окончании перетаскивания Управление действиями при начале нового перетаскивания Управление действиями при завершении процесса перетаскивания Управление действиями при покрытии объекта при перетаскивании Управление действиями при начале нового перетаскивании Управление действиями при остановке процесса перетаскивания Управление действиями при нажатой кнопке мыши Управление действиями при движении указателя мыши Управление действиями при покидании элемента указателем мыши Управление действиями при покрытии элемента указателем мыши Управление действиями при отпускании кнопки мыши Управление действиями при прокручивании колесика мыши Управление действиями при прокручивании в полосе прокрутки

Медиа-события К медиа-событиям относятся события, связанные с видео, изображениями и аудио. Основные атрибуты обработки медиа-событий представлены в табл. 19.2. Таблица 19.2. Основные атрибуты тега при обработке событий Атрибут

onabort oncanplay oncanplaythroug ondurationchange onemptied onended onerror onloadeddata onloadedmetadata

Описание Управление действиями в случае отмены событий Управление действиями в случае начала медиа-воспроизведения, но возможна остановка для буферизации Управление действиями при окончании медиа-воспроизведения без остановки для буферизации Управление действиями в случае изменения длины медиавоспроизведения Управление действиями при внезапном исчезновении медиаресурсов (сетевые ошибки, ошибки при загрузке и т. д.) Управление действиями при окончании воспроизведения медиаресурсов Управление действиями в случае возникновения ошибки при загрузке документа Управление действиями в случае загрузки данных Управление действиями в случае загрузки медиа-данных


276 Урок 19. HTML 5 Таблица 19.2 (продолжение) Атрибут

Описание Управление действиями в том случае, когда браузер начинает заonloadstart гружать медиа-данных Управление действиями в случае выполнения паузы при воспроonpause изведении медиа-данных Управление действиями в случае проигрывания медиа-данных onplay Управление действиями в случае запуска медиа-данных onplaying Управление действиями в случае извлечения медиа-данных брауonprogress зером Управление действиями в случае изменения скорости проигрываonratechange ния медиа-данных onreadystatechange Управление действиями в случае изменения состояния Управление действиями в случае поиска медиа-элементов и при onseeked окончании поиска Управление действиями в случае поиска медиа-элементов в наonseeking чале поиска Управление действиями в случае присутствия ошибок в медиаonstalled данных (тупик) Управление действиями в случае извлечения медиа-данных брауonsuspend зером и остановки до их загрузки Управление действиями в случае изменения позиции проигрываontimeupdate ния Управление действиями в случае изменения объема медиаonvolumechange данных, а также при «нулевой» громкости Управление действиями в том случае, когда медиа-средства перестали воспроизводиться, но как ожидается, должно возобновиться onwaiting воспроизведение

Подведем итоги В этом уроке рассматриваются базовые понятия, относящиеся к созданию вебстраниц для версии языка HTML 5. Приведены примеры работы с аудио- и видеофайлами, с новыми тегами, появившимися в новой версии языка HTML 5. Приведены атрибуты для различных событий.

Алфавитный указатель ! , 28 , 269 , 51 , 51 Adobe Flash, 266 <APPLET>, 97 , 69 <article>, 269 , 270 , 264 , 45 , 40 , 270 , 45 , 49 , 26, 79, 238
, 40 , 270 , 270 , 123 , 42 , 53 , 122 , 123 , 270 , 98 , 271 , 273 , 116 <details>, 269 , 52

, 118 , 41, 229, 232 , 116 , 224 <EM>, 52 <embed>, 266 , 271 , 272 , 38 , 156 , 169 , 168 , 37 , 26, 225, 237 , 269 , 89 , 26, 224 , 45 , 59 , 157, 159 , 55 , 54 , 271 , 229, 233 , 271
, 106 , 227 , 56 <MAP>, 69 <mark>, 272 <MARQUEE>, 101 <MEDIA>, 99

278 Алфавитный указатель <MENU>, 118 <meter>, 272 , 264, 271 , 48 , 169 , 98 , 106, 107 , 162 , 271
, 25, 40 , 25, 43 <progress>, 269 , 50 <S>, 47 <SAMP>, 54 <SCRIPT>, 97 <section>, 264 <SELECT>, 162 <SMALL>, 45 <source>, 266 <SPAN>, 46, 254 <STRIKE>, 45 <STRONG>, 45 <STYLE>, 98, 240 <SUB>, 45 <SUP>, 45
, 121 , 123 , 122 , 45, 53 , 99 , 45
, 111 , 45

, 264, 265 <WBR>, 48 , 193

A ACCESSKEY, 71, 194 ACTION, 157 ADDRESS, 43 Advanced Research Project Agency (ARPA), 14 AIFF, 268 AJAX, 20 ALIGN, 37, 40, 59, 89, 101, 121, 122, 123, 124, 172 ALINK, 31 ALT, 59, 70 autoplay, 265 AVI, 267

B BACKGROUND, 31, 121, 124, 233 BASEFONT, 38 BEHAVIOR, 101 BGCOLOR, 31, 80, 101, 121, 122, 123, 124 BGPROPERTIES, 31 BORDER, 59, 121, 124, 169 BORDERCOLOR, 121 BOTTOMMARGIN, 32

C Cascading Style Sheets (CSS), 18, 236 CELLPADDING, 121 CELLSPACING, 121 CENTER, 37, 40 CHARSET, 98 CHECKBOX, 159 CHECKED, 159 Chrome, браузер, 26 CITE, 49 CLASS, 116, 229, 239

Алфавитный указатель

CLEAR, 41 CLIP, 233 COLOR, 39 COLS, 165, 169 COLSPAN, 124 COLSPEC, 122 COMPACT, 116 controls, 265 COORDS, 70

D DEFER, 98 DIRECTION, 101 Document Type Definition (DTD), 15, 224 Domain Name System (DNS), 15 dpi, 62

E Extensible Markup Language (XML), 18

F FLC, 266 FLI, 266 FRAME, 125, 193 FRAMEBORDER, 169, 171, 172

H height, 265 HEIGHT, 59, 101, 172, 233, 258 HIDDEN, 159 HREF, 70, 193, 227 HSPACE, 59, 101, 121 HTTP-EQUIV, 226 HyperText Markup Language (HTML), 15, 23 HyperText Transfer Protocol (HTTP), 15

I ID, 116, 122, 125, 193, 229, 233 IMAGE, 159

Internet Explorer, 28 Internet Explorer, браузер, 26 ISMAP, 59, 68

J JavaScript, 234 Java-апплет, 97 JUSTIFY, 37, 40

L LANG, 116 LANGUAGE, 98 LEFT, 37, 40, 233 LEFTMARGIN, 32 LINK, 31, 80 LONGDESC, 59 loop, 265 LOOP, 101

M MARGINHEIGHT, 171, 172 MARGINWIDTH, 171, 172 MAXLENGTH, 159 META-информация, 225 META-тег, 225 METHOD, 157 METHODS, 193 Mosaic, браузер, 26 MOV, 267 Moving Pictures Experts Group (MPEG), 268 Mozilla Firefox, браузер, 26 MP3, 268 MPEG, 268

N NAME, 69, 157, 159, 165, 171, 172, 193, 225 Netscape Navigator, браузер, 26 NOHREF, 70 NONE, 41

279

280 Алфавитный указатель NORESIZE, 171 NOSHADE, 89 NOWRAP, 124

O ONBLUR, 71 ONFOCUS, 71 Opera, браузер, 26

P PASSWORD, 159 ppi, 62 preload, 265 PSD, 256

Q QuickTime, 267

R RADIO, 159 Real Audio/Video, 268 RealPlayer, 268 REL, 227 RESET, 160 REV, 227 RGB, 39 RIGHT, 37, 40 RIGHTMARGIN, 32 ROWS, 165, 169 ROWSPAN, 124 RULES, 125

S Safari, браузер, 26 SCROLLAMOUNT, 101 SCROLLDELAY, 101 SCROLLING, 171, 172 SHAPE, 69 Shockwave Flash (SWF), 266 SIZE, 38, 89, 157, 159 spi, 62

SRC, 59, 98, 159, 171, 172 Standard Generalized Markup Language (SGML), 15 START, 107 STYLE, 116, 230 SUBMIT, 160 SWF, 266

T TABINDEX, 70 TARGET, 70, 157, 172 TEXT, 31, 80, 160 TITLE, 70, 193 TOP, 233 TOPMARGIN, 32 twitter, популярный сайт, 220 TYPE, 98, 107, 111, 159, 227

U Uniform Resource Identifier (URI), 49 Uniform Resource Locator (URL), 192 USEMAP, 59, 71

V VALIGN, 122, 123, 124 VALUE, 160 VLINK, 31 VSPACE, 59, 101, 122

W WAV, 268 WEIGHT, 258 width, 265 WIDTH, 59, 89, 101, 122, 172, 233 Windows Media Player, 269 Windows Media Server, 269 Word Wide Web (WWW), 23 World Wide Web Consortium (W3C), 17, 224 World Wide Web (WWW), 15


Z

по вертикали, 122 по горизонтали, 122 текста, 37, 42

ZEL, 266

А аббревиатура, 51 абзац, 40 аккаунт, 220 акроним, 51 альтернативный текст, 59 апплет, 19 атрибут, 30

Б баннер, 211 баннерная реклама, 210 бегущая строка, 101 блог, 220 браузер, 26 Microsoft Internet Explorer, 17 Mosaic, 17 Netscape Navigator, 17

В Ванневар Буш (Vannevar Bush), 15 веб-браузер, 26 веб-мастер, 23 веб-сайт, 23 веб-страница, 14 вложенный список, 114 вложенный фрейм, 187 внешний объект, 98 внешняя ссылка, 195 внутренняя ссылка, 194 волшебная палочка, 257 встраиваемый стиль, 240 выделение прямоугольное, 257 столбца пикселов, 257 строки пикселов, 257 эллиптическое, 257 выравнивание изображений, 67

Г гипертекст, 15, 28 гипертекстовая ссылка, 28 глоссарий, 116 горизонтальная линия, 89 горизонтальное выравнивание, 37 графика, 59 анимационная, 266 векторная, 266 растровая, 62 графическая ссылка, 199 графический файл, 59 группирование стилей, 239

Д динамический слой, 234 домен, 218

З заголовок таблицы, 123 текста, 37 значение, 238

И изображение коррекция, 260 открытие, 256 размер, 258 разрешение, 258 сохранение, 256 импортируемый стиль, 244 инструмент Crop, 262 Elliptical Marquee, 257 Lasso, 257 Magic Wand, 257 Magnetic Lasso, 257 Poliganol Lasso, 257

281

282 Алфавитный указатель Rectangular Marquee, 257 Single Column Marquee, 257 Single Row Marquee, 257 Интернет, 14, 23 информации об авторе документа, 96

К кадрирование, 262 каскадные листы стилей, 236 клавиатурный символ, 91 кнопка, 160 комментарий, 50, 51, 98 консорциум W3C, 238 корпоративный сайт, 219

Л лассо, 257 магнитное, 257 многоугольное, 257 линия горизонтальная, 89 лист стиля, 98

М магнитное лассо, 257 маркер, 111 маркированный список, 106, 111 метод file, 192 ftp, 192 http, 192 mailto, 192 news, 192 telnet, 192 многострочное поле, 165 многострочный список, 163 многоугольное лассо, 257 моноширинный шрифт, 53

Н набор фреймов, 168 начертание, 45

неразрывная строка, 48 нумерованный список, 106

О объект внешний, 98 объявление, 238 определение META-определение, 237 на веб-странице, 52 типа документа, 224 отклик баннера, 211

П паук, 221 переключатель, 159 пиксел, 63, 76 плавающий фрейм, 187 подключаемый стиль, 240 поиск по URL-адресу, 218 по тематическим ссылкам, 218 с помощью поисковых систем, 221 поисковая система, 221 поле ввода, 159 ползун, 221 потоковое видео, 268 потоковые данные, 268 правило, 238 предварительное форматирование, 43 пробел, 56 прямоугольное выделение, 257

Р разрешение изображения, 62, 258 разрыв строки, 40 региональный сервер, 220

С сайт, 217 свойство, 238


связываемый стиль, 243 селектор класса, 240 сетевой робот, 221 символ клавиатурный, 91 специальный, 94 синтаксис листа стиля значение, 238 объявление, 238 правило, 238 свойство, 238 элемент, 238 слой динамический, 234 понятие, 229 создание, 229 текстовый, 230 служба e-mail, 15 Usernet, 15 специальный символ, 94 список вложенный, 114 выбора, 162 маркированный, 106, 111 многострочный, 163 нумерованный, 106 определений, 106, 116 ссылка, 191 внешняя, 195 внутренняя, 194 графическая, 199 стандартный цвет, 80 стиль, 98, 237 встраиваемый, 240 импортируемый, 244 подключаемый, 240 связываемый, 243 столбец таблицы, 122 строка бегущая, 101 неразрывная, 48 таблицы, 122 структурная разметка, 15 сценарий, 97

Т таблица, 121 создание, 121 столбцы, 122 строки, 122 цветов, 82 ячейки, 122 тег, 25, 29 текст абзацы, 40 акроним, 51, 269 альтернативный, 59 выравнивание, 37, 42 комментарий, 51 начертание, 45 неразрывные строки, 48 определение, 52 предварительное форматирование, 43 размер, 38 уровни заголовков, 36 цитирование, 49 шрифт, 38 шрифтовое выделение, 52 текстовый слой, 230 технология Java, 211 QuickTime, 269 Real Audio/Video, 268 ShockWave, 211 Windows Media Player, 269 Windows Media Server, 269 Тим Бернерс-Ли (Tim Berners-Lee), 15 тип документа, 224

У универсальный указатель ресурса, 192

Ф флажок, 159 фон, 79 фоновый рисунок, 79

283

284 Алфавитный указатель форма, 157 формат AIFF, 268 AVI, 267 BMP, 61 GIF, 60, 211, 256 JPEG, 61 JPG, 211 MOV, 267 MP3, 268 MPEG, 268 Ogg Vorbis , 267 PCX, 62 PNG, 61 PSD, 256 QuickTime, 267 SWF, 266 WAV, 268 форматирование предварительное, 43 фрейм, 167 вложенный, 187 плавающий, 187

Х хост, 216 хостинг, 216

Ц цвет ссылки, 80 стандартный, 80 шрифта, 38 цитата, 49

Ч червь, 221

Ш шрифт, 38, 53 шрифтовое выделение, 52

Э элемент листа стиля, 238 управления, 159 эллиптическое выделение, 257

Я язык Dynamic HTML, 19 Java, 19 JavaScript, 19 Perl, 20 PHP, 20 VBScript, 19 якорь, 196 ячейка таблицы, 122

Нина Владимировна Комолова, Елена Сергеевна Яковлева

HTML: Самоучитель. 2-е изд. Заведующий редакцией Руководитель проекта Ведущий редактор Художественный редактор Корректор Верстка

А. Кривцов А. Юрченко Ю. Сергиенко Л. Адуевская Н. Першакова А. Шляго

Подписано в печать 20.10.10. Формат 70х100/16. Усл. п. л. 23,22. Тираж 2500. Заказ 0000. ООО «Лидер», 194044, Санкт-Петербург, Б. Сампсониевский пр., 29а. Налоговая льгота — общероссийский классификатор продукции ОК 005-93, том 2; 95 3005 — литература учебная. Подписано в печать 20.10.10. Формат 70х100/16. Усл. п. л. 23,22. Тираж 2500. Заказ 0000.Отпечатано по технологии CtP в ОАО «Печатный двор» им. А. М. Горького. 197110, Санкт-Петербург, Чкаловский пр., 15.

285

Workshop HTML

Read more

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

Read more


Read more

HTML lernen

Read more

تعلم html

Read more

Азы HTML

Read more

Теги HTML

Read more

HTML Guide

Read more

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

Read more

One Second After (html)

Read more

Справочник тегов HTML

Read more

HTML Professional Projects

Read more

М.Дрязгов. Сибирская баня (html)

Read more

Especificación HTML 4.01

Read more

М.Виноградов. Садовый дом (html)

Read more

Введение в HTML

Read more

Web-конструирование на HTML

Read more

HTML: The Definitive Guide

Read more

HTML: The Definitive Guide

Read more

Спецификация HTML 4.0

Read more

HTML с самого начала

Read more

HTML с самого начала

Read more

Alexroma. HTML (сборник)

Read more

The HTML Pocket Guide

Read more

The Ultimate HTML Reference

Read more

The HTML Pocket Guide

Read more

HTML: the complete reference

Read more

HTML. A Beginner's Guide

Read more

HTML в действии

Read more

Освой самостоятельно HTML

Read more

Recommend Documents

Workshop HTML

workshop HTML 4 Tobias Hauser Marianne Pentenrieder Christian Wenz workshop HTML 4 An imprint of Pearson Education ...


Файл взят с сайта - http://www.natahaus.ru/ где есть ещё множество интересных и редких книг, программ и прочих вещей. Да...


...

HTML lernen

Die Lernen-Reihe In der Lernen-Reihe des Addison-Wesley Verlages sind die folgenden Titel bereits erschienen bzw. in Vo...

تعلم html

www.dinaro.com/vb3 1 www.dinaro.com/vb3  :HTML ‫ﻣﻘﺪﻣﺔ ﻓﻲ ﻟﻐﺔ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬ :‫ﺍﻟﺪ...

Азы HTML

1 А. В. Вильчевский, г. Красноярск, 2011г. Авторские права © 2011 Вильчевский А. В. 2 А. В. Вильчевский, г. Красноя...

Теги HTML

HTML Guide

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

Êðàòêîå ñîäåðæàíèå Áëàãîäàðíîñòè . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Ââåäåíèå . . . . . . . ...

One Second After (html)

Report "HTML"

Your name

Email

Reason

Description

Copyright © 2024 EPDF.PUB. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | DMCA | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

, 122 , 165 , 124 , 123 , 272 , 124 , 273 <TITLE>, 25

ALICEBLUE-ГРЯЗНО ГОЛУБОЙ (#F0F8FF)	ANTIQUEWHITE-АНТИЧНЫЙ БЕЛЫЙ (#FAEBD7)	AQUA-АКВА (#00FFFF)	AQUAMARINE-АКВАМАРИНЗЕЛЕНОВАТОГОЛУБОЙ (#7FFFD4)
AZUREЛАЗУРНЫЙ (#F0FFFF)	BEIGE-БЕЖЕВЫЙ (#F5F5DC)	BISQUE-БИСКВИТ (#FFE4C4)	BLACK-ЧЕРНЫЙ (#000000)
BLANCHEDALMONDБЛЕДНЫЙ ДАЛЬМОНД (#FFEBCD)	BLUE-СИНИЙ (#0000FF)	BLUEVIOLETФИОЛЕТОВЫЙ (#8A2BE2)	BROWN-КОРИЧНЕВЫЙ (#A52A2A)
BURLYWOODДРЕВЕСНЫЙ (#DEB887)	CADETBLUEМОРСКОЙ (#5F9EA0)	CHARTREUSE-ЛИКЕР ШАРТРЕЗ (#7FFF00)	CHOCOLATEШОКОЛАДНЫЙ (#D2691E)
CORAL-КОРАЛЛ (#FF7F50)	CORNFLOWER-КУКУРУЗНЫЙ ЦВЕТОК (#6495ED)	CORNSILK-КУКУРУЗНЫЙ ШЕЛК (#FFF8DC)	CRIMSONМАЛИНОВЫЙ (#DC143C)
CYAN-ГОЛУБОЙ (#00FFFF)	DARKBLUEТЕМНОСИНИЙ (#00008B)	DARKCYANТЕМНОГОЛУБОЙ (#008B8B)	DARKGOLDENRODТЕМНОЗОЛОТОЙ (#B8860B)
DARKGRAYТЕМНОСЕРЫЙ (#A9A9A9)	DARKGREENТЕМНОЗЕЛЕНЫЙ (#006400)	DARKKHAKI- ТЕМНЫЙ ХАКИ (#BDB76B)	DARKMAGENTAТЕМНОПУРПУРНЫЙ (#8B008B)
DARKOLIVEGREENТЕМНОЗЕЛЕНООЛИВКОВЫЙ (#556B2F)	DARKORANGEТЕМНООРАНЖЕВЫЙ (#FF8C00)	DARKORCHID- ТЕМНОЙ ОРХИДЕИ (#9932CC)	DARKREDТЕМНОКРАСНЫЙ (#8B0000)
DARKSALMONТЕМНООРАНЖЕВО РОЗОВЫЙ (#E9967A)	DARKSEAGREENТЕМНОЗЕЛЕНЫЙ МОРСКОЙ (#8FBC8B)	DARKSLATEBLUEТЕМНОСЕРОГОЛУБОЙ (#483D8B)	DARKSLATEGRAYТЕМНОГОЛУБОСЕРЫЙ (#2F4F4F)
DARKTURQUOISEТЕМНОБИРЮЗОВЫЙ (#00CED1)	DARKVIOLETТЕМНОФИОЛЕТОВЫЙ (#9400D3)	DEEPPINK- НАСЫЩЕННО РОЗОВЫЙ (#FF1493)	DEEPSKYBLUE- НАСЫЩЕНО НЕБЕСНЫЙ (#00BFFF)
DIMGRAYТУСКЛОСЕРЫЙ (#696969)	DODGERBLUE- ИЗМЕНЕННЫЙ СИНИЙ (#1E90FF)	FIREBRICK- ОГНЕННО КИРПИЧНЫЙ (#B22222)	FLORALWHITEЦВЕТОЧНОБЕЛЫЙ (#FFFAF0)
FORESTGREEN- ЛЕСНОЙ ЗЕЛЕНИ (#228B22)	FUCHIAФИСТАШКОВЫЙ (#FF00FF)	GAINSBOROГЕЙНСБОРО (#DCDCDC)	GHOSTWHITE-ЕЛЕ ЗАМЕТНЫЙ БЕЛЫЙ (#F8F8FF)
GOLDЗОЛОТОЙ (#FFD700)	GOLDENRODТЕМНОЗОЛОТОЙ (#DAA520)	GRAY-СЕРЫЙ (#808080)	GREEN-ЗЕЛЕНЫЙ (#008000)
GREENYELLOWЗЕЛЕНОЖЕЛТЫЙ (#ADFF2F)	HONEYDEW- МЕДВЕНОЙ РОСЫ (#F0FFF0)	HOTPINKЖАРКОРОЗОВЫЙ (#FF69B4)	INDIANRED- КРАСНЫЙ ИНДИГО (#CD5C5C)
INDIGOИНДИГО (#4B0082)	IVORY- СЛОНОВОЙ КОСТИ (#FFFFF0)	KHAKI-ХАКИ (#F0E68C)	LAVENDERЛАВАНДОВЫЙ (#E6E6FA)
LAVENDERBLUSHПОКРАСНЕННОЙ ЛАВАНДЫ (#FFF0F5)	LAWNGREEN- ТРАВЯНОЙ ЗЕЛЕНИ (#7CFC00)	LEMONCHIFFONЛИМОННОКОРИЧНЕВЫЙ (#FFFACD)	LIGHTBLUEСВЕТЛОСИНИЙ (#ADD8E6)
LIGHTCORALСВЕТЛОКОРАЛЛОВЫЙ (#F08080)	LIGHTCYANСВЕТЛОГОЛУБОЙ (#E0FFFF)	LIGHTGOLDENRODYELLOW- СВЕТЛОЗОЛОТОЙ (#FAFAD2)	LIGHTGREENСВЕТЛОЗЕЛЕНЫЙ (#90EE90)
LIGHTGREYСВЕТЛОСЕРЫЙ (#D3D3D3)	LIGHTPINKСВЕТЛОРОЗОВЫЙ (#FFB6C1)	LIGHTSALMON- СВЕТЛООРАНЖЕВО РОЗОВЫЙ (#FFA07A)	LIGHTSEAGREEN- СВЕТЛОЙ МОРСКОЙ ВОЛНЫ (#20B2AA)
LIGHTSKYBLUEСВЕТЛО-НЕБЕСНО-СИНИЙ (#87CEFA)	LIGHTSLATEGRAY- СВЕТЛОГОЛУБОСЕРЫЙ (#778899)	LIGHTSTEELBLUE- СВЕТЛЫЙ СЕРО-СИНИЙ (#B0C4DE)	LIGHTYELLOWСВЕТЛОЖЕЛТЫЙ (#FFFFE0)
LIME-ЛИПОВЫЙ ЦВЕТ (#00FF00)	LIMEGREENЛИПОВОЗЕЛЕНЫЙ (#32CD32)	LINEN-ЛЬНЯНОЙ (#FAF0E6)	MAGENTAПУРПУРНЫЙ (#FF00FF)
MAROONКАШТАНОВЫЙ (#800000)	MEDIUMAQUAMARINEУМЕРЕННЫЙ АКВАМАРИН (#66CDAA)	MEDIUMBLUE- УМЕРЕННЫЙ СИНИЙ (#0000CD)	MEDIUMORCHID- УМЕРЕННОЙ АРХИДЕИ (#BA55D3)
MEDIUMPURPLEУМЕРЕННО-ПУРПУРНЫЙ (#9370DB)	MEDIUMSEAGREENУМЕРЕННОМОРСКОЙ (#3CB371)	MEDIUMSLATEBLUE (#7B68EE)	MEDIUMSPRINGGREENУМЕРЕННО-СЕРОСИНИЙ (#00FA9A)
MEDIUMTURQUOISEУМЕРЕННОБИРЮЗОВЫЙ (#48D1CC)	MEDIUMVIOLETREDУМЕРЕННО ФИОЛЕТОВОКРАСНЫЙ (#C71585)	MIDNIGHTBLUE- СРЕДНИЙ ТЕМНО-СИНИЙ (#191970)	MINTCREAMКРЕМОВЫЙ (#F5FFFA)
MISTYROSE- КРАСНЫЙ ТУМАН (#FFE4E1)	MOCCASIN- ЦВЕТ ОБУВИ ИНДЕЙЦЕВ (#FFE4B5)	NAVAJOWHITEСВЕТЛОКОРИЧНЕВЫЙ (#FFDEAD)	NAVY-МОРСКОЙ (#000080)
OLDLACE- СТАРЫЕ КРУЖЕВА (#FDF5E6)	OLIVE- ОЛИВКОВЫЙ (#808000)	OLIVEDRAB- СЕРЫЕ ОЛИВКИ (#6B8E23)	ORANGEОРАНЖЕВЫЙ (#FFA500)
ORANGEREDОРАНЖЕВОКРАСНЫЙ (#FF4500)	ORCHID- ОРХИДЕИ (#DA70D6)	PALEGOLDENRODБЛЕДНОЗОЛОТОЙ (#EEE8AA)	PALEGREENБЛЕДНОЗЕЛЕНЫЙ (#98FB98)
PALETURQUOISEБЛЕДНОБИРЮЗОВЫЙ (#AFEEEE)	PALEVIOLETRED- БЛЕДНО ФИОЛЕТОВО КРАСНЫЙ (#DB7093)	PAPAYAWHIP- ДЫННАЯ ПЛЕТЬ (#FFEFD5)	PEACHPUFF- ПЕРСИКОВЫЙ ДЫМ (#FFDAB9)
PERU- ЦВЕТ ПУСТЫНИ (#CD853F)	PINK- РОЗОВЫЙ (#FFC0CB)	PLUM- СЛИВОВЫЙ (#DDA0DD)	POWDERBLUE- ПОРОШКОВО СИНИЙ (#B0E0E6)
PURPLEПУРПУРНЫЙ (#800080)	RED- КРАСНЫЙ (#FF0000)	ROSYBROWN- РОЗОВО КОРИЧНЕВЫЙ (#BC8F8F)	ROYALBLUE- КОРОЛЕВСКО СИНИЙ (#4169E1)
SADDLEBROWNКОРИЧНЕВОЕ СЕДЛО (#8B4513)	SALMON- ЦВЕТ ЛОСОСЯ (#FA8072)	SANDYBROWN- РЫЖЕВАТО КОРИЧНЕВЫЙ (#F4A460)	SEAGREEN- МОРСКОЙ ЗЕЛЕНИ (#2E8B57)
SEASHELL- МОРСКИХ РАКОВИН (#FFF5EE)	SIENNA- ОХРА (#A0522D)	SILVERСЕРЕБРЯНЫЙ (#C0C0C0)	SKYBLUE- СИНЕГО НЕБА (#87CEEB)
SLATEBLUEСЛАНЦЕВОСИНИЙ (#6A5ACD)	SLATEGRAY- СЛАНЦЕВОСЕРЫЙ (#708090)	SNOW- СНЕГ (#FFFAFA)	SPRINGGREEN- ВЕСЕННЯЯ ЗЕЛЕНЬ (#00FF7F)
STEELBLUE-СИНЕВАТО СТАЛЬНОЙ (#4682B4)	TAN-КОРА ДУБА (#D2B48C)	TEAL-ЧИРОК (#008080)	THISTLEЧЕРТОПОЛОХ (#D8BFD8)
TOMATOТОМАТНЫЙ (#FF6347)	TURQUOISEБИРЮЗА (#40E0D0)	VIOLETФИОЛЕТОВЫЙ (#EE82EE)	WHEAT-ПШЕНИЦА (#F5DEB3)
WHITE-БЕЛЫЙ (#FFFFFF)	WHITESMOKEДЫМ (#F5F5F5)	YELLOW-ЖЕЛТЫЙ (#FFFF00)	YELLOWGREEN- ЖЕЛТОЗЕЛЕНЫЙ (#9ACD32)