Размещено на http://www.allbest.ru/

ИНСТИТУТ СЕРВИСА И ОТРАСЛЕВОГО УПРАВЛЕНИЯ

Кафедра бизнес-информатики и математики

Курсовая работа

По дисциплине «WEB-дизайн»

Разработка и создание сайтов на HTML и CSS



Содержание

сайт информация тег структура

1. Введение

2. Глава первая

2.1 Виды, структура и классификация сайтов

2.1.1 Структура сайтов

2.1.2 Классификация сайтов по технологии создания

2.1.3 Классификация сайтов по категории решаемых задач

3. Глава вторая

3.2. Практическая часть

3.2.1 Таблица использованных тегов HTML

3.2.2 Макет сайта

3.2.3 Свойства CSS

3.2.4 Тело сайта - шапка, подвал, основная часть

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

5. Список использованной литературы



1. Введение

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

HTML - стандартизированный язык разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.

CSS (язык таблиц стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Также может применяться к любым XML-документам, например, к SVG или XUL.

Актуальность - Актуальность разработки сайта объясняется следующими факторами:

· Быстрота подачи информации широкому кругу лиц;

· Улучшение имиджа компании и повышение ее популярности;

· Возможность организовать обратную связь с клиентами;

· Оперативная связь с филиалами и представителями в разных концах страны и за рубежом;

· Организация маркетинговых исследований;

· Реклама и привлечение покупателей и клиентов;

· Увеличение трафика.

Объект исследования - предметная область разработка и верстка сайтов.

Предмет исследования - разработка web-сайта «Дельфины»

Цель работы - написание курсового проекта по дисциплине «WEB-дизайн» на тему «Разработка и создание сайтов на HTML и CSS».

Задачи работы:

· Изучить виды web-сайтов

· Изучить основные понятия

· Создать сайт с использованием HTML и CSS

Курсовая работа содержит 42 страницы, 10 источников, 38 рисунков, 0 таблиц.

Ключевые слова: веб-дизайн, разработка сайта, сайты, верстка.

Результатом работы является готовый курсовой проект по дисциплине «WEB-дизайн».

Курсовая работа выполнена в текстовом редакторе Microsoft Office Word 2016 и представлена на компакт-диске (в конверте на обороте обложки).

Разработка сайта будет осуществляться с помощью программного обеспечения Sublime Text 4.



2. Глава первая

2.1. Виды, структура и классификация сайтов

2.1.1 Структура сайтов

Правильно структурированный сайт повышает лояльность к сайту со стороны его посетителей. Виды структур:

· Древовидная структура

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

Недостаток данной структуры заключается в том, что в древовидной структуре сложно соблюдать баланс между “глубиной” и “шириной”. Если дерево будет расти только вглубь, то пользователям, чтобы просмотреть какую-то информацию, придется загрузить и просмотреть слишком много страниц, что неудобно.

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



Рис. 1 Древовидная структура сайта

· Линейная структура сайта

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



Рис. 2 Линейная структура сайта

· Линейная структура с альтернативными вариантами

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

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

· Линейная структура с ответвлениями

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

Удобство этой структуры в том, что к ней не сложно перейти с обычной линейной структуры без глубокой переработки сайта (если требования к сайту возросли). После таких изменений сайт не теряет удобство и простоту для просмотра посетителями.

Рис. 3 Линейная структура с ответвлениями

· Решетчатая структура

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

Рис. 4 Решетчатая структура

2.1.2 Классификация сайтов по технологии создания

Еще одна классификация сайтов - по технологии создания. Сайты создаются:

· Самостоятельно (вручную);

· На базе готовых движков;

· С помощью онлайн-конструкторов.

1. Простые HTML-странички

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

2. CMS-системы

Системы управления - CMS, представляют собой основу для формирования будущего сайта, содержат шаблоны для создания дизайна и разработки функционала под любые задачи. Создание страниц осуществляется на основе блоков (header, footer, sidebar и т.д.), представленных в виде фрагментов кода с готовой структурой. Контент и настройки сайта хранятся в базе данных MySQL.

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

3. Конструкторы

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

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

4. Flash-технология

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

К недостаткам относится сложность управления, низкая скорость загрузки и плохая индексация в поисковиках. На момент написания курсовой работы данная технология больше не используется, поэтому не рекомендуется создавать портал как полностью на Flash, так и с использованием отдельных элементов технологии.



2.1.3 Классификация сайтов по категории решаемых задач

1. Персональные (домашние) странички

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

Рис. 5 Персональная страничка - курсовая работа

2. Сайт-визитка

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

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

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

Рис. 6 Сайт-визитка «Тортишная»

3. Информационные сайты

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

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

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

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

Рис. 7 Информационный сайт РАН

3.1. Игровые порталы

Игровой портал - одна из разновидностей информационных сайтов, основной темой которых являются игры, игровые новости, обзоры на них.

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

Рис. 8 сайт по игре DOTA 2

4. Промо-сайты

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

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

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

Рис. 9 Промо-сайт «Книга Джунглей»

5. Сайт-фотогалерея

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

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

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

Рис. 10 Сайт-фотогалерея

6. Информационные интернет-издания, СМИ, новостные сайты

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

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

В зависимости от охвата, новости бывают:

· Узкотематические - информируют о новостях в какой-либо отдельной области: сфере недвижимости, строительстве, на финансовом рынке и пр.;

· С широкой тематикой - освещающие события в различных областях, от политики и экономики до науки, спорта и модных тенденций.

Новостные сайты различаются также по способу сбора информации:

· Публикация новостей пользователями, которым стало известно о каком-либо произошедшем событии;

· Автоматический поиск и размещение информации самим ресурсом;

· Подбор и публикация текстов редакторами портала - в переписанном виде, либо в оригинале, со ссылкой на источник;

· Смешанного типа, с поиском новостей модераторами и читателями.

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

Рис. 11 Новостной сайт НТВ

7. Крупные информационные порталы, или контент-проекты

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

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

Информационные сайты могут иметь совершенно разный дизайн, направленность и целевую аудиторию.

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

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

Рис. 12 Информационный портал органов государственной власти Тюменской области

8. Корпоративные сайты

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

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

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

Рис. 13 Корпоративный сайт компании «Магнит»

8.1. Корпоративный информационный web-сайт

Этот вид корпоративного портала необходим для автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом. Оснащается функциями обмена информацией между удалёнными филиалами. Дизайн такого вида корпоративного портала соответсвует фирменному стилю компании, что позволяет позитивно влиять на репутацию и имидж компании. Сайт включает в себя администраторскую часть, для создания и изменения контента. Администраторская часть позволяет менеджеру или секретарю компании добавлять или менять новости, информационные статьи, справочную и прочую информацию на сайте. Графическая часть минимальная, основной упор идет на текст.

Рис. 14 Корпоративный сайт водителей и курьеров компании «Яндекс»

8.2. Корпоративный имиджевый web-сайт

Этот вид корпоративного сайта подходит для обеспечения имиджевого присутствия в сети Интернет. Сайт служит для предоставления подробной информации о компании, ее истории, сведений об оказываемых услугах или поставляемых товарах. Корпоративный имиджевый сайт обычно содержит ленту новостей компании, средства публикации информации о рекламных и торговых акциях, информацию для прессы и другие сведения. Зачастую корпоративные имиджевые сайты сочетают информацию о компании с каталогом продукции. Дизайн такого вида сайта представляет собой эксклюзивный оригинальный дизайн, выгодно представляющий компанию. Сочетает в себе использование нестандартных идей и решений в оформлении. Графическая часть составляет половину, другую половину составляет текстовая часть.

9. Интернет-магазины

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

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

При этом магазин обязан:

· Организовать цепочки логистических поставок - от поставщика на склад, со склада в пункты выдачи, от пунктов выдачи до клиента;

· Проконтролировать расчеты с покупателем за поставку;

· В случае возникновения претензий со стороны покупателя или поставщиков обрабатывать их;

· Организовать возврат товаров на склад;

· Организовать списание товара.

Рис. 15 Интернет-магазин «Aliexpress»

10. Контент-проекты

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

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

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

Рис. 16 Контент-проект «Большая российская энциклопедия»

11. Сайты-форумы

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

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

Таким образом, контент-проект, наряду с сайтом-форумом - хороший инструмент для проведения маркетинговых исследований рынка и раскрутки основного сайта.

Рис. 17 Форум программистов «Киберфорум»

12. Каталоги сайтов

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

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

Преимущество добавления сайтов в наиболее популярные каталоги:

· Присвоение сайту тематики;

· Облегчение выхода сайта на топовые позиции в выдаче;

· Повышение посещаемости ресурса;

· Увеличение стоимости ссылок на сайт.

Основные критерии для сайта попадания в такой каталог:

· Оригинальный дизайн;

· Уникальный контент;

· Некоммерческая тематика;

· Отсутствие рекламы;

· Частые обновления.

Рис. 18 Каталог сайтов

13. Сайты-сервисы

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

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

Рис. 19 Сайт-сервис «Яндекс-переводчик»

13.1. Онлайн-карты

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

Рис. 20 Яндекс-карты

14. Сайты-социальные сети

Одни из самых известных и популярных типов сайтов. Цель этих сайтов в знакомстве и общении людей, обмене информации между ними. В социальных сетях каждый пользователь может самостоятельно выбирать себе аудиторию, делиться с ними заметками, интересными новостями и вступать в дискуссию в комментариях или личной переписке. Сайты позволяют создавать группы, где по интересам объединяются люди из разных уголков России и стран зарубежья. Многие крупные компании создают собственные соцсети, с целью общения между собой. Популярность соцсетей растет с огромной скоростью.



Рис. 21 Социальная сеть «Одноклассники»

12. Блоги

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

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

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

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



Рис. 22 Блог



3. Глава вторая

3.2 Практическая часть

3.2.1 Таблица использованных тегов HTML

Тег	Строка кода, где впервые встречается	Назначение
html	1	Основной тег страницы
head	3	Контейнер для метаданных
title	5	Заголовок сайта в браузере
style	6	Тег для стилей CSS
ul	7	Создает маркированный список
a	11	Создает гипертекстовые ссылки
li	12	Элемент маркированного списка
body	26	Тело документа
div	27	Блочный элемент
header	28	Создает шапку сайта
img	40	Встраивает изображение
h2	43	Заголовок второго уровня
h3	48	Заголовок третьего уровня
p	49	Параграф текста
h4	79	Заголовок четвертого уровня
iframe	80	Создает встроенный фрейм, загружая другой HTML-документ
footer	144	Создает подвал
section	146	Логическая область страницы

3.2.2 Макет сайта

С самого начала мы создаем текстовый файл и присваеваем ему расширение.html. Далее вписываем скелет сайта, или макет. Макет сайта в программном обеспечении Sublime Text 4 задается написанием тега html, после чего автоматически создается макет:



Рис. 23 скелет сайта

3.2.3 Свойства CSS

Вся работа будет осуществляться внутри одного файла, поэтому внутри тега head мы списываем нужные нам css-свойства. Чтобы задать нужный нам шрифт на сайте, мы скачиваем с интернета тот, что нам нужен, после чего вписываем в код сайта с помощью свойства @font-face:

Рис. 24 свойства css

3.2.4 Тело сайта - шапка, подвал, основная часть

Все теги и классы прописываются внутри тега body. Создадим шапку сайта, с помощью тега header. В коде прописываем свойства для самой шапки с помощью CSS, и создаем маркированный список:



Рис. 25 шапка сайта

Рис. 26 внешний вид шапки сайта

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

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

1-я часть будет целиком состоять из картинки дельфина, для вставки которой используем тег img.

Рис. 27 внешний вид первой части сайта

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

Рис. 28 блок с текстом-заголовком

Рис. 29 один из блоков текста с картинкой

Рис. 30 внешний вид второй части сайта

3-я часть будет состоять из блока с текстом заголовка, и блоком с текстом и Google - картой

Рис. 31 блок с текстом-заголовком

Рис. 32 блок с текстом и Google-картой

Для вставки в сайт Google - карты мы открываем сами карты, вбиваем необходимые нам адреса, с помощью кнопки поделиться копируем html-код и вставляем себе в сайт внутрь блока div, с использованием тега ifame.

Рис. 33 внешний вид третьей части сайта

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

Рис. 34 блок с текстом-заголовком

Рис. 35 блок с текстом

Рис. 36 внешний вид четвертой части сайта

Создадим подвал сайта. Для этого используем тег footer. В отличие от шапки, здесь маркированный список будет внутри тега section, которых будет несколько. [6,7,8,9,10]

Рис. 37 подвал сайта

Рис. 38 внешний вид подвала сайта



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

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

Тестирование - сайт был мною протестирован, все картинки отображаются, карты свою функцию выполняют, сайт одинаково работает на трех устройствах.

Цель курсовой работы мною была выполнена в полном объеме и представлена научному руководителю для оценки.



5. Список использованной литературы

1. СТРУКТУРА WEB-САЙТА И ЕЕ ВЛИЯНИЕ НА ПРОДВИЖЕНИЕ Передерий Р.Ю. Международный научный студенческий журнал. 2018. № 7. С. 171-174. СТАТЬЯ В ЖУРНАЛЕ - НАУЧНАЯ СТАТЬЯ

2. АНАЛИЗ ВЕБ - ДИЗАЙНА И КЛАССИФИКАЦИЯ ИНТЕРНЕТ-САЙТОВ Лукашенко Н.Н. В сборнике: Научное сообщество студентов. Междисциплинарные исследования. Электронный сборник статей по материалам ХII студенческой международной научно-практической конференции. 2017. С. 70-76. СТАТЬЯ В СБОРНИКЕ ТРУДОВ КОНФЕРЕНЦИИ

3. ВИДЫ САЙТОВ И ИХ КЛАССИФИКАЦИЯ ПО РАЗЛИЧНЫМ ПРИЗНАКАМ Прошкина С.А. В сборнике: Перспективы развития науки в современном мире. Сборник статей по материалам VI международной научно-практической конференции. В 2-х частях. 2018. С. 114-119. СТАТЬЯ В СБОРНИКЕ ТРУДОВ КОНФЕРЕНЦИИ

4. РЕИНЖИНИРИНГ САЙТОВ: КЛАССИФИКАЦИЯ, ВИДЫ И ОСНОВНЫЕ ЭТАПЫ АНАЛИЗА Кривцов А.Н., Москалева В.Д. В сборнике: Развитие технических наук в современном мире. сборник научных трудов по итогам международной научно-практической конференции. 2016. С. 115-11 - СТАТЬЯ В СБОРНИКЕ ТРУДОВ КОНФЕРЕНЦИИ

5. ЯЗЫК И ПРОГРАММА РАЗМЕТКИ HTML-СТРАНИЦ ТЕГАМИ Тухватуллина А.Р., Пономарев В.В. В книге: XVIII всероссийская научно-практическая конференция "Дни науки - 2018". 70 лет ФГУП "ПО "МАЯК". 2018. С. 144-146. СТАТЬЯ В СБОРНИКЕ ТРУДОВ КОНФЕРЕНЦИИ

6. PHP, MYSQL И DREAMWEAVER. РАЗРАБОТКА ИНТЕРАКТИВНЫХ WEB-САЙТОВ Дронов В.А. Санкт-Петербург, 2007. Сер. Профессиональное программирование. СТАТЬЯ В СБОРНИКЕ ТРУДОВ КОНФЕРЕНЦИИ

7. Классификация стилей в web-дизайне. Фирсова Э.В., Смирнова Е.А. Современные наукоемкие технологии. 2014. № 5-1. С. 93-94. СТАТЬЯ В СБОРНИКЕ ТРУДОВ КОНФЕРЕНЦИИ

8. Язык разметки гипертекста HTML. Редакторы для HTML Котиева Х.М. Студенческий. 2020. № 29-1 (115). С. 22-24. СТАТЬЯ В ЖУРНАЛЕ - НАУЧНАЯ СТАТЬЯ

9. Разработка электронного учебного пособия "Практикум по HTML CSS" Михайлович Е.В., Мищенко М.Ю. В книге: Прикладные информационные системы в технологиях наземного транспорта (машиностроение). материалы Всероссийской научно-практической конференции с международным участием. Политехнический институт (филиал) ДГТУ в г. Таганроге. 2019. С. 61-62. СТАТЬЯ В СБОРНИКЕ ТРУДОВ КОНФЕРЕНЦИИ

10. PHP, MYSQL и DREAMWEAVER. Разработка интерактивных web-сайтов Дронов В.А. Санкт-Петербург, 2007. Сер. Профессиональное программирование. СТАТЬЯ В ЖУРНАЛЕ - НАУЧНАЯ СТАТЬЯ



Приложение 1

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Сайт про дельфинов</title>

<style type="text/css">

ul.menuy {

display: inline;

margin: 0;

padding: 4px; }

a {text-decoration: none;}

ul.menuy li {

display: inline;

margin-right: 100px;

padding: 30px;

}

@font-face {

font-family: 'be';

src: local('be'), url('img2/Montserrat-VariableFont_wght.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

</style>

</head>

<body>

<div style="width: 1920px; height: 4000px; margin: auto; color: #340942; float: none; background: #ffffff; display: block; font-family: be">

<header>

<div class="header" style="color: #352a58; font-family: be; text-shadow: 0 0 0 grey; font-size: 18px; font-weight: 550; line-height: 32px; background: #a49eb7; height: 100px ">

<ul class="menuy">

<li><a href="" title="тык">Домашняя страница</a></li>

<li>Виды дельфинов</li>

<li>Дельфинарии</li>

<li>Связаться с нами - <a href="tel:8 904 465 51 15" title="Финадеева Елизавета">8 904 465 51 15 </a></li>

</ul>

</div>

</header>

<div style="width: 1920px; height: 1080px; background: #ffffff;">

<img src="img2/delfiny-krasivye-kartinki-31.jpg" height="1080">

</div>

<div style="width: 40%; height: 1300px; background: #ffffff; float: left;">

<h2 style="margin-top: 400px; line-height: 1em; font-size: 45px; ">Интересные факты о дельфинах</h2>

</div>

<div style="width: 60%; height: 1300px; background: #ffffff; float: left;">

<div style="float: left; width: 600px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Как дышат дельфины</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px; width: 500px;">На темени животного располагается дыхло - небольшое отверстие, которое плотно закрыто подвижной крышкой, пока оно под водой. Когда дельфин всплывает на поверхность, оно открывается, и внутрь проникает воздух. Набранного кислорода млекопитающему хватает на долгое время, благодаря чему он может проплывать под водой большие расстояния. Однако рано или поздно ему потребуется всплыть на поверхность, чтобы сделать очередной вдох.</p>

<img src="img2/9872-stenella-dolphin-water-marine_mammal-fauna-1920x1080-1-696x392.jpg" width="500">

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">Дыхло дельфина, расположенное на затылке.</p>

</div>

<div style="float: left; width: 500px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Есть ли уши у дельфинов</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">На голове дельфина отсутствуют органы слуха, ровно как и у большинства подводных обитателей. Зато у них сильно развито внутреннее ухо, усиленное воздушными подушками, расположенными в верхней части головы. Такая особенность строения тела работает как точный эхолокатор. Дельфины тонко чувствуют звуковые вибрации, испускаемые объектами под водой. Благодаря им с невероятной точностью определяется источник звука, а также распознаются его габариты. Тонко они чувствуют и длину волны, которую отправляют существа и предметы в их сторону. Благодаря этому параметру они могут вычислить расстояние до объекта.</p>

<img src="img2/s-d2b9e22dadd320b850581221a83fd7d5188a50ca-700x394.jpg" width="500">

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">Сравнение эхолокации летучей мыши, дельфина и подводной лодки.</p>

</div>

<div style="float: left; width: 600px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Как спят дельфины</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px; width: 500px;">Дельфины вообще не спят!Однако отдых требуется любому существу на Земле, поэтому у дельфинов также есть период, во время которого они отдыхают. Их организм устроен таким образом, что может отключать одно из полушарий мозга. Таким образом, пока работает левое, правое находится в спячке, затем все происходит с точностью наоборот. Это позволяет созданию отдохнуть, набраться сил, но при этом осуществлять простые действия по типу плавания и подъема на поверхность для получения кислорода.</p>

<img src="img2/wallpapersden.com_dolphin-underwater-mammal_1920x1080-696x392.jpg" width="500">

</div>

<div style="float: left; width: 500px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Как пьют дельфины</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">Млекопитающим требуется регулярное потребление жидкости, однако отыскать пресную воду посреди морей и океанов довольно трудно. Решают эту проблему дельфины с помощью пищи, присутствующей в их рационе. Поскольку они не могут пить морскую воду, источником жидкости служат планктон, кальмары и прочие местные жители, которые примерно на 80% состоят из воды, которую сами же и фильтруют.</p>

<img src="img2/4-1-696x392.jpg" width="500">

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">Планктон - один из источников воды для дельфинов.</p>

</div>

</div>

<div style="width: 40%; height: 550px; background: #a49eb7; float: left;">

<h2 style="margin-top: 250px; line-height: 1em; font-size: 45px; ">Адреса дельфинариев</h2>

</div>

<div style="width: 60%; height: 550px; background: #a49eb7; float: left;">

<h4>Мы не советуем вам ходить в дельфинарий, но если у вас нету возможности посмотреть на дельфинов вживую, то можете рассмотреть варианты дельфинариев: </h4>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d22028.487084853296!2d65.53591757944497!3d57.14451980625615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x43bbe7599ac2cde1%3A0x925ddf0333125a78!2z0JzQvtGA0YHQutC-0Lkg0JDQutCy0LDRgNC40YPQvA!5e0!3m2!1sru!2sru!4v1652577064349!5m2!1sru!2sru" width="1000" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">

</iframe>

</div>

<div style="width: 40%; height: 1000px; background: #ffffff; float: left;">

<h2 style="margin-top: 500px; line-height: 1em; font-size: 45px; ">8 чудесных мест, где можно поплавать с дельфинами</h2>

</div>

<div style="width: 60%; height: 1000px; background: #ffffff; float: left;">

<div style="float: left; width: 550px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Остров Бали (Индонезия)</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px; width: 500px;">

Акватория Bali Dolphins расположена прямо в море рядом с берегом. Сеансы, которые продолжаются 40 минут, начинаются в 9, 12.30 и 15 ч. Программа включает кормление дельфинов, игры с ними, катание, держась за плавник, и поцелуй:)

Стоимость билета -- 79 $ (взрослым), 69 $ (детям). Оплачены купание и прохладительные напитки. Если ехать из Куты, Нуса Дуа, Санура, Джимбарана, Семиньяка, трансфер входит в цену билета. Сеанс желательно заблаговременно зарезервировать. Другие дельфинарии -- Bali Dolphin Interaction (п-в Серанган), Dolphin Bay Restaurant в г. Беноа, отель Melka в г. Ловин

</p>

</div>

<div style="float: left; width: 500px; height: 300px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Архипелаг Гавайи (США, Тихий океан)</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">На многих островах можно посетить центры или выделенные участки морской акватории у берега. С детьми, например, стоит посетить о-в Оаху. Здесь расположена лагуна «Dolphin Quest» (естественное место обитания тысяч дельфинов-афалин). Длительность сеанса -- 1 час.</p>

</div>

<div style="float: left; width: 550px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Город Канкун (п-в Юкатан, Мексика, побережье Карибского моря)</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px; width: 500px;">

В пригороде расположен дельфинарий Dolphinaris Cancun. Среди различных программ (обычно длительность -- до 1 ч) популярностью пользуется курс на 1 день -- «Тренер дельфинов». Он содержит обучающие сессии, тренировки по подводному плаванию, катание у дельфинов на спине, брюхе и фотосессию.

</p>

</div>

<div style="float: left; width: 500px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Dolphin Academy -- уникальный центр по изучению дельфинов</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">Один дельфинарий стоит отдельно выделить. Он отличается партнерским отношением к дельфинам -- это Dolphin Academy (остров Кюрасао, Архипелаг Карибских островов). Крупнейший и наиболее популярный научно-исследовательский центр изучения представителей морских млекопитающих. Время его посещения путешественники бронируют заблаговременно онлайн. Здесь дельфины не выступают с номерами. Их изучают в естественной морской среде</p>

</div>

<div style="float: left; width: 550px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Город Батуми (Грузия, черноморское побережье)</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">

Современный дельфинарий построен в 2011 г. Он расположен в прибрежной зоне состоит из 3 бассейнов. Самый большой открытый -- 36х14 м. В дельфинарии живут 8 морских животных.

Билет на плавание с дельфинами: детский -- 50 $, взрослый -- 70 $. Продолжительность сеанса -- 15 минут. С детьми до 14 лет бесплатно допускаются родители. В стоимость входит съемка видео и фото.

</p>

</div>

<div style="float: left; width: 500px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Штат Калифорния (США, тихоокеанское побережье)</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">Наиболее популярные развлекательно-тематические центры расположены в городах Сан-Диего («Морской мир» -- SeaWorld) и Вальехо (Six Flags Discovery Kingdom) и. Здесь созданы идеальные условия для дельфинов-афалин и купания с ними в родной стихии -- прямо в открытом океанском пространстве. Двухчасовая программа включает познавательное игровое занятие в классе и взаимодействие с дельфинами. Дети до 11 лет плавают в сопровождении родителей.</p>

</div>

<div style="float: left; width: 550px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Остров Парадайз (Багамские острова, Карибское море)</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">В расположении отеля-казино Atlantis Resort (3 км от столицы -- г. Насау) находится огромный аквариум-дельфинарий Dolphin Cay. Стоимость 20-минутного плавания -- 120 $. Купание и общение с животными обеспечивает тренер. Он помогает участникам выполнять несложные трюки с дельфинами.</p>

</div>

<div style="float: left; width: 500px;">

<h3 style="text-shadow: 0 0 0 grey; font-size: 20px; font-weight: 550; line-height: 20px;">Полуостров Флорида (США)</h3>

<p style="text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px;">В Орландо находится гигантский тематический парк-океанариум SeaWorld Orlando. В нем среди прочих развлечений доступно плавание с дельфинами. Другие известные места -- морской парк Gulf World в г. Панама-Сити-Бич, центр изучения дельфинов в г. Марко-Айлен.</p>

</div>

</div>

</div>

<footer>

<div class="footer" style="color: #352a58; padding: 10px 20px; font-family: be; text-shadow: 0 0 0 grey; font-size: 14px; font-weight: 550; line-height: 20px; background: #a49eb7; height: 300px;">

<section style="float: left; width: 400px;">

<h4>О сайте</h4>

<p>Помощь</p>

<p>Оставить отзыв</p>

<p>Технологии</p>

<p>Поисковый плагин</p>

</section>

<section style="float: left; width: 400px;">

<h4>Основные разделы</h4>

<p><a href="https://unsplash.com/s/photos/dolphin">Галерея</a></p>

<p><a href="https://expertology.ru/9-luchshikh-delfinariev-kryma/" title="Дельфинарии">Дельфинарии</a></p>

<p>Интересные факты о дельфинах</p>

</section>

<section style="float: left; width: 400px;">

<h4>О нас</h4>

<p>Связаться с нами - <a href="tel:8 904 465 51 15" title="Финадеева Елизавета">8 904 465 51 15</a></p>

<p>Пользовательское соглашение</p>

<p>Написать сайт</p>

</section>

<p style="clear: left; font-size: 16px;">© 2000-2022 Финадеева Елизавета, Тюменский Индустриальный Университет, 2022.</p>

</div>

</footer>

</body>

</html>

Размещено на Allbest.ru

...