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-документ является той средой, в которой 
размещаются остальные компоненты веб-страницы.

Приведем пример простейшего html-документа:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html> 
 
<head> 
 
 
<title>Мой первый документ</title> 
 
</head> 
 
<body> 
 
 
<p>Это html-документ.</p> 
 
</body> 
</html>

Здесь наряду с информацией для пользователя типа «Это 
html-документ» есть управляющие конструкции, так называемые 
теги, они заключены в угловые скобки.

1.3. Понятие разметки. История языков разметки

Первоначально HTML был разработан приблизительно в 1986–
1991 гг. Тимом Бернерсом-Ли (англ. Tim Berners-Lee) и его коллегами 
из CERN Laboratories (Швейцария) для обмена текстовыми доку-
ментами и другими данными между учеными. Одновременно с этим 
Т. Бернерс-Ли разрабатывает протокол HTTP. Для того чтобы стать 
стандартом, протокол должен иметь не менее двух независимых 
реализаций, первую написал в 1990 г. сам Т. Бернерс-Ли.
22 апреля 1993 г. вышел браузер Mosaic, авторы которого доба-
вили к нему поддержку графических образов и ряд других полезных 
качеств; благодаря Mosaic протокол HTTP стал популярным.
Быстрое развитие Сети в 90-е гг. потребовало стандартизации 
этого языка, и 22 сентября 1995 г. под эгидой IETF был создан 
HTML 2.0. Официальной спецификации HTML 1.0 не существует. 
До 1995 г. разработчики ранних браузеров выпускали свои корпоративные 
стандарты, чтобы официальная версия отличалась от них, 
ей сразу присвоили второй номер.

Версия 3, предложенная Консорциумом Всемирной паутины 
(W3C), обеспечивала много новых возможностей, таких как создание 
таблиц, «обтекание» изображений текстом и отображение сложных 
математических формул, поддержка gif-формата. Даже при том, 
что этот стандарт был совместим со второй версией, реализация его 
была сложна для браузеров того времени. Версия 3.1 официально 
никогда не предлагалась, и следующей версией стандарта HTML 
стала 3.2, в которой были опущены многие нововведения версии 
3.0, но добавлены нестандартные элементы, поддерживаемые браузерами 
Netscape Navigator и Mosaic.
Наконец, в декабре 1997 г. появился HTML 4.0, который является 
в настоящее время действующим стандартом языка (в уточненной 
редакции HTML 4.01, опубликованной в декабре 1999 г.). В версии 
HTML 4.0 произошла некоторая «очистка» стандарта. Многие эле-
менты были отмечены как устаревшие и нерекомендуемые (англ. 
deprecated). В частности, элемент font, используемый для изменения 
свойств шрифта, был помечен как устаревший (вместо него реко-
мендуется использовать таблицы стилей CSS).
Мертвой веткой является XHTML, однако сказать о ней стоит. 
В 1998 г. Консорциум Всемирной паутины начал работу над новым 
языком разметки, основанным на HTML 4, но соответствующим 
синтаксису XML. Впоследствии новый язык получил название 
XHTML. Первая версия XHTML 1.0 одобрена в качестве рекомен-
дации Консорциумом Всемирной паутины 26 января 2000 г.
Планируемая версия XHTML 2.0 должна была разорвать совме-
стимость со старыми версиями HTML и XHTML, но 2 июля 2009 г. 
W3C объявил, что полномочия рабочей группы XHTML2 истекают 
в конце 2009 г. Таким образом, была приостановлена вся дальнейшая 
разработка стандарта XHTML 2.0. Ресурсы рабочей группы были 
направлены на развитие HTML 5.
Стандарт HTML 5 был принят 28 октября 2014 г.
Итак, мы рассмотрели язык гипертекстовой разметки, обобщен-
ный язык разметки… А что же такое «разметка»?
Язык разметки — набор символов или последовательностей, 
вставляемых в текст для передачи информации о его выводе или 
строении. Текстовый документ, написанный с использованием языка