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

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

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

Как создаются сайты. Использование языка HTML для описания структуры веб-страниц. Версии HTML. Концепция «живого языка» применительно к HTML5.
HTML-элементы. Теги. Атрибуты. Элементы body, head, title. Создание веб-страниц. Структура html-документа. Код в системе управления контентом. Проверка разметки страницы с использованием сервисов W3C.
Понятие кодировки. Кириллические кодировки. Особенности выбора кодировки в современных браузерах.

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

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

Тема 3. Семантическая разметка

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

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

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

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

Форматы изображений для веба: GIF, JPG, PNG, WebP, AVIF, SVG. Сервисы оптимизации изображений для сайта.
Выбор изображений для сайта. Добавление изображений. Обязательные атрибуты для изображений. Высота и ширина изображений. Изображение-гиперссылка. HTML5: иллюстрации и подписи.

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

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

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

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

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

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

Тема 9. Создание каскадных таблиц стилей

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

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

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

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

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

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

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

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

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

Тема 14. Работа с блоками

Понятие блочной модели. Управление размерами блоков. Особенности поведения свойств width и height у блоков разных типов.
Поля и отступы. Сокращенный набор свойств margin и padding. Конфликты полей.
Добавление границ. Сокращенный набор свойства border. Форматирование отдельных границ. Границы в виде рисунка. Создание скругленных углов. Добавление теней блоку. Управление поведением блочных элементов с помощью свойства overflow. Создание плавающих элементов. Отмена правил обтекания.
Стилизация таблиц.

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

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

Тема 16. Стилизация фона

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

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

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

Тема 18. Проектирование макета страницы на основе технологии Flexbox

Знакомство с технологией Flexbox. «Гибкие» контейнеры и «гибкие» элементы. Оси флексового контейнера. Изменение направлений флексовых осей. Распределение «гибких» элементов по основной и перпендикулярной осям. Выравнивание «гибких» элементов внутри контейнера. Управление размерами «гибких» элементов. Увеличение и сжатие «гибких» элементов. Управление порядком «гибких» элементов внутри контейнера.
Многоколоночная верстка на основе «гибких» элементов.

Тема 19. Проектирование макета страницы на основе технологии Grid

Знакомство с технологией Grid. Создание «колонок», «строк» и «областей». Распределение контента в сетке. Добавление «пробелов» между ячейками грида. Управление размерами ячеек в сетке: фиксированный размер, авторазмер, плавающий размер. Выравнивание контента внутри ячеек сетки.
Многоколоночная верстка на основе сеточной технологии.
Сравнение технологий Grid и Flexbox: области применения, «плюсы» и «минусы», особенности поведения.

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

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

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

Регистрация домена. Что такое хостинг. Зачем нужен сертификат безопасности сайта и как его получить. Выгрузка сайта на хостинг.
Понятие поисковой оптимизации (SEO). Поисковая оптимизация on-page. Как выбрать ключевые слова и фразы.

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

Примеры работ

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

Организация занятий

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

Для успешного освоения программы курса необходимо иметь базовые навыки работы на компьютере. Получить необходимые знания можно на нашем курсе Компьютер для работы или самостоятельно.

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

Основная форма обучения взрослых слушателей в нашем Центре — индивидуальные занятия. Такая форма обучения является максимально эффективной: внимание преподавателя сосредоточено только на Вас, и Вы можете проходить программу в комфортном для себя темпе. Продолжительность курса при индивидуальном обучении в среднем составляет ## (1 учебный час равен 45 минутам). Она может оказаться меньше, если у слушателя уже есть подготовка и он может освоить программу курса быстрее, или больше, если слушатель пожелает изучить дополнительные темы сверх программы.

Конкретный график занятий определяется с учетом Ваших пожеланий. Мы рекомендуем 2-3 занятия в неделю по 2 учебных часа. Это позволяет заниматься достаточно интенсивно, но не перегружаться. Продолжительность курса при таком расписании составляет . Однако возможно и другое расписание, всё согласовываем индивидуально.

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

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

Стоимость академического часа при индивидуальном обучении составляет руб., то есть общая стоимость за весь курс (##) получится  руб. Однако Вы не должны оплачивать всю сумму сразу — и это ещё один «плюс» индивидуального обучения. Оплата производится за каждое занятие по факту его проведения, поэтому финансовая нагрузка на Ваш бюджет распределяется равномерно и не оказывается слишком высокой, как при единоразовом платеже.

Если одновременно поступает несколько заявок на курс, мы можем предложить обучение в мини-группе (до 4 человек). Стоимость учебного часа в этом случае будет ниже (будет зависеть от количества людей), а количество часов для прохождения курса увеличится, так как при групповом обучении интенсивность подачи материала снижается. Если Вам интересен формат обучения в мини-группе (например, вместе с друзьями или коллегами), свяжитесь с нами, и мы рассчитаем точную стоимость.

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

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