Курс по основам HTML (файл 05.07)

Лари Широкова, операционный директор Nado Health株式会社 и студентка 日本デザイン福祉専門学校 (Токио, Япония).
@lari_shirokova, me [at] lari-shirokova.ru

Устройство курса

Со второго занятия курс происходит в “перевёрнутом” формате: до встречи я записываю короткий ролик с рассказом о теории и даю ссылки на иную документацию, на встрече идёт выполнение упражнений, отработка и вопросики.

Время и место

Происходит в Zoom, в 12:00 МСК (18:00 Токио), почти каждую субботу; чят – в Телеграме.
Материалы публикуются на странице https://lari-shirokova.ru/projects/2025/html

Инструменты

Для практики вам потребуется VisualStudio Code, а начиная со второй встречи – хостинг (например, у компании Бегет, или я могу выдать на время курса у себя внутри https://lari-shirokova.ru).

Календарь и темы

• 07.06 Основы устройства Сети и HTML
  • Homekeeping и “Как устроен курс”
  • Устройство Сети
  • Языки разметки и языки программирования
  • Каркас HTML-страницы
  • Презентация повторения: первая половина PDF и видео к занятию 14.06
  • Упражнение “первая страница” и его эталонное выполнение: в виде сайта или кода, файл картинки лежит в одной папке с html-файлом
  • Основные материалы: https://htmlbook.ru/samhtml/vvedenie-v-html, https://webref.ru/course/introduction, https://htmlbook.ru/samhtml/struktura-html-koda, https://htmlbook.ru/samhtml/tegi, https://htmlbook.ru/samhtml/tegi/atributy-tegov, https://habr.com/ru/articles/495698/
  • Изучаемые теги: https://htmlbook.ru/html/title, https://htmlbook.ru/html/!doctype, https://htmlbook.ru/html/body, https://htmlbook.ru/html/!–, https://htmlbook.ru/html/h1, https://htmlbook.ru/html/head, https://htmlbook.ru/html/b, https://htmlbook.ru/html/br, https://htmlbook.ru/html/a, https://htmlbook.ru/html/img, https://htmlbook.ru/html/meta/charset, https://htmlbook.ru/html/p
  • Дополнительное чтение: https://root-servers.org/, https://sky.pro/wiki/javascript/http-zagolovki-chto-eto-zachem-nuzhny-i-kak-rabotayut/, https://habr.com/ru/articles/813395/, https://secrets.tbank.ru/glossarij/ip-adres/, https://practicum.yandex.ru/blog/chto-takoe-cookie-i-dlya-chego-nuzhny/
  • Запись: в чате в сообщении от 09 июня.
• 14.06 Публикация сайта в Сети, первый сайт, вложенные теги
  • Сайт из нескольких страниц с общим меню
  • Списки
  • Таблицы
  • Вложенные теги
  • Масштабирование картинок
  • Упражнение “Сайт о теме”: Делаем небольшой сайт из 3 cтраниц, где все 3 страницы соединены друг с другом, на одной из страниц должен список из 4-5 элементов, на другой — таблица (не менее 3x3), на 3 странице — статья с картинкой. Его нужно разместить в Сети, указав источник информации.
  • Эталонное выполнение упражнения: получившийся сайт, папка с картинками, исходный код всех страниц
  • Презентация к занятию: PDF и видео
  • Основные материалы: URL: относительные и абсолютные адреса, локальные и глобальные адреса, вложение тегов и комбинация их свойств на примере картинки-ссылки, как делать списки и таблицы, универсальный атрибут style
  • Изучаемые теги: https://htmlbook.ru/html/table, https://htmlbook.ru/html/td, https://htmlbook.ru/html/tr, https://htmlbook.ru/html/ul, https://htmlbook.ru/html/ol, https://htmlbook.ru/html/li, https://htmlbook.ru/html/img/width, https://htmlbook.ru/html/img/height,
  • Дополнительное чтение: Протоколы: HTTP, HTTPS, FTP, таблицы, вложенные в таблицы, управление размерами изображения
  • Запись: в чате в сообщении от 16 июня.
• 28.06 Блоки, CSS, позиционирование, универсальные свойства display, class, id
  • Упражнение “Статьи”: создать страницу со статьями (2+), в которой будет меню, подвал с копирайтами, в статье (каждой) будет несколько (2+) изображений и абзацев (2+). Меню должно быть по центру экрана свеху, ссылки в нём должны быть надчёркнуты, перед ссылками должен быть логотип (небольшая картинка) с синей границей (2 пикселя) . В статье каждый абзац должен быть выделен отступом в 20 пикселей, каждая картинка должна находиться в центре экрана и иметь границы справа и слева в 5 пикселей (ваших любимых цветов). Подвал с копирайтами должен быть серого цвета слева. Главные термины в статье должны быть выделены (см пример с термином style на странице кода второй практики), под статьёй должен быть список источников статьи (2-3).
  • Материалы перед встречей: PDF, видео, код из презентации.
  • Эталонное решение практики: сайт с кодом
  • Изучаемые теги: https://htmlbook.ru/html/div, https://htmlbook.ru/html/span, https://htmlbook.ru/html/style
  • Изучаемые свойства HTML: https://htmlbook.ru/html/attr/style, https://htmlbook.ru/html/attr/class, https://htmlbook.ru/html/attr/id
  • Изучаемые особенности CSS: работа с цветом
  • Изучаемые свойства CSS: https://htmlbook.ru/css/cat/text, https://htmlbook.ru/css/text-decoration, https://htmlbook.ru/css/text-align, https://htmlbook.ru/css/text-indent, https://htmlbook.ru/css/text-transform, https://htmlbook.ru/css/word-spacing, https://htmlbook.ru/css/cat/font, https://htmlbook.ru/css/font-style, https://htmlbook.ru/css/font-size, https://htmlbook.ru/css/font-family, https://htmlbook.ru/css/font-weight, https://htmlbook.ru/css/border
  • Дополнительные материалы: https://colorscheme.ru/, https://htmlbook.ru/content/dobavlenie-css, https://htmlbook.ru/samcss/sposoby-dobavleniya-stiley-na-stranitsu
• 05.07 Семантический веб, сложение правил CSS, валидация и спецсимволы
  • Упражнение Сайт о цветах: Сделать сайт из 2 страниц, где есть общее меню, общее меню содержит ссылки на две страницы сайта, страница где мы сейчас должна быть без подчеркивания, на первой — информация про цветы, где картинки прижимаются по очереди к левому или правому части экрана, на второй странице — текст с картинками. В подвале сайта — указать все источники на материалы
  • Эталонное выполнение упражнения: сайт и его код
  • Материалы перед встречей: PDF, видео и код из презентации
  • Изучаемые теги: https://htmlbook.ru/html/article, https://htmlbook.ru/html/header, https://htmlbook.ru/html/footer, https://htmlbook.ru/html/section, https://htmlbook.ru/html/nav, https://htmlbook.ru/html/main
  • Изучаемые особенности CSS: несколько классов у тега, ограничение работы класса до конкретного тега, селекторы, вложенные и дочерние селекторы, настройка дизайна нескольких селекторов сразу
  • Изучаемые свойства CSS: https://htmlbook.ru/css/border-top, https://htmlbook.ru/css/width, https://htmlbook.ru/css/height, https://htmlbook.ru/css/float, https://htmlbook.ru/css/border
  • Валидатор: https://validator.w3.org/
  • Дополнительное чтение: https://htmlbook.ru/html5/introduction, https://htmlbook.ru/samlayout/verstka-na-html5/novye-tegi, https://en.wikipedia.org/wiki/Document_Object_Model, https://www.artlebedev.ru/kovodstvo/sections/62/, https://www.artlebedev.ru/typograf/
  • Про обтекание элементов на странице и разницу между блочными и строчными элементами: как решить проблему со слишком обтекающими картинками, детальное описание обтекания 1, детальное описание 2; про блочные теги, про строчные
• 12.07 Медиа-запросы, подключение готовых библиотек CSS, позиционирование, Emmet и псевдоклассы CSS
• 19.07 Подключение внешних сервисов Сети, формы и работа с поисковыми системами

Обязательные упоминания

Эта страница делается в Dillinger – наверное, лучшем Markdown-редакторе, который я люблю всем сердцем
Код практик публикуется и раскрашивается с помощью HighlightJS и темы Shades of Purple
Курс основан на Проектном семинаре факультета креативных индустрий в НИУ ВШЭ, который я имела честь вести в 2019-2023, рабоче учителем в школе 1586 в Москве и опыте руководства разработкой IT-проектов