Курс по основам 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-проектов