1. Знакомство с HTML:
- клиент-серверная модель (архитектура);
- выбор среды для дальнейшей работы;
- знакомство с панелью отладки Google;
- принцип работы веба, составляющие интернет-страницы;
- ознакомление с понятиями HTML - тег, атрибут, парные и одиночные теги, правило вложенности тэгов
- стандартные теги интернет-страницы;
- теги для вывода текстового контента - заголовки, абзацы;
- теги для декорирования текста;
- списки в HTML.
Практика: создание HTML-страницы с нуля. Добавление основных текстовых элементов и их декорирование.
2. HTML-теги, продолжение:
- добавление ссылок на страницу;
- относительний и абсолютный адрес;
- вывода изображения на страницу - форматы изображений, атрибуты для работы с изображениями;
- таблицы в HTML;
- объединение ячеек таблицы по строкам и по столбцам.
Практика: добавление на страницу ссылок на ресурсы из сети Интернет и на локальные файлы компьютера. Загрузка изображений на страницу. Работа с несложными таблицами, создание комбинации ячеек внутри таблицы.
3. Формы:
- добавления формы на страницу;
- атрибуты формы;
- теги для ввода информации в форме;
- типы тегов input;
- кнопки в формах.
Практика: реализовать форму регистрации на сайте, используя максимальное количество полей.
4. Каскадные таблицы стилей CSS:
- знакомство с CSS;
- преимущества использования CSS;
- виды стилей;
- понятие селектора;
- изменение вида элементов с помощью базовых селекторов.
Практика: создания HTML-структуры с добавлением декоративных свойств с помощью CSS.
5. Блочная модель, типы элементов:
- изучение свойств блочной модели;
- особенности использования блочных свойств;
- базовые типы элементов;
- свойства элементов в зависимости от их типа;
- реакция элементов на действие над ними.
Практика: реализация меню страницы.
6. Расположение элементов:
- плавающие элементы;
- особенности использования плавающих элементов;
- позиционирования элементов на странице;
- виды позиционирования;
- особенности спозиционованих элементов.
Практика: создание примитивной страницы и изменение положения элементов на ней с помощью изученных свойств.
7. Практическая работа:
- выбор макета для разработки;
- разбор макета по структурным элементам;
- построение HTML-кода, в соответствии со структурой полученного макета;
- основы работы с Photoshop.
Практика: построение верхних блоков в HTML в соответствии с заданным макетом.
8. Воплощение индивидуального дизайна:
- добавление стилей для первого блока;
- экспорт изображений с Photoshop;
- добавление фоновых изображений;
- основные свойства для работы с фоном;
- реализация главного меню, в соответствии со стилями, полученными из Photoshop.
Практика: написание стилей для шапки сайта.
9. Продолжение работы со стилями:
- различные способы поставить элементы в строку;
- реализация списка с помощью CSS;
- работа с шрифтами - подключение и использование;
- особые свойства шрифтов.
Практика: подключения шрифтов к сайту, реализация списка на CSS.
10. Построение блоков с позиционированием, селекторы:
- анализ макета на наличие спозиционированных элементов;
- выбор правильного позиционирования;
- сложные селекторы - принципы их построения и особенности использования.
Практика: построение блоков, которые позиционируются в макете. Создание и использование сложных селекторов.
