Информационные технологии в строительстве: основы HTML + CSS. Учебное пособие

ВВЕДЕНИЕ .................................................................................................................6ГЛАВА 1. HTML – ОСНОВНЫЕ ПОНЯТИЯ ....................................................81.1. Историческая справка .................................................................................81.2. Современные стандарты HTML .................................................................91.3. W3-консорциум ..........................................................................................101.4. Установка IDE ............................................................................................111.5. HTML – теги ..............................................................................................131.6. Одиночные и парные HTML-теги .............................................................151.7. Блочные и строчные HTML-теги ..............................................................161.8. Семантические HTML – теги ....................................................................191.9. Классификация атрибутов HTML-тегов ..................................................23  1.9.1. Универсальные атрибуты ............................................................24  1.9.2. Уникальные атрибуты ..................................................................25  1.9.3. Специфические атрибуты ............................................................26  1.9.4. Событийные атрибуты .................................................................26Контрольные вопросы ....................................................................................27ГЛАВА 2. Типовая структура Web-страницы ...............................................282.1. Структура Web-страницы и DOM-модель ................................................282.2. Основные понятия DOM-модели ..............................................................292.3. Теги верхнего уровня ................................................................................33  2.3.1. Переходный / строгий <!DOCTYPE> ............................................33  2.3.2. Корневые элементы .....................................................................33  2.3.3. Комментарии ..............................................................................352.4. Заголовок Web-страницы. Заголовочные теги .........................................352.5. Заголовок Web-страницы. Особые технологии .......................................39  2.5.1. Open Graph протокол ..................................................................39  2.5.2. Resource Description Framework ................................................40  2.5.3. RSS каналы ..................................................................................412.6. Тело Web-страницы ..................................................................................41  2.6.1. Работа с текстом ..........................................................................41  2.6.2. Ссылки .........................................................................................44  2.6.3. Рисунки и мультимедиа ...............................................................47  2.6.4. Списки ...........................................................................................51  2.6.5. Таблицы ........................................................................................54  2.6.6. Формы и поля ввода .....................................................................56  2.6.7. Фреймы .........................................................................................58  2.6.8. Стили и семантика .......................................................................59  2.6.9. Программирование .......................................................................63Контрольные вопросы ....................................................................................64ГЛАВА 3. Современный CSS .........................................................................653.1. CSS: определение и возможности ............................................................653.2. Основные категории CSS ........................................................................663.3. Способы подключения стилей .................................................................673.4. Виды селекторов в CSS ............................................................................703.5. Принципы работы CSS .............................................................................86  3.5.1. Каскадность ..................................................................................86  3.5.2. Специфичность ............................................................................90  3.5.3. Наследование ..............................................................................933.6. Блочные и строчные элементы ...............................................................953.7. Стандартная и альтернативная блочные модели ..................................98  3.7.1. Стандартная модель ...................................................................99  3.7.2. Альтернативная модель ............................................................101Контрольные вопросы ................................................................................104ГЛАВА 4. Типы данных в CSS .......................................................................1054.1. Типы данных и работа с HTML-элементами ..........................................1054.2. Целые числа ............................................................................................1064.3. Десятичные дроби ..................................................................................1104.4. Измерение ...............................................................................................1124.5. Проценты ................................................................................................1224.6. Цвет .........................................................................................................124  4.6.1. Ключевые слова .........................................................................124  4.6.2. Шестнадцатеричные RGB-цвета ..............................................126  4.6.3. Применение функций rgb() и rgba() .....................................127  4.6.4. Применение функций hsl() и hsla() ......................................1284.7. Картинка .................................................................................................1304.8. Позиционирование ..................................................................................131  4.8.1. position: одно значение ...........................................................132  4.8.2. position: два значения ............................................................134  4.8.3. position: три значения .............................................................136  4.8.4. position: четыре значения .......................................................1374.9. Строка ......................................................................................................1394.10. Функции ................................................................................................1404.11. Подходы к заданию размеров элементов в HTML-документах .........141  4.11.1. Естественный размер ..............................................................141  4.11.2. Заданный размер ......................................................................142  4.11.3. Размеры в процентах ...............................................................144  4.11.4. Минимальные и максимальные размеры ...............................145  4.11.5. Размеры в зависимости от величины окна браузера ............1474.12. HTML-элементы ..............................................................................148  4.12.1. Общие свойства ............................................................................148  4.12.2. Границы ........................................................................................150  4.12.3. Перекрытие содержимого ............................................................152Контрольные вопросы ................................................................................154ГЛАВА 5. CSS: стили кода и построение макетов ....................................1555.1. Особенности работы с объектами Web-страницы .................................155  5.1.1. Текст .............................................................................................155  5.1.2. Списки ..........................................................................................164  5.1.3. Ссылки ..........................................................................................167  5.1.4. Медиафайлы ................................................................................170  5.1.5. Таблицы .......................................................................................1725.2. Дебаггинг CSS при помощи инструментов разработчика ....................1735.3. Стили написания кода ............................................................................176  5.3.1. Использование препроцессоров и постпроцессоров ...............176  5.3.2. CSS-методологии ........................................................................178  5.3.3. Гибкие относительные единицы ................................................181  5.3.4. Сброс стилей ................................................................................181  5.3.5. Шаги планирования .....................................................................181  5.3.6. Единый синтаксис .......................................................................1825.4. Макет CSS ................................................................................................183  5.4.1. Нормальный поток ......................................................................183  5.4.2. Обтекание .....................................................................................185  5.4.3. Флексбоксы ..................................................................................187  5.4.4. Позиционирование ......................................................................189  5.4.5. Сетка .............................................................................................192  5.4.6. Мультиколоночность ..................................................................194  5.4.7. Адаптивный дизайн .....................................................................196Контрольные вопросы ................................................................................199ГЛАВА 6. Калькулятор на HTML+CSS+JS. Практическое применение ....200ГЛАВА 7. Задания на самостоятельную работу ........................................2057.1. Задачи по HTML без использования CSS ..............................................2057.2. Задачи по HTML с использованием CSS ................................................2147.3. Итоговое задание ....................................................................................222ГЛАВА 8. Тестирование по курсу HTML+CSS ..........................................225Список литературы ......................................................................................252Приложение ....................................................................................................254