Основы веб-разработки: HTML, CSS, JavaScript
HTML, CSS и JavaScript - это основные языки, используемые в веб-разработке. Начинающим может быть сложно понять, что именно делают эти языки и как они работают вместе. В данной статье мы не будем погружаться в детали работы или использования каждого из трех основных языков программирования, а рассмотрим только основные аспекты и объясним их вклад в создание интерактивных веб-сайтов на примере написания простой страницы со счетчиком кликов.
HTML: структура страницы.
Каждый раз заходя на любой сайт вы видите веб-страницу, которая состоит из блоков текста, картинок, кнопок и других элементов. Все эти элементы называются разметкой и описываются с помощью языка HTML (HyperText Markup Language) эта аббревиатура переводится как “язык гипертекстовой разметки”. Он представляет собой набор тегов, которые объявляют и описывают каждый элемент на странице. Браузеры интерпретируют HTML-код и отображают его в виде веб-страницы. Теги могут содержать в себе другие теги, формируя таким образом структуру страницы. Тег является контейнером, который заключает в себе все содержимое веб-страницы. Внутри него находятся еще два обязательных тега: , который содержит метаданные страницы (описание, название, ссылки на стили CSS, скрипты и др), которые не отображаются на самой странице и в котором описывается видимое содержимое страницы. Создадим новый файл с названием index и расширением html, после чего заполним его базовыми тегами. Код “пустой” страницы выглядит так:
Сейчас наша страница пуста и что бы ее наполнить, познакомимся с несколькими HTML-тегами:
- <div> - универсальный блочный контейнер, который используется для группировки и структурирования других элементов на веб-странице.
- <h1> - заголовок верхнего уровня на веб-странице. Он обычно используется для наиболее важных заголовков и имеет наибольший размер шрифта среди всех доступных уровней заголовков (от <h1> до <h6>).
- <p> - используется для отображения отдельного параграфа текста на веб-странице. Он представляет блок текста, который обычно разделен на абзацы.
- <button> - представляет кнопку, которая может быть нажата пользователем для выполнения определенного действия на веб-странице.
Открыв нашу страничку в браузере мы увидем результат:
Наши теги расположились на странице в том порядке, в котором мы из указали в разметке, что видно по тексту, который мы поместили внутрь тегов. Текст внутри тега <h1> имеет больший шрифт, чем тот, что находится в
или , наша кнопка нажимается и все это работает автоматически благодаря HTML. Каркас нашей страницы готов и следующим шагом мы сделаем ее более красивой.
CSS: стилизация элементов страницы
Cascading Style Sheets (каскадные таблицы стилей) - это язык стилей, используемый для определения внешнего вида и оформления элементов на веб-страницах. С помощью CSS можно изменять стили текста, цвета, размеры, расположение элементов, а также добавлять анимацию и эффекты перехода.
Стили можно описать прямо внутри тега, добавив атрибут style с нужным значением:
Такой способ стилизации называется inline (инлайн) стилями потому что они описываются в строке с тегом. В данном примере мы указали для тега
синий цвет текста и перейдя на нашу страницу мы увидем что цвет изменился только у него.Прописывать стили внутри тегов не очень удобно потому что они могут повторяться несколько раз на одной странице и для переиспользования CSCS кода существуют правила и селекторы для применения стилей к нескольким элементам HTML. Сегодня мы познакомимся с тремя из этих селекторов:
- По тегу - выбирают элемент по названию тега.
- По классу - выбирают элемент по значению, указанному атрибуте class внутри тега.
- По идентификатору - выбирают элемент по значению, указанному атрибуте id внутри тега.
Селекторы можно комбинировать что бы обратиться к конкретному элементу.
Стили с селекторами можно описать прямо внутри HTML разметки в теге <style> или в отдельном файле с расширением css, после чего этот файл необходимо подключить внутри тега <head> страницы. На примере ниже мы опишем стили внутри разметки:
В результате в браузере наша страничка изменит внешний вид:
На примере выше можно отследить как изменились стили элементов страницы, но теперь она выглядит не очень эстетично поэтому удалим стили из разметки и перепишем их в отдельном css файле.
И подключим этот файл к нашей странице:
В итоге наша страница стала выглядеть намного лучше!
JavaScript: добавляем интерактивность
HTML, как и CSS не являются языками программирования в полной мере. Они имеют множество признаков языков программирования, но оба крайне узконаправлены и не подойдут для других целей, кроме тех что описаны в их названии. JavaScript, в свою очередь является полноценным языком программирования и может использоваться практических во всех сферах разработки. Его отличительной особенностью является то, что он может исполняться прямо внутри браузера и получать доступ к элементам страницы. В этом разделе мы не будем описывать базовые концепции JavaScript, а просто продемонстрируем его работу в связке с HTML и CSS.
Для начала создадим файл script.js и подключим его к нашей странице с помощью тега.
Теперь перейдем к написанию кода на JavaScript, который оживит нашу страницу и при нажатии на кнопку наш счетчик начнет увеличиваться.
Теперь при нажатии на кнопку количество кликов будет рости. Не переживайте, если будучи незнакомым с JavaScript не смогли понять что происходит в коде. Как я уже писал выше, это полноценный язык программирования и на его изучение потребуется время. Данный пример просто демонстраци совместной работы HTML, CSS и JavaScript.
Заключение
Веб-разработка требует знания и умения использовать HTML, CSS и JavaScript. HTML используется для структурирования и разметки содержимого, CSS - для стилизации и оформления, а JavaScript - для добавления интерактивности и функциональности. Узнав основы каждого языка и их взаимодействие, вы будете готовы создавать красивые и функциональные веб-сайты. Надеюсь что данная статья была полезна для понимания столь важной темы, а если вы хотите изучить верстку на HTML и CSS или основы JavaScript, я подготовил подробные курсы.
HTML и CSS - полный курс по вёрстке с нуля
- 19 часов коротких лекций по 10 - 15 минут
- 15 упражнений для закрепления на практике
- 19 тестов для проверки знаний
- Рейтинг ⭐ 4.9 на основании отзывов
- 30-ти дневная гарантия возврата денег
JavaScript с нуля - основы языка и практика для начинающих
- 16 часов коротких лекций по 10 - 15 минут
- 15 упражнений для закрепления на практике1
- 5 тестов для проверки знаний
- Рейтинг ⭐ 4.9 на основании отзывов
- 30-ти дневная гарантия возврата денег