Сегодня пойдёт речь о веб-разработке и мы научимся создавать простой сайт с помощью HTML, CSS и Javascript. Но прежде чем начать писать код, нам следует подготовить рабочее место.
1)Настройка окружения разработки и выбор темы веб-страницы
Для начала нам нужно выбрать текстовый редактор, в котором мы будем писать код. В качестве примера, мы можем использовать бесплатный и популярный редактор кода Visual Studio Code.
Для того чтобы начать работать с Visual Studio Code, нужно скачать и установить его на компьютер. Затем необходимо установить расширения для работы с HTML, CSS и JavaScript.
Для HTML нам понадобится расширение HTML Snippets, которое предоставляет набор готовых шаблонов HTML-кода для быстрого создания различных элементов страницы.
Для CSS нам понадобится расширение HTML CSS Support, которое обеспечивает автодополнение кода CSS и предлагает подсказки.
Для JavaScript нам понадобится расширение JavaScript (ES6) code snippets, которое предоставляет набор готовых шаблонов JavaScript-кода для быстрого создания различных функций и методов.
Мы будем писать лендинг-страницу. Лендинг-страница (от английского "landing page") - это специально созданная веб-страница, разработанная с целью привлечения внимания посетителей и мотивации их к выполнению определенного действия. Лендинг-страницы обычно представляют собой одностраничные сайты, которые содержат конкретную информацию или предложение, направленные на достижение конкретной цели.
Основная задача лендинг-страницы заключается в привлечении посетителей и конверсии их в потенциальных клиентов или выполнение желаемого действия, такого как покупка товара, подписка на рассылку, регистрация на мероприятие и т.д. Лендинг-страницы обычно имеют простую и привлекательную структуру, яркий дизайн, четко сформулированные предложения и четкое позиционирование продукта или услуги.
Теперь мы можем приступить к созданию нашей веб-страницы.
2)Создание структуры веб-страницы с помощью HTML разметки
Структура веб-сайта — это то, как сайт организован и как связаны между собой его элементы. Логическая структура сайта помогает посетителям и поисковым системам легко перемещаться по нему и находить контент.
2.1)Создание базовой структуры веб-страницы с помощью HTML разметки
Для начала создадим базовую структуру страницы, состоящую из тегов и служебных элементов с помощью HTML разметки. Открываем текстовый редактор и вводим следующий код:
Ниже приведены используемые теги:
- <!DOCTYPE html> - это объявление типа документа, который вы создаете. В нашем случае это HTML5;
- <html> - элемент, определяющий начало и конец HTML документа;
- <head> - содержит метаданные документа, такие как заголовок, мета-теги и ссылки на внешние файлы;
- <meta> - тег, содержащий информацию о документе, такую как кодировку, ключевые слова, описание и т.д.;
- <title> - элемент, который устанавливает заголовок документа, который отображается на вкладке браузера;
- <body> - элемент, содержащий содержимое страницы, которое будет отображаться в окне браузера.
Это базовая структура страницы, которую мы можем использовать для создания нашей лендинг-страницы.
2.2)Создание основной структуры лендинг-страницы с помощью HTML разметки
Теперь создадим основу лендинг-страницы:
Мы использовали следующие теги:
- <header> - контейнер для заголовка страницы или верхней части сайта, может содержать логотип, навигационное меню и т.д.;
- <nav> - тег, содержащий навигационное меню, обычно располагается внутри <header>;
- <ul> - тег, содержащий маркированный список элементов;
- <li> - тег, содержащий элемент маркированного списка;
- <main> - тег, содержащий основное содержимое страницы, кроме верхней и нижней части;
- <section> - тег, используемый для разделения содержимого страницы на логические блоки, например, для разделения основного содержимого от контактной формы;
- <h1>, <h2>, <h3> - теги, содержащие заголовки первого, второго, третьего уровней соответственно;
- <p> - тег, содержащий текстовый абзац;
- <a> - тег, создающий ссылку на другую страницу или файл;
- <button> - тег, создающий кнопку, которую пользователь может нажимать
- <footer> - контейнер для нижней части сайта, обычно содержит ссылки на социальные сети, копирайт и т.д.
3)Создание стиля веб-страницы с помощью CSS
Для начала создадим пустой файл style.css и подключим его к нашей странице с помощью тега link в секции head:
Затем введем в style.css следующий код:
Ниже приведены используемые селекторы:
- body - этот селектор применяется к элементу body и задает некоторые общие стили для всего документа, включая отступы, шрифт, размер и цвет текста;
- a - этот селектор применяется ко всем гиперссылкам и задает стиль для их текста, включая цвет и отсутствие подчеркивания;
- ul - этот селектор применяется к спискам и удаляет стандартные отступы и маркеры списка;
- h1, h2, h3 - эти селекторы применяются к заголовкам первого, второго и третьего уровней соответственно и задают стиль для их текста, включая отступы и жирный шрифт;
- .btn - этот селектор применяется ко всем элементам с классом btn и задает стиль для кнопок, включая отступы, цвет фона и текста границы, радиус и курсор;
- header- этот селектор применяется к элементу header и задает стиль для шапки страницы, включая цвет фона, отступы и тень;
- nav - этот селектор применяется к элементу nav и задает стиль для навигационного меню, включая расположение, выравнивание, отступы и маркеры списка;
- #hero- этот селектор применяется к элементу с идентификатором hero и задает стиль для блока, включая задний фон, размеры, расположение и цвет текста;
- #features - этот селектор применяется к элементу с идентификатором features и задает стиль для блока, включая отступы;
- #services - этот селектор применяется к элементу с идентификатором services и задает стиль для блока, включая отступы и цвет фона;
- #contact - этот селектор применяется к элементу с идентификатором contact и задает стиль для блока, включая отступы.
Данный CSS-код содержит множество блоков свойств, каждый из которых определяет стили для определенного элемента или набора элементов на странице. Вот некоторые из них:
- margin: 0; задает отступы внешних границ для всего body элемента (тела документа), устанавливая их равными нулю;
- font-family: Arial, sans-serif; устанавливает шрифт для всего текста на странице. Сначала указывается Arial, а если он недоступен, то браузер будет использовать любой доступный без засечек шрифт санс-сериф;
- font-size: 16px; определяет размер шрифта в пикселях для всего текста на странице;
- line-height: 1.5; задает высоту строки текста. Значение 1.5 означает, что междустрочный интервал будет равен 150% от размера шрифта;
- color: #333; устанавливает цвет текста на странице в темно-серый (#333);
- text-align: center; выравнивает текст по центру на всей странице;
- text-decoration: none; убирает подчеркивание у ссылок;
- ul блок содержит стили для всех неупорядоченных списков на странице. list-style: none; убирает маркеры перед элементами списка. margin: 0; и padding: 0; устанавливают отступы равными нулю, чтобы не было пробелов между списками и содержимым страницы;
- h1, h2, h3 блок содержит стили для заголовков первого, второго и третьего уровней. margin: 0; убирает отступы перед и после заголовков. font-weight: bold; делает заголовки жирными.
4)Создание функционала с помощью JavaScript
Сначала создадим пустой файл с расширением .js (например, Проект.js). Затем вставляем ссылку на этот файл внутри тега <head> HTML-документа, используя тег <script> с атрибутом src:
Далее в пустой файл вводим следующий код:
Давайте разберем, как работает написанный код:
- Обработчик события DOMContentLoaded: Общий код обернут в обработчик события DOMContentLoaded, который срабатывает, когда весь DOM документа был полностью загружен и построен. Это гарантирует, что код начнет выполняться только после загрузки всех элементов страницы.
- Получение ссылок на элементы навигационного меню: С помощью document.querySelectorAll выбираются все ссылки внутри элементов li в навигационном меню. Полученная коллекция ссылок сохраняется в переменную navLinks.
- Обработчик события клика: Для каждой ссылки в навигационном меню добавляется обработчик события click. Когда пользователь нажимает на ссылку, срабатывает функция-обработчик.
- Получение целевого элемента и его позиции: Внутри функции-обработчика получается атрибут href ссылки, на которую нажал пользователь. Этот атрибут содержит идентификатор целевой секции на странице. С помощью document.querySelector выбирается соответствующий элемент на странице, и его вертикальная позиция (offsetTop) сохраняется в переменную targetPosition.
- Расчет позиции прокрутки: Получается текущая вертикальная позиция страницы (window.pageYOffset) и вычисляется расстояние между текущей позицией и позицией цели (distance).
- Плавная анимация прокрутки: Создается функция animation, которая будет отвечать за анимацию прокрутки. Внутри этой функции используется функция ease, которая определяет плавность анимации на основе времени и использует эффект плавного движения.
- Запуск анимации прокрутки: С помощью requestAnimationFrame запускается анимация прокрутки. Функция animation вызывается рекурсивно до тех пор, пока не пройдет заданная продолжительность анимации. При каждом вызове функции animation обновляется текущая позиция прокрутки, и страница плавно прокручивается к целевой секции.
- Подключение кода к HTML-странице: Файл "script.js" подключается к HTML-странице с помощью тега <script> в разделе <head></head>. Это позволяет браузеру загрузить и выполнить JavaScript-код при отображении страницы.
Таким образом, код обрабатывает клик на ссылку в навигационном меню. При клике на ссылку выполняются следующие действия:
- Отмена стандартного поведения ссылки: С помощью метода event.preventDefault() отменяется стандартное поведение ссылки, чтобы предотвратить переход по адресу href.
- Запуск анимации прокрутки к целевой секции: Вызывается функция animateScroll, которая принимает целевую позицию прокрутки. Функция animateScroll запускает анимацию прокрутки страницы к указанной позиции.
- Плавная анимация прокрутки: Функция animateScroll вызывает функцию smoothScrollTo, которая отвечает за плавную анимацию прокрутки. Эта функция принимает целевую позицию прокрутки и запускает анимацию, плавно прокручивая страницу к указанной позиции.
- Завершение анимации: По достижении конечной позиции прокрутки функция smoothScrollTo прекращает анимацию и завершает выполнение.
Таким образом, код позволяет реализовать плавную прокрутку страницы при клике на элементы навигационного меню. При клике на ссылку страница будет плавно прокручиваться к соответствующей секции на странице.
А вот и результат нашей работы: