Основные понятия HTML. Представление о структуре HTML-документа.
Продолжительность: 18 минут 35 секунд

В этом видеоуроке рассказывается что такое HTML, где используется этот язык, рассказывается о вебсайтах и программах для отображения html-кодов - браузерах. Наглядно показано как браузер преобразует html код, для предоставления материалов в удобном для чтения виде.

Подобно разбирается и дается под запись структура html-страницы.

Основные элементы, теги и атрибуты языка html.
Продолжительность: 16 минут 34 секунды

Демонстрируем пример и разбираем его тем самым повторяем материал с предыдущего урока и подводим к изучению нового материла. Повторяем и обобщаем понятие атрибута тега и его значение. Создаем html страницу. Вставляем отформатированный текст между тегами body и видим как происходит отображение html страницы. Показываем, что браузер игнорирует лишние пробелы и переходы на новые строки. Он руководствуется тегами в которые мы заключаем текст и демонстрируем это. Рассматриваем тег принудительного переноса br . Говорим о тегах заголовков и рассматриваем тег h1. Рассматриваем тег горизонтальной линии hr и показываем, где это можно применить. Тег title и его значение. Подводим итог и говорим что с помощью тегов мы указали браузеру как нужно отображать страницу. Предлагаем переписать в тетрадь основные теги, и их значение.

Работа со списками.
Продолжительность: 15 минут 20 секунд

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

Работа с текстом.
Продолжительность: 18 минут 8 секунд

Повторение и актуализация знаний. Рассматриваем теги strong, em на конкретных примерах. Рассказываем про тег font и говорим почему его не рекомендуется использовать при форматировании текста. Рассматриваем пример форматирования текста с использованием стиля. Рассказываем в общем плане что такое СSS стили. В примере рассматриваем основные атрибута предназначенные для работы с текстом. Предлагаем переписать изученные теги и их атрибуты.

Работа с изображениями и логическими тэгами.
Продолжительность: 21 минута 26 секунд

Повторение и актуализация знаний. Краткий но обязательный разговор о структуре сайта. Учимся вставлять картинку. Подробно на примерах разбираем как правильно прописывать источник в html коде. Рассказываем о теге div и его применении. Используя тег ыdiv, покажем, как можем выровнять картинку по центру. Рассматриваем дополнительные атрибуты тега

Гиперссылки.
Продолжительность: 17 минут 51 секунда

Повторяем основные элементы синтаксиса html. Разбираем пример создания гиперссылки и поясняем, что это такое. На основании этого объясняем синтаксис написания гиперссылок. Связываем гиперссылками несколько страниц. Объясняем, что такое относительная гиперссылка, а что такое абсолютная. Именованный якорь для переходов внутри страницы или в конкретную часть какой либо страницы. Ссылка mailto.

Таблицы.
Продолжительность: 20 минут 16 секунд

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

Навигация. Разработка своего сайта и его сохранение.
Продолжительность: 21 минута 57 секунд

Создаем базовую страницу (простой табличный дизайн — поле для навигации и поле для содержания, для красоты предложим вставить подготовленную шапку сайта) и заполняем её подготовленным текстом (содержанием). Используем не только текст, но и рисунки. Сохраняем базовую страницу под новым именем (именем другой строки). Изменяем в ней содержание и другие необходимые элементы сохраняем. Связываем с главной страницей. Повторяем эти действия для необходимого количества страниц. Обобщаем изученное и, демонстрируя, говорим о том, что мы создали удобную навигацию по сайту.

Дорбатываем дизайн сайта. Демонстрация работы с CSS стилями.
Продолжительность: 18 минут 46 секунд

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

Практическая работа. Разработка сайта.
Практичекая работа

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

Доработка и демонстрация сайтов.
Практичекая работа

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

Публикация сайта в интернете. Доменное имя и хостинг
Продолжительность: 8 минут 48 секунд

Подробно разбираем, что такое доменное имя и хостинг. Рассказываем о публикации сайта в Интернете. Рассказываем, что такое ftp. Показываем, как публикуется сайт в интернете.