Урок 1. Общий механизм работы сайтов и суть языка HTML (07:38) Этапы отображения любого сайта; Что такое HTML; Для чего используется HTML; Что такое HTML-тэги, и в чем их смысл; Как браузер анализирует код страницы и выводит веб-страницу на экран; Почему не следует использовать HTML для визуального оформления веб-страницы.
Урок 2. Структура HTML-документа и первая страница (18:55) Какую программу вы можете использовать для написания кода; Какие элементы обязательно должны присутствовать в любом HTML-документе; Что такое парные и непарные тэги; Как быть с некорректным отображением кириллических символов; Как задать кодировку для веб-страницы и для самого HTML-файла; Что такое META-тэги и какие из них наиболее важные; Что такое тип документа, и зачем он нужен.
Урок 3. Особенности работы базовых тэгов и правило вложенности (11:16) Использование тэгов параграфа и переноса строки; Выделение частей текста жирным начертанием и курсивом; Понятие вложенности тэгов; Надстрочный и подстрочный индексы.
Урок 4. Комментарии, строчные и блочные элементы. Плагин Firebug (15:21) Как посмотреть исходный код любой страницы сайта; Для чего нужны комментарии, и как их использовать; Какой тэг нужно использовать для отображения текста на странице "как есть"; Тэги span и div; Отличие строчных элементов от блочных; Плагин Firebug для просмотра структуры web-страницы.
Урок 5. Изучаем спецсимволы, списки и таблицы (14:56) Что такое спецсимволы, и для чего их использовать; Что такое мнемоники, и для чего они созданы; Создание списков; Работа с таблицами, объединение строк и ячеек.
Урок 6. Ссылки, url-адреса и понятие атрибута (13:59) Что такое атрибуты и зачем они нужны; Обязательные и необязательные атрибуты; Создание гипертекстовых ссылок. Открытие ссылки в новой вкладке; Ссылка на определенное место в документе; Виды URL-адресов. Отличие абсолютного адреса от относительного.
Урок 7. Работа с изображениями. Навигационная карта (12:47) Как вставить изображение на страницу; Обязательные и необязательные атрибуты для тэга img; Как указать размеры для изображения; Как сделать часть изображения ссылкой.
Урок 8. CSS. Введение: селекторы типа и селекторы класса (18:03) Что такое таблицы стилей, и для чего они применяются; В чем преимущества использования CSS перед стандартными HTML-средствами форматирования; Использование селекторов класса и типа; Разбор структуры CSS-правила (пара "свойство: значение"); Как применить стиль к определенному элементу на странице; Задание нескольких значений для одного CSS-свойства; Задание одного стиля для нескольких элементов разных типов.
Урок 9. Селекторы ID и селекторы потомков. Основные CSS-правила (21:05) Для чего используются селекторы идентификатора; Первичное позиционирование контента страницы с помощью свойства margin; Как избавиться от лишних отступов, которые автоматически создает браузер; Что такое селекторы потомка, и в чем смысл их использования.
Урок 10. Псевдоэлементы. Типы подключения CSS-стилей к документу (16:28) Понятие псевдоэлемента и примеры их использования; Встроенный тип подключения CSS-стилей; Внутреннее подключение стилей; Вынос CSS-стилей в отдельный файл (внешнее подключение); В чем плюсы внешнего подключения файла стилей.
Урок 11. Создаем основу для простого двухколоночного CSS-макета (16:48) Создаем базовую структуру (HTML-разметку) для будущей страницы; Наполняем структуру контентом; "Раскрашиваем" блоки на странице в разные цвета для удобства работы; Избавляемся от "просветов" между блоками, используя технику обнуления отступов.
Урок 12. Дорабатываем двухколоночный CSS-макет (12:46) Как отцентровать содержимое страницы; Используем свойство float для позиционирования блоков на странице; Как избежать "наползания" одного блока не другой.
Урок 13. Создаем 3-колоночный макет на основе 2-колоночного (10:55) Заканчиваем с двухколоночным макетом; Дорабатываем внешний вид, используя внешние и внутренние отступы; Разбиваем блок контента на 2 части, формируя 3-колоночный макет из 2-х колоночного; Экспериментально подбираем ширину для колонок макета.
Урок 14. Для завершенности вносим в макет элементы дизайна (17:40) Создаем графическую "шапку" для сайта; Задаем картинку как фоновый рисунок для шапки страницы; Задаем окантовки для блоков на странице с помощью свойства border; Меняем фоновые цвета для различных элементов страницы; Учимся скруглять прямоугольные границы блоков.
Урок по основам работы с Notepad++ (09:16)
Скачиваем и устанавливаем программу; Создание и сохранение документа; Выбор типа файла при его сохранении; Как менять кодировку файла; Как сделать подсветку синтаксиса любого языка; Как сворачивать и разворачивать блоки кода.
