Введение в веб-разработку и создание сайтов. Курс

Курс "Введение в веб-разработку и создание сайтов" знакомит с двумя первоочередными составляющими веб-программирования – языками HTML и CSS. Также рассматриваются вопросы публикации сайта в сети Интернет.

Цель курса для слушателя: получить представление о том, что лежит в основе сайтостроения, научиться создавать простые сайты с нуля и размещать их во Всемирной паутине.

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

Текущая версия курса: июль 2025 г.

Впервые опубликован: сентябрь 2022 г.

Содержание курса

  1. HTML и CSS в веб-разработке
    Веб-разработка - это создание сайтов. Клиентская часть пишется на языках HTML, CSS, JavaScript. HTML отвечает за структурную разметку страницы, CSS - за оформление, представление, дизайн.

  2. Основные элементы HTML веб-страницы
    Как правильно разметить веб-страницу на языке HTML5. Заголовок и тело документа, основные теги HTML. Структура элемента HTML: тег, атрибут, значение.

  3. Основные свойства CSS
    В уроке рассматриваются следующие свойства CSS: background, color, font-size, font-family, text-align, display, width, max-width, margin, padding. Центрирование блока с помощью margin со значением auto.

  4. Классы и идентификаторы в HTML и CSS
    Классы и идентификаторы позволяют избирательно и индивидуально оформлять с помощью CSS элементы страницы HTML. В уроке рассматриваются особенности использования классов и идентификаторов, специфичность в CSS.

  5. Псевдоклассы в CSS. Оформление ссылок
    В CSS селекторы с псевдоклассами используются для изменения свойств элементов в определенном состоянии. В уроке рассматриваются псевдоклассы ссылок и особенности их оформления.

  6. Пиксели в CSS и относительные единицы измерения
    В уроке рассматриваются px, em, %. Почему пиксель (px) в CSS является условно абсолютной единицей измерения, em - относительной? В каких случаях лучше использовать px, в каких - em, rem, %.

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

  8. Mobile First дизайн сайта
    Пример процесса разработки Mobile First (сначала мобильные) макета для сайта. Адаптивный дизайн, контрольные точки и @media-запросы.

  9. Особенности использования CSS-фреймворков
    Каковы преимущества и недостатки css-фреймворков при разработке шаблонов сайтов. Пример верстки макета веб-страницы с использованием css-библиотеки W3.CSS.

  10. Размеры и позиционирование изображений на веб-страницах
    Изменение размеров изображений под разные экраны с помощью свойства CSS max-width и атрибутов width и height. Размещение картинки по центру, слева и справа от текста.

  11. Css-стили изображений сайта
    Как разработать стили изображений для сайта (для тега img). Варианты центрирования через обрамляющий контейнер и путем превращения img в блочный элемент c правилом margin: auto. Правила для иных картинок - логотипов и др.

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

  13. Веб-сервер XAMPP. Запуск сайта на локальном компьютере
    Для полноценной разработки сайта (без фреймворка) на локальном компьютере устанавливают XAMPP. Данная сборка веб-сервера хорошо подходит для сайтов, использующих include языка PHP в коде страниц. Описан способ конфигурации файлов XAMPP под локальный домен и каталог сайта.

  14. Размещение сайта в Интернет. Домен и хостинг
    Выбор доменного имени. Описание размещения сайта в сети Интернет. Покупка домена и хостинга, выпуск бесплатного SSL-сертификата, загрузка сайта на хостинг.

  15. Внутренние ссылки сайта. Абсолютная и относительная адресация
    Как создается перелинковка страниц внутри сайта. Относительная и абсолютная адресация в ссылках, тегах img. Преимущества и недостатки каждой.

  16. Продвижение сайта
    Что необходимо, чтобы новый сайт появился в поисковых системах Яндекса и Google. Индексация, поисковый бот, поисковый запрос. Что важно для выведения страниц сайта в топ выдачи поисковых систем.

  17. Монетизация информационных (контентных) сайтов
    Размещение рекламных блоков как способ заработка на информационных (контентных) сайтах. Особенности, преимущества. Другие способы монетизации.