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

А как?

Три кита веб-разработки

Любой сайт основан на использовании трёх языков. Каждый из них выполняет свою работу.

🦴
HTML
HyperText Markup Language
📌 Структура (скелет)
  • Заголовки и текст
  • Картинки и ссылки
  • Списки и таблицы
📄 index.html
<!DOCTYPE html>
    <html>
    <head>
        <title>Моя страница</title>
    </head>
    <body>

        <h1>Добро пожаловать!</h1>

        <p>
            Пример сайта
            Пупупупуп
            💀💀💀💀💀
        </p>

        <img src="photo.jpg"
             alt="Моё фото">

        <ul>
            <li>Мои любимые игры</li>
            <li>Мои любимые фильмы</li>
            <li>Мои любимые книги</li>
        </ul>

        <a href="https://google.com">
            Перейти на Google
        </a>

        <a href="https://google.com">
            Перейти на Яндекс
        </a>

    </body>
    </html>
🎨
CSS
Cascading Style Sheets
🎭 Внешний вид (одежда)
  • Цвета и фон
  • Шрифты и размеры
  • Расположение блоков
🎨 style.css
/* Общие настройки */
    body {
        font-family: Arial, sans-serif;
        background: #f0f4ff;
        margin: 0;
        padding: 20px;
    }

    /* Стиль заголовка */
    h1 {
        color: #4a6cf7;
        font-size: 40px;
        text-align: center;
        border-bottom: 3px solid #4a6cf7;
        padding-bottom: 10px;
    }

    /* Стиль кнопки */
    button {
        background: #4a6cf7;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
    }

    /* Кнопка при наведении */
    button:hover {
        background: #3a5bd9;
        transform: scale(1.05);
    }
⚡
JavaScript
JavaScript (JS)
🧠 Поведение (мозг)
  • Кнопки и формы
  • Анимации
  • Игры и логика
⚡ script.js
// Приветствие при загрузке
    alert("Добро пожаловать на сайт!");

    // Находим кнопку на странице
    let button = document.querySelector('button');

    // Слушаем клик по кнопке
    button.addEventListener('click', function() {
        // Спрашиваем имя
        let name = prompt("Как тебя зовут?");

        // Если имя ввели — показываем приветствие
        if (name !== null && name !== "") {
            alert("Привет, " + name + "!");
        } else {
            alert("Ты не ввёл имя!");
        }
    });

    // Считаем клики
    let counter = 0;

    button.addEventListener('click', function() {
        counter = counter + 1;
        console.log("Кликов: " + counter);
    });
🧩 Как они работают вместе:
HTML
создаёт кнопку на странице
<button onclick = "sayHello()" > ААААААА </button>
CSS
делает её красивой
background : #4a6cf7 ;
border-radius : 8px ;
JavaScript
заставляет её работать
function   sayHello () {
  alert ( "💚💚💚" ); }
🔄 HTML + CSS + JavaScript = Красивый работающий сайт

Клиент и Сервер

В вебе всегда есть две стороны: Клиент (тот, кто отправляет запросы) и Сервер (тот, кто высылает ответы).
Они общаются через интернет.

🖥️
КЛИЕНТ
(Браузер)
  • 🌐 Открывает сайты
  • 👆 Реагирует на клики
  • 📄 Показывает страницы
  • 💻 Работает на твоём компьютере
Браузеры: Chrome, Firefox, Yandex, Edge
📤 ЗАПРОС →
«Дай страницу /about»




← 📥 ОТВЕТ
«Держи страницу (HTML+CSS+JS)»
⚙️
СЕРВЕР
(Хостинг)
  • 📦 Хранит файлы сайта
  • 📤 Отдаёт страницы
  • 🗄️ Работает с базой данных
  • 🏢 Стоит в дата-центре
Сервера: Apache, Nginx, облачные платформы
💡 Вкратце: Браузер (Клиент) ЗАПРАШИВАЕТ страницу, а Сервер ВЫСЫЛАЕТ её.

Как устроен запрос и ответ

Когда мы вводим адрес сайта в браузере и нажимаем Enter, происходит коннект между браузером и сервером.

🧑‍💻 Браузер: «Привет! Дай мне страницу /about» ЗАПРОС
⬇️
⚙️ Сервер: «Держи! Вот HTML, CSS и JS для этой страницы» ОТВЕТ
📤 Запрос содержит:
  • Адрес страницы (URL)
  • Тип запроса (GET / POST)
  • Данные от пользователя
📥 Ответ содержит:
  • Код состояния (200 = ОК)
  • Содержимое страницы
  • Тип контента (HTML, JSON и т.д.)

Алгоритм загрузки страницы

Что происходит при открытии сайта в браузере?

1
Ты вводишь адрес Например, google.com и нажимаешь Enter
⬇️
2
DNS-поиск Браузер узнаёт IP-адрес сервера
⬇️
3
Браузер отправляет HTTP-запрос Просит сервер: «Отдай страницу»
⬇️
4
Сервер отвечает HTML-документом Отправляет скелет страницы
⬇️
5
Браузер читает HTML и находит CSS и JS Видит ссылки на стили и скрипты
⬇️
6
Загружается CSS и JavaScript Страница становится красивой и живой
⬇️
7
Страница загружена и готова! Ты видишь сайт и можешь с ним взаимодействовать

Примерный план программы на 8 месяцев

Месяц 1 🦴 Основы HTML Структура страницы, теги, текст, картинки
Месяц 2 🎨 Основы CSS Цвета, шрифты, расположение блоков
Месяц 3 ⚡ JavaScript Кнопки, игры, логика, анимации
Месяц 4 🚀 Верстка сайтов Собираем всё вместе, адаптив
Месяц 5 📡 Публикация сайта Выкладываем сайт в интернет
Месяцы 6-8 🎯 Создание своего проект Создаём свой сайт с нуля и защищаем его

Практика

Сделаем первый шаг в веб-разработку прямо сейчас! Никаких программ устанавливать не нужно.

1
Открой любой сайт (например, it-kvantum.ru)
2
Нажми правой кнопкой мыши → «Посмотреть код» (или клавишу F12)
3
Наведи мышкой на текст — увидишь его HTML-код
4
В панели справа найди CSS-свойства и поменяй цвет текста
5
Перейди во вкладку Console и напиши: alert("АААААААААА") — нажми Enter
Инспектор кода
Инструменты разработчика в Google Chrome