HTML и CSS. Основы вёрстки

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

Тема 1. Основы разработки веб-ресурсов

  • Что такое верстка?
  • Важность и предназначение верстки в веб.
  • Консорциум W3C. Краткий экскурс в историю создания языка. Как сейчас происходит его доработка и развитие.
  • Браузеры. Актуальные браузеры. Кроссбраузерность.
  • Выбор редактора для написания кода.

Тема 2. Синтаксис HTML и структура HTML-документа

  • Доктайп (Doctype). Почему он так важен?
  • Понятие тега.
  • Каркас документа и Meta-теги.
  • Семантика кода.
  • Правила написания тегов: открытие-закрытие тегов, пустые, вложенные, регистр написания тегов.
  • Пример каркаса веб-страницы.

Тема 3. Работа с текстом

  • Параграфы и заголовки.
  • Форматирование текста.
  • Жирный.
  • Курсив.
  • Подчеркивание.
  • Перечеркнутый текст.
  • Надстрочный и подстрочный текст.
  • Линии.
  • Семантика тегов форматирования.
  • Пример веб-страницы со всеми разобранными типами форматирования.

Тема 4. Атрибуты элементов

  • Использование кавычек.
  • Регистр написания атрибутов.
  • Атрибуты Class, Id, Style, Title.

Тема 5. Списки

  • Маркированные списки.
  • Нумерованные списки.
  • Списки определений.
  • Вложенные списки.
  • Примеры использования на практике вышеизложенных списков.

Тема 6. Ссылки

  • Атрибуты.
  • Якоря.
  • Почтовые и внутренние ссылки.

Тема 7. Изображения, мультимедиа и вставка внешних объектов

  • Мультимедиа в веб: изображения, видео, аудио.
  • Добавление изображений на страницу.
  • Атрибуты изображений: ширина, высота, рамка, alt и title.
  • Форматы изображений.
  • Видео-форматы и их поддержка браузерами.
  • Аудио-форматы и их поддержка браузерами.
  • Вставка внешних объектов с помощью тегов object и embed.
  • Пример вставки видео YouTube.

Тема 8. Таблицы

  • Элементы таблиц.
  • Атрибуты.
  • Назначение таблиц.
  • Табличная верстка на практике.

Тема 9. Работа с формами

  • Поля ввода и их типы.
  • Метки полей.
  • Текстовые поля ввода.
  • Радиокнопки.
  • Чекбоксы.
  • Списки выбора.
  • Текстовая область.
  • Кнопки.
  • Группирование элементов формы.
  • Тег legend.
  • Атрибуты элементов формов.
  • Примеры создания формы.

Тема 10. Основы работы с CSS

  • Что такое CSS?
  • Возможности и предназначение CSS.
  • Подключение CSS к html-документу.
  • Синтаксис и терминология.
  • Наследование, каскадность, приоритетность.
  • ID и CLASS.
  • Селекторы: групповые селекторы, селекторы потомков, псевдоселекторы.
  • Сброс стилей по умолчанию.

Тема 11. Работа с параметрами шрифта

  • Установка шрифта.
  • Размер шрифта.
  • Стиль шрифта.
  • Font-weight.
  • Font-variant.
  • Сокращенная запись.
  • Подключение нестандартных шрифтов.

Тема 12. Работа с текстом

  • Интерлиньяж.
  • Выравнивание.
  • Красная строка.
  • Цвет.
  • Расстояние между словами/буквами.
  • Text-decoration.
  • Text-transform.
  • White-space.

Тема 13. Стилизация ссылок

  • Цвет.
  • Декорирование.
  • Псевдоселекторы.

Тема 14. Курсор

  • Стиль курсора.
  • Виды курсоров.
  • Использование кастомизированного курсора.

Тема 15. Списки

  • Виды маркеров.
  • Кроссбраузерное отображение маркеров.
  • Практика: создание навигации и использованием списков.
  • Горизонтальное меню.
  • Вертикальное меню.
  • Вложенное меню.

Тема 16. Таблицы

  • Границы таблиц.
  • Ширина и высота.
  • Выравнивание: горизонтальное и вертикальное.
  • Отступы.
  • Фон.

Тема 17. Использование изображений в качестве фона

  • Фоновый цвет.
  • Фоновое изображение.
  • Повтор фонового изображения.
  • Позиционирование фона.
  • Фиксация фона.
  • Краткая запись.

Тема 18. Формы

  • Границы.
  • Ширина, высота.
  • Интерлиньяж.
  • Кнопки.

Тема 19. Блочная модель

  • Ширина, высота.
  • Margin, Padding, Border.
  • Outline.

Тема 20. Свойство Display

  • Блочные элементы.
  • Строковые.
  • Блочно-строковые.

Тема 21. Свойство Float

  • Обтекание по сторонам.
  • Понятие потока.
  • Очистка потока.

Тема 22. Позиционирование

  • Абсолютное.
  • Относительное.
  • Фиксированное.
  • Свойство z-index.

Тема 23. Видимость элементов

Тема 24. Выбираем размерность: em, px, pt, %

Тема 25. Практическая работа

  • Верстка макетов с фиксированной шириной.
  • Пример верстки двухколоночных макетов с разным расположением элементов.
  • Пример верстки трехколоночных макетов с разным расположением элементов.
  • Верстка макетов с «плавающей» шириной.
  • Пример верстки двухколоночных макетов с разным расположением элементов.
  • Пример верстки трехколоночных макетов с разным расположением элементов.
  • Улучшаем навигацию по сайту.
  • Стилизация меню.
  • Выпадающее меню.
  • Верстка новостной ленты (блога).
  • Верстка информационных блоков.
  • Создание блоков-ссылок.
  • Создание закругленных уголков.
  • Создание тени и иммитация тени.
  • Создание рамок.
  • Форма обратной связи на css.
  • Создание галереи изображений.
  • Презентационная страница.
  • Страница с подробным описанием фото.
  • Создание галереи Lightbox.
  • Верстка каталога организаций или товаров.
  • Фиксированные панели (блоки) на странице.
  • Вертикальное выравнивание.
  • Прижимание футера сайта к низу страницы в не зависимости от высоты контента сайта.

Тема 26. Проблемы старых браузеров

HTML 5 + CSS + JS

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

Тема 1. Селекторы

  • Особенности выбора любых элементов на странице.
  • Тэги.
  • Классы.
  • Идентификаторы.
  • Атрибуты.
  • Новые селекторы.
  • Продвинутая работа с селекторами.

Тема 2. Псевдо-классы и псевдоэлементы CSS

  • Фильтры и более утонченный таргетинг.
  • Трюки.

Тема 3. Семантические элементы

  • Новые семантические элементы HTML5.
  • Семантические элементы блочного уровня.
  • Семантические элементы строчного уровня.
  • Семантика текстового уровня.
  • Новые атрибуты ссылок.
  • Пользовательские атрибуты с префиксом «data-«. Решение проблемы с IE.
  • Типичный код HTML5-разметки.
  • Стандарты микроданных.
  • Микроформаты.
  • hCard.

Тема 4. Продвинутые web-формы

  • Новые типы данных элементов форм.
  • Атрибуты элементов форм.
  • Валидация.
  • Отмена валидации.
  • Подсказки ввода.
  • Объявление элемента формы обязательным для заполнения.
  • Атрибут multiple для добавления множественных значений.
  • Атрибут autofocus.
  • Регулярные выражения в элементах форм.
  • Подсказки ввода.
  • Индикатор прогресса.
  • Шкала загрузки.
  • Псевдоклассы элементов форм.
  • Редактирование элементов с помощью атрибута contentEditable.
  • Редактирование страницы.
  • Специализированная проверка.
  • Обработка пользовательских ошибок с помощью javaScript.
  • Создание собственной системы проверки ошибок.
  • Валидация в режиме реального времени.

Тема 5. Гибкая блочная модель

  • Альтернатива блочной и табличной верстке.
  • Flex.

Тема 6. Особенности CSS3

  • Новые возможности CSS.
  • Использование префиксов в стилях.
  • Перенос текста.
  • Разбиение текста на колонки.
  • Обрамление текста.
  • Прозрачность.
  • Оттенок.
  • Градиент.
  • Усовершенствованный фон.
  • Анимация.
  • Трансформация.
  • Трюки CSS3.

Тема 7. Основы javaScript

  • Альтернативные методы для работы с селекторами.
  • Прослушиватель событий.

Тема 8. Видео и аудио

  • Атрибуты видео и дочерние теги source.
  • События API видео.
  • Методы API видео.
  • Свойства API видео.
  • Программирование видео-проигрывателя.
  • Отображение текстовых элементов в течение определенного времени.

Тема 9. API холст

  • Рисование фигур.
  • Работа с цветом.
  • Создание путей.
  • Текст.
  • Тени.
  • Трансформации.
  • Комбинирование фигур.
  • Восстановление состояния.
  • Обработка изображений.
  • Узоры.
  • Анимация на холсте.
  • Обработка видео на холсте.
  • Создание интерактивных фигур.
  • Простая анимация.
  • Сохранение содержимого холста.
  • Программы рисования.

Тема 10. API перетаскивания. События перетаскивания. Перетаскивание файлов

  • Выбор допустимого источника.
  • Свойства, методы и события API перетаскивания.
  • Перетаскивание файлов.

Тема 11. API геолакации. Определение своего местоположения. Интеграция с Google Maps

  • Определение пользовательского местоположения.
  • Слежение за изменением местоположения.
  • Вывод карты на экран.
  • Библиотека Geocoding.
  • JavaScript API Google Карт (версия 3).
  • Библиотеки API Google Map.
  • Прокладка маршрута.

Тема 12. API web хранилища

  • localStorage и sessionStorage.
  • Создание и извлечение данных.
  • Удаление данных.Сохранение чисел и дат. Сохранение объектов, JSON.
  • Слежение за областью HTML5-хранилища.

Тема 13. API индексированных баз данных

  • Возможности индексированных баз данных.
  • Открытие базы данных.
  • Создание хранилища объектов.
  • Добавление данных в хранилище объектов.
  • Запрос данных из хранилища.
  • Вывод данных из хранилища объектов.
  • Удаление данных из таблицы.
  • Запуск.
  • Краткий справочник API IndexedDB.

Тема 14. Файловый API

  • Считывание информации с файла.
  • Контроль процесса загрузки файлов.

Тема 15. Взаимодействие с web-сервером. Опрос посредством серверных событий. Web-сокеты. Событие onMessage

Тема 16. JQuery. Ajax

Тема 17. Основы PHP