HTML
- 1. Введение в HTML: что такое HTML, где и зачем используется
- 2. Устройство HTML-документа: структура, теги <!DOCTYPE>, <html>, <head>, <body>
- 3. Заголовки и параграфы: теги <h1>–<h6>, <p>
- 4. Работа с текстом: выделения с помощью <strong>, <em>, <span>, <br> и <hr>
- 5. Списки: нумерованные <ol>, ненумерованные <ul>, элементы списка <li>
- 6. Ссылки: тег <a>, атрибуты href, target, внутренние и внешние ссылки
- 7. Изображения: тег <img>, атрибуты src, alt, width, height
- 8. Таблицы: теги <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>
- 9. Формы: теги <form>, <input>, <textarea>, <select>, <option>, <button>
- 10. Атрибуты форм: action, method, name, value, placeholder, required, disabled
- 11. Типы полей ввода: text, email, password, number, date, checkbox, radio, file
- 12. Группировка элементов формы: теги <fieldset>, <legend>, <label>
- 13. Семантические теги: <header>, <footer>, <main>, <section>, <article>, <aside>, <nav>
- 14. Блочные и строчные элементы: отличия и примеры
- 15. Контейнеры: теги <div> и <span> и их роль в разметке
- 16. Комментарии в HTML: синтаксис <!-- комментарий -->
- 17. Встраивание видео и аудио: теги <video> и <audio>, атрибуты controls, src, poster
- 18. Встраивание контента с других сайтов: <iframe>, параметры src, width, height, allowfullscreen
- 19. Метатеги: <meta>, кодировка charset, описание description, ключевые слова keywords, автор author
- 20. Подключение CSS: тег <link>, атрибуты rel, href, способы подключения стилей
- 21. Подключение JavaScript: тег <script>, атрибуты src, defer, async
- 22. Работа с favicon: тег <link rel="icon">, подключение значка сайта
- 23. HTML-специальные символы: , <, >, ©, & и др.
- 24. Атрибуты глобального назначения: id, class, style, title, hidden, tabindex, draggable
- 25. Система якорей: создание навигации по странице с id и ссылками
- 26. Валидация HTML: проверка на ошибки с помощью validator.w3.org
- 27. Относительные и абсолютные пути: работа с файлами и папками
- 28. Микроразметка: атрибуты itemprop, itemscope, itemtype (schema.org)
- 29. Адаптивная верстка: основа responsive-дизайна и использование viewport
- 30. Основы SEO в HTML: теги <title>, <meta>, <h1> и структура документа
- 31. Использование data-* атрибутов: хранение пользовательских данных
- 32. HTML5 API и возможности: Drag and Drop, Web Storage, Geolocation (обзорно)
- 33. Deprecated (устаревшие) теги и атрибуты: чего избегать в современном HTML
- 34. Лучшие практики написания HTML: читаемость, семантика, валидность
- 35. Создание шаблона HTML-документа: от нуля до базового каркаса сайта
- 36. Практика: создание простой веб-страницы с текстом, изображением и таблицей
- 37. Практика: создание формы обратной связи
- 38. Практика: создание адаптивной страницы с семантической структурой
- 39. Интеграция HTML с CSS и JS: понимание взаимодействия слоёв веб-разработки
- 40. Мини-проект: одностраничный сайт-визитка с формой и ссылками
- 41. Прогресс-бар и счетчики: тег <progress> и <meter>
- 42. Работа с формами 2: атрибуты autocomplete, autofocus, minlength/maxlength, pattern
- 43. Новинки HTML5: новые элементы формы — <datalist>, <output>, <keygen>, <command>
- 44. Типы input в деталях: color, range, search, tel, url и их поддержка браузерами
- 45. Валидация форм на стороне клиента: required, pattern, проверка через JavaScript
- 46. Клиентская навигация: использование тега <details> и <summary>
- 47. Работа с графикой: тег <canvas> (в связке с JS), тег <svg> для векторной графики
- 48. Поддержка доступности: ARIA-атрибуты (role, aria-label, aria-describedby и др.)
- 49. Объектная модель документа (DOM): как HTML превращается в дерево узлов
- 50. Работа с пользовательским контентом: тег <content> и <shadow> (Web Components)
- 51. Web Components: создание собственных тегов через Custom Elements
- 52. Shadow DOM: изоляция разметки и стилей внутри элемента
- 53. Использование шаблонов: теги <template> и <slot>
- 54. Метатеги Open Graph и Twitter Card: SEO и отображение ссылок в соцсетях
- 55. Предзагрузка ресурсов: link rel="preload", "prefetch", "preconnect"
- 56. Работа с мобильными устройствами: meta viewport, zoom, touch-action и другие директивы
- 57. Альтернативные тексты и медиа: роль атрибута alt, longdesc, и способы описания картинок
- 58. Семантическая разметка и её влияние на SEO и доступность
