HTML-документ
Разметка текста
Ссылки и изображения
Видео и аудио
Таблицы
Формы
Пользовательские атрибуты
HTML
Содержание
Часть 1
Структура HTML-документа
Вопросы
Задачи
Теория
1.1.
Doctype
в HTML, объявление типа документа
1.2. Основные теги HTML
1.3. Тег
head
, служебная информация о странице
1.4. Тег
title
, заголовок страницы
1.5. Тег
main
, основное содержание
1.6. Теги
header
и
footer
, шапка и подвал
1.7. Тег
section
, смысловой раздел
1.8. Тег
nav
, основная навигация
1.9. Тег
article
, независимый раздел
1.10. Тег
aside
, дополнительное содержание
1.11. Теги
h1-h6
, заголовки в HTML
1.12. Тег
p
, параграф
1.13. Тег
meta
, кодировка страницы
1.14. Тег
meta
, ключевые слова и краткое описание
Часть 2
Разметка текста
Вопросы
Задачи
Теория
1.1. Тег
ul
, неупорядоченный список
1.2. Тег
ol
, упорядоченный список
1.3. Атрибуты
start
и
reversed
1.4. Вложенные списки
1.5. Теги
dl
,
dt
и
dd
, список описаний
1.6. Тег
pre
, преформатированный текст
1.7. Символы-мнемоники в HTML
,
еще одни
1.8. Тег
code
, фрагмент кода
1.9. Теги
q
и
cite
, встроенная цитата
1.10. Тег
blockquote
, отдельная цитата
1.11. Тег
br
, перенос строки
1.12. Теги
sub
и
sup
, нижний и верхний индексы
1.13. Тег
time
, дата и время
1.14. Теги
em
и
i
, акцентирование внимания
1.15. Теги
strong
и
b
, важность и выделение
1.16. Теги
del
и
ins
, выделение изменений
1.17. Теги
div
и
span
, контейнеры для стилизации
Часть 3
Ссылки и изображения
Вопросы
Задачи
Теория
1.1. Что такое ссылка, тег
a
1.2. Ссылка на файл, атрибут
download
1.3. Ссылка-якорь
1.4. Ссылка на
телефон
<a href="tel:...">...</a>
и
почту
<a href="mailto:...">...</a>
1.5. Тег
img
, изображение
1.6. Формат изображений
SVG
1.7. Формат изображений
JPEG
1.8. Формат изображений
PNG
1.9. Формат изображений
GIF
1.10. Размеры изображения
1.11. Атрибут
alt
1.12. Изображение-ссылка
1.13. Теги
figure
и
figcaption
, демонстративный материал
1.14. Ссылки с пустым
href
, атрибут
title
1.15. Адаптивность изображений
picture
,
srcset
Часть 4
Видео и аудио
Вопросы
Задачи
Теория
1.1. Видео. Тег
video
1.2. Форматы и источники видео
1.3. Аудио. Тег
audio
1.4. Форматы и источники звука
Часть 5
Таблицы
Вопросы
Задачи
Теория
1.1. Добавляем таблицу
<table>...</table>
1.2. Добавляем строки
<tr>...</tr>
1.3. Добавляем столбцы
<td>...</td>
1.4. Ячейки-заголовки
<th>...</th>
1.5. Заголовок таблицы (подпись к таблице)
<caption>...</caption>
1.6. Объединяем ячейки в строках с помощью
атрибута
colspan
1.7. Объединяем ячейки в столбцах с помощью
атрибута
rowspan
1.8. Одиночный тег
<col>
, стилизация столбцов
1.9. Группировка столбцов
<colgroup>...</colgroup>
Часть 6
Формы - часть 1
Вопросы
Задачи
Теория - часть 1
1.1. Добавляем форму
<form>...</form>
и атрибуты
action="..."
и
method="..."
1.2. Текстовое поле ввода
<input type="text" name="...">
1.3. Идентификатор и значение по умолчанию
id="..."
и
value="..."
1.4. Подпись для поля ввода
<label>...</label>
и атрибут
<for="...">
1.5. Поле для ввода пароля
<input type="password" name="...">
1.6. Кнопка отправки формы
<input type="submit" value="...">
1.7. Многострочное поле ввода
<textarea>...</textarea>
и атрибуты
rows="..."
и
cols="..."
1.8. Чекбокс или «галочка»
<input type="checkbox" name="...">
1.9. Переключатель или «радиобаттон»
<input type="radio" name="...">
1.10. Раскрывающийся список или «селект»
<select>...</select>
1.11.«Мультиселект»
1.12. Поле для загрузки файлов
<input type="file" name="...">
1.13. Скрытое поле
<input type="hidden" name="...">
Теория - часть 2
2.1. Сброс введенных значений
<input type="reset">
2.2. Простая кнопка
<input type="button">
2.3. Кнопка-изображение
<input type="image">
2.4. Альтернативный способ задания кнопок
<button>...</button>
2.5. Обязательные поля
атрибут
required
2.6. Поле выбора даты
<input type="date">
2.7. Поле выбора времени
<input type="time">
2.8. Список возможных значений
<datalist>...</datalist>
2.9. Поле ввода числового значения
<input type="number">
2.10. Поле поиска
<input type="search">
2.11. Автофокус
атрибут
autofocus
2.12. Поле выбора даты с указанием времени
<input type="datetime-local">
2.13. Поле выбора порядкового номера недели в году и года
<input type="week">
2.14. Поле выбора месяца и года
<input type="month">
2.15. Поле выбора из диапазона (ползунок)
<input type="rage">
2.16. Область для вывода результата
<output>...</output>
2.17. Группировка полей формы
<fieldset>...</fieldset>
2.18. Паттерны значений полей
атрибут
pattern="..."
2.19. Поле ввода телефона
<input type="tel">
2.20. Подсказка при заполнении полей
атрибут
placeholder="..."
2.21. Поле ввода сайта
<input type="url">
2.22. Поле ввода email
<input type="email">
2.23. Поле выбора цвета
<input type="color">
2.24. Группировка элементов списка
<optgroup>...</optgroup>
2.25. Запрет редактирования полей
атрибуты
readonly
и
disabled
2.26. Управление автозаполнением полей
атрибут
autocomplete="..."
2.27. Переключение между полями
атрибут
tabindex="..."
Часть 7
Разное
Вопросы
Задачи
Теория
1.1. Пользовательские
атрибуты
data-
имя-атрибута
= "..."
