Основы Web-разработки. HTML и CSS.

Программа курса

  1. Как работает Интернет. Что такое сайт. Что представляет собой веб-страница. Виды сайтов. Протоколы передачи данных. Процесс разработки сайта. Что такое гипертекст. Теги и атрибуты. Создание HTML-страницы. Объявление и идентификация документа. Элементы html, head, title, meta, body.
  2. Добавление текста и ссылок. Заголовки, абзацы, разрыв строки. Упорядоченные (нумерованные) списки, неупорядоченные (маркированные) списки, списки определений. Ссылки. Абсолютное и относительное связывание. Ссылки электронной почты. Внутристраничное связывание.
  3. Добавление изображений, мультимедиа и сценариев. Элемент img. Связывание изображений. Карты-изображения. Связывание аудио- или видеофайла. Вставка файлов при помощи элемента object. Добавление скриптов.
  4. Создание таблиц. Элемент table. Границы таблицы и интервалы. Добавление строки таблицы. Добавление ячеек таблицы. Добавление заголовков таблицы. Добавление заглавия. Объединение строк. Объединение столбцов. Комбинирование атрибутов colspan и rowspan. Группирование столбцов таблицы: элемент col. Группирование столбцов таблицы при помощи элемента colgroup. Группирование строк таблицы.
  5. Создание форм. Элемент form. Добавление поля ввода. Добавление флажков и переключателей. Использование меню формы. Использование текстовых областей. Кнопки Reset (сбросить) и Submit (отправить). Использование графической кнопки Submit (отправить). Обеспечение доступности форм с использованием элемента label. Группирование полей формы. Группирование элементов меню.
  6. Работа с фреймами. Создание набора фреймов. Добавление столбцов. Работа со строками. Комбинирование столбцов и строк. Элементы управления границами, изменением размеров и скроллингом. Именование и указание целевых фреймов. Фреймы без границ. Элемент noframes. Встроенные или плавающие фреймы.
  7. Использование языка CSS. Правила языка CSS. Применение языка CSS. Каскад. Наследование. Добавление встроенного стиля. Использование внедрённого стиля. Создание связанной таблицы стилей. Импортирование таблиц стилей. Комментирование кода на языке CSS. Работа с цветом и изображениями с использованием языка CSS. Задание цвета фона. Использование цвета фона для украшения таблиц. Управление заполнением фона. Размещение фонового изображения. Фиксация или прокрутка фоновых изображений. Создание прозрачного цвета фона. Сокращение языка CSS для свойств фона.
  8. Стилизация текста. Выбор шрифтов. Применение семейств шрифтов к тексту. Изменение размера шрифтов. Жирность и стиль шрифта. Раскрашивание текста. Выравнивание текста. Оформление текста. Установка отступа текста. Преобразование регистра и изменение шрифта текста. Установка интервалов между строками. Установка интервалов между буквами и словами. Модификация первой буквы и первой строки текста. Использование сокращений для стилей шрифта.
  9. Эффекты ссылок, списки и навигация. Работа с состояниями ссылок. Модификация стилей ссылки. Несколько стилей ссылок с использованием селекторов класса. Стилизация ссылок с использованием селекторов потомков. Стилизация упорядоченных списков. Стилизация неупорядоченных списков. Сокращения языка CSS для стилей списка. Вертикальная панель навигации на основе списка с использованием цвета.  Вертикальная панель навигации на основе списка с эффектами изображения. Горизонтальная панель навигации на основе списка с использованием цвета. Горизонтальная панель навигации на основе списка с эффектами изображения.
  10. Поля, границы и отступы. Исследование блочной модели. Использование полей. Использование отрицательных значений при указании полей. Свойство-сокращение margin. Стилизация границ. Свойство-сокращение border. Использование отступов. Свойство-сокращение padding.
  11. Позиционирование, плавающее размещение и Z-индекс.   Введение в позиционирование. Нормальный поток. Блоки-контейнеры. Окно просмотра браузера. Абсолютное позиционирование: относительно корневого элемента. Абсолютное позиционирование: относительно другого блока. Относительное позиционирование. Фиксированное позиционирование. Плавающие элементы. Очищенное плавающее размещение. Z-индекс.
  12. CSS-макеты. Три столбца с обрамляющими меню фиксированной ширины. Три столбца с шапкой и нижним колонтитулом. Вложенный плавающий блок. Макеты с выравниванием по центру. Смешанные макеты.