Основы Web-дизайна. Язык HTML 2014

Правительство Российской Федерации
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
"Национальный исследовательский университет
"Высшая школа экономики"
Общеуниверситетский факультатив
Программа дисциплины
Основы Web-дизайна. Язык HTML
Автор программы:
Гасанов Э.В., канд. техн. наук, доцент, egasanov@hse.ru
Одобрена на заседании кафедры Архитектуры программных систем «___»____________ 20 г
Зав. кафедрой С.В. Назаров
Рекомендована секцией УМС Бизнес-информатика «___»____________ 20 г
Председатель Ю.В. Таратухина
Утверждена Первым проректором НИУ ВШЭ «___»_____________20 г.
Первый проректор Радаев В.В. ________________________
Москва, 2014
Настоящая программа не может быть использована другими подразделениями университета и другими вузами без разрешения кафедры-разработчика программы.
Национальный исследовательский университет «Высшая школа экономики»
Программа дисциплины «Основы Web-дизайна. Язык HTML»
1
Область применения и нормативные ссылки
Настоящая программа учебной дисциплины устанавливает минимальные требования к
знаниям и умениям студента и определяет содержание и виды учебных занятий и отчетности.
Программа предназначена для преподавателей, ведущих данную дисциплину, учебных
ассистентов и студентов всех специальностей, обучающихся по магистерской программе всех
специализаций.
2
Цели освоения дисциплины
Целями освоения дисциплины «Основы Web-дизайна. Язык HTML» являются:
- получение слушателями теоретических знаний по использованию языка HTML;
- получение практических навыков разработки статических Web-страниц.
3
Компетенции обучающегося, формируемые в результате освоения дисциплины
В результате освоения дисциплины студент должен:
 Знать основы функционирования Internet, языка гипертекстовой разметки HTML;
 Уметь создавать Web-страницы с использованием языка HTML, разрабатывать
структуру Web-сайта, систему навигации Web-сайта, подготовки иллюстраций для
Web, публикации Web-сайта в Internet;
 Иметь навыки разработки Web-страниц с использованием языка HTML, структуры
Web-сайта, системы навигации Web-сайта, подготовки иллюстраций для Web, публикации Web-сайта в Internet.
4
Место дисциплины в структуре образовательной программы
Настоящая дисциплина представляет собой общеуниверситетский факультатив.
5
Тематический план учебной дисциплины
№
Название раздела
Всего
часов
Аудиторные часы
Лекции
Практические занятия
Самостоятельная
работа
1
Основы Internet.
8
2
2
4
2
Основные понятия языка разметки гипертекста (HTML).
Форматирование текста (шрифтовое
оформление).
Разметка структуры HTML-документа.
Графические элементы в документах
HTML.
Создание гиперссылок. Разработка Webсайта.
Разметка таблиц.
8
2
2
4
8
2
2
4
8
8
2
2
2
2
4
4
8
2
2
4
8
2
2
4
3
4
5
6
7
2
Национальный исследовательский университет «Высшая школа экономики»
Программа дисциплины «Основы Web-дизайна. Язык HTML»
8
9
10
11
6
Использование таблиц для создания системы навигации сайта.
Фреймы.
8
2
2
4
6
1
1
4
Использование фреймов для создания системы навигации сайта.
Подготовка изображений для Web. Создание фотогалереи.
ИТОГО
6
1
1
4
8
2
2
4
84
20
20
44
Формы контроля знаний студентов
Тип кон- Форма контроля
троля
Домашнее
задание
ИтогоЗачет
вый
6.1
7
1
1 год
2 3
6
7
Параметры
4
Web-сайт
Практическая работа
продолжительностью 60
минут. Оценка результатов работы в течение 3-х
рабочих дней.
Критерии оценки знаний, навыков
Оценки по всем формам текущего контроля выставляются по 10-ти балльной шкале.
Содержание дисциплины
Тема 1. Основы Internet.
Компьютерные сети, Internet. Структура Internet. Web-сервер. Web-сайт.
Адресация в Internet. Система доменных имен. Регистрация имен доменов. Унифицированный
идентификатор ресурсов.
Соединение с Internet. Программное обеспечение для доступа к информационным ресурсам
(Web-браузер). Технологии создания Web-документов.
Регистрация бесплатного доменного имени. Загрузка файлов на бесплатный Web-сервер.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.6 - 15.
Тема 2. Основные понятия языка разметки гипертекста (HTML).
Основные сведения о языке HTML. Элементы HTML. Структура HTML-документа.
Создание HTML-документа. Атрибуты. Парные теги. Одинарные теги (пустые элементы).
Комментарии. Специальные символы.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.16 - 31.
Тема 3. Форматирование текста (шрифтовое оформление).
3
Национальный исследовательский университет «Высшая школа экономики»
Программа дисциплины «Основы Web-дизайна. Язык HTML»
Элементы форматирования текста. Шрифтовое оформление. Категории (группы) шрифтов. Основные элементы, определяющие стиль шрифта. Элементы управления шрифтами. Цвета в
Web.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.32 - 46.
Тема 4. Разметка структуры HTML-документа.
Элемент заголовок. Выравнивание заголовков. Абзацы. Списки.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.47 - 60.
Тема 5. Графические элементы в документах HTML.
Включение изображения в документ HTML. Атрибут alt. Атрибуты width и height.
Выравнивание изображений по горизонтали. Центрирование изображений.
Выравнивание изображений по вертикали. Обтекание изображений текстом.
Отмена обтекания изображений текстом. Создание полей вокруг изображения.
Использование горизонтальных линий. Создание фона документа.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.61 - 81.
Тема 6. Создание гиперссылок. Разработка Web-сайта.
Основы гипертекста. Унифицированный указатель ресурсов. Схемы, используемые для доступа
к ресурсам. Абсолютные и относительные URL. Создание гиперссылок.
Текстовые и графические гиперссылки. Цвет и границы ссылок. Примеры гиперссылок с относительными URL. Гиперссылки в пределах одного документа. Карты ссылок.
Карты ссылок: элемент area. Карты ссылок: определение координат областей карты ссылок. Атрибут target.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.82 - 100.
Тема 7. Разметка таблиц.
Основные элементы таблицы. Атрибуты элемента table.
Основные атрибуты строки таблицы. Основные атрибуты ячейки таблицы.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.101 - 129.
Тема 8. Использование таблиц для создания системы навигации сайта.
Создание Web-сайта с горизонтальным меню.
Создание Web-сайта с вертикальным меню.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.129 - 136.
4
Национальный исследовательский университет «Высшая школа экономики»
Программа дисциплины «Основы Web-дизайна. Язык HTML»
Тема 9. Фреймы.
Элементы описания фреймов.
Атрибуты элемента frame.
Организация связи между фреймом и HTML-документом.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.137 - 147.
Тема 10. Использование фреймов для создания системы навигации сайта.
Создание Web-сайта с горизонтальным меню.
Создание Web-сайта с вертикальным меню.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.148 - 153.
Тема 11. Подготовка изображений для Web.
Графические файлы. Основные форматы графических файлов для Web.
Формат GIF. Формат JPEG. Разрешение изображения. Использование цифровых фотографий на
Web-страницах. Подготовка фотографий для размещения в Web с использованием программы
FastStone Image Viewer.
Пакетное преобразование цифровых фотографий с использованием программы FastStone Image
Viewer. Разработка системы навигации фотогалереи.
Основная литература
Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006. с.154 - 157.
Гасанов Э.В. Сборник заданий для практических занятий по web-дизайну и методическии указания по их выполнению/ ГУ-ВШЭ. – М.: ТЕИС, 2006. с. 35-39, с.46-55
8
Образовательные технологии
Активные формы проведения занятий в виде разбора практических задач с использованием компьютера.
9
Оценочные средства для текущего контроля и аттестации студента
Тематика заданий текущего контроля
Домашнее задание включает в себя разработку Web-сайта на тему защиты окружающей
среды.
9.1
Примеры заданий итогового контроля
Практическое задание на зачете включает в себя разработку главной Web-страницы (статическую) одного из факультетов НИУ ВШЭ.
9.2
10 Порядок формирования оценок по дисциплине
Накопленная оценка по 10-ти балльной шкале за текущий контроль учитывает результаты студента по текущему контролю следующим образом:
5
Национальный исследовательский университет «Высшая школа экономики»
Программа дисциплины «Основы Web-дизайна. Язык HTML»
Онакопленная= 0,3* Отекущий + 0,7* Осам.работа
Результирующая оценка за дисциплину рассчитывается следующим образом:
Орезульт = 0,7* Онакопл + 0,3 *·Озач
Способ округления накопленной оценки промежуточного (итогового) контроля в форме
зачета: арифметический.
Если оценка за домашнее задание составляет 10 баллов, то результирующая оценка может быть выставлена 10 баллов, при условии, что накопленная оценка и оценка за зачет равны 8
и более баллов.
11 Учебно-методическое и информационное обеспечение дисциплины
11.1 Базовый учебник
1. Гасанов Э.В. Практикум по Web-дизайну: Практ. курс разработки Web-сайтов/
ГУ-ВШЭ. - М.: ТЕИС, 2006.
2. Гасанов Э.В. Сборник заданий для практических занятий по Web-дизайну и методические указания по их выполнению/ ГУ-ВШЭ. - М.: ТЕИС, 2006.
11.2 Дополнительная литература
1. Пауэлл Т. Web-дизайн. – 2-е изд., перераб. и доп.: Пер. с англ. – СПб.: БХВ-Петербург,
2004. – 1072 с.: ил.
2. Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство. – Пер. с англ. –
СПб.: Символ-плюс, 2002. – 752 с., ил.
3. Молли Э. Хольцшлаг Использование HTML 4, 6-е издание. Специальное издание.:
Пер. с англ. – М.: Вильямс, 2001. – 1008 с.: ил.
11.3 Программные средства
Для успешного освоения дисциплины, студент использует следующие программные
средства:
 Программа обработки изображений FastStone Image Viewer;
 Программа загрузки файлов на сайт FileZilla.
12 Материально-техническое обеспечение дисциплины
Для проведения занятий используется компьютерный класс и мультимедийный проектор.
6