Валерий Шестернин
HTML, CSS и JavaScript - это основные языки, используемые в веб-разработке. Начинающим может быть сложно понять, что именно делают эти языки и как они работают вместе. В данной статье мы не будем погружаться в детали работы или использования каждого из трех основных языков программирования, а рассмотрим только основные аспекты и объясним их вклад в создание интерактивных веб-сайтов на примере написания простой страницы со счетчиком кликов.
HTML: структура страницы.
Каждый раз заходя на любой сайт вы видите веб-страницу, которая состоит из блоков текста, картинок, кнопок и других элементов. Все эти элементы называются разметкой и описываются с помощью языка HTML (HyperText Markup Language) эта аббревиатура переводится как “язык гипертекстовой разметки”. Он представляет собой набор тегов, которые объявляют и описывают каждый элемент на странице. Браузеры интерпретируют HTML-код и отображают его в виде веб-страницы. Теги могут содержать в себе другие теги, формируя таким образом структуру страницы. Тег <html>
является контейнером, который заключает в себе все содержимое веб-страницы. Внутри него находятся еще два обязательных тега: <head>
, который содержит метаданные страницы (описание, название, ссылки на стили CSS, скрипты и др), которые не отображаются на самой странице и <body>
в котором описывается видимое содержимое страницы. Создадим новый файл с названием index и расширением html, после чего заполним его базовыми тегами. Код “пустой” страницы выглядит так:
<!DOCTYPE html>//тип документа
<html lang="en">//открывающий тег страницы и указание языка
<head>//открывающий тег head
<meta charset="UTF-8" />//кодировка символов
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
//описание видимой части старницы
<title>My document</title>//название страницы, отображаемое во вкладке браузера
</head>//закрывающий тег head
<body>//открывающий тег body
//здесь будет видимое содержимое
</body>//закрывающий тег body
</html>//закрывающий тег страницы
Сейчас наша страница пуста и что бы ее наполнить, познакомимся с несколькими HTML-тегами:
<div>
- универсальный блочный контейнер, который используется для группировки и структурирования других элементов на веб-странице.
<h1>
- заголовок верхнего уровня на веб-странице. Он обычно используется для наиболее важных заголовков и имеет наибольший размер шрифта среди всех доступных уровней заголовков (от
<h1>
до<h6>
).
- заголовок верхнего уровня на веб-странице. Он обычно используется для наиболее важных заголовков и имеет наибольший размер шрифта среди всех доступных уровней заголовков (от
<p>
- используется для отображения отдельного параграфа текста на веб-странице. Он представляет блок текста, который обычно разделен на абзацы.
<button>
- представляет кнопку, которая может быть нажата пользователем для выполнения определенного действия на веб-странице.
<body>
<div>
<h1>Счетчик кликов</h1>
<p>Количество кликов: <span>0</span></p>
<button>Нажми на меня!</button>
</div>
</body>
Открыв нашу страничку в браузере мы увидем результат:
Наши теги расположились на странице в том порядке, в котором мы из указали в разметке, что видно по тексту, который мы поместили внутрь тегов. Текст внутри тега <h1> имеет больший шрифт, чем тот, что находится в <p> или <span>, наша кнопка нажимается и все это работает автоматически благодаря HTML. Каркас нашей страницы готов и следующим шагом мы сделаем ее более красивой.
CSS: стилизация элементов страницы
Cascading Style Sheets (каскадные таблицы стилей) - это язык стилей, используемый для определения внешнего вида и оформления элементов на веб-страницах. С помощью CSS можно изменять стили текста, цвета, размеры, расположение элементов, а также добавлять анимацию и эффекты перехода.
Стили можно описать прямо внутри тега, добавив атрибут style
с нужным значением: <h1 style="color: blue">Счетчик кликов</h1>
Такой способ стилизации называется inline (инлайн) стилями потому что они описываются в строке с тегом. В данном примере мы указали для тега <h1> синий цвет текста и перейдя на нашу страницу мы увидем что цвет изменился только у него.
Прописывать стили внутри тегов не очень удобно потому что они могут повторяться несколько раз на одной странице и для переиспользования CSCS кода существуют правила и селекторы для применения стилей к нескольким элементам HTML. Сегодня мы познакомимся с тремя из этих селекторов:
- По тегу - выбирают элемент по названию тега.
- По классу - выбирают элемент по значению, указанному атрибуте
class
внутри тега. - По идентификатору - выбирают элемент по значению, указанному атрибуте
id
внутри тега.
Селекторы можно комбинировать что бы обратиться к конкретному элементу.
Стили с селекторами можно описать прямо внутри HTML разметки в теге <style>
или в отдельном файле с расширением css, после чего этот файл необходимо подключить внутри тега <head>
страницы. На примере ниже мы опишем стили внутри разметки:
<body>
<div class="container">//добавляем нашему div класс "container"
<h1 style="color: blue">Счетчик кликов</h1>//инлайн стили
<p>Количество кликов: <span>0</span></p>
<button id="button">//добавляем кнопке id "button"
Нажми на меня!
</button>
</div>
<style>//внутри этого тега можно описать стили
p { //селектор по тегу
color: red; //задаем красный цвет внутри тега <p>
}
.container { //селектор по классу
text-align: center; //задаем расположение текста посередине контейнера
margin-top: 100px; //и отступ от верхнего края страницы в 100 пикселей
}
#button{ //селектор по идентификатору
background-color: blueviolet;
color: #fff; //здесь мы задаем цвет текста с помощью кодировки, не словом
font-size: 16px; //задаем размер шрифта
padding: 10px 20px; //и внутренние отступы внутри кнопки
}
p span { //комбинация селекторов
color: green;
}
</style>
</body>
В результате в браузере наша страничка изменит внешний вид:
На примере выше можно отследить как изменились стили элементов страницы, но теперь она выглядит не очень эстетично поэтому удалим стили из разметки и перепишем их в отдельном css файле.
/* styles.css */
.container {
text-align: center;
margin-top: 100px;
}
p span {
font-size: 24px;
font-weight: bold; //задаем жирный шрифт для счетчика
}
#clickButton {
font-size: 16px;
padding: 10px 20px;
background-color: blue;
color: #fff;
border: none; //убираем рамку у кнопки
border-radius: 4px; //добавляем скругление краев кнопки
cursor: pointer; //при наведении на кнопку изменится курсор
}
И подключим этот файл к нашей странице:<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" /> //подключаем файл со стилями к странице
<title>My document</title>
</head>
В итоге наша страница стала выглядеть намного лучше!
JavaScript: добавляем интерактивность
HTML, как и CSS не являются языками программирования в полной мере. Они имеют множество признаков языков программирования, но оба крайне узконаправлены и не подойдут для других целей, кроме тех что описаны в их названии. JavaScript, в свою очередь является полноценным языком программирования и может использоваться практических во всех сферах разработки. Его отличительной особенностью является то, что он может исполняться прямо внутри браузера и получать доступ к элементам страницы. В этом разделе мы не будем описывать базовые концепции JavaScript, а просто продемонстрируем его работу в связке с HTML и CSS.
Для начала создадим файл script.js и подключим его к нашей странице с помощью тега <script>
. Код на JavaScript так же можно полностью описать внутри этого тега.
<body>
<div class="container">
<h1>Счетчик кликов</h1>
<p>Количество кликов: <span>0</span></p>
<button id="clickButton">Нажми на меня!</button>
</div>
<script src="./script.js"></script>//прописываем тег и указываем а атрибуте src путь до файла
</body>
Теперь перейдем к написанию кода на JavaScript, который оживит нашу страницу и при нажатии на кнопку наш счетчик начнет увеличиваться.let counter = 0;//задаем изначальное значение счетчика
//получаем доступ к элементам по из идентификатору:
const clickButton = document.getElementById("clickButton");//доступ к кнопке
const counterDisplay = document.getElementById("counter");//доступ к span со счетчиком
clickButton.addEventListener("click", function () {//добавляем слушатель, который отработает при нажатии кнопки
counter++;//увеличиваем значение счетчсика на 1 при каждом нажатии
counterDisplay.textContent = counter;//передаем это значение в наш span
});
Теперь при нажатии на кнопку количество кликов будет рости. Не переживайте, если будучи незнакомым с JavaScript не смогли понять что происходит в коде. Как я уже писал выше, это полноценный язык программирования и на его изучение потребуется время. Данный пример просто демонстраци совместной работы HTML, CSS и JavaScript.
Заключение
Веб-разработка требует знания и умения использовать HTML, CSS и JavaScript. HTML используется для структурирования и разметки содержимого, CSS - для стилизации и оформления, а JavaScript - для добавления интерактивности и функциональности. Узнав основы каждого языка и их взаимодействие, вы будете готовы создавать красивые и функциональные веб-сайты. 
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile
Комментарии
0