Разработка web сайта на основе HTML с использованием JavaScript - Курсовая работа

Содержание

ВВЕДЕНИЕ 5

ОСНОВНАЯ ЧАСТЬ 7

ГЛАВА 1. ОСНОВНЫЕ СРЕДСТВА HTML, CSS И JAVASCRIPT ДЛЯ СОЗДАНИЯ СТАТИЧЕСКИХ ВЕБ-СТРАНИЦ 7

1.1 НАЗНАЧЕНИЕ И ОСНОВНЫЕ СРЕДСТВА ЯЗЫКА HTML 7

1.2 НАЗНАЧЕНИЕ И ВОЗМОЖНОСТИ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ CSS 8

1.3 ТЕХНОЛОГИИ СОЗДАНИЯ JAVASCRIPT-СЦЕНАРИЕВ В WEB-СТРАНИЦАХ 10

ГЛАВА 2. ОПИСАНИЕ ТЕХНОЛОГИЙ РАЗРАБОТАННОГО WEB-САЙТА 12

2.1 СТРУКТУРА САЙТА 12

2.2 ОПИСАНИЕ ТЕХНОЛОГИЙ HTML 12

2.3 ОПИСАНИЕ ТЕХНОЛОГИЙ CSS 18

2.4 ОПИСАНИЕ JAVASCRIPT-СЦЕНАРИЕВ 22

ГЛАВА 3. ОПИСАНИЕ ИНТЕРФЕЙСА И ПРИНЦИПА РАБОТЫ WEB-САЙТА 25

3.1 ОПИСАНИЕ ИНТЕРФЕЙСА САЙТА 25

3.2 ОПИСАНИЕ ПРИНЦИПА РАБОТЫ САЙТА 25

ЗАКЛЮЧЕНИЕ 27

СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ 28

ПРИЛОЖЕНИЕ 29

Введение (выдержка)

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

Тема данного курсового проекта звучит как «Обзор комисксов».

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

Объектом исследования является процесс разработки многостраничного сайта с соответствующим теме содержанием.

Предметом исследования являются:

1. Язык гипертекстовой разметки HTML;

2. Таблицы каскадных стилей CSS;

3. Прототипно-ориентированный сценарный язык программирования JavaScript.

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

Цель проекта: создать сайт «Обзор комисксов» с языком гипертекстовой разметки HTML, таблицы каскадных стилей CSS и прототипно-ориентированного сценарного языка программирования JavaScript.

Задачи проекта:

— Изучить функциональные возможности HTML;

— Изучить ь функциональные возможности CSS;

— Изучить функциональные возможности JavaScript;

— Разработать макеты страниц сайта;

— Наполнить страницы сайта информацией по теме;

— Выполнить все необходимые требования согласно заданию.

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

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

Основная часть (выдержка)

ГЛАВА 3. ОПИСАНИЕ ИНТЕРФЕЙСА И ПРИНЦИПА РАБОТЫ WEB-САЙТА

3.1 ОПИСАНИЕ ИНТЕРФЕЙСА САЙТА

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

Далее идет текстовый блок с описанием.

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

Главная страница имеет блочный тип верстки, так же, остальные страницы сайта. Главная страница также содержит кнопку, при нажатии которой пользователю предлагается ввести свое имя. Используется метод javascript prompt().

Страница con-1.html перед загрузкой выдает окно с предупреждением, что на сайте имеются материалы с возрастным ограничением. Используется метод javascript alert().

Во все страницы кроме main.html встроены таблицы.

3.2 ОПИСАНИЕ ПРИНЦИПА РАБОТЫ САЙТА

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

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

Обычно статический веб-сайт представляет собой набор файлов HTML, размещенных на веб-сервере.

Заключение (выдержка)

Курсовой проект был выполнен с соблюдением всех требований к его разработке. Поставленная во введении цель «создать сайт «Обзор комиксов» с языком гипертекстовой разметки HTML, таблиц каскадных стилей CSS и прототипно-ориентированного сценарного языка программирования JavaScript» выполнена.

При написании данной работы были изучены язык гипертекстовой разметки HTML, каскадные таблицы стилей CSS и сценарный язык программирования JavaScript, а также способы создания сайтов с их помощью. Данный навык является необходимым для студентов, обучающихся в сфере IT-технологий.

С помощью различных способов верстки (табличной и блочной) были созданы четыре страницы сайта: с текстом, изображениями, ссылками, стилями. Интерактивность сайта достигнута за счет использования встроенных JavaScript-сценариев, в том числе с помощью методов prompt() и alert().

Всего в ходе выполнения проекта при разработке сайта были использованы все обязательные согласно заданию технологии, такие как: списки (нумерованные, маркированные, определений); таблицы (с текстовой и графической информацией); вложенные таблицы; стили, встроенные в тег, во внутреннюю или внешнюю таблицу стилей; классы тегов и идентификаторы ID; сценарии JavaScript, встроенные тремя различными способами.

При дальнейшем изучении web-разработки данный сайт можно будет дополнить и улучшить структуру, задать единый стиль, добавить новые технологии, поддерживающиеся HTML, CSS и JavaScript.

Литература

1. Волынкин П. А.; Любимов А.Г. Основы web-программирования: методические указания по курсовому проектированию по дисциплине «Основы интернет-технологий», (бакалавриат), для студентов очной и заочной форм обучения / П. А Волынкин, А. Г. Любимов, СПбГУТ. – СПб., 2022. – 38с.

2. Ташков, Петр. Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / Петр Ташков. - М.: Книга по Требованию, 2014. - 512 c.

3. Основы HTML [Электронный ресурс]. – Режим обращения: https://html**ook.ru/osnovy-html/ (дата обращения: 30.11.2021)

4. Справочник по HTML [Электронный ресурс]. – Режим обращения: http://ht**book.ru/html/ (дата обращения: 30.11.2021)

Примечания

Есть все тексты исходных кодов