Web-технологии

Министерство культуры Российской Федерации 
ФГБОУ ВО «Кемеровский государственный институт культуры» 
Факультет информационных и библиотечных технологий 
Кафедра технологии автоматизированной обработки информации 
 
 
  
 
 
Е. Н. Малышева 
 
 
 
 
WEB-ТЕХНОЛОГИИ 
 
Учебное пособие 
 
Направления подготовки:  
51.03.06 «Библиотечно-информационная деятельность»,  
46.03.02 «Документоведение и архивоведение»  
 
 
 
 
 
Квалификация (степень) выпускника 
«бакалавр» 
 
 
 
 
 
 
 
 
Кемерово 2018 

УДК 004.4(075.8) 
ББК 32.973.202-018.2я73 
       М20 
 
Утверждено на заседании кафедры технологии автоматизированной 
обработки информации 17.04.2018 г., протокол № 10. 
 
Рекомендовано к изданию учебно-методическим советом факультета 
информационных и библиотечных технологий КемГИК 
18.04.2018 г., протокол № 4. 
 
Рецензенты: 
О. В. Петунин, д-р пед. наук, профессор, заведующий кафедрой естественно-научных и математических дисциплин ГОУ ДПО (ПК) С «Кузбасский региональный институт повышения квалификации и переподготовки 
работников образования»; 
В. Н. Борздун, канд. хим. наук, доцент, начальник управления информатизации ФГБОУ ВО «Кемеровский государственный институт культуры»  
 
Малышева, Е. Н. 
М20     Web-технологии [Текст]: учеб. пособие для обучающихся по 
направлениям подготовки 51.03.06 «Библиотечно-информационная 
деятельность», 46.03.20 «Документоведение и архивоведение», квалификация (степень) выпускника «бакалавр» / Е. Н. Малышева. – Кеме- 
рово: Кемеров. гос. ин-т культуры, 2018. – 116 с.  
 
ISBN 978-5-8154-0449-6 
 
 
В учебном пособии рассматриваются вопросы, связанные с созданием webдокументов средствами языка гипертекстовой разметки HTML и в среде программы 
Adobe Dreamweaver. В пособии приведены основные понятия и виды web-технологий, 
сведения об их использовании в архивах, музеях, библиотеках, общие сведения о языках 
разметки; дано описание технологии работы с текстом, изображениями, таблицами, формами, управления внешним видом документа с помощью каскадных таблиц 
стилей как средствами HTML, так и в программе Adobe Dreamweaver.  
Предназначено для студентов, обучающихся по направлениям подготовки 
51.03.06 «Библиотечно-информационная деятельность», 46.03.02 «Документоведение и 
архивоведение», квалификация (степень) выпускника «бакалавр». Оно может быть 
также использовано студентами других направлений подготовки, изучающими дисциплины, формирующие знания и умения в области создания электронных информационных 
ресурсов.  

 
УДК 004.4(075.8) 
ББК 32.973.202-018.2я73 
 
 
 
ISBN 978-5-8154-0449-6  
 
© Е. Н. Малышева, 2018 
© Кемеровский государственный институт 
культуры, 2018 

ВВЕДЕНИЕ 

Появление и развитие web-пространства стало одним из основных 

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

В настоящее время сотрудники библиотек, архивов, музеев осозна
ют важность создания и развития виртуального информационного пространства.  

Взаимодействие пользователей, поиск и обработка информации в 

web-пространстве осуществляются с помощью web-технологий. Базовым 
компонентом этих технологий является язык разметки гипертекста 
HTML. С его помощью осуществляется структурирование и форматирование информации на web-странице.  
В настоящее время широкое распространение получили современные средства создания web-документов, позволяющие осуществлять их 
визуальное проектирование и автоматически генерирующие HTML-код – 
HTML-редакторы.  

Для полного понимания принципов создания web-документов и их 

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

Гипертекстовые технологии базируются на языке HTML, поэтому 

изучение его основ является необходимым условием для создания электронных информационных ресурсов, которые будут доступны пользователям web-пространства.  
Компетенции, сформированные в ходе изучения дисциплины «Webтехнологии», необходимы студентам для создания собственных электронных информационных ресурсов.  
Именно это обусловило необходимость включения в вариативную 
часть учебных планов направлений подготовки 51.03.06 «Библиотечноинформационная деятельность», 46.03.02 «Документоведение и архивоведение», дисциплины «Web-технологии».  
Целью освоения учебной дисциплины «Web-технологии» является 
формирование у студентов представлений о web-технологиях, а также 
практических умений создания web-документов.  
Изучение дисциплины направлено на приобретение  обучающимися 
направлений подготовки 51.03.06 «Библиотечно-информационная дея

тельность», 46.03.02 «Документоведение и архивоведение» следующих 
общекультурных и общепрофессиональных компетенций: 
 способность к использованию основных методов, способов и 
средств получения, хранения, переработки информации; 
 владение базовыми знаниями в области информационных технологий, используемых в библиотечно-информационной деятельности, в 
управлении документами, системами электронного документооборота.  
В результате освоения дисциплины студенты должен демонстрировать следующие результаты обучения: 
знать: 
 основные понятия, виды web-технологий; 
 историю развития языков разметки; 
 базовые конструкции гипертекстового языка разметки; 
 элементы интерфейса, возможности программы Adobe 
Dreamweaver;  
 существующие и перспективные области применения языков 
разметки;  
уметь: 
 создавать web-документы с помощью языка HTML и программы 
Adobe Dreamweaver; 
 использовать базовые конструкции гипертекстового языка разметки в своей учебной и профессиональной деятельности; 
владеть: 
 приемами использования базовых элементов языка гипертекстовой разметки; 
 навыками создания и эксплуатации web-документов средствами 
языка HTML и программы Adobe Dreamweaver.  
Содержание учебного пособия соответствует рабочей программе 
дисциплины. Часть вопросов, не вошедших в учебное пособие, рассматривается при выполнении лабораторных работ, а также в ходе самостоятельной работы студентов.  

Особенностью данного учебного пособия является его практическая 

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

ми. В первой главе даются основные понятия, виды web-технологий, их 
использование в институтах памяти, представление о языках разметки, 
истории их возникновения, базовых элементах HTML, принципах гипертекстовой разметки. Вторая глава посвящена освоению технологий создания web-документов средствами языка HTML. Третья глава посвящена 
рассмотрению возможностей программы Adobe Dreamweaver и основных 
приемов работы с ней. Изложение каждой главы завершается кратким 
подведением итогов, перечнем вопросов для самоконтроля, практическими заданиями. Для более глубокого изучения материалов, рассматриваемых в учебном пособии, приводится список литературы. Глоссарий содержит основные термины, используемые в учебном пособии.  
Для выполнения практических заданий по первой и второй главам 
необходим любой браузер и текстовый редактор (например, Блокнот), по 
третьей главе – программа Adobe Dreamweaver.  
 
Используемые в учебном пособии обозначения 

 
Элементы оформления учебного пособия способствуют быстрому 
поиску нужной информации.  
Названия панелей инструментов, диалоговых окон, кнопок, меню 
(т. е. все элементы интерфейса) выделены полужирным начертанием. Определения терминов, дополнительная информация, практические задания 
выделяются рамками.  
Также в тексте в рамках располагаются специальные пиктограммы, 
призванные облегчить работу с текстом учебного пособия.  
Значения пиктограмм следующие: 
 – ключевое понятие; 
 – дополнительная информация; 
 – практические задания.  
 
 

ГЛАВА 1. ВВЕДЕНИЕ В WEB-ТЕХНОЛОГИИ 
 

1.1. Web-технологии: основные понятия, виды 
 
В 1989 году Тим Бернерс-Ли предложил концепцию распределенной информационной системы с целью «объединения знаний человечества», которую он назвал «Всемирной паутиной» (World Wide Web – 
WWW). Для её тогда создания он объединил две существовавшие тогда 
технологии: технологию применения IP-протоколов (Internet Protocol) для 
передачи данных и технологию гипертекста (Hypertext Technology), основанную на реализации быстрого перехода от одного фрагмента текста  
к другому по выделенным ссылкам, при этом указанные фрагменты могут 
располагаться на физически разделенных компьютерных носителях.  
Сам же термин «гипертекст» был 
впервые предложен Тедом Нельсоном в 
1965 году, а первую работающую гипертекстовую систему создал в 1968 году Дуг 
Энгельбард. В 1991 году был создан первый браузер, работавший в режиме командной строки.  
 С точки зрения пользователя, информационное пространство Всемирной паутины (web-пространство) состоит из документов различного 
формата (мультимедиа-документов), предметных указателей и ссылок. 
Для перехода по ссылке или поиска по указателю пользователь применяет 
соответствующий браузер, «понимающий» язык разметки гипертекста. 
Поисковая система отыскивает по ссылке или ключевым словам в «паутине» нужный каталог, читает его структуру, считывает нужный документ и пересылает его пользователю.  
Дальнейшее развитие шло по линии совершенствования технологий 
поиска, передачи, обеспечения безопасности, разработки и стандартизации различных web-интерфейсов, повышающих комфорт использования webтехнологий. С середины 90-х годов эти 
технологии стали находить все более широкое применение во многих сферах человеческой деятельности.  

 Word Wide Web (WWW, 
Всемирная паутина) – распределенная информационная система, предоставляющая доступ 
к гипертекстовым документам 
по протоколу HTTP.  

 
Web-технологии 
– 
совокупность технологий, направленных на создание, управление, представление, обмен, хранение и обработку информации, 
для формирования web-пространства.  

Наибольшее влияние развитие web-технологий имеет на те сферы 
общественной деятельности, которые непосредственно связаны с управлением информационными потоками, с передачей и обработкой информации, с визуализацией данных.  
Основными структурными элементами web-пространства являются 
web-страницы и web-сайты.  
Web-страница – это минимальная логическая единица Всемирной 
паутины, интернет-ресурс, однозначно идентифицируемый уникальным 
URL (Uniform Resource Locator), доступ к которому осуществляется с помощью браузера.  
Web-сайт – совокупность web-страниц, объединенных под одним 
адресом (доменным именем или IP-адресом), общей тематикой и оформлением, а также связанных между собой гипертекстовыми ссылками и находящихся на одном сервере.  
По принципу формирования все web-сайты можно разделить на 
следующие типы: 
1)  статические: HTML-документы, изображения, мультимедиа 
файлы, хранящиеся на сервере; 
2) динамические – web-приложения: программные модули, шаблоны web-страниц, скрипты и т. п., которые по запросу формируют HTMLдокументы.  
Web-сайты идентифицируются в Интернете под доменными именами, зарегистрированными в системе DNS (Domain Name System). В большинстве случаев одному web-сайту соответствует одно доменное имя. 
В настоящее время большинство web-сайтов являются web-приложе- 
ниями.  
 Следует различать понятия «сервер» и «web-сервер». Web-сервер – 
это программное обеспечение, которое обрабатывает web-страницы и пересылает их браузеру пользователя. А сервер – это компьютер, на котором находится web-сервер. Если в HTML-коде web-страницы есть скрипты языка PHP и других, применяемых в Интернете, которые не 
обрабатываются браузером, их обрабатывает web-сервер. При этом пользователю отправляется страница с разными вариантами представления. 
Работу динамических запросов поиска также производит web-сервер. 
Именно из-за web-сервера Интернета пользователи могут видеть webстраницы, отличающиеся для разных учётных записей.  

Для навигации в web-пространстве используется браузер – клиентская программа для работы в Интернете, которая 
обращается к серверу, читает документ, 
сверстанный средствами HTML, интерпретирует полученную информацию и 
отображает содержание документа.  
Наиболее известными в России браузерами являются Internet 
Explorer, Google Chrome, Opera, Netscape Navigator, Mozilla Firefox и др.  
Взаимодействие всех участников web-пространства основывается на 
использовании протокола передачи гипертекста – HTTP (Hyper Text 
Transfer Protocol). С его помощью web-серверы и браузеры обмениваются 
информацией, поэтому web-серверы также часто называют HTTPсерверами, а web-браузеры – HTTP-клиентами. Однако HTTP-клиентами 
могут быть не только браузеры, но и любые программы, которые могут 
использовать HTTP-протокол (прокси-серверы, поисковые агенты и т. п.).  

Протокол HTTP обычно применяется для доступа к HTML
страницам, для которых не требуется дополнительных средств защиты. 
Для защищенных транзакций был разработан протокол HTTPS (HyperText 
Transfer Protocol Secure), то есть «безопасный протокол передачи гипертекста», обеспечивающий дополнительный уровень защиты. Благодаря 
ему происходит обмен конфиденциальной информацией.  
В зависимости от места обработки информации, используемой при 
создании web-страниц, различают web-технологии на стороне клиента и 
web-технологии на стороне сервера.  

К основным web-технологиям на стороне клиента относятся язык 

гипертекстовой разметки HTML, каскадные таблицы стилей CSS (Cascading Style Sheets), скриптовый язык JavaScript, динамический язык разметки гипертекста DHTML (Dynamic Hyper Text Markup Language).  

 Основой всей Всемирной паутины 
является язык разметки гипертекста 
HTML – Hyper Text Markup Langua- 
ge. Он служит для логической (смы- 
словой) разметки документа. Для 
описания внешнего вида HTMLдокументов используется техноло
гия CSS. Браузер объединяет HTML- и CSS-код и формирует внешний 
вид страницы.  

 Браузер (веб-обозреватель) – 
программное обеспечение для 
обработки и вывода разных составляющих web-страницы и 
для предоставления интерфейса 
между web-сайтом и его пользователем.  

 Разметка (markup) – информация, 
добавляемая в документ для облегчения восприятия его смысла, т. к. определяет его части и их соотношение 
друг с другом. Другими словами, разметка – это средство структурирования документа.  

CSS можно использовать на любом 

сервере без каких-либо ограничений, поскольку команды CSS исполняются непосредственно на компьютере пользователя. 
Для добавления стилей на web-страницу 

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

 встроенные стили CSS (в отдельном HTML-элементе); 
 внедренные таблицы стилей (внутри HTML-документа); 
 связанные таблицы стилей (во внешнем файле).  
В следующих главах учебного пособия будут рассмотрены способы 

добавления каждого стиля на web-сайт.  

Для реализации потребности в динамическом, интерактивном со
держании web-страниц используются языки написания скриптов. Стандартным скриптовым языком во Всемирной паутине является JavaScript.  

JavaScript – это язык программирования, используемый в составе 

страниц HTML для увеличения его возможностей. Он был разработан 
фирмой Netscape на базе языка Sun's Java корпорации Sun. JavaScript интегрируется в файл HTML в виде нескольких строчек кода – скриптов 
(например, это может быть функция, вызываемая на исполнение специальной командой). Встроенный в браузер интерпретатор JavaScript воспринимает и скрипт, и HTML-код как единый документ, обрабатывая и 
те, и другие данные одновременно.  

С помощью технологии JavaScript можно придать web-странице 

элементы интерактивности, формировать, компоновать и полностью 
контролировать формат всплывающих окон и встроенных фреймов, организовывать такие активные элементы, как «бегущие строки» и иную анимацию, создать чат. Большинство web-камер, передающих на сайт изображение, также работают на базе соответствующих приложений Java. 
Использование этой технологии не требует установки и настройки на сервере каких-либо дополнительных модулей, поскольку скрипты выполняются непосредственно на компьютере пользователя.  

Интеграцией HTML и JavaScript технологий является DHTML 

(Dynamic Hyper Text Markup Language, динамический язык разметки гипертекста). Данная технология позволяет создавать web-страницы, включающие такие интерактивные элементы, как движущийся фон, расположенный под статичным содержимым документа, движущиеся объекты, 

 
Язык 
разметки 
(markup 
language) – это способ именования и выделения частей документа при помощи тегов, 
размещаемых в тексте документа.  

выпадающие меню, кнопки, просвечивающиеся при наведении курсора 
мыши, анимацию, бегущие титры и т. д. DHTML использует сценарии, 
подготовленные с помощью интерпретируемого макроязыка, обрабатываемого браузером совместно с кодом HTML. Такие сценарии именуются 
«скриплетами».  

Использование web-технологий на стороне сервера позволяет изме
нять и сохранять какую-нибудь информацию на сервере (например, организовать приём и сохранение отправляемых пользователями сообщений). 
Данные web-технологии позволяют решать такие задачи, как регистрация 
пользователей, авторизация пользователей и управление аккаунтом 
(в почтовых web-системах, социальных сетях), поиск информации по базе 
данных. Они являются основой создания гостевых книг, форумов, чатов, 
опросов, счетчиков посещений.  

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

web-страниц на стороне сервера стала технология CGI (Common Gateway 
Interface).  

В соответствии с технологией CGI, НТТР-запрос, содержащий 

ссылку на динамическую страницу, поступая на web-сервер, генерирует 
новый процесс и запускает нужную прикладную программу. Упрощенно 
принцип работы CGI выглядит следующим образом: при заполнении и 
отправке пользователем на web-странице формы, информация из формы 
передается в CGI-скрипт, который запускается на выполнение и обрабатывает полученную информацию. Результат работы CGI-скрипта может 
быть встроен в другую HTML-страницу, отправлен по почте или трансформирован каким-либо другим способом. Как правило, скрипты CGI 
размещаются на сервере в специально отведенной для этой цели директории. Следует помнить, что подключение, отладка и запуск таких программ требует соответствующих прав доступа к web-серверу, а также определенных знаний и навыков.  

Технология CGI обычно реализуется двумя методами: либо с ис
пользованием программ, написанных на языке PERL (Practical Extraction 
and Report Language), – как правило, такие файлы имеют расширение .pl, 
либо с помощью приложений, созданных с применением языка С и откомпилированных непосредственно на сервере, подобные файлы имеют 
расширение .cgi.  

Необходимо отметить, что PERL, как и HTML, является интерпре
тируемым языком, но он интерпретируется не браузером пользователя, 
а сервером перед передачей данных пользователю. Для того, чтобы запус