1.2 Языки программирования, используемые для создания веб-сайтов
Язык программирования - это специальный язык, используемый программистами для написания набора инструкций, которые компьютер может выполнить. Он определяет правила и понятия, по которым создается программа, которая управляет работой компьютера, приложениями и устройствами.
Они являются основным средством взаимодействия между человеком и компьютером, позволяя создавать различные программы, приложения и системы.
Языки программирования - невероятно важный компонент нашей жизни в цифровом пространстве, поскольку они:
- Позволяют создавать новые технологии и программы, которые улучшают нашу жизнь и окружающий мир;
- Эффективно решают задачи, автоматизируют процессы и упрощают повседневные действия;
- Повышают продуктивность и эффективность работы, помогая выполнить больше задач за меньшее время.
Таким образом, языки программирования играют важную роль в нашей жизни, обеспечивая инструменты для работы с современными технологиями.
В создании веб-сайтов языки программирования - это важный инструмент, поскольку они обеспечивают возможность создания интерактивных и функциональных веб-приложений.
Различные языки программирования используются для разработки разных компонентов сайта, к примеру таких как frontend (клиентская часть веб-приложения или веб-сайта, которая взаимодействует с пользователем непосредственно в браузере) и backend (часть веб-приложения или веб-сайта, которая обращается к серверу).
Для создания веб-сайтов существует много языков, из всех можно выделить несколько наиболее популярных и используемых:
HTML (HyperText Markup Language)
Это язык для разметки данных на странице. HTML является фундаментальным языком веб-разработки, позволяя создавать структурированный контент и обеспечивая основу для дальнейшего оформления и функциональности веб-страниц. Разработчики веб-сайтов должны хорошо знать HTML, чтобы эффективно строить и развивать качественные веб-приложения и сайты. С его помощью определяется, какая информация будет представлена на веб-странице, как она будет размещена, в каком порядке и формате.
CSS (Cascading Style Sheets)
CSS используется для стилизации веб-страниц. Он задает внешний вид элементам, что создает гармоничную, приятную глазу картинку и интуитивно понятны пользователю интерфейс. CSS является важным инструментом в веб-разработке, обеспечивая богатый и эстетически привлекательный дизайн веб-сайтов, улучшая пользовательский опыт и обеспечивая красивое представление контента в онлайн-среде.
JavaScript
Язык программирования, который добавляет динамичность, интерактивность, анимацию сайтам. Позволяет проводить проверку форм, улучшает взаимодействие с пользователем и многое другое. JavaScript играет ключевую роль в веб-разработке, обеспечивая создание интерактивных веб-сайтов, приложений, игр и других онлайн-ресурсов, которые обогащают пользовательский опыт и делают интернет более динамичным и увлекательным.
PHP
PHP - это популярный язык программирования, который используется для создания динамических веб-сайтов и взаимодействия с базами данных, является одним из ведущих языков для серверной разработки в веб-программировании и продолжает использоваться многими сайтами и веб-приложениями для создания динамического контента и интеграции с базами данных, обеспечивая функциональные и мощные веб-решения.
Он широко используется в создания CMS (Система Управления Содержимым), электронной коммерции, пользовательских систем и других онлайн-приложений.
Python
Язык Python - это универсальный и многофункциональный язык программирования, который нашел широкое применение в различных областях, включая веб-разработку, науку о данных, машинное обучение, автоматизацию задач, разработку приложений и многое другое. Python продолжает оставаться одним из самых популярных языков программирования из-за своей гибкости, мощности и подходящего для решения разнообразных задач.
Ruby
Ruby - это универсальный язык программирования, который известен своей простотой, элегантностью и гибкостью. Основываясь на объектно-ориентированном подходе, Ruby позволяет разработчикам создавать модульный и масштабируемый код, что упрощает сопровождение проектов. Он также известен своей продуктивностью и удобством в написании кода благодаря его синтаксису и богатой стандартной библиотеке.
Данный язык широко используются для быстрой и эффективной разработки таких веб-приложений как социальные сети, онлайн-магазины, образовательные платформы и другие сервисы.
Java
Java - это универсальный объектно-ориентированный язык программирования с огромным сообществом разработчиков по всему миру. Он широко используется в различных сферах: от разработки мобильных приложений, игровых и веб-приложений, до создания корпоративных приложений и встраиваемого программного обеспечения.
Данный язык продолжает оставаться одним из самых популярных языков программирования благодаря своей универсальности, надежности, безопасности и кроссплатформенности. Он отлично подходит как для начинающих, так и для опытных разработчиков, предоставляя широкий спектр возможностей для создания разнообразных приложений.
Каждый из этих языков уникален, предоставляя необходимый инструментарий для обеспечения внешнего вида, функциональности, безопасности, управления данными и взаимодействия с пользователем на веб-сайтах. Их использование в совокупности позволяет строить разнообразные и инновационные веб-проекты, удовлетворяя разнообразные потребности и требования пользователей.
ГЛАВА 2. РАЗРАБОТКА ВЕБ-САЙТА ФИТНЕС КЛУБА
2.1 Написание кода
Для начала я создала общую папку, внутри которой разместила главную html страницу и общие папки, предназначенные для хранения файлов: css страниц, шрифтов, изображений, js файлов и дополнительных страниц сайта.
Рис. 1 Содержимое общей папки
На странице index, что является главной или стартовой страницей, я создала базовую разметку с тегами <DOCTYPE>, <html>, <head> и <body>.
Рис 2. Базовая разметка
В шапке, теге <head>, я указала название сайта, подключила необходимые css страницы и вставила логотип сайта отображающеюся во вкладке браузера.
Рис 3. Содержание тега head
В теге <body> у меня размещён контент сайта, структурированно разделенный на отдельные секции: header, icons, programs, coach, footer.
Рис 4. Содержание тега body
Тег <header>, «шапка» моего веб-сайта, содержит меню для десктопной версии, меню для мобильной версии и начальный экран с названием сайта.
Я использовала теги <li> и <a> для ссылок, тег <button> для кнопки, и <h1> для названия сайта на начальной странице.
Рис 5. Содержание тега header
Внутри <div> с классом “icons” у меня размещены позитивные стороны фитнес клуба, его преимущества как:
- большое количество разнообразных тренажёров;
- круглосуточный режим работы;
- наличие современных душевых и комфортных раздевалок;
- большая и удобная подземная парковка.
Рис 6. Содержание тега icons
Большой раздел сайта посвящён имеющимся программам в фитнес-клубе.
Каждую программу я обернула в отдельный <div>, добавила фоновое изображение, название и небольшое описание с положительными изменениями от занятий.
Всего показано 6 видов программ:
Тренажерный зал
Персональные тренировки
Yoga
Cardio
Total Free
Total Pro
А также я сделала <div> программы ссылкой на дополнительные информационные страницы. При клике на программу, пользователи будет перебрасывать на страницу с информацией именно по той программе, на которую нажали.
Вернуть на главную страницу можно нажав на рисунок звезды на самом верху станицы.
Рис 7. Содержание тега programs
Следующая секция с карточками тренеров, её я сделала в виде слайдера.
Карточка содержит фотографию тренера, его/её имя и фамилию, описание с программами которые проводит и кнопку «Записаться».
Каждая карточка обернута в <div>, в свою очередь все они также обернуты в общий <div> имеющий класс “swiper-wrapper”.
В этом общем контейнере находятся не только карточки, но и:
- кнопка с перелистыванием направо;
- кнопка с перелистыванием налево;
- анимация с указанием количества карточек, и какая сейчас открыта.
Также в этой секции находиться всплывающие окно при нажатии на кнопку «Записаться».
Модальное окно содержит небольшую картинку на фоне, поле для ввода имени, поле для ввода почты, на которую будет прислан ответ, и поле с выбором программы на хорошую пользователь хочет записаться.
После отправки данных всплывающие окно закрывается.
Рис 8. Содержание тега coach
И последняя секция на веб-сайте в теге <footer> - это нижняя часть или «подвал».
Там находятся контактные данные, почта фитнес-клуба, ссылки на аккаунты в социальных сетях, указан адрес и интерактивная Яндекс карта и помеченным местоположением.
Рис 9. Содержание тега footer
2.2 Реализация веб-сайта для фитнес-клуба «TopFit»
После завершения этапа написания кода, веб-сайт для фитнес-клуба «TopFit» выглядит так:
Рис. 10 Главная страница
Рис. 11 Главная страница
Рис. 12 Главная страница
Рис. 13 Главная страница
Рис. 14 Главная страница
Рис. 15 Модальное окно
Рис 16. Дополненная информационная страница
Рис 17. Дополненная информационная страница
ЗАКЛЮЧЕНИЕ
В современном мире, веке цифрового развития, технологии играют ключевую роль в развитии бизнеса, общении и различной коммуникации, образовании, и многих других сфер в жизни человека.
Важность сайтов как носителей информации, или как инструментов для взаимодействия с пользователем становится все более значимой.
Компаниям, организациям и индивидуальным предпринимателям, сайты предоставляют возможность в установлении онлайн-присутствия, привлечении новых клиентов, укреплении бренда и упрощения взаимодействия с аудиторией. Они являются визитной карточкой, создают первое впечатление о бренде, его ценностях и культуре, становятся инструментом маркетинга и продаж, а также основой эффективного онлайн-присутствия, открывая двери для новых клиентов и партнеров по всему миру.
С помощью сайтов, организация может предоставить свои продукты, услуги и различную информацию в свободном доступе форме, которой может воспользоваться каждый. Это позволило веб-сайтам стать источником образовательных материалов, новостей, развлекательного контента и другой информации, что способствует общественной осведомленности и развитию в различных сферах. веб сайт код информация
Таким образов на сегодняшний день веб-сайты играют центральную роль развитии и ведении бизнеса, образовательных учреждений и обществу в целом широкий доступ к информации, коммуникации и инновационным возможностям. Сегодня создание и поддержка сайтов становится неотъемлемым элементом успешной цифровой стратегии предприятия. Важность сайтов невозможно недооценить, они не только выступают визуальным представлением компании, но и являются инструментом привлечения новых клиентов, поддержания взаимодействия с существующей аудиторией и обеспечения успеха в современном цифровом мире. Сайты являются неотъемлемой частью современного бизнеса, образования и общественной жизни, эффективное использование которых открывает путь к долгосрочному успеху и развитию.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. Роббинс Д. HTML5. Карманный справочник / Д. Роббинс - Москва: Издательство Вильямс, 2019. - 192 с.
2. Титтел Э., Минник К. HTML5 и CSS3 для чайников / Э. Титтел, К. Минник - Москва: Издательство Диалектика, 2019. - 400 с.
3. Дронов В. HTML и CSS. 25 уроков для начинающих/ В. Дронов - СПб.: Издательство БХВ-Петербург, 2020. - 381 с.
4. Дронов В. JavaScript. Дополнительные уроки для начинающих / В. Дронов - СПб.: Издательство БХВ-Петербург, 2022. - 344 с.
5. Фрэйн Б. Отзывчивый дизайн на HTML5 и CSS3 для любых устройств / Б. Фрэйн - СПб.: Издательство Питер, 2020. - 336 с.
6. Квинт И. HTML, XHTML и CSS на 100% / И. Квинт - СПб.: Издательство Питер, 2010. - 440 с.
7. Кириченко А.В., Хрусталев А.А. HTML5 + CSS3. Основы современного WEB-дизайна / А.В. Кириченко, А.А. Хрусталев - Москва: Издательство Наука и Техника, 2019. - 352 с.
8. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS / Э. Робсон, Э. Фримен - СПб.: Издательство Питер, 2019. - 720 с.
ПРИЛОЖЕНИЕ
Программирование сайта для фитнес-клуба «TopFit» выполнялось в редакторе Visual Studio Code.