Курс охватывает основы создания и оформления веб-страниц с помощью HTML и CSS, включая семантическую разметку, стилизацию, работу с мультимедиа и адаптивным дизайном. Слушатели изучат структуру HTML-документов, блочную модель, CSS-анимации, формы и навигационные меню. Особое внимание уделяется верстке галерей, таблиц, слайдеров, а также векторной графике (SVG). В завершение рассматриваются фиксированные и отзывчивые макеты, инструменты для верстки.
Знания и умения, полученные в результате изучения
В результате освоения программы обучающийся должен уметь:
• создавать семантически правильную html-разметку;
• использовать основные свойства оформления html-элементов с помощью CSS;
• использовать растровые и векторные изображения;
• включать медиа-контент (аудио-, видеоролики) на страницу;
• создавать css-анимацию;
• разрабатывать шаблонные и контентные блоки веб-страниц;
• создавать веб-страницы, реализующие макеты фиксированного и отзывчивого дизайна.
В результате освоения программы, обучающийся должен знать:
• основные стандарты по созданию html- и css-кода;
• html-элементы, необходимые для размещения контента;
• базовые свойства CSS для расположения основных блоков макета;
• CSS-свойства для реализации визуальных эффектов.
В результате освоения программы обучающийся должен приобрести практический опыт:
• настройки редактора кода для организации эффективной работы;
• создания блоков веб-макета;
• использования сервисов генерации css-кода, подбора и внедрения шрифтов и графических элементов;
• отладки html-, css-кода с помощью браузерных инструментов.
Тема 1. HTML - технология создания содержимого веб-страниц
ПО и сервисы для верстки
Структура html-документа
Семантическая разметка текста
Тема 2. Адресация в Интернет. Гиперссылки
Основные понятия Клиент-Сервер. Хостинг. Домен
Адресация документов
Гиперссылки. Состояния элементов
Внедрение изображений на веб-страницу
Тема 3. CSS - технология оформления содержимого веб-страниц
Подключение CSS
Селекторы CSS. Наследование. Каскадность. Специфичность
СSS-свойства оформления текста
Подключение шрифтов
Тема 4. Блочная модель элемента
Типы html-элементов. Свойство display
СSS-свойства оформления блочного элемента
Свойство box-sizing
СSS-свойства фона: цвет, градиенты, изображения
Тема 5. Таблицы и списки
Основные структурные элементы
Оформление таблиц с помощью CSS
СSS-свойства оформления списков
Псевдоэлементы
Тема 6. Создание галерей изображений
Верстка на основе float-позиционирования
Использование inline-block
Визуальные эффекты: clip-path, box-shadow, border-radius
Свойство transform
Свойство transition
Тема 7. Создание меню навигации
Плоская навигация
Свойство position
Выпадающее меню навигации
Тема 8. Формы
html-элементы форм
Состояния элементов
Верстка форм
Тема 9. Свойство animation. Слайдер
Параметры css-анимации
Примеры анимации
Верстка слайдера
Тема 10. Мультимедиа. Векторные изображения
Теги audio, video
Использование SVG-файлов
Иконочные шрифты
Тема 11. Макет фиксированного дизайна
Сетки фиксированного дизайна
Верстка колонок
Стили блоков
Тема 12. Макет "отзывчивого" дизайна
Управление шириной области отображения контента
Верстка с учетом требований юзабилити
Полезные сервисы для верстки
Тема 13. Экзамен