Теория, примеры и решения заданий по курсу htmlacademy.ru
2016
Ещё более многоуровневый список [6/17] 12
Список определений [7/17] 13
Важность. Теги strong и b [8/17] 14
Акцентируем внимание. Теги em и i [9/17] 14
Переносы и разделители. Теги br и hr [10/17] 15
Цитаты [11/17] 16
Верхние и нижние индексы [12/17] 17
Помечаем изменения. Теги del и ins [13/17] 17
Преформатированный текст [14/17] 18
Просто выделенный текст [15/17] 18
Испытание: разметка статьи [16/17] 18
Испытание: Рецепт каши [17/17] 20
Работа с таблицами 21
Добавляем строки [2/23] 21
Тренируемся в добавлении столбцов 21
21
Задаём рамки с помощью CSS [4/23] 21
22
Улучшаем отображение рамок [5/23] 22
Файл table/table5.html 23
Горизонтальные и вертикальные рамки [6/23] 23
Отступы внутри ячеек [7/23] 24
24
Отступы между ячейками [8/23] 24
Испытание: простая, но аккуратная таблица [9/23] 25
</head> 26
<body> 26
<h1>Посещения по городам</h1> 26
<table> 26
<tr> 26
<td>Город</td> 26
<td>Посещения</td> 26
<td>Страниц</td> 26
<td>Время</td> 26
</tr> 26
<tr> 26
<td>СПб</td> 26
<td>199</td> 26
<td>18,02</td> 26
<td>00:13:45</td> 26
</tr> 26
<tr> 26
<td>Москва</td> 26
<td>69</td> 26
<td>1,48</td> 26
<td>00:00:44</td> 26
</tr> 26
<tr> 26
<td>Киев</td> 26
<td>5</td> 26
<td>13,43</td> 26
<td>00:18:07</td> 26
</tr> 26
</table> 26
</body> 26
</html> 26
26
Ячейки-заголовки [10/23] 26
Заголовок таблицы [11/23] 28
Заголовок таблицы [17/23] 29
29
Выравнивание содержимого в ячейках [18/23] 30
Добавим цвета [19/23] 33
Раскрашиваем строки [20/23] 34
Задаём размеры таблицы [21/23] 36
Испытание: итоговая таблица [23/23] 37
Знакомство с формами 39
Первая форма [1/18] 39
Текстовое поле ввода [2/18] 40
Идентификатор и значение по умолчанию [3/18] 40
Подпись для поля ввода [4/18] 41
Связываем подпись и поле по id [5/18] 42
Добавим ещё одно поле [6/18] 43
Поле для ввода пароля [7/18] 44
Кнопка отправки формы [8/18] 44
Многострочное поле ввода [9/18] 45
Чекбокс или «галочка» [10/18] 46
Испытание: форма регистрации [11/18] проверка 47
Переключатель или «радиобаттон» [12/18] 49
Группа переключателей [13/18] 50
Раскрывающийся список или «селект» [14/18] 51
«Мультиселект» [15/18] 52
Поле для загрузки файлов [16/18] 52
Скрытое поле [17/18] 52
Работа с CSS 52
Введение в CSS [1/15] 52
CSS-правила [2/15] 52
Продвинутые селекторы [3/15] 53
Свойства для оформления текста [4/15] 53
Свойства для задания размеров и отступов [5/15] 54
Позиционирование элементов [6/15] 54
Создание сетки страницы [7/15] 54
Декоративные свойства [8/15] 55
Каскадность [9/15] 55
Каскадность. Переопределение стилей [10/15] 55
56
Каскадность и приоритеты [11/15] 56
Каскадность. Коктейль из классов [12/15] 56
Наследование [13/15] 57
Испытание: макет-прототип [15/15] 57
Селекторы 58
Селекторы по классам [3/18] 58
Отрабатываем селекторы по классам [4/18] 58
Контекстные селекторы [5/18] 58
Соседние селекторы [6/18] 59
Контекстные и соседние селекторы [7/18] 59
Потомки [7/19] 60
Псевдоклассы 60
Псевдоклассы [9/18] 60
Псевдокласс :nth-child [10/18] 60
Курс «Селекторы, часть 1» 61
:nth-child и контекстные селекторы [11/18] 61
Псевдокласс :hover [12/18] 61
Динамические эффекты с помощью :hover [13/18] 63
Испытание. Дуэль. [18/18] 65
Курс «Наследование и каскадирование» 66
Иерархическое дерево [1/18] 66
Наследование [2/18] 67
Наследование «на пальцах» [3/18] 67
Еще немного про наследование [4/18] 68
Наследуемые свойства [5/18] 68
Ненаследуемые свойства [6/18] 69
Принудительное наследование [7/18] 69
Каскадирование [8/18] 70
Битва за курочку [9/18] 71
Битва за курочку. Раунд второй [10/18] 72
Битва за курочку. Раунд третий [11/18] 73
74
Битва за курочку. Борьба накаляется [12/18] 74
Битва за курочку. Запрещённый приём [13/18] 76
Еще одна задачка на специфичность [14/18] 77
Расчет значения специфичности [15/18] 78
Ещё задачка на порядок кода [16/18] 79
Перекрестное наследование [17/18] 80
Испытание: взломанный котопрофайл [18/18] 82
Курс «Оформление текста, часть 1» 82
Главный текстовый тег — span [1/16] 82
Свойство font-size: задаем размер шрифта [2/16] 82
82
Свойство font-weight: толщина начертания [3/16] 82
Свойство font-style: курсив [4/16] 83
Свойство font-family: шрифт [5/16] 83
Свойство color: цвет текста [6/16] 83
Свойство text-decoration: подчеркивание и другие эффекты [7/16] 84
Декоративное подчеркивание [8/16] 84
Задаем регистр символов с помощью text-transform [9/16] 84
Управляем пробелами: white-space [10/16] 84
Горизонтальное выравнивание текста: text-align[11/16] 85
Вертикальное выравнивание: vertical-align [12/16] 86
Верхние и нижние индексы на CSS [13/16] 86
Свойство line-height: управляем высотой строки[14/16] 86
Вертикальный ритм текста [15/16] 86
Испытание: рецепт на CSS [16/16] 87
Параметры фона 89
Cвойство background-color [1/16] 89
Свойство background-image [2/16] 90
Свойство background-repeat [3/16] 91
Свойство background-position [4/16] 92
Ещё немного background-position [5/16] 94
Свойство background-attachment [6/16] 95
Курс «Фоны, часть 1» 96
Свойство background [7/16] 96
Формат JPEG [9/16] 101
Формат PNG-8 [10/16] 102
Формат PNG-24 [11/16] 102
Формат GIF [12/16] 102
Несколько фонов [13/16] 104
Эффекты с повторяющимся фоном [14/16] 105
Спрайты [15/16] 107
Испытание: CAT Academy [16/16] 108
Блоки 110
Блочные элементы [1/23] 110
Курс «Блочная модель документа» 111
Строчные элементы [2/23] 111
Ширина и высота [3/23] 111
Внутренние отступы, свойство padding [4/23] 113
Внешние отступы, свойство margin [5/23] 114
Рамки [6/23] 114
Стандартная блочная модель [7/23] 115
Первое испытание [8/23] 116
«Схлопывание» внешних отступов [9/23] 117
«Выпадание» внешних отступов [10/23] 117
Как отцентрировать элемент? [11/23] 118
Блочная модель и строчные элементы [12/23] 119
Ширина 100% и ширина по умолчанию [13/23] 119
Проблемы обычной блочной модели [14/23] 119
Изменяем блочную модель, свойство box-sizing[15/23] 120
Второе испытание [16/23] 120
Управление типом элемента, свойство display[17/23] 121
display: inline-block [18/23] 121
display: table [19/23] 122
display: table-row [20/23] 122
display: table-cell [21/23] 122
display: none [22/23] 123
Последнее испытание [23/23] 123
Курс «Сетки» 123
Пробуем управлять потоком [1/32] 123
Управление потоком, шаг 2 [2/32] 124
Управление потоком, шаг 3 [3/32] 124
Создадим другой поток [4/32] 124
Другой поток, шаг 2 [5/32] 125
Другой поток, шаг 3 [6/32] 125
Другой поток, финал [7/32] 126
Погружение в флоаты [8/32] 126
float и ширина [9/32] 127
float и выпадание из потока [10/32] 127
Флоат рядом с флоатом [11/32] 128
Когда флоатов много, а места мало [12/32] 128
Испытание: пазл на флоатах [13/32] 128
Свойство clear [14/32] 129
Борьба с выпаданием флоатов: распорки [15/32] 129
Борьба с выпаданием флоатов: псевдораспорки[16/32] 129
Простейшая сетка, шаг 1 [17/32] 132
Простейшая сетка, шаг 2 [18/32] 132
Простейшая сетка, финал [19/32] 132
Сетка посложнее, шаг 1 [20/32] 133
Сетка посложнее, шаг 2 [21/32] 135
Сетка посложнее, шаг 3 [22/32] 137
Сетка посложнее, добавляем содержание [23/32] 139
Последняя сетка, шаг 1 [24/32] 143
Последняя сетка, шаг 2 [25/32] 145
148
Последняя сетка завершена [26/32] 148
152
Испытание: строим сетку [27/32] 152
157
Погружение в inline-block [28/32] 157
float vs inline-block [29/32] 159
Простая сетка на inline-block [30/32] 162
inline-block и пробелы в коде [31/32] 164
Испытание: котогалерея на inline-block [32/32] 168
Позиционирование 170
Поток документа [1/20] 170
Позиционирование 171
Поток документа [1/20] 171
Относительное позиционирование [2/20] 171
position: relative и свойство top [3/20] 171
position: relative и свойство left [4/20] 172
position: relative и свойство bottom [5/20] 172
position: relative и свойство right [6/20] 172
Относительное позиционирование на практике[7/20] 173
Абсолютное позиционирование [8/20] 173
Абсолютное позиционирование и строчные элементы [9/20] 173
position: absolute и свойство left [10/20] 173
position: absolute и свойство top [11/20] 174
position: absolute и свойство right [12/20] 174
position: absolute и свойство bottom [13/20] 174
Точка отсчёта координат [14/20] 175
Тренируемся задавать координаты [15/20] 175
Неявная точка отсчёта [16/20] 175
Абсолютное позиционирование на практике[17/20] 176
Фиксированное позиционирование [18/20] 176
z-index или кто кого перекроет [19/20] 176
Создаем меню 177
Создаём вертикальное меню [1/28] 177
Добавляем ссылки [2/28] 177
Сбрасываем стили списка [3/28] 178
Оформляем контейнер меню [4/28] 178
Оформляем пункты, простой вариант [5/28] 178
Более сложное оформление пунктов [6/28] 179
Добавляем разделители [7/28] 179
Оформляем состояния пунктов [8/28] 179
Испытание: вертикальное меню [9/28] 180
Многоуровневое вертикальное меню [10/28] 180
Устраняем проблемы оформления [11/28] 181
Переносим рамки, задаём отступы подменю[12/28] 181
Оформляем пункты подменю [13/28] 181
Тестируем на большой вложенности [14/28] 182
Испытание: многоуровневое меню [15/28] 182
Горизонтальное меню [16/28] 182
182
Что делать, если пункты не влезают? [17/28] 182
183
Усложненное оформление пунктов [18/28] 183
183
Завершаем оформление пунктов [19/28] 183
Испытание: горизонтальное меню [20/28] 183
Вертикальное меню с выпадающим подменю[21/28] 184
Позиционируем выпадающее подменю [22/28] 184
Отображаем подменю при наведении [23/28] 184
Горизонтальное меню с выпадающим подменю [24/28] 185
Оформляем выпадающее меню [25/28] 185
Включаем механизм выпадания [26/28] 185
Состояние «открытое подменю» [27/28] 185
Испытание: выпадающее меню [28/28] 186
Курс «Мастерская: декоративные элементы» 186
Социальные кнопки, шаг 1 [1/18] 186
Социальные кнопки, шаг 2 [2/18] 186
Социальные кнопки, шаг 3 [3/18] 187
Переключатель страниц, шаг 1 [4/18] 187
Переключатель страниц, шаг 2 [5/18] 188
Переключатель страниц, шаг 3 [6/18] 188
Переключатель страниц, шаг 4 [7/18] 188
Переключатель страниц, тестирование [8/18] 189
Испытание: карточка курса [9/18] 189
Контакты, шаг 1 [10/18] 189
Контакты, шаг 2 [11/18] 189
190
Контакты, шаг 3 [12/18] 190
Комментарии, шаг 1 [13/18] 190
Комментарии, шаг 2 [14/18] 190
Комментарии, шаг 3 [15/18] 190
Комментарии, шаг 4 [16/18] 191
Комментарии, шаг 5 [17/18] 191
Испытание: анонс поста [18/18] 192
Курс «Знакомство с HTML5» 192
Хедер и футер. Теги header и footer [1/19] 192
Основное содержание. Тег main [2/19] 192
Разделы страницы. Теги article и section [3/19] 193
Изображения в формате SVG [4/19] 193
Навигация. Тег nav [5/19] 196
Завершаем футер [6/19] 200
Использование нестандартных шрифтов [7/19] 203
Подробнее о шрифтах. Правило @font-face [8/19] 206
Дополнительное содержание. Тег aside [9/19] 209
Еще раз про article. Анонс поста [10/19] 214
Завершаем главную: наполнение [11/19] 219
Внутренняя страница: структура поста [12/19] 222
Даты для людей и машин. Тег time [13/19] 226
Картинки с подписями. Теги figure и figcaption[14/19] 231
Видео. Тег video [15/19] 238
Форматы и источники видео [16/19] 245
Аудио. Тег audio [17/19] 252
Форматы и источники звука [18/19] 258
Испытание: другой вариант главной [19/19] 266
HTML5 и формы 272
Испытание: формы — вспомнить всё [1/28] 272
Сброс введенных значений [2/28] 275
Простая кнопка [3/28] 277
Кнопка-изображение [4/28] 280
Альтернативный способ задания кнопок [5/28] 283
Обязательные поля [6/28] 286
Поле выбора даты [7/28] 288
Поле выбора времени [8/28] 290
Список возможных значений [9/28] 292
Поле ввода числового значения [10/28] 295
Поле поиска [11/28] 298
Автофокус [12/28] 300
Другие поля для ввода дат [13/28] 301
Выбор из диапазона [14/28] 304
Область для вывода результата [15/28] 308
Группировка полей формы [16/28] 311
Паттерны значений полей [17/28] 315
Поле ввода телефона [18/28] 318
Подсказка при заполнении полей [19/28] 320
Поля ввода адресов сайтов и email [20/28] 322
Поле выбора цвета [21/28] 325
Группировка элементов списка [22/28] 329
Запрет редактирования полей [23/28] 333
Управление автозаполнением полей [24/28] 335
Переключение между полями [25/28] 339
localStorage [26/28] 343
Проверяем работу localStorage [27/28] 346
Испытание: через тернии к звёздам [28/28] 346
Селекторы, часть 2 351
Объединение селекторов [1/20] 351
Псевдокласс :not [2/20] 353
Комбинируем :not [3/20] 356
Псевдокласс :nth-last-child [4/20] 358
Псевдокласс :first-of-type [5/20] 360
Псевдокласс :last-of-type [6/20] 363
Псевдокласс :nth-of-type [7/20] 365
Псевдокласс :nth-last-of-type [8/20] 367
Испытание: первая раскладка [9/20] 370
Cелектор последующих элементов [10/20] 373
375
Псевдокласс :empty [11/20] 375
Псевдокласс :only-child [12/20] 377
Псевдокласс :only-of-type [13/20] 379
Псевдоэлемент ::before [14/20] 381
Как вы уже знаете, браузер игнорирует множественные пробелы и переносы строк в HTML-коде. Изменить это поведение можно с помощью тега <pre>.
Однако, с помощью CSS управлять пробелами и переносами можно более гибко. За это отвечает свойство white-space, значения которого:
nowrap — отображает весь текст одной строкой без переносов;
pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу <pre>;
pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;
normal — режим по умолчанию.
Ещё более многоуровневый список [6/17]
Хорошо. Вы создали двухуровневый список. Теперь задание посложнее.
В этом задании вам нужно будет создать четырёхуровневый список, наподобие этого:
Р
азметка
Основы HTML
HTML-теги
парные
одиночные
Основы CSS
Селекторы
по типу
по классу
вложенные
Стиль кодирования
Работа с фотошопом
Построение сеток
Декоративные элементы
Введение в JavaScript
Прогрессивное улучшение
text/menu-6-17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ещё более многоуровневый text/menu-6-17.html</title>
</head>
<body>
<h1>Невероятно многоуровневый список</h1>
<ol>
<li>Первый элемент
<ol>
<li>2.1
<ol>
<li>3.1
<ol>
<li>4.1</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Второй элемент</li>
</ol>
</body>
</html>
Список определений [7/17]
Список определений создаётся с помощью трёх тегов:
<dl> обозначает сам список определений;
<dt> обозначает термин;
<dd> обозначает определение термина.
Теги <dt> и <dd> пишутся парами внутри <dl>.
Например:
<dl>
<dt>Термин</dt>
<dd>Определение</dd>
<dt>Второй термин</dt>
<dd>И его определение</dd>
<dt>Кошка</dt>
<dd>Шерстяное изделие развлекательного характера</dd>
</dl>
text/menu-7-17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список определений</title>
</head>
<body>
<h1>Расшифровка тегов списков</h1>
<dl>
<dt>dl</dt>
<dd>Definition List, сам список определений</dd>
<dt>dt</dt>
<dd>Definition Term, термин</dd>
<dt>dd</dt>
<dd>Definition Definition, определение термина</dd>
<dt>ul</dt>
<dd>Unordered List, неупорядоченный список</dd>
<dt>li</dt>
<dd>List Item, элемент списка</dd>
</dl>
</body>
</html>
Важность. Теги strong и b [8/17]
Ещё раз отметим, что этот курс посвящён логической разметке текста, поэтому уделяется особое внимание смыслу элементов, их предназначению, а не визуальному форматированию.
В предыдущих заданиях вы познакомились с элементами, которые предназначены для разметки крупных блоков текста: заголовков, абзацев и списков. В этом и последующих заданиях мы познакомимся с элементами, предназначенными для разметки небольших фраз и отдельных слов.
Первые два тега предназначены, чтобы указать на важность слова или фразы.
Тег <strong> определяет важность отмеченного текста (голосовое сопровождение).
Тег <b> предназначен для выделения текста без придания ему особой важности.
Визуально оба тега одинаковы, они выделяют текст полужирным.
Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong>. То же самое касается и тегов <em> и <i>. Тег <em> «говорилка» будет выделять интонацией.
Отметим, что новый смысл тегу <b> придали в HTML5. Раньше это был тег, который просто делает текст полужирным. То есть он был предназначен только для визуального форматирования.