Казахстан, г. Алматы, ул. Шевченко 90, БЦ «Каратал», офис 53
Казахстан, г. Нур-Султан, ул. Иманова 19, БЦ Деловой Дом "Алма-Ата", офис 612

направление: WEB разработка кол-во дней: 5
кол-во часов: 40

В начале 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

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