Проектирование и разработка Web-сайта для организации

Министерство науки и высшего образования Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего образования «Елецкий государственный университет им. И.А. Бунина» Институт математики, естествознания и техники Кафедра математического моделирования и компьютерных технологий Проектирование и разработка Web-сайта для организации Выпускная квалификационная работа обучающегося 4 курса по направлению подготовки бакалавриата 09.03.01 Информатика и вычислительная техника очной формы обучения Коняева Никиты Геннадьевича Руководитель: Масина Ольга Николаевна, д-р ф.-м. наук, доцент (подпись обучающегося) (подпись руководителя) Елец – 2020

Оглавление Введение ............................................................................................................... 3 Глава 1. Теоретические аспекты разработки Web-сайта ................................... 5 1.1. Понятие Web-сайта .................................................................................... 5 1.2. Классификация сайтов ............................................................................... 7 1.3. Преимущества использования Web-сайта ................................................ 9 1.4. Типовая структура и дизайн Web-сайта организации ............................ 11 1.5. Языки программирования Web-сайтов ................................................... 12 1.6. Программы для создания сайтов ............................................................. 20 Глава 2. Практическая часть .............................................................................. 25 2.1. Структура проектируемого сайта ............................................................ 25 2.2 Подготовка к созданию сайта ................................................................... 31 2.3 Разработка Web-страницы «Главная страница» ...................................... 34 2.4. Разработка Web-страниц меню................................................................ 46 2.5. Разработка Web-страницы «Заказать столик» ........................................ 51 2.6. Разработка дополнительных Web-страниц ............................................. 53 Заключение ......................................................................................................... 56 Список использованных источников ................................................................ 57 Приложение 1. Код Web-страницы «Главная страница».............................. 59 Приложение 2. Код Web-страницы «Горячие блюда» .................................. 62 Приложение 3. Код Web-страницы «Десерты» ............................................. 65 Приложение 4. Код Web-страницы «Закуски» .............................................. 67 Приложение 5. Код Web-страницы «Напитки»............................................. 70 Приложение 6. Код Web-страницы «Салаты»............................................... 72 Приложение 7. Код Web-страницы «Заказать столик» ................................. 75 Приложение 8. Код Web-страницы «Интересные факты о еде» .................. 76 Приложение 9. Код Web-страницы «Местоположение на карте» ............... 79 Приложение 10. Код Web-страницы «Фотогалерея» .................................... 80 2

Введение Актуальность темы. В настоящее время Интернет выступает в роли мощного инструмента поиска и предоставления информации. Web-технологии изменили представление людей о работе с информацией. Как известно [5], традиционные параметры развития вычислительной техники не учитывали в значительной степени интерфейс компьютера и человека. Они сдерживали внедрение новых технологий, что приводило к уменьшению прибыли от их применения. Когда интерфейс между человеком и компьютером был упрощен до естественности восприятия обычного человека, появился большой интерес к возможностям вычислительной техники. Создание Web-сайтов является важнейшей технологией разработки ресурсов Интернета. Web-сайт, содержащий полезную информацию, является визитной карточкой любой организации. В настоящее время практически у каждой компании имеется разработанный Web-сайт в Интернете. Web-программирование является самостоятельной отраслью программирования. В связи с развитием Web-технологий компьютер стал инструментом информационной поддержки. Все больше людей подключаются к сети Интернет и находят необходимую информацию. Информация становится доступной людям, не являющимся специалистами в области информационных технологий. Качественно разработанный Web-сайт будет нетрудно найти при помощи поисковых систем, следовательно, большее количество пользователей его смогут увидеть и оценить. Web-сайт – это основной информационный ресурс. С помощью Webсайта компания может осуществлять: – передачу всей необходимой информации о компании; – непосредственный контакт с пользователем; – рекламу компании. 3

В настоящее время благодаря активному развитию информационных технологий в Интернете стали появляться Web-сайты с различной тематикой. Таким образом, актуальность темы выпускной квалификационной работы (ВКР) обусловлена бурным развитием Web-сайтов и Web-технологий, выбором оптимальных технических решений на стадии проектирования сайта, его разработки и Web-дизайна. Объект – кафе «Сказка» (Становлянский район, с. Становое). Предмет – Web-сайт для кафе «Сказка». Целью ВКР является разработка и создание Web-сайта для кафе «Сказка». В соответствии с целью определены следующие задачи: 1) изучить теоретические аспекты создания Web-сайтов; 2) рассмотреть языки программирования, используемые в Web- технологиях; 3) определить структуру и пользовательский интерфейс сайта; 4) провести анализ работоспособности созданного сайта. Структура работы. ВКР состоит из введения, двух глав, заключения, списка использованных источников и приложения. В первой главе рассмотрены различные языки программирования и современные инструменты, которые используются для создания сайтов. Во второй главе описываются анализ, проектирование и непосредственно создание Web-сайта. В заключении содержатся выводы и перспективы использования разработанного сайта. 4

Глава 1. Теоретические аспекты разработки Web-сайта 1.1. Понятие Web-сайта Интернет (всемирная сеть) – это всемирная система объединенных компьютерных сетей, которая используется для хранения, обработки и передачи информации. Сеть Интернет построена на базе стека протоколов TCP/IP (сетевая модель передачи данных, которая представлена в цифровом виде). На основе Интернета работает распределенная информационная система мультимедиа, основанная на гипертексте или WWW (World Wide Web), а также другие системы передачи данных. Интернет является самой большой компьютерной сетью. По статистике большинство людей имеют доступ к сети Интернет. На рис. 1 показан рост числа пользователей Интернета [13], на рис. 2 представлены страны по уровню числа пользователей Интернета на начало 2019 года [10]. Рис. 1. Число пользователей Интернета 5

Рис. 2. Страны по уровню числа пользователей Интернет на начало 2019 года Информация, которая доступна пользователям Интернет, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Большая часть этой информации представлена в виде Web-сайтов, которые имеют свое имя (адрес) в Интернете. Сайт (или Web-сайт) – это одна или несколько логически связанных между собой Web-страниц [9]. Другое определение сайта: сайт – это место расположения контента сервера [9]. Таким образом, обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователем как единое целое [1]. Такое название Webсайты получили потому, что доступ к ним происходит по протоколу HTTP (англ. HyperText Transfer Protocol – «протокол передачи гипертекста»). Для просмотра Web-сайта на компьютере используются специальные программыбраузеры. Web-сайт состоит из Web-страниц, каждая из которых представляет собой текстовый файл с расширением *.htm. Web-страницы связаны друг с другом. Они содержат текстовую информацию и специальные команды – HTML-коды. HTML-коды определяют в каком виде эта информация будет отображаться в окне браузера. Другая информация (например, графическая, аудио и т. д.) в Web-страницу не входит, а представлена в виде отдельных файлов. В HTML6

кодах прописаны только указания на эти файлы. Указанные файлы имеют расширения вида: – *.gif, *.jpg (графика), – *.mid, *.mp3 (звук), – *.avi (видео). Переход между страницами осуществляется с помощью гиперссылок. Гиперссылка (англ. hyperlink) – это элемент графического изображения или текста на сайте, позволяющий осуществлять переход на другие страницы сайта, открывать какие-либо документы, запускать сторонние приложения [6]. 1.2. Классификация сайтов Сайты могут различаться между собой по многим параметрам. До сих пор не существует единой классификации сайтов. Тем не менее эксперты выделяют классификацию сайтов по отдельным критериям. Далее приведем классификацию сайтов. По доступности сервисов различают сайты [8]: – открытые, когда все сервисы находятся в открытым доступе для любых посетителей и пользователей; – полуоткрытые, когда для доступа необходимо зарегистрироваться (обычно бесплатно); – закрытые, т.е. полностью закрытые служебные и корпоративные сайты организаций, личные сайты частных лиц. Такие сайты доступны для узкого круга людей. Доступ новым людям обычно дается с помощью приглашений; По природе содержимого выделяют сайты [8]: – статические, когда Web-сайт заранее подготавливается. Пользователю становятся доступны файлы в том виде, в котором они хранятся на сервере; – динамические, когда содержимое генерируется специальными скриптами (программами) на основе других данных из любого источника. По типам макетов различают сайты [8]: 7

– фиксированной ширины, когда размеры элементов страницы имеют фиксированное, неизменное значение, которое не зависит от разрешения, размера и соотношения сторон экрана монитора; – «резиновый» макет, когда страницы автоматически растягиваются во всю ширину экрана монитора и отображаются по всей ширине. Такой макет является частным случаем фиксированного типа макета. По физическому расположению сайты бывают [8]: – общедоступные сайты сети Интернет; – локальные сайты, которые доступны только в пределах локальной сети (корпоративные сайты организаций, частные сайты лиц в локальной сети провайдера). По схеме представления информации различают сайты [8]: – интернет-представительства владельцев бизнеса, среди которых выделяют: а) сайт-визитку, который содержит важные данные о владельце сайта, организации, предпринимателе; б) представительский сайт, т.е. сайт-визитка с расширенным описанием: подробное описание услуг, портфолио и т.д.; в) корпоративный сайт, который содержит информацию о компаниивладельце, услугах/продукции, об изменениях в компании; г) каталог продукции, в котором присутствует подробное описание товаров/услуг, сертификаты и т. д. На таких сайтах размещается информация о товарах/услугах, которых нет в каталоге; д) Интернет-магазин, т.е. сайт с каталогом продукции, с помощью которого клиент заказывает товары; е) промо-сайт, т.е. сайт о конкретной торговой марке или продукте. На таких сайтах размещается информация о бренде, различных рекламных акциях и т.д.; ж) сайт-квест – это Интернет-ресурс, на котором организовано соревнование по разгадыванию логических загадок, связанных между собой; 8

– информационные ресурсы: а) Web-сервис, т.е. услуга для реализации задач в сети WWW (World Wide Web – всемирная паутина); б) комбинированные Web-сервисы (социальные сети); в) комбинированные Web-сервисы (специализированные социальные сети). 1.3. Преимущества использования Web-сайта Сайт для компании – это необходимая и насущная потребность компании. При заказе сайта в профессиональной Web-студии компания решает следующие вопросы: – повышение имиджа компании; – увеличение прибыли; – непосредственное взаимодействие с потребительской аудиторией; – экономия на рекламе и т. д. Рассмотрим некоторые преимущества, которые создает для малого бизнеса наличие собственного Web-сайта. Одним из преимуществ является отсутствие ограничений в привлечении новых клиентов. Географически компания может располагаться в одном городе или одной стране, поэтому она не может охватить клиентов за пределами сферы своего влияния, но Интернет помогает устранить территориальные ограничения. Таким образом, сайт обеспечивает следующие возможности: – выход на глобальный рынок; – сотрудники компании доступны из любой точки планеты; – экономия средств на открытии новых офисов за пределами региона; – возможность привлечения новых клиентов. Другим преимуществом создания Web-сайта является нахождение всей информации в одном месте. Сайт для компании – это информационный центр, позволяющий посетителям ресурса получать информацию о деятельности 9

компании, ее товарах или услугах. Таким образом, Web-сайт предоставляет информацию клиенту о компании, товарах, услугах. Если есть Web-сайт, то не нужно тратиться на штат консультантов. При наличии разработанного сайта компания может общаться со своими клиентами, заказчиками, оформлять заказы. Следующим преимуществом сайта является потенциал роста продаж. Интернет дает возможность: – взаимодействовать с клиентом в реальном времени; – реагировать на запросы покупателей; – помогать клиентам подбирать оптимальные товары; – принимать решение о сотрудничестве. Таким образом, с помощью Web-сайта можно продавать товаров на порядок больше и получать большую прибыль. Преимуществом использования Web-сайта является наличие уникального маркетингового канала, с помощью которого можно распространять информацию. Web-сайт является самым дешевым и эффективным способом продвижения товаров и услуг. Маркетинговая выгода от инвестиций, вложенных в разработку сайта, практически всегда превосходит ожидания заказчика. Кроме того, создание Web-сайта помогает улучшить репутацию компании, поскольку Web-сайт, оформленный в фирменном, индивидуальном стиле, – это имидж компании и ее презентабельность. Профессионально разработанный сайт во многом подтверждает серьезность компании. Собственный Web-ресурс для компании является более выгодным и наиболее результативным способом рекламы, в частности, по эффективности контакта с аудиторией сайт во много раз превосходит другие способы рекламы. Его используют как самостоятельную рекламную площадку, результат которой можно наглядно оценить. При этом, вся информация представлена в свободном доступе. 10

Преимуществом использования Web-сайта является повышение конкурентоспособности компании. Если у одной компании нет сайта, а у другой он есть, то первая теряет потенциальных клиентов. Таким образом, любой компании необходим собственный сайт, и для его создания нужно знать языки программирования. 1.4. Типовая структура и дизайн Web-сайта организации Структура сайтов организации разнообразна, но в основном включает следующие разделы: – главная страница, которая дает пользователю представление о структуре сайта. На главной странице сайта компании также размещаются анонсы мероприятий и другая важная информация; – новости, где размещаются все главные события в жизни организации; – контакты, который включает в себя информацию о сотрудниках: почтовый адрес, схему проезда, телефоны, Е-mail. – фотогалерея, раздел содержит фотографии мероприятий, сотрудников и другое; – форум, гостевая книга, в этих разделах пользователи могут общаться, писать отзывы, замечания. – Интересные ссылки. Web-дизайн — отрасль Web-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских Web-интерфейсов для сайтов или Web-приложений [18]. Людей, которые разрабатывают дизайн сайта, называют Web- дизайнерами. Их основной задачей является привлечение большого числа посетителей на созданный ими сайт. Для создания сайта они используют такие инструментальные средства, как HTML-редакторы; редакторы скриптов; программы для создания фотоальбомов; языки программирования и другие средства. 11

На многих Web-страницах присутствуют не только текст, но и анимация, видео- и аудиоклипы. Внешний вид можно изменить при выполнении пользователем некоторых действий. Работа по проектированию сайта осложняется тем, что одна и та же страница отображается по-разному различными браузерами. При проектировании сайта дизайнеру приходится обращать внимание на правильный выбор цвета шрифта и цвета фона. Каждый цвет действует на человеческий глаз по-разному, например, высокую чувствительность глаз имеет к желто-зеленому цвету, а наименьшую к фиолетовому и красному цветам. В конце разработки сайта необходимо проверить работу всех сделанных гиперссылок. Также нужно учитывать время загрузки страницы. Web-сайт, имеющий большой объем, загружается медленнее. Как правило, такие сайты не пользуются популярностью. Таким образом, при разработках сайта дизайнеру необходимо уметь заранее оценить объем сайта. 1.5. Языки программирования Web-сайтов Языки Web-программирования – это языки программирования, которые предназначены для работы с Web-технологиями. Выделяют клиентские языки программирования и серверные. Серверные языки выполняются на самом сервере с помощью особой программы. На их работу не влияет вид браузера, с которого осуществляется вход. Доступ посетителей к коду программы блокируется. Пользователь видит лишь результат работы, который выводится в браузер в виде HTML-страницы. Программы, составленные на клиентском языке, обрабатываются на ПК. Их обработка осуществляется браузером, установленным на компьютере. Рассмотрим некоторые из языков Web-программирования. Язык Web-программирования HTML 12

HTML (от англ. HyperText Markup Language – «язык гипертекстовой разметки») – стандартизированный язык разметки документов во Всемирной паутине. Большинство Web-страниц содержат описание разметки на языке HTML [15]. Язык HTML был разработан британцем Тимом Бернерсом-Ли в CERN (Европейская организация по ядерным исследованиям). HTML – это теговый язык разметки документов. Документ, написанный на языке HTML, представляет собой набор элементов, начало и конец которых обозначается специальными пометками – тегами [17]. Тег – это специальное слово, заключенное в угловые скобки. Все содержимое внутри тега отображается на странице сайта. Теги обозначают значком «/». Пример программы на HTML имеет вид: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Web-страница</title> </head> <body> <p> <b> Текст </b> </p> </body> </html> Далее рассмотрим подробнее значение тегов приведенного примера. Тег <!DOCTYPE> предназначен для указания типа текущего документа. Этот тег должен быть записан в первой строке документа HTML. Тег <html> означает, что документ написан на языке HTML. Он является контейнером, 13

который содержит все содержимое Web-страницы. Тег <head> предназначен для хранения других элементов. Его также называют «головой» документа. Следующий тег <body> содержит всю основную информацию о странице: текст, видео, картинки и другое. Тег <meta charset> прописывает кодировку сайта. Тег <title> отвечает за имя (название) Web-страницы. В данном примере в название страницы будет написано: Web-страница. Тег <p> определяет текстовый абзац. Текст, написанный внутри этого тега, будет начинаться с новой строки. Тег <b> для жирного начертания. В данном примере слово «Текст» будет написано полужирным шрифтом. Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP (HyperText Transfer Protocol — «протокол передачи гипертекста») или HTTPS (HyperText Transfer Protocol Secure) в виде простого текста или с использованием шифрования [15]. Язык Web-программирования PHP PHP (Инструменты для создания персональных – Web-страниц) скриптовый язык общего назначения для разработки Web-приложений [3]. В области Web-программирования PHP – один из популярных сценарных языков. Язык автоматическое имеет большой извлечение набор POST встроенных (постобработку) средств. и Например, GET-параметров (получение); взаимодействие с различными базами данных; обработка файлов. Приведем пример кода, написанного на языке PHP: <!DOCTYPE html> <html> <head> <title>Web-страница</title> </head> <body> <?php echo "Текст"; 14

?> </body> </html> Cкрипт (программа для Интернета, написанная на одном из языков программирования) PHP содержит HTML с встроенным кодом. В примере это вывод слова "Текст". Код PHP отделяется специальными тегами <?php и ?>. Язык Web-программирования SQL SQL (англ. structured query language — «язык структурированных запросов») – декларативный язык программирования, применяемый для создания, модификации и управления данными в реляционной базе данных, управляемой соответствующей системой управления базами данных [2]. SQL является прежде всего информационно-логическим языком, предназначенным для описания, изменения и извлечения данных, хранимых в реляционных базах данных [2]. Со временем SQL усложнился и стал приобретать черты, свойственные языкам программирования. Приведем некоторые примеры операторов, используемые в SQL. 1. Для создания, изменения и удаления таблиц в SQL БД используются операторы CREATE TABLE, ALTER TABLE, DROP TABLE. Пример синтаксиса оператор CREATE TABLE: CREATE TABLE имя_табл (с_спецификация, ...); 2. Модификация таблицы реализуется c помощью оператора ALTER TABLE. Его синтаксис: ALTER TABLE имя_табл м_специкация [,м_спецификация …] 3. Добавление строк в таблицу происходит с помощью оператора INSERT INTO. Пример добавление строк по запросу к БД: INSERT INTO имя_табл [(имя_столбца, ...)] SELECT ... 4. Для извлечения данных в таблицах используется оператор SELECT, который имеет сложный синтаксис. Пример: SELECT [ALL | DISTINCT] в_выражение, ... 15

FROM имя_табл [син_табл], ... [WHERE сложн_условие] [GROUP BY полн_имя_столбца|ном_столбца, ...] [ORDER BY полн_имя_столбца|ном_столбца [ASC|DESC], ...] [HAVING сложн_условие] Язык Web-программирования JavaScript JavaScript ограничениями) (объектно-ориентированный – это язык мультипарадигменный программирования язык с программирования. JavaScript используется как встраиваемый язык для доступа к объектам приложений. На модификацию языка JavaScript оказали влияние многие языки программирования. При его создании разработчики старались сделать язык похожим на Java, но простым в использовании. Обычно JavaScript-программы встроены в HTML-документ между тегами заголовка HTML <head> и </ head> или между тегами тела <body> и </ body>. Рассмотрим несколько возможностей JavaScript: 1. Поменять HTML контент: <script> Function язык HTML() { document.getElementById("demo").innerHTML = "язык HTML!"; } </script> 2. Изменять значение атрибута: <script> function dancer() { document.getElementById("image").src = "picture.gif"; } </script> 3. Изменить стиль: <script> 16

function setColor() { document.getElementById("demo").style.backgroundColor = "red"; } </script> 4. Изменить шрифт: <script> function setFont() { document.getElementById("demo").style.fontSize = "20px"; } </script> Язык Web-программирования Python Python (высокоуровневый язык программирования общего назначения), ориентированный на повышение производительности разработчика и читаемости кода [16]. Стандартная библиотека включает большой объём полезных функций. Python – активно развивающийся язык программирования, новые версии этого языка появляются очень часто. В Web-разработке Python не может соперничать с другими языками, как PHP, Java. На этом языке пишутся программы, которые имеют узкую направленность. Например, отправку документа с сайта на принтер. Вот пример кода для Web-сайта, написанного на языке Python: #!/usr/bin/env python3 print("Content-type: text/html") print() print("<h1>Текст</h1>" Язык Web-программирования C++ 17

C ++ (улучшенный объектно-ориентированный язык) – объектноориентированный язык с обширными библиотеками. Он является одним из самых популярных языков программирование. Он используется для: – разработки программного обеспечения; – создания операционных систем; – разнообразных прикладных программ, драйверов устройств. – используется для backend (программно-аппаратная часть сервиса). Язык С++ используется для создания программ с большим количеством шаблонов. Приведем пример программы, написанный на языке С++: #include <iostream> using namespace std; int main() { cout << "Текст" << endl; return 0; } В первой строке приведенной программы указывается, какие именно дополнительные функции будем использовать. Команда using namespace std отвечает за использование области имен переменных std. Функция main – стандартная. Она запускается автоматически вместе с программой. Весь код для исполнения пишется между двумя фигурными скобками после int main (). Оператор cout выводит наше сообщение на экран. А оператор endl переводит текст на новую строку. Return отвечает за код ошибки, который вернет программа после своего выполнения. Код «0» означает, что программа отработала без ошибок. Язык Web-программирования С C – это компилируемый статически типизированный язык программирования общего назначения. Он разработан в 1969–1973 гг. Деннисом Ритчи для реализации операционной системы UNIX, а позднее был 18

перенесён на множество других платформ. В настоящие время язык С предлагает элементы построения для других языков: C ++, Python, Java. Многие из этих языков основаны на C. В качестве примера рассмотрим программу, которая выведет на экран строку текста. #include <stdio.h> int main (void) { puts ("Текст"); return 0; } Язык Web-программирования XML Язык XML (расширяемый язык разметки) используется для описания данных. Он похож на язык гипертекстовой разметки (HTML). Рассмотрим пример программы на языке XML: <?xml version="1.0" encoding="UTF-8"?> <book> <title>Harry Potter and the Philosopher’s Stone</title> <author>J. K. Rowling</author> <year>1997</year> </book> Пример показывает, что XML и HTML имеют примерно одинаковую структуру. Рассмотрим отличия между ними. Во-первых, они используются для разных целей. Язык HTML – для разметки Web-страниц, а язык XML – для хранения и передачи информации в удобном для человека и компьютера виде. Во-вторых, у них есть технические отличия. Теги HTML являются заранее заданными. В HTML каждый тег предназначен только для своего назначения. В XML тегам можно давать любые названия. 19

Для создания сайта используем язык HTML. Он обладает рядом преимуществ по сравнению с другими языками: - html сайты имеют меньший вес; - сайты, написанные на HTML, загружаются намного быстрее; - простота верстки макета проекта; - сохранность контента выше, так как информация хранится непосредственно в файле. 1.6. Программы для создания сайтов Для создания Web-сайтов используют специальные программы. Они позволят реализовать качественный проект без знания HTML и других языков. Принцип их работы основывается на изменении шаблонных тем и добавлении отдельных блоков к имеющимся заготовкам. Одной из таких программ является программа Notepad ++(рис. 3). Рис. 3. Программа Noterad ++ Notepad ++ предназначена для работы с текстом. Встроенные функции помогут написать документ, программу. Программа позволяет открыть сразу несколько документов. Текстовый редактор Notepad++ является бесплатной программой и ориентированной для работы в операционных системах семейства Windows. Некоторые возможности Notepad++: а) подсветка синтаксиса для различных языков программирования; 20

б) авто-завершение набираемого слова; в) поддержка регулярных выражений Поиска/Замены; г) динамическое изменение окон просмотра и другое. Другой программой для создания сайтов является Brackets (рис. 4). Рис. 4. Программ Brackets Brackets – это бесплатная среда разработки от семейства Adobe. Программа позволяет работать с тремя языками: – HTML; – CSS; – JavaScript. 4 ноября 2014 года компания Adobe объявила о выпуске 1.0 версии Brackets [14]. Среда доступна для Windows, Mac OS, Linux. Вот некоторые положительные отличия редактора Brackets от других программ: а) возможность выбора языка интерфейса, в том числе и русский; б) простая установка плагинов и тем оформления; в) просмотр результата в браузере: при написании кода, автоматически происходят изменения в браузере. Программой для создания сайтов является SynWrite (рис. 5). 21

Рис. 5. Программа SynWrite Программа представляет собой многофункциональный текстовый редактор, являющийся альтернативой привычному Блокноту, базовых функций которого не хватает опытным пользователям. Распространяется под лицензией Mozilla Public License. Программа поддерживает русский язык. Достоинством программы является подсветка синтаксиса множества языков программирования. В редакторе встроенный инструмент проверки правописания, удобная навигация по обрабатываемому файлу, поддержка вкладок, закладок, возможность экспорта файлов в RTF/HTML. Программой для создания сайтов является Sublime Text (рис. 6). Рис. 6. Программа Sublime Text Sublime Text — текстовый редактор, поддерживающий плагины на языке Python. Первая версия программы вышла 18 января 2008 года и была доступна только под Windows. Возможности программы: а) объединения файлов в один проект; б) полноэкранный режим с акцентом на содержимом; в) возможность выбрать несколько строк для редактирования; г) поиск по файлам и другое. Программой для создания сайтов является Atom (рис. 7). 22

Рис. 7. Программа Atom Atom — бесплатный текстовый редактор с открытым исходным кодом. Используется для таких ОС, как Linux, Mac OS, Windows. Поддерживает плагины, написанные на Node.js, под управлением Git. Большинство плагинов имеют статус свободного программного обеспечения, разрабатываются и поддерживаются сообществом. Программой для создания сайтов является Tilda Publishing (рис. 8). Рис. 8. Программа Tilda Publishing Tilda Publishing - блочный конструктор сайтов. Программа позволяет создавать: а) сайты; б) интернет-магазины; в) блоги и другое. С помощью готовых блоков собираются сайты, которые автоматически адаптируются под мобильные устройства и выделены в различные категории. Программой для создания сайтов является Блокнот (Рис. 9). 23

Рис. 9. Программа Блокнот Несмотря на огромное количество программ для разработки Web-сайтов, создать сайт можно в программе Блокнот, которая является частью операционных систем Microsoft Windows. Блокнот предназначен для работы с текстом и является одной из самых простых программ по работе с ним. Программа не может производить форматирование текста. В конце 90-х сайты создавались преимущественно на HTML без использования базы данных. Различные программы, позволяющие редактировать HTML и CSS коды, появились только в конце 20-го века. Поэтому большинство сайтов создавалось в Блокноте и других подобных редакторах. Программа Блокнот не обладает дополнительными возможностями для разработки сайта, но тем не менее с помощью программы Блокнот можно создать качественный сайт. 24

Глава 2. Практическая часть 2.1. Структура проектируемого сайта Web-сайт кафе «Сказка» состоит из следующих Web-страниц: – главная страница, – закуски, – салаты, – горячие блюда, – напитки, – десерты, – заказать столик, – местоположение на карте, – фотогалерея, – интересные факты о еде. Главная страница сайта Главная страница – это основа сайта или его визитная карточка. На сайте главной страницы представлена важная информация о кафе, присутствуют ссылки для перехода на другие Web-страницы сайта и т.д. С помощью программы Paint макет будущей главной страницы сайта имеет вид, представленный на рис. 10. 25

Рис. 10. Макет главной страницы На рис. 10 представлены основные составляющие главной страницы: 1. Адрес в виде бегущей строки. 2. Видео некоторых блюд, которое можно включить или отключить по желанию. 3. Название кафе. 4. Информация об администраторе. 5. Кнопка «Заказать столик», ссылка для перехода заказа столика. 6. Режим работы, который оформлен в виде таблицы. 7. Меню, оформленное в виде таблицы, в каждой строке ссылка для перехода на список блюд по различным категориям: – закуски; – салаты; – горячие блюда; – десерты; – напитки; 8. Другие ссылки: – фотогалерея; 26

– местоположение на карте; – интересные факты о еде; 9. Опрос, ссылка для перехода на новую страницу. 10. Отзывы. Оформление меню на сайте кафе «Сказка» Как отмечалось выше, меню на сайте состоит из нескольких Webстраниц. Структура каждой Web-страницы одинакова. При переходе на Webстраницу открывается таблица, состоящая из 8 строк и 3 столбцов. В каждом столбце находится информация о блюде. На рис. 11 представлен макет Webстраниц: – «Горячие блюда»; – «Закуски»; – «Десерты»; – «Салаты»; Рис. 11. Макеты меню на сайте кафе «Сказка» Под цифрами обозначены столбцы: 27

1. Название и фото; 2. Состав; 3. Цена. Web-страница «Напитки» будет отличаться от предыдущих. Она состоит из двух столбцов: название и фото, цена. Кнопка «Заказать столик» на сайте кафе «Сказка» На главной странице сайта при помощи кнопки «Заказать столик» можно заказать столик, не выходя из дома. На рис. 12 представлен макет Webстраницы «Заказать столик». Рис. 12. Макет Web-страницы «Заказать столик» При переходе на вкладку заказать столик появляются поля, в которые нужно ввести следующую информацию (рис. 12): 1. Имя; 2. Фамилию; 3. Номер телефона; 4. День заказа; 28

5. Количество гостей. Поле ввода указано на рис. 12 цифрой 7. С помощью кнопки «Отправить» (цифра 6) клиент отправляет необходимую информацию на электронную почту кафе. Web-страница «Местоположение на карте» кафе «Сказка» В настоящее время многие объекты можно найти с помощью карт. Такими приемами пользуются не только фирмы, чтобы наглядно показать, где находится их здание, но и обычные пользователи, например, в социальных сетях. Одним из таких способов является добавление Яндекс карты (Yandex maps). Это инструмент, который позволит сообщить о местоположении офиса, склада или магазина [7]. Такая возможность присутствует и на сайте кафе «Сказка». Ссылка «Местоположение на карте» открывает вкладку с Яндекс картой, где здание кафе выделено специальным символом. На рис. 13 на карте Яндекс специальным символом указано местоположение кафе «Сказка». Рис. 13. Карта Яндекс, где специальным символом указано местоположение кафе «Сказка» Web-страница «Фотогалерея» на сайте кафе «Сказка» 29

Ссылка «Фотогалерея» открывает одноименною вкладку с фотографиями кафе. Web-страница «Фотогалерея» состоит из 8 фотографий. На рис. 14 представлен макет Web-страницы «Фотогалерея». Цифрами 18 показано расположение фотографий. Рис. 14. Макет Web-страницы «Фотогалерея» Web-страница «Интересные факты о еде» на сайте кафе «Сказка» Ссылка «Интересные факты о еде» открывает вкладку с двадцатью интересными фактами о еде. Каждый факт пронумерован и начинается с новой строки. На рис. 15 представлен макет Web-страница «Интересные факты о еде». Цифрами отмечен новый факт. 30

Рис. 15. Макет Web-страницы «Интересные факты о еде» 2.2 Подготовка к созданию сайта Опишем этапы разработки Web-сайта кафе «Сказка». Первым шагом будет создание папки «Сайт», в которой сохраняются все сконструированные Web-страницы и фотографии, используемые на сайте. Сохраним ее на рабочий стол. Для создания Web-страниц воспользуемся программой «Блокнот». Найти программу можно в папке «Стандартные». Каждая Web-страница сохраняется в отдельные файлы в программе «Блокнот» с расширением html. Создадим все нужные файлы, дадим им название в соответствие с наименованием Web-страниц и сохраним с расширением html в папку «Сайт». В эту же папку добавим все фотографии и видео, используемые на сайте (рис. 16). 31

Рис. 16. Папка Сайт Для создания и редактирования Web-страниц их нужно открыть в режиме блокнот. Сначала вставим шаблон кода HTML в каждую Web-страницу для отображения файла в браузере. Цвет фона задается с помощью атрибута <BGCOLOR>. Ниже представлен шаблон на примере Web-страницы «Главная страница»: <html> <head> <title> Главная страница </title> </head> <body BGCOLOR=PaleTurquoise> </body> </html> 32

После сохранения любой файл можно открыть в браузере. На рис. 17 представлена Web-страница «Главная страница». Рис. 17. Пример Web-страницы «Главная страница» Теперь можно переходить к разработке каждой Web-страницы. Код каждой страницы приведен в Приложениях 1-10: - Web-страница «Главная страница» - Приложение 1; - Web-страница «Горячие блюда» - Приложение 2; - Web-страница «Десерты» - Приложение 3; - Web-страница «Закуски» - Приложение 4; - Web-страница «Напитки» - Приложение 5; - Web-страница «Салаты» - Приложение 6; - Web-страница «Заказать столик» - Приложение 7; - Web-страница «Интересные факты о еде» - Приложение 8; - Web-страница «Местоположение на карте» - Приложение 9; - Web-страница «Фотогалерея» - Приложение 10. Рассмотрим подробно разработку каждой из Web-страниц. 33

2.3 Разработка Web-страницы «Главная страница» Начнём с разработки Web-страницы «Главная страница». Открываем соответствующий файл в режиме блокнот. Как отмечалось выше, все теги, используемые для разработки, пишутся после тега <body>. Адрес на Web-страницы сделаем в виде бегущей строки с помощью тега <marquee>. Внутри тега пишется слово или предложение, которое будет перемещаться. Напишем внутри адрес и телефон нашего кафе. <marquee> с. Становое, ул. Московская, 29а, 2-20-19 </marquee> После сохранения на Web-странице «Главная страница» появится адрес и телефон в виде бегущей строки слева направо, цвет текста чёрный (рис. 18). Рис. 18. Бегущая строка Теперь сделаем видео на сайте. Для этого используем тег <video> и его атрибуты: – width - задает ширину области для воспроизведения видеоролика [12]; – height - задает высоту области для воспроизведения видеоролика [12]; – controls - добавляет панель управления к видеоролику [12]. Видео сделаем с помощью программы «PowerPoint» (рис. 19) и программы «Скриншотер» (рис 20). Видео будет состоять из нескольких сменяющихся картинок. Для этого откроем PowerPoint, создадим 7 слайдов и вставим в них по одной картинке. Сделаем демонстрацию слайдов, выставим таймер сменяемости слайдов. С помощью записи видео в программе 34

«Скриншотер» запишем видео (рис. 21) и сохраним в формате mp4 в нашу папку. Рис. 19. Программа «PowerPoint» Рис. 20. Программа «Скриншотер» 35

Рис. 21 Запись видео В наш файл напишем следующий код: <video width="1840" height="320" controls="controls"> <source src="1.mp4" type='video/mp4'> </video> В первой строке указывается размер области воспроизведения видео, а также добавляется панель управления к видеоролику. Тег <source> во второй строке вставляет видеофайл. В атрибуте <src> указывается адрес файла, его название. Атрибут <type> задает MIME-тип источника. После сохранения на Web-странице появится видео (рис. 22). Его можно включить или остановить по желанию, также предусмотрено открытие на весь экран. 36

Рис. 22. Видео Следующие строки кода используются для написания текста для названия кафе и информация о администраторе кафе: <h1 style="font-size: 70px; color: DarkGreen" align="center"> кафе <em> "Сказка" </em> </h1> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Администратор </p> <p> Коняев Никита </p> <p> Телефон </p <p> 8-920-50737-17 </p> </em> </h2> Строка, которая отвечает за написание названия кафе, начинается с тега <h1> — это тег заголовка. HTML предлагает шесть заголовков разного уровня (рис. 23), которые показывают относительную важность секции, расположенной после заголовка. По умолчанию заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше [11]. 37

Рис. 23. Заголовки разного уровня HTML Таким образом, заголовком первого уровня написано название кафе, заголовком второго уровня – информация об администраторе. Форматирование текста осуществляется с помощью атрибутов: – font-size – определяет размер шрифта текста; – color – определяет цвет текста; – align – расположение текста. В данном случае "center" – расположения по центру, "left" – по левому краю. После этого пишется сам текст. В первом случае поместим слово Сказка в тег <em> для написания этого слова курсивом (рис. 24). Рис. 24. Название кафе 38

Информация об администраторе будет написана в несколько строк. Для этого нужен тег <p>. Текст внутри этого тега будет написан с новой строки (Рис. 25). Рис. 25. Информация об администраторе Режим работы кафе сделаем в форме таблицы. Таблица создается при помощи тега <table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Границы задаются с помощью свойства border, ширина устанавливается с помощью свойства width. Элемент <caption> создает подпись таблицы. Строки таблицы образуются с помощью тега <tr>. Элемент <td> создает ячейки, в которые помещаются данные. При расположении в одном ряду он определяет количество ячеек в строке таблицы. Вот такой вид примет код для таблицы «Режим работы»: <table border="10" width="20%" align="right"> <caption>Режим работы</caption> <tr> <td>Будни</td> <td>8.00-20.00</td> </tr> 39

<tr> <td>Выходные</td> <td>8.00-22.00</td> </tr> </table> На Web странице «Главная страница» таблица будет выглядеть следующим образом (рис. 26). Рис. 26. Режим работы Для создания кнопки «Заказать столик» на Web-странице «Главная страница» используем тег <button>. Название кнопки пишется внутри тега. C помощью атрибутов width и height можно задать ширину и высоту кнопки. Тег <a> предназначен для создания ссылок. Атрибут <href> тега <a> устанавливает якорь - закладка внутри страницы. При использовании ссылки происходит переход к закладке внутри Web-страницы. Для создания ссылки браузеру указывается, что является ссылкой, и добавляется адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа, на который происходит переход. Программный код имеет следующий вид. <p><a href="Заказать столик.html"> <button style="width:100px;height:100px"> Заказать столик </button> </a></p> 40

Кнопка «Заказать столик» на сайте кафе «Сказка» представлена на рис. 27. Рис. 27. Кнопка «Заказать столик» При нажатии на кнопку «Заказать столик» нам откроется одноименная Web-страница (рис. 28). Рис. 28. Действия после нажатия Теперь сделаем таблицы для меню (рис. 29). Рис. 29. Таблица «Меню» Про теги, которые для этого используются, описано выше. Изменятся только лишь некоторые свойства. Так, таблица «Меню» будет располагаться по 41

центру, а ее ширина больше, чем у таблицы «Режим работы». Слово Меню сделаем заголовком с помощью тега <th>. Элемент <th> предназначен для заголовка столбца, текст в котором выделяется полужирным начертанием. Таким образом, код для таблицы «Меню» примет вид: <table style="font-size: 40px; color: DarkGreen" align="center" width="50%" border="10"> <tr> <th> Меню </th> </tr> <tr> <td> <p><a href="Закуски.html"> Закуски </a></p></td> </tr> <tr> <td> <p><a href="Салаты.html"> Салаты </a></p></td> </tr> <tr> <td> <p><a href="Горячие блюда.html"> Горячие блюда </a></p> </td> </tr> <tr> <td> <p><a href="Десерты.html"> Десерты </a></p> </td> </tr> <tr> <td><p><a href="Напитки.html"> Напитки </a></p> </td> </tr </table> Также создается таблица для других ссылок. Границу рамки и ширину таблицы увеличиваем. Таблица не имеет заголовка. На рис. 30 представлена таблица для других ссылок. 42

Рис. 30. Таблица «Другие ссылки» Программный код имеет следующий вид. <table style="font-size: 40px" align="center" width="100%" border="100"> <tr> <td> <p><a href="Фотогалерея.html"> Фотогалерея </a></p></td> </tr> <tr> <td> <p><a href="Местоположение на карте.html"> Местоположение на карте </a></p> </td> </tr> <tr> <td> <p><a href="Интересные факты о еде.html"> Интересные факты о еде </a></p> </td> </tr> </table> Ссылки, расположенные внутри этих двух таблиц, работают одинаково: после нажатия левой кнопки мыши, открывается одноименная Web-страница. Для перехода назад на «Главную страницу» используется кнопка в браузере. Опрос на Web-странице составим с помощью сайта Anketolog.ru. После сохранения опроса сайт дает код. Его и вставляем в наш файл, при этом задавая шрифт. <a target="_blank" style="font-size: href="https://anketolog.ru/s/341163/dT7YQiRt">Оцените 48px" качество обслуживания</a> 43

Ссылка «Опрос» представлена на рис. 31. При нажатии открывается новая вкладка с опросом (рис. 32). Рис. 31. Опрос Рис. 32. Вкладка «Опрос» На Web-странице «Главная страница» далее будут отзывы (рис. 33). Рис. 33. Отзывы Для этого вставляем форму на Web-страницу с помощью элемента <form>. Форма предназначена для обмена данными между пользователем и сервером [19]. Добавляем атрибут <method>, который сообщает серверу о методе запроса. Существуют два метода: get и post. Используем метод post, который 44

посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем методу get. Теперь добавляем тег <input>, который создает элементы интерфейса и обеспечивает взаимодействие с пользователем. Тег предназначен для создания текстовых полей, различных кнопок и других элементов. Основной атрибут тега <type>, который и позволяет задавать элементы формы. В нашем случае он используется для создания текстового поля (text) и для вставки электронной почты (email). Атрибуты <placeholder> - выводит подсказывающий текст, а <name> предназначен для идентификации. Кнопка «Отправить» создается также с помощью тега <input>. Значение атрибута <type> ="submit" - кнопка для отправки формы. Также используем атрибут <value>. Он определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов [4]. Программный код имеет следующий вид. <form action="" method="post"> <input type="text" placeholder="Имя" name="fname" /> <input type="email" placeholder="E-mail" name="email" /> <textarea placeholder="Сообщение" name="message" rows="10" cols="45"></textarea> <input type="submit" value="Отправить" /> </form> Web-страница «Главная страница» будет выглядеть следующим образом рис. 34. 45

Рис. 34. Web-страница «Главная страница» 2.4. Разработка Web-страниц меню Переходим к разработке Web-страниц: - «Горячие блюда»; - «Десерты»; - «Закуски»; - «Напитки»; - «Салаты». Так как структура каждой из Web-страниц (кроме «Напитки») схожа, то и структура кодов будет не сильно отличаться. Открываем одноименные файлы в режиме блокнот. Основным тегом Web-страницы является <table>. Его свойства у каждой из Web-страниц будут одинаковы: <table style="font-size: 40px; color: DarkGreen" align="center" width="100%" border="10"> Следующий этап создания столбцов таблицы. На каждой Web-странице (кроме «Напитки») их три, заголовки которых одинаковы: <tr> <th> Блюда </th> 46

<th> Состав </th> <th> Цена </th> </tr> Далее образуются строки самого меню с помощью компонента <tr>, внутри которого расположен <td>. Он создает ячейки в строке. Вот так выглядит код на примере Web-страницы «Десерты». <tr> <td> <img width="100px" height="100px" src="30.jpg"> Творожнобанановый десерт </td> <td> <p> Творог мягкий </p> <p> Йогурт </p> <p> Мед </p> <p> Банан </p> <p> Шоколад тертый </p> </td> <td> 80 руб. </td> </tr> Первая строка с компонентом <td> отвечает за название блюда. Оно будет писаться в одноименном столбце. Вместе с названием блюда расположено и его фото небольших размеров. Для вывода изображений на экран используется тег <img>. Фотографии должны лежать в папке Сайт в формате jpg. Атрибуты <width> и <height> задают размер фотографии. Атрибут <sqr> задает адрес изображения. Вторая строка описывает состав блюда. Каждый продукт указан с новой строки, для этого используем тег <p>. Третья строка – столбец для цены. Это пример описания только одного блюда. Всего их будет 6. Подобным образом добавим строки кода для описания всех блюд. Web-страница «Десерты» примет вид (рис. 35). 47

Рис. 35. Web-страница «Десерты» Таким же образом описываются коды для Web-страниц: - «Закуски» (рис. 36); - «Горячие блюда» (рис. 37); - «Салаты» (рис. 38). Рис. 36. Web-страница «Закуски» 48

Рис. 37. Web-страница «Горячие блюда» Рис. 38. Web-страница «Салаты» Web-страница «Напитки» отличается от предыдущих тем, что в таблице будет две строки: 1. Название напитков без фото; 2. Цена. Код примет вид: 49

<table style="font-size: 40px; color: DarkGreen" align="center" width="100%" border="10"> <tr> <th> Напитки </th> <th> Цена </th> </tr> <tr> <td> Кофе Эспрессо </td> <td> 200 руб. </td> </tr> <tr> <td> Кофе Американо </td> <td> 400 руб. </td> </tr> <tr> <td> Горячий шоколад </td> <td> 500 руб. </td> </tr> <tr> <td> Чай с сахаром </td> <td> 100 руб. </td> </tr> <tr> <td> Чай без сахара </td> <td> 60 руб. </td> </tr> <tr> <td> Апельсиновый сок </td> <td> 500 руб. </td> </tr> 50

<tr> <td><p> Яблочный сок </td> <td> 500 руб. </td> </tr> <td> Молочный коктейль </td> <td> 500 руб. </td> </tr> </table> На рис. 39 представлен внешний вид Web-страницы «Напитки». Рис. 39. Web-страница «Напитки» 2.5. Разработка Web-страницы «Заказать столик» Перейдём к разработке Web-страницы «Заказать столик» (рис. 40). Открываем файл «Заказать столик». Главный тег <form>, который и задаёт форму. Расположим ее по центру с помощью тега <center>. Для написания текста и ввода данных с новой строки используем тег <br>. Тег <input> используем для создания ввода данных. Задаем максимальное количество символов с помощью атрибута - <maxlengt>. Атрибут <size> используем для ширины текстового поля. 51

Программный код имеет следующий вид. <form align="center"> Введите имя:<br> <input type="text" name="name" size=”15” maxlength=”20” value="" ><br> Введите фамилию:<br> <input type="text" name="surname" size=”20” maxlength=”25” value="" ><br> Введите номер телефона:<br> <input type="text" name="surname" size=”20” maxlength=”25” value="" ><br> Введите день заказа:<br> <input type="text" name="surname" size=”20” maxlength=”25” value="" ><br> Введите количество гостей:<br> <input type="text" name="surname" size=”20” maxlength=”25” value="" ><br> <input type="submit" name="otpravit" value="Отправить"> </form> Предпоследняя строка отвечает за создание кнопки «Отправить». Рис. 40. Web-страница «Заказать столик» 52

2.6. Разработка дополнительных Web-страниц Web-страница «Фотогалерея» Открываем соответствующий файл. Главный тег, используемый в Webстранице «Фотогалерея» (рис. 41), - <img>. В первую очередь нужно сохранить все фотографии в нашу папку в формате jpg. В коде после основного тега задаются ширина и высота картинки. Атрибут <sqr> задает адрес изображения. Пример кода для вывода на экран одной фотографии: <img width="400px" height="400px" src="1.jpg" > Рис. 41. Web-страница «Фотогалерея» Web-страница «Интересные факты о еде» Web-страница «Интересные факты о еде» состоит из текста и не имеет картинок. Каждый факт начинается с новой строки, с левого края. С помощью тега <p> осуществляется перенос по абзацам. Сам текст написан заголовком <h2>. Цвет зеленый. Пример кода для вывода на экран одного факта: 53

<h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №1 </p> <p> Если вы думаете, что васаби — это пряная зелёная паста и идеальный аккомпанемент <p> к вашему сашими из тунца, то вы немного заблуждаетесь. На самом деле васаби — </p> <p> это хрен и даже не всегда японский, поскольку не все заведения общественного </p> <p> питания готовы переплачивать за его импорт. </p> </h2> В файле «Интересные факты о еде» прописываются коды и для вывода других фактов. Web-страница интересные факты о еде представлена на рис. 42. Рис. 42. Web-страница «Интересные факты о еде» Web-страница «Местоположение на карте» Для установки Яндекс Карты на Web-страницу «Местоположение на карте» (рис. 43) нужно перейти на одноименный сайт (рис. 44). 54

Рис. 43. Яндекс Карта Рис. 44. Web-страница «Местоположение на карте» С помощью Конструктора карт выбирается нужный адрес, после этого он обозначается специальным символом. После сохранения выдается код. <script type="text/javascript" charset="utf-8" async src="https://api- maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A9ef313df23276cb96 f020b6284b1220f6a35f519ab5a22f97f58bc03b487705e&width=500&heig ht=400&lang=ru_RU&scroll=true"></script> Его и вставляем в файл «Местоположение на карте» после тега <body>. 55

Заключение В процессе написания ВКР был разработан Web-сайт для кафе «Сказка», который позволяет привлечь новых клиентов. Указанный Web-сайт предоставляет возможность: – узнать информацию о кафе; – заказать столик онлайн; – добавить отзывы. В ходе написания ВКР достигнута цель: разработан Web-сайт для кафе «Сказка». Также решены следующие задачи: 1) изучены теоретические аспекты создания Web-сайтов; 2) рассмотрены языки программирования, используемые в Webтехнологиях; 3) определена структура и пользовательский интерфейс сайта; 4) проведен анализ работоспособности созданного сайта. Перспективой использования разработанного сайта является возможность заказа еды на дом, а также доработка интерфейса сайта с целью дальнейшего повышения его качества. 56

Список использованных источников Воройский 1. Ф.С. Информатика. Энциклопедический систематизированный словарь-справочник / Ф.С. Воройский. - Москва: Физматлит, 2006. - 767 с. 2. Карпова T.C. Базы данных. Модели, разработка, реализация / Т.С. Карпова. - 2-е изд., испр. - Москва: НОУ "Интуит", 2016. – 403 с. 3. Котеров Д.В. PHP 5 / Д.В. Котеров, А.Ф. Костарев. - 2-е изд., перераб. и доп. – СПб.: БХВ-Петербург, 2008. - 1104 с. 4. Введение в HTML / А.И. Сурин, А.М. Русак, П.Б. Храмцов, С.А. Брик. – 2-е изд., испр. - Москва: НОИ Интуит, 2016. - 100 с. 5. Веряев А.А. Семиотика интерфейса системы «человек-компьютер и образовательный процесс / А.А. Веряев // Вестник Новосибирского государственного педагогического университета. - 2015. – 6(28). С. 68-69. 6. Гиперссылка: что это такое? – (дата https://1ps.ru/blog/dirs/seoglossary/chto-takoe-giperssyilka/ URL: обращения: 28.08.2019). 7. Как добавить Яндекс карту на сайт. - URL: http://needsite.net/ustanovkayandeks-kart-na-sajt/ (дата обращения: 26.11.2019). 8. Классификация сайтов по доступности сервисов. - URL: https://textarchive.ru/c-1164712.html (дата обращения: 10.09.2019). 9. Сайт – Википедия. - URL: https://ru.wikipedia.org/wiki/Сайт (дата обращения: 08.09.2019). 10.Статистика стран соцсетей России и в мире. - URL: https://www.webcanape.ru/business/vsya-statistika-interneta-na-2019-god-v-mire-i-v-rossii/ (дата обращения: 10.09.2019). 11. Справочник по HTML. Тег <h1>. - URL: http://htmlbook.ru/html/h1 (дата обращения: 15.04.2020). 12. Справочник по HTML. Тег <video>. - URL: http://htmlbook.ru/html/video (дата обращения: 06.12.2019). 57

13. Число пользователей интернет. - URL: http://900igr.net/prezentacija/informatika/internet-217417/chislo-polzovatelejinterneta-10.html (дата обращения: 10.09.2019). 14. Brackets - Wikiyy. - URL: https://ru.wikipedia.org/wiki/Brackets (дата обращения: 12.10.2019). 15. HTML. - URL: https://codernote.ru/html/ (дата обращения: 08.10.2019). 16. Python - Википедия. - URL: https://ru.wikipedia.org/wiki/Python (дата обращения: 10.12.2019). 17. WDH: HTML - Введение в HTML. - URL: http://www.arininav.ru/js/html01.htm (дата обращения: 09.10.2019). 18. WEB-ДИЗАЙНЕР. – Омск. http://omprofcenter.ru/index.php/chelovek-informatsiya/web-dizajner - URL: (дата обращения: 15.09.2019). 19. WebReference. Справочник по HTML. Элемент <form>. - URL: https://webref.ru/html/form (дата обращения: 12.05.2020). 58

Приложение 1. Код Web-страницы «Главная страница» <html> <head> <title>Главная страница</title> </head> <marquee> Адрес с. Становое, ул. Московская, 29а Телефон 2-20-19 </marquee> <body BGCOLOR=PaleTurquoise> <video width="1840" height="320" controls="controls"> <source src="1.mp4" type='video/mp4'> </video> <h1 style="font-size: 70px; color: DarkGreen" align="center"> кафе <em> "Сказка" </em> </h1> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Администратор </p> <p> Коняев Никита </p> <p> Телефон </p <p> 8-920-507-37-17 </p> </em> </h2> <table border="10" align="right"> <caption>Режим работы</caption> <tr> <td>Будни</td> <td>8.00-20.00</td> </tr> <tr> <td>Выходные</td> <td>8.00-22.00</td> </tr> </table> <p><a href="Заказать столик.html"> <button style="width:100px;height:100px"> Заказать столик </button> </a></p> 59

<table style="font-size: 40px; color: DarkGreen" align="center" width="50%" border="10"> <tr> <th> Меню </th> </tr> <tr> <td> <p><a href="Закуски.html"> Закуски </a></p></td> </tr> <tr> <td> <p><a href="Салаты.html"> Салаты </a></p></td> </tr> <tr> <td> <p><a href="Горячие блюда.html"> Горячие блюда </a></p> </td> </tr> <tr> <td> <p><a href="Десерты.html"> Десерты </a></p> </td> </tr> <tr> <td><p><a href="Напитки.html"> Напитки </a></p> </td> </tr </table> <table style="font-size: 40px" align="center" width="100%" border="100"> <tr> <td> <p><a href="Фотогалерея.html"> Фотогалерея </a></p></td> </tr> <tr> <td> <p><a href="Местоположение на карте.html"> Местоположение на карте </a></p> </td> </tr> <tr> 60

<td> <p><a href="Интересные факты о еде.html"> Интересные факты о еде </a></p> </td> </tr> </table> <a target="_blank" style="font-size: href="https://anketolog.ru/s/341163/dT7YQiRt">Оцените 48px" качество обслуживания</a> <form action="" method="post"> <input type="text" placeholder="Имя" name="fname" /> <input type="email" placeholder="E-mail" name="email" /> <textarea placeholder="Сообщение" name="message" rows="10" cols="45"></textarea> <input type="submit" value="Отправить" /> </form> </body> </html> 61

Приложение 2. Код Web-страницы «Горячие блюда» <html> <head> <title> Горячие блюда </title> </head> <body BGCOLOR=PaleTurquoise> <table style="font-size: 40px; color: DarkGreen" align="center" width="100%" border="10"> <tr> <th> Блюда </th> <th> Состав </th> <th> Цена </th> </tr> <tr> <td> <img width="100px" height="100px" src="23.jpg" > Котлета по-киевски </td> <td> <p> Филе курицы </p> <p> Масло сливочное </p> <p> Укроп </p> <p> Яйца </p> <p> Мука </p> </td> <td> 100 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="24.jpg" > Куриные "колобки" с грибами и сыром </td> <td> <p> Куриное филе </p> <p> Хлеб белый </p> <p> Лук репчатый </p> <p> Яйцо куриное </p> <p> Шампиньоны </p> <p> Сыр </p> </td> <td> 120 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="25.jpg" > Картошка "Веер" </td> 62

<td> <p> Картофель </p> <p> Сыр </p> <p> Смесь пряностей "Хмели-сунели" </p> <p> Паприка </p> <p> Масло подсолнечное </p> </td> <td> 100 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="26.jpg" > Мясо по-французски </td> <td> <p> Свинина </p> <p> Шампиньоны </p> <p> Лук репчатый </p> <p> Сыр </p> <p> Помидоры </p> <p> Горчица </p> </td> <td> 120 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="27.jpg" > Цыпленок табака </td> <td> <p> Цыплёнок </p> <p> Соль </p> <p> Перец чёрный </p> <p> Перец красный острый </p> <p> Чеснок </p> <p> Базилик </p> <p> Паприка </p> <p> Кетчуп </p> </td> <td> 150 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="28.jpg" > Чахохбили </td> <td> <p> Курица </p> <p> Лук </p> <p> Помидоры </p> <p> Томатная паста </p> <p> Перец болгарский </p> <p> Соус сацебели </p> <p> Чеснок </p> <p> Хмели-сунели </p> </td> <td> 100 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="29.jpg" > Свиные рулеты с ананасами </td> 63

<td> <p> Свинина </p> <p> Консервированный ананас </p> <p> Сыр твердый </p> <p> Ветчинная колбаса </p> <p> Белое вино </p> <p> Ананасовый сок </p> <p> Растительное масло </p> </td> <td> 120 руб. </td> </tr> </table> </body> </html> 64

Приложение 3. Код Web-страницы «Десерты» <html> <head> <title> Десерты </title> </head> <body BGCOLOR=PaleTurquoise> <table style="font-size: 40px; color: DarkGreen" align="center" width="100%" border="10"> <tr> <th> Блюда </th> <th> Состав </th> <th> Цена </th> </tr> <tr> <td> <img width="100px" height="100px" src="30.jpg" > Творожно-банановый десерт </td> <td> <p> Творог мягкий </p> <p> Йогурт </p> <p> Мед </p> <p> Банан </p> <p> Шоколад тертый </p> </td> <td> 80 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="31.jpg" > Тирамису </td> <td> <p> Печенье «Савоярди» </p> <p> Сыр сливочный </p> <p> Яйца </p> <p> Сахар </p> <p> Кофе </p> <p> Коньяк </p> <p> Какао-порошок </p> </td> <td> 90 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="32.jpg" > Сметанный торт </td> <td> <p> Сметана </p> <p> Мука </p> <p> Сахар </p> <p> Сметана жирная </p> <p> Сахар </p> <p> Ванильный сахар </p> <p> Цедра лимона </p> </td> 65

<td> 90 руб. </td> </tr> <tr> <td> <img width="50px" height="100px" src="33.jpg" > Творожно-банановый мусс </td> <td> <p> Творог пастообразный </p> <p> Бананы </p> <p> Какао-порошок </p> <p> Ванильный сахар </p> <p> Орехи </p> </td> <td> 100 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="34.jpg" > Банановое парфе </td> <td> <p> Бананы </p> <p> Творог </p> <p> Сметана </p> <p> Корица </p> <p> Сахарная пудра </p> </td> <td> 100 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="35.jpg" > Пончики на сгущёнке </td> <td> <p> Мука </p> <p> Сгущённое молоко </p> <p> Яйцо </p> <p> Соль </p> <p> Сахарная пудра </p> </td> <td> 120 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="36.jpg" > Панна котта </td> <td> <p> Сливки </p> <p> Молоко </p> <p> Сахар </p> <p> Желатин </p> <p> Ванилин </p> </td> <td> 120 руб. </td> </tr> </table> 66

</body> </html> Приложение 4. Код Web-страницы «Закуски» <html> <head> <title> Закуски </title> 67

</head> <body BGCOLOR=PaleTurquoise> <table style="font-size: 40px; color: DarkGreen" align="center" width="100%" border="10"> <tr> <th> Блюда </th> <th> Состав </th> <th> Цена </th> </tr> <tr> <td> <img width="100px" height="100px" src="9.jpg" > Закуска "Рафаэлки" </td> <td> <p> Сыр </p> <p> Яйца </p> <p> Чеснок </p> <p> Крабовые палочки </p> <p> Майонез </p> </td> <td> 40 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="10.jpg" > Канапе с колбасой и сыром </td> <td> <p> Хлеб белый </p> <p> Колбаса сыровяленая </p> <p> Огурец </p> <p> Помидоры (маленькие) </p> <p> Сыр твердый </p> <p> Маслины </p></td> <td> 50 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="11.jpg" > Домашние сырные палочки </td> <td> <p> Сыр твердый </p> <p> Яйцо </p> <p> Мука </p> <p> Масло растительное </p> </td> <td> 65 руб. </td> </tr> 68

<tr> <td> <img width="100px" height="100px" src="12.jpg" > Закуска из лаваша </td> <td> <p> Лаваш тонкий </p> <p> Яйца </p> <p> Крабовые палочки </p> <p> Сыр </p> <p> Чеснок </p> <p> Зелень (петрушка, укроп, зеленый лук) </p> <p> Перец черный молотый </p> <p> Майонез </p> </td> <td> 80 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="13.jpg" > Закуска "Павлиний хвост" </td> <td> <p> Баклажаны </p> <p> Помидоры </p> <p> Огурец </p> <p> Сыр твердый </p> <p> Чеснок </p> <p> Майонез </p> <p> Маслины </p> <p> Соль </p> </td> <td> 90 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="14.jpg" > Гренки со шпротами </td> <td> <p> Булочки бутербродные</p> <p> Шпроты </p> <p> Яйца куриные </p> <p> Помидор </p> <p> Майонез </p> <p> Чеснок </p> </td> <td> 100 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="15.jpg" > Закуска "Сырные палочки" из лаваша </td> <td> <p> Лаваш тонкий </p> <p> Сыр </p> <p> Чеснок </p> <p> Яйцо </p> <p> Сухари панировочные </p> </td> <td> 100 руб. </td> </tr> 69

</table> </body> </html> Приложение 5. Код Web-страницы «Напитки» <html> <head> <title> Напитки </title> </head> <body BGCOLOR=PaleTurquoise> 70

<tr> <td><p> Яблочный сок </td> <td> 500 руб. </td> </tr> <td> Молочный коктейль </td> <td> 500 руб. </td> </tr> </table> </body> </html> Приложение 6. Код Web-страницы «Салаты» <html> <head> <title> Салаты </title> </head> <body BGCOLOR=PaleTurquoise> 72

<table style="font-size: 40px; color: DarkGreen" align="center" width="100%" border="10"> <tr> <th> Блюда </th> <th> Состав </th> <th> Цена </th> </tr> <tr> <td> <img width="100px" height="100px" src="16.jpg" > Салат с сухариками "Королевский" </td> <td> <p> Яйца куриные </p> <p> Крабовые палочки </p> <p> Сыр твердый </p> <p> Сухарики </p> <p> Чеснок </p> <p> Лимон (сок) </p> <p> Майонез </p> </td> <td> 70 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="17.jpg" > Салат "Ёжик" </td> <td> <p> Колбаса копченая </p> <p> Сыр твердый </p> <p> Яйца вареные </p> <p> Кукуруза консервированная </p> <p> Чеснок </p> <p> Майонез </p> </td> <td> 80 руб. </td> </tr> <tr> <td> <img width="100px" height="100px" src="18.jpg" > Салат "Красное море" </td> <td> <p> Крабовые палочки </p> <p> Помидоры </p> <p> Сыр </p> <p> Чеснок </p> <p> Майонез </p> </td> <td> 80 руб. </td> </tr> <tr> 73

<td> <img width="100px" height="100px" src="19.jpg" > Cалат из грибов и курицы </td> <td> <p> Грудка куриная </p> <p> Яйцо куриное </p> <p> Сыр твердый </p> <p> Грибы белые </p> <p> Лук репчатый </p> <p> Масло подсолнечное </p> <p> Майонез </p> </td> <td> 90 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="20.jpg" > Салат "Весенний бриз" </td> <td> <p> Помидоры </p> <p> Крабовые палочки </p> <p> Сыр твердый </p> <p> Чеснок </p> <p> Майонез </p> <p> Зелень </p> </td> <td> 90 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="21.jpg" > Cалат Цезарь </td> <td> <p> Куриная грудка отварная </p> <p> Яйца вареные </p> <p> Сухарики </p> <p> Сыр твердый </p> <p> Помидоры Черри </p> <p> Листья салата </p> <p> Соль </p> <p> Горчица </p> <p> Чеснок </p> <p> Сок лимона </p> <p> Масло оливковое </p> </td> <td> 100 руб. </td> </tr> <tr> <td><p><img width="100px" height="100px" src="22.jpg" > Салат "Греческий" </td> <td> <p> Огурец </p> <p> Помидор </p> <p> Болгарский перец </p> <p> Маслины без косточки </p> <p> Cыр </p> <p> Петрушка </p> <p> Итальянские травы </p> <p> Оливковое масло </p> </td> <td> 100 руб. </td> </tr> 74

</table> </body> </html> Приложение 7. Код Web-страницы «Заказать столик» <html> <head> <title> Заказать столик </title> </head> <body BGCOLOR=PaleTurquoise> <form align="center"> Введите имя:<br> <input type="text" name="name" size=”15” maxlength=”20” value="" ><br> 75

Введите фамилию:<br> <input type="text" name="surname" size=”20” maxlength=”25” value="" ><br> Введите номер телефона:<br> <input type="text" name="surname" size=”20” maxlength=”25” value="" ><br> Введите день заказа:<br> <input type="text" name="surname" size=”20” maxlength=”25” value="" ><br> Введите количество гостей:<br> <input type="text" name="surname" size=”20” maxlength=”25” value="" ><br> <input type="submit" name="otpravit" value="Отправить"> </form> </body> </html> Приложение 8. Код Web-страницы «Интересные факты о еде» <html> <head> <title> Интересные факты о еде </title> </head> <body BGCOLOR=PaleTurquoise> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №1 </p> <p> Если вы думаете, что васаби — это пряная зелёная паста и идеальный аккомпанемент <p> к вашему сашими из тунца, то вы немного заблуждаетесь. На самом деле васаби — </p> <p> это хрен и даже не всегда японский, 76

поскольку не все заведения общественного </p> <p> питания готовы переплачивать за его импорт. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №2 </p> <p> Известно, что шоколад когда-то был валютой. В начале нашей эры древние </p> <p> цивилизации Мексики и Южной Африки, в частности майя и ацтеки, использовали </p> <p> какао-бобы в своей денежной системе. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №3 </p> <p> McDonald’s продает 75 гамбургеров каждую секунду каждого дня. Это примерно 6,5 миллионов </p> <p> в день и 2,5 миллиарда в год. Довольно неплохо, правда? </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №4 </p> <p> Вы слышали, что шеллак используется для создания маникюра, но знали ли вы, что им покрывают </p> <p> сладкие драже для того, чтобы те были красивыми и блестящими? </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №5 </p> <p> В 1800-х годах люди верили, что томаты обладают мощными целебными свойствами </p> <p> и могут избавить от диареи, желтухи и расстройств желудка. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №6 </p> <p> Четыре и более чайные ложки мускатного ореха способны вызвать лёгкие галлюцинации.</p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №7 </p> <p> Если вы думаете, что васаби — это пряная зелёная паста и идеальный аккомпанемент <p> к вашему сашими из тунца, то вы немного заблуждаетесь. На самом деле васаби — </p> <p> это хрен и даже не всегда японский, поскольку не все заведения общественного </p> <p> питания готовы переплачивать за его импорт. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №8 </p> <p> Не секрет, что бананы являются отличным источником клетчатки, </p> <p> защищают от диабета типа II, помогают потерять вес и сохраняют уровень 77

сахара в крови устойчивым, </p> <p> но мало кто знает, что благодаря высокому содержанию триптофана, преобразующегося в серотонин, бананы — отличные помощники в борьбе с депрессией. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №9 </p> <p> Существует более 7500 сортов яблок, отличающихся друг от друга по размеру — от </p> <p> небольшой «вишенки» до «большого грейпфрута», но самое тяжёлое яблоко удалось </p> <p> вырастить японцу Чисато Ивасаки в 2005 году. Вес яблока — 1,849 кг. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №10 </p> <p> Натуральный жемчуг растворяется в уксусе, поддельный не растворится никогда. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №11 </p> <p> Если вы за натуральную красоту и натуральные средства для её улучшения, то </p> <p> вымойте волосы в свекольной воде и навсегда забудьте о том, что такое перхоть.</p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №12 </p> <p> Существует примерно 350 различных форм макаронных изделий. </p> <p> Итальянцы настаивают, что форма может повлиять на вкус, поэтому выбирайте тщательнее. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №13 </p> <p> Греческий йогурт содержит почти в два раза больше белка, чем другие виды йогурта. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №14 </p> <p> Первым продуктом, опробованным в микроволновой печи после её изобретения, был </p> <p> попкорн. Вторым — яйцо, которое взорвалось и прилетело в лицо бедняги-экспериментатора. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №15 </p> <p> Вода не имеет срока годности, однако после вскрытия бутылки её химический состав </p> <p> будет неизменно меняться. </p> </h2> 78

<h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №16 </p> <p> Компания Starbucks разработала более 87 000 комбинаций напитков.</p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №17 </p> <p> Консервированные персики были первым фруктом, съеденным на Луне.</p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №18 </p> <p> Куриный суп в Средневековье считался афродизиаком. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №19 </p> <p> Курица содержит в 266% больше жира и в 33% меньше белка, чем 40 лет назад. </p> </h2> <h2 style="font-size: 20px; color: DarkGreen" align="left"> <p> Факт №20 </p> <p> Мёд — единственный «вечно живой» продукт. Он не испортится даже через 3000 лет хранения. </p> </h2> </body> </html> Приложение 9. Код Web-страницы «Местоположение на карте» <html> <head> <title> Местоположение на карте </title> </head> <body BGCOLOR=PaleTurquoise> <script type="text/javascript" charset="utf-8" async src="https://api- maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A9ef313df23276cb96 f020b6284b1220f6a35f519ab5a22f97f58bc03b487705e&width=500&heig ht=400&lang=ru_RU&scroll=true"></script> </body> </html> 79

Приложение 10. Код Web-страницы «Фотогалерея» <html> <head> <title> Фотогалерея </title> </head> <body BGCOLOR=PaleTurquoise> <img width="400px" height="400px" src="1.jpg" > <img width="400px" height="400px" src="2.jpg" > <img width="400px" height="400px" src="3.jpg"> <img width="400px" height="400px" src="4.jpg"> <img width="400px" height="400px" src="5.jpg" > <img width="400px" height="400px" src="6.jpg" <img width="400px" height="400px" src="7.jpg" > <img width="400px" height="400px" src="8.jpg" > 80

</body> </html> 81

Рецензии:

Авторизуйтесь, чтобы добавить рецензию

- у работы пока нет рецензий -

Отзывы:

Авторизуйтесь, чтобы оставить отзыв