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

ВВЕДЕНИЕ .................................................................................................................6

ГЛАВА 1. HTML – ОСНОВНЫЕ ПОНЯТИЯ ....................................................8

1.1. Историческая справка .................................................................................8
1.2. Современные стандарты HTML .................................................................9
1.3. W3-консорциум ..........................................................................................10
1.4. Установка IDE ............................................................................................11
1.5. HTML – теги ..............................................................................................13
1.6. Одиночные и парные HTML-теги .............................................................15
1.7. Блочные и строчные HTML-теги ..............................................................16
1.8. Семантические HTML – теги ....................................................................19
1.9. Классификация атрибутов HTML-тегов ..................................................23
  1.9.1. Универсальные атрибуты ............................................................24
  1.9.2. Уникальные атрибуты ..................................................................25
  1.9.3. Специфические атрибуты ............................................................26
  1.9.4. Событийные атрибуты .................................................................26

Контрольные вопросы ....................................................................................27

ГЛАВА 2. Типовая структура Web-страницы ...............................................28

2.1. Структура Web-страницы и DOM-модель ................................................28
2.2. Основные понятия DOM-модели ..............................................................29
2.3. Теги верхнего уровня ................................................................................33
  2.3.1. Переходный / строгий <!DOCTYPE> ............................................33
  2.3.2. Корневые элементы .....................................................................33
  2.3.3. Комментарии ..............................................................................35
2.4. Заголовок Web-страницы. Заголовочные теги .........................................35
2.5. Заголовок Web-страницы. Особые технологии .......................................39
  2.5.1. Open Graph протокол ..................................................................39
  2.5.2. Resource Description Framework ................................................40
  2.5.3. RSS каналы ..................................................................................41
2.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 .........................................................................65

3.1. CSS: определение и возможности ............................................................65
3.2. Основные категории CSS ........................................................................66
3.3. Способы подключения стилей .................................................................67
3.4. Виды селекторов в CSS ............................................................................70
3.5. Принципы работы CSS .............................................................................86
  3.5.1. Каскадность ..................................................................................86
  3.5.2. Специфичность ............................................................................90
  3.5.3. Наследование ..............................................................................93
3.6. Блочные и строчные элементы ...............................................................95
3.7. Стандартная и альтернативная блочные модели ..................................98
  3.7.1. Стандартная модель ...................................................................99
  3.7.2. Альтернативная модель ............................................................101

Контрольные вопросы ................................................................................104

ГЛАВА 4. Типы данных в CSS .......................................................................105

4.1. Типы данных и работа с HTML-элементами ..........................................105
4.2. Целые числа ............................................................................................106
4.3. Десятичные дроби ..................................................................................110
4.4. Измерение ...............................................................................................112
4.5. Проценты ................................................................................................122
4.6. Цвет .........................................................................................................124
  4.6.1. Ключевые слова .........................................................................124
  4.6.2. Шестнадцатеричные RGB-цвета ..............................................126
  4.6.3. Применение функций rgb() и rgba() .....................................127
  4.6.4. Применение функций hsl() и hsla() ......................................128
4.7. Картинка .................................................................................................130
4.8. Позиционирование ..................................................................................131
  4.8.1. position: одно значение ...........................................................132
  4.8.2. position: два значения ............................................................134
  4.8.3. position: три значения .............................................................136
  4.8.4. position: четыре значения .......................................................137
4.9. Строка ......................................................................................................139
4.10. Функции ................................................................................................140
4.11. Подходы к заданию размеров элементов в HTML-документах .........141
  4.11.1. Естественный размер ..............................................................141
  4.11.2. Заданный размер ......................................................................142
  4.11.3. Размеры в процентах ...............................................................144
  4.11.4. Минимальные и максимальные размеры ...............................145
  4.11.5. Размеры в зависимости от величины окна браузера ............147

4.12. HTML-элементы ..............................................................................148

  4.12.1. Общие свойства ............................................................................148
  4.12.2. Границы ........................................................................................150
  4.12.3. Перекрытие содержимого ............................................................152

Контрольные вопросы ................................................................................154

ГЛАВА 5. CSS: стили кода и построение макетов ....................................155

5.1. Особенности работы с объектами Web-страницы .................................155
  5.1.1. Текст .............................................................................................155
  5.1.2. Списки ..........................................................................................164
  5.1.3. Ссылки ..........................................................................................167
  5.1.4. Медиафайлы ................................................................................170
  5.1.5. Таблицы .......................................................................................172
5.2. Дебаггинг CSS при помощи инструментов разработчика ....................173
5.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. Единый синтаксис .......................................................................182
5.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. Задания на самостоятельную работу ........................................205

7.1. Задачи по HTML без использования CSS ..............................................205
7.2. Задачи по HTML с использованием CSS ................................................214
7.3. Итоговое задание ....................................................................................222

ГЛАВА 8. Тестирование по курсу HTML+CSS ..........................................225

Список литературы ......................................................................................252

Приложение ....................................................................................................254

Учебное пособие содержит начальные сведения о web-дизайне и является основой при изучении курса «Информационные технологии в профессиональной деятельности» для студентов, обучающихся по направлению 08.03.01 «Строительство» Казанского государственного архитектурно-строительного университета. Учебное пособие содержит базовую информацию по HTML+CSS, которая может быть использована при создании сайтов (фронтенд).
Данное учебное пособие может быть также рекомендовано студентам различных специальностей технических вузов, оно также может служить справочным материалом при выполнении расчетно-графических, курсовых и дипломных работ.