Урок 5. «Фотогалерея: разметка» — HTML и CSS

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

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

Цель урока

Организовать проект и сделать HTML-разметку фотогалереи.

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

Папка проекта с подпапками для стилей и картинок.
index.html с заголовком «Gallery» и подключённый main.css.
Картинки переименовываем, чтобы не путаться в именах файлов.
Сначала всегда разметка: тег main и заголовок h1.
Классы: запись «тег.класс», несколько классов у одного тега.
12 блоков div с классом photo одной строкой Emmet.

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

Класс — метка, по которой CSS находит элементы. Один класс можно дать многим тегам.
Порядок в папках проекта экономит время: сразу понятно, где стили, а где картинки.

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

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

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