silentimp/htmlcource

HTML. Краткий курс.

• День 1

  • Что такое HTML и зачем он нужен

  • Немного истории

    • HTML 1, HTML 2, HTML 3, HTML 4, …, [храп]
    • XHTML 1.0, XHTML 1.1, XHTML 2.0 — почему бы и нет, действительно?
    • HTML 5 — сюрприз

  • Спецификации и где их найти

    • W3C
    • WHATWG
    • БУГАГА

  • Тег и его анатомия

    • открывающий тег
    • закрывающий тег
    • самозакрывающийся тег
    • аттрибуты
      • стандартные
        • обязательные
        • опциональные
      • пользовательские

  • Структура документа

    • Doctype
      • Как это было задумано
      • Что получилось
      • Должен остаться только один
    • Head
    • Body

  • html

  • head

    • Title — единственный обязательный тег
    • Кратко
      • Meta
      • Script
      • Style
      • Link
      • Base

  • body

    • Практика: создаем пустой html документ

    • Теги физического и логического форматирования

      • теги физического форматирования
      • теги логического форматирования
      • старая и новая семантика тегов

    • Текстовая разметка

      • Жирные: b, strong. Новая семантика.
      • Курсивные: i, em. Новая семантика.
      • Подчеркнутые и перечеркнутые: u, s, del. Новая семантика.
      • Верхние и нижние индексы: sub, sup
      • Безусловный и возможный разрыв строки: br, wbr
      • Время: time
      • Контейнер общего назначения: span
      • Ссылки a
        • внутренние
        • внешние
      • Незаслуженно забытые и редко используемые
        • data — любые данные
        • code, var, kbd — код, переменные и комбинации клавиш
        • small, big — теги физического форматирования с новой семантикой
        • mark - выделение текста
        • q и cite — как работать с цитатами
        • dfn и abbr — как размечать аббривеатуры
        • del, ins — редактирование документов
        • Локализация документов
          • bdi и bdo — двунаправленное письмо. Как это и зачем это.
          • ruby, rb, rt, rtc, rp — руби поясняет как читать эти ваши иероглифы.

    • Групирующие элементы

      • div — групирующий элемент общего назначения
      • main - главный контент на странице
      • p — параграф
      • address — для адреса
      • blockquote — снова цитаты
      • pre — cохраняем форматирование
      • Списки
        • Упорядоченные
        • Не упорядоченные
        • Терминов
      • figure и figcaption — контент требующий пояснений

    • Практика: размечаем блок текста

    • Таблицы

      • Мета-данные
        • caption
        • colgroup, col
      • Структура
        • thead
        • tbody
        • tfoot
      • Строки и столбцы
        • tr, th
        • tr, td
      • colspan и rowspan — объеденяем ячейки

    • Практика: делаем таблицу

    • Структурные теги

      • article — переносимые блоки
      • section — не переносимые блоки
      • nav — навигация
      • aside — связанный контент
      • header — шапка
      • footer — подвал
      • Примеры создания структуры на базе макетов
      • Как посмотреть структуру страницы

    • Практика: cоздание структуры документа на базе макетов

    • Домашнее задание: верстка макета

• День 2

  • Проверка нескольких случайных домашних заданий

  • Встраиваемый контент

    • Картинки
      • img
      • Адаптивность
        • Медиа-выражения
        • Использование srcset
        • Использование picture и source
      • map и area
    • Практика: делаем адаптивную картинку
    • Практика: делаем карту
    • Aудио
    • Видео
      • субтитры с помощью track
    • Практика: подключаем видео на страницу
    • Object, embed и param — вставляем всё остальное
    • iframe, frameset, frame – но зачем?
    • SVG — кратко
    • MathML — он существует

  • Формы

    • Анатомия форм
      • form
      • legend
      • fieldset
    • input
      • label
      • type
        • text
        • email
        • tel
        • url
        • number
        • password
        • hidden
        • date
        • month
        • week
        • time
        • datetime-local
        • range
        • color
        • file
        • radio
        • checkbox
        • submit
        • image
        • reset
        • button
      • datalist
    • button or input(type="button")
    • textarea
    • select
      • option
      • optgroup
    • meter
    • progress
    • marquee — 0________0
    • output
    • details and summary
    • Валидация форм
    • Автозаполнение
    • Практика: делаем форму комментариев
    • Практика: делаем форму регистрации
    • Домашнее задание: верстка сложной формы

• День 3

  • Проверка нескольких случайных домашних заданий

  • Углубляемся в голову

    • Полезные meta-теги
    • Как правильно использовать link

  • Script и немного о его загрузке приемы работы

  • Зачем нам семантика и доступность

    • WAI/ARIA
    • Практика: размечаем блоки c учетом доступности
    • Микроформаты
    • Практика: размечаем блоки c использую schema

  • Валидация кода

  • Cессия вопросов и разбор проблем