HTML5 и CSS3 для создания сайтов

Изучение новейших версий языков HTML5, CSS3 и их практическое применение при создании веб-страниц

Курс рекомендован начинающим веб-дизайнерам, контент-менеджерам

Современный блочный дизайн страниц в соответствии со стандартами W3C в десятках проектов-упражнений 

Новейшие свойства HTML 5: разметка страниц, работа с аудио и видео, продвинутые формы 

Новые возможности CSS3: внедряемые шрифты, тени, скругленные углы, градиенты, переходы и анимация 

Создание навигационных меню с использованием CSS 

Разработка адаптивного дизайна для мобильных устройств 

Учет особенностей браузеров и исправление особенностей Internet Explorer 

Возможность выбора платформы для обучения: классы на базе PC Windows и Apple Macintosh 

Продолжительность обучения: 40 академических часов 

Дополнительно: 16 учебных часов самостоятельной работы — бесплатно!

Стоимость 8600 рублей СКИДКА ЗАПИСАТЬСЯ

HTML и CSS являются основными языками разметки и стилей, с помощью которых разрабатываются веб-страницы сайтов. На курсе изучаются основы языка разметки HTML, способы применения CSS, основы построения сайтов для сети Интернет по стандартам World Wide Web Consortium (W3C). В процессе обучения рассматриваются новейшие версии языков HTML5 и CSS3, позволяющие по новому взглянуть на процесс веб-разработки. Десятки новых возможностей позволят вашему сайту выглядеть свежо и неповторимо на любом устройстве отображения, от монитора настольного компьютера до экрана смартфона.

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

Каждый слушатель имеет возможность воспользоваться разнообразными учебно-методическими материалами, описывающим все этапы создания рассматриваемого проекта, что дает возможность дополнять занятия с преподавателем самостоятельной работой дома или в учебной аудитории.

Продолжительность курса в 40 учебных часов, отводимых на программу курса, является достаточной для того, чтобы получить базовые навыки HTML-верстки, достаточные для трудоустройства или выполнения собственных проектов. Вы можете углубить свою подготовку, воспользовавшись дополнительным бесплатным временем для самостоятельной работы в объеме до 16 учебных часов.

Курс является базовым для овладения специальностями HTML-верстальщик, Веб-дизайнер и предназначен для разработчиков начальной и средней квалификации, контент-менеджеров.При желании, вы можете существенно расширить полученные знания, воспользовавшись возможностью обучения со скидкой по курсам веб-программирования JavaScript и jQuery для веб-разработчика, PHP и MySQL для веб-разработки.

Необходимая подготовка

Для успешного освоения программы курса необходимо иметь базовые навыки работы на компьютере. Получить необходимые знания можно на наших курсах Компьютер для работы, или самостоятельно. Для подготовки специалиста в области веб-дизайна рекомендуется курс Adobe Photoshop СC. Уровень 1. Основы растровой графики.

Продолжительность курса и график занятий

Продолжительность курса при занятиях в группе составляет 40 учебных часов (1 учебный час равен 45 минутам). Кроме этого, каждый слушатель получает 16 часов бесплатного самостоятельного обучения в наших классах с использованием учебно-методических материалов Центра.

Возможно обучение в вечерних (с 17.40 до 20.20) группах. Занятия проводятся 3 раза в неделю, конкретный график занятий определяется с учетом пожеланий слушателей на первом занятии. Время самостоятельной подготовки подбирается с учетом возможностей клиентов. Продолжительность курса составляет 4 недели.

При индивидуальном обучении продолжительность курса составляет 27 учебных часов. Время занятий назначается с учетом пожеланий слушателя.

Также данный курс можно прослушать в нашем Центре в формате вебинара. Для уточнения деталей такого обучения, пожалуйста, свяжитесь с нами любым удобным Вам образом.

Стоимость обучения и запись на курсы

Стоимость курса, при занятиях в группе составляет 8600 рублей. Осуществлять предоплату не требуется, более того, вы имеете право бесплатно посетить первое занятие (4 учебных часа) и уже после этого принять решение о продолжении обучения и оплате занятий.

При индивидуальном обучении стоимость курса составляет до 14400 рублей.

Документ, подтверждающий прохождение курсов

По окончании обучения и после сдачи практических зачетов вы получите Сертификат по курсу HTML5 и CSS3 для создания сайтов.

HTML5 и CSS3 для создания сайтов


Тема 1. Структура документа

Введение. Как люди получают доступ к Всемирной Паутине. Как создаются сайты. Использование языка HTML для описания структуры веб-страниц. Версии HTML. Концепция «живого языка» применительно к HTML5.

HTML-элементы. Теги. Атрибуты. Элементы body, head, title. Создание веб-страниц. Структура html-документа. Код в системе управления контентом. Проверка разметки страницы с использованием сервисов W3C.

Понятие кодировки. Кириллические кодировки. Особенности выбора кодировки в современных браузерах.

Тема 2. Теги разметки текста. Списки

Заголовки. Абзацы. Перевод строк и горизонтальные линии. Пробелы. Ввод символов, которых нет на клавиатуре. Особенности использования служебных символов HTML в тексте.

Семантическая разметка. Семантические элементы блочного уровня HTML5. Браузерная совместимость новых элементов.

Физическое и логическое форматирование текста. Полужирное и курсивное начертание. Подстрочные и надстрочные знаки. Важная информация и логическое ударение. Цитаты. Аббревиатуры и акронимы. Источники и определения.

Упорядоченные списки. Неупорядоченные списки. Списки определений. Вложенные списки.

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

Структура ссылки. Ссылки на другие сайты. Ссылки на другие страницы вашего сайта. Структура директорий. Относительные URL-адреса. Ссылки на электронную почту. Открытие ссылок в новом окне. Ссылки на определенную часть страницы. Ссылка на определенную часть другой страницы.

Тема 4. Изображения

Выбор изображений для сайта. Размещение изображений на сайте. Добавление изображений. Высота и ширина изображений. Размещение изображений в коде. Устаревший прием: выравнивание изображений по горизонтали. Устаревший прием: выравнивание изображений по вертикали. Три правила создания изображений. Инструменты для редактирования и сохранения изображений. Формат изображений JPEG. Формат изображений GIF. Размеры изображения. Кадрирование изображений. Разрешение изображения. Векторная графика. Анимированный GIF. Прозрачность. Использование изображений во Всемирной Паутине. HTML5: иллюстрации и подписи.

Тема 5. Мультимедийное содержимое

Обзор аудиоформатов для Web: особенности и недостатки. Добавление аудиоконтента на страницу средствами HTML5.

Обзор видеоформатов для Web: особенности и недостатки. Добавление видеоконтента на страницу в HTML5. Проблемы совместимости мультимедийных форматов с браузерами, их возможные решения. Реализация нескольких источников мультимедийного контента на странице. Реализация резервных решений для старых браузеров.

HTML5: совместное использование технологий Flash и HTML5 для размещения видеоконтента.

Тема 6. Создание таблиц

Использование таблиц в веб-дизайне: устаревшие и современные тенденции. Базовая структура таблицы. Логическое деление таблицы. Заголовки таблиц. Объединение столбцов. Объединение строк.

Тема 7. Веб-формы

Элементы формы. Структура формы. Ввод текста. Ввод пароля. Текстовая область. Переключатели. Флажки. Раскрывающийся список. Список множественного выбора. Кнопки отправки и очистки формы. Метки элементов форм. Группировка элементов формы.

Новые возможности форм в HTML5: валидация данных формы. Новые типы элемента input.

Тема 8. Создание стилей и таблиц стилей

Введение в каскадные таблицы стилей. Версии CSS. Особенности применения CSS в браузере Internet Explorer. Понятие кроссбраузерного кода.

Что такое стиль. Понимание таблиц стилей. Связывание таблиц стилей с HTML-кодом. Встроенные стили. Внутренние таблицы стилей. Внешние таблицы стилей.

Обучающий урок: создание первых стилей. Создание встроенного стиля. Создание внутренней таблицы стилей. Создание внешней таблицы стилей.  

Тема 9. Селекторы: определение элементов стилизации

Понятие селектора. Типы селекторов. Особенности использования селекторов типа, класса, идентификатора. Создание групповых селекторов. Универсальный селектор. Применение селекторов потомков.

Блочные элементы. Встроенные элементы. Группировка текста и элементов в блок. Группировка текста и элементов в строку. Осмысление тегов div и span.

Тема 10. Механизм наследования стилей

Что такое наследование? Упрощение таблиц стилей через наследование. Ограничения наследования.

Обучающий урок: наследование. Одноуровневое наследование. Наследование для стилизации веб-страницы. Исключения механизма наследования.

Тема 11. Запись цвета в CSS

Способы записи цвета в CSS. Безопасная веб-палитра. Шестнадцатиричное представление цвета. Использование модели RGB для записи цвета. Связь шестнадцатиричных кодов цвета с моделью RGB. Использование модели RGBA для записи цвета и ее поддержка браузерами. Реализация резервных решений для старых браузеров. 

Тема 12. Форматирование текста /3 часа/ 

Использование шрифтов. Выбор обычного шрифта. Применение веб-шрифтов с помощью сервиса Google fonts. Создание стилей с использованием веб-шрифтов.

Установка размера шрифта. Пикселы. Ключевые слова, проценты и единица измерения em. Курсив и полужирный шрифт. Придание тексту цветового оформления. Выравнивание текста. Отступ первой строки абзаца. Прописные буквы. Украшение текста. Установка междустрочного интервала. Межсимвольный и межсловный интервал. Добавление текстовых теней. Использование селекторов псевдоэлементов для форматирования первой буквы, первой строки абзаца.

Стилизация списков. Типы списков. Позиционирование маркеров и нумерации списков. Графические маркеры. Селекторы псевдоэлементов и дочерние селекторы типов.

Обучающий урок: форматирование текста в действии.

Тема 13. Поля, отступы, границы /

Понятие блочной модели. Управление размерами полей и отступов. Сокращенный набор свойств margin и padding. Конфликты полей. Удаление пустых полей с помощью отрицательных значений. Отображение встроенных и блочных элементов. Добавление границ. Сокращенный набор свойства border. Форматирование отдельных границ.Установка цвета фона. Создание скругленных углов. Добавление теней. Определение параметров высоты и ширины. Вычисление фактических размеров блочных элементов. Переопределение ширины блока с помощью box-sizing. Задание максимальных и минимальных значений высоты и ширины. Управление поведением блочных элементов с помощью свойства overflow. Управление обтеканием содержимого плавающих элементов. Фон, границы и плавающие элементы. Отмена правил обтекания. Обучающий урок: поля, фоновые параметры, границы.

Тема 14. Управление сложной структурой стилей: каскадность

Каскадность стилей. Объединение стилей. Множество стилей для одного элемента. Особенности механизма каскадности: какие стили имеют преимущество. Конфликты стилей и их решение. Правила значимости. Управление каскадностью. Изменение значимости. Выборочная отмена значимости. Концепция обнуления стандартных стилей браузера

Обучающий урок: механизм каскадности в действии. Сброс стандартных стилей и создание стилей с чистого листа. Создание комбинированных стилей. Преодоление конфликтов стилей.

Тема 15. Стилизация графики и фона

Фоновые изображения. Управление повтором фоновых изображений. Позиционирование фоновых изображений. Фиксация фона. Определение начальной позиции фонового изображения и порядка его отсечения. Масштабирование фоновых изображений. Сокращенный вариант свойства background. Использование нескольких фоновых изображений. Применение градиентов, создаваемых с помощью сервиса Colorzilla.

Обучающий урок 1: создание фотогалереи. Обучающий урок 2: использование фоновых изображений.

Тема 16. Работа с навигацией сайта

Выборка стилизуемых ссылок. Понимание состояний ссылок. Стилизация ссылок. Селекторы псевдоклассов. Селекторы атрибутов. Стилизация отдельных видов ссылок. Оригинальные приемы подчеркивания ссылок.

Создание кнопок. Создание панелей навигации. Вертикальные панели навигации. Горизонтальные панели навигации. CSS-стиль для предварительной загрузки ролловеров.

Обучающий урок 1: стилизация ссылок. Обучающий урок 2: создание панели навигации.

Тема 17. Форматирование таблиц

Создание стилей для таблиц. Добавление отступов. Настройка горизонтального и вертикального выравнивания. Управлением границами таблицы при помощи CSS. Применение стилей к строкам и столбцам.

Обучающий урок: создание стилей для таблиц.

Тема 18.Разметка страницы на основе плавающих элементов

Основы плавающих разметок. Использование плавающих элементов в разметках. Решение проблем плавающих элементов. Создание столбцов на всю высоту. Предотвращение выпадений плавающих элементов. Определение параметров высоты и ширины. Вычисление фактических размеров блочных элементов. Переопределение ширины блока с помощью box-sizing. Задание максимальных и минимальных значений высоты и ширины.

Обучающий урок: многоколоночная разметка. Структурирование HTML. Создание стилей разметки. Макет с двумя колонками. Добавление еще одного столбца. Фиксация ширины. Смешанный свободный и фиксированный дизайн.

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

Типы позиционирования: статическое, абсолютное, относительное, фиксированное. Особенности поведения элементов с разными типами позиционирования

Обучающий урок: Использование позиционирования при создании макета страницы.

Тема 20. Публикация сайта в Интернете

Как зарегистрировать домен. Что такое хостинг. Зачем нужен сертификат безопасности сайта и как его получить. Выгрузка сайта на хостинг..

Понятие поисковой оптимизации (SEO). Поисковая оптимизация on-page. Как выбрать ключевые слова и фразы.

Вернуться в начало раздела

Некоторые примеры работ, выполняемых в ходе изучения курса