HTML5

В начале 90х годов Тим Бернерс Ли подарил миру замечательный язык разметки для создания вебсайтов - HTML.

Язык неоднократно модифицировался, в конце концов трансформировавшись в HTML5, где помимо самих тегов HTML, как правило, используется язык CSS и JavaScript.

В этом курсе мы предлагаем вам полное описание языка HTML и CSS, а также даём введение в JavaScript.

Введение и основные понятия

• Понятие о гипертексте и разметке

• Отличия версий HTML

• Редакторы, браузеры и другое ПО

Основы HTML

• Понятие элемента, тега открывающего и закрывающего, правило вложенности, использование отступов

• Теги физического и логического форматирования, семантические элементы HTML5

• Комментарии

• Структура документа

• Основные теги

• Разбивка строк и сохранение пробелов

• Спецсимволы

• Понятие атрибутов, значений атрибутов, использование кавычек

• Разметка текста, выравнивание, отступы, заголовки, шрифты, цвет, заливка

• "Фирменные" теги

• Мета-теги

• Валидация документа

• Использование Developer Tools

• Практическая работа: форматирование текстового документа

Основы каскадных таблиц стилей (CSS)

• Назначение CSS, обзор версий CSS

• Инлайн-стили, стили документа, внешние таблицы стилей

• Селекторы: типы, классы, идентификаторы, псевдоклассы, псевдоэлементы, комбинированные, контекстуальные, дочерние, соседние и пр.

• Каскадность

• Типы CSS-медиа

• "Стилевая вёрстка", теги SPAN и DIV, сравнение с вёрсткой на "чистом" HTML

• Разметка текста на CSS

• Практическая работа: форматирование текстового документа на CSS

Графика в Web

• Вставка изображений

• Форматы изображений

• Тег IMG и его атрибуты, тег FIGURE, другие способы вставки изображений

• Фоновые изображения

• Расширение возможностей работы с графикой при помощи CSS

• Практическая работа: добавление графики в документ

Обработка изображений

• Принципы построения графики

• Что нужно знать о PhotoShop, Corel и других

• Цветовые пространства

• Форматы графических файлов - кто в web, кто не в web

• Экспорт/импорт из других редакторов

• Быстрая корректировка изображений

• Приёмы вырезания, удаление фона, ретуширование, монтаж

• Работа со слоями, основные эффекты

• Анимированные изображения

• Практическая работа: обработка изображений

Немного о дизайне сайта

• Что такое "дизайн" и как ему учиться

• Этапы разработки сайта

• Рекомендации по созданию макета сайта

• Каким долно быть "правильное" меню

• Колористика: "Ваш цвет режет мне глаз, сэр!"

• Покритикуем чужие сайты

Гиперссылки

• Создание гиперссылок

• Внешние, внутрисистемные и внутристраничные ссылки, абсолютный и относительный URL, протоколы URI

• Атрибут Target

• Цветовые решения гиперссылок

• Hover-эффект CSS

• Применение hover для создания выпадающих меню

• Практическая работа: создание простой фотогалереи

Карты и слайсы

• Карты CSIM

• Слайсы

• Rollover-эффект

• Практическая работа: создание меню сайта на картах и слайсах

Списки

• Нумерованные и маркированные списки

• Вложенные списки

• Нестандартные маркеры

• Списки определений

• Выпадающие списки

Таблицы

• Структура таблиц

• Фиксированные и резиновые размеры

• Объединение ячеек

• Дизайн таблиц

• Слоевая вёрстка vs. табличная вёрстка

• Позиционирование элементов, отступы, z-index

• Практическая работа: создание различных табличных макетов

Фреймы

• Концепция фреймовой организации интерфейса, её преимущества и недостатки

• Структура фреймов

• Дизайн фреймов

• IFRAME

• Навигация по фреймсодержащему документу

• Альтернатива фреймам

• Практическая работа: создание системы меню для фотогалереи

Формы

• Понятие формы

• Текстовое поле и типовые атрибуты

• Парольное, скрытое, файловое, текстовая область, чекбоксы и радиокнопки, числовое, цветовое, ползунок, списки выбора, URL, mail и пр.

• Кнопки submit, reset, button, image

• Валидация средствами HTML, автозаполнение, contenteditable и пр. дополнительные теги и атрибуты форм

• Практическая работа: создание интерфейса формы анкеты

Мультимедиа

• Понятие о плагинах

• Good bye, Flash!

• Вставка аудио: bgsound, embed, object, audio

• Вставка видео

Углубленный CSS

• Рамки, тени, колонки

• Ещё раз о позиционировании и отступах, возможность вычислений: calc()

• Градиенты

• Наводим красоту: фильтры

• Трансформации

• "Рисуем" в CSS

• Транзиции

• Анимация в CSS

• 3D в CSS

• Практическая работа: создание 3D-моделей и 3D-анимации

Введение в JavaScript

• История и цель создания JavaScript

• Интеграция JavaScript c HTML и CSS, вставка скриптов

• Объектная модель

• Событийная модель (на примере MouseOver, MouseOut, MouseMove, DragDrop и пр.)

• Анимация на JavaScript

Расширенная графика

• SVG

• Canvas

Финальная практическая работа: создание небольшого сайта