Специалист | HTML и CSS. Уровень 1-2 [Верстальщик Web] (2015) PCRec

создавать web-страницы, содержащие все необходимые компоненты: текст, изображения и гиперссылки;
определять правильную иерархию страниц для создания сайта;
использовать интерактивные элементы для улучшения его юзабилити;
применять возможности CSS для эффективного оформления сайта и совершенствования его функциональности;
работать с фреймами;
применять новый функционал HTML5 и CSS3.

Модуль 1. Введение и основные понятия
Как это работает? Что такое web-сервер, web-сайт, web-страница
Цели и задачи языка HTML
HTML-разметка. Элементы
Структура HTML-документа:
Использование комментариев
Базовые элементы разметки:
Атрибуты элементов
Специальные символы
Лабораторная работа по теме

Модуль 2. Анатомия страницы
Понимаем, как мы пишем: синтаксис HTML
Элементы форматирования текста
Понимаем, что мы пишем: семантика элементов
Валидация HTML-документа
Структурные элементы разметки
Лабораторные работы по теме

Модуль 3. Гиперссылки
Понятие гиперссылок в WWW
Внешние и внутренние гиперссылки
Типы адресов в WWW
Дополнительные атрибуты гиперссылок
Лабораторная работа по теме

Модуль 4. CSS. Каскадные таблицы стилей: основные свойства
Основные понятия CSS
Способы определения стилей
Каскадирование и наследование
Единицы измерения в CSS
Основные типы селекторов
Псевдоклассы и псевдоэлементы
Свойства шрифтов
Свойства текста
Свойства цвета и фона
Лабораторные работы по теме

Модуль 5. Использование изображений на странице
Типы изображений используемые в WWW
Вставка изображений на страницу
Атрибуты элемента img
Лабораторная работа по теме

Модуль 6. Структурирование информации при помощи списков
Неупорядоченный список
Упорядоченный список
Список определений
CSS свойства для списков
Лабораторная работа по теме

Модуль 7. Представление табличных данных при помощи таблицы
Основные элементы таблицы
CSS свойства элементов таблиц
Объединение ячеек таблицы
Дополнительные элементы таблицы
Лабораторная работа по теме

Модуль 8. Встраивание внешних данных при помощи фрейма
История фреймов
Встраиваемые фреймы
Фреймы и гиперссылки
Лабораторная работа по теме

Модуль 9. Передача пользовательских данных при помощи формы
Что такое веб-формы?
Элемент form и его атрибуты
Элементы формы: текстовые поля и кнопки
Элементы формы: элементы выбора
Дополнительные атрибуты элементов формы
Лабораторная работа по теме

Модуль 10. Использование CSS для макетирования
Оформление границ элемента
Внутренние отступы элемента
Наружные отступы элемента
Размеры элемента
Плавающие элементы
Видимость элемента
Лабораторные работы по теме

Модуль 11. Дополнительные возможности HTML и CSS
Практическая работа для закрепления изученных тем
Стили для различных типов носителей
Свойства курсора
Встраивание аудио- и видео-файлов
Лабораторные работы по теме

Модуль 12. Мета-информация на странице
Использование мета-информации
Элемент meta и его атрибуты
Поясняющая мета-информация
Мета-информация для роботов
Эмуляция заголовков ответа сервера

Модуль 13. Выбор хостинга и поддержка сайта
Понятие хостинга
Поиск хостера
Услуги хостера
Использование FTP-клиента
Доступ к ftp-серверу через проводник Windows

Модуль 14. Что дальше?
Обзор HTML5 API
Тонкая настройка сайта на стороне сервера
Динамические элементы на странице
Динамическое создание контента на сервере
Современные способы предоставления информации

Cамостоятельно выбирать программные средства разработки в соответствии со своими задачами
Грамотно проектировать веб-страницы и эффективно организовывать разработку кода
Разрабатывать код HTML и CSS в соответствии со стандартами Консорциума W3C
Создавать веб-страницы в соответствии с основными принципами практичности (usability) и доступности (accessibility) для пользователей
Разрабатывать веб-страницы, совместимые с распространёнными браузерами: Internet Explorer 6 и выше, Firefox, Opera 7 и выше
Верстать веб-страницы с применением современных технологий HTML и CSS: бестабличная и комбинированная вёрстка, абсолютное и относительное позиционирование, переполнение и обрезка блоков, внедрение внешних объектов, изображения в CSS
Оптимизировать веб-страницы для печати и для просмотра на наладонных устройствах
Тестировать веб-страницы, выполнять контроль качества

Модуль 1. Веб-стандарты и их поддержка
Стандарты W3C. Документация.
DOCTYPE.
Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.
Протокол HTTP.

Модуль 2. Элементы и атрибуты HTML5 и структура страницы
Секции, выноски, статьи, навигационные, «шапка», «подвал».
Элементы форм и их атрибуты.

Модуль 3. Эффективное использование инструментов разработки веб-страниц
Инструментарий разработчика:, FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper.
Составление и анализ требований к вёрстке веб-страниц . Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц.
Практическая работа: построение структуры страницы с использованием вспомогательных программ.

Модуль 4. Селекторы в HTML5
Селекторы перешедшие из HTML4/xHTML.
Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML.
Ролловеры, спрайты.
Практическая работа: использование специфических селекторов при верстке страницы.

Модуль 5. Введение в построение удобных для использования сайтов (usability) и доступность (accessibility) сайтов
Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Психологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.
Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей
Семинар: Учет удобства использования сайтов

Модуль 6. Продвинутые технологии HTML и CSS
Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление "подвала" внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display.
Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание "фреймообразной" вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y.
Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание "фреймообразной" вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат.
Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах.
Практическая работа: использование на практике CSS-свойств позиционирования, отображения и др.

Модуль 7. Совместимость веб-страниц с различными браузерами
Условные комментарии.
Скрипты для поддержки селекторов и изменения поведения старых браузеров.
Программы эмуляторы старых версий IE.
Фильтры.
Практическая работа: использование кроссбраузерной верстки

Модуль 8. Использование свойств CSS2 и CSS3
Градиенты, анимация, трансформация (2D и 3D), переходы
Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)
@font-face (веб-шрифты), текстовые эффекты,
Многоколоночная верстка,
Работа с фоном (+градиенты)
Закругление углов, модель Flex-блоков.
Определение технологий, поддерживаемых браузером.
Практическая работа: построение выпадающего меню средствами HTML5 и CSS3

Модуль 9. Верстка макета
Принципы нарезки макета из psd-файла.
Выбор размеров и вариантов верстки.
Верстка.
Практическая работа: нарезка макета страницы
Практическая работа: верстка страницы по заданному макету.

Модуль 10. Типовые решения
CSS-фреймворки.
Динамический CSS (на примере LESS).
Шаблоны CMS
Решения на JavaScript.