ЦЕНТР КОМПЬЮТЕРНОГО ОБУЧЕНИЯ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Форматы изображений для веба: GIF, JPG, PNG, WebP, AVIF, SVG. Сервисы оптимизации изображений для сайта.

Выбор изображений для сайта. Добавление изображений. Обязательные атрибуты для изображений. Высота и ширина изображений. Изображение-гиперссылка. HTML5: иллюстрации и подписи.

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

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

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

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

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

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

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

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

Тема 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. Как выбрать ключевые слова и фразы.

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

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