Основы веб-разработки: HTML, CSS, JavaScript.

Валерий Шестернин

17 сентября 2023

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 - для добавления интерактивности и функциональности. Узнав основы каждого языка и их взаимодействие, вы будете готовы создавать красивые и функциональные веб-сайты. 