Из чего состоит сайт

HTML - структура сайта

HTML (HyperText Markup Language) определяет структуру и содержание веб-страницы. Это как скелет вашего сайта.

<!DOCTYPE html>
<html>
<head>
    <title>Мой сайт</title>
</head>
<body>
    <h1>Привет мир!</h1>
    <p>Это мой первый сайт.</p>
</body>
</html>

Привет мир!

Это мой первый сайт.

CSS - стиль сайта

CSS (Cascading Style Sheets) отвечает за внешний вид страницы: цвета, шрифты, расположение элементов.

body {
    font-family: Arial;
    background: #f5f5f5;
    color: #333;
}

h1 {
    color: blue;
    font-size: 2rem;
}

.button {
    background: green;
    color: white;
    padding: 10px 20px;
}

Привет мир!

Это мой первый сайт.

JavaScript - интерактивность

JavaScript делает сайт интерактивным. С его помощью можно реагировать на действия пользователя, обновлять контент без перезагрузки страницы и многое другое.

// Пример простого счетчика
let count = 0;

function updateCounter() {
    document.getElementById('counter')
        .innerText = count;
}

function increment() {
    count++;
    updateCounter();
}

Счётчик

Текущее значение: 0

Как сайт появляется на экране

Пользователь вводит адрес

Вы вводите URL (например, google.com) в адресную строку браузера

Браузер отправляет запрос

Браузер находит сервер и запрашивает нужную страницу

Сервер находит файлы

Сервер обрабатывает запрос и ищет нужные HTML, CSS и JS файлы

Браузер показывает страницу

Браузер получает файлы, обрабатывает их и отображает готовую страницу

Попробуй сам

HTML

CSS

JavaScript

Результат

Как работают сайты

Из чего состоит сайт

HTML - структура сайта

Привет мир!

CSS - стиль сайта

Привет мир!

JavaScript - интерактивность

Счётчик

Как сайт появляется на экране

Пользователь вводит адрес

Браузер отправляет запрос

Сервер находит файлы

Браузер показывает страницу

Попробуй сам

Отключить технологии: