Урок 4 · Слайд 1
🏗️

Что такое HTML?

Скелет каждого сайта в интернете

HTML — скелет сайта. Как кости в теле — задают структуру. CSS — одежда и украшения. Каждый сайт в интернете сделан из HTML!

Мой первый HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Мой сайт 🚀</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый сайт!</p>
  </body>
</html>
📖 Словарик
HTML
Язык разметки для создания структуры сайтов.
"Весь интернет написан на HTML"
Тег
Команда в HTML, пишется в угловых скобках: <p>.
"Тег p создаёт абзац"
DOCTYPE
Объявление типа документа для браузера.
"DOCTYPE html говорит браузеру: это HTML5"
Урок 4 · Слайд 2
🏷️

Основные теги

Строительные блоки любой страницы

index.html
<h1>Большой заголовок</h1>
<h2>Поменьше</h2>
<h3>Ещё меньше</h3>

<p>Абзац текста</p>
<strong>Жирный текст</strong>
<em>Курсив</em>

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

<a href="https://google.com">Ссылка</a>
<img src="фото.jpg" alt="Описание" />
📖 Словарик
Атрибут
Дополнительные настройки тега.
"href у ссылки — атрибут с адресом страницы"
Вложенность
Теги внутри других тегов — как матрёшки.
"li вложены внутрь ul"
Alt
Описание картинки для незрячих и если фото не загрузилось.
"Всегда пиши alt для img"
Урок 4 · Слайд 3
🎨

CSS: стилизуем сайт

Делаем сайт красивым

styles.css
/* Выбираем элемент и задаём стиль */
h1 {
  color: #FF6B6B;
  font-size: 32px;
  text-align: center;
}

p {
  font-family: Arial, sans-serif;
  color: #444;
  line-height: 1.6;
}

body {
  background-color: #f0f8ff;
  padding: 20px;
}
📖 Словарик
CSS
Язык стилей, отвечает за внешний вид сайта.
"CSS задаёт цвета, шрифты и расположение"
Селектор
Часть CSS, указывающая какой элемент стилизовать.
"h1 — это селектор заголовка первого уровня"
Свойство
Что именно меняем: color, font-size, padding.
"color: red задаёт красный цвет текста"
Урок 4 · Слайд 4
🏷️

Классы и ID

Точечная стилизация элементов

HTML
<div class="карточка">
  <h2 class="заголовок">
    Кот 🐱
  </h2>
  <p>Пушистый</p>
</div>

<button id="главная-кнопка">
  Нажми меня!
</button>
CSS
.карточка {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px;
}
#главная-кнопка {
  background: #FF6B6B;
  color: white;
  border: none;
  border-radius: 8px;
}
📖 Словарик
Класс (class)
Многоразовый стиль для нескольких элементов. Начинается с точки в CSS.
"Класс 'card' можно применить к 10 карточкам"
ID
Уникальный идентификатор одного элемента. Начинается с # в CSS.
"ID должен встречаться только один раз на странице"
div
Универсальный блок-контейнер для группировки элементов.
"div используют чтобы группировать элементы"
Урок 4 · Слайд 5
📐

Flexbox: располагаем элементы

Самый удобный способ вёрстки

styles.css
.контейнер {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Карточки в ряд */
.card {
  flex: 1;
  min-width: 200px;
  background: white;
  padding: 20px;
  border-radius: 12px;
}

Flexbox — самый удобный способ расположить элементы в ряд или колонку. justify-content выравнивает по горизонтали, align-items — по вертикали.

📖 Словарик
Flexbox
Система расположения элементов в один ряд или колонку.
"display: flex включает Flexbox"
justify-content
Выравнивание по главной оси (горизонталь).
"center — по центру, space-between — по краям"
gap
Расстояние между flex-элементами.
"gap: 20px добавляет 20px между карточками"
Урок 4 · Слайд 6
📱

Media queries: адаптивность

Сайт хорошо выглядит на любом экране

styles.css
/* На большом экране — 3 колонки */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* На планшете — 2 колонки */
@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
/* На телефоне — 1 колонка */
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
}
📖 Словарик
Адаптивность
Сайт выглядит хорошо на любом устройстве.
"Адаптивный сайт удобен и на телефоне"
Media query
CSS-правило, применяется только при определённом размере экрана.
"@media (max-width: 768px) — для планшетов"
Breakpoint
Размер экрана, при котором меняется дизайн.
"768px — типичный breakpoint для планшетов"
Урок 4 · Слайд 7
✨

CSS анимации

Оживляем элементы страницы

styles.css
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.мяч {
  width: 50px; height: 50px;
  background: #FF6B6B;
  border-radius: 50%;
  animation: bounce 1s ease-in-out infinite;
}

.кнопка:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
}
📖 Словарик
@keyframes
Описывает шаги анимации от 0% до 100%.
"keyframes bounce задаёт анимацию прыжка"
animation
Применяет анимацию к элементу.
"animation: bounce 1s infinite — бесконечный прыжок"
transition
Плавное изменение свойства при наведении или изменении.
"transition делает hover плавным и красивым"
Урок 4 · Слайд 8
🎯

Мини-проект: карточка профиля

Создай свою страницу!

1
Создай файл profile.html и открой его в VS Code
2
Добавь своё имя в <h1>
3
Напиши описание о себе в <p>
4
Создай список хобби в <ul>
5
Добавь CSS стили: цветной фон, карточка с тенью, красивый шрифт
6
Добавь анимацию transition при наведении на карточку
7
Открой в браузере и покажи учителю! 🎉