Основы WEB-разработки: HTML и CSS

Программа повышения квалификации «Основы WEB-разработки: HTML и CSS» предоставляет уникальную возможность вступить на первую ступень мира WEB-технологий и научиться создавать WEB-страницы с использованием HTML и CSS. На этом курсе вы овладеете ключевыми навыками для создания современных WEB-сайтов, научитесь структурировать контент, оформлять страницы, создавать адаптивные макеты и применять практические навыки для создания потрясающего WEB-содержания. Присоединяйтесь к нашему курсу и начните свой путь в увлекательной области WEB-разработки!

Общие сведения​

Объём программы

44 ак. часа (время на просмотр видеолекции и выполнение практических заданий, сдачи тестов и аттестации)

Стоимость обучения

15 260 рублей

Категория слушателей

к освоению программы допускаются лица, имеющие или получающие среднее профессиональное и (или) высшее образование.

Контакты

+7 (499) 317-91-92
+7 (903) 105-90-17
uc@mpt.ru

Запись на обучение

Документ об окончании

При успешном окончании обучения выдаётся удостоверение о повышении квалификации Российского экономического университета им. Г.В. Плеханова

Установка HTML-редактора. Структура HTML-документа, форматирование текстовой информации. Основные рекомендации по оформлению кода

  • Краткий обзор версий HTML;
  • Краткий обзор HTML-редакторов;
  • Установка NotePad++;
  • Семантика языка HTML;
  • DOM (Documet Object Model);
  • HTML-элементы для текста;
  • Основные текстовые составляющие языка HTML: <p>, <pre>;
  • HTML-элементы заголовков секции: <h1>-<h6>;
  • HTLM-элемент <br>;
  • Тег <hr>;
  • Атрибуты<hr>;
  • Основные теги форматирования текста: <strong>, <b>, <em>, <i>, <u>, <s>, <small>, <big>, <sup>, <sub>, <p>, <pre>, <h1>-<h6>;
  • Атрибут Style;
  • Теги форматирования текста;
  • Правила табуляции;
  • Кодировки;
  • Комментарии;
  • Основные настройки NotePad++;
  • Горячие клавиши Notepad++.

    • Ссылки. Работа с изображениями

  • Типы ссылок;
  • Дополнительные параметры атрибута href;
  • Гиперссылки;
  • Ссылки-якори <img>;
  • Атрибут Align;
  • Пути к изображениям;
  • Форматы изображений;
  • Карта-изображение;
  • Пиксельная система координат.

    • Таблицы. Списки

  • Элемент <table>;
  • Объединение ячеек, атрибуты Colspan и Rowspan;
  • Теги группирования таблиц;
  • Атрибуты элемента <table>;
  • Атрибуты элемента <td>;
  • Свойства CSS для работы с таблицами;
  • HTML-списки;
  • Элементы для создания списков;
  • Маркированные списки и их атрибуты;
  • Нумерованные списки и их атрибуты;
  • Списки определений.

    • Слои. Основы CSS

  • Элемент div;
  • Свойства: float, clear, padding, margin, border-radius;
  • Понятие селектор, структура;
  • Правила CSS;
  • Селекторы по элементу;
  • Селекторы по классу;
  • Селекторы по идентификатору;
  • Группы селекторов;
  • Селекторы по атрибутам;
  • Комбинаторы.

    • Свойства для форматирования текста. Псевдоклассы

  • text-transform;
  • white-space;
  • tab-size;
  • word-break;
  • overflow-wrap;
  • text-align;
  • word-spacing;
  • letter-spacing;
  • text-indent;
  • font-family;
  • font-weight;
  • font-stretch;
  • font-style;
  • font-size;
  • @FONT-FACE;
  • Список стандартных псевдоклассов;
  • Динамические псевдоклассы;
  • Структурные псевдоклассы.

    • Метаданные. Элементы управления, работа с формами

  • <title>;
  • <base>;
  • <link>;
  • <meta>;
  • <style>;
  • Теги группы form;
  • <form>;
  • <input>;
  • <textarea>;
  • <button>;
  • <select>;
  • <optgroup>;
  • <datalist>;
  • <fieldset> и <legend>.

    • Обзор блочной модели и позиционирование. CSS Flex. CSS Grid

  • margin;
  • border;
  • padding;
  • position;
  • Основные термины;
  • display;
  • flex-direction;
  • justify-content;
  • align-items;
  • flex-wrap;
  • align-content;
  • order;
  • flex-grow;
  • flex и grid, отличия;
  • display;
  • grid-template-columns и grid-template-rows;
  • grid-column-gap (column-gap) и grid-row-gap (row-gap);
  • grid-gap (Gap);
  • grid-auto-flow;
  • grid-auto-rows и grid-auto-columns;
  • auto-fill и auto-fit;
  • grid-column и grid-row;
  • align-items и justify-items;
  • align-self и justify-self;
  • align-items;
  • flex-basis.

    • Семантическая вёрстка. Медиазапросы CSS. HTML-мультимедиа

  • <article>;
  • <aside>;
  • <footer>;
  • <header>;
  • <nav>;
  • <section>;
  • <main>;
  • viewport;
  • @media;
  • операторы;
  • характеристики;
  • форматы видео;
  • <video>;
  • <audio>.

    • Работа с блоками. CSS Content. Эффекты CSS

  • display: block, inline, inline-block;
  • overflow;
  • writing-mode;
  • z-index;
  • content, :after, :before;
  • cursor;
  • transform;
  • transition;
  • :focus;
  • tabindex;
  • pointer-events;
  • box-shadow;
  • text-shadow;
  • filter;
  • gradient.

    • Примечание

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

    Узнать больше

    Шимбирёв Андрей Андреевич

    Подробнее

    По результатам обучения можно получить:

    Глубокое понимание основ HTML и CSS для создания и структурирования WEB-страниц.

    Полное владение созданием и форматированием текстовой информации с использованием HTML-элементов.

    Уверенное использование заголовков секций, разрывов строк, горизонтальных линий и других элементов для лучшего оформления контента.

    Навыки работы с ссылками, включая гиперссылки и изображения, а также понимание различных типов ссылок.

    Умение создавать таблицы с объединенными ячейками и применять CSS для настройки их стиля.

    Знание основных концепций блочной модели и позиционирования элементов с использованием CSS.

    Понимание принципов селекторов и структуры правил CSS для стилизации WEB-страниц.

    Владение свойствами форматирования текста и использование псевдоклассов для создания интересных эффектов.

    Работа с метаданными документа, включая установку заголовка, стилей, мета-тегов и мультимедийных элементов.

    Применение семантической вёрстки для создания структурированного и семантически осмысленного контента.

    Понимание медиазапросов CSS для создания адаптивного дизайна в зависимости от разрешения экрана.

    Освоение основных свойств CSS Flex и CSS Grid для упрощения расположения элементов на WEB-странице.

    Создание и стилизация множественных форм, включая ввод текста, кнопки, список выбора и другие элементы управления.

    Разработка WEB-страниц с использованием блоков, управление контентом и применение эффектов средствами CSS.

    Применение трансформаций, переходов и теней для создания интересных визуальных эффектов.

    Готовность к разработке WEB-приложений, способных адаптироваться под различные устройства и экраны.

    Освоение передовых инструментов и методов работы с CSS для создания современных и интерактивных WEB-страниц.

    Этот курс позволит вам приобрести необходимые знания и навыки для успешной работы в области WEB-разработки с использованием HTML и CSS, и уверенно создавать стильные и функциональные WEB-страницы.

    Преимущества программы:

    Гибкое обучение без ограничений по месту и времени благодаря дистанционному формату.

    Наглядные видео лекции, которые обеспечивают понимание сложных тем и примеры из реальной практики.

    Опытные преподаватели всегда готовы помочь вам преодолеть тупики и ответить на вопросы.

    Разнообразные практические задания, способствующие закреплению полученных знаний на практике.

    Получение удостоверения об успешном окончании курса, подтверждающего ваши компетенции в области создания WEB-страниц.

    Мы вас ждём

    Присоединяйтесь к программе "Основы WEB-разработки: HTML и CSS​​​" и овладейте навыками, востребованными на современном рынке труда. Начните свой путь к экспертизе в области разработки уже сегодня!