Курс «Создание web-сайтов на HTML»

Лекции проводится с 26 марта до 30 апреля 2013 года еженедельно по вторникам в 13.00. Длительность занятия – 1,5 часа

Список лекций представлен ниже. После каждой лекции будет выложена ее видеозапись.

Лекция 1. Работа с виртуальной лабораторией WebLab. Основы языка HTML. Структура web-страницы. Размещение и оформление текста: шрифт, абзацы, заголовки 

1. Виртуальная лаборатория WebLab, ее назначение, структура заданий и интерфейс. 
2. Проведение виртуальных экспериментов по HTML в виртуальной лаборатории WebLab. 
3. Основная терминология, принятая в среде веб-разработчиков (веб-страница, веб-сайт, сервер). 
4. Язык HTML, его назначение и структура команд (тэгов). 
5. Структура html-кода веб-страницы. 
6. Понятия «тэг», «контейнер», «параметр», «значение параметра». Синтаксис записи конструкций кода HTML. 
7. Принципы размещения текста на веб-странице. HTML-разметка как «вкрапление» тэгов в отображаемый браузером текст. 
8. HTML-тэги шрифтового форматирования (управление начертанием, видом и размером шрифта). 
9. HTML-тэги абзацного форматирования (новый абзац, разрыв строки, параметры выравнивания абзаца). 
10. HTML-тэги для создания заголовков различного уровня соподчиненности. 

Запись видеолекции

Лекция 2. Создание таблиц

1. Принципы конструирования таблиц в HTML (таблица как набор вложенных контейнеров строк с вложенными контейнерами ячеек). 
2. HTML-тэги для создания таблицы, ее строк и ячеек. 
3. Параметры табличных HTML-тэгов (ширина таблицы и ее ячеек, вид границы ячеек, цвет фона). 
4. Объединение ячеек таблицы. 

Запись видеолекции

Лекция 3. Вставка иллюстраций. Совместная верстка иллюстраций с текстом

1. Принципы размещения на веб-странице нетекстовых элементов. Добавление на веб-страницу статичных иллюстраций. 
2. Допустимые форматы компьютерной графики для размещения на веб-страницах. 
3. Тэг <IMG> и его параметры (исходный графический файл, ширина, высота, рамка вокруг рисунка). 
4. Размещение рисунка в отдельном абзаце. 
5. Размещение рисунка с оборкой (обтеканием) текстом. 
6. Размещение небольших рисунков в тексте. 
7. Размещение рисунков и текста на веб-странице при помощи таблиц. 

Запись видеолекции

Лекция 4. Гиперссылки

1. Понятие о гипертексте и гипермедиа. Смысл гиперссылок. Нелинейная структура гипертекстовых документов и веб-сайтов. 
2. Тэг <A> и его параметры. 
3. Создание гиперссылок на другой HTML-документ того же или другого сайта. Принципы записи абсолютной и относительной ссылки. Запись URL в ссылке.  
4. Создание гиперссылок для отправки электронной почты. 
5. Создание гиперссылок для загрузки файлов с веб-страницы. 
6. Создание «закладок» в HTML-документе. Создание ссылки на конкретную «закладку». 
7. Карта ImageMap как графическая иллюстрация с выделенными на ней зонами, играющими роль гиперссылок. Создание карты ImageMap. 

Запись видеолекции

Лекция 5. Размещение цифрового звука и видео

1. Принципы размещения на веб-странице медиаобъектов. Сходство и различие с размещением статических иллюстраций. 
2. Добавление фонового звука (тэг <BGSOUND> и его параметры – воспроизводимый звуковой файл, число повторений воспроизведения). Допустимые для веб-страницы аудиоформаты. 
3. Размещение на веб-странице звуковых и видеообъектов при помощи тэгов <EMBED> и <IMG>. Параметры этих тэгов (управление показом медиапанели, размерами кадра, запуском воспроизведения, числом повторений и т.д.). 
4. Размещение на веб-странице flash-анимаций. Типовая структура HTML-тэгов для размещения flash-анимации и управления ее воспроизведением. 

Запись видеолекции

Лекция 6. Фреймовая структура

1. Понятие фреймов как обособленных участков рабочего окна браузера. 
2. HTML-конструкции для создания фреймов (деление на фреймы по вертикали, по горизонтали, сложное деление на фреймы).  
3. Параметры фреймов (имя, размеры по высоте и ширине, вид линии границы, возможность изменения размеров фреймов, вывод линеек прокрутки и т.д.). 
4. Загрузка веб-страниц во фреймы. Изначальная загрузка веб-страницы во фрейм. Загрузка веб-страницы во фрейм по гиперссылке. Указание в ссылке целевого имени фрейма. Специальные целевые имена.  
5. Плавающие фреймы. Тэг <IFRAME> и его параметры. Загрузка веб-страниц в плавающий фрейм (изначальная и по гиперссылке). 

Запись видеолекции