HTML, CSS и JavaScript — это основные технологии, лежащие в основе любой веб-страницы. Для новичков может быть неочевидно, какую роль играет каждый из них и как они взаимодействуют друг с другом.
В этой статье мы не будем глубоко уходить в синтаксис или особенности использования каждого языка. Вместо этого сосредоточимся на их ключевых задачах и покажем, как они вместе формируют поведение веб-приложения — на простом примере: странице со счётчиком, увеличивающим значение при клике. В конце статья я также оставил вам блок бесплатных материалов для обучения разработке.
HTML: структура страницы
На любом сайте вы видите веб-страницу, которая состоит из блоков текста, картинок, кнопок и других элементов. Все эти элементы называются разметкой и описываются с помощью языка HTML — Hyper Text Markup Language, что переводится как “язык гипертекстовой разметки”.
Он представляет собой набор тегов, которые объявляют и описывают каждый элемент на странице. Браузеры интерпретируют HTML-код и отображают его в виде веб-страницы. Теги могут содержать в себе другие теги, формируя таким образом структуру страницы.
Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы. Внутри него находятся еще два обязательных тега: <head>, который содержит метаданные страницы (описание, название, ссылки на стили CSS, скрипты и др), которые не отображаются на самой странице и <body> в котором описывается видимое содержимое страницы. Создадим новый файл с названием "index.html", после чего заполним его базовыми тегами. Код “пустой” страницы выглядит так:
Сейчас наша страница пуста и что бы ее наполнить, познакомимся с несколькими HTML-тегами:
- <div> — универсальный блочный контейнер, который используется для группировки и структурирования других элементов на веб-странице.
- <h1> — заголовок верхнего уровня на веб-странице. Он обычно используется для наиболее важных заголовков и имеет наибольший размер шрифта среди всех доступных уровней заголовков (от <h1> до <h6>).
- <p> — используется для отображения отдельного параграфа текста на веб-странице. Он представляет блок текста, который обычно разделен на абзацы.
- <button> — представляет кнопку, которая может быть нажата пользователем для выполнения определенного действия на веб-странице.
Открыв нашу страничку в браузере мы увидем результат:
Наши теги расположились на странице в том порядке, в котором мы из указали в разметке. Текст внутри тега <h1> имеет больший шрифт, чем тот, что находится в <p> или <span>, наша кнопка нажимается и все это работает автоматически благодаря HTML. Каркас нашей страницы готов и следующим шагом мы сделаем ее более красивой.
CSS: стилизация элементов страницы
Статья охватывает основы веб-разработки, но для глубокого понимания каждой технологии требуется время и практика. Если вы хотите детальнее погрузиться в HTML и CSS, изучить все тонкости верстки и создания интерактивных веб-страниц — приходите на наш большой курс HTML и CSS. На курсе 212 уроков и 19 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.
Cascading Style Sheets (англ. — "каскадные таблицы стилей") — это язык стилей, используемый для определения внешнего вида и оформления элементов на веб-страницах. С помощью CSS можно изменять стили текста, цвета, размеры, расположение элементов, а также добавлять анимацию и эффекты перехода.
Стили можно описать прямо внутри тега, добавив атрибут style с нужным значением: <h1 style="color: blue">Счетчик кликов</h1>.
Такой способ стилизации называется inline-стилями потому что они описываются в строке с тегом. В данном примере мы указали для тега <h1> синий цвет текста и перейдя на нашу страницу мы увидем что цвет изменился только у него.
Прописывать стили внутри тегов не очень удобно потому что они могут повторяться несколько раз на одной странице и для переиспользования CSCS кода существуют правила и селекторы для применения стилей к нескольким элементам HTML. Сегодня мы познакомимся с тремя из этих селекторов:
- По тегу - выбирают элемент по названию тега.
- По классу - выбирают элемент по значению, указанному атрибуте class внутри тега.
- По идентификатору - выбирают элемент по значению, указанному атрибуте id внутри тега.
Селекторы можно комбинировать что бы обратиться к конкретному элементу.
Стили с селекторами можно описать прямо внутри HTML разметки в теге <style> или в отдельном файле "style.css", после чего этот файл необходимо подключить внутри тега <head> страницы. На примере ниже мы опишем стили внутри разметки:
В результате в браузере наша страничка изменит внешний вид:
На примере выше можно отследить как изменились стили элементов страницы, но теперь она выглядит не очень эстетично поэтому удалим стили из разметки и перепишем их в отдельном CSS-файле:
И подключим этот файл к нашей странице:
В итоге наша страница стала выглядеть намного лучше!
В результате вы получите знания и навыки для эффективной вёрстки. А если возникнут вопросы, вы всегда можете обратиться в чат учеников с вопросом.
JavaScript: добавляем интерактивность
HTML, как и CSS не являются языками программирования в полной мере. Они имеют множество признаков языков программирования, но оба крайне узконаправлены и не подойдут для других целей, кроме тех что описаны в их названии. JavaScript, в свою очередь является полноценным языком программирования и может использоваться практических во всех сферах разработки. Его отличительной особенностью является то, что он может исполняться прямо внутри браузера и получать доступ к элементам страницы. В этом разделе мы не будем описывать базовые концепции JavaScript, а просто продемонстрируем его работу в связке с HTML и CSS.
Для начала создадим файл "script.js" и подключим его к нашей странице с помощью тега <script>. Код на JavaScript так же можно полностью описать внутри этого тега:
Теперь перейдем к написанию кода на JavaScript, который оживит нашу страницу и при нажатии на кнопку наш счетчик начнет увеличиваться.
Теперь при нажатии на кнопку количество кликов будет рости.
Заключение
Веб-разработка требует знания и навыков использования как HTML, так CSS и JavaScript. HTML используется для структурирования и разметки содержимого, CSS — для стилизации и оформления, а JavaScript — для добавления интерактивности и функциональности. Узнав основы каждого языка и их взаимодействие, вы будете готовы создавать красивые и функциональные веб-сайты.
Чтобы стать профессиональным веб-разработчиком, необходимо постоянно учиться и практиковаться. На нашем курсе HTML и CSS вы получите необходимые знания и навыки для старта в веб-разработке. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир HTML и CSS прямо сегодня.
Бесплатные полезности
1. Смотрите видео: код-ревью, собеседования и новости разработки на нашем Дзене – https://dzen.ru/purpleschool?tab=longs
2. Создайте личный план обучения и получите доступ к базе из 500+ бесплатных уроков в бесплатных картах развития на нашем сайте – https://purpleschool.ru/skills
3. Разберитесь в том, как устроен мир IT на бесплатном курсе «Основы разработки» – https://purpleschool.ru/course/code-basics