Дронов В. А. - HTML и CSS. 25 уроков для начинающих [2020, PDF, RUS]

Оглавление

ПРЕДИСЛОВИЕ........................................................................................................................... 11
Типографские соглашения .................................................................... 13
ЧАСТЬ I. ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ .................................................... 15
УРОК 1. HTML............................................................................................................................... 17
1.1. Упражнение. Создаем нашу первую веб-стра ницу ....................... 17
1.2. Теги. Язык HTML ........................................................................... 20
Как набирать HTML-код? — часть 1 ....................................... 23
1.3. Упражнение. Продолжаем изучать теги ........................................ 24
Как набирать HTML-код? — часть 2 ....................................... 25
1.4. Упражнение. Помещаем на веб-страницу изображения,
знакомимся с одинарными тегами и атрибутами тегов ................ 25
Не забывайте ставить закрывающие теги! .............................. 29
1.5. Структурирование HTML-кода и метаданные .............................. 29
1.6. Комментарии HTML ...................................................................... 31
Как еще можно использовать комментарии? ......................... 31
1.7. Самостоятельные упражнения ....................................................... 32
УРОК 2. CSS ................................................................................................................................... 33
2.1. Оформление по умолчанию ........................................................... 33
2.2. Упражнение. Задаем оформление для веб-страницы ................... 34
2.3. Таблицы стилей, стили, атрибуты стилей и наследование.
Язык CSS ........................................................................................ 36
2.4. Внешние таблицы стилей и их привязка к веб-страницам .......... 39
2.5. Упражнение. Используем стилевые классы и знакомимся
с правилом каскадности ................................................................. 40
2.6. Упражнение. Используем важные атрибуты стилей ..................... 44
2.7. Упражнение. Применяем составные селекторы ........................... 45
2.8. Внутренние таблицы стилей .......................................................... 46
2.9. Встроенные стили ........................................................................... 474 Оглавление
2.10. Комментарии ................................................................................ 48
2.11. Самостоятельные упражнения ..................................................... 48
УРОК 3. КАК РАБОТАЕТ WWW? ............................................................................................ 51
3.1. Клиенты и серверы ......................................................................... 51
3.2. Упражнение. Публикуем наш веб-сайт на веб-сервере ................ 52
3.3. Интернет-адрес и его составные части .......................................... 56
Протокол .................................................................................. 56
Адрес хоста ............................................................................... 57
Протокол IP, IP-адреса и доменные имена ............................. 58
Путь к файлу ............................................................................. 58
Примеры интернет-адресов и их обработка
веб-обо зре вателем .................................................................... 58
Пути к файлам в HTML-тегах ................................................. 59
3.4. Упражнение. Используем веб-страницу по умолчанию ............... 59
3.5. Ошибка 404 ..................................................................................... 59
Notepad++ ................................................................................ 60
ЧАСТЬ II. HTML ................................................................................................ 61
УРОК 4. СТРУКТУРА .................................................................................................................. 63
4.1. Абзацы и заголовки ........................................................................ 63
Разделитель .............................................................................. 64
4.2. Упражнение. Создаем списки ........................................................ 65
4.3. Список описаний............................................................................ 68
4.4. Упражнение. Используем семантическую разметку ..................... 68
Тег ............................................................................. 70
4.5. Адрес и блочная цитата .................................................................. 70
4.6. Блочные элементы .......................................................................... 72
4.7. Правила вывода текста в блочных элементах ............................... 73
4.8. Текст фиксированного формата .................................................... 74
4.9. Упражнение. Применяем блочный контейнер ............................. 74
4.10. Самостоятельные упражнения ..................................................... 76
УРОК 5. ТЕКСТ ............................................................................................................................. 77
5.1. Теги выделения ............................................................................... 77
5.2. Встроенные элементы .................................................................... 78
5.3. Упражнение. Применяем встроенный контейнер ........................ 79Оглавление 5
5.4. Переносы строк .............................................................................. 79
5.5. Упражнение. Вставляем специальные символы посредством
литералов ........................................................................................ 80
5.6. Самостоятельные упражнения ....................................................... 82
УРОК 6. ГРАФИКА И МУЛЬТИМЕДИА................................................................................ 83
6.1. Вставка графических изображений ............................................... 83
6.2. Форматы графики, применяемые в WWW .................................... 84
Растровые форматы ................................................................. 84
Векторный формат ................................................................... 86
6.3. Ссылки на файлы и их указание .................................................... 86
6.4. Встроенно-блочные элементы ....................................................... 88
Абсолютные пути к файлам и веб-сервер ............................... 88
6.5. Упражнение. Помещаем на веб-страницу видеоролик ................ 89
Формат HTML 5 ....................................................................... 92
6.6. Вставка аудиоролика ...................................................................... 92
Содержимое тегов и ..................................... 93
6.7. Семантическая иллюстрация ......................................................... 93
6.8. Упражнение. Помещаем на веб-страницу видео YouTube ............ 94
Лицензия Creative Commons .................................................... 96
6.9. Самостоятельные упражнения ...................................................... 96
УРОК 7. ТАБЛИЦЫ...................................................................................................................... 99
7.1. Упражнение. Создаем простую таблицу ........................................ 99
7.2. Упражнение. Выполняем слияние ячеек......................................102
7.3. Упражнение. Делаем таблицу со сложным содержимым ............104
7.4. Упражнение. Используем секции таблицы ..................................107
Заголовок таблицы ..................................................................108
7.5. Самостоятельные упражнения ......................................................109
УРОК 8. ГИПЕРССЫЛКИ.........................................................................................................111
8.1. Упражнение. Создаем гиперссылки .............................................111
Графическая гиперссылка .......................................................114
Почтовая гиперссылка ............................................................115
8.2. Загрузочные гиперссылки .............................................................115
Форматы файлов, поддерживаемые веб-обозревателями .....116
Пустая гиперссылка ................................................................116
8.3. Гиперссылки, ссылающиеся на фрагменты веб-страниц. Якоря ..1176 Оглавление
8.4. Упражнение. Создаем панель навигации .....................................118
Полоса навигации ...................................................................121
Карта-изображение .................................................................122
8.5. Самостоятельные упражнения .....................................................123
УРОК 9. ВЕБ-ФОРМЫ И ЭЛЕМЕНТЫ УПРАВЛЕНИЯ .......................................................125
9.1. Обработка пользовательских данных. Веб-формы
и веб-приложения .........................................................................125
9.2. Упражнение. Создаем веб-форму для заказа столика..................127
9.3. Как работает веб-форма? Параметры веб-формы .......................132
9.4. Параметры, поддерживаемые всеми элементами управления ....135
9.5. Поля ввода/выбора........................................................................135
9.6. Упражнение. Используем флажки и переключатели ...................138
9.7. Упражнение. Создаем список .......................................................139
9.8. Область редактирования ...............................................................143
9.9. Кнопки...........................................................................................144
9.10. Поле выбора файла .......................................................................145
Регулятор .................................................................................146
9.11. Самостоятельные упражнения .....................................................147
Группа элементов управления ................................................147
УРОК 10. ФРЕЙМЫ ..................................................................................................................149
10.1. Упражнение. Создаем фотогалерею на основе фрейма ...............149
10.2. Самостоятельные упражнения .....................................................153
УРОК 11. МЕТАДАННЫЕ........................................................................................................155
11.1. Упражнение. Задаем метаданные для веб-страницы ...................155
Популярные в России поисковые службы .............................156
11.2. Самостоятельные упражнения ......................................................157
ЧАСТЬ III. CSS ................................................................................................. 159
УРОК 12. СЕЛЕКТОРЫ ............................................................................................................161
12.1. Основные селекторы и комбинированный селектор ..................161
Привязка нескольких стилевых классов ................................162
12.2. Упражнение. Используем селекторы атрибутов ..........................163
12.3. Упражнение. Применяем псевдоклассы ......................................166
Стили с несколькими селекторами ........................................168Оглавление 7
12.4. Псевдоклассы, поддерживаемые CSS ..........................................168
12.5. Упражнение. Используем псевдоэлементы ..................................173
12.6. Разделители ...................................................................................174
12.7. Приоритет селекторов и его вычисление .....................................175
12.8. Самостоятельные упражнения .....................................................176
УРОК 13. ШРИФТ И ТЕКСТ....................................................................................................179
13.1. Гарнитура, кегль, насыщенность и начертание шрифта ..............179
13.2. Упражнение. Используем загружаемые шрифты .........................181
Бесплатные и платные шрифты .............................................183
Форматы загружаемых шрифтов ............................................185
13.3. Оформление, преобразование текста и форма строчных букв ....186
Значения initial и inherit ..........................................................187
13.4. Цвет и уровень прозрачности .......................................................188
13.5. Отступы и интервалы ....................................................................189
Единицы измерения CSS ........................................................191
13.6. Упражнение. Используем генерируемое содержание ..................191
13.7. Упражнение. Применяем счетчики ..............................................193
13.8. Выравнивание по горизонтали и вертикали ................................195
13.9. Упражнение. Создаем тень у текста ..............................................197
Указание сразу всех параметров шрифта ...............................198
13.10. Самостоятельные упражнения .....................................................198
УРОК 14. БЛОКИ .......................................................................................................................201
14.1. Упражнение. Используем внутренние и внешние просветы
для создания стильного заголовка ................................................201
14.2. Упражнение. Выводим рамки у элементов ..................................205
14.3. Рамки со скругленными углами ...................................................210
14.4. Упражнение. Задаем размеры элементов .....................................212
14.5. Размеры элементов, внутренние просветы и рамки.
Режим установки размеров ...........................................................215
14.6. Упражнение. Создаем тень у блочного элемента .........................216
14.7. Самостоятельные упражнения .....................................................218
УРОК 15. СПИСКИ И ТАБЛИЦЫ .........................................................................................219
15.1. Упражнение. Задаем параметры списков .....................................219
15.2. Параметры таблиц .........................................................................2218 Оглавление
15.3. Параметры ячеек таблиц ...............................................................224
15.4. Самостоятельные упражнения .....................................................224
УРОК 16. ИЗОБРАЖЕНИЯ И ГИПЕРССЫЛКИ................................................................227
16.1. Параметры графических изображений ........................................227
16.2. Упражнение. Оформляем гиперссылки, применяя
псевдоклассы гиперссылок ...........................................................228
УРОК 17. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ ................................................................................231
17.1. Упражнение. Оформляем веб-формы и элементы управления ..231
17.2. Псевдоклассы и псевдоэлементы элементов управления ...........233
17.3. Самостоятельные упражнения .....................................................234
УРОК 18. ФОН ............................................................................................................................237
18.1. Сплошной фон ..............................................................................237
18.2. Упражнение. Создаем линейный градиент ..................................239
18.3. Упражнение. Создаем радиальный градиент ...............................244
18.4. Повторяющиеся градиенты ..........................................................249
18.5. Упражнение. Указываем графический фон..................................250
18.6. Упражнение. Накладываем несколько графических фонов ........257
18.7. Самостоятельные упражнения .....................................................259
УРОК 19. КОЛОНКИ ................................................................................................................261
19.1. Многоколоночная верстка текста.................................................261
19.2. Дополнительные параметры колонок ..........................................262
УРОК 20. ПРЕДСТАВЛЕНИЕ ЭЛЕМЕНТОВ ........................................................................265
20.1. Упражнение. Делаем «легкую» панель навигации .......................265
20.2. Упражнение. Используем таблицы без таблиц ............................267
Управление видимостью элементов .......................................271
Изменение курсора мыши ......................................................272
20.3. Самостоятельные упражнения .....................................................273
УРОК 21. МЕСТОПОЛОЖЕНИЕ ЭЛЕМЕНТОВ ...............................................................275
21.1. Упражнение. Используем плавающие элементы
и семантические врезки ..................................................................275
Центрирование элемента страницы по горизонтали ............279
21.2. Упражнение. Создаем адаптивную полосу навигации
с помощью упорядочивающего элемента ......................................280Оглавление 9
21.3. Упражнение. Используем элементы-перечни .............................287
21.4. Параметры потомков упорядочивающего элемента ....................293
Полное центрирование элемента страницы ..........................293
21.5. Упражнение. Используем свободно позиционируемые
элементы ........................................................................................294
21.6. Упражнение. Применение относительно позиционируемых
элементов .......................................................................................302
21.7. Самостоятельные упражнения ......................................................305
УРОК 22. МАКЕТЫ ВЕБ-СТРАНИЦ.....................................................................................307
22.1. Классические макеты ....................................................................307
22.2. Упражнение. Создаем двухколоночный макет на основе
плавающего элемента ....................................................................308
22.3. Упражнение. Делаем табличный макет ........................................310
22.4. Упражнение. Делаем рамочный макет на фиксированных
элементах .......................................................................................314
22.5. Упражнение. Создаем прокручивающийся элемент страницы ..317
Формулы ..................................................................................320
Переполнение и плавающие элементы ..................................320
Макет с фиксированной шириной .........................................321
22.6. Самостоятельные упражнения .....................................................321
УРОК 23. ПРЕОБРАЗОВАНИЯ .............................................................................................323
23.1. Упражнение. Применяем преобразования к элементам .............323
23.2. Упражнение. Применяем сложные преобразования ...................329
23.3. Самостоятельные упражнения .....................................................329
УРОК 24. АНИМАЦИЯ ............................................................................................................331
24.1. Упражнение. Применяем анимацию с двумя состояниями ........331
24.2. Сложная анимация с двумя состояниями ....................................337
24.3. Упражнение. Создаем анимацию с несколькими состояниями .337
24.4. Самостоятельные упражнения ......................................................344
УРОК 25. МЕДИАЗАПРОСЫ.................................................................................................347
25.1. Упражнение. Адаптируем веб-страницы под мобильные
устройства ......................................................................................347
25.2. Упражнение. Создаем печатную редакцию веб-сайта .................352
25.3. Самостоятельные упражнения .....................................................35610 Оглавление
ЗАКЛЮЧЕНИЕ ...........................................................................................................................359
ПРИЛОЖЕНИЕ 1. В КОПИЛКУ ВЕБ-ВЕРСТАЛЬЩИКА........................................................... 361
П1.1. Фотография в стиле Polaroid .........................................................361
Внешний вид (приведены три элемента) ...............................361
HTML: приведен код, создающий один такой элемент ........361
CSS ...........................................................................................362
П1.2. Фотогалерея в стиле Polaroid ........................................................362
Внешний вид ...........................................................................362
HTML ......................................................................................363
CSS ...........................................................................................363
П1.3. Круглая виньетка ...........................................................................364
Внешний вид ...........................................................................364
HTML ......................................................................................364
CSS ...........................................................................................364
П1.4. Спойлер .........................................................................................364
Внешний вид ...........................................................................365
HTML ......................................................................................365
CSS ...........................................................................................366
П1.5. Меню-гамбургер ............................................................................368
Внешний вид ...........................................................................368
HTML ......................................................................................368
CSS ...........................................................................................369
П1.6. Аккордеон ......................................................................................370
Внешний вид ...........................................................................370
HTML ......................................................................................370
CSS ...........................................................................................372
ПРИЛОЖЕНИЕ 2. РАЗРАБОТКА ОДНОСТРАНИЧНЫХ ВЕБ-САЙТОВ .................373
П2.1. Упражнение. Создаем одностраничный веб-сайт .......................373
П2.2. Упражнение. Создаем панель навигации
для одностраничного веб-сайта ....................................................379
П2.3. Самостоятельные упражнения .....................................................382
ПРИЛОЖЕНИЕ 3. HTML-ТЕГИ .............................................................................................383
ПРИЛОЖЕНИЕ 4. ОПИСАНИЕ ЭЛЕКТРОННОГО АРХИВА......................................387
ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ .................................................................................................389