Основы интернет-технологий: HTML, CSS, JavaScript, XML

С.А. Сакулин
Основы интернет-технологий:
HTML, CSS, JavaScript, XML
Учебное пособие

УДК 004.43
ББК 32.973-081.1
          С15
Издание доступно в электронном виде на портале ebooks.bmstu.ru 
по адресу: http://ebooks.bmstu.ru/catalog/312/book1683.html
Факультет «Информатика и системы управления»
Кафедра «Информационные системы и телекоммуникации»
Рекомендовано 
Редакционно-издательским советом МГТУ им. Н.Э. Баумана 
в качестве учебного пособия
С15
Сакулин, С. А.
Основы интернет-технологий : HTML, CSS, JavaScript, XML : учебное 
пособие / С. А. Сакулин. — Москва : Издательство МГТУ им. Н. Э. Баумана, 
2017. — 110, [2] с. : ил.
ISBN 978-5-7038-4724-4
Раскрыты основы гипертекстовой технологии, в частности протокола 
HTTP
, указателя ресурсов URL, концепции Всемирной паутины. Рассмотрены технология HTML для публикации документов и способы ее применения, 
теги, элементы, атрибуты, приемы использования таблиц, гиперссылок, 
списков, способы задания цветов и шрифтов. Раскрыты особенности работы с изображениями в форматах JPEG, GIF
, PNG. Даны общие сведения о 
языке стилевой разметки CSS, приведены примеры оформления страниц в 
сети Интернет, основы языка сценариев JavaScript. Рассмотрены особенности документов XML с использованием DTD, XSLT
, X-PATH.
Для студентов, изучающих дисциплину «Лабораторно-вычислительная 
практика по интернет-технологиям».
УДК 004.43
ББК 32.973-018.1
©	
МГТУ им. Н.Э. Баумана, 2017
©	
Оформление. Издательство 
	 МГТУ им. Н.Э.Баумана, 2017
ISBN 978-5-7038-4724-4

Предисловие
Цель учебного пособия — помочь учащимся в освоении дисциплины «Лабораторно-вычислительная практика по интернет-технологиям».
В процессе изучения дисциплины «Лабораторно-вычислительная практика по интернет-технологиям» с помощью данного учебного пособия студенты будут знать
•
• принципы работы программ-браузеров, организации гипертекстовой информации, разработки HTML-страниц, правила и приемы их разработки; 
•
• основные компоненты динамического HTML, правила и приемы работы с ним; 
•
• принципы применения JavaScript, правила и приемы создания XMLдокументов, концептуальные цели XML;
уметь 
•
• применять программу-браузер и использовать системы поиска информации для работы в сети Интернет; 
•
• использовать HTML для разработки графического интерфейса, создавать 
документы, используя динамический HTML; 
•
• применять JavaScript для создания Web-приложений, создавать и отображать XML-документы в Web-браузере;
а также овладеют навыками 
•
• поиска информации в сети Интернет, форматирования HTML-документов 
и использования динамического HTML; 
•
• создания ссылок на документы и файлы, Web-приложений с применением JavaScript и корректно сформированных XML-документов.

Введение
Сеть Интернет прочно вошла в жизнь людей и с каждым годом затрагивает новые сферы деятельности человека. В частности, если раньше для принятия какого-либо решения (например, выбора места для проведения отпуска, поиска недвижимости для покупки, метода лечения того или иного 
заболевания и т. п.) человек полагался, как правило, на личный опыт и на 
информацию, взятую из различных печатных источников, а также опыт знакомых, то в настоящее время основным источником такой информации стала Сеть. 
В Сети можно найти как веб-страницы, содержащие информацию экспертов разной степени компетентности, так и большое количество печатных 
источников различного качества. Интернет-технологии — это совокупность 
методов и средств обработки информации в Сети. Они включают в себя технологии поиска, представления и передачи информации. Иначе говоря, к 
интернет-технологиям можно отнести весь набор инструментов, с помощью 
которых люди работают в Сети, в их числе различные сайты, блоги, форумы, 
получившие большую популярность в последнее время социальные сети, 
торрент-трекеры и т. п. В основе перечисленных инструментов лежат более 
универсальные технологии, такие как, например, гипертекст, Всемирная паутина, протокол передачи гипертекста. 	
Увеличение размеров документов, оформленных с помощью языка разметки HTML, влечет за собой увеличение объема служебной информации. 
В частности, растет число атрибутов элементов документа. Рост числа атрибутов приводит к значительным временным затратам при создании документа и особенно при необходимости изменения стилей этого документа. Кроме 
того, при большом количестве редактируемых атрибутов увеличивается вероятность ошибок в процессе определения их значений. Для устранения этого неудобства был создан язык стилевой разметки CSS. 
Публикуемые в Сети документы, которые созданы лишь с применением 
языка разметки HTML и языка стилевой разметки CSS, не позволяют реализовать какие-либо вычислительные процедуры на стороне браузера. Иначе говоря, при необходимости реализации вычислений компьютер пользователя всякий раз должен посылать запрос на сервер, где эти вычисления 
будут проведены, после чего сервер отправит на компьютер пользователя 
результат. Это неудобно, поскольку растет нагрузка на сервер и увеличивается объем трафика в сетях. Для устранения описанного неудобства был разработан язык сценариев JavaScript, позволяющий проводить вычисления на 
стороне браузера без отправки запросов на сервер. 
4

Язык разметки XML используется для представления структурированных 
данных. Под данными здесь понимается не только текст или гипертекст, но 
и изображения, видео, исполняемые программы и т. д. Классическим примером языка разметки является HTML, который применяется для разметки 
документов, отображаемых в браузерах. Однако язык HTML не универсален, 
он малопригоден для целей, не связанных с отображением содержимого сайта в браузере. Для решения этой проблемы был разработан универсальный 
язык разметки XML. Среди других подобных языков он получил наиболее 
широкое распространение и в настоящее время используется повсеместно, 
фактически став общепринятым стандартом. 
Большое количество применений во многих предметных областях (бытовых, промышленных, бизнес-приложениях и др.) сделало XML самым используемым при обмене данными между приложениями на предприятиях, 
 
в электронной коммерции, при необходимости получения различных представлений одних и тех же данных на разных устройствах. Характерным примером здесь может служить применение XML в Microsoft Word. Файлы 
Microsoft Word, имеющие расширение .docx, представляют собой архивы в 
формате zip. В этих архивах, помимо всего прочего, содержатся файлы в формате XML, в которых хранится информация о документе, в том числе и само 
его содержание.
Изложение материала в учебном пособии организовано следующим образом.
Первая глава посвящена общим вопросам, относящимся к концепции 
Всемирной паутины, протоколу HTTP
, истории возникновения и развития 
сети Интернет.
Во второй главе рассмотрены публикации документов в Сети с использованием языка разметки HTML на основе этих технологий и некоторые 
связанные с этим практические вопросы. 
Третья глава содержит вопросы, связанные с публикацией документов 
 
в Сети с использованием языка стилевой разметки CSS совместно с HTML. 
В частности, благодаря наличию примеров реализации различных необходимых пользователям функций учебное пособие поможет студентам быстро 
овладеть основными средствами языка стилевой разметки CSS. 
В четвертой главе рассмотрены вопросы, связанные с применением языка JavaScript совместно с HTML для реализации требуемых пользователям 
вычислений. Наличие примеров реализации различных пользовательских 
сценариев поможет студентам быстро овладеть основными средствами языка сценариев JavaScript.
Пятая глава посвящена основам языка XML и его применению. В частности, наличие примеров реализации документов в XML, а также схем XML 
поможет студентам быстро овладеть основными средствами языка XML.

Глава 1. Основы гипертекстовой технологии
1.1. Концепция гипертекста
В основе большинства интернет-технологий лежит концепция гипертекста американского инженера Ванневара Буша. В июле 1945 г. он опубликовал 
свое эссе As We May Think («Как мы можем думать») [10], в котором описал 
гипотетическую машину «Мемекс», работающую на основе принципов гипертекста, и предложил с помощью этой машины организовать работу инженеров и ученых с научно-технической информацией. Однако в то время 
не были в достаточной степени развиты технические средства (компьютеры 
и компьютерные сети), поэтому его идея получила развитие только спустя 
несколько десятилетий.
Термин «гипертекст», предложенный Тедом Нельсоном в 1965 г., означает «нечто большее, чем просто текст», т. е. набор текстов с возможностью 
перехода между ними по ссылкам, что позволяет читателю определять последовательность чтения текстов или выбирать необходимую информацию. 
1.2. Всемирная паутина
По мере совершенствования технологий производства компьютеров и с 
ростом компьютерных сетей стало возможным реализовать идею гипертекстовых систем в глобальном масштабе. Тим Бернарс Ли в 1989 г. предложил 
проект Всемирной паутины (World Wide Web, www), который предусматривал 
публикацию множества гипертекстовых документов для облегчения поиска 
и систематизации информации. Был разработан протокол передачи гипертекста в сети HTTP (HyperText Transfer Protocol), универсальный указатель 
ресурсов URL (Uniform Resource Locator) и язык разметки гипертекста HTML 
(HyperText Markup Language). Г
ипертекстовые документы при этом предлагалось хранить на веб-сервере, а для их просмотра с удаленных компьютеровклиентов использовать специальную программу — веб-браузер. Каждый из 
этих документов имел уникальный адрес, например, http://technomag.bmstu.ru/ 
doc/836064.html. Браузер выполнял функцию преобразования документа из 
формата HTML и отображения этого документа в удобном для пользователя 
виде. Эти технологии легли в основу развития Всемирной паутины, а для 
координации развития ее стандартов был создан Консорциум Всемирной 
паутины (World Wide Web Consortium, W3C) [15]. 
Перспективы дальнейшего развития Всемирной паутины во многом связаны с переходом к профессиональной работе с контентом. Во-первых, пред6

лагается привлекать профессионалов для проверки фактов, содержащихся в 
выкладываемой пользователями информации, ее редактирования и фильтрации. Во-вторых, большой потенциал развития Всемирной паутины скрыт во 
внедрении семантической паутины. Отметим, что сдерживающим фактором 
развития концепции семантической паутины служит необходимость получения метаданных для каждой веб-страницы. Решение этой проблемы позволит реализовать семантический поиск, представляющий собой усовершенствование обычного полнотекстового поиска в смысле приближения к 
модели поискового запроса на обычном естественном языке.
1.3. Протокол HTTP и указатель ресурсов URL
Протокол передачи гипертекста относится к уровню приложений (следует за транспортным уровнем в модели TCP/IP) наряду с такими протоколами, как, например, FTP и SMTP
. HTTP предполагает использование технологии «клиент — сервер» и работу по схеме «запрос — ответ». Приложение 
с удаленного компьютера (браузер) инициирует соединение с веб-сервером 
и посылает запрос на сервер с указанием требуемого ресурса и способа его 
представления (формат, кодировка, язык и т. д.). После этого веб-сервер в 
ответном сообщении возвращает запрошенный ресурс в виде текста с разметкой HTML. Для просмотра в браузере исходного текста страницы можно 
выбрать пункт меню «исходный код страницы» или нажать комбинацию 
горячих клавиш (Ctrl-U). После получения исходного текста браузер анализирует его, при необходимости отправляет запросы на получение недостающей информации (например, изображений в тексте). Затем, получив необходимые дополнительные данные, отображает окончательный вид 
документа.
Протокол передачи гипертекста HTTP является открытым, т. е. информация при передаче между компьютерами в Сети может быть перехвачена и 
прочитана злоумышленниками. Для того чтобы этого не произошло, применяют протокол HTTPS (HyperText Transfer Protocol Secure), который позволяет шифровать передаваемую информацию. Его применяют, например, 
для работы с почтовыми серверами. Практически любой ресурс в Сети, связанный с получением и передачей конфиденциальной информации, использует этот протокол. Особенно важно шифровать информацию, касающуюся 
финансов (например, банковские операции), различные платежные системы 
также могут использовать для работы HTTPS.
Как уже было сказано, любой документ в Сети имеет уникальный адрес. 
Если переслать такой адрес по электронной почте, получатель, скопировав 
его в адресную строку браузера, увидит тот же документ. Такой адрес явно 
указывает на место расположения документа (на сайт и на путь к документу 
на этом сайте), отображается в адресной строке браузера и представляет собой текстовую запись в формате универсального указателя ресурсов URL 
(Uniform Resource Locator). 
7

Веб-сайт — это совокупность документов на каком-либо ресурсе в Сети, 
количество которых в принципе не ограничено. Например, домашняя страница пользователя может состоять всего из нескольких документов, а поисковая система содержит несоизмеримо большее количество документов.
Контрольные вопросы
1. В чем состоит основной смысл концепции гипертекста?
2. Кто предложил концепцию гипертекста и участвовал в ее развитии?
3. Что представляет собой Всемирная паутина, каковы основные направления ее 
развития?
4. Для каких целей разработан протокол передачи гипертекста HTTP?
5. Каковы основные функции протокола HTTPS?
6. Для чего служит универсальный указатель ресурсов URL?
7. Что представляет собой веб-сайт?

Глава 2. Применение технологии HTML  
для публикации документов
2.1. Язык разметки HTML
С момента своего появления язык HTML постоянно развивался. Вместе 
с ним совершенствуются и браузеры — программы, предназначенные для 
просмотра HTML-документов. В середине 90-х гг. XX в. возникла ситуация, 
при которой разработчики стандартов перестали успевать за быстро появляющимися новшествами, постоянно внедряемыми производителями браузеров.
В конце 1990-х гг. стали один за другим появляться стандарты языка 
HTML. В январе 1997 г. вышел стандарт HTML 3.2, в декабре того же года 
появился стандарт HTML 4.0, в 1999 г. — версия HTML 4.01. На 2017 г. актуальной версией является HTML 5.0.
Текстовые файлы с разметкой HTML имеют расширение *.html или 
 
*.htm. В соответствии с настройками операционной системы файлы с таким расширением открывает браузер. В современных операционных системах, как правило, есть встроенный браузер, например Internet Explorer в 
Windows. 
2.2. Текстовые редакторы для создания документов HTML  
и справочная информация
Создавать документы в формате HTML можно практически в любом текстовом редакторе, например в блокноте. Но более удобным в использовании 
является специализированный редактор Notepad++, который можно бесплатно загрузить с сайта notepad-plus-plus.org (для Windows) [14].
При использовании компьютера Macintosh в качестве текстового редактора 
можно применять, например, редактор KomodoEdit [13].
Справочную информацию о языке HTML можно найти в Интернете, в 
частности, на сайте организации W3C по адресу w3.org (информация представлена на английском языке). Также существует множество ресурсов на 
русском языке, например htmlbook.ru. Кроме того, в русскоязычном сегменте сети Интернет есть множество рекомендаций по работе с HTML. Так, 
набрав в поисковой системе, например, «как сделать таблицу в html», можно 
получить несколько ссылок на полезные ресурсы. Несмотря на обилие русскоязычных сайтов, предпочтительнее использовать первоисточник на английском языке, поскольку переводы могут содержать различные ошибки. 
9

2.3. Структура документа в HTML
Г
ипертекст в языке разметки HTML представлен в виде структуры на основе тегов. Тег — это элемент языка разметки гипертекста (от англ. tag — 
ярлык, этикетка, бирка, метить), который заключается в угловые скобки 
(<тег>). Различают следующие виды тегов: открывающие вида <тег>, закрывающие вида </тег> и одиночные вида <тег>. Теги используются для 
разметки документа при его отображении пользователю, браузер их не отображает. 
Элементы — это содержимое документа, которое либо отображается браузером, либо используется в качестве служебной информации. Элемент расположен между открывающим и закрывающим тегами. Кроме того, они могут 
соответствовать и одиночным тегам. В случае одиночного тега элемент является пустым, т. е. не имеет содержания и несет только служебную информацию.
На сайте Консорциума W3C есть спецификация элементов и соответствующих им тегов. Для того чтобы ее открыть, можно воспользоваться системой 
поиска сайта w3.org, набрав HTML, и получить в результате спецификацию 
текущей версии языка HTML.
Язык HTML не зависит от регистра, значит, теги можно писать как прописными, так и строчными буквами. Но в дальнейшем, по мере того как язык 
будет развиваться, предполагается обязательным написание тегов в нижнем 
регистре. 
Комментарии отделяются символами восклицания и двумя дефисами следующим образом: <!--комментарий-->.
Атрибуты элементов необходимы для задания параметров этих элементов. У атрибута есть название и значение, которое в соответствии с синтаксисом обрамляется кавычками.
Приведем пример документа HTML, в котором проиллюстрированы концепции тегов, элементов и их атрибутов.
Пример 2.1:
<html>
<head>
<title>Пример документа HTML</title>
</head>
<hr color="#000000" size="5">
<!--горизонтальная линия черного цвета-->
<body>
<h1>документ HTML</h1>
<hr>
<p>Первая HTML страница</p>
</body>
</html>
В этом примере теги <html> </html> указывают на то, что это документ 
HTML, теги <head> </head> обозначают место, где помещается различная 
информация, не отображающаяся в теле документа. Здесь же расположены 
10