Библиотека программиста - ANK Со., Ltd - HTML/CSS. Вся веб-разработка в схемах и иллюстрациях [2025, PDF, RUS]

Примеры страниц (скриншоты)

Оглавление

Предисловие . .. . .. . .. .. . .. . ... . . .. .. . .. . .. . .. .. .. . .. . . V
ВВЕДЕНИЕ. ИЗУЧАЙТЕ HTML И CSS . . . . ....... . .. . ... .. xv
Интер н ет и WWW ..................................... XV
Что представляет собой веб - сайт? . . . . . . . . . . . . . . . . . . . . . . XVI
Что такое HTML и CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XVI
Веб - сервер. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIX
Д ин амические веб- стра ни цы. . . . . . . . . . . . . . . . . . . . . . . . . . . ХХ
Скри пты на стороне клиента . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI
Как меняется интернет ................................ XXII
Самые распространен н ые ве б-браузеры ............. . . . . XXIII
o-.:~..--'G,._, L&.LAJ.:.1.11.1 ВЕБ-САЙТ. ОБЩИЙ ОБЗОР . . . . .... . . ....... . 1
ln'ML CSS -----·
Веб-стра н ицы и веб -сайты ................................ 2
Техн ологии обмена информаци ей .. .. ...... . ........ . ... . .. 3
Веб-сайт ......... ............ . ............. . ....... . .. . .......... . 4
Что такое веб-сайт ...................................... 4
Домашняя страница .. ........................ . ... . . ..... 4
Что такое веб-стран ица . . .. . .. . .. .. .. .. . .. . .. . .. . .. .. . ... 5
HTML и CSS ... . .. .. ...... . ...... . ... . ... . ... . .. . ... . ...... .. .. . ... 6
HTML . .... .. .. ........ . .. .. . .. .. . .. .. .... .. ..... .. . . .. 6
CSS . .. . .. . .. . .. .. . .. .. . .. . .. .. . .. .. . .. . .. .. . .. .. . .. . .. 7
Веб-браузеры и веб-сайты . ..... .. ... . .. . ... . .. .. .. . ... . ... . .. . ... 8
Что такое веб-браузер? .... .. .... ......... . .. . .. .. ..... .. 8
Веб- браузеры и веб-сайты . . . .. .. . .. .. .. .. . . .. .. . .. . .. . .. . 9
VII
Серверы и клиенты ....................... . .. . ....... . .......... . 1 О
Что такое веб-сервер? .................................. 1 О
П рограммное обеспечение для веб-серверов .. . ..... .. . .. . . 1 О
Взаимодействие с веб-серверами . .. . ... . ..... . .. .. . .. . .. . 11
Базы данных ..................................................... 12
Что такое база данньIх? . .. . . ... . .. .. . . ............ . .. .. . 12
Веб-технологии и базы данных .. . .. . ... . .. . .. . .. . .. . ..... 13
Cookie .. . ... . ... . ...... ........... . ... .. .. . .. .. ...... . .. . ....... . 14
Что такое cookie .. . ............... .. . ..... . ......... . .. 14
Как работают cookie .. .. ........... .. . ............ . ..... 15
Домен и URL .... . .............. . ...... . ... . ...... .. .. . .......... . 16
Домен . .. .. .... ......... . .. . .. . .. .. ..... . ..... .. . .. .. 16
gTLD ..... .. . .. .. . .. .. . . .. .. . .. . .. .. . ..... .. . .. . .. .. . . 16
Пр имер полного URL ................................... 17
Пр отокол .................... . ........................ 17
Для особо любознательных ~ Пока спецификация W3C
с! не завершена ... ~ ....................................... 18
ОСНОВЫ HTML . ................ ....... .. .. 19
Основы HTML ......................................... 20
Элементы DOCTYPE и URL ......... . .. .. . .. . .. . .. .. .. . .. . 21
Об актуальной версии HTML ............ . .. . .......... ... ..... .. .. 22
HTML Living Standard ............... . ................... 22
П реемственность HTML5 . ......... .. . .. . ..... . ..... .. .. . 23
Создание файлов HTML ........ . .......... . .. ... ..... . ....... . .. . 24
Создание файлов HTML ................................. 24
Теги, элементы и атрибуты . .. .. . .. .. .. .. . .. ... . ...... . ....... . ... 26
Теги и элементы .. . .. .. ........ . .. . .. .. ........ .. . .. . .. 26
Атрибуты и значения ................................... 27
Вложенные элементы и комментарии . .. . .. .. ... . .. . ... . ...... . ... 28
Вложенные элементы .. . ........ .. .. . .. . ..... . .. .. .. . .. . 28
Комментарии .......................................... 29
Атрибуты и их назначение ...... . ....... . .. .. ......... .. ...... . ... 30
id и class . .. . .. . ...... .. . ..... . .. . .. . ..... .. .. .. . .. . .. 30
VIII
Объявление DOCTYPE и спецификация кодов символов . .. ... . .. .. 32
Декларация ОО СТУРЕ ..... . ....... . ..................... 32
Задание кодов символ ов ... .. .. . .. . ..... .. ..... .. .... .. . 33
Абсолютные и относительные адреса URL . ....... . .. . .......... .. 34
URL .................................................. 34
Абсолютн ые и отн оситель н ые URL ........................ 34
Для особо любознательных ~Модель соде ржимого~ . .. . .. .. 36
ЭЛЕМЕНТЫ HTML . ........ . ....... . ....... 37
Теги и атрибуты ......... . ............... . ... . ... . ..... . 38
Тр и важных тега .. . .. . .. .. . .. .. . .. . .. . .. .. .. . .. . .. . .. . . 38
О таблицах и формах ................................... 39
Основные элементы докумrента . ...... .... . ... .. .. . .. .. .. . .. .. .. . 40
Элементы основной структур ы документа . ..... . .. .. . .. . ... 40
Основная информация о документе . .. . .. . . .. .. . ...... . .. . 41
Теги, определяющие состав документа . . ... ... . ... . ...... .. ...... 42
Структура веб- стран и цы .. .. .. . .. . .. . .. .. . .. .. .. . .. . .. . . .42
Элементы документа .. . .. . .. . .. . . .. .. . .. .. .. . .. . .. .. . .. 43
Теги разметки структуры текста (1 ) . .. . ... . .. .. .. .. .. . ...... . ..... 44
Теги заголовка ..... . ... . .. . ........ . ... . .. .. . .. .... .. .. 44
Теги начала абзаца и дл и нных цитат . .. . .. ..... . .. .. . .. . .. . 45
Теги разметки структуры текста (2) . .. ...... .. ... . .. . ...... . ..... 46
Теги , обоз н ачающие сме н у темы . . .. .. . .. . .. . .. .. .. . .. . .. .46
Отформатированный текст . .. . ... . .. . .. . . .. .. . .. . ... . .. .46
Списки .. . . . ...... . .. . ..... .. ..... .. ........ . .. . ... . . . 47
Теги для разметки блоков . ..... . ...... . . ..... . ... .. .. . .. .. .. ... .. 48
Теги общего назначения ... . .. .. . ..... .. . . .. .. . ...... . .. . 48
Те ги div и span . . .. . . . . .... . .. . .. . .. .. .. . .. .. . .. . .. .. . . . 48
Теги для оформления текста (1) . ..... . ...... .. ...... . ...... . ... .. 50
Акценты в тексте .. . .. .. . .. .. . .. . .. . .. . .. .. .. .. . .. . .. . .. 50
Теги для оформления текста (2) . .. ... . ...... .. ...... . ...... .. .. .. 52
Отсылки и цитаты ........... . .. . ..... .. ..... . ...... . .. . 52
Теги для оформления текста (3) . ..... .. ..... . .... . .. . ...... .. .. .. 54
Осмысление текста ..... . ......... . ............ . .. . ..... 54
IX
Теги для ссылок и изображений .. ..... . .......... . ............... 56
Теги для размещения ссыло к ............................ 56
Тег и дл я размещения изображений . .. .. .. . .. .. . .. . .. . .. . . 57
Таблицы .................................... ........... . ......... 58
Тег таблицы ................ . ................... . ...... 58
Формы .. ... . . .... ... ..... ..... . .. ... . .. .. . . ... .. . . . ... . .. .. . .... . 60
Фор ма .. . .. .. . .. . .. ... . . .. .... .. .. . .. .. .. . .. . ..... . .. 60
Тег form .............................................. 60
Приме р ы обработки п ростых фо рм ... . ..... . .. . .......... 61
Теги элементов форм (1) ...... . .. ....... . ........... . ....... . .... 62
Элементы формы .......... . ........................ . .. 62
Тег поля вв ода (iп put) ................................... 63
Теги элементов форм (2) . . ............ . .. . ... . ...... . ....... . .... 64
З н аче н ия атрибута type ..... .. .... .. .. . .. .. . . ... . ..... . . 64
Теги элементов форм (З) . ... . .. . ....... .. .. . .. . .................. 66
Кно п ка (buttoп) .. .. . . .. .. .. .. .... . .. . .. .. . ... . .. . .. . .. . 66
Элемент textarea . . .. .. . .. .. .. .. . . .. ..... . .. .. . .. . .. .. . . 66
Сп и сок (select) ........................................ 67
Теги элементов форм (4) ....... . ...... . ...... . ...... . ... . ... . .... 68
Тег label . .. . .. . ...... .. . . .. . . . . ..... .. .. . .. . .. .. . .. .. . 68
Тег и fieldset и leg eп d .................................... 69
От теории - к практике .. ...... . ... . ... . ..... .. ...... . ...... .. .. .. 70
Для особо любознательных ~Об элементе МЕТА~ .. . .. . . . .. . 72
основы css .... ... .... ... ... .... .... ... .. 73
Что такое CSS? .. . .. . .. .. .. .. . . . . .. . .. . .. .. . .. .. . . .. .. . 7 4
Основ ы написания CSS .. . .. .. .. . . .. .. . .. . .. . .. .. . .. .. .. 75
Что же такое CSS? ... ... . ... . .. . ... . .... ....... . ... ... . ... ... . ... 76
Что представляет собой CSS .... .. ..... .. ...... . ......... 76
Преемственность версий CSS .. . .. . ... . .. . .. . . . . .. . .. .. .. 77
Простой пример CSS .. . .. . .... . . . .. . . . . .. . ...... . .. .. . . 77
Где живет CSS (1) . .. . ... . ... . .. . ... . .......... .. ... .. .... ... .. .. . 78
Как задать стиль в атрибуте style ...... . .. . .. . . . . .. . .. .. .. 78
Как задать стили в файле HTML (тег style) .. . ... . . . . .. . . . . .. 79
Где живет CSS (2) . .. .. .. . .. .. .. .. .. . ... . .. . ... . . ..... ...... . ... .. 80
Внешние файл ы CSS .. .. . .. .. . . . . .. . .. . .. . .. . ... . .. .. . . 80
х
Преимущества использования внеш них файлов .... . ..... . .. 81
П р и оритет ..... . ..... .. .... . .... . . . ... . .. . ..... . ... . .. 81
Основы верстки с помощью CSS . . . .. . ....... . .......... . ....... .. 82
Базовый формат CSS .. . .. . . . . .. . . . . .. . ... . .. . .. . .. .. . .. 82
Значение по умолчанию ... . .. . .. . .. . .. .. .. . .. . .. . .. .. . .. 83
Ка к п и сать комментарии ..... .. ... ...... ............... . 83
Область применения стилей (1) ... . .. .. ...... . ....... . .. . .. .. ... .. 84
Как п р исвоить один и тот же стиль нескольким элементам .... 84
Ка к п р исвоить одинаковый стиль всем элементам ... . . ...... 84
Область применения стилей (2) .... . ... ... . .. . ... . .. .. . .. ....... .. 86
Ка к п р исвоит ь одинаковый стиль н ескольким элеме нтам ... .. 86
Ка к задать сти ль конкретно го элемента . .. . .. . .. . ... . .. . .. . 87
Область применения стилей (3) ... . .. . ... . ... . .......... . ....... .. 88
Изменение стиля при наведении указателя мыши .. . .. ... ... 88
И зменение стиля при щел чке н а гиперссылке .. . .. . . . . .. . ... 89
Как указать цвет и длину . .... . ... . .. . ... . ... . ... . ...... . ...... .. . 90
Ка к задать цвет .......... . ............................. 90
Как указать размер ы элемента ............. . ............. 91
Для особо любознательных - Отображение специальных
си мвол ов - ...... . .. . .. . . .. .. . ... . .. . .. .. . .. . .. .. . .. . . 92
СВОЙСТВА CSS (1) . ...... . ......... ....... 93
Использование свойств CSS на практике .. .. .... .. .. . .. . ... 94
Знакомимся с блочной моделью ............ . .... . ........ 95
Свойства текста (1) .. ............... . ....... . .......... . ....... .. 96
Параметр ы расположения текста .. . .. . .. . .. . .. . ... . .. . .. . 96
Свойства текста (2) . . . ... . .. ..... . .. . ... . ... . .. .. .. . ... . .. . .. ... . 98
И нтервал между символами и слов ами . .. .. .. . . .. . .. .. . .. . 98
Украшаем текст . .. . .. . .. .. . .. .. . .. . ..... .. .. . .. . .. . .. . . 99
Свойства шрифта . . .. . ... . ... . ... . .. . ... . ...... .. .. . ... . ...... . . 100
Цвет текста .......................................... 100
Курсивное нач ертание .... . ..... .. . .. .. . . .. ............ 100
Н асыщенность шрифта ...... . . . ........ . . . ............ 100
Р азмер шрифта (кегль) .... .. ..... . ..... . ...... . ....... 101
Тип ш р ифта . .. .... . ... . .. . .. . ..... . ... . .. .. . .. .... .. . 101
XI
Блочная модель .. ...... ................... . .. . ....... . ......... . 102
Что такое блочная модель .. . ... . .. . .. . .. .. . .. . .. .. . .. . . 102
Свойства блока (1) .. . .. .. ...... . ... . .. . ... . .. .. .. .... . ... . .. . .. . 104
Ширина и высота области соде ржимого .. .. . .. . .. .. . .. . .. 104
Отступ ы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. .. . .. . 1 05
Свойства блока (2) .. . .. .... . .. .. ...... . ... . .. .. .. .. . .. ... . .. . .. . 106
Граница .. . ..... . ... .. .... . ...... . .. . .. . ...... . ..... . 106
Свойства блока (З) ..... ................... . .. . ....... . ......... . 108
Элементы, размеры которых можно менять ............... 108
Зак ругленные угл ы ................ . ... . ........ . ..... . 109
Свойства фона (1 ) ...... ........ . .......... . .. . ....... . ......... . 11 О
Ц вет фона ...... . ... . ...... . ..... . ..... .. ........... . 11 О
Фо нов ое изображение (1) .............................. 11 О
Свойства фона (2) . ..... ........ . ...... . ... . .. . .... . .. . ......... . 112
Фоновое изображение (2) . . .. .. . .. .. . .. . .. . .. . .. .. .. . . . 112
Отображение и размещение (1 ) ............... ............... . . . . 114
Свойства, определяющие формат отображения .... .. . .. .. . 114
Свойства, о п ределя ющие положение эл ементов . . ... . .. . .. . 115
Отображение и размещение (2) ... . ... ... . ... .. . ... . . ... ...... . . . 116
П орядок наложения элементов ... . ...... . ..... . ...... . .. 116
Обтекан и е элеме нтов текстом . . .. .. . .. .. .. . .. . .. . .. . .. .. 117
Списки и таблицы ... . .. .... .... . .. .. .. . ... . .. .. ... .. . . ... . .. . .. . 118
Маркеры ил и номера пун ктов списка .................. . .. 118
П арамет ры таблицы .. .. .. .. . .. .. .. . .. .. .. . .. . .. . .. . ... 119
От теории - к практике . .. .. . ... . .. .. .. .. .. . .. .. ... . .. . ... . ... . .. 120
Для особо любознательных ~ Н а полях~ ................. 122
СВОЙСТВА CSS (2) ............. . ...... ... 123
Гибкая компонов ка блоко в .. . ... . .. . .. .. . . .. ... . . .. . .. . . 124
Движение ....................................... . ... 125
Многоколоночная верстка ...... . ....... . .. . ....... . .. . ... . ... . .. 126
Ве рстка в несколько колонок .. .. . . . . . .. . . .. .. .... .. . .. .. 126
Разделители колонок .................................. 127
Флексбокс ...... . ...... .... . ... . ...... . ... . .. . .... . .. . ... . ..... . 128
Что такое флексбокс? .. . .. . ... . .. . .. .. . . .. .. .. . .. . .. . . 128
Задаем свойство flexbox ................................ 128
XII
Прозрачность и градиент ......... . .. . ....... . .......... . ....... . 130
Как задать прозрачност~ь .......... . .................... 130
Переходы .. .. .... .. .. .... . .. .... . ...... .. ...... . .......... . ... .. 132
Что такое переходы? . . .. .. . .. ............... . ........ . 132
Как задать свойства перехода . ..... . .................... 132
Анимация ... . .... .. .. . .. .. .. ... .. ... . .. .. ...... . .... . .. ... . ... .. 134
Что такое СSS-анимация? . . .. . ............... . ........ . 134
Запуск анимации ..................................... 134
Пример (1) ........................................... 136
Пример (2) .. ..... . .. . .. . ............... . .. .. . . ... . .. . 138
Для особо любознательных ~ О наследовании стилей ~ . . .. . 140
АДАПТИВНЫЙ ДИЗАЙН . ... ... ..... .. ..... 141
В одну колонку или в несколько? . ....................... 142
Адаптивный дизайн ................................... 143
Схема расположения . ............... . ... . ...... . ....... . ...... .. 144
Колонки . . .... .. ..... . ................ . .. . ......... . . 144
Типовые схемы расположения блоков .................... 145
Как создать МНОГОКОЛОНОЧНЫЙ макет . ........................... 146
Верстаем в несколько колонок . .. .. . . ... . . .. .. .. . .. . .. . . 146
Устройства и пользовательский интерфейс . .. ... .. . ... . .. . ..... . 148
Что представляет собой устройство? . ..... . .............. 148
Что такое пользовательский интерфейс? .................. 149
Адаптивный дизайн (1) . ...... . ................................ .. 150
Проблемы при работе с интернетом на разных устройствах .. 150
Поддержка нескольких устройств . ........ . .. .. .. . ..... .. 150
Настройки видимой области экрана ..... . .. .. . .. . .. .. . .. 151
Адаптивный дизайн (2) . ......................................... 152
Медиазапросы ...................................... . 152
Практический пример ... ... . .......... .. ..... .. .. . ............. . 154
Для особо любознательных ~ Первый в мире и первый
в Японии веб-сайт ~ .. . .. .. . . ... . ........ . ... . ......... 156
XIII
JAVASCRIPT . .. ... ..... ...... . ...... . ..... 15 7
Что такое JavaScript . . .. . .. . ... . .. . .. . .. . .. . .. . ... . .. . . 158
Работа с элементами и стилями в JavaScript ............. .. 159
Язык JavaScript ... . ... . .. .... . ... . .. . ... . ...... . ...... . ...... . .. 160
Что такое JavaScript? . .. . .. . ... . .. . .. . .. . .. . .. . ... . .. .. 160
Особенности JavaScript . . .. .. . .. . .. .. .. . .. . .... .. ... . .. 161
Здравствуй, мир! .. . ... . .. . ... . .. .. .. . .. .. ... ... . ... . .. . ... . .... . 162
Код JavaScript .. . ...... . .. . .. .. . . .. . ...... . .. . .. .. . .. . 162
Отображение диалогового окна . . . ... .. . . .. .. .... .. . .. .. 163
Где писать JavaScript . . . ............................... . ........ . 164
В нутри тега body . ...... . .. . .. .. . .. . .. . .. .. . ...... . .. . . 164
В нутр и тега head .. . .. .. . .. . ... . . ... . . .. . .. . .. .. .. . . .. . 164
В о внеш н ем файл е .................................... 165
Пр ивязка сценария к событию .......................... 165
Что можно делать с помощью JavaScript ....... . .. . ............ . 166
Манипуляции с элементами и стилями . .................. . 166
Разработка пр иложений ................................ 167
Для особо любознательных ~ Ajax ~ .. .. . .. . .. . ... . .. . .. . 168
ПРИЛОЖЕНИЕ .. ..................................... 169
Собираем все вместе . . . ..... . ... . . .. . .. . ........ . ..... . .... .... . 170
П роцесс создан и я сайта . . .. .. .. . . ... . .. . .. . .. . .. .. . . ... 170
Публикация неб-сайта . . .... .... . ....... . . .. .. .. ...... . ... . .. .. .. 172
П одготовка веб -сервера ............. . .................. 172
Загрузка по FTP ........ . ...... . ..... .. .... .. ..... . ... 173
Использование FТР .. . .. . .. . ... . .. . .. .. . . .. .. .. . .. . .... 173
П олучен и е собствен н ого доменного и мени . . .............. 174
Форматы изображений . .. ...... . ...... .. .. . .......... .. ...... . .. 175
Форматы граф и ческих файлов .. . .. . ... . .. . .. . .. .. . .. . .. 175
Среды, помогающие создавать неб-сайты ...................... . 177
Р азличные способы создания сайтов .. . ......... . ..... . .. 177
На что обратить внимание при создании веб-сайта . ... . ... ..... . 178
Удобство и опасность идут рука об руку ............... . .. . 178