Использование web-технологий при создании информационных систем

УДК 004.42:004  
ББК 32.973.4 
С32 
Рецензенты: 
доктор технических наук, профессор В.О. Чулков, 
ведущий сотрудник научно-проектного центра «Развитие города»; 
доктор технических наук, профессор А.В. Гинзбург, заведующий кафедрой 
информационных систем, технологий и автоматизации в строительстве НИУ МГСУ 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Серова, Е.А. 
С32  
   Использование web-технологий при создании информационных систем [Электронный 
ресурс] : учебно-методическое пособие / Е.А. Серова, Л.А. Шилова, В.С. Евстратов ; 
Министерство науки и высшего образования Российской Федерации, Национальный 
исследовательский Московский государственный строительный университет, кафедра 
информационных систем, технологий и автоматизации в строительстве. — Электрон. дан. 
и прогр. (0,58 Мб). — Москва : Издательство МИСИ – МГСУ, 2020. — Режим доступа: 
http://lib.mgsu.ru/ — Загл. с титул. экрана. 
ISBN 978-5-7264-2203-9 (сетевое) 
ISBN 978-5-7264-2202-2 (локальное) 
 
В учебно-методическом пособии содержатся сведения об основах создания динамических 
web-ресурсов, а также о принципах безопасности при работе в открытом пространстве сети 
«Интернет». Подробно излагаются требования к форме выполнения, оформлению и представлению 
курсовой работы. Закрепить и проверить полученные знания, умения и навыки позволяют вопросы 
для самоконтроля, приведенные в конце раздела. 
Для обучающихся по направлению подготовки 09.03.02 Информационные системы и 
технологии. 
 
 
Учебное электронное издание 
 
 
© Национальный исследовательский 
Московский государственный 
строительный университет, 2020 
 
 
2 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Редактор, корректор Л.В. Себова  
Компьютерная правка Л.В. Себовой 
Верстка О.В. Суховой  
Дизайн первого титульного экрана Д.Л. Разумного 
 
Для создания электронного издания использовано: 
Microsoft Word 2010, ПО Adobe Acrobat  
 
 
Подписано к использованию 16.05.2020. Объем данных 0,58 Мб. 
 
 
Федеральное государственное бюджетное образовательное учреждение 
высшего образования 
«Национальный исследовательский 
Московский государственный строительный университет». 
129337, Москва, Ярославское ш., 26. 
 
Издательство МИСИ – МГСУ. 
Тел.: (495) 287-49-14, вн. 14-23, (499) 183-91-90, (499) 183-97-95. 
E-mail: ric@mgsu.ru, rio@mgsu.ru 
 
 
3 

Оглавление 
ПРЕДИСЛОВИЕ ......................................................................................................................................... 5 
1. ВВЕДЕНИЕ В HTML ............................................................................................................................. 6 
2. ВВЕДЕНИЕ В CSS. АНИМАЦИЯ ........................................................................................................ 9 
3. ДИНАМИЧЕСКИЕ WEB-РЕСУРСЫ ................................................................................................. 14 
4. ПУБЛИКАЦИЯ WEB-РЕСУРСОВ В СЕТИ «ИНТЕРНЕТ» 
............................................................. 18 
5. ПРИНЦИПЫ БЕЗОПАСНОСТИ ПРИ РАБОТЕ В ОТКРЫТОМ ПРОСТРАНСТВЕ                        
СЕТИ «ИНТЕРНЕТ» ................................................................................................................................ 20 
6. СОЗДАНИЕ ИНФОРМАЦИОННОГО РЕСУРСА НА БАЗЕ СИСТЕМЫ УПРАВЛЕНИЯ 
КОНТЕНТОМ ........................................................................................................................................... 22 
7. ФОРМА ВЫПОЛНЕНИЯ И ПРЕДСТАВЛЕНИЕ РЕЗУЛЬТАТОВ 
................................................. 25 
Библиографический список ..................................................................................................................... 26 
ПРИЛОЖЕНИЯ ........................................................................................................................................ 27 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ПРЕДИСЛОВИЕ  
Данное учебно-методическое пособие к выполнению курсовой работы составлено в соответствии с требованиями Федерального государственного образовательного стандарта высшего 
образования и рабочей программой «Web-технологии в информационных системах» для 
обучающихся по направлению подготовки 09.03.02 Информационные системы и технологии. 
Целью дисциплины «Web-технологии в информационных системах» является углубление 
уровня освоения компетенций обучающегося в области применения web-технологий. Освоение 
дисциплины включает курс лекций, компьютерные практикумы, групповые и индивидуальные 
консультации по курсовым работам и самостоятельную работу обучающихся по следующим 
разделам: 
− введение в современные web-технологии; 
− принципы организации сети «Интернет» и виды web-ресурсов; 
− организация информационного обмена инженерными данными; 
− безопасность в сети «Интернет»; 
− системы управления контентом CMS. 
В учебно-методическом пособии содержатся сведения об основах создания динамических 
web-ресурсов, а также о принципах безопасности при работе в открытом пространстве сети 
«Интернет» в рамках подготовки курсовой работы, выполнение которой заключается в последовательном решении шести представленных в пособии практических заданий и объединении 
полученных результатов в прототип информационной системы. После каждого задания даны 
темы для самостоятельного изучения. В конце каждого раздела приведены вопросы для самоконтроля, которые позволяют закрепить и проверить полученные знания, умения и навыки.  
Требования к форме выполнения, оформлению и представлению курсовой работы представлены в приложениях. 
Цель курсовой работы заключается в разработке прототипа информационной системы 
в соответствии с полученным техническим заданием. 
Выполнение курсовой работы заключается в последовательном решении шести практических заданий и объединении полученных результатов в прототип информационной системы. 
Практическое задание 1. Создание web-ресурсов на языке разметки HTML.  
Цель: получение знаний о базовых принципах создания web-ресурсов с использованием 
языка разметки гипертекста HTML. 
Результат работы: сверстанные статические страницы для прототипа информационной 
системы. 
Практическое задание 2. Создание динамических web-ресурсов с элементами программирования. 
Цель: получение знаний о базовых принципах создания динамических web-ресурсов 
с использованием скриптовых языков программирования. 
Результат работы: сверстанные статические страницы с добавленными динамическими 
элементами. 
Практическое задание 3. Web-анимация. 
Цель: получение знаний о базовых принципах создания анимированных web-ресурсов. 
Результат работы: сверстанные статические страницы с добавленными анимированными 
элементами. 
Практическое задание 4. Создание прототипа информационной системы. 
Цель: создание прототипа информационной системы. 
Результат работы: прототип информационной системы. 
Практическое задание 5. Публикация web-ресурсов. 
Цель: получение знаний о базовых принципах размещения созданных ранее webресурсов в сети «Интернет» и организация общего доступа к ресурсам. 
Результат работы: публикация прототипа информационной системы в сети «Интернет». 
Практическое задание 6. Основы безопасной работы в сети «Интернет». 
Цель работы: получение знаний о базовых принципах безопасной работы в сети «Интернет». 
Результат работы: настройка безопасности прототипа информационной системы. 
5 

1. ВВЕДЕНИЕ В HTML 
Для того чтобы пользователи Интернета видели одну и туже картинку при отображении 
сайтов, используется единый язык HTML, воспринимаемый различными устройствами. Таким 
образом, HTML (англ. HyperText Markup Language — язык гипертекстовой разметки) — 
стандартизированный язык разметки документов, используемый в сети «Интернет». Отметим, 
что язык HTML позволяет пользователю переходить от одной части текста к другой, при том 
что этот текст может храниться на разных устройствах. 
Большинство существующих web-страниц содержит описание разметки на языке HTML, 
который переводится браузерами в отформатированный текст и отображается на экране 
монитора компьютера или мобильного устройства.  
Основой языка HTML являются HTML-теги, которые используются для разграничения 
начала и конца элементов в разметке. Любой HTML-документ состоит из дерева HTMLэлементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегами. Открывающий и закрывающий теги содержат имя тега. 
Простой пример кода, написанного на языке HTML, представлен на рис. 1.  
 
Рис. 1. Пример кода на HTML 
 
Вместе с тем запомнить все теги и их параметры при использовании языка HTML сложно, 
однако существует множество справочников и руководств, к которым можно обращаться, 
чтобы получить ответ на появившийся вопрос.  
Кроме того, учитывая большой спрос на создание различных страниц в Интернете, разработано большое количество редакторов, позволяющих упростить работу с HTML-языком.  
Все HTML-редакторы можно разделить на две основные категории: 
1) WYSIWYG HTML — редактор кода, с помощью которого можно создавать webстраницы без знания языков программирования, что следует из названия: What You See Is 
What You Get (что видишь, то и получаешь). Преимуществом является отсутствие углубления непосредственно в процесс разработки страницы, однако это же является и недостатком. 
Редакторы такого типа, как правило, формируют объемные HTML-коды, в результате 
чего документ получается громоздким и время его загрузки увеличивается; 
2) редактор HTML-тегов. Работая с программами данного типа, пользователю доступен 
непосредственно код страницы, который при желании можно изменять. HTML-документ получается более компактным по сравнению с результатами работы редакторов первого типа. 
Вместе с тем HTML-редакторы могут быть выполнены как в виде онлайн-сервисов, так и 
в виде полноценных программных пакетов. 
6 

Одним из первых и наиболее простых был редактор FrontPage, который входил в пакет 
Microsoft Office. К основным недостаткам данного ПО можно отнести снижение быстродействия, а также ограниченные возможности в дизайне. В Microsoft Office 2007 программа 
FrontPage была заменена на Microsoft Expression Web и Microsoft Office SharePoint Designer. 
Позднее в Microsoft Office 2010 и Microsoft Office 2013 программа заменена на Microsoft 
Office SharePoint Designer. 
К более продвинутым редакторам можно отнести HomeSite+ и Dreamweaver. Данное ПО 
позволяет создать как сайт-визитку, так и настоящий шедевр современного искусства. К минусам этого ПО можно отнести долгую обработку массивного кода. Кроме того, требуется 
знание HTML на порядок выше, чем при работе с SharePoint Designer. 
Adobe HomeSite — редактор HTML, владельцем которого в настоящее время является 
Adobe Systems, не является WYSIWYG-редактором, таким как FrontPage или Dreamweaver, 
и в настоящее время существует только версия, названная HomeSite+, которая включена 
в пакет Dreamweaver MX 2004 и выше. HomeSite+ имеет дополнительные функции для прикладного расширения. 
Программа Dreamweaver наибольшую популярность получила, начиная с версии MX, 
выпущенной компанией Macromedia в 2002 году. Седьмая версия программы получила 
название Dreamweaver MX 2004, а затем в 2005 г. была выпущена Dreamweaver 8. В 2007 г. 
уже компания Adobe выпустила более свежую версию под названием Dreamweaver CS3. 
Последней версией считается Dreamweaver CC 2019. 
Популярная в настоящее время также программа Notepad++, которая является бесплатным 
редактором HTML и разрабатывается open Source-сообществом энтузиастов, обладает мультиязычной поддержкой, подсвечивает синтаксис самых распространенных языков программирования (например PHP, JavaScript, Python и др.). 
Интерфейс данной программы выполнен по принципу вкладок, благодаря чему можно 
работать сразу с несколькими документами одновременно. 
Для выполнения курсовой работы необходимы следующие инструменты: текстовый 
редактор, браузер для просмотра результатов и валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде. Рассмотрим данные инструменты подробнее. 
Текстовый редактор — программа или компонент программного комплекса, предназначенная для создания и изменения текстовых данных в текстовых файлах. 
HTML-документ можно создать практически в любом текстовом редакторе, даже в Блокноте, однако при выборе текстового редактора необходимо обратить внимание на то, чтобы 
в нем поддерживались следующие возможности:  
− подсветка синтаксиса (выделение тегов, текста, ключевых слов и параметров разными 
цветами); 
− работа с вкладками и проверка текущего документа на ошибки. 
Браузер — программа, предназначенная для просмотра web-страниц.  
Для выполнения курсовой работы подойдет любой браузер. Наибольшей популярностью 
сегодня пользуются три браузера:  
− Chrome — браузер, разрабатываемый компанией Google на основе свободного браузера 
Chromium и движка Blink; 
− Firefox — свободный браузер на движке Gecko, разработкой и распространением которого занимается Mozilla Corporation;  
− Safari — веб-браузер, разработанный корпорацией Apple и входящий в состав macOS и iOS. 
Валидатор позволяет пользователям проверять документы HTML и XHTML на предмет 
правильной разметки для повышения технического качества web-страниц. 
Валидация HTML-документа предназначена для выявления ошибок в синтаксисе webстраницы и расхождений со спецификацией HTML. Если есть доступ в Интернет, то можно 
проверить созданный документ онлайн с помощью службы валидации разметки Консорциума 
World Wide Web, введя в специальной форме путь к проверяемому документу или сайту. 
После проверки будут показаны возможные ошибки или появится надпись, что документ 
прошел валидацию успешно. 
7