HTML

ТАБЛИЦА УМНОЖЕНИЯ
	2	3	4	5	6	7	8	9
2	4	6	8	10	12	14	16	18
3	6	9	12	15	18	21	24	27
4	8	12	16	20	24	28	32	36
5	10	15	16	25	30	35	40	45
6	12	18	24	30	36	42	48	54
7	14	21	28	35	42	49	56	63
8	16	24	32	40	48	56	64	72
9	18	27	36	45	54	63	72	81

Вступительные экзамены:
Экономика и управление на предприятии	Математика, русский язык
Книгораспространение	Русский язык, история отечества
Технология полиграфического производства	Математика, русский язык
Реклама	Русский язык, литература, история отечества

Пример таблицы с объединенными ячейками по вертикали и горизонтали
а11 ячейка первого столбца и первой строки	а12 ячейка второго столбца и первой строки	а13+а23 (объединение ячеек по вертикали)
ячейка а21 выравнивание по центру	ячейка а22 выравнивание по правому краю ячейки
ячейка а31	а32+а33 (объединение ячеек по горизонтали)

Таблица, в которой объединены ячейки
1111111	2	Объединение по горизонтали	4	5	6	7	8	9
	4 4444	66666	88888	10000	12000	14000	16000	18000
Объединение по горизонтали	6	9	12
4		12	16	20	24	28	32
т		а	б	л	и	ц	а
е
к		11	11	11	11	11	11
с		11	11	11	11	11	11
т		11	11	11	11	11	11

Таблица №1
	Среднее значение
Рост	вес
Мужчины	184	88
Женщины	168	63

Цветовая панель rgb
RED	Красный
GREEN	Зеленый
BLUE	Синий

ЗАГОЛОВОК ТАБЛИЦЫ
ячейка 11	ячейка 12
ячейка 21	ячейка 22

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

	Способ выравнивания
По левому краю	Центрирование	По правому краю
Направление	По вертикали	Этот текст выровнен по левому краю	Этот текст отцентрирован	Этот текст выровнен по правому краю
По горизонтали	Вверху	Посередине	Внизу

Подпись таблицы внизу и слева
Столбец 1	Столбец 2	Столбец 3
Текст выделен цветом	ячейка 12	ячейка 13
ячейка 21	ячейка 22	ячейка 23
ячейка 31	ячейка 32	ячейка 33

CSS (Cascading Style Sheets - каскадные листы стилей)
Объединение двух ячеек по горизонтали	Текст выделен цветом	ячейка 12	ячейка 13
ячейка 21	ячейка 22	ячейка 23
строка 3	ячейка 31	ячейка 32	ячейка 33

Программный код - текст программы
столбец 1	Объединение двух ячеек по вертикале
Текст выделен цветом	ячейка 12	ячейка 13
ячейка 21	ячейка 22	ячейка 23
ячейка 31	ячейка 32	ячейка 33

Заголовок таблицы - параметр frame = void
Заголовок строки 1 - тег th	Текст выделен цветом, курсивом и расположен с правого края	ячейка 12	ячейка 13
Заголовок строки 2 - тег th	ячейка 21	ячейка 22	ячейка 23
Заголовок строки 3 - тег th	ячейка 31	ячейка 32	ячейка 33

Заголовок таблицы
Заголовок 1	Заголовок 2	Заголовок 3
ячейка 11	ячейка 12	ячейка 13
ячейка 21	ячейка 22	ячейка 23
ячейка 31	ячейка 32	ячейка 33

ЗАГОЛОВОК ТАБЛИЦЫ
	Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
Заголовок 5	ячейка 11	ячейка 12	ячейка 13	ячейка 14
Заголовок 6	ячейка 21	ячейка 22	ячейка 23	ячейка 24

Заголовок таблицы
Заголовок 1	Заголовок 2 152 Урок 8. Таблицы
ячейка 1	ячейка 2
ячейка 3
ячейка 4
ячейка
ячейка
ячейка
ячейка

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

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

331 downloads 2498 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������������������ ���������������������� -документа так называемый контейнер. Тег . Структурно документ распадается на две части: заголовочную и основную, или тело документа. Заголовочная часть размещается между тегами и , основная — между тегами и .

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

Тег <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-кода документа

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

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

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

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

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

Атрибут 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). Видно, что текст имеет отступы от левого и правого краев, а также сверху (и снизу, в чем можно убедиться, выполнив прокрутку). Так как текст полностью в окно не помещается, автоматически справа появляется вертикальная полоса прокрутки.

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

Рис. 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, и т. д. Теги

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

с меньшими номерами определяют заголовки более высокого уровня. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовок самого верхнего уровня имеет признак 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> Размер шрифта

Шрифт

П Е Т Е Р Б У Р Г

Данный тег появился в 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, что позволяет выровнять абзац соответственно по

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

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

Данный тег появился в 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. Веб-страница, содержащая тег

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

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

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

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

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

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

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

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

Листинг 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 - число пунктов,на которое необходимо увеличить или уменьшить размер шрифта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тег <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> Строки без разрыва Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было

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

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

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

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

Вставка цитат Тег определяет текст как цитату большого размера и отображает его с отступами от левого и правого краев. Этот тег позволяет расположить текст компактно в центре страницы. При использовании этого тега несколько раз, текст все больше сжимается к центру. Тег имеет атрибут 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 позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария:

Акронимы

Комментарии могут встречаться в документе где угодно и в любом количестве. Данный тег появился в HTML версии 2.0.

Акронимы Два тега и (см. урок 19) позволяют выделять акронимы, или аббревиатуры (сокращения полных названий), в пределах текста. Содержимое тегов и выводится в виде всплывающих подсказок, которые дают пользователю возможность увидеть расшифровку акронимов. Пример использования тега показан на рис. 2.18 (листинг 2.18).

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

Листинг 2.18. Пример создания веб-страницы, содержащей акроним <TITLE> Акроним СЗИП СПГУТД

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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. Он может быть элементом блочного либо текстового уровня. Изменение вложенного блокового содержания должно выполняться на нижнем уровне.

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

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

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

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

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

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

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

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

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

Размещение графики на веб-странице Для вставки графики в веб-страницу используется тег . Графика позволяет значительно улучшить внешний вид и функциональность документов. Тег (от англ. 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 этого формата обеспечивает возможность чересстрочной развертки, что позволяет постепенно повышать качество принятого через канал связи изображения. Это самый распространенный формат изображений в Интернете.

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

Изображения в формате 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 мм.

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

Конечно, для качественного дизайна требуется монитор с большим разрешением. Иногда дизайнер может редактировать изображение попиксельно. Разрешающая способность экрана зависит от монитора и видеоадаптера компьютера. Статические растровые изображения представляют собой двухмерный массив чисел. Элементы этого массива называют пикселами (от англ. 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. Изображение ромашки на веб-странице

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

На рис. 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. Четыре рисунка в таблице

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

Листинг 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-адрес нужной страницы и передает серверу не координаты точки щелчка, а этот адрес. Второй случай предпочтительнее, так как на сервере не приходится запускать программу (сценарий), выполняющую просмотр изображения с целью определения активной области. По соображениям безопасности многие системные админи-

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

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

Тег <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. Синтаксис:

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

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">

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

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

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

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

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

74 Урок 3. Графика Возможно
обтекание текста
вокруг таблицы

Петродворец Ломоносов Пушкин Павловск
Графические ссылки
<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), содержащая три изображения разного размера, источником которых является один и тот же файл. Файл имеет

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

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

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

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

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

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

Рис. 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 пикселов, оно не может полностью поместиться на экране, и появляется вертикальная полоса прокрутки. Для мониторов, размеры которых в пикселах отличаются от величи-

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

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

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

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

На рис. 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. Веб-страница, содержащая текст белого цвета на синем фоне

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

Листинг 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>Таблица цветов Таблица цветов

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

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

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

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

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

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

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

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-апплеты, сценарии и пр.

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

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

Атрибуты: 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. Примеры создания коротких горизонтальных линий КОРОТКИЕ ГОРИЗОНТАЛЬНЫЕ ЛИНИИ Линии в виде фигур
_______________________________________________________
Данная линия есть совокупность символов подчеркивания

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

Примеры горизонтальных линий, выровненных по правому краю, показаны на рис. 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. Пример создания веб-страницы со специальными символами СПЕЦ СИМВОЛЫ</head> Амперсант & Знак меньше < Знак больше > Знак торговой марки ™ Неразрывный пробел Цент ¢ Фунт £ Знак валюты ¤ Вертикальная черта ¦ Знак параграфа § Знак копирайта © Специальные символы 95 Прямая кавычка " Левая типографская кавычка « Правая типографская кавычка » Знак зарегистрировано ® знак градуса ° Степень1 ¹ Степень2 ² Степень3 ³ Знак микро µ Знак абзаца ¶ Точка маркер · 1/4 ¼ 1/2 ½ Знак умножения × Знак деления ÷ Рис. 5.7. Веб-страница, содержащая специальные символы Примеры открывающих и закрывающих тегов показаны на рис. 5.8 (листинг 5.10). Здесь же представлены надписи различного цвета. Листинг 5.10. Пример создания веб-страницы, содержащей открывающие и закрывающие теги ЦВЕТ ТЕКСТА font size=5 96 Урок 5. Линии, точки и другие объекты Рис. 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> не рекомендован к применению. Вместо него желательно использовать тег

	а12		а14		а16
а21		а23		а25		а27

ячейка 11	ячейка 12	ячейка	ячейка 15
ячейка 21	ячейка 22	ячейка	ячейка 25
ячейка 31	ячейка 32	ячейка	ячейка 35
ячейка 41	ячейка 42	ячейка	ячейка 45
ячейка 51	ячейка 52	ячейка	ячейка 55
ячейка 61	ячейка 62	ячейка	ячейка 65
ячейка 71	ячейка 72	ячейка	ячейка 75
ячейка 81	ячейка 82	ячейка	ячейка 85

ячейка 11	ячейка 12	ячейка	ячейка 15
ячейка 21	ячейка 22	ячейка	ячейка 25
ячейка 31	ячейка 32	ячейка	ячейка 35
ячейка 41	ячейка 42	ячейка	ячейка 45
ячейка 51	ячейка 52	ячейка	ячейка 55
ячейка 61	ячейка 62	ячейка	ячейка 65
ячейка 71	ячейка 72	ячейка	ячейка 75
ячейка 81	ячейка 82	ячейка	ячейка 85

ячейка 11	ячейка 12	ячейка	ячейка 15
ячейка 21	ячейка 22	ячейка	ячейка 25
ячейка 31	ячейка 32	ячейка	ячейка 35
ячейка 41	ячейка 42	ячейка	ячейка 45
ячейка 51	ячейка 52	ячейка	ячейка 55
ячейка 61	ячейка 62	ячейка	ячейка 65
ячейка 71	ячейка 72	ячейка	ячейка 75
ячейка 81	ячейка 82	ячейка	ячейка 85

ячейка 11	ячейка	ячейка 15
ячейка 21	ячейка	ячейка 25
ячейка 31	ячейка	ячейка 35
ячейка 41	ячейка	ячейка 45
ячейка 51	ячейка	ячейка 55
ячейка 61	ячейка	ячейка 65
ячейка 71	ячейка	ячейка 75
ячейка 81	ячейка	ячейка 85

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)

	2	3	4	5	6	7	8	9
2	4	6	8	10	12	14	16	18
3	6	9	12	15	18	21	24	27
4	8	12	16	20	24	28	32	36
5	10	15	16	25	30	35	40	45
6	12	18	24	30	36	42	48	54
7	14	21	28	35	42	49	56	63
8	16	24	32	40	48	56	64	72
9	18	27	36	45	54	63	72	81

код	цвет
#b0e0e6	1
#afeeee	2
#7fffd4	3 Примеры таблиц
#00fa9a
#00ff00
#32cd32
#008000
#006400
#008080
#ff6800
#ff6000
#ff5800 139	4	5	6	7	8	9	10	11 td bgcolor=#ff5800>12

элемент 11	элемент 12	элемент 13
элемент 21	элемент 22	элемент 23

элемент 31	элемент 32	элемент 33
элемент 41	элемент 42	элемент 43

элемент 51	элемент 52	элемент 53
элемент 61	элемент 62	элемент 63

Знак	Значение	Кто ввел	Год
=	равенство	Р.Рекорд	1557
>, <	больше, меньше	Т.Гарриот	1631
¶	Отношение длины окружности к диаметру	У.Джонсон	1706
×	умножение	У.Оутред	1631
log	логарифм	И.Кеплер	1624
sin	синус	Б.Кавальери	1632
cos	косинус	Л.Эйлер

CYAN
MAGENTA
YELLOW
BLAСK

CYAN
MAGENTA
YELLOW
BLAСK

	2	3	4	5	6	7	8	9
2	4	6	8	10	12	14	16	18
3	6	9	12	15	18	21	24	27
4	8	12	16	20	24	28	32	36
5	10	15	16	25	30	35	40	45
6	12	18	24	30	36	42	48	54
7	14	21	28	35	42	49	56	63
8	16	24	32	40	48	56	64	72
9	18	27	36	45	54	63	72	81

А. С. Пушкин

Зимняя дорога

А. С. Пушкин

Зимнее утро

Заголовок первого уровня

Заголовок 1 - Транспортный протокол

Заголовок 2 - Протокол маршрутизации

Заголовок 3 - Протокол передачи файлов

Заголовок 4 - Протокол передачи почты

Заголовок 5 - Сетевой протокол

Заголовок 6 - Протокол поддержки сетевого адреса

Обтекание текстом объектов

Пригороды Санкт-Петербурга

Графические ссылки

Таблица цветов

КРАСИВЫЕ ТОЛСТЫЕ И ТОНКИЕ ЛИНИИ

значение size = и width =

Линии в виде фигур

Линии, выровненные по правому краю

Лист, нарисованный с помощью символов, введенных с клавиатуры

<pre> ^ /|\ \\|// \\\|/// \\\\|//// \\\|/// \\\\\\|////// \\\\\|///// \\\|/// |

oooooo o o o ! ! o o o o ==== o o o oooo

/ / / / / / / / / /---------/ / { } ( * * ) { <> } { } <###> ----

ПРОТОКОЛЫ И МОДЕЛИ ИНТЕРНЕТ-ВЗАИМОДЕЙСТВИЯ

Северо-Западный институт печати

Санкт-Петербургский государственный университет технологии и дизайна

Таблица из двух строк и семи столбцов

ТАБЛИЦА ИЗ ДВУХ СТРОК И СЕМИ СТОЛБЦОВ

ЦВЕТОВАЯ МОДЕЛЬ CMYK

цветовая модель cmyk

ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ

ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ

ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ

ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ

СЕВЕРО-ЗАПАДНЫЙ ИНСТИТУТ ПЕЧАТИ

наш адрес

ПЕРЕУЛОК ДЖАМБУЛА, дом 13

ПРОСТАЯ ТАБЛИЦА

<strong><em>Различные способы выравнивания

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

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

ТАБЛИЦЫ С РАЗЛИЧНЫМИ РАМКАМИ

Заголовок, выровненный по центру

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

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

Родина моя

Санкт-петербург

Как сделать красиво?

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

Даты возникновения математических знаков

МОЯ ПЕРВАЯ ФОРМА

КАКАЯ ФОРМА ВЫГЛЯДИТ ЛУЧШЕ?

ИЛИ

Устройства ввода-вывода компьютера

Лист,
нарисованный с помощью символов,
введенных с клавиатуры

/ / / /
/ / / /
/ /---------/ /
{ }
( * * )
{ <> }
{ } <###> ----

	2	3	4	5	6	7	8	9
2	4	6	8	10	12	14	16	18
3	6	9	12	15	18	21	24	27
4	8	12	16	20	24	28	32	36
5	10	15	16	25	30	35	40	45
6	12	18	24	30	36	42	48	54
7	14	21	28	35	42	49	56	63
8	16	24	32	40	48	56	64	72
9	18	27	36	45	54	63	72	81