🧱

Модуль 1. Введение и HTML

Занятие 1
Вводное занятие

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

👀

Сегодня сделаем вот такое

🌍

Что такое сайт?

Интернет — как огромная библиотека.

  • 📄 Веб-страница — одна страница книги
  • 📚 Сайт — вся книга: страницы, связанные ссылками
  • 🖥 Сервер — полка, где хранятся книги
📨

Как страница попадает к нам

  1. Ты вводишь адрес или жмёшь на ссылку
  2. Браузер просит у сервера страницу
  3. Сервер присылает файлы: HTML, CSS, картинки
  4. Браузер «рисует» страницу на экране

Страница — это просто текстовый файл с командами!

🧍

Три языка веба

HTML
🦴 скелет
ЧТО есть на странице
CSS
👕 одежда
КАК это выглядит
JavaScript
💪 мышцы
что ДЕЛАЕТ страница

В этом году изучаем HTML и CSS.

🏷

Тег — команда для браузера

  • Тег пишется в угловых скобках < >
  • <p> — открывающий: «начало»
  • </p> — закрывающий, с косой чертой: «конец»

Открыл — не забудь закрыть!

<h1>Привет!</h1>
<p>Это <strong>мой</strong> первый код.</p>
🎨

HTML + CSS = красота

Тот же HTML, но добавили CSS — и страница «переоделась».

Сверху — HTML, ниже — CSS, внизу — результат.

<h1>Привет!</h1>
<p>Это <strong>мой</strong> первый код.</p>
body { background: #fff7e6; text-align: center; }
h1 { color: #ff6b35; font-size: 48px; }
🔍

Секретная клавиша F12

  • Нажми F12 на любом сайте
  • Увидишь HTML-код страницы
  • Наведи мышь на строку — браузер подсветит элемент
  • Можно поменять текст… но после обновления всё вернётся!

Мы меняем только копию у себя, а не сайт на сервере.

🛡

Правила безопасности

  • 🏠 Не публикуем адрес, телефон, школу, фамилию
  • 🖼 Берём только разрешённые картинки и указываем автора
  • 🔑 Пароль — только твой секрет
  • 🙋 Что-то пугает в сети — расскажи взрослым
🃏

Запомни!

  • HTMLЯзык разметки: что есть на странице
  • CSSЯзык стилей: как это выглядит
  • <тег>…</тег>Открывающий и закрывающий тег
  • F12Открыть инструменты разработчика в браузере
⌨️

Практика: Смотрим примеры сайтов, создаём папку проекта, изучаем правила безопасности

  1. Открой любимый сайт и нажми F12 — найди в коде хотя бы три тега.
  2. Создай на компьютере папку «my-site» — в ней будут жить все твои проекты.
  3. В редакторе справа поменяй текст заголовка и цвет — посмотри, что изменится.
  4. Составь три правила безопасности для своего будущего сайта и запиши их.

🚀 Со звёздочкой: Найди в инструментах разработчика (F12) вкладку «Elements» и попробуй прямо там поменять текст заголовка на чужом сайте. Почему после перезагрузки всё вернулось?

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Найди два сайта, которые тебе нравятся, и запиши, чем именно (цвета, картинки, удобное меню).