В. В. ЯНЦЕВ

РАЗРАБОТКА
WEB-СТРАНИЦ
НА HTML, CSS
И JAVASCRIPT
УЧЕБНОЕ ПОСОБИЕ
Издание второе, стереотипное

САНКТ-ПЕТЕРБУРГ • МОСКВА • КРАСНОДАР
2025

.

УДК 004
ББК 32.973.4я723
Я 65

Янцев В. В. Разработка web-страниц на HTML, CSS и JavaScript : учебное
пособие для СПО / В. В. Янцев. — 2-е изд., стер. — Санкт-Петербург : Лань,
2025. — 148 с. : ил. — Текст : непосредственный.
ISBN 978-5-507-52427-3
Издание, которое держит в руках начинающий программист, посвящено разработке
web-страниц. Вместе с автором вы пройдете путь от создания простейшего документа,
содержащего только текст, до оформления полноценного ресурса с иллюстрациями и
компонентами интерактивного взаимодействия. Книга познакомит вас с наиболее
важными элементами HTML; основными свойствами, которые указываются в таблицах
стилей CSS; приемами управления объектами документа с помощью языка программирования JavaScript. Читателя также ждет бонус — рассказ о технологии Ajax с
конкретными примерами, а также вспомогательный материал, посвященный созданию на
своем компьютере полноценной среды разработки.
Рекомендовано в качестве дополнительной литературы для студентов, обучающихся
в средних профессиональных учебных заведениях по направлению «Информатика и
вычислительная техника». Соответствует современным требованиям Федерального
государственного образовательного стандарта среднего профессионального образования
и профессиональным квалификационным требованиям.
К книге прилагаются дополнительные материалы, доступные в электронной
библиотечной системе «Лань» по ссылке или QR-коду, указанным ниже.
УДК 004
ББК 32.973.4я723

Обложка
П. И. ПОЛЯКОВА

© Издательство «Лань», 2025
© В. В. Янцев, 2025
© Издательство «Лань», художественное
оформление, 2025

ОГЛАВЛЕНИЕ
1. ВВЕДЕНИЕ .......................................................................................... 5
1.1. О чем эта книга ................................................................................ 5
1.2. Особенности изложения материала ............................................... 5
1.3. Оформление кода ............................................................................ 6
1.4. Необходимые браузеры .................................................................. 7
1.5. Устанавливаем редактор................................................................. 8
1.6. Кодировка файлов ......................................................................... 14
1.7. Проверка кода ................................................................................ 15
2. СОЗДАНИЕ РАЗМЕТКИ СТРАНИЦЫ ....................................... 20
2.1. Простейшая страница ................................................................... 20
2.2. Тип документа ............................................................................... 22
2.3. Головная часть и тело документа ................................................ 22
2.4. Абзацы ............................................................................................ 24
2.5. Заголовки ....................................................................................... 24
2.6. Блоки текста ................................................................................... 28
2.7. Горизонтальные линии ................................................................. 29
2.8. Таблицы.......................................................................................... 32
2.9. Надстрочный и подстрочный текст ............................................. 33
2.10. Перевод строки ............................................................................ 34
2.11. Жирный, подчеркнутый, курсив ................................................ 36
2.12. Изображения на странице........................................................... 37
2.13. Списки и ссылки.......................................................................... 40
2.14. Атрибуты тегов............................................................................ 41
3. ОФОРМЛЕНИЕ ЭЛЕМЕНТОВ СТРАНИЦЫ ............................ 43
3.1. Контейнер ...................................................................................... 43
3.2. Размеры области контента............................................................ 44
3.3. Позиционирование контейнера.................................................... 47
3.4. Выравнивание текста .................................................................... 47
3.5. Отступы в абзацах ......................................................................... 50
3.6. Оформление изображений............................................................ 52
3.7. Позиционирование рисунков ....................................................... 54
3.8. Параметры обтекания текстом ..................................................... 54
3.9. Шрифт и его размер ...................................................................... 57
3.10. Изменения в горизонтальных линиях ....................................... 57
3.11. Стили вместо тегов ..................................................................... 57
3

3.12. Корректировка таблицы.............................................................. 62
3.13. Настраиваем надстрочный
и подстрочный тексты ......................................................................... 63
3.14. Оформление ссылок .................................................................... 64
3.15. Контекстный селектор ................................................................ 64
3.16. Компоновка страницы с помощью таблиц ............................... 65
3.17. Оформление основной таблицы................................................. 67
3.18. Завершающие штрихи ................................................................ 69
3.19. Позиционирование ...................................................................... 69
3.20. Внешние таблицы стилей ........................................................... 71
4. УПРАВЛЕНИЕ ОБЪЕКТАМИ ДОКУМЕНТА........................... 73
4.1. Что такое JavaScript....................................................................... 73
4.2. Переменные ................................................................................... 74
4.3. Массивы ......................................................................................... 77
4.4. Условия .......................................................................................... 79
4.5. Циклы ............................................................................................. 83
4.6. Функции ......................................................................................... 85
4.7. Регистрация обработчиков ........................................................... 89
4.8. Всплывающие подсказки .............................................................. 94
4.9. Выделение блока ........................................................................... 98
4.10. Скрипт просмотра фото ............................................................ 101
4.11. Внешние сценарии .................................................................... 103
5. ТЕХНОЛОГИЯ AJAX .................................................................... 105
5.1. Выясняем разрядность ОС ......................................................... 105
5.2. Установка пакета Visual C++ ..................................................... 106
5.3. Установка сервера Apache 2.4 .................................................... 108
5.4. Установка PHP 8.......................................................................... 115
5.5. Как функционирует Ajax ............................................................ 118
5.6. Поля форм .................................................................................... 118
5.7. Добавляем форму на страницу................................................... 123
5.8. Стилизуем форму ........................................................................ 124
5.9. Тестируем пример ....................................................................... 127
6. ЗАКЛЮЧЕНИЕ ............................................................................... 132
7. ПРИЛОЖЕНИЯ .............................................................................. 133
7.1. Установка Python 3 ...................................................................... 133
7.2. Основные элементы HTML5 ...................................................... 137
7.3. Основные стили CSS3 ................................................................. 141
8. СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ ................... 146
4

1. ВВЕДЕНИЕ
Среда веб-разработки — очень интересная область деятельности. И особенно она привлекательна тем, что у нее низкий уровень входа. Действительно,
чтобы создать веб-страницу, достаточно примитивного редактора Блокнот.
В нем вы можете написать HTML-код, таблицу стилей и сценарий на JavaScript.
Не нужно устанавливать компилятор или интерпретатор. Все необходимое для
запуска такой страницы содержится в «недрах» любого современного браузера.
Да и база для веб-программирования — HTML, CSS и JavaScript — проста в
изучении и доступна любому, кто хочет ее освоить.

1.1. О чем эта книга
Предлагаемая вашему вниманию книга является пособием, знакомящим
читателя со всеми аспектами веб-программирования.
Обычно в литературе подобного рода уделяется внимание только какомуто одному разделу. Например, языку разметки HTML, каскадным таблицам
стилей CSS, языку программирования JavaScript.
Эта книга последовательно проводит читателя по всем трем направлениям. А главное — изучение нового материала все время происходит на практических примерах.
Получив начальные знания, вы сможете использовать их при решении
разных задач. Это как в математике: изучили формулу, решили несколько примеров вместе с преподавателем. Тем самым разобрались с алгоритмом, который
отныне можно применять при решении других задач.
Особенность книги состоит в том, что в ней описаны азы вебпрограммирования. Автор разобрал ограниченный перечень тегов, свойств и методов. Чтобы развивать свои знания дальше, будет полезным иметь под рукой
справочники HTML и CSS, а также какую-нибудь серьезную книгу по JavaScript.
На последнюю тему автор может посоветовать свое учебное пособие «JavaScript.
Креативное программирование», которое вышло в издательстве «Лань» в 2023 г.

1.2. Особенности изложения материала
В книге семь глав.
Первая — «Введение». Вы сейчас читаете ее.
Главы 2–4 построены следующим образом.
Глава 2. Читатель создает страницу с простейшим текстом. После чего
начинает изучение HTML5, добавляя на страницу по мере освоения материала
все новые и новые теги и превращая ее в полноценный веб-документ.
Глава 3. Переходим к изучению CSS. Во время этого процесса на страницу добавляются все новые и новые стили, после чего она приобретает качественное оформление.
5

Глава 4. Читатель знакомится с JavaScript и добавляет интерактивность
содержанию.
Глава 5. Бонусная глава, посвящена технологии Ajax, позволяющей странице обмениваться информацией с сервером без перезагрузки документа. Сначала мы создадим на домашнем компьютере локальный хостинг, а затем посмотрим Ajax в действии.
Глава 6 содержит ряд вспомогательных материалов, которые могут пригодиться начинающему разработчику.
И в самой короткой главе 7 мы подведем итоги нашей работы.
Книгу сопровождает zip-архив со всеми рассмотренными программами.
Его можно скачать по ссылке или QR-коду, указанным на обороте титула.
Работать с архивом очень просто. Если описание какой-то программы
начинается с указания Файл, значит, ее страница находится в той или иной папке архива. Понять, где найти программу, легко. Вот пример:
Файл 3/3.5.1.html

Здесь до слеша указано название папки, где размещается необходимый
вам файл. Цифра в имени папки соответствует номеру главы, к которой эта
папка относится. Дальше идет имя файла — 3.5.1.html. Первая цифра в его
имени — номер главы, вторая — номер раздела, третья — порядковый номер
программы, под которым она описана в разделе.
Глядя на пример выше, понятно, что перед нами сценарий из третьей главы, из пятого раздела. В данном разделе этот сценарий разбирается первым
(кстати, он единственный в указанном разделе).
Чтобы посмотреть код, откройте страницу в каком-либо из специализированных редакторов. Про установку одного из таких редакторов вы прочитаете в
параграфе 1.5 «Введения». Хотите посмотреть сценарий в действии? Просто
запустите ту или иную страницу в браузере.

1.3. Оформление кода
Коды страниц имеют различное типографское оформление в соответствии с их размещением в тексте.
Если код в книге выделен в отдельный блок, то он оформлен моноширинным шрифтом, например так:
<ul>
<li><a href="https://www.mos.ru/">Москва</a></li>
<li><a href="https://www.fontanka.ru/">Санкт-Петербург</a></li>
<li><a href="https://kzn.ru/">Казань</a></li>
</ul>

Если фрагменты сценария внедрены непосредственно в текст, то в этом
случае части кода выделены полужирным шрифтом, например так:
если выполняется условие ev.target.tagName=="IMG", то

6

Обратите внимание: в некоторых блоках программ сделан перенос
части кода на вторую и даже на третью или четвертую строку (из-за недостатка ширины страницы в книге). Это непринципиально, если речь идет
о HTML или CSS. А вот в реальном сценарии JavaScript такой перенос кода не делается. Запомните правило: все переносы строк кода JavaScript
существуют только в их типографском воспроизведении. Если вы в дальнейшем столкнетесь с подобной ситуацией, учитывайте данный аспект.
Еще один момент. Обычно таблицы стилей какой-либо страницы принято
записывать следующим образом (пример):
p {
text-align: justify;
text-indent: 50px;
font-family: Tahoma;
font-size: 18px;
}

Однако подобный код занимает в книге слишком много места. Поэтому
автор применил сокращенную форму записи стилей (например, так):
p {text-align: justify; text-indent: 50px;
font-family: Tahoma; font-size: 18px;}

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

Например, сокращенный вариант для предыдущего примера с настройками стилей может выглядеть так:
#spb {... font-size: 18px;}

Тем самым мы показываем, что на данном этапе описания нам важно обратить внимание исключительно на размер шрифта.
И последнее. Все принципиально важные фрагменты текста или кода в
отдельных блоках, на которые надо обратить особое внимание, выделены полужирным шрифтом. Например, так:
p {text-align: justify; text-indent: 50px;
font-family: Tahoma; font-size: 18px;}

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

Нынешним программистам стало гораздо легче: все современные браузеры почти одинаково обрабатывают HTML, CSS и JavaScript. Однако некоторые
незначительные различия еще остаются.
На взгляд автора, обязательный набор разработчика должен включать
минимум пять веб-обозревателей. Если вы решили серьезно заниматься вебпрограммированием, лучше установить на свой компьютер следующие браузеры, чтобы проверять, идентично ли в них выглядят написанные вами вебстраницы. Расскажем о браузерах по порядку.
1. Браузер Microsoft Edge. Входит в состав операционной системы
Windows 10, поэтому не нуждается в скачивании и установке. Многие опытные
программисты не любят данный браузер и игнорируют его при проверке сценариев. Автор считает, что это серьезная ошибка. Дело в том, что Microsoft Edge
является браузером по умолчанию в операционной системе Windows 10. Многие пользователи, не такие продвинутые, как программисты, просто используют то, что у них изначально установлено на ПК. Следовательно, большой процент посетителей Интернета прибегают к услугам Microsoft Edge.
2. Google Chrome. На субъективный взгляд автора — лучший браузер.
И, судя по некоторым опросам, наиболее популярный. Он моложе некоторых
своих конкурентов, но снабжен самыми передовыми решениями и очень быстро развивается. И это неудивительно — ведь за ним стоит такой гигант, как
компания Google. Скачать ПО можно здесь: https://www.google.ru/chrome/.
3. «Яндекс.Браузер». После его создания компания «Яндекс» вложила
заметные средства в рекламу и популяризацию своей разработки. Поэтому данный браузер стоит у многих владельцев компьютеров с ОС Windows. Этих людей обязательно надо учитывать. Скачать дистрибутив можно здесь: https://
browser.yandex.ru/.
4. Opera — один из старейших браузеров, существовавших еще во времена
борьбы за лидерство между Netscape Navigator и Internet Explorer. В России у него
много поклонников. Недаром среди российских пользователей Интернета показатель его популярности в несколько раз выше, чем общемировой уровень. Кстати,
браузер Opera был одним из первых, кто начал поддерживать таблицы стилей.
Скачать программное обеспечение можно здесь: https://www.opera.com/ru.
5. Mozilla Firefox. В этом браузере сценарии необходимо проверять в
обязательном порядке. У него достаточно высокий уровень популярности. При
этом есть ряд отличий в обработке кода по сравнению с четырьмя перечисленными выше браузерами. Что-то Mozilla Firefox обрабатывает аналогично
остальным браузерам, а что-то — по-своему. Во всяком случае автор неоднократно сталкивался с ситуациями, когда код, отлично работавший в других
браузерах, начинал «капризничать» в Mozilla Firefox. Скачать браузер можно
здесь: https://www.mozilla.org/ru/firefox/.

1.5. Устанавливаем редактор
Настоящего программиста невозможно представить без полноценного
текстового редактора, специально предназначенного для создания программ.
8

Конечно, весь код можно писать в обычном Блокноте. Но гораздо лучше и рациональнее пользоваться специализированными редакторами. Такие приложения намного удобнее: они подсвечивают код, предлагают синтаксические подсказки, позволяют менять кодировку документов, сохраняют файлы в разных
форматах.
В нашем случае необходим редактор, который позволит:
– выполнять качественную разметку;
– создавать файлы с таблицами стилей;
– писать сценарии на JavaScript;
– писать серверные приложения на PHP.
Этим принципам удовлетворяют многие редакторы. Но лучше всего, на
взгляд автора, Notepad++. Где его взять и как установить, рассказано ниже.
Скачать Notepad++ можно по адресу https://notepad-plus-plus.org/
downloads/ (рис. 1.5.1).
Устанавливается редактор следующим образом. Запустите скачанный
файл. В первую очередь появится окно выбора языка программы. Оставляем
русский (рис. 1.5.2) и нажимаем кнопку ОК.

Рис. 1.5.1
Сайт с файлами редактора Notepad++

Рис. 1.5.2
Выбираем язык ПО

В следующем окне нажимаем кнопку Далее (рис. 1.5.3). Затем нажатием
кнопки Принимаю соглашаемся с условиями лицензии (рис. 1.5.4).
Теперь нам необходимо выбрать папку для установки программы.
По умолчанию предлагается C:\Program Files\Notepad++. Думаю, такой вари9

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

Рис. 1.5.3
Нажимаем кнопку Далее

Рис. 1.5.4
Соглашаемся с условиями лицензии

10

Рис. 1.5.5
Выбираем папку для установки программы

Рис. 1.5.6
Здесь ничего не меняем, жмем кнопку Далее

На последнем этапе перед началом непосредственной установки на
вкладке появится пункт Create Shortcut on Desktop (рис. 1.5.7). То есть нам
11

предлагают создать ярлык программы на рабочем столе. Делать это или нет —
зависит от вашего желания. Заметим, что после установки редактора ссылка на
него добавится в контекстное меню. Достаточно будет навести указатель мыши
на файл, щелкнуть правой клавишей и в списке возможных действий вы увидите строку Edit with Notepad++ или Редактировать в Notepad++. Кликните по
ней — и файл будет открыт в редакторе.
Разобравшись с вопросом, необходим ли ярлык на Рабочем столе или нет,
нажмите кнопку Установить. Дождитесь окончания процесса (рис. 1.5.8).
После завершения установки вам нужно будет принять еще одно решение: сразу запустить программу или отложить это дело «на потом». Для этого
оставьте или снимите «галочку» в пункте Запустить Notepad++ (рис. 1.5.9).
Теперь нажмите кнопку Готово. Поздравляю — отныне на вашем компьютере
установлен профессиональный текстовый редактор!
Познакомимся с ним поближе. Как выглядит редактор, вы можете видеть
на рисунке 1.5.10.

Рис. 1.5.7
Нажимаем кнопку Установить

Notepad++ позволяет:
– выполнять поиск по файлу в разных направлениях;
– производить замену по шаблону;
– устанавливать кодировки, в том числе необходимую для нашего проекта UTF-8;
– менять страницы, форматируя их по стандартам разных операционных
систем — Windows, Unix или macOS;
– подсвечивать код, выделяя разные по назначению фрагменты, операторы, функции, переменные, комментарии и т. д.;
12

– выбирать синтаксис документа (благодаря чему меняются варианты
подсветки кода), например HTML, CSS, JavaScript или PHP;
– сохранять файлы с разным расширением;
– менять стили оформления окна программы — вариантов достаточно,
найдется любой по желанию;
– выполнять еще многие и многие операции.

Рис. 1.5.8
Ждем окончания процесса

Рис. 1.5.9
Завершение установки

13

Рис. 1.5.10
Редактор Notepad++ с открытым в нем файлом JavaScript

1.6. Кодировка файлов
Создавая примеры, автор сохранял их в кодировке utf-8. Если вы будете
самостоятельно писать код, обязательно сохраняйте все файлы — html, css, js,
php — в формате utf-8.
Как это сделать? Откройте редактор Notepad++ и наберите код программы. Затем в меню редактора кликните закладку Кодировки и посмотрите, в каком формате написан файл. Если не в utf-8, то в открывшемся меню щелкните
на строке Преобразовать в UTF-8 (рис. 1.6.1). Сохраните результаты вашей
работы.

Рис. 1.6.1
Выбор кодировки для файла

14

1.7. Проверка кода
Как ни хороши современные веб-обозреватели, но кое-чем автору они категорически не нравятся. А именно тем, что в них все очень тщательно продумано и предусмотрено. В результате, даже получив некачественный код, браузеры понимают, чего хотел добиться программист, и демонстрируют правильную веб-страницу. А это провоцирует разработчиков небрежно относиться к
своим обязанностям. В результате миллионы сайтов за красивой оболочкой содержат множество ошибок и нарушений стандартов, которые веб-обозреватели
успешно исправляют.
Удивительно, но даже в ресурсах лидеров мировой веб-индустрии ошибок и нарушений немало.
Большинство из таких сайтов сделаны на популярных «движках», как
иногда называют всем известные CMS. Ошибки и отклонения от стандартов заложены у них в модулях, формирующих страницы.
Автор относится к тому немногочисленному отряду программистов, которые выпускают «продукцию» в свет, только добившись абсолютно чистого
кода. Поэтому я проверил разметку, стили и сценарии с помощью валидаторов.
Валидатор — это специальная программа для проверки кода, написанного
на одном из языков, предназначенных для создания веб-проектов. Задача такой
программы — найти ошибки, если они есть, и выдать их перечень разработчику
или сообщить, что код безупречный, если ошибок нет.
Можно сказать и по-другому: назначение того или иного валидатора —
проверять код на соответствие стандартам языка программирования.
Стандарты HTML и CSS разрабатывает Консорциум Всемирной паутины — World Wide Web Consortium (W3C). Он же предоставляет и валидаторы
для проверки разметки страниц и написания таблиц стилей. Вот их адреса в сети:
– валидатор HTML5 — https://validator.w3.org/;
– валидатор CSS3 — http://jigsaw.w3.org/css-validator/.
Данные валидаторы очень удобны. Они позволяют проверять разметку и
таблицы стилей:
– страниц, уже загруженных в Сеть;
– файлов, загруженных в валидатор с вашего компьютера;
– в коде, скопированном из вашего файла и помещенном в специальное
текстовое поле.
Например, после обработки кода разметки все ошибки и предупреждения
с комментариями на английском языке появятся на странице HTML-валидатора
в ее нижней части. При этом ошибки будут сопровождаться надписью Error на
розовом фоне, а предупреждения — надписью Warning на желтом фоне.
Например, строка кода <script type="text/javascript"> получит предупреждение, так как по современным стандартам указывать тип скрипта не надо, но в то
же время данная ошибка не критична, так как не мешает нормальному отображению страницы. Зато следующая строка <img src="img/im1.jpg"> будет отмечена надписью Error, так как у рисунка пропущен обязательный согласно
стандартам HTML5 атрибут alt.
15

16
Рис. 1.7.1
Проверка кода одного из файлов в валидаторе HTML.
Как видите, ошибок нет

17
Рис. 1.7.2
Проверка таблицы стилей одного из файлов в валидаторе CSS.
Как видите, и здесь ошибок нет

Если ошибок нет, валидаторы сообщат вам об этом. Любопытно заметить,
что о безупречности HTML-кода вы получите простое текстовое подтверждение. А вот качественную таблицу стилей Консорциум Всемирной паутины
предлагает отметить специальным знаком — что-то вроде знака качества, который вам будет предложено разместить на странице сайта (по крайней мере, так
было на момент написания книги).
Естественно, что разметка и таблицы стилей наших файлов в обязательном порядке проверялись в этих валидаторах. Результаты такой проверки вы
можете видеть на рисунках 1.7.1 и 1.7.2.
Что касается валидатора JavaScript, то здесь ситуация несколько иная. Таких валидаторов много. Автор опробовал несколько и выбрал из них вариант, в
котором реализован самый строгий подход к оценке кода. Вот его адрес: валидатор JavaScript — https://beautifytools.com/javascript-validator.php.

Рис. 1.7.3
Проверка одного из сценариев. И опять ни одной ошибки

Он позволяет вставить в специальное текстовое поле ваш код, после чего
сразу, без нажатия каких-либо кнопок, начинается проверка скрипта. Единственное неудобство этого валидатора, обнаруженное автором на момент написания книги, — сообщения об ошибках, предупреждения и рекомендации он
выдает в общем списке, не выделяя пункты этого списка по степени важности.
Возможно, читатели уже догадываются, что все сценарии проекта, написанные на JavaScript, были проверены в данном валидаторе. На момент написания книги отклонений от стандартов языка и нарушений синтаксиса в сценариях не было (рис. 1.7.3).
18

Особенность всех упомянутых валидаторов в том, что они находят все
ошибки в разметке, в таблицах стилей, в коде программ, в том числе пропущенные символы, опечатки (но не в обычном тексте), необъявленные переменные и т. д. Понятно, что задача хорошего программиста — исправить эти
ошибки и получить идеально чистый и правильный код. Что и было сделано автором.

19

2. СОЗДАНИЕ РАЗМЕТКИ СТРАНИЦЫ
Погружение в мир веб-программирования мы начнем с изучения HTML.
Это аббревиатура от полного названия на английском: HyperText Markup
Language. Что переводится как язык гипертекстовой разметки. Любая наша страница будет состоять из набора элементов HTML. Они создают в документе абзацы, списки, изображения, контейнеры, формы, ссылки, фреймы и многое другое.
Элементами языка разметки являются теги или дескрипторы (последнее
определение используется реже, чем первое). Теги бывают двух видов — одиночные и парные. Например, горизонтальная линия задается одиночным тегом
<hr>

а ссылка — открывающим и закрывающим тегами:
<a ...>ТЕКСТ</a>

Открывающий и закрывающий теги нужны, чтобы ограничить в документе область, которая оформляется по правилам данного тега.
Браузер, получив с внешнего сервера программу, содержащую разметку
на HTML, интерпретирует код в визуальное представление страницы на экране
монитора.
Все документы, созданные на основе этого языка, имеют расширение
html (чаще всего) или htm (гораздо реже).

2.1. Простейшая страница
Обычно изучение языка разметки начинают с банального примера: вывода
на экран сообщения “Hello world” или «Привет мир!». При этом уже на первом
шаге читателя сразу знакомят с объявлением типа документа и первыми тегами.
Мы пойдем другим путем. В основе данной книги лежит следующий подход: мы создадим страницу, которая рассказывает о трех городах России —
Москве, Санкт-Петербурге и Казани. Начнем с самого простого варианта и будем
постепенно усложнять наш документ, добавляя новые теги и новую информацию.
В данный момент наша задача — создать первый вариант текста и показать, что для вывода его на экран компьютера достаточно HTML-страницы, в
которой вообще отсутствуют какие-либо теги.
Откройте в вашем текстовом редакторе файл 2/2.1.1.html. Вы увидите,
что эта страница содержит только короткую информацию о столице России:
Файл 2/2.1.1.html
Москва - столица России, город федерального значения. Административный центр ..................................... российских коммерческих организаций и общественных объединений.

Запустите файл в браузере. Вы увидите, что данный текст успешно отобразится на экране монитора (рис. 2.1.1).
20

21
Рис. 2.1.1
Наша первая страница в окне браузера

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

2.2. Тип документа
Как мы уже выяснили, в HTML существуют определенные стандарты.
Их разрабатывает Консорциум Всемирной паутины — World Wide Web
Consortium (W3C). Согласно этим стандартам документ, который получает
браузер, должен иметь указание типа.
Для изучаемой нами пятой версии HTML существует правило: первой в
коде страницы должна быть строка с таким указанием типа. Вот она:
<!DOCTYPE html>

Но этого мало. Границы документа тоже должны быть обозначены. Для
этого используют такой парный тег:
<html lang="ru">
...
</html>

Запись lang="ru" указывает, что язык страницы — русский.
Добавим упомянутые теги в наш исходный документ. Назовем новый файл
2/2.2.1.html. Запустив его в браузере, вы обнаружите, что визуально на странице
ничего не изменилось. И это естественно — ведь мы добавили странице только
условные рамки, а это лишь малая часть того, что нам предстоит сделать.

2.3. Головная часть и тело документа
В любом нормальном HTML-документе существует головная (или заголовочная) часть и собственно тело документа, которое и содержит контент
страницы.
Заголовочную часть ограничивают тегами:
<head>
...
</head>

Она предназначена для размещения:
– названия страницы;
– тегов, описывающих параметры документа (их еще называют метатегами);
– таблиц стилей;
– сценариев;
– ссылок на внешние таблицы стилей и сценарии;
– и еще для некоторых иных данных.
Из всего набора тегов, которые могут быть размещены в заголовочной
части, пользователь видит только название страницы. Остальные данные являются скрытыми указаниями браузеру, как отображать документ.
22

Название страницы ограничивается тегами
<title> </title>

и выводится на вкладке окна браузера.
К скрытым данным можно отнести, например, метатег, описывающий кодировку документа:
<meta charset="utf-8">

С внутренними и внешними таблицами стилей и сценариями, а также
способами их добавления в документ мы познакомимся в последующих главах.
Для нашей страницы сейчас вполне достаточно вот такой головной части:
Файл 2/2.3.1.html
<head>
<meta charset="utf-8">
<title>Города России</title>
</head>

Тело документа ограничивают парным тегом
<body> </body>

На данном этапе тело нашего документа выглядит так:
<body>
Москва - столица России, город федерального значения. Административный центр ..................................... российских коммерческих организаций и общественных объединений.
</body>

Рис. 2.3.1
У страницы появилось название

Теперь можно собрать отдельные части в единое целое:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Города России</title>
</head>
<body>

23

Москва - столица России, город федерального значения. Административный центр ..................................... российских коммерческих организаций и общественных объединений.
</body>
</html>

Такова сейчас разметка нашей страницы. Но внешне произошло только одно изменение — название страницы появилось на вкладке браузера (рис. 2.3.1).

2.4. Абзацы
Первый недостаток нашей страницы, который сразу бросается в глаза, —
отсутствие абзацев, из-за чего текст идет непрерывным потоком, хотя у него
есть смысловые разделения по темам сообщаемой информации.
Для разделения текста в языке HTML существует специальный парный тег
<p> </p>

В нашем рассказе о Москве изначально два абзаца. Обозначим их соответствующими тегами:
Файл 2/2.4.1.html
<p>Москва - столица России, город федерального значения. Административный центр ...............................................
Самый крупный город Европы по площади.</p>
<p>Первое письменное упоминание о Москве относится к 1147 году.
Москва ............................................... коммерческих организаций и общественных объединений.</p>

Чтобы посмотреть конечный результат, запустите в браузере файл
2/2.4.1.html. Как видно из рисунка 2.4.1, мы добились желаемого эффекта.
Обратите внимание: тег <p> </p> не только разделяет текст на абзацы, но
и создает между ними вертикальный зазор величиной в одну строку.

2.5. Заголовки
Настала пора внести очередные улучшения в наш документ. Для этого мы
добавим в него заголовки разделов.
В HTML существуют шесть уровней заголовков для различных блоков
текста. Их обозначают тегами:
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

24

25
Рис. 2.4.1
Текст разбит на абзацы

Парный тег <h1> </h1> отображается на странице как самый крупный заголовок, <h6> </h6> — как самый мелкий. Любой браузер отводит под заголовок отдельную строку и создает между предыдущим и следующим элементами
вертикальный зазор.
Как выглядят заголовки в реальности, видно на рисунке 2.5.1.
Кстати, заголовки не только помогают разделять текст по уровню значимости, но и важны для поисковых систем — чтобы они могли считывать заголовки отдельно от основного текста.
Поскольку у нас страница о городах России, то первым заголовком в новой версии документа будет такой:

Рис. 2.5.1
Заголовки разных уровней

Файл 2/2.5.1.html
<h1>Города России</h1>

Пока на странице только один рассказ — о Москве. Поэтому добавим вот
такой заголовок второго уровня:
<h2>Москва</h2>

Тело документа теперь выглядит следующим образом:
<h1>Города России</h1>
<h2>Москва</h2>
<p>Москва - столица России, город федерального значения. Административный центр ...............................................
Самый крупный город Европы по площади.</p>
<p>Первое письменное упоминание о Москве относится к 1147 году.
Москва ............................................... коммерческих организаций и общественных объединений.</p>

Что у нас получилось, видно на рисунке 2.5.2.
26

27
Рис. 2.5.2
На странице появились заголовки разного уровня

2.6. Блоки текста
В этом разделе мы не станем изучать новые теги, а просто наполним
нашу страницу информацией. Для этого добавим тексты про Санкт-Петербург и
Казань (которую еще называют третьей столицей России).
Во-первых, страница пополнится двумя новыми заголовками второго
уровня:
Файл 2/2.6.1.html
<h2>Санкт-Петербург</h2>
...
<h2>Казань</h2>

Кроме того, мы добавим четыре абзаца. Два из них посвящены Северной
столице
<p>Санкт-Петербург (в 1914-1924 годах - Петрогра́
д, в 1924-1991 годах - Ленингра́
д) ................................... историю в роли европейской великой державы.</p>
<p>Расположен на северо-западе страны на побережье Финского залива
и в устье реки Невы. ................................... органы
власти Ленинградской области, Межпарламентская ассамблея СНГ.</p>

а два других — столице Татарстана:
<p>Казань - город в России, столица Республики Татарстан, порт на
левом берегу реки Волги ................................... Казанский кремль входит в число объектов Всемирного наследия ЮНЕСКО.</p>
<p>Исторический центр Казанского ханства, Казанского уезда, Казанской губернии ................................... Казань является
одним из самых популярных у туристов городов России.</p>

Документ примет следующий вид:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Города России</title>
</head>
<body>
<h1>Города России</h1>
<h2>Москва</h2>
<p>Москва - столица России, город федерального значения. Административный центр ...............................................
Самый крупный город Европы по площади.</p>
<p>Первое письменное упоминание о Москве относится к 1147 году.
Москва ............................................... коммерческих организаций и общественных объединений.</p>
<h2>Санкт-Петербург</h2>
<p>Санкт-Петербург (в 1914-1924 годах - Петрогра́
д, в 1924-1991 годах - Ленингра́
д) ................................... историю в роли европейской великой державы.</p>

28

<p>Расположен на северо-западе страны на побережье Финского залива
и в устье реки Невы. ................................... органы
власти Ленинградской области, Межпарламентская ассамблея СНГ.</p>
<h2>Казань</h2>
<p>Казань - город в России, столица Республики Татарстан, порт на
левом берегу реки Волги ................................... Казанский кремль входит в число объектов Всемирного наследия ЮНЕСКО.</p>
<p>Исторический центр Казанского ханства, Казанского уезда, Казанской губернии ................................... Казань является
одним из самых популярных у туристов городов России.</p>
</body>
</html>

Что у нас получилось, видно на рисунке 2.6.1.

2.7. Горизонтальные линии
Следующий недостаток нашей страницы — не совсем четкое разделение
текста на соответствующие блоки. Хотя название городов выделены тегами заголовков второго уровня, не помешает добавить еще горизонтальные разделительные линии. В HTML для этого существует специальный тег
<hr>

Добавим в разметку страницы три такие линии следующим образом:
Файл 2/2.7.1.html
<h1>Города России</h1>
<hr>
<h2>Москва</h2>
<p>Москва - столица России, город федерального значения ... </p>
<p>Первое письменное упоминание о Москве относится к 1147 году ...
</p>
<hr>
<h2>Санкт-Петербург</h2>
<p>Санкт-Петербург (в 1914-1924 годах - Петрогра́
д, в 1924-1991 ...
</p>
<p>Расположен на северо-западе страны на побережье Финского ...
</p>
<hr>
<h2>Казань</h2>
<p>Казань - город в России, столица Республики Татарстан, порт ...
</p>
<p>Исторический центр Казанского ханства, Казанского уезда ...
</p>

29

30

Рис. 2.6.1
Теперь у нас на странице рассказ про три важнейших города России

31
Рис. 2.7.1
Мы добавили разделительные линии

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

2.8. Таблицы
Что такое таблицы, скорее всего, объяснять не надо. В HTML таблицы
служат для структурированного размещения информации.
Для создания таблицы в разметке существует тег
<table> </table>

Строки в таблицах обозначают тегом
<tr> </tr>

а ячейки — тегом
<td> </td>

Так, например, записывается код таблицы, состоящей из двух строк и
двух колонок (в общей сложности получается 4 ячейки):
<table>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
</table>

А вот как будет выглядеть эта таблица, если задать ей рамки:

Мы используем таблицу для размещения в документе данных о населении трех городов.
Но для начала создадим заголовок третьего уровня, поясняющий, что видит посетитель:
Файл 2/2.8.1.html
<h3>Население городов России</h3>

Отделим данный заголовок от предыдущего текста горизонтальной линией:
<hr>
<h3>Население городов России</h3>

Теперь создадим таблицу и запишем в нее необходимые данные:
<table>
<tr>
<td>Москва</td><td>Больше 13 000 000</td>

32

</tr>
<tr>
<td>Санкт-Петербург</td><td>Больше 5 000 000</td>
</tr>
<tr>
<td>Казань</td><td>Больше 1 000 000</td>
</tr>
</table>

Что у нас получилось, показано на рисунке 2.8.1. Обратите внимание —
рамок у ячеек таблицы нет.

Рис. 2.8.1
Добавляем в конец документа таблицу с данными о населении основных городов России

2.9. Надстрочный и подстрочный текст
Если вы внимательно наблюдаете за оформлением страниц в Интернете,
то могли бы обратить внимание, что одну и ту же информацию в разных источниках представляют по-разному.
Например, мы в таблице указали, что в Москве проживает более 13 млн
человек. Добавим, что это данные на 2023 г. Подобную информацию не всегда,
но часто записывают следующим образом:
Москва

Больше 1,3 х 107

[2023 г.]

1,3  107 — это сокращенная запись цифры 13 000 000. А запись 1,3 
 10 [2023 г.] обозначает, что данная информация приведена на 2023 г. Подобную
запись можно оформить таким образом не только в тексте нашей книги, но и в
тексте нашей страницы.
В записи
7

Москва

Больше 1,3 х 107

[2023 г.]

появятся два новых тега. Один указывает на надстрочный характер шрифта (7),
а другой — на подстрочный ([2023 г.]).
33

Надстрочный шрифт обозначают тегом
<sup> </sup>

Подстрочный — тегом
<sub> </sub>

Если использовать данные теги в разметке нашей страницы, касающейся
населения городов России, то мы получим следующий код:
Файл 2/2.9.1.html
<table>
<tr>
<td>Москва</td><td>Больше 1,3 х 10<sup>7</sup>
<sub>[2023 г.]</sub></td>
</tr>
<tr>
<td>Санкт-Петербург</td><td>Больше 5 х 10<sup>6</sup>
<sub>[2023 г.]</sub></td>
</tr>
<tr>
<td>Казань</td><td>Больше 1 х 10<sup>6</sup>
<sub>[2023 г.]</sub></td>
</tr>
</table>

Как это выглядит на нашей видоизмененной странице, можно видеть на
рисунке 2.9.1.

Рис. 2.9.1
Видоизмененные данные о населении городов

2.10. Перевод строки
Следующий тег, с который мы познакомимся, появится в нашей разметке
ненадолго, а затем мы откажемся от него и вернем документ к прежнему виду.
Казалось бы, зачем его тогда изучать? Дело в том, что данный тег часто используют в текстах и в вашей дальнейшей практике он понадобится еще не раз.
34

35
Рис. 2.10.1
Вид страницы, где в блоках текста использован тег <br>

Записывается данный дескриптор так:
<br>

Как видите, это одиночный тег. Он служит для перевода строки. Но, в отличие от парного дескриптора <p>, не создает пустой строки после себя. Действие тега напоминает нажатие клавиши Enter в Word.
Давайте рассмотрим пример. Пусть у нас в неком документе есть текст
создаем перевод строки

Добавим в него тег <br>:
создаем <br> перевод строки

В окне браузера результат добавления тега будет выглядеть так:
создаем
перевод строки

А теперь используем данный тег в разметке нашей страницы. Добавим
его следующим образом:
Файл 2/2.10.1.html
<p>Москва .... по площади. <br>
Первое письменное ... объединений.</p>
...
<p>Санкт-Петербург ... великой державы. <br>
Расположен на ... ассамблея СНГ.</p>
...
<p>Казань ... наследия ЮНЕСКО. <br>
Исторический центр ... городов России.</p>

Что у нас получилось, видно на рисунке 2.10.1.

2.11. Жирный, подчеркнутый, курсив
Еще одно слабое место нашего документа — в тексте отсутствует выделение фрагментов, на которых мы бы хотели акцентировать внимание читателя.
В уже упомянутом Word для этой цели есть специальные функции: текст можно сделать жирным, подчеркнуть его или набрать курсивом (можно даже использовать в одном фрагменте сразу два или все три выделения).
HTML тоже предоставляет нам такие возможности. Для этого существуют следующие парные теги:
– для выделения жирным — <b> </b>;
– для подчеркивания — <u> </u>;
– для написания курсивом — <i> </i>.
Чтобы получить требуемое выделение, необходимо расположить открывающий и закрывающий теги по краям нужного фрагмента текста.
Теперь исправим упомянутые выше слабые места. А для этого поступим
следующим образом. Названия городов выделим жирным шрифтом и подчеркнем их. Описание значения каждого города сделаем курсивом.
Файл 2/2.11.1.html
<p><b><u>Москва</u></b> - <i>столица России</i>, город федерального значения ...</p>

36

...
<p><b><u>Санкт-Петербург</u></b> (в 1914-1924 годах - Петрогра́
д, в
1924-1991 годах - Ленингра́
д) - <i>второй по численности населения
город России</i>. Основан ...</p>
...
<p><b><u>Казань</u></b> - город в России, <i>столица Республики
Татарстан</i>, порт ...</p>

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

Рис. 2.11.1
Различные способы выделения фрагментов текста

2.12. Изображения на странице
До сих пор у нас на странице был только текст. Пора сделать документ
интереснее и добавить в него изображения городов, о которых ведется рассказ.
Для включения в документ фотографий или рисунков существует одинарный тег <img>. Согласно спецификации HTML данный тег должен иметь
два обязательных атрибута (об атрибутах мы поговорим в последнем параграфе
этой главы):
– src;
– alt.
Атрибут src указывает адрес картинки, которая должна быть загружена в
документ. Обратите внимание: это может быть адрес снимка, расположенного в
корневой папке данной страницы или находящегося на другом сервере и принадлежащего другому ресурсу.
Атрибут alt содержит альтернативный текст. Он поясняет содержание рисунка, если его демонстрация отключена или невозможна по каким-то причинам.
Во-первых, все современные браузеры позволяют пользователям отключить показ изображений на загружаемых страницах. Во-вторых, загрузка кар37

тинок может оказаться невозможной по причинам различных сбоев или повреждений файлов. В обоих случаях веб-обозреватели вместо отсутствующих
снимков выводят небольшие пиктограммы и вспомогательный текст. И то и
другое поясняет, какой контент должен был появиться в этом месте страницы.
Здесь автор хотел бы сделать небольшую ремарку.
Как и у многих программистов старшего поколения, еще помнится то
время, когда в Интернет выходили через модемы, подключенные к телефонным
сетям. Скорость взаимодействия с серверами была такая низкая, что загрузки
некоторых документов приходилось ждать по несколько минут. В то время основная информация содержалась в текстах. Поэтому браузеры, чтобы ускорить
получение данных клиентом, имели функцию, позволяющую отключать загрузку изображений — самых «тяжелых» элементов веб-страниц.
На смену телефонным сетям пришли специальные компьютерные сети,
которые отличались более высокими скоростями передачи информации. Однако в первые годы с ними тоже были определенные сложности — например,
ограниченный трафик или его высокая стоимость (в 2005 г. за 1 Гб трафика с
довольно посредственной скоростью автор платил своему провайдеру столько
же, сколько сегодня платит за безлимитный высокоскоростной Интернет).
И вновь сэкономить можно было, отключая в браузерах загрузку рисунков.
Предположим, что именно по этим причинам много лет назад в стандарте
языка разметки HTML появилось правило, согласно которому все теги img
должны иметь обязательный атрибут alt с альтернативным текстом. Он поясняет содержание рисунка, если его демонстрация отключена.
На взгляд автора, отключение изображений в браузерах на сегодняшний
день больше похоже на анахронизм. Времена кардинально изменились. В современном потоке информации картинки и фотографии являются едва ли не
важнейшими элементами. Теперь невозможно представить какой-либо сайт без
серьезного иллюстративного материала. В социальных сетях — «ВКонтакте»,
«Одноклассники» — почти любое сообщение сопровождается фотографиями.
Причем чаще всего сообщения короткие, а вот фотографий к ним прикрепляют
от одной штуки до нескольких десятков.
Впрочем, от лирики к делу. У нас есть изображения, которые мы можем
прикрепить к описанию каждого из городов. Вот так:
Файл 2/2.12.1.html
<p><b><u>Москва</u></b> - <i>столица России</i>, город ... общественных объединений.</p>
<img src="img/mos.jpg" alt="Москва">
...
<p><b><u>Санкт-Петербург</u></b> (в 1914-1924 годах - ... Межпарламентская ассамблея СНГ.</p>
<img src="img/spb.jpg" alt="Санкт-Петербург">
...
<p><b><u>Казань</u></b> - город в России, <i>столица Республики
Татарстан</i> ... городов России.</p>
<img src="img/kzn.jpg" alt="Казань">

38

39
Рис. 2.12.1
Изображение столицы в нашем документе

На рисунке 2.12.1 видно, как теперь выглядит страница с фотографией
Москвы. Запустив файл в браузере, вы увидите, что описание двух других городов также сопровождается снимками.

2.13. Списки и ссылки
Все бы хорошо, но есть ощущение, что нашей странице чего-то не хватает. Ответ прост. Мы рассказали об основных городах России, но не дали ссылок
на их официальные сайты. Восполним этот пробел.
Чтобы добавить ссылку на страницу текущего или стороннего ресурса,
необходимо выбрать фрагмент текста и «обернуть» его (как говорят программисты) в парный тег <a> </a>.
Например, так:
<a href="https://www.mos.ru/">Москва</a>

У ссылки, как вы уже заметили, есть один обязательный атрибут href —
он содержит адрес в сети Интернет, на который состоится переход, если нажать
ссылку. В данном случае этот адрес
href="https://www.mos.ru/"

У всех трех городов есть официальные сайты. Вставим в наш документ
ссылки на данные ресурсы:
Файл 2/2.13.1.html
<a href="https://www.mos.ru/">Москва</a>
<a href="https://www.fontanka.ru/">Санкт-Петербург</a>
<a href="https://kzn.ru/">Казань</a>

А чтобы упорядочить ссылки и расположить их на отдельных строках,
добавим их в маркированный список.
Такой список создается парным тегом <ul> </ul>. А для выделения пунктов списка используют парные теги <li> </li>.
Теперь наша страница будет выглядеть следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
...
</head>
<body>
...
<ul>
<li><a href="https://www.mos.ru/">Москва</a></li>
<li><a href="https://www.fontanka.ru/">Санкт-Петербург</a></li>
<li><a href="https://kzn.ru/">Казань</a></li>
</ul>
</body>
</html>

40

Добавим блок ссылок в конец нашего документа. Что получилось, видно
на рисунке 2.13.1.

Рис. 2.13.1
Список ссылок на сайты городов

2.14. Атрибуты тегов
Атрибут тега — это основная или дополнительная информация, которая
помогает браузеру правильно отображать содержимое данного тега.
Мы уже познакомились с двумя атрибутами двух тегов.
При размещении на странице изображения тег img должен иметь обязательный атрибут alt — альтернативный текст на случай, если в браузере пользователя отключен режим демонстрации изображений.
Внедрение в текст ссылки обязательно сопровождается добавлением к тегу <a> обязательного атрибута href, содержащего адрес страницы, на которую
ведет ссылка.
Еще два примера.
Тот же тег img может иметь атрибут title, содержащий текст, который будет появляться, если на рисунок навести указатель мыши (рис. 2.14.1). Вот как
можно внести необходимые дополнения:
Файл 2/2.14.1.html
<img src="img/mos.jpg" alt="Москва"
title="Столица России – город
Москва">
...
<img src="img/spb.jpg" alt="Санкт-Петербург"
title="Северная столица России - город СанктПетербург">
...
<img src="img/kzn.jpg" alt="Казань"
title="Третья столица России - город Казань">

41

Рис. 2.14.1
При наведении на фото указателя мыши мы видим поясняющий текст

Тег a может иметь дополнительный атрибут target (с ним мы познакомимся позже), который указывает, что на текущей или на новой вкладке браузера должна быть открыта искомая страница.
Теги могут иметь как индивидуальные (обособленные) атрибуты, так и
глобальные — то есть характерные для любых элементов. Глобальных атрибутов существует много. Расскажем для примера о некоторых из них.
– class — определяет, к какому классу или классам таблицы стилей относится элемент;
– contenteditable — указывает, возможно ли редактирование элемента
(подробнее об этом вы можете прочитать в книге «JavaScript. Визуальные редакторы», вышедшей в издательстве «Лань»);
– draggable — показывает, можно ли перетаскивать объект по технологии Drag and Drop;
– id — идентификатор для обращения к элементу из сценария или описания его свойств в таблице стилей;
– title — содержит текст пояснений к элементу.
Для нас впоследствии самыми важными глобальными атрибутами будут
class и id.
Кроме того, с некоторыми атрибутами мы познакомимся позже, когда перейдем к изучению форм.

42

3. ОФОРМЛЕНИЕ ЭЛЕМЕНТОВ СТРАНИЦЫ
Наша страница имеет ряд серьезных недостатков.
1. Контент равномерно распределен по всей ширине страницы. Если у вас
большой монитор, водить взглядом по строкам от одного края до другого будет
неудобно.
2. Мы не имели возможность выбрать шрифт и его размер. В результате
текст набран тем шрифтом, который настроен в данном браузере по умолчанию.
3. Фотографии получились слишком большими, так как они загружаются
на страницу в натуральную величину.
4. Справа от снимков остается много свободного места, которое можно
было бы использовать более рационально.
Есть и другие мелкие недостатки, которые легко может заметить внимательный читатель.
Привести страницу к гармоничному виду нам помогут каскадные таблицы стилей CSS.
Что такое CSS? Это язык описания внешнего вида документа и его отдельных элементов. Используя его, мы сделаем:
– страницу более узкой и соответственно более читабельной;
– настроим шрифты для разных фрагментов текста;
– уменьшим размер фотографий;
– рационально используем свободное место, задав для изображений обтекание текстом;
– еще ряд полезных настроек внешнего вида страницы.
А в конце главы посмотрим, как горизонтальное расположение блоков
текста можно заменить на вертикальное.

3.1. Контейнер
В этом разделе мы еще не доберемся до таблиц стилей. Но познакомимся
с новым элементом HTML5 — блоком или контейнером div.
Зачем он нужен? Дело в том, что все элементы нашей страницы можно
поместить в контейнер и задать ему определенные размеры и расположение на
странице. Так мы и поступим в дальнейшем. А пока добавим элемент div в разметку страницы:
Файл 3/3.1.1.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Города России</title>
</head>

43

<body>
<div>
<h1>Города России</h1>
<hr>
<h2>Москва</h2>
...
<ul>
<li><a href="https://www.mos.ru/">Москва</a></li>
<li><a href="https://www.fontanka.ru/">Санкт-Петербург</a></li>
<li><a href="https://kzn.ru/">Казань</a></li>
</ul>
</div>
</body>
</html>

Если теперь запустить файл 3/3.1.1.html в браузере, вы обнаружите, что
пока никаких внешних перемен с нашей страницей не случилось. Но они произойдут уже в следующей версии документа, которую мы разберем в параграфе 3.2.

3.2. Размеры области контента
Итак, мы добавили в тело документа необходимое содержимое. Настало
время оформить внешний вид элементов и придать им необходимые размеры.
Для начала мы научимся размещать стили на странице. Для этого внутри
блока head надо вставить открывающий и закрывающий теги style:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Города России</title>
<style>
...
</style>
</head>

И уже в блоке <style> </style> записывать все необходимые настройки.
Каким образом — мы увидим дальше.
Помните, в начале этой главы, разбирая недостатки получившейся страницы, мы первым упомянули такой: контент равномерно распределен по всей
ширине страницы. Если у вас большой монитор, водить взглядом по строкам от
одного края до другого будет неудобно. Исправим ситуацию, уменьшив размер
контейнера div, что автоматически приведет к уменьшению рабочей области
страницы.
44

45
Рис. 3.2.1
Уменьшаем область контента

Какое существует правило добавления свойств для стилевого оформления
того или иного элемента? Сначала указывается селектор, затем ставятся фигурные скобки, а в них через точку с запятой записывают свойства и их значения.
Последние пишутся так:
свойство: значение;

Что такое селектор? Это выражение, которое указывает браузеру, к какому элементу разметки необходимо применить свойства CSS, перечисленные в
фигурных скобках. В общем случае это правило иллюстрирует такой пример:
селектор {
свойство 1: значение;
свойство 2: значение;
...
свойство n: значение;
}

Сразу напомню, что мы договорились в дальнейшем подобные записи
оформлять короче. Вот так:
селектор {свойство 1: значение; свойство 2: значение; ...
свойство n: значение;}

Итак, мы собирались уменьшить область контента, ограниченную блоком
div. Сделаем это.
Файл 3/3.2.1.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Города России</title>
<style>
div {width: 1000px;}
</style>
</head>
<body>
<div>
...
</div>
</body>
</html>

Теперь у нас фиксированная ширина страницы, которая равна 1000 пикселей. Если запустить файл в браузере, вы увидите картину, показанную на рисунке 3.2.1.

46

3.3. Позиционирование контейнера
Сейчас у нас контент выровнен по левому краю окна браузера. А как вообще можно позиционировать контейнер в документе? Существуют три простейших варианта (и множество более сложных):
– по левому краю;
– по правому краю;
– по центру.
Чтобы разместить контент слева, ничего делать не надо — браузеры по
умолчанию так позиционируют блоки, если иное не указано в настройках.
Чтобы разместить контейнер справа, используем свойство float. Оно как
раз и определяет, куда будет смещен элемент. Итак, для смещения контейнера
вправо надо в блок <style> </style> добавить такую запись:
элемент {float: right;}

Для размещения блока по центру можно использовать свойство margin.
Оно указывает расстояние между текущим элементом и его окружением. Эти
параметры могут устанавливаться, например, в процентах или пикселях. Можно также использовать значение auto. Его-то как раз используют для центрирования элемента.
Автор считает, что наиболее симпатично будет смотреться документ, у
которого контент расположен по середине окна браузера. Так мы и поступим с
нашей страницей — отцентрируем ее. Для этого в настройки контейнера div
необходимо добавить следующий фрагмент кода:
Файл 3/3.3.1.html
<style>
div {margin: auto; width: 1000px;}
</style>

Запустим файл 3/3.3.1.html в браузере. Вы увидите, что теперь все содержимое нашего документа расположилось по центру окна браузера (рис. 3.3.1).

3.4. Выравнивание текста
Читатели, когда-либо пользовавшиеся программой Word, знают, что
набранный в этом редакторе текст можно выровнять по левому краю, правому
краю, по центру или равномерно распределить его по ширине страницы.
Подобные возможности заложены и в стандартах CSS. За это отвечает
свойство text-align. Оно может иметь следующие значения (перечислены только наиболее важные для нас):
– left — содержимое выравнивается по левому краю;
– right — содержимое выравнивается по правому краю;
– center — содержимое выравнивается по середине;
– justify — содержимое выравнивается по ширине вмещающего контейнера.

47

48
Рис. 3.3.1
Центрирование контента

49
Рис. 3.4.1
Текст выровняли по ширине контейнера

Если свойство text-align не указано вообще, то по умолчанию браузеры
выровняют текст по левому краю, что мы и наблюдали ранее.
Лучше всего наша страница будет смотреться, если выровнять текст по
ширине контейнера. Тогда абзацы текста будут обозначены более четко.
Для достижения этой цели добавим тегу p свойство text-align со значением justify:
Файл 3/3.4.1.html
<style>
div {margin: auto; width: 1000px;}
p {text-align: justify;}
</style>

Как теперь будет выглядеть текст, видно на рисунке 3.4.1.

3.5. Отступы в абзацах
В книгах и документах абзацы обычно выделяются тем, что текст идет не
с самого левого края, а с некоторым отступом от него. Так удобнее читать и
структурировать написанное.
У нас пока отступов в абзацах нет. Исправим этот недостаток.
За отступы в начале абзацев отвечает свойство text-indent. Его значения
могут быть разными, но наиболее актуальные из них — определение отступа в
процентах или в пикселях.
Мы укажем параметры отступов в 50 пикселей. Добавим свойство и значение в таблицу стилей. Вот что у нас получится:
Файл 3/3.5.1.html
<style>
...
p {text-align: justify; text-indent: 50px;}
</style>

В самих текстах перевод строки <br> вновь заменим на теги абзацев:
<p><b><u>Москва</u></b> - <i>столица России</i>, город федерального значения. Административный центр ... Европы по площади.</p>
<p>Первое письменное упоминание о ... организаций и общественных
объединений.</p>
...
<p><b><u>Санкт-Петербург</u></b> (в 1914-1924 годах - Петрогра́
д, в
1924-1991 годах - Ленингра́
д) - <i>второй по численности населения
город России</i>. Основан ... в роли европейской великой державы.</p>
<p>Расположен на северо-западе страны ... Межпарламентская ассамблея СНГ.</p>
...
<p><b><u>Казань</u></b> - город в России, <i>столица Республики
Татарстан</i>, порт ... объектов Всемирного наследия ЮНЕСКО.</p>
<p>Исторический центр Казанского ханства, Казанского уезда ... популярных у туристов городов России.</p>

Как теперь выглядят абзацы, можно увидеть на рисунке 3.5.1.
50

51
Рис. 3.5.1
Отступы в абзацах

3.6. Оформление изображений
Еще один недостаток, который мы отмечали в самом начале главы: фотографии получились слишком большими, так как они загружаются на страницу в
натуральную величину. Кроме того, есть еще один недостаток, который в
нашем случае не бросается в глаза. Это наличие ограничительных рамок. Если
у снимка или рисунка белый фон, сложно определить, где кончается изображение, а где начинается фон страницы.
Поэтому наш следующий шаг — ликвидировать эти недостатки. Для этого нам понадобится:
– уменьшить размер фото;
– добавить рамки снимкам.
Изображение в документе может иметь как фиксированные ширину и высоту, так и меняющиеся в зависимости от размеров окна браузера. Например,
если программист верстает «резиновый» макет сайта, то ему необходимо
предусмотреть возможность увеличения или уменьшения рисунков. Кроме того, во многих ситуациях требуется установить ограничения на растяжение и
сжатие картинок.
Для установки размеров изображений используются следующие свойства:
– width — задает ширину изображения. Если значение указано в пикселях,
то ширина будет фиксированной. Если значение указано в процентах, то ширина
будет меняться в зависимости от ширины блока, содержащего изображение;
– height — задает высоту изображения. Если значение указано в пикселях,
то высота будет фиксированной. Если значение указано в процентах, то высота
будет меняться в зависимости от высоты блока, содержащего изображение;
– max-width — определяет максимально возможную ширину изображения;
– max-height — определяет максимально возможную высоту изображения;
– min-width — определяет минимально возможную ширину изображения;
– min-height — определяет минимально возможную высоту изображения.
Необходимо отметить, что разработчику не обязательно указывать в таблице стилей одновременно ширину и высоту картинки. Достаточно задать
только одно свойство, и браузер самостоятельно пропорционально уменьшит
или увеличит рисунок.
Применительно к изображениям, нас заинтересуют три параметра рамок:
толщина, цвет и тип линии.
Эти три параметра можно задать, используя сокращенную запись свойств
рамок — border. Например:
img {border: 1px solid #000000;}

или
img {border: 2px dashed #0000CC;}

52

53
Рис. 3.6.1
Уменьшаем размеры изображений и добавляем им рамки

В нашем случае установим размер для всех изображений 300 пикселей в
ширину и рамки толщиной 2 пикселя в виде сплошных линий синего цвета:
Файл 3/3.6.1.html
<style>
...
img {width: 300px; border: 2px solid #0000CC;}
</style>

Что мы получим в результате этих изменений, видно на рисунке 3.6.1.

3.7. Позиционирование рисунков
Очередной недостаток, о котором нам предстоит вспомнить, — нерациональное использование пространства страницы. Как видно из предыдущих вариантов документа, справа от фотографий большое количество свободного места. Поэтому давайте поступим так: зададим фотографиям обтекание текстом.
В этом нам поможет уже знакомое свойство float.
Добавим к сказанному в параграфе 3.3. Свойство float указывает, что
элемент должен быть помещён вдоль левой или правой стороны вмещающего
его контейнера, а текст должен обтекать его с противоположной стороны.
Чтобы расположить картинки слева и задать обтекание текстом справа,
добавим в таблицу стилей следующие настройки:
Файл 3/3.7.1.html
<style>
...
img {width: 300px; border: 2px solid #0000CC; float: left;}
</style>

На рисунке 3.7.1 показано, как изменилась наша страница.

3.8. Параметры обтекания текстом
К недостаткам документа из раздела 3.7 можно отнести эффект «прилипания» букв к границам изображений. Чтобы избежать этого, установим картинкам уже знакомое нам свойство margin. Рисунки, расположенные слева,
текст обтекает справа и внизу. Значит, умеет смысл задать свойства marginright и margin-bottom:
Файл 3/3.8.1.html
<style>
...
img {width: 300px; border: 2px solid #0000CC; float: left;
margin-right: 10px; margin-bottom:
10px;}
</style>

В результате страница примет более качественный вид (рис. 3.8.1).

54

55
Рис. 3.7.1
Задаем рисункам обтекание текстом

56
Рис. 3.8.1
Установили параметры обтекания текстом

3.9. Шрифт и его размер
Как уже ясно из названия раздела, теперь нам предстоит вместо шрифта,
которым браузер набирает текст по умолчанию, установить желаемую гарнитуру и ее размер. Для этого нам понадобится добавить тегам p два новых свойства.
За гарнитуру шрифта отвечает свойство font-family.
За размер шрифта отвечает свойство font-size.
Выберем гарнитуру Tahoma, а высоту шрифта — 18 пикселей:
Файл 3/3.9.1.html
<style>
...
p {text-align: justify; text-indent: 50px;
font-family: Tahoma; font-size:
18px;}
...
</style>

В результате страница примет вид, показанный на рисунке 3.9.1. Главное
изменение — шрифт стал крупнее, а текст читается легче.

3.10. Изменения в горизонтальных линиях
Браузеры по умолчанию создают горизонтальные линии серого цвета
толщиной в 1 пиксель. Внесем свои коррективы. Сделаем линии зелеными, а
толщину выберем 3 пикселя.
За толщину (высоту) элемента, как вы помните, отвечает свойство height.
А за фоновый цвет — свойство background. Оно имеет много разных дочерних
вариантов, но в данном случае они нам не интересны. Главное — в свойстве
background можно указать цветовой код фона элемента.
Добавим линиям необходимые свойства:
Файл 3/3.10.1.html
<style>
...
hr {height: 3px; background: #006600;}
</style>

Как теперь выглядят горизонтальные линии, показано на рисунке 3.10.1.

3.11. Стили вместо тегов
В этом параграфе мы познакомимся с таким атрибутом, как class, а также
с соответствующим ему селектором. class — это набор свойств, присущих одновременно сразу нескольким элементам. Если эти объекты имеют одинаковые
свойства, проще не записывать их для каждого элемента в отдельности, а объединить в группу, которая и называется классом.
57

58
Рис. 3.9.1
Поменяли шрифт

59
Рис. 3.10.1
Горизонтальные линии стали четче и заметнее

Каждая такая группа имеет определенное имя, а в таблице стилей селектором класса служит точка перед его названием. Обобщенная запись свойств
класса выглядит так:
<!DOCTYPE html>
<html lang="ru">
<head>
...
<style>
.имя {свойство 1: значение; свойство 2: значение; ...
свойство n: значение;}
</style>
</head>
<body>
<элемент 1 class="имя" >
<элемент 2 class="имя" >
...
<элемент n class="имя" >
</body>
</html>

В нашем документе мы создадим два класса элементов. Один из них заменит набор тегов <b><u> </u></b>, а другой — парный тег <i> </i>. Первую
пару тегов нам заменит элемент <span>, который служит для ограничения какого-либо фрагмента текста. В нашем случае это названия городов. Такой тег
будет иметь свойства, записанные в классе boldunder:
Файл 3/3.11.1.html
...
<span class="boldunder">Москва</span>
...
<span class="boldunder">Санкт-Петербург</span>
...
<span class="boldunder">Казань</span>
...
Свойства этого класса:
.boldunder {font-weight: bold; text-decoration: underline;}

Первое свойство font-weight определяет начертание букв шрифта
(в нашем случае полужирное), а второе — text-decoration — оформление текста с подчеркиванием или без (в нашем случае с подчеркиванием).
Парный тег <i> </i> мы тоже заменим парным тегом <span> </span>.
Класс его свойств назовем ital:
...
<span class="ital">столица России</span>
...
<span class="ital">второй по численности населения город России</span>

60

...
<span class="ital">столица Республики Татарстан</span>
...
Свойства данного класса:
.ital {font-style: italic;}

Свойство font-style определяет стиль начертания букв — в нашем случае
курсивом.
С учетом внесенных изменений код новой версии документа будет выглядеть так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Города России</title>
<style>
...
.boldunder {font-weight: bold; text-decoration: underline;}
.ital {font-style: italic;}
</style>
</head>
<body>
<div>
...
<p><img src="img/mos.jpg" alt="Москва">
<span class="boldunder">Москва</span> <span class="ital">столица России</span>,
город федерального значения. Административный центр ...</p>
...
<p><img src="img/spb.jpg" alt="Санкт-Петербург">
<span class="boldunder">Санкт-Петербург</span>
(в 1914-1924 годах - Петрогра́
д, в 1924-1991 годах - Ленингра́
д) –
<span class="ital">второй по численности населения
город России</span>. Основан ...</p>
...
<p><img src="img/kzn.jpg" alt="Казань">
<span class="boldunder">Казань</span> город в России,
<span class="ital">столица Республики Татарстан</span>,
порт на левом берегу ...</p>
...
</div>
</body>
</html>

В данном случае скриншот приводить не станем, так как внешний вид
страницы останется без изменений.
61

3.12. Корректировка таблицы
В этом параграфе мы будем корректировать недостатки таблицы с данными о населении трех городов. В чем эти недостатки? Во-первых, между
названием города Санкт-Петербург и численностью его населения практически
отсутствует зазор. Во-вторых, достаточный зазор отсутствует и между строками.
Исправить это нам поможет свойство padding, которое определяет внутренние отступы элементов от границ вмещающего элемента — в нашем случае
ячеек таблицы. Кроме того, не мешает установить гарнитуру и размер шрифта в
соответствии с остальным текстом.
Поэтому сначала с помощью свойства width зададим ширину таблицы
500 пикселей, потом пропишем гарнитуру Tahoma и размер шрифта 18 пикселей (как у остального текста на странице), а в следующую очередь зададим
внутренние отступы в размере 10 пикселей:
Файл 3/3.12.1.html
<style>
...
table {width: 500px; font-family: Tahoma; font-size: 18px;}
td {padding: 10px;}
</style>

В результате блок с описанием населения городов примет вид, показанный на рисунке 3.12.1.

Рис. 3.12.1
В таблице появились зазоры между строками
и значениями в одной строке

62

3.13. Настраиваем надстрочный и подстрочный тексты
Как вы помните, в таблице с описанием населения городов у нас есть теги, определяющие надстрочный и подстрочный тексты. Давайте заменим эти
теги на стилевые свойства (раз уж мы принялись оформлять документ с максимальным применением возможностей CSS).
Для этих целей мы используем два свойства:
– vertical-align;
– font-size.
Первое из них определяет вертикальное положение элемента относительно линии основной строки. Со вторым мы уже знакомы.
Свойство vertical-align может оперировать разными значениями, например пикселями. Но для нас важны два других:
– super — надстрочное начертание символов;
– sub — подстрочное начертание символов.
Чтобы реализовать выбранный алгоритм разметки, выделим с помощью
тега span ряд соответствующих фрагментов текста. Для надстрочного написания установим класс tsup. Для подстрочного — tsub:
Файл 3/3.13.1.html
<table>
<tr>
<td>Москва</td><td>Больше 1,3 х 10<span class="tsup">7</span>
<span class="tsub">[2023
г.]</span></td>
</tr>
<tr>
<td>Санкт-Петербург</td><td>Больше 5 х 10<span
class="tsup">6</span>
<span class="tsub">[2023
г.]</span></td>
</tr>
<tr>
<td>Казань</td><td>Больше 1 х 10<span class="tsup">6</span>
<span class="tsub">[2023
г.]</span></td>
</tr>
</table>

Запишем в таблице стилей свойства указанных классов:
<style>
...
.tsup {vertical-align: super; font-size: 12px;}
.tsub {vertical-align: sub; font-size: 12px;}
</style>

Если вы запустите в браузере файл 3/3.13.1.html, то увидите, что мы получили ровно такой же результат, какой был достигнут с помощью тегов <sup>
</sup> и <sub> </sub>.
63

3.14. Оформление ссылок
Пришло время изменить вид ссылок. Автор считает, что их текст необходимо сделать крупнее, убрать подчеркивание и оформить ссылки синим цветом.
Для последних двух настроек используем свойства:
– для удаления подчеркивания — text-decoration;
– для оформления цвета ссылки — color.

Рис. 3.14.1
Оформили ссылки

Файл 3/3.14.1.html
a {font-family: Tahoma; font-size: 22px;
text-decoration: none; color:
#0000CC;}

Еще один момент — можно сделать так, что при наведении указателя
мыши на ссылку она будет менять цвет:
a:hover {color: #CC0000;}

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

3.15. Контекстный селектор
Приближается время, когда в нашем документе появится еще одна таблица. Понятно, что у двух таблиц в документе могут быть разные настройки. Поэтому необходимо сейчас переписать стили для блока с данными о жителях городов.
Есть очень простой подход для решения этой задачи: дать уже существующей таблице идентификатор и по его имени устанавливать требуемые стилевые свойства. Имя идентификатора указывается в атрибуте id. Например, так:
64

Файл 3/3.15.1.html
<table id="tablesity">
<tr>
...
</tr>
</table>

Чтобы в таблице стилей указать настройки по имени идентификатора, используют следующую форму записи: решетка, имя идентификатора, перечень
свойств и значений в фигурных скобках. Выглядит это следующим образом:
#идентификатор {свойство 1: значение; свойство 2: значение; ...
свойство n: значение;}

В нашем конкретном случае те же самые настройки, что были у таблицы
ранее, мы запишем теперь следующим образом:
#tablesity {width: 500px; font-family: Tahoma; font-size: 18px;}

Теперь необходимо продублировать свойства ячеек. Для этого совсем не
обязательно давать каждой из них отдельный идентификатор или создавать
специальный класс свойств. Можно просто воспользоваться контекстным селектором. Он позволяет назначать стили элементам, являющимся дочерними по
отношению к другим элементам. В нашем случае родительским элементом является таблица с id="tablesity", а дочерними — ячейки этой таблицы. Контекстный селектор записывается так: родительский элемент, пробел, дочерний
элемент, перечень свойств в фигурных скобках. Вот как выглядит такая запись
в таблице стилей:
родительскийЭлемент дочернийЭлемент {свойство 1: значение;
свойство 2: значение; ... свойство n: значение;}

В нашем случае ячейки таблицы будут иметь следующие настройки:
#tablesity td {padding: 10px;}

3.16. Компоновка страницы с помощью таблиц
До сих пор расположение текста и картинок у нас шло последовательно
по вертикали. Попробуем расположить все три блока горизонтально слево
направо. Для этого нам понадобится заключить рассказы о городах в ячейки
новой таблицы. Вот что она будет представлять собой:
Файл 3/3.16.1.html
<table>
<tr>
<td>
<h2>Москва</h2>
<p><img src="img/mos.jpg" alt="Москва">
<span class="boldunder">Москва</span> -

65

<span class="ital">столица России</span>,
город федерального значения ...</p>
</td>
<td>
<h2>Санкт-Петербург</h2>
<p><img src="img/spb.jpg" alt="Санкт-Петербург">
<span class="boldunder">Санкт-Петербург</span>
(в 1914-1924 годах - Петрогра́
д, в 1924-1991 годах - Ленингра́
д) –
<span class="ital">второй по численности населения
город России</span>. Основан ...</p>
</td>
<td>
<h2>Казань</h2>
<p><img src="img/kzn.jpg" alt="Казань">
<span class="boldunder">Казань</span> - город в России,
<span class="ital">столица Республики Татарстан</span>, порт
...</p>
</td>
</tr>
</table>

Кроме того, мы поместили данные о населении городов и ссылки на их
официальные страницы в еще одну таблицу, расположенную ниже описания
городов:
<table>
<tr>
<td>
<h3>Население городов России</h3>
<table id="tablesity">
<tr>
<td>Москва</td><td>Больше 1,3 х 10<span class="tsup">7</span>
<span class="tsub">[2023 г.]</span></td>
</tr>
<tr>
<td>Санкт-Петербург</td><td>Больше 5 х 10<span
class="tsup">6</span> <span class="tsub">[2023 г.]</span></td>
</tr>
<tr>
<td>Казань</td><td>Больше 1 х 10<span class="tsup">6</span> <span
class="tsub">[2023 г.]</span></td>
</tr>
</table>
</td>
<td>
<ul>
<li><a href="https://www.mos.ru/">Москва</a></li>
<li><a href="https://www.fontanka.ru/">Санкт-Петербург</a></li>
<li><a href="https://kzn.ru/">Казань</a></li>
</ul>

66

</td>
</tr>
</table>

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

Рис. 3.16.1
Табличное размещение информации о городах

3.17. Оформление основной таблицы
Новый вариант страницы, как оказалось, тоже имеет недостатки:
– между соседними блоками практически отсутствуют зазоры;
– блок информации о Казани оказался смещен ниже двух остальных блоков.
Последний недостаток вызван тем, что текст про столицу Татарстана у
нас короче двух других текстов. В этом случае браузеры по умолчанию позиционируют контент не к верхней границе блока, а в середине вертикали.
67

Внесем исправления с помощью дополнительных стилей. Для этого сначала назначим ячейкам идентификаторы:
Файл 3/3.17.1.html
<table>
<tr>
<td id="td1">
...
</td>
<td id="td2">
...
</td>
<td id="td3">
...
</td>
</tr>
</table>

Рис. 3.17.1
Завершаем оформление таблиц

68

А затем пропишем стили ячеек:
#td1, #td2, #td3 {vertical-align: top;}
#td1 {padding-right: 10px;}
#td2 {padding-left: 10px; padding-right: 10px;}
#td3 {padding-left: 10px;}

Свойство vertical-align устанавливает вертикальное положение элементов. В нашем случае они смещены к верхней границе вмещающего блока.
С помощью свойств padding-right и padding-left мы создаем необходимые зазоры между колонками текста.
Осталось выполнить две операции:
1) таблице с населением и ссылками дадим идентификатор
id="tabletown"

и зададим ей ширину, равную ширине блока контента;
#tabletown {width: 100%}

2) списку ссылок зададим смещение к правой границе документа.
ul {float: right;}

В итоге мы получим страницу, которая показана на рисунке 3.17.1.

3.18. Завершающие штрихи
Все с нашей страницей хорошо. Осталось придать ей завершающие
штрихи.
Первое. Зададим гарнитуру шрифта и его цвет заголовкам:
Файл 3/3.18.1.html
h1, h2, h3 {font-family: Tahoma; color: #800000;}

Второе. Создадим зазоры между строками в перечне ссылок:
li {margin-top: 15px;}

Результат наших точечных изменений — на рисунке 3.18.1.

Рис. 3.18.1

3.19. Позиционирование
Элементы на странице можно расположить одним из трех способов:
1) в потоке документа (это когда элементы в разметке страницы просто
следуют один за другим и также последовательно отображаются на странице);
69

2) позиционировать как самостоятельные объекты относительно границ
документа;
3) позиционировать относительно границ вмещающего контейнера,
например слоя div.
Первый способ — довольно редкий, так как при таком размещении трудно получить красивую страницу.
В остальных способах используют либо абсолютное позиционирование,
либо относительное. Для этого устанавливают значение свойства position:
– absolute — при этом значении элемент занимает строго фиксированное
положение, привязанное к границам документа или вмещающего контейнера и
не зависящее от положения остальных элементов;
– fixed — привязывает объект к границам окна браузера, при прокрутке
страницы такой элемент остается на мониторе в одном и том же положении;
– relative — сначала высчитывается нормальное положение объекта в потоке элементов документа, а затем происходит его смещение на указанные величины — на экране клиент видит конечный результат.
Для абсолютного и относительного позиционирования используются четыре свойства:
1) left — определяет смещение элемента вправо относительно левого края
документа, вмещающего контейнера или исходного положения;
2) right — определяет смещение элемента влево относительно правого
края документа, вмещающего контейнера или исходного положения;
3) top — определяет смещение элемента вниз относительно верхнего края
документа, вмещающего контейнера или исходного положения;
4) bottom — определяет смещение элемента вверх относительно нижнего
края документа, вмещающего контейнера или исходного положения.
В данном параграфе для иллюстрации создания блоков без использования
таблицы мы используем относительное (relative) и абсолютное (absolute) позиционирование.
Сейчас на нашей странице произойдут серьезные изменения.
Во-первых, вместо основной таблицы, вмещающей рассказы о городах,
мы создадим три контейнера, каждый из которых будет содержать соответствующий контент:
Файл 3/3.19.1.html
<div id="mos">
<h2>Москва</h2>
<img src="img/mos.jpg" alt="Москва">
<p><span class="boldunder">Москва</span> <span class="ital">столица России</span>,
город федерального значения ...</p>
</div>
<div id="spb">
<h2>Санкт-Петербург</h2>
<img src="img/spb.jpg" alt="Санкт-Петербург">
<p><span class="boldunder">Санкт-Петербург</span>

70

(в 1914-1924 годах - Петрогра́
д, в 1924-1991 годах - Ленингра́
д) –
<span class="ital">второй по численности населения
город России</span>. Основан ...</p>
</div>
<div id="kzn">
<h2>Казань</h2>
<img src="img/kzn.jpg" alt="Казань">
<p><span class="boldunder">Казань</span> город в России, <span class="ital">столица Республики Татарстан</span>,
порт ....</p>
</div>

А затем зададим относительное позиционирование для общего контейнера
div {... position: relative;}

абсолютное для блоков, помещающихся в данном контейнере:
...
#mos, #spb, #kzn {... position: absolute; top: 80px;}
...

и абсолютное для блока со списком населения городов и с перечнем ссылок:
...
#tabletown {... position: absolute; top: 1050px; ...}
...

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

3.20. Внешние таблицы стилей
Нужно признать, что способ размещения таблицы стилей, который мы
использовали в предыдущих параграфах, имеет один серьезный недостаток: если настроек много, то файл страницы получится очень большим и работать с
ним программисту станет неудобно. Поэтому предпочтительнее другой вариант — размещение таблиц стилей во внешних файлах. Подключить такие файлы к текущему документу очень просто. Для этого существуют два способа.
Первый — с использованием директивы @import. В этом случае подключение необходимо выполнить внутри блока head таким образом:
<style>
@import url(css.css);
</style>

где css.css — адрес файла с таблицей стилей. Обратите внимание: любой внешний файл с таблицей стилей должен иметь расширение .css. Естественно, что

71

внутри такого файла теги <style> </style> не указываются — описание стилей
начинается прямо с первой строки.
Второй способ — с применением элемента разметки link. В этом случае
файл таблицы стилей привязывается к документу внутри блока head так:
<link rel="stylesheet" href="css.css">

Какой вариант избрать — с директивой @import или элементом link —
решать вам. Заметим, что второй вариант применяется разработчиками гораздо
чаще, чем первый.
Посмотрим, как можно вынести настройки стилей нашей страницы в отдельный файл.
Поскольку наша страница рассказывает о разных городах, создадим в
текстовом редакторе пустой файл, который назовем town.css. Поместим в него
весь CSS-код, который был в нашем документе:
Файл 3/town.css
div {margin: auto; width: 1000px; position: relative;}
h1, h2, h3 {font-family: Tahoma; color: #800000;}
...
ul {float: right;}
li {margin-top: 15px;}

Теперь надо «привязать» данный файл к основной странице. Сделаем это
с помощью директивы link:
Файл 3/3.20.1.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Города России</title>
<link rel="stylesheet" href="town.css">
</head>

Запустите в браузере файл 3.20.1.html и убедитесь, что мы получили точно такой же результат, как в случае размещения таблицы стилей на основной
странице.

72

4. УПРАВЛЕНИЕ ОБЪЕКТАМИ ДОКУМЕНТА
До сих пор наша с вами страница была статичным документом, с которым мы никак не могли взаимодействовать. Между тем читатели прекрасно
знают, что на множествах сайтов посетители имеют возможность интерактивно
управлять контентом разных страниц. Типичный пример такого взаимодействия — увеличение изображений, выделение определенной части страницы
или вывод различных подсказок. Все эти эффекты создаются с помощью языка
программирования JavaScript.
В основных поисковых системах типа «Яндекс» или Google очень популярен запрос «скачать JavaScript». Многие из интересующихся программированием даже не подозревают, что ничего скачивать не надо — JavaScript уже есть
на вашем компьютере. Обработчик кода этого языка изначально встроен в ваш
браузер, какой бы «марки» он у вас ни был. Поэтому разработка интерактивных
страниц сайта — один из самых интересных процессов в веб-программировании.

4.1. Что такое JavaScript
JavaScript — язык программирования, в первую очередь предназначенный для написания сценариев к различным веб-страницам и взаимодействия с
ее элементами.
В основе программирования на этом языке лежит принцип обработки
различных событий, которые «случаются» в окне браузера.
События на страницах сайта происходят почти непрерывно. Загружаете
ли вы документ, нажимаете кнопку мыши, прокручиваете страницу или просто
перемещаете указатель — все это для браузера события. Их принято идентифицировать по типу (иногда говорят не тип события, а имя события).
Перечислим некоторые события, которые обрабатываются наиболее часто.
Событие load происходит при загрузке страницы в браузер. Оно генерируется сразу после того, как элементы разметки в HTML — тексты, фреймы и
рисунки (картинки, изображения, фото) — полностью отображаются на экране
компьютера. Такое же событие происходит и при получении ответа от сервера,
на котором стоит программа, вызываемая с применением технологии Ajax
(о ней — в следующей главе).
Событие click возникает при щелчке кнопкой мыши на элементе разметки
страницы. Это могут быть ссылки, кнопки, изображения, текстовые блоки, слои
(событие click, как, впрочем, и некоторые другие, может также происходить
даже на визуально пустом месте документа).
Событие mouseover происходит, когда указатель мыши перемещается
внутрь границ элемента.
Событие mouseout противоположно предыдущему и возникает, когда
указатель мыши покидает границы элемента.
73

Событие mousemove генерируется в продолжение всего времени, пока
указатель мыши перемещается над элементом.
Событие mousedown происходит при нажатии кнопки мыши, когда ее
указатель находится над элементом.
Событие mouseup возникает при отпускании кнопки мыши (при этом указатель должен находиться над элементом, для которого генерируется событие).
Событие resize возникает при изменении размеров окна браузера.
Событие focus случается при получении элементом фокуса (например,
когда курсор будет установлен в текстовом поле).
Событие blur происходит, когда элемент теряет фокус.
Событие submit сопровождает отправку формы, например нажатием
кнопки. Обычно программисты к данному событию привязывают проверку
данных, введенных пользователем.
Событие change происходит на элементах <select>, <input> и <textarea>,
когда меняются их значения.
Событие scroll возникает при прокручивании страницы в окне браузера
или во фрейме.
Событие keydown происходит в момент нажатия любой кнопки на клавиатуре.
Событие keyup возникает в момент отпускания после нажатия клавиши.
Событие keypress — это «симбиоз» двух предыдущих событий (клавиша
нажата и отпущена).
Разработчик сайта заранее выбирает, какие события на странице должны
вызвать программный отклик, а какие нет.

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

myname
MYNAME
MYname
myName
my_name
$myname
$MY_name
_my_name_
my$name

74

let my_$_name
let myname1
let my55name

Думаю, примеров достаточно — алгоритм назначения имен переменных
читателю понятен.
Обратите внимание, JavaScript чувствителен к регистру букв. MYNAME
и myname — это разные переменные. При этом автор советует не назначать
разным переменным одинаковые имена, отличающиеся только регистром. Так
ведь можно и запутаться в программе.
Особенность переменных в том, что хранимая в них информация может
неоднократно меняться, причем не только значения, но и тип данных. Например, вы можете создать переменную и сохранить в ней на начальной стадии
число, а затем поместить в переменную текстовую строку. Или наоборот.
Перед использованием в сценарии переменную необходимо объявить.
Например, так:
let i=1;

или так:
let i="Текст";

или так:
let i;

Здесь let — это оператор объявления переменных. В первых двух случаях
мы сразу присваиваем переменной текущее значение, а в последнем случае это
значение будет присвоено позже на каком-то из этапов выполнения программы.
Для переменных важен не только тип сохраненных данных. Не менее
значимой является область видимости. Последний термин определим так: область видимости — это часть сценария, в которой значения данной переменной
могут быть использованы программой.
Глобальные переменные доступны в любой части сценария и для любой
функции. Обычно глобальные переменные объявляются примерно так:
<script>
let i=1;
let t=0;
код сценария
</script>

В результате переменные i и t доступны в самых разных частях сценария.
Учитывайте, что их значения могут быть изменены в теле любой функции, которая оперирует с этими переменными.
Локальные переменные доступны только внутри конкретной функции,
условия или цикла. Объявляются они, например, так:
function func()
{
let a=1;
...
}

75

или так:
for(...)
{
let a=1;
...
}

В этих примерах значение переменной a доступно только внутри функции или цикла. Обращение к переменной a из другой функции или не из цикла
закончится неудачей.
Наконец, в «недрах» функции может быть своя иерархия переменных.
То есть одни из них оказываются глобальными внутри данной функции, а другие —
локальными внутри цикла или условия, являющихся частью данной функции.
Один из важнейших аспектов выполнения сценариев на JavaScript — операции с переменными. Для этого существует несколько видов операторов.
Арифметические операторы. Для начинающего наиболее важны те, которые представлены в таблице 4.2.1.
Таблица 4.2.1
Арифметические операторы
Оператор

Действие

Пример
x = 1;
x = «Текст»

=

Присваивание

+

Сложение

x+y

–

Вычитание
Умножение
Деление
Возведение в степень
Взятие остатка от деления

x–y


/
**
%

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

xy
x/y
x**y
x%y

Результат — остаток от целочисленного деления

Существуют сокращенные формы записи операций присваивания, представленные в таблице 4.2.2.
Таблица 4.2.2
Сокращенная форма записи операций
Сокращенная запись

Аналог

x + = y;

x = x + y;

x– = y;
x* = y;
x/ = y;
x** = y;
x% = y;

x = x – y;
x = x * y;
x = x/y;
x = x ** y;
x = x%y;

Примечание
Применяется также к переменным, содержащим строки; результатом будет
новая строка

76

Еще две важные операции: инкремента и декремента. Разъяснения к ним
даны в таблице 4.2.3.
Таблица 4.2.3
Операторы инкремента и декремента
Оператор

Название

++

Оператор инкремента

--

Оператор декремента

Действие
Увеличение значения
переменной на 1
Уменьшение значения
переменной на 1

Аналог

Пример

x=x+1

x++

x=x–1

x--

В некоторых случаях с операторами инкремента и декремента надо обращаться очень аккуратно. Почему? Дело в том, что формы записи данных операторов могут иметь два вида. Например, оператор инкремента: x++; и ++x. Оператор декремента: x--; и --x. Если используем форму записи y = x++ (или y = x--), то
сначала выполняется присвоение переменной y значение переменной x, а затем
происходит увеличение (или уменьшение) значения переменной x. При y = ++x
(или y = --x) сначала увеличиваем (или уменьшаем) текущее значение переменной x на единицу, а потом присваиваем ее значение переменной y.

4.3. Массивы
Массив — это переменная, содержащая в своих «недрах» нумерованный
список элементов. В качестве элементов могут быть данные любого типа, которые поддерживаются в JavaScript: строки, числа, символы и др. Массив может
также одновременно содержать данные разных типов.
Объявить массив очень просто:
let mas=[элемент 1, элемент 2, ..., элемент n];

Можно также создать пустой массив, который будет заполнен в процессе
выполнения сценария:
let mas=[];

Для получения отдельного элемента по его индексу используются записи
следующего вида:
mas[n]

Чтобы узнать, сколько элементов в массиве, надо обратиться к свойству
length:
let d=mas.length;

Будьте внимательны при написании сценариев: индексы элементов массива начинаются с 0, а их количество отсчитывается с 1.
Что интересно, элементами массивов могут быть переменные и даже сами
массивы. О последнем случае мы поговорим чуть позже.
Добавить новый элемент массива тоже очень просто:
mas[n+1]=элемент n+1;

77

Существует множество методов обработки массивов. Посмотрим некоторые из них.
concat() — объединяет несколько исходных массивов и создает новый.
Например, так:
let a=[1, 2, 3];
let b=["A", "B", "C"];
let x=a.concat(b);

Обратите внимание: в методе перемена мест массивов приводит и к перемене мест их элементов.
Методом concat() можно соединить не только два массива, но и больше.
every() — с помощью указанной функции проверяет все элементы массива. Возвращает true, если все элементы соответствуют заданному критерию, и
false — в противном случае.
filter() — создаёт новый массив с элементами, прошедшими проверку,
условия которой заданы в передаваемой функции.
find() — возвращает из массива первый элемент, который соответствует
заданному критерию.
findIndex() — возвращает из массива индекс первого элемента, который
соответствует заданному критерию.
forEach() — вызывает заданную функцию для каждого элемента массива.
includes() — ищет определенный элемент в массиве и возвращает true
или false в зависимости от результатов поиска.
indexOf() — выполняет поиск элемента в массиве. Возвращает индекс
первого совпадающего элемента. Противоположный ему метод lastIndexOf()
возвращает индекс последнего совпадающего элемента.
isArray() — проверяет, является ли объект массивом. Возвращает true в
случае положительного исхода проверки и false в противном случае. Синтаксис:
Array.isArray(проверяемый объект)

join() — формирует из элементов массива текстовую строку с разделителем, переданным аргументом.
map() — выполняет замену элементов текущего массива на элементы,
получаемые в результате выполнения функции, указанной в круглых скобках.
Если элементы какого-либо массива необходимо заменить на полностью
новые, можно использовать один из двух подходов:
– создать новый массив с новыми элементами и в последующих частях
программы использовать этот массив вместо старого;
– удалить все элементы из текущего массива и заполнить его новыми
данными.
pop() — удаляет последний элемент массива и возвращает этот элемент.
push() — добавляет новые элементы в конец массива и возвращает его
новую длину.
reduce() — применяет заданную функцию к каждому элементу массива,
перебирая их слева направо, и возвращает конечный результат.
78

reduceRight() — применяет заданную функцию к каждому элементу массива, перебирая их справа налево, и возвращает конечный результат.
reverse() — выполняет сортировку массива в обратном порядке.
shift() — удаляет элемент массива с индексом 0 и возвращает этот элемент.
slice() — возвращает новый массив, содержащий часть исходного массива. В скобках указывается индекс, с которого начинается отсчет, или интервал
копирования.
some() — с помощью указанной функции проверяет все элементы массива. Возвращает true, если хотя бы один элемент соответствует заданному критерию, и false — в противном случае.
splice() — удаляет часть массива; удаляет часть массива, а на его место
добавляет новые элементы; вставляет новые элементы в указанную позицию.
В первых двух случаях возвращает удаленные элементы.
sort() — производит сортировку элементов массива по заданной функции
сравнения. Если функция не указана, массив сортируется в соответствии со
значениями кодовых точек каждого символа Unicode.
unshift() — добавляет элементы в начало массива и возвращает его новую
длину.
А если объединить несколько массивов в один? В результате такого объединения мы получим многомерный массив, каждым элементом которого, в
свою очередь, тоже является массив.
Чтобы получить значение того или иного элемента из вложенного массива, нужно указать после имени многомерного массива два оператора [ ]. В первом задаем индекс вложенного массива, во втором — индекс элемента из вложенного массива:
mas[i][n]

Заполнить многомерный массив можно, сразу указав все его составляющие при создании или поочередно заполняя элементы массива:
let mas=[];
mas[0]=["Иван", "Иванов", 25];
mas[1]=["Петр", "Петров", 31];
mas[2]=["Денис", "Денисов", 28];

К многомерным массивам или отдельным элементам вложенных массивов применимы все те же методы, что и к одномерным массивам.

4.4. Условия
Проверка различных условий — важнейшая составляющая JavaScript.
Очень часто сценарий решает задачу: какие действия выполнить в зависимости
от значения какой-то переменной или от истинности какого-то выражения.
Цель проверки условий — направить программу в то или иное русло (иногда
направлений может быть гораздо больше двух).
Начнем рассказ об условиях с операторов. В первую очередь перечислим
операторы сравнения, которые представлены в таблице 4.4.1.
79

Таблица 4.4.1
Операторы сравнения
Оператор
==
!=
>
>=
<
<=
===
!==

Проверяемое условие
Равно
Не равно
Больше
Больше или равно
Меньше
Меньше или равно
Строго равно
Строго не равно

Пример
x == y
x != y
x>y
x >= y
x<y
x <= y
x === y
x !== y

Вторая таблица 4.4.2 содержит перечень логических операторов.
Таблица 4.4.2
Логические операторы
Оператор

Действие

&&

Логическое умножение (И)

!

Логическое отрицание (НЕ)

||

Логическое сложение (ИЛИ)

Возвращаемый результат
true, если все операнды истинны, и false,
если хотя бы один операнд ложен
true, если операнд ложен, и false, если операнд истинен
true, если хотя бы один операнд истинен, и
false, если все операнды ложны

Теперь вернемся к операторам сравнения. Обращаю ваше внимание, что
запись двойного сравнения, к которой мы привыкли в школе, в JavaScript не
сработает. Так писать нельзя: 1 < x < 10.
Правильная запись: x > 1&&x < 10. В этом варианте выполняется корректная проверка обоих условий, а затем логическое умножение, о котором мы
только что говорили.
Попробуем дать краткую формулировку применению условных выражений: они необходимы для проверки определенных данных на соответствие некоторым критериям.
Вариант наиболее простого использования условного оператора выглядит
так:
if(условие)
{
инструкции
}

Здесь инструкции будут выполняться в случае истинности условия.
Часто необходимо предусмотреть альтернативные инструкции, если проверка закончилась неудачей. В этом случае используют следующую форму
записи:
if(условие)

80

{
инструкции 1
}
else
{
инструкции 2
}

Инструкции блока else будут выполняться в случае ложности основного
условия.
Бывает, надо проверить несколько условий. В этой ситуации используют
такую конструкцию:
if(условие 1)
{
инструкции 1
}
else if(условие 2)
{
инструкции 2
}
...
else if(условие n)
{
инструкции n
}
else
{
инструкции на случай ложности всех условий
}

Иногда требуется проверить нескольких условий, но при этом не выполнять никаких действий, если все условия окажутся ложными. Представим, что у
нас есть переменная a, которая может принимать разные числовые значения, но
для нас важны только три из них: 1, 2 и 3. В этом случае условные выражения
можно записать так
if(a==1)
{
инструкции 1
}
if(a==2)
{
инструкции 2
}
if(a==3)
{
инструкции 3
}

Обратите внимание: в последнем примере мы отказались от использования блока else с альтернативными инструкциями в случае ложности условий.

81

Еще один способ проверки — оператором выбора switch. Он может быть
полезен как альтернатива рассмотренным выше случаям проверки нескольких
условий. Выражения с использованием данного оператора выглядят так:
switch (выражение)
{
case значение 1:
инструкции 1
break;
case значение 2:
инструкции 2
break;
...
case значение n:
инструкции n
break;
default:
инструкции на случай отсутствия совпадений
}

Здесь значение из каждого блока последовательно сравнивается с заданным выражением. В случае совпадения выполняются инструкции соответствующего блока. На случай отсутствия совпадений предусмотрены инструкции в
блоке default. Оператор break прерывает проверку остальных условий, если текущее условие оказалось истинным.
Если при отсутствии совпадений никакие действия не нужны, то блок
default можно не использовать:
switch (a)
{
case 1:
инструкции 1
break;
case 2:
инструкции 2
break;
case 3:
инструкции 3
}

Кроме того, блоки можно объединять, если при разных значениях должны выполняться аналогичные инструкции:
switch (a)
{
case 1:
инструкции 1
break;
case 2:
case 3:
инструкции 2
}

82

Если у вас после проверки условия выполняется только одна инструкция,
то можно использовать сокращенную форму записи выражения:
if(условие)
инструкция

или
if(условие)
инструкция 1
else
инструкция 2

или
if(условие 1)
инструкция 1
else if(условие 2)
инструкция 2
...
else if(условие n)
инструкция n
else
инструкция на случай ложности всех условий

Как видите, в таких условных выражениях можно не заключать единственную инструкцию в фигурные скобки.
Возможен также смешанный вариант, когда в условном выражении у
одиночных инструкций фигурные скобки отсутствуют, а в блоке с несколькими
инструкциями скобки есть.
Автор использовал в книге следующий подход: во всех условиях, где после проверки выполняется только одна инструкция, фигурные скобки не ставятся.
Еще один случай, когда можно обойтись сокращенной записью: иногда
удобнее выполнять проверку условий тернарным оператором. Он принимает
три операнда: условие, инструкцию, которая выполняется, если условие истинно, и инструкцию, которая выполняется, если условие ложно. Его запись выглядит так:
let a=условие ? инструкция 1 : инструкция 2;

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

4.5. Циклы
Операторы циклов необходимы для перебора некоторых значений в заданных пределах и поочередного выполнения определенных инструкций, иногда зависящих от значения на очередном проходе, а иногда нет. Циклы удобно
использовать в тех случаях, когда какую-то часть программного кода надо выполнить многократно.
83

Например, с помощью цикла удобно проходить по всем элементам массива или выполнять одинаковые (а иногда и неодинаковые) изменения свойств
группы элементов страницы. И даже регистрировать обработчики событий
(в чем мы убедимся в разделе, посвященном регистрации обработчиков).
Наиболее универсален оператор for. Количество проходов в таком цикле
фиксируется переменной-счетчиком. Ограничивает число проходов — условие.
Структура цикла for обычно выглядит так:
for(исходное значение; условие; приращение)
{
инструкции
}

Исходное значение — это значение, установленное перед началом цикла
переменной-счетчику. Условие — выражение, с помощью которого проверяется, может ли выполняться цикл далее после очередного прохода (или может ли
он выполняться вообще). Приращение — значение, на которое увеличивается
счетчик после каждого прохода.
В цикле for допустимо объявлять сразу несколько переменных-счетчиков
и одновременно производить над ними различные операции, а также устанавливать сразу несколько ограничивающих условий.
Иногда необходимо прервать цикл или пропустить какой-то из его проходов.
Для первого случая используется оператор break:
for(let i=0; i<t; i++)
{
...
if(i==d)
break;
}

Чтобы пропустить один из проходов цикла, воспользуйтесь оператором
continue.
for(let i=0; i<t; i++)
{
if(i==d)
continue;
...
}

Теперь рассмотрим оператор с похожим названием и не похожим внутренним устройством — for...of. Его структура имеет следующий вид:
for(переменная of объект)
{
инструкции с участием переменной
}

В операторе for...of на каждом проходе переменной присваивается очередной элемент объекта, после чего с переменной выполняются определенные
действия.
84

Третий оператор цикла, который мы рассмотрим, — while. Он устроен
несколько проще, чем предыдущие:
while(условие)
{
инструкции
}

Вот как цикл может быть использован в реальных условиях:
let i=0;
while(i<t)
{
...
i++;
}

В этом примере роль счетчика выполняет переменная, объявленная вне
тела цикла. Но ее значения меняются именно в цикле.
Для перебора элементов массива в цикл while в качестве условия также
можно вставить переменную, которая содержит массив.
Наконец, четвертый оператор цикла: do...while. Этот оператор имеет одно
принципиальное отличие от while. В цикле while сначала проверяется условие,
а потом, если оно истинно, выполняются инструкции. Таким образом, если
условие изначально ложно, ни один проход не состоится. Оператор do...while
сначала выполняет инструкции, а потом проверяет условие. Поэтому даже при
изначально ложном условии инструкции будут выполнены один раз. Форма записи оператора do...while:
do
{
инструкции
}
while(условие)

Как и в случае с условными операторами, если в теле цикла выполняется
только одна инструкция, то можно использовать сокращенную форму записи:
for(...)
инструкция

Тот же принцип можно использовать в случае оператора for...of.
Сокращенная форма записи подойдет и для оператора while, а также
do...while.

4.6. Функции
Одни из наиболее важных «действующих лиц» любой программы на
JavaScript — функции. Именно они являются обработчиками событий, именно
в них выполняется большинство операций, вычислений, преобразований и т. д.
85

По сути, функция — это набор инструкций, объединенных в один блок и
выполняющих те или иные действия по изменению содержания страницы.
JavaScript предоставляет разработчику несколько вариантов создания функций.
Поговорим о них подробнее.
Функции бывают разные.
Например, по назначению их можно разделить на два основных вида.
Первый — функции, выполняющие действия, связанные с изменением
состояния и параметров различных элементов документа. Вторая разновидность — функции, необходимые для вычислений. Естественно, что бывают и
смешанные варианты, когда инструкции направлены на выполнение требуемых
вычислений и — на их основе — манипулирование элементами страницы.
По методу обращения к ним функции можно разделить на три группы.
1. Именованные — то есть имеющие имя, по которому они могут быть
вызваны:
// Описание функции
function func()
{
...
}
// Вызов функции
func();

2. Анонимные функции, то есть не имеющие имени и «приписанные»
непосредственно к регистратору обработчика. Пример:
document.getElementById("im").
addEventListener("click", function()
{
...
});

3. Анонимные функции, изначально присвоенные какой-либо переменной. Допустим, вот так:
let v=function(x)
{
...
}

Вызов этой функции может выглядеть следующим образом (например,
если результат необходимо сохранить для дальнейших операций):
let z=v(i);

И даже еще проще (например, если вычисленный результат выводится на
страницу):
v(i);

Правда, сделаем оговорку, что, на взгляд автора, такие функции все же необходимо считать «условно анонимными», ведь к ним можно обратиться по имени
переменной. Однако я не уверен, что со мной согласятся все программисты.
86

Обратите внимание на один важный момент. Если результат выполнения
функции присваивается переменной, то вызов такой функции может происходить только после объявления данной переменной и присвоения ей ссылки на
данную функцию:
let v=function(x)
{
...
}
let z=v(i);

И это логично: сначала мы объявляем переменную, а потом уже выполняем операции с ней.
В то же время именованные функции можно вызывать как после их описания в коде сценария, так и до:
func();
function func()
{
...
}

Часто программисту необходимо использовать рекурсивные функции —
то есть те, что вызывают сами себя. Создавая рекурсивную функцию, обязательно предусмотрите предел ее выполнения. Если этого не сделать, то процесс
станет бесконечным и страница с функцией зависнет.
Теперь о передаче параметров в функцию. Это можно сделать разными
способами.
1. Передать данные в качестве аргумента (или аргументов, если их много). Вот так:
func(t);
function func(i)
{
// инструкции, выполняемые в зависимости
от значения аргумента i
}

2. Использовать для передачи данных значение глобальной переменной:
let i=t;
function func()
{
// инструкции, выполняемые в зависимости
от значения переменной i
}

3. Еще один вариант, который мы пока не упоминали: передача в качестве
аргумента функции объекта события (с последующим извлечением данных,
например id).
87

4. Наконец, бывает смешанный вариант — это когда одна и та же функция может получать аргументы совершенно разных типов. Например, число
или строку.
Раз в функцию можно передавать какие-то параметры, значит, можно и
получать результаты работы функции. Покажем два способа.
1. Прямое указание в теле функции возвращаемого значения. Для этого
используется оператор return. Вот элементарный пример:
function func()
{
let i=t+d;
return i;
}
let b=func();

Как видите, здесь прямо указано, что функция возвращает значение переменной i
return i;

которое можно использовать в других частях сценария. При этом сама переменная i является локальной и видна только в функции. Чтобы ее значение было доступно в других частях сценария, мы использовали оператор return и вызывали функцию, присвоив результат ее выполнения глобальной переменной b:
let b=func();

2. Результатом работы функции бывает изменение глобальной переменной. Естественно, что новое значение этой переменной также может использоваться в других операциях:
let i=t;
function func()
{
i+=d;
}
func();

Здесь новое значение переменной i условно можно считать возвращаемым. Сначала мы объявили глобальную переменную i
let a=t;

затем в теле функции увеличили ее значение и полученный результат передали
в дальнейшую работу:
func();

Есть еще один интересный случай — функции-стрелки.
Вообще, стрелочные функции появились в ES6 в 2015 г. Но разработчики
применяют их достаточно редко. Например, валидатор JavaScript, о котором
шел разговор ранее, «увидев» в коде стрелочную функцию, до сих пор сообща88

ет: «синтаксис функции стрелки (=>) доступен только в ES6 (используйте версию 6)».
Особенность стрелочных функций — более короткая и простая запись.
Функции-стрелки объявляются двумя последовательными символами =>. Один
из возможных вариантов такой функции:
let func= ()=>
{
let i=t+d;
...
};

Вызвать данную функцию можно так:
func();

Обратите внимание — перед оператором => мы поставили круглые скобки. Они нужны на случай, если мы передаем в функцию какие-то аргументы.
Функции-стрелки могут быть записаны гораздо проще, без фигурных
скобок, если выполняют всего одну операцию. Вот пример:
let func= ()=>alert(t**d);
func();

И еще пример — теперь с передачей в функцию аргументов:
let func= (arg1, arg2)=>alert(arg1**arg2);
func(t, d);

Если стрелочная функция оперирует одним аргументом, то круглые скобки перед оператором => можно не ставить:
<script>
let func= arg =>
{
let i=arg+d;
...
}
func(t);

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

4.7. Регистрация обработчиков
Обработчик события — это некая функция, которая выполняет определенный набор инструкций в ответ на действия посетителя. Чтобы эта функция
89

заработала, ее необходимо зарегистрировать или связать с конкретным событием.
Сразу сделаем одну важную оговорку: автор исповедует стиль программирования, при котором сценарии на JavaScript располагаются:
– либо в головной части документа;
– либо во внешнем файле, вызов которого помещается в головной части
документа.
Тем самым программный код отделяется от разметки.
В этой связи возникают определенные особенности регистрации обработчиков. В частности, метод, показанный ниже, не даст никакого результата:
<head>
...
<script>
регистрация обработчика, например,
для клика на изображении
программный код, обрабатывающий щелчок на изображении
</script>
</head>

Почему? Дело в том, что анализатор браузера при загрузке документа
считывает его «сверху вниз». Но у нас обработчик объявлен в заголовочной части, то есть еще до того, как построена объектная модель документа. В результате браузер еще не видит изображение, а мы уже пытаемся привязать к картинке какое-то событие. В итоге обработчик не будет зарегистрирован.
Чтобы все работало корректно, необходимо поступать следующим образом. Регистрировать сначала обработчик уровня окна браузера для события
load, а уже внутри него записывать остальные обработчики. Сделать это можно
так:
<head>
...
<script>
регистрация обработчика события load уровня окна
{
регистрация других обработчиков
}
программный код, обрабатывающий события
</script>
</head>

или так:
<head>
...
<script>
регистрация обработчика события load уровня окна
{
регистрация других обработчиков

90

программный код, обрабатывающий события
}
</script>
</head>

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

Два из них обязательные. Первый — тип события. Второй — анонимная
функция, «реагирующая» на событие, или имя внешней функции. Третий аргумент допустимо не указывать. Он может, например, определять, в какой стадии — всплытия или погружения — будет вызван обработчик. Кроме того, в
качестве третьего аргумента могут быть иные данные, например указание разрешать вызов обработчика не более одного раза.
Обратите внимание: метод addEventListener обращается к любому событию без использования префикса on: надо писать load, click, focus, submit и т. д.
Рассмотрим несколько способов применения метода addEventListener.
1. Обработчики событий окна load, scroll, resize зарегистрировать проще
всего. Например, для события load это можно сделать так:
addEventListener("load", start);

и так:
addEventListener("load", function()
{
...
});

и еще так:
addEventListener("load", ()=>
{
...
});

2. Регистрация обработчика как ответ на событие load. Например, так:
addEventListener("load", function()
{
document.getElementById("im").
addEventListener("click", func);
});

или так:
addEventListener("load", function()
{
document.getElementById("im").
addEventListener("click", function()

91

{
...
});
});

или вот так:
addEventListener("load", function()
{
document.getElementById("im").
addEventListener("click", ()=>
{
...
});
});

3. Регистрация сразу нескольких обработчиков. Пример:
addEventListener("load", function()
{
document.getElementById("im").
addEventListener("click", func);
document.getElementById("im").
addEventListener("mouseout", doc);
document.getElementById("im").
addEventListener("mouseover", res);
});

4. Комбинированная регистрация — когда обработчики одних событий
регистрируются вначале, а другие — в процессе выполнения сценария. Может
выглядеть следующим образом:
addEventListener("load", function()
{
document.getElementById("im").
addEventListener("click", func);
});
function func()
{
...
document.getElementById("te").
addEventListener("click", doc);
}
function doc()
{
...
}

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

обработчиков для одного и того же события на одном и том же элементе страницы.
В работе программиста часто бывают ситуации, когда в сценарии необходимо зарегистрировать обработчик одного и того же события для множества
однотипных элементов. Понятно, что писать множество строк кода с регистрацией одного и того же обработчика для разных элементов — крайне нерационально. Хотелось бы по возможности сделать сценарий более компактным.
И тут на помощь приходит цикл. Использовав его, мы способны сократить процесс регистрации всего до нескольких строк.
Именно такой подход реализован в следующем примере. Запускаем цикл,
количество проходов которого равно количеству однотипных элементов:
for(let i=0; i<d.length; i++)
{
...
}

и регистрируем для каждого элемента обработчик:
d[i].addEventListener("click", ()=>{func(t);});

У программиста часто бывают ситуации, когда необходимо зарегистрировать обработчик, вызывающийся ограниченное количество раз, а не бесконечно. На примере метода addEventListener рассмотрим несколько вариантов,
как можно поступить в этом случае.
Вариант 1. Нам необходимо вызвать обработчик только один раз. Как я
уже говорил выше, метод addEventListener может третьим аргументом принимать указание реагировать на определенное событие на выбранном элементе
однократно. Остальные аналогичные события на этом элементе не вызовут реакции сценария.
Вариант 2. Необходимо вызвать обработчик несколько раз. На такой случай есть метод removeEventListener, который отменяет привязку ранее зарегистрированного обработчика к какому-либо событию при достижении определенного условия.
Исходный обработчик можно не только отменить, но и зарегистрировать
вновь. Более того, процесс регистрации и отмены может быть многократным.
Во всех браузерах есть такой встроенный программный блок — обработчик событий по умолчанию. Он запускается после выполнения обработчиков,
зарегистрированных в сценарии JavaScript. Однако довольно часто программисту необходимо отменить установленную по умолчанию обработку события.
Для этого используется метод preventDefault.
Отмена обработчика по умолчанию может использоваться в разных случаях. Например, к ней в обязательном порядке прибегают, используя технологию перетаскивания объектов Drag and Drop.

93

4.8. Всплывающие подсказки
А теперь от теории — к практике. Мы напишем три сценария, которые
сделают из нашего статичного документа — интерактивный. Начнем с создания
всплывающих подсказок.
Запустите в браузере файл 4.8.1.html. Вы увидите страницу, совершенно
похожую на то, что мы видели в трех последних разделах предыдущей главы
(рис. 4.8.1). Сейчас объектом наших исследований станут ссылки на сайты разных городов.
Наведите указатель мыши на одну из ссылок. Рядом с ней появится прямоугольник с изображением соответствующего города и название сайта, на который вы перейдете, если кликните ссылку (рис. 4.8.2). Если теперь щелкнуть
мышью на любом участке страницы, подсказка исчезнет.
Чтобы реализовать такой принцип, внесем ряд изменений в нашу страницу.
Во-первых, создадим новый слой, который будет служить основой для
всплывающих подсказок:
Файл 4/4.8.1.html
<div id="town">
</div>

Во-вторых, оформим этот слой:
#town {position: absolute; visibility: hidden; background:
#FFFFFF;
border: 1px solid #0000CC; padding: 15px; font-family: Tahoma;
font-size: 24px; width:
300px;}

Как видите, в исходном состоянии он скрыт. За это отвечает новое для
нас свойство — visibility. Оно может иметь несколько значений, но нам интересны только два из них: hidden — элемент скрыт, и visible — элемент виден.
В исходном состоянии установлен режим «невидимости» — hidden.
Теперь напишем сценарий, реализующий заявленные функции.
Сценарий для удобства чтения документа разместим в заголовочной части страницы. Для этого добавим новые открывающий и закрывающий теги:
<script> </script>

вот таким образом:
<!DOCTYPE html>
<html lang="ru">
<head>
...
<script>
</script>
</head>

94

95
Рис. 4.8.1
Исходный вид страницы

96
Рис. 4.8.2
Появление подсказки

Внутри этих тегов и разместим наш первый сценарий.
Сначала напишем обработчик события загрузки документа:
addEventListener("load", ()=>
{
...
});

В теле этого обработчика регистрируем еще два. Функцию, которая будет
запускаться при наведении мыши на ссылку:
document.getElementById("lin").addEventListener("mouseover", lin);
function lin(ev)
{
...
}

и функцию, необходимую для скрытия подсказки:
addEventListener("click", ()=>
{
...
});

Разберем обработчики по порядку.
Итак мы навели указатель мыши на ссылку. Для браузера это событие
mouseover. Его обрабатывает именованная функция lin:
function lin(ev)
{
...
}

В качестве аргумента она получает объект события — ev (от англ. event).
Так как данная функция несколько раз будет обращаться к свойствам
контейнера town, мы для сокращения кода вводим новую переменную:
let twns=document.getElementById("town").style;

Затем определяем, произошло ли событие mouseover на ссылке. Для этого узнаем, содержит ли элемент, на котором произошло событие, атрибут href:
if(ev.target.href)
{
...
}

Если «ответ положительный», узнаем id элемента:
let adr=ev.target.id;

и вычисляем координаты указателя мыши:
let x=ev.pageX-250;
let y=ev.pageY-300;

Как видите, мы сразу корректируем полученные значения, чтобы подсказка появлялась на 250 пикселей левее и на 300 пикселей выше позиции ука97

зателя мыши. Тем самым подсказка не будет перекрывать ссылку, а окажется
выше нее и чуть сбоку.
Следующий шаг — перемещаем слой с подсказкой из исходного состояния в вычисленное положение:
twns.left=x+"px";
twns.top=y+"px";

и делаем подсказку видимой:
twns.visibility="visible";

Последняя операция функции — добавление на слой необходимого фото
и адреса ссылки:
document.getElementById("town").innerHTML=
'<img src="img/'+adr+'.jpg" alt="Фото" class="imgbas">
<br>Сайт '+adr+'.ru';

Обратите внимание: в реальной программе последняя операция записывается одной строкой!
Функция скрытия подсказки очень простая — в ней всего одна инструкция. Она обрабатывает событие click в любой точке страницы:
addEventListener("click", ()=>
{
document.getElementById("town").style.visibility="hidden";
});

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

4.9. Выделение блока
Следующий сценарий позволит нам создать эффект выделения одного из
блоков текста.
Запустите в браузере страницу 4.9.1.html. Поочередно наводите указатель
мыши на колонки с рассказами о городах. Вы увидите: колонка, на которую
наведена мышь, остается яркой и хорошо читаемой, а две другие становятся
блеклыми (рис. 4.9.1). Так выглядит заявленный нами эффект.
Для реализации данного алгоритма не нужно что-то добавлять или менять
в разметке документа. Все дело только в новом сценарии, который мы добавим
к уже существующему.
Откройте в редакторе файл страницы. Вы увидите, что в блоке
<script>
...
</script>

появилась новая функция — tab.
Файл 4/4.9.1.html
function tab(ev)
{

98

...
}

Она запускается при наведении указателя мыши на таблицу с текстом:
document.getElementById("tab").addEventListener("mouseover", tab);

Функция в качестве аргумента получает объект события и содержит несколько простых инструкций.
Первым делом создаем переменную h для сокращения кода:
let h=ev.target.id;

Эта переменная будет хранить id ячейки, на которую наведен указатель
мыши.
Если событие действительно произошло на одной из ячеек
if(h.indexOf("td")>=0)
{
...
}

выполняются две основные операции:
1) у всех ячеек уменьшается уровень непрозрачности:
document.getElementById("td1").style.opacity=0.3;
document.getElementById("td2").style.opacity=0.3;
document.getElementById("td3").style.opacity=0.3;

2) у ячейки, на которую наведена мышь, уровень непрозрачности восстанавливается до единицы:
document.getElementById(h).style.opacity=1;

Таким образом происходит требуемое выделение блока текста.
В этой функции мы обратились к еще незнакомому нам свойству opacity.
Оно отвечает за непрозрачность элемента и может содержать значение от 0
до 1, где ноль — полная прозрачность, а единица — полная непрозрачность.
Дробные значения указывают на уровень частичной прозрачности.
Чтобы вновь сделать все три блока непрозрачными, щелкните мышью на
любом участке страницы.
За восстановление уровня непрозрачности отвечают инструкции, которые
мы добавили в обработчик события клика на документе:
addEventListener("click", ()=>
{
document.getElementById("town").style.visibility="hidden";
document.getElementById("td1").style.opacity=1;
document.getElementById("td2").style.opacity=1;
document.getElementById("td3").style.opacity=1;
});

Первая инструкция сохранилась от предыдущей версии страницы, вторая,
третья и четвертая добавлены в новой версии. Они возвращают непрозрачность
всем трем блокам текста.
Как видите, получить эффект выделения оказалось очень просто.
99

100
Рис. 4.9.1
Выделение блока текста

4.10. Скрипт просмотра фото
Все у нас хорошо, за исключением одного момента: после того как мы
уменьшили размеры фотографий, их стало сложнее рассматривать. Восполним
этот пробел и добавим на страницу возможность видеть снимки в натуральную
величину.
Откройте в браузере файл 4.10.1.html. Наведите указатель мыши на одно
из трех изображений и кликните на нем. Страница закроется белым полупрозрачным фоном, на котором появится увеличенное фото выбранного города
(рис. 4.10.1). Чтобы убрать его, немного прокрутите документ вниз.
Для реализации данного «механизма» нам требуется добавить на страницу новые элементы. Во-первых, слой, который станет выполнять роль фона:

Рис. 4.10.1
Просмотр увеличенного изображения

Файл 4/4.10.1.html
<div id="bas"></div>

Во-вторых слой для демонстрации крупного снимка:
<div id="view">
<img id="pict" src="pict/net.jpg" alt="Фото">
</div>

Здесь необходимо дать ряд пояснений.
Почему два слоя? Дело в том, что базовый слой имеет уровень непрозрачности 0,95 — то есть частично прозрачен. Если поместить изображение на
этот слой, то оно тоже станет частично прозрачным. А это не то, что нам нужно. Поэтому у нас два контейнера — отдельно с фоном и отдельно с рисунком.
Дальше. Согласно спецификации HTML все изображения должны иметь
заполненный атрибут src. Но в исходном состоянии никакого снимка в контей101

нере для увеличенных кадров нет. Поэтому мы создали файл net.jpg, который
является квадратом белого цвета размером 1×1 пиксель, и поместили его в новую папку pict. Этот файл и загружается в исходном состоянии на демонстрационный слой. Когда вы щелкаете на выбранном фото, файл net.jpg очень
быстро заменяется на реальное изображение. А когда вы прекращаете просмотр
увеличенного снимка, на демонстрационный слой вновь загружается рисунок net.jpg.
Настройки слоев:
#bas, #view {position: absolute; left: 0; top: 0; width: 100%;
height: 100%; visibility: hidden;}
#bas {z-index: 3; opacity: 0.95; background: #FFFFFF;}
#view {z-index: 4; display: flex; justify-content: center;
align-items: center;}

Здесь мы впервые используем набор свойств:
display: flex; justify-content: center; align-items: center;

Эти настройки позволяют нам размещать увеличенное изображение в
центре демонстрационного слоя и соответственно в центре страницы. Чуть подробнее о них:
– display — определяет, как элемент должен быть расположен в документе;
– justify-content — определяет, как браузер распределяет пространство
вокруг элемента со свойством display: flex;
– align-items — определяет выравнивание элементов по вертикали.
Обратите также внимание, что базовый и демонстрационный слои занимают все пространство окна браузера:
#bas, #view {... width: 100%; height: 100%; ...}

Теперь напишем сценарий. В нем будут две функции — показывающая и
скрывающая картинку.
Начнем с первой и самой главной.
Сначала введем три переменные для сокращенного обращения к слоям:
let view=document.getElementById("view");
let bas=document.getElementById("bas").style;
let pict=document.getElementById("pict");

Зарегистрируем обработчик события клика в теле таблицы с блоками текста:
document.getElementById("tab").addEventListener("click", show);

Напишем функцию show, которая обрабатывает щелчок:
function show(ev)
{
...
}

Первым делом выясняем, был ли клик на одном из снимков:
if(ev.target.tagName=="IMG")

102

{
...
}

Потом узнаем величину прокрутки страницы по вертикали
let sc=window.pageYOffset

и смещаем оба слоя на полученное значение:
bas.top=sc+"px";
view.style.top=sc+"px";

Загружаем на демонстрационный слой выбранное изображение в натуральную величину
pict.src=ev.target.src;

и делаем оба контейнера видимыми:
view.style.visibility="visible";
bas.visibility="visible";

Чтобы скрыть фотографию, чуть-чуть прокрутим страницу вниз или
вверх. Это событие обрабатывает следующая анонимная функция:
addEventListener("scroll", function()
{
...
});

В ней три инструкции:
view.style.visibility="hidden";
bas.visibility="hidden";
pict.src="pict/net.jpg";

Первые две скрывают слои, а третья возвращает изображению исходный
адрес — pict/net.jpg.
На этом наши эксперименты с добавлением интерактивности странице
закончены. Осталось добавить совсем немного, о чем вы прочтете в следующем
разделе.

4.11. Внешние сценарии
Ситуация с размещением сценариев JavaScript очень похожа на ту, что мы
видели относительно таблиц стилей. Если сценарий включает в себя большой
объем кода, размещать его в заголовочной части страницы нерационально. Поэтому предпочтительнее другой вариант — размещение сценариев на JavaScript
во внешних файлах. Подключают такие программы к текущему документу следующим образом. Необходимо внутри блока head разместить теги <script>
</script>, при этом в открывающем теге указать адрес необходимого файла:
<script src="js.js"></script>

где js.js — адрес файла со сценарием. Обратите внимание: любой внешний
файл с программой на JavaScript должен иметь расширение .js. Естественно,
103

что внутри такого файла теги <script> </script> не указываются — написание
кода начинается прямо с первой строки.
Как вынести сценарии нашей страницы в отдельный файл? Очень просто.
Создадим в текстовом редакторе пустой файл, который назовем town.js.
Поместим в него код всех скриптов, что были в нашем документе:
Файл 4/town.js
addEventListener("load", ()=>
{
document.getElementById("lin").addEventListener("mouseover", lin);
...
});

Подключим данный файл к основной странице. Сделаем это так:
Файл 4/4.11.1.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Города России</title>
<link rel="stylesheet" href="town.css">
<script src="town.js"></script>
</head>

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

104

5. ТЕХНОЛОГИЯ AJAX
Для тестирования технологии Ajax нам в обязательном порядке необходимо создать на своем компьютере локальный хостинг.
Вообще, хостинг — это, упрощенно говоря, компьютер, предназначенный
для размещения сайтов и обеспечивающий к ним доступ из Интернета. Локальный хостинг — набор программ на вашем персональном компьютере, которые
позволяют имитировать реальный хостинг и проводить тестирование ваших
сайтов (включая HTML-страницы и серверные скрипты) перед их размещением
в Сети. Кстати, обратите внимание: локальный хостинг работает без подключения к Интернету!
Чтобы получить результаты, описанные в данной книге, вам понадобится
установить на компьютер распространяемый пакет компонентов Visual C++ от
Microsoft, сервер Apache и интерпретатор PHP. Описание технологии их установки — в следующих разделах.
Итак, вводная часть завершена — приступим к созданию локального хостинга. А начнем мы с выяснения разрядности вашей ОС.
Обратите внимание: все процедуры описаны для компьютера с операционной системой Windows 10.

5.1. Выясняем разрядность ОС
Перед тем как мы создадим на компьютере среду разработки, необходимо
выяснить разрядность вашей операционной системы, чтобы знать, какие файлы
скачивать для локального хостинга.
Включите компьютер, дождитесь полной загрузки операционной системы. Щелкните на кнопке Пуск, а затем на кнопке Параметры (рис. 5.1.1).
В открывшемся окне выберите пункт меню Система. Откроется следующая
вкладка, в которой необходимо кликнуть на строке О системе (или О программе). После этого на вкладке Характеристики устройства посмотрите
строку Тип системы (рис. 5.1.2).

Рис. 5.1.1
Кнопка Параметры в меню

105

Рис. 5.1.2
Разрядность или тип операционной системы

Типов ОС Windows существует два — 32-разрядная и 64-разрядная. Запомните разрядность вашей. Это число понадобится трижды: при скачивании
пакета Visual C++, а также zip-архивов сервера Apache и интерпретатора PHP.

5.2. Установка пакета Visual C++
Откройте браузер и зайдите на страницу https://www.apachelounge.com/
download/. Это сайт, с которого мы будем скачивать архив с сервером Apache.
Но сначала надо установить на ваш компьютер компоненты Visual C++, без которых сервер не заработает.
Для этого найдите на указанной странице текст “Be sure you installed
latest 14.38.33130 Visual C++ Redistributable Visual Studio 2015–2022 :
vc_redist_x64 or vc_redist_x86 see Redistributable” (на момент подготовки книги данные строки были последними в описательной части страницы; со временем текст может несколько измениться). Для нас важны две ссылки, расположенные в тексте: vc_redist_x64 и vc_redist_x86. Если у вас 64-разрядная ОС,
нажмите ссылку vc_redist_x64. Если 32-разрядная, необходимо щелкнуть на
ссылке vc_redist_x86 (рис. 5.2.1).

106

Запустите скачанный файл (рис. 5.2.2). Примите условия лицензионного
соглашения и нажмите кнопку Установить. Дождитесь завершения процесса
установки (рис. 5.2.3). Нажмите кнопку Закрыть (рис. 5.2.4).

Рис. 5.2.1
Ссылки для скачивания пакетов Visual C++

Рис. 5.2.2
Начало установки пакета

107

Рис. 5.2.3
Процесс установки

Рис. 5.2.4
Завершение установки

5.3. Установка сервера Apache 2.4
Теперь скачайте на Рабочий стол компьютера с сайта https://www.
apachelounge.com/download/ zip-архив сервера, соответствующий разрядности
вашей ОС (рис. 5.3.1). Для 64-разрядной системы — архив с пометкой Win64
(например, httpd-2.4.58-win64-VS17.zip), для 32-разрядной — с пометкой Win32
(например, httpd-2.4.58-win32-VS17.zip). Распакуйте архив. Скопируйте папку
Apache24 (только ее) непосредственно на диск C, чтобы ее адрес был
C:\Apache24 (рис. 5.3.2).
Откройте приложение Командная строка от имени администратора. Для
этого нажмите кнопку Пуск, в меню выберите Служебные — Windows,
найдите пункт Командная строка и щелкните на нем правой (правой!) кнопкой мыши. В выпадающем списке выберите Дополнительно, а затем Запуск от
имени администратора (рис. 5.3.3). Откроется окно программы.
108

109
Рис. 5.3.2
Копируем папку Apache24 на диск C

Рис. 5.3.1
Сайт с zip-архивом сервера

Рис. 5.3.3
Запуск командной строки

Теперь надо инсталлировать, а затем запустить сервер. Для этого в окне
командной строки сразу после
C:\WINDOWS\System32>

наберите
C:\Apache24\bin\httpd.exe -k install

Должно получиться
C:\WINDOWS\System32>C:\Apache24\bin\httpd.exe -k install

Нажмите Enter. Когда процесс инсталляции закончится (рис. 5.3.4), в окне
программы вновь появится строка
C:\WINDOWS\System32>

Закройте окно командной строки и перезагрузите компьютер.
ВНИМАНИЕ! Может открыться окно брандмауэра с запросом на
разрешение работы Apache. Разрешите доступ во всех сетях.
Нам надо убедиться, что сервер заработал. Для этого откройте ваш браузер
и введите в строке адреса http://localhost/. Если появилось сообщение “It works!”,
значит, все в порядке — сервер функционирует как положено (рис. 5.3.5).
Теперь обратите внимание на один важный момент. Метод, которым мы
установили сервер, позволяет запускать его автоматически при включении
110

компьютера и завершать его работу при выключении компьютера. То есть
Apache продолжает функционировать, даже если в данное время он вам не нужен. Эта информация вызывает у вас беспокойство по поводу теоретической
уязвимости ПК? Тогда переведите сервер в режим ручного запуска. Для этого
выполните следующие действия:
– введите в строке поиска слово «службы» (рис. 5.3.6) и нажмите на соответствующей иконке, которая появится в списке результатов поиска;
– в открывшемся окне найдите строку Apache2.4 и щелкните на ней правой
(правой!) кнопкой мыши — появится меню управления службой (рис. 5.3.7);
– кликните на строке Свойства и в окне на вкладке Общие найдите список Тип запуска;
– выберите пункт Вручную, затем последовательно нажмите кнопки
Применить и ОК (рис. 5.3.8);
– теперь остановите службу, нажав соответствующую ссылку в левой
стороне окна (рис. 5.3.9);
– дождитесь окончания процесса (рис. 5.3.10);
– закройте вкладку Службы.
Теперь Apache остановлен и переведен в режим ручного запуска. При
необходимости воспользоваться сервером снова зайдите в раздел Службы, выделите строку Apache2.4 и кликните на ссылке Запустить службу (рис. 5.3.11).
Подождите окончания процесса (рис. 5.3.12).
Продолжаете беспокоиться о безопасности? Можете на время работы с
сервером отключать свой ПК от Интернета. Напомним — локальный хостинг
работает без сети.

Рис. 5.3.4
Инсталляция сервера из приложения Командная строка

Рис. 5.3.5
Сервер подтверждает, что он работает

111

Рис. 5.3.6
Находим приложение Службы

Рис. 5.3.7
Открываем меню управления службой

112

Рис. 5.3.8
Переводим службу в режим ручного запуска

Рис. 5.3.9
Нажимаем ссылку Остановить службу

113

Рис. 5.3.10
Идет процесс остановки Apache

Рис. 5.3.11
Для запуска Apache нажмите ссылку Запустить службу

114

Рис. 5.3.12
Идет процесс запуска сервера

5.4. Установка PHP 8
Скачайте на рабочий стол компьютера с сайта https://windows.php.net/
download/ zip-архив PHP 8, соответствующий разрядности вашей ОС. Для
64-разрядной системы — архив с пометкой x64, для 32-разрядной — с пометкой x86. Обратите внимание: так как мы будем устанавливать PHP в качестве
модуля сервера Apache, скачивать надо дистрибутив Thread Safe (рис. 5.4.1).
Распакуйте архив. Переименуйте распакованную папку на php и переместите ее непосредственно на диск C, чтобы ее адрес был C:\php (рис. 5.4.2).
В папке C:\Apache24\conf с помощью текстового редактора Блокнот откройте файл httpd.conf (рис. 5.4.3), найдите в нем строку
DirectoryIndex index.html

и добавьте к ней
index.php

Должно получиться
DirectoryIndex index.html index.php

Теперь в самый конец файла httpd.conf добавьте две строки:
AddHandler application/x-httpd-php .php
LoadModule php_module "C:/php/php8apache2_4.dll"

Сохраните изменения, закройте файл и перезагрузите компьютер.
115

116
Рис. 5.4.1
Сайт с zip-архивом PHP

Убедимся, что PHP заработал. Для этого в папке C:\Apache24\htdocs создайте текстовый файл и запишите в него следующий код:
<?php
echo "Good !";

Сохраните этот файл под именем, например, test.php. Откройте ваш
браузер и введите в строке адреса http://localhost/test.php. Если появилось сообщение “Good !”, значит, все в порядке — PHP работает (рис. 5.4.4).

Рис. 5.4.2
Перемещаем папку php на диск C

Рис. 5.4.3
Файл httpd.conf

Рис. 5.4.4
Проверяем работу PHP

117

5.5. Как функционирует Ajax
Термин Ajax расшифровывается как «Асинхронный JavaScript и XML» и
представляет собой передовую технологию взаимодействия между страницей,
загруженной в браузер, и сервером.
Как происходило такое взаимодействие раньше? Клиент отправлял информацию, а сервер передавал в браузер новую HTML-страницу с измененными данными или сообщениями о результате отправки данных из формы. Ключевой момент ранних технологий — загрузка новой страницы вместо исходной.
Это увеличивает время ожидания ответа сервера, повышает интернет-трафик.
Такие факторы особенно чувствительно ощущались во времена подключения к
Интернету через модемы.
Потом разработчики придумали хитроумный способ обходиться без новой
страницы. Чтобы выводить необходимую информацию, текущий документ
снабжался невидимым фреймом. Когда появлялась нужда в фоновом режиме получить какие-то данные с сервера, у фрейма программным способом менялся адрес загруженного файла на новый в соответствии с запросом клиента. Таким образом, во фрейме появлялись затребованные данные, после чего происходило,
опять же на программном уровне, считывание полученного файла и добавление
информации на страницу. Однако и этот метод имел определенные ограничения.
И только создание технологии Ajax позволило делать сайты, где информация добавлялась на страницу без лишних выкрутасов и очень быстро. А учитывая, что современные посетители сайтов любят, когда все происходит без
лишних задержек, лучше использовать Ajax при любой возможности.
Рассмотрим некоторые варианты применения Ajax в веб-разработках.
Один из наиболее типичных примеров — отправка клиентом заполненной
формы. В этом случае результаты проверки данных отображаются прямо на текущей странице. Нажал кнопку Отправить — и тут же получил ответ «Ваша
заявка зарегистрирована» или «Вы указали некорректные сведения».
Другой пример — бесконечная лента сообщений, например в социальных
сетях. По мере прокрутки страницы в определенный момент на сервер отправляется Ajax-запрос, и полученная обратно информация подгружается в конец
ленты непосредственно в процессе просмотра страницы.
Мы с вами попробуем первый вариант — отправку формы с нашей страницы.

5.6. Поля форм
Формы — это набор различных полей, предназначенных для заполнения
посетителями. Данные из формы передаются на сервер, обрабатываются и сохраняются либо в файлах, либо в базах данных. А посетителю выводится сообщение о том, что отправка данных прошла успешно, или о том, что на одном из
этапов этого процесса произошла какая-то ошибка.
Полей форм существует много. Мы рассмотрим лишь некоторые из
них — самые «главные».
Но прежде чем мы перейдем к их изучению, выясним, что нам предстоит
узнать и сделать. Поступим следующим образом. Создадим пустую страницу
118

и станем постепенно добавлять на нее разные поля. В итоге сформируем анкетный лист для посетителей, которые могут ответить на несколько вопросов. Добавим эту форму на страницу с описанием городов и научимся отправлять ее в
фоновом режиме на сервер.
А начнем с того, что в разметке страницы для обозначения области формы используют открывающий и закрывающий теги <form> </form>. Поместим
эти теги на новую страницу:
Файл 5/5.6.1.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поля форм</title>
<style>
div {margin: auto; width: 1000px;}
</style>
</head>
<body>
<div id="town">
<form>
...
</form>
</div>
</body>
</html>

Чтобы скомпоновать поля формы в один блок, используем группирующий элемент fieldset, заголовком которого будет текст «Поучаствуйте в опросе» (рис. 5.6.1):
<form>
<fieldset>
<legend>Поучаствуйте в опросе</legend>
</fieldset>
</form>

Рис. 5.6.1
Создание формы начнем с группирующего элемента

119

Подготовительный этап завершен, можно начинать создание анкеты для
опроса.
Первым мы добавим однострочное текстовое поле, в которое посетитель
должен будет вписать свое имя (рис. 5.6.2). Это поле создается тегом input с
атрибутом type="text":
Файл 5/5.6.2.html
<form>
<fieldset>
<legend>Поучаствуйте в опросе</legend>
Ваше имя: <input type="text">
</fieldset>
</form>

Рис. 5.6.2
Страница с текстовым полем

Затем вставим раскрывающийся (иногда говорят «выпадающий») список,
в котором посетитель может выбрать свой возраст (рис. 5.6.3). Такой список создается парным тегом select:
Файл 5/5.6.3.html
Ваш возраст: <select>
<option selected>до 30 лет</option>
<option>30-60 лет</option>
<option>старше 60</option>
</select>

Рис. 5.6.3
Добавили раскрывающийся список

Одним из пунктов анкеты у нас будет вопрос о том, в каких городах бывал посетитель. Для этого мы используем поля, которые называются флажками
(рис. 5.6.4). Они создаются тегом input с атрибутом type="checkbox". Такие
120

поля могут находиться в одном из двух режимов: «галочка» установлена или
«галочка» снята:
Файл 5/5.6.4.html
В каких городах вы были:<br>
<input type="checkbox"> Москва<br>
<input type="checkbox"> Санкт-Петербург<br>
<input type="checkbox"> Казань

Рис. 5.6.4
Новые поля в листе опроса

Следующий пункт анкеты предлагает посетителю назвать город, который
нравится ему больше всего. Для этого используем переключатель, кнопки которого создаются тегами input с атрибутом type="radio". Чтобы можно было
нажать только одну кнопку, необходимо установить всем им одинаковый атрибут name, которому мы присвоим значение megapolis:

Рис. 5.6.5
Добавляем на страницу переключатель

Файл 5/5.6.5.html
Какой город вам понравился больше:<br>
<input type="radio" name="megapolis"> Москва<br>
<input type="radio" name="megapolis"> Санкт-Петербург<br>
<input type="radio" name="megapolis"> Казань

Результат добавления в нашу форму переключателя можно видеть на рисунке 5.6.5.

121

Чтобы посетитель мог написать к анкете какой-либо комментарий, вставим в форму многострочное текстовое поле, которое создается парным тегом
textarea (рис. 5.6.6):
Файл 5/5.6.6.html
Ваш комментарий:<br>
<textarea></textarea>

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

Последний элемент формы — кнопка, при нажатии на которую данные из
формы будут отправляться на сервер. Такая кнопка создается тегом input с атрибутом type="button". Атрибут value содержит текст, который показывается
на кнопке (рис. 5.6.7):
Файл 5/5.6.7.html
<input type="button" value="ОТПРАВИТЬ">

Рис. 5.6.7
Добавили кнопку отправки данных

122

Таким образом, наша форма приобрела следующий вид:
<form>
<fieldset>
<legend>Поучаствуйте в опросе</legend>
Ваше имя: <input type="text"><br>
Ваш возраст: <select>
<option selected>до 30 лет</option>
<option>30-60 лет</option>
<option>старше 60</option>
</select><br>
В каких городах вы были:<br>
<input type="checkbox"> Москва<br>
<input type="checkbox"> Санкт-Петербург<br>
<input type="checkbox"> Казань<br>
Какой город вам понравился больше:<br>
<input type="radio" name="megapolis"> Москва<br>
<input type="radio" name="megapolis"> Санкт-Петербург<br>
<input type="radio" name="megapolis"> Казань<br>
Ваш комментарий:<br>
<textarea></textarea><br>
<input type="button" value="ОТПРАВИТЬ">
</fieldset>
</form>

5.7. Добавляем форму на страницу
Итак, мы создали форму для опроса посетителей нашей страницы. Поместим ее в разметку. Будет лучше всего расположить ее в конце документа, чтобы клиенты сначала все прочитали и посмотрели, а потом ответили на вопросы.
Сделаем это следующим образом:
Файл 5/5.7.1.html
<!DOCTYPE html>
<html lang="ru">
<head>
...
</head>
<body>
...
<form>
<fieldset>
<legend>Поучаствуйте в опросе</legend>

123

Ваше имя: <input type="text"><br>
Ваш возраст: <select>
<option selected>до 30 лет</option>
<option>30-60 лет</option>
<option>старше 60</option>
</select><br>
В каких городах вы были:<br>
<input type="checkbox"> Москва<br>
<input type="checkbox"> Санкт-Петербург<br>
<input type="checkbox"> Казань<br>
Какой город вам понравился больше:<br>
<input type="radio" name="megapolis"> Москва<br>
<input type="radio" name="megapolis"> Санкт-Петербург<br>
<input type="radio" name="megapolis"> Казань<br>
Ваш комментарий:<br>
<textarea></textarea><br>
<input type="button" value="ОТПРАВИТЬ">
</fieldset>
</form>
</div>
</body>
</html>

Результат вы можете видеть на рисунке 5.7.1.

5.8. Стилизуем форму
Теперь наша задача привести форму к единому виду с остальными компонентами страницы. Для этого запишем в таблицу стилей настройки для полей. Конечный результат нашей работы вы можете посмотреть на рисунке 5.8.1.
Сначала оформим группирующий блок fieldset. Назначим ему гарнитуру
и размер шрифта, а также толщину и цвет рамки:
Файл 5/5.8.1.html
fieldset {font-family: Tahoma; font-size: 18px;
border: 2px solid #000000;}

Заголовок этого блока выделим жирным и сделаем бордовым:
legend {font-weight: bold; color: #800000;}

Для однострочного текстового поля зададим новый атрибут — id
<input type="text" id="inpt">

а в таблице стилей по его имени установим толщину и цвет рамки, ширину поля, а также шрифт:
#inpt {width: 300px; height: 24px; font-family: Tahoma;
font-size: 18px; border: 2px solid #006600;}

124

125
Рис. 5.7.1
Форма опроса на странице

126

Рис. 5.8.1
Мы придали форме внешний вид, соответствующий стилистике документа

Следующий по порядку — выпадающий список. У него будут такие
настройки ширины, рамки и шрифта:
select {width: 200px; font-family: Tahoma;
font-size: 18px; border: 2px solid #006600;}

Для всех флажков checkbox зададим класс checkb
<input type="checkbox" class="checkb"> Москва<br>
<input type="checkbox" class="checkb"> Санкт-Петербург<br>
<input type="checkbox" class="checkb"> Казань<br><br>

с такими параметрами (размерами):
.checkb {width: 20px; height: 20px;}

Многострочное текстовое поле увеличим в размерах, зададим характеристики шрифта, рамку и отступ текста от краев поля:
textarea {width: 600px; height: 200px;
font-family: Tahoma; font-size: 18px;
padding: 10px; border: 2px solid #006600;}

Кнопку отправки данных снабдим идентификатором
<input type="button" value="ОТПРАВИТЬ" id="but">

и придадим ей оформление в стиле остальных элементов:
#but {width: 200px; height: 40px; font-family: Tahoma;
font-size: 18px; color: #006600;
border: 2px solid #006600; border-radius: 5px;
background: #CCFFFF;}

5.9. Тестируем пример
Итак, у нас на странице есть форма, которую может заполнить и отправить посетитель. Этот процесс будет выполняться по технологии Ajax, с которой мы познакомились ранее.
Но сначала надо решить, где и каким способом мы будем демонстрировать
клиенту ответ сервера. Автор считает (и часто пользуется таким методом), что
ответ можно выводить непосредственно на кнопку отправки данных. Поэтому
нам требуется увеличить ее ширину, чтобы вмещался соответствующий текст:
Файл 5/5.9.1.html
#but {width: 330px; ...}

Следующее действие — присвоим форме имя. Оно понадобится для получения сценарием данных для отправки:
<form name="dat">
...
</form>

Последний подготовительный шаг — дадим имена тем полям формы, которые их еще не имеют:
<input type="text" id="inpt" name="inpt">

127

<select name="sel">
...
</select>
<input type="checkbox" class="checkb" name="checkb1"> Москва
<input type="checkbox" class="checkb" name="checkb2"> СанктПетербург
<input type="checkbox" class="checkb" name="checkb3"> Казань

Это необходимо сделать, так как любая серверная программа получает
информацию, ориентируясь на имена полей той или иной формы.
Отправка данных серверной программе и получение ответа происходят в
фоновом режиме.
Схема процесса выглядит следующим образом. После нажатия кнопки
Отправить данные из формы пересылаются методом POST скрипту cont.php.
В настоящей серверной программе такой скрипт всегда выполняет проверку
входных параметров прежде, чем с ними что-то делать (например, записывать в
базу данных). Но наш скрипт для простоты этого не делает — он просто возвращает ответ, подтверждающий успешное завершение процесса (и ничего никуда не записывает). Почему наш пример устроен именно таким образом? Чтобы не погружать читателя в основы PHP. Это вы можете сделать самостоятельно. Итак, cont.php возвращает положительный ответ. Сообщения о результатах
на 3 с появляются на кнопке отправки данных (рис. 5.9.1), после чего ей возвращается исходный текст.
Для реализации технологии передачи данных в фоновом режиме напишем вот такой короткий сценарий:
let but=document.getElementById("but");
but.addEventListener("click", function()
{
let dt=new FormData(document.forms.dat);
let re=new XMLHttpRequest();
re.open("POST", "cont.php", true);
re.send(dt);
re.addEventListener("load", function()
{
let ans=this.responseText;
if(ans==1)
but.value="СООБЩЕНИЕ ОТПРАВЛЕНО !";
else
but.value="ОШИБКА В ОТПРАВКЕ СООБЩЕНИЯ !";
setTimeout(()=>{but.value="ОТПРАВИТЬ";}, 3000);
});
});

Как он работает?
Первым делом создаем переменную для сокращенного обращения как к
самой кнопке, так и к ее свойству value:
let but=document.getElementById("but");

128

129

Рис. 5.9.1
Результат отправки сообщения выводится непосредственно на кнопке

Сценарий запускаем после щелчка на кнопке:
but.addEventListener("click", function()
{
...
});

Сразу создаем новый объект с данными из формы
let dt=new FormData(document.forms.dat);

и новый объект интерфейса Ajax — XMLHttpRequest:
let re=new XMLHttpRequest();

Методом open формируем запрос
re.open("POST", "cont.php", true);

и отправляем его серверному скрипту:
re.send(dt);

Также устанавливаем, что после загрузки ответа должна запускаться анонимная функция
re.addEventListener("load", function()
{
...
});

Ее задача на основе полученного ответа вывести то или иное сообщение
на кнопке отправки данных:
let ans=this.responseText;
if(ans==1)
but.value="СООБЩЕНИЕ ОТПРАВЛЕНО !";
else
but.value="ОШИБКА В ОТПРАВКЕ СООБЩЕНИЯ !";
setTimeout(()=>{but.value="ОТПРАВИТЬ";}, 3000);

Последняя инструкция сообщает программе, что через 3 с необходимо
вернуть кнопке исходную надпись:
setTimeout(()=>{but.value="ОТПРАВИТЬ";}, 3000);

Теперь напишем серверную программу cont.php. В ней будут всего
две строки:
Файл 5/cont.php
<?php
echo '1';

Единственное назначение скрипта cont.php — отправлять в ответ на запрос цифру 1, что воспринимается сценарием на нашей странице как положительный ответ.

130

Все готово. Нам осталось поместить два файла — 5.9.1.html и
cont.php, — а также папки img и pict на локальный хостинг. Для этого переместите их в папку C:\Apache24\htdocs.
Откройте ваш браузер и введите в строке адреса: http://localhost/
5.9.1.html. Вы увидите нашу страницу с формой. Можете заполнить ее, а можете и не заполнять. Нажмите кнопку Отправить. Вы увидите, как на три секунды на ней появится надпись «СООБЩЕНИЕ ОТПРАВЛЕНО !». А это значит,
что наша страница провела успешное взаимодействие с серверной программой.
Можно проверить, как сценарий среагирует на незапланированный ответ
сервера. Для этого измените на локальном хостинге в программе cont.php
цифру 1 на 2:
<?php
echo '2';

и вновь нажмите кнопку Отправить. Вы увидите, как появится ответ «ОШИБКА В ОТПРАВКЕ СООБЩЕНИЯ !». Это значит, что наш сценарий работает
корректно.
Естественно, что при желании и определенном уровне знакомства с PHP
вы сможете написать настоящую серверную программу, которая будет проверять заполнение формы и сохранять полученные данные, если они корректны.

131

6. ЗАКЛЮЧЕНИЕ
Изучение основ веб-программирования подошло к концу. Осталось подвести итоги.
Мы с вами сделали массу вещей:
1) создали простейшую HTML-страницу;
2) наполнили ее содержимым и добавили необходимые теги;
3) познакомились с некоторыми элементами CSS и с их помощью завершили оформление документа;
4) узнали основы языка программирования JavaScript;
5) добавили интерактивности содержимому страницы;
6) изучили некоторые элементы форм;
7) написали сценарий взаимодействия нашего документа с сервером при
посредстве технологии Ajax.
Осталось напомнить читателю, что в книге изложены начальные знания.
Для глубокого погружения в среду веб-программирования необходимо продолжать изучать ее детали, которые остались за рамками этого пособия. В этом,
кстати, вам помогут другие книги издательства «Лань», которые посвящены
данной теме.

132

7. ПРИЛОЖЕНИЯ
Демонстрируя технологию Ajax, мы использовали серверный скрипт,
написанный на языке программирования PHP. Однако в последние годы более
модным является другой язык — Python. Для тех читателей, кто заинтересован
в использовании на сервере программы, написанной на Python, автор предлагает описание по установке интерпретатора этого языка. А подробнее о нем вы
можете прочитать в В. В. Янцева «Web-программирование на Python», вышедшей в издательстве «Лань».

7.1. Установка Python 3
Скачайте на Рабочий стол компьютера с сайта https://www.python.org/
downloads/windows/ установочный файл, соответствующий разрядности вашей ОС (рис. 7.1.1). Запустите его.
Выберите вариант установки с настраиваемыми параметрами. Для этого
нажмите ссылку Customize installation (рис. 7.1.2). В открывшемся окне ничего
не меняйте, просто нажмите кнопку Next (рис. 7.1.3).
Основные настройки выполняются в следующем окне. Во-первых, поставьте «галочку» напротив пункта Install for all users, чтобы интерпретатор
был доступен всем пользователям. В строке Customize install location вручную
введите адрес папки для интерпретатора: C:\Python. После этого нажмите
кнопку Install (рис. 7.1.4).
Дождитесь окончания процесса (рис. 7.1.5). Нажмите кнопку Close
(рис. 7.1.6).

Рис. 7.1.1
Сайт с файлами интерпретатора Python

133

Рис. 7.1.2
Начало установки интерпретатора Python

Рис. 7.1.3
Здесь просто жмем Next

134

Рис. 7.1.4
Ставим «галочку» напротив пункта Install for all users, меняем имя папки,
в которую будет установлен интерпретатор, и начинаем инсталляцию

Рис. 7.1.5
Процесс установки файлов интерпретатора Python

135

Рис. 7.1.6
Завершение установки

Рис. 7.1.7
Файл httpd.conf

В папке C:\Apache24\conf с помощью текстового редактора Блокнот откройте файл httpd.conf (рис. 7.1.7), найдите в нем строку
DirectoryIndex index.html

и добавьте к ней
index.py

136

Должно получиться
DirectoryIndex index.html index.py

Теперь найдите строку
Options Indexes FollowSymLinks

и добавьте в конце нее
ExecCGI

Должно получиться
Options Indexes FollowSymLinks ExecCGI

Дальше найдите строку
#AddHandler cgi-script .cgi

удалите в начале нее знак # и добавьте в конце строки
.py

Должно получиться
AddHandler cgi-script .cgi .py

И последняя операция — в самый конец файла httpd.conf добавьте строку
SetEnv PYTHONIOENCODING utf8

Сохраните изменения, закройте файл и перезагрузите компьютер.
Теперь убедимся, что Python заработал. Для этого в папке C:\Apache24\
htdocs создайте текстовый файл и запишите в него следующий код:
#! C:/Python/python
print('Content-type: text/html\n\n')
print('PYTHON !')

Сохраните этот файл под именем test.py. Откройте ваш браузер и введите
в строке адреса: http://localhost/test.py. Если появилось сообщение “PYTHON !”,
значит все в порядке (рис. 7.1.8).

Рис. 7.1.8
Проверяем работу Python

7.2. Основные элементы HTML5
<!--...-->

Создает комментарий в документе.
137

<a>

Создает гиперссылку.
<address>

Обозначает контактные данные автора или владельца страницы.
<area>

Ограничивает область внутри изображения, которое служит картой.
<article>

Определяет статью.
<audio>

Обозначает звуковое содержимое.
<b>

Выделяет текст полужирным начертанием.
<blockquote>

Определяет раздел, который цитируется из другого источника.
<body>

Ограничивает тело документа.
<br>

Обозначает перевод строки.
<button>

Создает кнопку.
<canvas>

Используется в качестве холста для рисования.
<caption>

Создает заголовок таблицы.
<div>

Обозначает в документе блок или контейнер.
<em>

Определяет подчеркнутый текст.
<embed>

Описывает контейнер для внешнего приложения.
<fieldset>

Группирует элементы формы.
138

<footer>

Ограничивает нижний колонтитул страницы.
<form>

Создает форму для ввода информации посетителем.
<h1> - <h6>

Создает заголовки разного уровня.
<head>

Ограничивает заголовочную часть документа.
<header>

Обозначает верхний колонтитул документа.
<hr>

Горизонтальная линия.
<html>

Вмещает всю разметку документа, как ее видимую часть, так и невидимую (заголовочную).
<i>

Начертание курсивом.
<iframe>

Создает фрейм.
<img>

Вставляет изображение.
<input>

Создает поле ввода данных.
<legend>

Создает заголовок для <fieldset>.
<li>

Определяет элемент списка.
<link>

Подключает к документу файл (наиболее часто — таблицу стилей).
<map>

Используется с элементами <area> для создания карты на изображении.
<menu>

Меню страницы или раздела.
139

<meta>

Описывает метаданные документа.
<nav>

Навигационные ссылки.
<object>

Добавляет внедренный объект.
<ol>

Определяет упорядоченный список.
<option>

Задает параметр в выпадающем списке.
<p>

Создает абзац.
<progress>

Показывает ход выполнения процесса.
<s>

Задает перечеркнутый текст.
<script>

Внедряет в документ сценарий
<section>

Определяет раздел в документе.
<select>

Создает выпадающий список.
<source>

Определяет источники мультимедиа.
<span>

Обозначает фрагмент документа.
<strong>

Выделяет важный текст.
<style>

Служит для создания в документе таблицы стилей.
<sub>

Делает фрагмент текста подстрочным.
140

<sup>

Делает фрагмент текста надстрочным.
<table>

Создает таблицу.
<td>

Создает ячейку в таблице.
<textarea>

Многострочное текстовое поле.
<title>

Содержит заголовок или название документа.
<tr>

Создает строку в таблице.
<u>

Подчеркивает фрагмент текста.
<ul>

Создает неупорядоченный список.
<video>

Подключает к документу видеофайл.
<wbr>

Указывает место возможного разрыва строки.
Обратите внимание: в этом разделе описаны видимые результаты внедрения тех или иных тегов на страницу. Смысловое содержание некоторых тегов
(например, <b>) в HTML5 по сравнению с HTML4 изменилось.

7.3. Основные стили CSS3
background

Служит для задания всех свойств фона.
background-color

Задает цвет фона элемента.
background-image

Задает изображение для фона.
background-repeat

Определяет, как фоновое изображение будет повторяться.

141

background-size

Задает размер фонового изображения.
border

Свойство, описывающее стиль, ширину и цвет рамки элемента.
border-bottom

Задает свойства нижней границы элемента.
border-collapse

Определяет, должны ли границы таблицы сворачиваться в одну или нет.
border-color

Задает цвет рамки.
border-left

Задает свойства левой границы элемента.
border-radius

Устанавливает параметры скругления рамки.
border-right

Задает свойства правой границы элемента.
border-spacing

Устанавливает расстояние между границами соседних ячеек.
border-style

Задает стиль рамки.
border-top

Задает свойства верхней границы элемента.
border-width

Задает ширину рамки.
bottom

Смещает элемент в нижнюю часть родительского контейнера.
box-shadow

Создает тень блочному элементу.
color

Задает цвет текста.
cursor

Указывает, в каком виде должен отображаться курсор мыши.
142

display

Определяет, как должен отображаться элемент.
filter

Определяет эффекты, сопровождающие отображение элемента.
float

Устанавливает позиционирование элемента к одному из краев вмещающего контейнера.
@font-face

Инструкция, позволяющая загружать на сайт сторонние шрифты.
font-family

Задает гарнитуру шрифта.
font-size

Задает размер шрифта.
font-stretch

Определяет ширину букв шрифта.
font-style

Задает стиль шрифта.
font-weight

Определяет обычное или полужирное начертание букв.
height

Задает высоту элемента.
@import

Инструкция для импортирования таблицы стилей.
left

Задает положение позиционированного элемента относительно левого
края документа.
letter-spacing

Увеличивает или уменьшает расстояние между символами в тексте.
margin

Определяет внешние зазоры элемента относительно вмещающего контейнера.
margin-bottom

Устанавливает нижний зазор элемента относительно вмещающего контейнера.
143

margin-left

Устанавливает левый зазор элемента относительно вмещающего контейнера.
margin-right

Устанавливает правый зазор элемента относительно вмещающего контейнера.
margin-top

Устанавливает верхний зазор элемента относительно вмещающего контейнера.
max-height

Задает максимальную высоту элемента.
max-width

Задает максимальную ширину элемента.
min-height

Задает минимальную высоту элемента.
min-width

Задает минимальную ширину элемента.
opacity

Определяет уровень непрозрачности для элемента.
padding

Задает внутренние отступы от границ элемента.
padding-bottom

Задает внутренний нижний отступ от границ элемента.
padding-left

Задает внутренний левый отступ от границ элемента.
padding-right

Задает внутренний правый отступ от границ элемента.
padding-top

Задает внутренний верхний отступ от границ элемента.
position

Указывает позиционирование элемента.
right

Задает положение позиционированного элемента относительно правого
края документа.
144

text-align

Выравнивает текст по горизонтали.
text-decoration

Определяет оформление текста, например с подчеркиванием или без.
text-indent

Задает отступ первой строки в абзаце.
text-shadow

Создает тени у выбранного фрагмента текста.
top

Задает положение позиционированного элемента относительно верхнего
края документа.
transform

Применяет пространственное преобразование к элементу.
transition

Задает время изменения выбранных свойств.
vertical-align

Выравнивает элемент в вертикальном положении.
visibility

Определяет видимость элемента.
width

Задает ширину элемента.
word-spacing

Увеличивает или уменьшает расстояние между словами в тексте.
z-index

Задает порядок следования элементов в направлении, вертикальном плоскости экрана компьютера.

145

8. СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ
1. Янцев, В. В. JavaScript. Как писать программы. — СПб. : Лань, 2022.
2. Янцев, В. В. JavaScript. Картинки, галереи, слайдеры. — СПб. : Лань,
2022.
3. Янцев, В. В. JavaScript. Креативное программирование. — СПб. : Лань,
2023.
4. Диков, А. В. Клиентские технологии веб-дизайна. HTML5 и CSS. —
СПб. : Лань, 2019.
5. Мейер, Э. А. CSS. Карманный справочник. — М. : Диалектика, 2019.
6. Роббинс, Д. HTML5. Карманный справочник. — М. : Вильямс, 2017.

146

Валерий Викторович ЯНЦЕВ

РАЗРАБОТКА WEB-СТРАНИЦ НА HTML, CSS И JAVASCRIPT
УЧЕБНОЕ ПОСОБИЕ
Издание второе, стереотипное

Зав. редакцией литературы
по информационным технологиям и системам связи О. Е. Гайнутдинова

ЛР № 065466 от 21.10.97
Гигиенический сертификат 78.01.10.953.П.1028 от 14.04.2016 г.,
выдан ЦГСЭН в СПб
Издательство «ЛАНЬ»
lan@lanbook.ru; www.lanbook.com
196105, Санкт-Петербург, пр-кт Ю. Гагарина, д. 1, лит. А.
Тел./факс: (812) 336-25-09, 412-92-72.
Бесплатный звонок по России: 8-800-700-40-71

Подписано в печать 23.12.24.
Бумага офсетная. Гарнитура Школьная. Формат 70×100 1/16.
Печать офсетная/цифровая. Усл. п. л. 12,03. Тираж 50 экз.
Заказ № 1425-24.
Отпечатано в полном соответствии
с качеством предоставленного оригинал-макета
в АО «Т8 Издательские Технологии».
109316, г. Москва, Волгоградский пр., д. 42, к. 5.