🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?
✅ Без входа можно
- читать все занятия обоих курсов, смотреть слайды и шпаргалку;
- пробовать код в редакторе и песочнице.
⛔ Без входа нельзя
- сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
- отмечать пройденные занятия и видеть свой прогресс;
- выбрать тему итогового проекта и отмечать чек-лист;
- отправить итоговый тест и сохранить результат.
HTML и CSS с нуля: создаём свои сайты Модуль 1. Введение и HTML
Вводное занятие
Сегодня мы узнаем, из чего «сделан» любой сайт, и увидим, как несколько строчек кода превращаются в страницу.
Изучаем: Что такое сайт, HTML, CSS, браузер. Как работает веб-страница
Результат: Смотрим примеры сайтов, создаём папку проекта, изучаем правила безопасности
👀 Сегодня сделаем вот такое
Показать код примера
<h1>Мой первый сайт</h1>
<p>HTML — это <strong>содержание</strong>, а CSS — <em>оформление</em>.</p>body {
font-family: sans-serif;
background: #fff7e6;
text-align: center;
}
h1 {
color: #ff6b35;
}💡 Объяснение
Что происходит, когда ты открываешь сайт
Представь, что интернет — это огромная библиотека, а сайты — книги в ней. Каждая «книга» хранится на специальном компьютере, который называется сервер. Он работает круглые сутки и ждёт, когда кто-нибудь попросит у него страницу.
- Ты вводишь адрес, например
ru.wikipedia.org, или нажимаешь на ссылку. - Браузер (Chrome, Firefox, Яндекс Браузер, Safari) отправляет серверу запрос: «Дай мне, пожалуйста, эту страницу».
- Сервер отвечает и присылает файлы: HTML, CSS, картинки.
- Браузер читает эти файлы и «рисует» страницу на экране. Всё это занимает доли секунды!
Главное, что нужно понять: страница — это обычный текстовый файл с особыми командами. Браузер умеет их читать и превращать в красивую картинку. Значит, и ты можешь написать такой файл сам!
Сайт и веб-страница — в чём разница
Веб-страница — это один документ (одна «страница книги»). Сайт — это несколько страниц, связанных между собой ссылками и объединённых общей темой и оформлением (вся «книга»). Например, сайт школы может состоять из страниц «Главная», «Новости», «Расписание», «Контакты».
Три языка любой страницы
Сайты создают с помощью трёх языков. Их удобно сравнить с человеком или с домом:
- HTML (HyperText Markup Language — «язык гипертекстовой разметки») — это скелет или стены дома. Он говорит, что есть на странице: вот заголовок, вот абзац, вот картинка, вот ссылка.
- CSS (Cascading Style Sheets — «каскадные таблицы стилей») — это одежда или ремонт и мебель. Он говорит, как всё выглядит: цвет, размер букв, где стоят блоки.
- JavaScript — это мышцы или электричество в доме. Он делает страницу живой: кнопки что-то делают, появляются окна, работают игры. JavaScript мы оставим на следующий год.
В нашем курсе мы изучим HTML и CSS — этого уже достаточно, чтобы сделать настоящий красивый сайт.
Что такое тег
HTML состоит из тегов. Тег — это слово-команда в угловых скобках < >. Обычно теги ходят парами:
<p>Это абзац текста</p><p>— открывающий тег: «здесь начинается абзац».</p>— закрывающий тег, в нём есть косая черта/: «здесь абзац заканчивается».- Всё, что между ними, — содержимое элемента.
Теги можно сравнить с кавычками или скобками: что открыли — то нужно закрыть.
Как заглянуть в код любого сайта
В каждом браузере есть инструменты разработчика. Нажми F12 (или правой кнопкой мыши → «Просмотреть код»). Откроется панель, где видно HTML-код страницы. Если навести мышь на строчку кода, браузер подсветит соответствующий кусочек страницы. Там даже можно временно поменять текст — изменения пропадут после обновления, потому что меняется только копия страницы у тебя на компьютере, а не сайт на сервере.
Правила безопасности в сети
Когда ты делаешь свой сайт, помни: всё, что попало в интернет, может увидеть кто угодно, и удалить это полностью бывает невозможно.
- Не публикуй домашний адрес, номер телефона, номер школы и класса, фамилию, фото без разрешения взрослых.
- Картинки, музыка и тексты принадлежат их авторам. Используй то, что разрешено (бесплатные фотостоки, свои рисунки и фото), и указывай источник.
- Никому не сообщай пароли — даже друзьям.
- Если что-то в сети тебя напугало или смутило — расскажи взрослым.
Как устроен этот курс
Курс подготовлен командой Русского техно холдинга (rth.su) для самостоятельного обучения с нуля. В каждом занятии есть слайды, подробное объяснение, шпаргалка, задания и редактор кода.
🔒 Учиться можно без регистрации, но тогда ничего не сохраняется на сайте: черновики из редактора останутся только в этом браузере, пройденные занятия не отметятся, а тест нельзя будет проверить. Чтобы сайт запоминал прогресс, работы и результаты — зарегистрируйся.
Проверь себя
- Какой язык отвечает за содержание страницы, а какой — за внешний вид?
- Чем открывающий тег отличается от закрывающего?
- Что будет, если поменять текст на сайте через F12, а потом обновить страницу? Почему?
⌨️ Практика
- Открой любимый сайт и нажми F12 — найди в коде хотя бы три тега.
- Создай на компьютере папку «my-site» — в ней будут жить все твои проекты.
- В редакторе справа поменяй текст заголовка и цвет — посмотри, что изменится.
- Составь три правила безопасности для своего будущего сайта и запиши их.
🧪 Редактор
🪞 Рефлексия
- Что нового я сегодня узнал(а)?
- Что получилось лучше всего?
- Где было трудно и что поможет в следующий раз?
🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход
💬 Вопросы по занятию
Не получается — спроси здесь. Другие ученики и преподаватель видят вопросы и отвечают. Пиши вежливо: грубые сообщения сайт не примет.
🔒 Писать могут только зарегистрированные. Читать обсуждение можно и без аккаунта. Регистрация · Вход
Вопросов пока нет. Задай первый — это помогает и тебе, и другим.