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

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

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

Разработка веб-сайта фермерского хозяйства

Допущена к защите

зам. директора по УМР: Плачинта С.А.

Обучающийся: Ратникова У.С.

Москва, 2024

ЗАДАНИЕ

для курсовой работы

Обучающийся Ратникова Ульяна Станиславовна

(фамилия, имя, отчество)

Группа ПИ 41-20-9

Специальность 09.02.05 «Прикладная информатика (по отраслям)»

Дисциплина: МДК 02.01 «Разработка, внедрение и адаптация программного обеспечение отраслевой направленности»

Тема задания «Разработка веб-сайта фермерского хозяйства»

Перечень вопросов, подлежащих разработке

1. Теоретические основы проектирования веб сайтов

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

Работа должна состоять из:

1. Титульный лист

2. Содержание

3. Введение

4. Основная часть (разделы и подразделы; главы)

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

6. Список

7. использованных источников

Литература

1. Указание 10 и более количества используемой литературы, авторов.

2. Литература за последние пять лет.

Дата выдачи работы «02» февраля 2024 г. Срок сдачи работы «15» марта 2024г.

Преподаватель: Черецкий М.В.

СОДЕРЖАНИЕ

веб-сайт фермерского хозяйства html

• ВВЕДЕНИЕ
• ГЛАВА 1. ОБЩАЯ ХАРАКТЕРИСТИКА ВЕБ-САЙТА
• 1.1 Понятие, назначение и применение веб-сайта
• 1.2 Классификация веб-сайтов
• 1.3 Инструменты создания веб-сайтов
• ГЛАВА 2. РАЗРАБОТКА ВЕБ-САЙТА ФЕРМЕРСКОГО ХОЗЯЙСТВА “БЛАГОСЛОВЕНИЕ”С ПОМОЩЬЮ ЯЗЫКА HTML
• 2.1 Этапы создания веб-сайта с помощью языка гипертекстовой разметки HTML
• 2.2 Процесссоздания Веб-сайта Фермерского хозяйства “Благословение”
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ВВЕДЕНИЕ

Интернет стал неотъемлемой частью нашей жизни. Каждый человек ежедневно заходит на десятки различных сайтов и веб-приложений. Технологии и развитие не стоят на месте, и всегда движутся вперёд. Однако до сих пор в основе всей веб-разработки лежит язык гипертекстовый разметки HTML. На сегодняшний момент самая последняя версия это HTML5.

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

Преимущества веб-сайтов на HTML-коде:

· Оригинальность;

· Оптимизация поиска;

· Быстрая выгрузка;

· Безопасность и защита от взлома;

· Нет необходимости устанавливать какие-либо плагины;

· Стабильность. Ошибки на одной странице не тянут за собой все остальные.

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

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

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

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

Для достижения указанной цели, поставлены следующие задачи:

· Изучить пособия по языку HTML;

· Выяснить, какие существуют основные методы создания сайтов;

· Расписать план своей работы;

· Создать веб-сайт.

Методологическую основу исследования составили анализ, сравнение эксперимент.

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

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

ГЛАВА 1. ОБЩАЯ ХАРАКТЕРИСТИКА ВЕБ-САЙТА

1.1 Понятие, назначение и применение веб-сайта

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

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

Веб-сайт - связанные между собой веб-странички и массивы данных. Для того, чтобы пользователь смог увидеть содержимое странички он использует программное обеспечение, которое называется Браузер. Например: Яндекс, Google, Safari, Microsoft Edge и т.п. В любом браузере обязательно есть поисковая строка и строка адреса, куда и вводит информацию пользователь.

Без Браузера невозможно будет попасть на веб-сайт. Также в современных браузерах есть программа для экранного доступа - она воспроизводит вслух то, что изображено на экране. Это помогает людям с ограничениями в зрении, спокойно пользоваться устройством.[3, 12]

Сама веб-страница является текстовым файлом, с расширением *.html, в котором и храниться сам код разметки, который обрабатывается браузером.

Однако в коде не могут храниться аудио файлы и любые картинки и фотографии. Все это необходимо загружать отдельно, а в файле HTML вызывать их с помощью команд. Расширения файлов поддерживаются самые разные : jpg, png, gif - для изображений; mp3, avg - для аудио.

Этапы разработки веб-сайта:

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

Обычно выделяют такие этапы разработки как: планирование, реализация, тестирование, публикация, реклама, сопровождение.

Планирование:

Планирование - первый и наиболее важный этап создания веб-сайта. На этой стадии определяются:

· цели создания веб-сайта (Для чего он предназначен? Какие функции он должен выполнять и на какую аудиторию он рассчитан?);

· Содержимое (из чего будет состоять сайт, аудио, видео, фотографии);

· Структура (навигация, расположение контента);

· Дизайн и оформление

Реализация:

Реализация - это непосредственно сама работа над созданием сайта. На этом этапе разработчик подготавливает необходимый ему материал: текстовый и графический. Материал грамотно разбивается по файлам в соответствии со структурой. Если сайт планируется многостраничный создаются ссылки между файлами сайта.

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

Тестирование:

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

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

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

Публикация:

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

Рекламирование веб-сайта:

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

Сопровождение сайта:

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

1.2 Классификация веб-сайтов

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

Виды сайтов по назначению:

А) Сайт визитка

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

Б) Корпоративный сайт

Корпоративный сайт - это сайт, который является интернет-платформой для компании. Он предназначен для функционирования как с клиентами, так и с партнёрами. Также подобный сайт является лицом компании.

Г) Интернет-магазин

Интернет-магазин - исходя из названия, становится очевидно, что главная задача такого сайта - продажа товаров. На нем размещаются каталоги товаров, отзывы, и возможность заказа. Примерами могут служить: ЯндексМаркет, Вайлдберриз, Озон и т.д.

Д) Промо-сайт

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

Е) Тематический сайт

Может быть совершенно разным, и зависит от заданной темы. Например это может быть пособие для начинающих, база знаний, и т.д.

Ж) Интернет-портал

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

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

З) Блог

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

И) Каталоги сайтов

Эти сайты служат хранением ссылок на другие сайты. Например сборка ссылок на курортные отели, сборка ссылок на книги одного автора и т.д.

К) Поисковые системы

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

Л) Почтовые сервисы

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

М) Интернет-форумы

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

Н) Сайты-хостинги

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

Виды сайтов по структуре:

А) Статические сайты и веб-страницы.

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

Б) Динамические сайты и веб-страницы.

Отличительной чертой таких сайтов является то, что они не хранятся цельными страницами, а формируются с помощью скрипта таких языков как Python, PHP, ASP, Ruby, Java и т.д. Таким образом сайт может выгружать контент для каждого пользователя индивидуально, в зависимости от запроса и настроек браузера. Примером подобных сайтов можно считать веб-приложения, например: ВКонтакте, Телеграм и т.п.

В) Флэш-сайты

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

Классификация сайтов по их принадлежности:

А) Персональные сайты

Данным сайтом обычно владеет один человек, и рекламирует свою деятельность/товар, это также может быть и сайт блог.

Б) Сайты коммерческих организаций.

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

В) Сайты некоммерческих организаций.

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

У разработчиков же есть и свое собственное разделение сайтов: лендинг и многостраничный сайт.

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

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

Технология SEO-продвижения:

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

1.3 Инструменты создания веб-сайтов

Языки программирования:

HTML - это язык гипертекстовой разметки. Он является основой всей веб-страницы. С помощью него создаётся большинство статичных сайтов;

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

JavaScript - это язык сценариев. Функционал способен улучшить пользователю взаимодействие с браузером. Зачастую любые анимации делаются исключительно с помощью JavaScript.

Java - это ещё один язык программирования, но он вовсе не является родственником JavaScript. Java пользуется популярностью у разработчиков, так как этот язык кроссплатформенный (может быть создан на Windows и легко запускаться на MacOS или Linux). Имеет большое множество библиотек, которые облегчают работу программисту и не обязательно писать код с нуля.

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

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

Ruby - один из востребованных языков среди веб-разработчиков. В первую очередь Ruby является динамическим языком и способен автоматически присваивать типы данных. Код пишется очень понятным и доступным языком;

C# - свое применение этот язык нашел преимущественно в разработке веб-приложений. Интересная особенность C# заключается в том, что он способен автоматически извлекает и стирает ненужные файлы;

SQL - это язык запросов. Он используется разработчиками для создания баз данных, например MySQL, Oracle и т.п.

Конструкторы сайтов:

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

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

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

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

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

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

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

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

8. A5.ru - лёгкое решение для сайта продаж и продвижение личного бренда. В сервисе присутствует помощь в продвижении в поисковых системах. Но у конструктора есть минус - пространство на дисках ограничений по всем тарифам.

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

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

Минусы конструкторов:

Конечно, при использовании CMS-сервисов могут возникнуть и свои сложности, и у них есть свои минусы. Например:

· Недостаточно бесплатных шаблонов и виджетов;

· Однотипность создаваемых сайтов;

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

Любая страница построена на основе HTML-документа. И написана на языке гипертекстовой разметки. Браузер корректно выводит на экран желаемый результат.

Структура документа представляет собой дерево и состоит из тегов. Открывающий тег записывается: <имя открывающего>, закрывающий тег записывается: </имя закрывающего>. Между тегами может размещаться контент.

Существуют также и одиночные теги, которым не требуется в пару закрытый. Например: <img scr = “путь до файла”>, данный пример тега добавляет картинку на страничку. Любые элементы могут вкладываться друг в друга, например: <p><b>Текст</b></p>, в этом примере на веб-странице мы увидим слово “Текст” жирным шрифтом. Очень важно соблюдать последовательность открытия и закрытия тегов, чтобы не допустить ошибок, например: <p><b>Текст</p></b>, такая запись будет неправильной.

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

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

Элементы HTML-документа могут содержать различные атрибуты (глобальные и собственные). Их необходимо записывать в открывающий тег с указанием имени и значения: имя = “значение”, например:<p>Текст</p>. Атрибуты способны изменить свойства элемента.

Самый главный и основной тег в документе это <HTML>, открытый и закрытый. Именно с него начинается код. Если эти теги будут отсутствовать, то браузер не сможет интерпретировать содержимое документа[9].

Между главными тегами размещены следующие важные теги: <head>, в нем хранятся все ссылки, метаданные, информация, которая не будете отражаться на странице; и <body>, иначе говоря это “тело” сайта, и в нем будет храниться весь необходимый визуальный контент. Записывается в виде:

<HTML>

<head>

…

</head>

<body>

…

</body>

</HTML>

Объявление типа документа HTML и его элементы

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» "http://www.w3.org/TR/html4/loose.dtd">

В элементе DOCTYPE используются важные атрибуты.

HTML указывает, что данный документ используется как HTML.

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

В элемент HTML записываются атрибуты

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ru" dir="LTR" title="Мой сайт">

<-!Содержимое документа->

</html>

lang - определяет язык документа.

dir/lir - задаёт направление чтения документа. Справа налево, либо слева направо.

title - определяет всплывающую подсказку.

Элементы HEAD:

Для элемента head определены те же атрибуты, что и для html.

Также в HTML есть возможность задавать существующие из шести уровней заголовков: от <h1>, основные заголовки и самые большие до <h6>, для подзаголовков и самых маленьких[10].

Инструменты:

Инструменты, которые необходимые веб-разработчику:

· текстовый редактор;

· браузер для просмотра результатов;

· графический редактор.

Текстовый редактор:

HTML-документ есть возможность создать в любом текстовом редакторе - Блокноте. Хороший редактор должен иметь следующие возможности:

· Подсвечивать синтаксис - выделенных тегов, текста, и различных элементов разными цветами;

· Работать с вкладками - хороший редактор должен уметь поддерживать работу одновременно в нескольких вкладках;

· Автодополнение - при сочетании клавиши автоматическое закрытие скобок, кавычек и тегов.

Одни из самых распространенных редакторов:

· Visual Studio Code;

· Sublime Text;

· Atom;

· WebStorm.

Браузер:

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

Графический редактор:

Графический редактор необязателен, но желателен. В нем есть возможность создать для себя шаблон будущего сайта, обрабатывать изображения и различные графические элементы. Самой популярной программой является Photoshop, однако ей есть и бесплатные аналоги, например Gimp, Photoshop online.

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

СSS как средство оформления внешнего вида веб-сайтов:

СSS (Cascading Style Sheets) - каскадные таблицы стилей. Они позволяют менять цвет, шрифт, расположение и т.д. В CSS четкий принцип наследования. Элемент-потомок наследует свойства элемента-родителя.

В стилях, которые задал автор есть и свои градации приоритетов. Важное правило !important, пример: селектор {свойство: значение !important;}

Этот селектор будет главнее всех остальных с одинаковыми свойствами.

Варианты работы с CSS:

Способ 1. Отдельный файл:

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

Способ 2. CSS внутри тега style:

Если планируется не массивный код, его можно разместить в специальном теге <style>. Он обычно размещается в начале документа.

Способ 3. CSS внутри атрибута style:

В этом способе можно добавить атрибут style для любого тега на странице. Например:

<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>

Рекомендуется всё-таки делать отдельный файл и писать все в нем, но также не исключается возможность совмещать все эти способы вместе, однако стоит помнить про правила приоритетов[11].

ГЛАВА 2. РАЗРАБОТКА ВЕБ-САЙТА ФЕРМЕРСКОГО ХОЗЯЙСТВА “БЛАГОСЛОВЕНИЕ” С ПОМОЩЬЮ ЯЗЫКА HTML

2.1 Этапы создания веб-сайта с помощью языка гипертекстовой разметки HTML

Cоздание веб-сайта будет включать себя 8 этапов:

1) Обеспечить наличие следующих инструментов:

· интернет-браузер Google Chrome;

· текстовый редактор для веб-разработчиков Visual Studio Code;

· Графический редактор Paint3D.

· Создание первого блока, привязка шрифтов Google Fonts, создание ссылок на файлы CSS и JavaScript;

2) Создание шапки и навигационной панели;

3) Создание второго блока и слайдера;

4) Создание третьего, четвертого блоков и подвала, размещение интерактивной карты Google Maps;

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

6) Адаптация сайта под устройства;

7) Экспорт проекта в Replit для создания ссылки и возможности просматривать сайт с других устройств.

Определение целей и задач разработки:

Цель разработки - создание веб-сайта фермерского хозяйства с помощью программирования HTML.

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

Фермерской продукции могу интересоваться любые граждане от 18 лет. Так как товары с ферм всегда свежие и выгодные по цене.

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

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

2.2 Процесс создания Веб-сайта Фермерского хозяйства “Благословение”

Создание основного файла с кодом index.html, привязка необходимых шрифтов с сервиса Google Fonts. Создание файла CSS и JavaScript, привязка и через ссылки в документе. Задание title.

Рисунок - 1. Создание ссылок

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



Рисунок - 2. Первый блок

Создание навигационной панели и размещение на ней логотипаи кнопок. В качестве второго цвета я выбрала зелёный, как и на логотипе.

Рисунок - 3. Навигационная панель

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

Рисунок - 4. Код панели

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



Рис.5. Код слайдера

Рисунок - 6. CSS свойства для слайдера

Рисунок - 7. JS код для слайдера

Создание третьего, четвертого блоков и подвала. В третьем блоке я добавила ссылку на видео на Ютубе фермы “Благословение”, чтобы пользователь мог ознакомиться с продукцией ещё лучше.



Рисунок - 8. Создание блока с ссылкой на видео

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

Рисунок - 9. Четвертый блок сайта

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

Рисунок - 10. Подвал

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



Рисунок -11. Изменение тега style

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

Рисунок -12. Адаптация под телефон

Реализация веб-сайта фермерского хозяйства:

Рисунок -13. Первый блок

Рисунок -14. Второй блок

Рисунок -15. Третий блок

Рисунок -16. Четвертый блок



Рисунок -17. Подвал

Экспорт сайта на Replit:

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

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

Рисунок -18. Проект на replit

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



Рисунок -19. Сайт на телефоне

ЗАКЛЮЧЕНИЕ

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

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

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

Сегодня, по данным web-canape.ru в мире насчитывается 5,16 миллиарда пользователей интернета. Это значит, что 64,4% мирового населения имеют доступ в интернет. За год количество интернет-пользователей выросло на 1,9%.

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

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1) Браун Э. Изучаем JavaScript. Руководство по созданию современных веб-сайтов. - Москва.: Изд-во: Альфа-книга, 2017. - 368 с.

2) Беликова С.А., Беликов А. Н. Основы HTML и CSS: проектирование и дизайн веб-сайтов: учебное пособие по курсу «Веб-разработка», Южный Федеральный Университет, - Ростов-на-Дону, 2020. - 176 с.

3) Дакетт Д. HTML и CSS. Разработка и дизайн веб-сайтов. - Москва.: Изд- во: Эксмо, 2013. - 480 с.

4) Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. - Санкт-Петербург.: Изд- во: Питер, 2019. - 720 с.

5) Квинт И. HTML, XHTML и CSS на 100%. - Санкт-Петербург.: Изд-во: Питер, 2010. - 440 с.

6) Макфарланд Д. Новая большая книга CSS. - Санкт-Петербург.: Изд-во: Питер, 2019. -720 с.

7) НиксонР. Создаёмдинамическиевеб-сайтыспомощьюPHP, MySQL, JavaScript, CSS и HTML5. - Санкт-Петербург.: Изд-во: Питер, 2019. -816 с.

8) vc.ru - топ 20 конструкторов сайтов. [Электронный ресурс] - Режим доступа - URL: https://vc.ru/services/681602-top-20-konstruktorov-saytov-2023-goda-kak-vybrat-luchshiy-konstruktor-sayta, [Дата обращения 15.01.2024].

9) html5book.ru - Основы html. [Электронный ресурс] - Режим доступа - URL: https://html5book.ru/osnovy-html/, [Дата обращения 15.01.2024].

10) intuit.ru - Основы языка HTML [Электронный ресурс] - Режим доступа - URL: https://intuit.ru/studies/courses/103/103/lecture/27971, [Дата обращения 15.01.2024].

11) seodon.ru - Приоритеты стилей в CSS [Электронный ресурс] - Режим доступа - URL: https://seodon.ru/css/prioritety-stilej.php, [Дата обращения 15.01.2024].

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

...