После окончания курса Вы будете уметь:
По окончании курса Вы будете уметь:
- создавать web-страницы, содержащие все необходимые
- компоненты: текстовое наполнение,
- гиперссылки, графическое наполнение;
- самостоятельно создавать полноценный сайт путем определения иерархии взаимодействия web-страниц между собой;
- грамотно разрабатывать интерактивные формы для взаимодействия пользователя с web-сервером;
- эффективно использовать возможности каскадных таблиц стилей CSS для повышения функциональности и улучшения оформления web-сайта;
- использовать технологию фреймов;
- узнаете о новых возможностях HTML 5 и CSS 3;
Предварительная подготовка:
Успешное окончание курса Базовая компьютерная подготовка. Windows и Интернет для начинающих или эквивалентная подготовка.
Модуль 1. Введение в HTML
- Узнаем, что такое HyperText Markup Language и что он определяет.
- Обсудим основные понятия Всемирной паутины: веб-страница, веб-сервер.
- Узнаем, где найти перечень всех HTML-элементов и научимся добавлять разметку в обычный текст.
- Узнаем, что такое атрибуты, и зададим их некоторым HTML-элементам на странице.
- Вставим на страницу символы авторского права и торговой марки, узнаем о том, какие специальные символы ещё существуют. Синтаксис и семантика HTML-элементов
- Лабораторная работа по созданию сайта по теме занятия
Модуль 2. Структура страницы
- Разберёмся, когда используются элементы форматирования текста, а когда структурные элементы.Разметим страницу index.html своего сайта и проверим работу на валидаторе.
- Проведём работу над ошибками, найденными на своей странице.
- Лабораторная работа по созданию сайта по теме занятия
Модуль 3. Создание гиперссылок и работа с ними
- Вспомним понятие гиперссылки и научимся вставлять элементы гиперссылок на своих HTML-страницах.
- Поговорим о различиях записи гиперссылок и научимся вставлять необходимые атрибуты (узнаем, как открывать результат в новом окне).
- На лабораторной работе создадим разметку для меню сайта.
Модуль 4. Основы каскадных таблиц стилей CSS
- Узнаем варианты задания стилей на странице.
- На лабораторной работе подключим стилевой файл для оформления страницы.
- Обсудим базовые понятия: селектор, свойство, каскад, наследование, единицы измерения.
- Научимся писать самые распространённые виды селекторов, включая селекторы псевдоклассов и псевдоэлементов.
- Изменим оформление наших страниц: поменяем цвет фона страницы и её текст, подберём шрифт и зададим оформление отдельным частям текста.
- Лабораторная работа по созданию сайта по теме занятия
Модуль 5. Размещение изображений, списков и таблиц
- Научимся размещать на своих страницах медиафайлы - изображения.
- Рассмотрим неупорядоченный и упорядоченный списки и обновим при их помощи меню своих страниц.
- Посмотрим, как создавать таблицы и объединять в них ячейки.
- Познакомимся с CSS-свойствами, которые помогут оформить изученные HTML-элементы.
- Лабораторная работа по созданию сайта по теме занятия
Модуль 6. Iframe
- Научимся встраивать внешние файлы в страницу.
- Поговорим о том, куда могут быть встроены наши страницы при помощи HTML-элемента (iframe).
- Рассмотрим взаимодействие ссылок с iframe-элементами.
- Лабораторная работа по созданию сайта по теме занятия
Модуль 7. Формы для сбора данных
- Узнаем, для чего предназначаются и из чего состоят формы на веб-страницах.
- Рассмотрим большинство HTML-элементов формы: текстовые поля, радио-кнопки, флажки/чекбоксы, элемент выбора select и их атрибуты.
- Создадим на своей странице форму обратной связи и обсудим, как выполнить её обработку.
- Лабораторная работа по созданию сайта по теме занятия
Модуль 8. Макетирование страницы с CSS
- Научимся изменять оформление границ, внутренних и внешних отступов HTML-элементов (все варианты записей свойств, а их много).
- Узнаем, как задать ширину и высоту элементам.
- Затронем свойство float и заставим нужные элементы плавать.
- Научимся управлять видимостью HTML-элемента.
- Рассмотрим и применим отдельные значения свойства display для размещения элементов в более сложные макеты, в том числе inline-block и table-cell.
- Лабораторная работа по созданию сайта по теме занятия
Модуль 9. Таблицы стилей для печати и оформления мобильной версии сайта - media
- Создадим и подключим стили для оформления нашей страницы при печати, поговорим о других применениях @media.
- Поговорим о процессе создания мобильной версии сайта и напишем медийные запросы (@media queries) для своих страниц.
- Узнаем о существовании других медиа свойств (media feature).
- Лабораторная работа по созданию сайта по теме занятия
Модуль 10. Подготовка, размещение и поддержка сайта в сети
- Узнаете, зачем и как можно использовать элемент meta для размещения мета-информации на страницах.
- Посмотрим, как выбрать хостера, хостинг и разместить сайт в сеть при помощи FTP-клиента.
- Услышим, как упростить процесс размещения сайта в сеть.
- Лабораторная работа по созданию сайта по теме занятия
Модуль 11. Гибкая работа со страницами сайта
- Узнаем, как размещать на своих страницах звуковые и видео-файлы.
- Обсудим понятие микроразметки и проверки её валидности.
- Затронем тему генерации содержимого сайта на лету на сервере.
- Поговорим о динамической работе с HTML-элементами и CSS-свойствами на странице в браузере.
- Определим, нужен ли для вашего проекта HTML5 API
