No history yet

Основы веб-разработки

Основы веб-разработки

Представьте, что вы строите дом. Вам нужен прочный каркас, красивая отделка и работающая электрика, чтобы дом был удобным и функциональным. Веб-сайт устроен похожим образом. Его создание опирается на три ключевые технологии: HTML, CSS и JavaScript.

HTML (HyperText Markup Language) — это каркас вашего сайта, его структура. CSS (Cascading Style Sheets) отвечает за внешний вид: цвета, шрифты и расположение элементов. JavaScript добавляет интерактивность, оживляя страницу, — как электричество в доме.

HTML: Структура вашего сайта

HTML — это язык разметки, который говорит браузеру, как отображать контент. Он использует теги — команды, заключённые в угловые скобки (< >), — чтобы определять различные элементы страницы, такие как заголовки, абзацы и ссылки.

Каждый HTML-документ имеет базовую структуру. Он всегда начинается с объявления <!DOCTYPE html>, которое сообщает браузеру, что это HTML-документ. Затем идёт тег <html>, внутри которого находятся <head> и <body>.

  • <head> содержит метаинформацию: название страницы для вкладки браузера (<title>), информацию о кодировке и ссылки на файлы стилей.
  • <body> содержит весь видимый контент: тексты, изображения, таблицы и всё, что видит пользователь.
<!DOCTYPE html>
<html>
<head>
  <title>Мой образовательный сайт</title>
</head>
<body>
  <h1>Главный заголовок</h1>
  <p>Это первый абзац текста.</p>
</body>
</html>

Для форматирования текста используются простые теги. Например, <h1> для самого важного заголовка, <p> для абзаца, <a> для создания ссылок и <ul> или <ol> для списков.

Lesson image

CSS: Внешний вид и стиль

Когда у вас есть структура (HTML), пора заняться её внешним видом. Здесь на помощь приходит CSS. С его помощью вы можете задать цвета, выбрать шрифты, настроить отступы и расположить элементы на странице именно так, как вам хочется.

Правило CSS состоит из трёх частей: селектора, свойства и значения. Селектор указывает, к какому HTML-элементу применить стиль. Свойство — это то, что вы хотите изменить (например, color — цвет), а значение — это сам стиль (например, blue — синий).

/* Этот код сделает фон страницы светло-серым, 
   заголовок h1 — тёмно-синим, 
   а текст абзацев — чёрным. */

body {
  background-color: #f0f0f0;
}

h1 {
  color: #003366;
}

p {
  color: #333333;
  font-size: 16px;
}

Чтобы применить эти стили, их обычно сохраняют в отдельном файле с расширением .css (например, style.css) и подключают к HTML-документу с помощью тега <link> внутри секции <head>.

<head>
  <title>Мой стильный сайт</title>
  <link rel="stylesheet" href="style.css">
</head>
Lesson image

JavaScript: Добавляем интерактивность

Если HTML — это скелет, а CSS — одежда, то JavaScript — это мышцы, которые приводят всё в движение. Этот язык программирования позволяет создавать динамические и интерактивные элементы: всплывающие окна, анимации, проверку форм перед отправкой и многое другое.

Даже простая задача, например, вывод сообщения при нажатии на кнопку, решается с помощью JavaScript.

<!-- Сначала добавляем кнопку в HTML -->
<button onclick="showMessage()">Нажми меня</button>

<!-- Затем пишем скрипт -->
<script>
function showMessage() {
  alert('Привет! Вы нажали на кнопку.');
}
</script>

Код JavaScript можно вставлять прямо в HTML-файл с помощью тега <script> или, что более правильно, подключать из внешнего файла, как и CSS.

Lesson image

Работа с русским языком

При создании сайтов на русском языке важно убедиться, что текст отображается корректно. Главную роль в этом играет кодировка. Без правильной кодировки вместо понятных букв вы можете увидеть «кракозябры» (например, Привет).

Стандартом для веба сегодня является кодировка UTF-8. Она поддерживает практически все языки мира, включая кириллицу. Чтобы браузер правильно понял ваш контент, добавьте в секцию <head> вашего HTML-файла специальный метатег.

<head>
  <meta charset="UTF-8">
</head>

Ещё один важный аспект — шрифты. Не все шрифты содержат кириллические символы. Используйте стандартные веб-безопасные шрифты (вроде Arial, Times New Roman) или подключайте специальные веб-шрифты, например, с помощью сервиса Google Fonts. Это гарантирует, что ваш текст будет выглядеть одинаково на всех устройствах.

Quiz Questions 1/5

Какую роль выполняет HTML в создании веб-сайта, если сравнивать его со строительством дома?

Quiz Questions 2/5

Из каких трёх основных частей состоит правило CSS?

Вы познакомились с тремя столпами веб-разработки. Теперь вы знаете, как создать структуру страницы, придать ей стиль и даже добавить немного интерактива, а также как обеспечить правильное отображение русского текста. Это основа, с которой начинается путь к созданию любого сайта.