Web и DHTML

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
УРАЛЬСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ ИМЕНИ ПЕРВОГО 
ПРЕЗИДЕНТА РОССИИ Б. Н. ЕЛЬЦИНА

Екатеринбург
Издательство Уральского университета
2018

С. И. Солодушкин, И. Ф. Юманова

Web и DHTML

Учебное пособие

Рекомендовано
методическим советом Уральского федерального университета
в качестве учебного пособия для студентов вуза, обучающихся 
по направлениям подготовки 01.03.01 «Математика»,  
01.03.03 «Механика и математическое моделирование»,  
02.03.01 «Математика и компьютерные науки»,  
02.03.02 «Фундаментальная информатика  
и информационные технологии»

УДК 004.43(075.8)
 
С604

Ре це нз е н т ы:
кафедра прикладной математики и технической графики  
Уральского государственного архитектурно-художественного 
университета (заведующий кафедрой доктор  
физико-математических наук, профессор С. С. Титов);
А. В. Созыкин, кандидат технических наук, заведующий отделом 
вычислительной техники Института математики и механики 
им. Н. Н. Красовского УрО РАН

Нау чный р еда к то р
доктор физико-математических наук, профессор В. Г. Пименов 
(Уральский федеральный университет)

ISBN 978-5-7996-2410-1 
© Уральский федеральный университет, 2018

C604
Солодушкин, С. И.
Web и DHTML : учеб. пособие / С. И. Солодушкин, И. Ф. Юманова ; [науч. ред. В. Г. Пименов] ; М-во образования и науки Рос. 
Федерации, Урал. федер. ун-т. — Екатеринбург : Изд-во Урал. 
ун-та, 2018. — 128 с.

ISBN 978-5-7996-2410-1

Рассматриваются вопросы использования языка разметки гипертекста HTML и каскадных таблиц стилей CSS для верстки веб-страниц. 
Основное внимание уделяется подробному разбору сложных теоретических правил верстки. Излагаются формальные правила вычисления 
размеров и положения элементов на странице. Анализируются методы 
разработки адаптивных веб-страниц.
Для студентов, специализирующихся в области прикладной информатики, компьютерных наук и занимающихся разработкой программного обеспечения.
УДК 004.43(075.8)

ОГЛАВЛЕНИЕ

Предисловие 
5

Глава 1. Основные понятия и история языков разметки 
6
1.1. Введение. Определение Интернета и его служб 
6
1.2. Понятие гипертекста 
10
1.3. Понятие разметки. История языков разметки 
11
1.4. Составные элементы html-документа и его структура 
22
1.5. Doctype и режимы работы браузера 
23
1.6. Тег html, атрибут manifest 
28
Контрольные вопросы 
30

Глава 2. Каскадные таблицы стилей 
31
2.1. Cascading Style Sheets 
31
2.2. Элемент STYLE 
33
2.3. Включение таблиц стилей в документ 
34
2.4. Исторический обзор 
36
2.5. Синтаксис CSS 
38
2.6. Иерархия элементов в html-документе 
41
2.7. Селекторы CSS 
42
2.8. Наследование в CSS 
48
2.9. Каскадирование 
50
2.10. Специфичность 
51
2.11. Вычисление значения свойств 
52

Контрольные вопросы 
53

Глава 3. Блочная верстка: блочные и строчные элементы, 
позиционирование 
55
3.1. Объемлющий прямоугольник 
56
3.2. Блочные и строчные элементы 
61
3.3. Три схемы позиционирования 
62
3.4. Блочные и строчные элементы и боксы 
63
3.5. Позиционирование и поток 
69
Контрольные вопросы 
76

Глава 4. Блочная верстка: плавающие элементы, визуализация 
77
4.1. Плавающие элементы: основные свойства 
77
4.2. Свойство clear 
83
4.3. О связи между positioning, float и display 
87
4.4. Замечание о лайн-боксах 
89
4.5. Вычисление ширины элемента: свойство width 
90
4.6. Вычисление ширины элемента: примеры 
94
Контрольные вопросы 
96

Глава 5. Разработка программных комплексов  
для мобильных устройств. Адаптивный веб-дизайн 
97
5.1. Пиксели устройств, референсные пиксели и CSS-пиксели 
97
5.2. Размеры экрана и окна 
103
5.3. Ширина в процентах и viewport 
103
5.4. Два вьюпорта: истоки проблемы 
107
5.5. Метатег viewport 
111
5.6. Адаптивный веб-дизайн 
114
5.7. Некоторые преимущества, которые дает  
адаптивный веб-дизайн 
125
Контрольные вопросы 
126

Список рекомендуемой литературы 
127

ПРЕДИСЛОВИЕ

Учебное пособие «Web и DHTML» написано авторами на основе опыта чтения одноименного курса в Уральском федеральном 
университете. Цель курса — знакомство с основными понятиями 
верстки веб-страниц, как то: языки разметки, формальный синтаксис CSS, блочная модель, поток верстки, визуализация элементов 
и вычисление их размеров, схемы позиционирования, адаптивный 
дизайн.
Учебное пособие призвано помочь студентам в освоении курса 
«Web и DHTML» и отражает его структуру. Пособие разбито на 
главы. Каждая глава соответствует рассматриваемой на занятиях 
теме и содержит необходимые теоретические сведения, примеры, 
всесторонне иллюстрирующие теорию, и иногда листинги программ. 
Кроме того, в конце глав приводятся вопросы для самоконтроля.
При подготовке учебного пособия авторы в основном обращались к первоисточникам, т. е. к официальным стандартам и документации.

Глава 1 
ОСНОВНЫЕ ПОНЯТИЯ  
И ИСТОРИЯ ЯЗЫКОВ РАЗМЕТКИ

Чтобы изучать курс «Веб», необходимо знать некоторые базовые 
определения, составить тезаурус по теме. Этому посвящена первая 
часть главы. Далее мы покажем, что основной контент, который 
отдает веб-сервер клиенту, — это html-документы, т. е. документы, 
написанные на языке гипертекстовой разметки. Соответственно, 
мы введем понятия разметки и языков разметки. Этому посвящена 
вторая часть главы.
После краткого исторического обзора и введения базовых понятий мы приступим к непосредственному изучению языка HTML, 
и начнем со структуры html-документа и режима работы браузера.

1.1. Введение. Определение Интернета и его служб

Следует сразу сказать, что веб и Интернет — это не одно и то же. 
Соответственно, будем вводить понятия, начиная с самых базовых, 
а именно с Интернета. При этом мы соблюдем хронологический 
порядок — Интернет появился до веба.
Чтобы ответить на вопрос «Что такое Интернет?», рассмотрим 
рис. 1. Это частичная карта Интернета, основанная на данных сайта 
www.opte.org/maps от 15 января 2005 г. Каждая линия соединяет 
два хоста, т. е. компьютера с маршрутизируемыми IP-адресами. 
Длина линии показывает временную задержку (время пинга) между 

узлами. Карта представляет менее 30 % сетей класса C, доступных 
для сбора данных в 2005 г.; сегодня Интернет еще более сложный.
Рассмотрим выносной рисунок, показывающий в увеличенном 
масштабе скопление компьютеров внизу основного рисунка. Это 
компьютерная сеть, соединенная с остальным Интернетом внешним 
линком. Таким образом мы приходим к идее, что Интернет — это 
объединение компьютерных сетей. Более формально, Интернет — 
всемирная система объединенных компьютерных сетей, построенная на базе стека протоколов TCP/IP и маршрутизации пакетов 
данных. Таким образом, по сути, Интернет — это сеть сетей.

Рис. 1. Частичная карта Интернета  
и отдельная сеть в увеличенном масштабе

Компьютерная сеть — это набор связанных между собой автономных компьютеров и/или компьютерного оборудования (серверы, маршрутизаторы и другое оборудование).
Благодаря использованию различных сетевых протоколов 
Интернет может обеспечить выполнение двух основных функций: 
1) быть средством общения между удаленными пользователями 
и 2) быть средством доступа к общим информационным ресурсам, 
размещенным в Сети. Очевидно, что каждая из этих функций может 
быть реализована с помощью различных средств, что обеспечивает 
многообразие услуг, предоставляемых пользователям Интернета. 
Средства обеспечения определенных услуг для пользователей 
Интернета принято называть службами Интернета.
В обиходе слово «Интернет» часто употребляют как синоним 
«Всемирной паутины» и доступной в ней информации (т. е. службы 
веб и ее ресурсов), специалист, однако, должен понимать принципиальную разницу. Интернет является инфраструктурой для служб 
Интернета, предоставляя последним средства передачи данных 
(например, провода и протоколы нижних уровней, ответственных 
за надежную доставку данных). Следует сразу отметить, что веб не 
единственная служба Интернета; в Интернете существует большое 
количество сервисов, обеспечивающих работу со всем спектром 
ресурсов. Наиболее известными среди служб Интернета являются 
следующие:
1) World Wide Web (WWW, W3), или служба веб;
2) электронная почта (e-mail);
3) сервис DNS, или система доменных имен;
4) сервис FTP и BitTorrent, система файловых архивов;
5) сервис Telnet, предназначенный для управления удаленными 
компьютерами.
В настоящем учебном пособии подробно будет рассмотрена 
служба веб, работа веб-серверов и клиентов, способы и средства 
создания веб-сайтов.
Служба веб (англ. World Wide Web — всемирная паутина) — 
работающая по протоколу HTTP распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.

Приведем выдержку из документации (http://www.w3.org/TR/
html401/intro/ intro.html):
The World Wide Web is a network of information resources. The Web 
relies on three mechanisms to make these resources readily available to 
the widest possible audience:
• A uniform naming scheme for locating resources on the Web.
• Protocols, for access to named resources over the Web.
• Hypertext, for easy navigation among resources.
The ties between the three mechanisms are apparent throughout this 
specification.
В переводе данное определение звучит следующим образом. 
Служба веб — это сеть информационных ресурсов. Работа службы 
веб основана на трех механизмах, которые позволяют сделать эти 
ресурсы доступными максимально широкой аудитории:
• адресация с использованием URL (англ. Uniform Resource 
Locator),
• протокол для доступа к именованным ресурсам,
• гипертекст для легкой навигации между ресурсами.
Напомним, что HTTP (англ. HyperText Transfer Protocol — протокол передачи гипертекста) — протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов 
в формате HTML, в настоящий момент используется для передачи 
произвольных данных). Основой HTTP является технология клиент‒сервер, т. е. предполагается существование:
• клиентов, которые инициируют соединение и посылают запрос;
• серверов, которые ожидают соединения для получения запроса, производят необходимые действия и возвращают обратно 
сообщение с результатом.
Считается, что читатели знакомы с протоколом HTTP. Подробно 
ознакомиться с протоколом HTTP можно в учебном пособии 
С. И. Солодушкина, И. Ф. Юмановой «Разработка программных 
комплексов на базе протокола HTTP».

1.2. Понятие гипертекста

Что такое гипертекст, передачей которого занимается протокол HTTP? Говоря простым языком, гипертекст — это совокупность документов, содержащих текстовую, аудио- и видеоинформацию и связанных между собой взаимными ссылками 
в единый текст.
HTML (англ. HyperText Markup Language) — это язык, принятый 
в World Wide Web для создания и публикации веб-страниц. HTML 
предоставляет авторам средства для:
• форматирования текста, т. е. включения в веб-документы 
заголовков, текста, таблиц, списков, фотографий и т. п.;
• вставки гиперссылок для перехода к другим веб-страницам 
посредством щелчка кнопки мыши по гиперссылке;
• создания и заполнения форм для транзакций с удаленными 
службами, например, для поиска информации, бронирования 
билетов, оформления заказов на товары и т. п.;
• непосредственного включения в веб-документы видео, звука 
и других внешних объектов.
Фактически современная веб-страница формируется с помощью 
трех языковых средств:
• язык HTML используется для задания логической структуры 
документа (заголовки, абзацы, графические изображения 
и прочие объекты);
• язык каскадных стилей CSS используется для задания способа 
отображения документа (цвета текста и фона, шрифты, способы выравнивания и позиционирования отдельных объектов 
на странице и т. п.);
• языки программирования сценариев (чаще всего JavaScript) 
используются для написания сценариев, т. е. небольших 
программ, которые исполняются обозревателем в процессе 
отображения документа и обеспечивают его динамическое 
изменение в ответ на различные события.
При этом именно html-документ является той средой, в которой 
размещаются остальные компоненты веб-страницы.