Интернет-программирование

В. Б. Малашкевич 

 

 

 

ИНТЕРНЕТ- 

ПРОГРАММИРОВАНИЕ 

 

Лабораторный практикум 

 

 

 

 

 

 

Йошкар-Ола 

2017 
 

УДК 004.41(07) 
ББК 32.974.4я7 

М 18 

 

Рецензенты 

канд. техн. наук, доцент кафедры информатики ПГТУ Ю. А. Ипатов; 

канд. техн. наук, доцент кафедры  

информационно-вычислительных систем ПГТУ Н. Г. Моисеев 

 

Печатается по решению  

редакционно-издательского совета ПГТУ 

 
Малашкевич, В. Б. 

Интернет-программирование: 
лабораторный 
практикум 
/ 

В. Б. Малашкевич. – Йошкар-Ола: Поволжский государственный 
технологический университет, 2017.  – 96 с.  

ISBN 978-5-8158-1854-5 

 
В лабораторном практикуме рассмотрены вопросы клиентского и сервер
ного программирования (языки HTML, CSS, JavaScript, PHP, интеграция с 
MySQL). Описание лабораторных работ отражает основные принципы архитектуры и технологические решения, используемые в Web-сервисах. 

Для студентов, изучающих дисциплины «Интернет-программирова
ние», «Web-программирование» и другие смежные дисциплины, а также 
для других категорий читателей, заинтересованных в приобретении практических навыков разработками Web-сервисов Интернет. 

 
 
УДК 004.41(07) 
ББК 32.974.4я7 

Учебное издание 
МАЛАШКЕВИЧ Василий Борисович 
ИНТЕРНЕТ-ПРОГРАММИРОВАНИЕ 
Лабораторный практикум 
Редактор П. Г. Павловская 
Компьютерная верстка и дизайн обложки И. В. Малинкина 

Подписано в печать 17.07.2017. Формат 6084 1/16. Бумага офсетная.  
Печать офсетная. Усл. печ. л. 5,58. Тираж 55 экз. Заказ № 6031. 

Поволжский государственный технологический университет 

424000 Йошкар-Ола, пл. Ленина, 3 
Редакционно-издательский центр ПГТУ.  424006 Йошкар-Ола, ул. Панфилова, 17 

ISBN 978-5-8158-1854-5
© Малашкевич В. Б., 2017
© Поволжский государственный 
технологический университет, 2017

М 18

ОГЛАВЛЕНИЕ 

 

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

Введение ...................................................................................................... 6 

Методические указания к выполнению лабораторных работ................. 9 

1. Разработка макета Web-сайта средствами HTML................................ 11 

1.1. Теоретические сведения ................................................................ 11 

1.2. Задание для самостоятельной работы .......................................... 19 

1.3. Порядок выполнения работы ........................................................ 21 

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

2. Каскадные таблицы стилей CSS. ........................................................... 23 

2.1. Теоретические сведения ................................................................ 23 

2.2. Порядок выполнения работы ........................................................ 29 

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

3. Средства мультимедиа в HTML. ........................................................... 31 

3.1. Теоретические сведения ................................................................ 31 

3.2. Порядок выполнения работы ........................................................ 34 

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

4. Формы в HTML-документах .................................................................. 36 

4.1. Теоретическая часть ....................................................................... 36 

4.2. Порядок выполнения работы ........................................................ 42 

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

5. Программное взаимодействие JavaScript  
с HTML-документами. ............................................................................... 44 

5.1. Теоретическая часть ....................................................................... 44 

5.2. Порядок выполнения работы ........................................................ 50 

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

6. JavaScript и DOM API. ............................................................................ 51 

6.1. Теоретическая часть ....................................................................... 51 

6.2. Порядок выполнения работы ........................................................ 54 

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

7. Введение в PHP ....................................................................................... 56 

7.1. Теоретическая часть ....................................................................... 56 

7.2. Задания ............................................................................................ 59 

7.3. Порядок выполнения работы ........................................................ 62 

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

8. Работа с СУБД MySQL........................................................................... 66 

8.1. Теоретическая часть ....................................................................... 66 

8.2. Порядок выполнения работы ........................................................ 72 

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

9. Аутентификация пользователей на Web-сайтах. ................................. 74 

9.1. Теоретическая часть ....................................................................... 74 

9.2. Порядок выполнения работы ........................................................ 79 

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

Заключение .................................................................................................. 81 

Список литературы ..................................................................................... 82 

Приложение. Варианты индивидуальных заданий ................................. 83 

ПРЕДИСЛОВИЕ 

 
Программирование для сети Интернет является одной из наиболее вос
требованных областей современного программирования. Интернет-программирование, появившееся вместе со «всемирной паутиной» – WWW, 
постоянно развивается как по составу используемых инструментов, так по 
сферам применения. Сфера бизнеса с множеством Web-сервисов (системы 
on-line заказов, системы электронных расчетов, управления распределенными объектами и др.) и социальные сети с интеграцией средств обмена 
мультимедийной информацией для сотен тысяч пользователей – это примеры областей, изменяющих стиль жизни современного человека. 

Для создания современного сайта требуется использовать все разновид
ности Интернет-программирования: HTML-разметку, каскадные таблицы 
стилей, клиентское и серверное Web-программирование. Для их грамотного применения необходимо иметь навыки программирования на таких 
языках как, JavaScript и PHP, разбираться в технологиях клиент-серверного 
сетевого взаимодействия, знать основной протокол взаимодействия клиента и сервера Web-сервиса – HTTP, уметь установить и интегрировать различные программные средства, обеспечивающие функциональность современного сайта, знать основы теории баз данных и язык запросов SQL. 

В инструментарии Интернет-программирования нет строгости, одно
значности и логичности, присущих классическим языкам программирования. Эти средства разрабатывались для квалифицированных профессионалов. Поэтому начинающим программистам бывает сложно ориентироваться среди этих средств с множеством неоднозначных определений 
внутри каждого их них. 

Наряду с Web-программированием часто употребляется понятие 

Web-дизайн. Не следует путать эти понятия: Web-программирование 
направлено на создание кода приложения, Web-дизайн – на создание 
внешнего вида приложения (концепция архитектуры). 

Основное внимание в предлагаемом практикуме уделено изучению ос
новных принципов и технологий, применяемых в WWW. От современного 
Web-программиста требуются глубокие знания и владение несколькими 
языками программирования. Каждый из таких языков имеет многостраничные стандарты и популярные описания. Формат работы не позволяет 
включить описание даже основных элементов используемых языков. Поэтому в практикуме приводятся описание технологий, в составе которых 
используется тот или иной язык, и общая характеристика соответствующего языка. Более глубоко изучить средства языка можно самостоятельно 
с помощью приведенных в работе ссылок на сайты Интернет и электронные пособия, а также списка литературы. 
 

ВВЕДЕНИЕ 

 

Сегодня практически все отечественные и зарубежные компании 

используют в своем бизнесе Интернет. Поэтому такая область программной индустрии, как создание Web-сайтов и Web-приложений, 
имеет особое значение. Web-сервисы «всемирной паутины» (WWW) 
постоянно развиваются и расширяются. Для создания современного 
сайта требуется использовать все разновидности Интернет-программирования: HTML-разметку, каскадные таблицы стилей CSS, клиентское и серверное Web-программирование. 

Интернет-программирование – это целый комплекс технологий, 

обеспечивающий взаимодействие Web-сервера и браузера. На стороне клиента – браузера применяются языки HTML, CSS и JavaScript, 
задача которых – создание дружелюбного пользовательского интерфейса Web-сервиса. На стороне Web-сервера применяются языки 
PHP, SQL для разработки программ, имеющих возможность получать 
данные от пользователей, обрабатывать и хранить эти данные, а также 
выдавать пользователям обработанные данные в виде Web-страниц. 
Интернет-программирование подразделяется на клиентское и серверное программирование. 

Клиентское программирование – это технологии разработки 

программ для пользователей Web-сервисов. Эти задачи связаны в основном с представлением данных, созданием интерактивного интерфейса пользователя и подготовкой файлов медиа-ресурсов (презентаций, изображений, звука и видео). Здесь разработчик ограничен рамками программы-обозревателя Интернет или браузером. Тем не менее 
средства Интернет-программирования оставляют программисту достаточно свободы для эффективного решения разнообразных прикладных сетевых задач. 

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

Важным аспектом сетевого программирования является обеспече
ние информационной безопасности Web-сервисов. При создании 
сайта программист должен учитывать требования информационной 

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

Корпоративный Web-сайт разрабатывается в процессе взаимодей
ствия представителей фирмы-Заказчика сайта и программиста, специализирующегося на создании сайтов. Важнейшим этапом такой разработки является создание макета (презентации) сайта. Цель создания 
макета – демонстрация Заказчику примерного объема и содержания 
будущего сайта, связей между отдельными страницами сайта, основных идей оформления, структуры запросов и формируемых отчетных 
форм, интерактивных возможностей сайта и т.д. 

Для разработки Web-сайтов широко используется язык разметки 

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

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

Обычно статические страницы HTML создает Web-дизайнер на 

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

Для того чтобы Web-сайт выглядел профессионально, необходимо 

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

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

Помимо статических страниц HTML, активное Web-приложение 

содержит компоненты, динамически создающие страницы HTML «на 
лету». Разработка таких компонентов требует участия профессионального программиста. Помимо традиционных языков программирования, 
таких как С++ или Pascal, Web-программист должен владеть языками, 
разработанными специально для проектирования Web-приложений: 

JavaScript, Visual Basic Script, PHP, Perl и др. От Web-программиста 
также требуются понимание принципов сетевого взаимодействия компонентов Web-приложений, а также навыки работы с различными СУБД. 

Важное потребительское качество Web-приложений – скорость 

работы. Достижение этой цели требует правильного распределения 
задач между клиентской частью Web-приложения – браузером и серверной частью – Web-сайтом. Чтобы ускорить загрузку страниц, 
необходимо минимизировать общий объем расположенных на них 
иллюстраций. Эта работа предполагает знакомство с технологиями 
обработки звука, изображений и видео. 

Стандартными страницами любого м аке та корпоратив ного 

Web-сайта являются: 

1. Главная страница. Она содержит общие сведения о предприя
тии: название, эмблема (логотип), вид деятельности, обязателен перечень ссылок на другие страницы сервера; 

2. О предприятии (компании, фирме, корпорации и т.п.). На дан
ную страницу выводится информация о деятельности фирмы, ее миссия, цели и задачи, ценности, конкурентные преимущества; 

3. Продукция (услуги). На данной странице перечисляются виды 

продукции, услуги, ассортимент, цены на продукцию, количество, 
имеющееся в наличие, возможность заказа; 

4. Партнеры. На этой странице можно разместить сведения о де
ловых партнерах предприятия; 

5. Контактная информация. Указываются адрес предприятия, 

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

В зависимости от темы сайта и особенностей деятельности пред
приятия тематика страниц сервера может быть изменена или дополнена новыми страницами, например «Новости», «Прайс-листы», «Акции», «Каталог» и другие. 

Все страницы Web-сайта должны быть связаны между собой пе
реходами от одной страницы к другой и обратно.  

Прикладная задача цикла работ – разработка корпоративного 

Web-сайта в соответствии с индивидуальным заданием. 

МЕТОДИЧЕСКИЕ УКАЗАНИЯ  

К ВЫПОЛНЕНИЮ ЛАБОРАТОРНЫХ РАБОТ 

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

Все работы практикума нацелены на приобретение практических 

навыков разработки и отладки корпоративного Web-сайта, тематика 
которого определяется индивидуальным заданием. Тема может быть 
выбрана из списка, приведенного в Приложении к практикуму, либо 
предложена студентом самостоятельно. В любом случае тема разрабатываемого сайта и его разделы должны быть согласованы с преподавателем до начала работы над сайтом!  

После утверждения темы полезно ознакомиться с сайтами анало
гичного назначения, представленными в Интернет. Это позволит приблизить Вашу разработку к современному уровню «сайтостроительства», найти элементы, которые следует реализовать на каждом этапе 
работы, и грамотно выбрать способы их реализации. Рекомендуется 
обсуждать собственные идеи по развитию сайта с преподавателем. 

Выполнение каждой работы рекомендуется начинать с изучения 

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

Для выполнения первых работ достаточно браузера. При этом раз
работанный макет сайта может размещаться на локальном диске рабочей станции. 

Работа, посвященная формам HTML, и все последующие работы 

требуют функционирования Web-сервера. Руководство по установке 
и настройке Web-сервера можно найти в электронном документе 
«Установка и интеграция ПО Web-сервера.doc». При этом ресурсы, 
разрабатываемого Web-сайта следует размещать в соответствующих 

каталогах Web-сервера. Порядок работы с Web-сервером учебного 
класса описан в электронном документе «Работа с Web-сервером 
учебного класса.doc» 

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

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

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

Каждая работа практикума завершается подготовкой и защитой 

отчета. В состав отчета включаются: 

1. Титульный лист с наименованием работы, номером варианта и 

темой сайта, фамилией и группой студента; 

2. Цель работы; 
3. Результаты работы в форме краткого описания реализованных 

эффектов, изображений экранов, отдельных разработанных кодов; 

4. Файлы действующего макета сайта; 
5. Ответы на контрольные вопросы; 
6. Выводы по работе. 
Для защиты работы необходимо четко представлять, каким обра
зом достигается тот или иной эффект созданного сайта, назначение 
каждой строки кода, а также быть готовым к внесению изменений в 
разработанные Web-страницы по указанию преподавателя. 
 
 

1. Разработка макета Web-сайта  

средствами HTML 

Цель работы: знакомство со структурой Web-сайта; приобрете
ние навыков создания HTML-документов и форматирования текста 
при помощи языка гипертекстовой разметки HTML.  

1.1. Теоретические сведения 

Термин HTML (HyperText Markup Language) означает «язык раз
метки гипертекста» – стандартизованный язык разметки документов 
для создания Web-страниц. Язык HTML был разработан британским 
учёным Тимом Бернерсом-Ли в 1986-1991 годах в Швейцарии. Со 
времени создания первой версии HTML последовательно появлялись 
спецификации версий 2.0, 3.0, 3.2, 4.0, 5.0. Текущую спецификацию 
HTML можно найти на сервере международной общественной организации W3C (http://www.w3.org/). 

Все, что необходимо, чтобы прочитать и представить документ в 

формате HTML (HTML-документ), – это Web-браузер, который интерпретирует элементы HTML и воспроизводит их на экране в виде, 
задуманном автором документа (рис. 1.1).  

 

 

Рис. 1.1. HTML-документ “index.html” и его отображение в окне браузера 

 

В реальной работе HTML-документы хранятся на диске Web
сервера и пересылаются по сети в ответ на запрос браузера (рис. 1.2). 

Рис.1.2. Взаимодействие браузера и Web-сервера 

 

HTML-документы – это обычные текстовые файлы. Браузер по
следовательно читает элементы принимаемого документа и отображает их в своем окне. 

Основные достоинства языка HTML заключаются в следующем: 
 HTML обеспечивает просмотр HTML-документов в различных 

Web-браузерах (Internet Explorer, Mozilla FireFox, Google Chrome или 
др.) и на различных платформах под управлением различных операционных систем – Windows, Linux, MacOS, Android или iOS; 

 HTML имеет обширный набор средств для отображения тексто
вой и мультимедийной информации; 

 HTML – это стандартизированный язык, обеспечивающий еди
нообразное отображение информации в различных браузерах. 

HTML не является языком программирования. Он предназначен 

только для представления данных. В связи с этим язык HTML имеет 
следующие ограничения : 

а) HTML позволяют создавать HTML-документы, обеспечиваю
щие только статическое, неизменное отображение информации в 
браузере. Интерактивность современных Web-страниц – способность 
взаимодействовать с пользователем – достигается с помощью специальных программных элементов или сценариев (скриптов), внедряемых в HTML- документы. Сценарии создаются с помощью отдельных 
языков программирования;