Урок 2. «Основные HTML-теги» — HTML и CSS

Курс: Веб-программирование, урок 2 из 12
Тема по программе: Основные HTML-теги
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта

Это сокращённое описание урока. Полные материалы — в курсе «Веб-программирование». Первый урок курса целиком можно скачать бесплатно в разделе «Бесплатно».

Цель урока

Изучить основные HTML-теги и научиться пользоваться веб-инспектором.

Что делаем на уроке

Тег — основной строительный блок страницы; парные и одиночные теги.
Структура документа: DOCTYPE, html, head, title, meta charset, body.
Абзац p и картинка img с атрибутами src и alt.
Атрибуты — свойства тега, их пишут в открывающем теге.
Тег div — универсальный контейнер.
Веб-инспектор в браузере: смотрим, как устроены разные сайты.

Что объяснить детям

Вложенность тегов похожа на матрёшку: html содержит head и body, а body — всё, что видно на странице.
meta charset="UTF-8" нужен, чтобы русский текст отображался правильно.
Атрибут alt — описание картинки, его показывают, если изображение не загрузилось.

Что в полном комплекте

12 конспектов занятий со скриншотами — по одному на урок
Методика проведения с подробным описанием хода урока
Готовые файлы проекта к модулям 2 и 3 — если группа отстаёт, не нужно собирать проект с нуля

Предыдущий урок — Что такое веб-разработка. Следующий — Знакомство с CSS. Все уроки курса: Что такое веб-разработка · Знакомство с CSS · Вёрстка страницы блога · Фотогалерея: разметка · Фотогалерея: отступы и стили · Позиционирование: display и flex · Галерея: анимация и публикация · Знакомство с Photoshop · Разметка сайта по макету · Вёрстка экранов на flexbox · Завершение сайта и публикация.