Тема 3. Списки и рисунки в языке HTML

РОБОЧА НАВЧАЛЬНА ПРОГРАМА

 

Основи Інтернет

(найменування типової програми, дата твердження)

Кафедра інформатики

I. Мета та завдання дисципліни, її місце в навчальному процесі: Вивчення основ структури і принципів функціонування глобальної інформаційної мережі Інтернет, а також основи Web-дізайна з використанням мови HTML.

Ознайомлення студентів з історією розвитку глобальної інформаційної мережі Інтернет, структурної мережі, методами фізичних з’єднань вузлів мережі, адресацією і основними протоколами, службами і сервісами, мовою гіпертекстової розмітки сторінок WWW (всесвітньої павутини).

 

Форма навчання	Курс	Семестри	Лекції (год)	Практичні/ семінарські (год.)	Лабора-торні (год.)	Усього годин	Самостійна робота (год)	Заліки (семестр)	Іспити (семестр)
Денна			-	-
Заочна			-	-

Цель и задачи дисциплины

 

Целью дисциплины Основы Интернет являются изучение основ структуры и принципов функционирования глобальной информационной сети Интернет, а также основы Web-дизайна с использованием языка HTML.

Задачей дисциплины является ознакомление студентов с историей развития глобальной информационной сетью Интернет, структурой сети, методами физических соединений узлов сети, адресацией и основными протоколами, службами и сервисами, языком гипертекстовой разметки страниц WWW (всемирной паутины).

 

 

II. Тематический план изучения дисциплины

а) распределение учебного времени

 

№		Количество часов
Пп	Темы курса	Всего	из них
		на курс	Лекции	Практ. лабор. Зан.	Сам. Работа, Конс.	Формы контр.
	Основные понятия и определения дисциплины Основы Интернет.					Лабор. работа №1
	Введение в HTML					Лабор. работа №2
3.	Списки и рисунки в языке HTML					Лабор. работа №3
4.	Таблицы в HTML					Лабор. работа №4
5.	Фреймы в языке HTML.					Лабор. работа №5
6.	Формы в HTML					Лабор. работа №6
7.	Таблицы каскадных стилей					Лабор. работа №7
8.	Свойства CSS.					Лабор. работа №8
9.	Свойства Box					Лабор. работа №9
10.	Навигационные карты					Лабор. работа №10
11.	Обозреватель Internet Explorer, поиск в итернет					Лабор. работа №11
12.	Скрипты в языке HTML. JavaScript					Лабор. работа №12
13.	Операторы в языке JavaScript					Лабор. работа №13
14.	Условные операторы JavaScript					Лабор. работа №14
15.	Объекты и свойства JavaScript					Лабор. работа №15
16.	Функции и методы JavaScript					Лабор. работа №16
17.	Динамический HTML					Лабор. работа №17
18.	Обработка событий					Лабор. работа №18
	Итого					Зачет

 

б) содержание тем курса

 

Тема 1. Основные понятия и определения.

(4 час., лабораторных – 2, самостоятельная работа – 2)

История возникновения и развития. Виды связи в сетях. Серверы Интернет. Протоколы обмена данными. Адресация в Интернет. Классификация сетей в Интернет. Доменная система имен. Службы и сервисы.

 

Тема 2. Введение в HTML.

(6 час., лабораторных – 2, самостоятельная работа – 4)

HTML – язык гипертекстовой разметки страниц. Структура и основные операторы языка HTML. Работа с текстом. Формирование атрибутов цвета. Адресные ссылки.

 

Тема 3. Списки и рисунки в языке HTML

(6 час., лабораторных – 2, самостоятельная работа – 4)

Использование и виды списков. Маркированные списки. Нумерованные списки. Списки определений. Рисунки в языке HTML.

 

Тема 4. Таблицы в языке HTML.

(6 час., лабораторных – 2, самостоятельная работа – 4)

Общая структура. Выравнивание. Внешние размеры. Раскраска и разметка. Работа с текстом внутри ячейки. Динамическая и статическая настройка по строкам и по столбцам.

 

Тема 5. Фреймы в языке HTML.

(6 час., лабораторных – 2, самостоятельная работа – 4)

Использование и синтаксис. Разметка экрана. Планирование фреймов и взаимодействия между фреймами. Зарезервированные имена фреймов.

 

Тема 6. Формы в языке HTML.

(6 час., лабораторных – 2, самостоятельная работа – 4)

Понятие и назначение. Метод посылки. Элементы формы. Типы полей. Работа с файлами. Взаимодействие с сервером

 

Тема 7. CSS – Таблицы Каскадных Стилей.

(8 час., лабораторных – 2, самостоятельная работа – 6)

Понятие стиля. Виды селекторов. Внутренние таблицы стилей. Глобальные таблицы стилей. Связанные таблицы стилей. Порядок использования и разрешения конфликтов.

Тема 8. Свойства CSS.

(6 час., лабораторных – 2, самостоятельная работа – 4)

Свойства FONT. Свойства TEXT. Свойства COLOR и Background Color. Свойства списков и таблиц. Генерируемое содержимое и счетчики.

Тема 9.Свойства Box

(6 час., лабораторных – 2, самостоятельная работа – 4)

Общая структура блока. Свойства margin и padding. Свойства border. Виды позиционирования. Всплывающие блоки. Визуальные эффекты.

Тема 10. Навигационные карты

(6 час., лабораторных – 2, самостоятельная работа – 4)

Навигационные карты. Описание и виды полей. Использование рисунка для вызова.

Тема 11. Обозреватель Internet Explorer, поиск в итернет

(6 час., лабораторных х – 2, самостоятельная работа – 4)

Работа с меню. Основные настройки. Поиск в интернет. Параметры дескриптора meta. Описатель Doctype.

Тема 12. Скрипты в языке HTML. JavaScript

(6 час., лабораторных – 2, самостоятельная работа – 4)

Размещение скриптов в языке HTML. Соотношение языков JavaScript и Java. Дескриптор Script. Использование JavaScript. Переменные и литералы.

Тема 13. Операторы в языке JavaScript

(6 час., лабораторных – 2, самостоятельная работа – 4)

Выражения. Операторы присваивания. Арифметические, строковые и логические операторы. Старшинство операций.

Тема 14. Условные операторы JavaScript

(6 час., лабораторных – 2, самостоятельная работа – 4)

Условные операторы. Оператор цикла. Операторы манипулирования объекта. Комментарий. Массивы.

Тема 15. Объекты и свойства JavaScript

(6 час., лабораторных – 2, самостоятельная работа – 4)

Понятие объекта. Встроенные классы. Пользовательские классы. Регулярные выражения. Свойства объектов. Объектная модель документа.

Тема 16. Функции и методы JavaScript

(6 час., лабораторных – 2, самостоятельная работа – 4)

Функции. Понятие локальных и глобальных переменных. Рекурсия. Оператор void. Встроенные функции. Методы и их использование.

Тема 17. Динамический HTML

(6 час., лабораторных – 2, самостоятельная работа – 4)

Определение динамики. Использование объектной модели. Использование сценариев. Использование стилевых листов.

Тема 18. Обработка событий

(6 час., лабораторных – 2, самостоятельная работа – 4)

События. Обработчики событий. Всплывающие события. Специальные эффекты. Распознавание типа, версии и платформы браузера.

 

в) тематика лабораторных работ

 

1. Основные понятия и определения дисциплины Основы Интернет.

2. Введение в HTML

3. Списки и рисунки в языке HTML

4. Таблицы в HTML

5. Фреймы в языке HTML.

6. Формы в HTML

7. Таблицы каскадных стилей

8. Свойства CSS.

9. Свойства Box

10. Навигационные карты

11. Обозреватель Internet Explorer, поиск в итернет

12. Скрипты в языке HTML. JavaScript

13. Операторы в языке JavaScript

14. Условные операторы JavaScript

15. Объекты и свойства JavaScript

16. Функции и методы JavaScript

17. Динамический HTML

18. Обработка событий

 

Результаты лабораторных работ (составление личных страниц в языке HTML) могут быть использованы для сдачи зачета.

 

г) задания для самостоятельной работы

 

Тема 1. Основные понятия и определения.

(2 час)

Адресация ip6 Интернет. Дополнительные net-сервисы. Настройки основных браузеров и почтовых агентов.

 

Тема 2. Введение в HTML.

(4 час)

Заголовок HTML-страницы. Метаданные. Описание языка HTML на сайте WWW. Отличия логического и физического форматирования. Использование атрибутов цвета (дополнительные варианты). Адресные ссылки с использованием рисунков и объектов. Элементы ADDRESS и BASE.

 

Тема 3. Списки и рисунки в языке HTML

(4 час)

Использование вложенных списков. Варианты использования основных и дополнительных параметров в списках. Использование DIR и MENU элементов в языке HTML.

 

Тема 4. Таблицы в языке HTML.

(4 час)

Подсчет числа столбцов в таблице. Подсчет ширины столбцов. Группирование строк и столбцов. Направление текста (атрибут dir). Примеры умолчания (опускания) конечных тегов в таблицах.

 

Тема 5. Фреймы в языке HTML.

(4 час)

Вложенные наборы фреймов. Задание исходного содержимого фрейма. Визуальное представление фрейма. Определение цели фрейма. Семантика целей. Элемент IFRAME.

 

Тема 6. Формы в языке HTML.

(4 час)

Управляющие элементы формы. Параметры элементов FORM и INPUT. Элемент BUTTON. Элемент LABEL. Клавиши доступа. Атрибут disabled. Атрибут readonly.

 

Тема 8. Свойства CSS.

(4 час)

Свойства FONT. Свойства TEXT. Свойства COLOR и Background Color. Свойства списков и таблиц. Генерируемое содержимое и счетчики.

Тема 9.Свойства Box

(4 час)

Общая структура блока. Свойства margin и padding. Свойства border. Виды позиционирования. Всплывающие блоки. Визуальные эффекты.

Тема 17. Динамический HTML

(4 час)

Соотношение DOM и CSS. Представление документов в виде дерева. Типы узлов. Иерархия классов DOM API. Поиск элементов в документе. Модификация параметров. Обращение к стилевым атрибутам в DHTML. DHTML_анимация.

Тема 18. Обработка событий

(4 час)

События мыши. События клавиатуры. Быстрые комбинации клавиш и класс Keymap. Событие onload. Искусственные события.

 

д) вопросы к зачету

 

1.Word Wide Web - Всемирная паутина.

2.HTML – язык гипертекстовой разметки страниц.

3.Структура страницы HTML.

4.Создание Web-страницы и отладка

5.Структура оператора языка HTML

6.Работа с текстом. Расположение на экране.

7.Операторы HEAD и TITLE.

8.Комментарий.

9.Операторы BODY и DIV.

10. Операторы абзац и заголовки.

11. Выравнивание текста.

12. Текстовые стили.

13. Операторы BR, HR и использование специальных символов.

14. Формирование атрибутов цвета.

15. Цветовые атрибуты элемента BODY.

16. Адресные ссылки.

17. Элемент FONT.

18. Маркированный список.

19. Нумерованный список.

20. Список определений.

21. Атрибуты списков.

22. Внутренние рисунки.

23. Таблицы в языке HTML.Общая структура.

24. Атрибуты BORDER и ALIGN.

25. Атрибуты ROWSPAN и COLSPAN.

26. Внешние и внутренние размеры таблицы.

27. Раскраска таблицы.

28. Разметка таблицы (FRAME, BORDER, RULES).

29. Работа с текстом внутри ячейки.

30. Динамическая и статическая настройка по строкам и по столбцам.

31. Таблицы Каскадных Стилей в языке HTML.

32. Понятие стиля. Виды селекторов.

33. Внутренние таблицы стилей.

34. Глобальные таблицы стилей.

35. Связанные таблицы стилей.

36. Свойства стилей Font.

37. Свойства стилей Text.

38. Свойства стилей Color и Background Color.

39. Свойства стилей Box.

40. Фреймы в языке HTML

41. Использование и синтаксис.

42. Атрибуты элемента FRAME.

43. Планирование взаимодействия между фреймами.

44. Зарезервированные имена фреймов.

45. Формы в языке HTML. Понятие и назначение.

46. Метод посылки и другие атрибуты элемента FORM.

47. Элемент TEXTAREA.

48. Элемент INPUT.

49. Элемент SELECT.

50. Работа с файлами в форме.

51. Скрипты в языке HTML.

52. Использование JavaScript.

53. Литералы и переменные в JavaScript.

54. Арифметические операторы.

55. Операторы присвоения.

56. Операторы сдвига и логические.

57. Условные операторы.

58. Операторы цикла.

59. Использование меток.

60. Объектная модель в JavaScript.

61. Простые объекты в JavaScript.

62. Объект Window.

63. Объект Document.

64. Обработка событий.

65. Динамика в HTML.

 

Индивидуальное задание

Для получения зачета по дисциплине «Основы Интернет» (1 курс, специальность информатика и прикладная математика) учащемуся требуется разработать небольшой статический уникальный Интернет-сайт в формате HTML, содержащий следующие страницы:

1) Index.html - Главная страница сайта – с FRAMESET (не менее 3-х фреймов, FRAMESET с rows и cols)

2) Menu.html – Страница с навигационным меню сайта, постоянно отображающаяся в одном из фреймов (предпочтительно в виде списка)

3) Style.css – Внешний стилевой файл, применимый к большинству страниц сайта, с обязательным использованием классов

4) Использование глобального и внутреннего стилей

5) Страницы Сайта (названия даны как рекомендация), можно добавить и другие страницы:

o (Text.html) Страница, содержащая несколько абзацев теста с применением основных тегов форматирования: B, I, U, STRIKE, H1..H6, SUB, SUP, а также тегов выравнивания и др.

o (Lists.html) Страница, содержащая нумерованные и ненумерованные списки. В качестве примера рассматривалась классификация учебных предметов

o (Table.html) Страница, содержащая таблицу. В таблице обязательно должны присутствовать объединение ячеек. В качестве примера рассматривалась таблица расписания занятий. Для получения максимального балла учащийся должен продемонстрировать такую таблицу без использования тегов TABLE, TR, TD, TH (т.е. только с помощью стилизированых DIV+SPAN)

o (Images.html) Страница, содержащая изображения, используемые и как форматируемый объект, и как задний фон таблицы, слоя или тела документа.

 

Сайт должен одинаково выглядеть в браузерах Internet Explorer, Mozilla Firefox. Добавление клиентских скриптов (JavaScript, VBScript) не влияет на оценку выполненной работы.

 

 

е) критерии оценивания знаний студентов

 

Накопительное оценивание

 

Текущий контроль	Количество баллов	Всего	Итоговый контроль	Количество баллов	Итоговая оценка
Лабораторные работы 2-16	0 - 2 балла за 1 работу	0-30	Индивидуальное задание	0-70	0-100

 

Лабораторные работы выполняются в среде Internet Explorer или аналогичных середах по индивидуальным вариантам. Расчет баллов за лабораторную работу:

1 балл – выполнение задания при наличии недочетов;

2 балла - выполнение задания в полном объеме.

 

Сроки сдачи лабораторных работ

1.	Основные понятия и определения
2.	Введение в HTML
3.	Списки и рисунки в языке HTML	15.09
4.	Таблицы в HTML
5.	Фреймы в языке HTML.
6.	Формы в HTML
7.	Таблицы каскадных стилей	15.10
8.	Свойства CSS.
9.	Свойства Box
10.	Навигационные карты
	Обозреватель Internet Explorer, поиск в итернет	15.11
	Скрипты в языке HTML. JavaScript
13.	Операторы в языке JavaScript
14.	Условные операторы JavaScript
15.	Объекты и свойства JavaScript	15.12
16.	Функции и методы JavaScript
17.	Динамический HTML
18.	Обработка событий

При несвоевременной сдаче оценка за лабораторную работу снижается.

Индивидуальное задание представляет собой комплексное задание на разработку сайта, поэтапно выполняемое в течение семестра.

Оценка за индивидуальное задание

0-30 баллов – разработка сайта с минимальным количеством страниц и недочетами по оформлению и навигации;

31-60 баллов – разработка сайта с необходимым количеством страниц с содержанием текстов, списков и таблиц, соответствием стилей и навигации;

61-70 баллов – разработка сайта в полном соответствии с заданием и творческим подходом к дизайну.

Итоговая оценка от 60 до 100 баллов переводится в национальную шкалу и шкалу ECTS.

Студенты, не набравшие 60 баллов или не согласные с оценкой, допускаются к пересдаче зачета при условии досдачи всех лабораторных работ.

 

критерии оценивания знаний студентов заочного отделения

 

Накопительное оценивание

 

Текущий контроль	Количество баллов	Всего	Итоговый контроль	Количество баллов	Итоговая оценка
Лабораторные работы 1-10	0 -2 б. за 1 работу	0-20	Индивидуальное задание	0-80	0-100

Лабораторные работы выполняются в среде Internet Explorer или аналогичных середах по индивидуальным вариантам. Расчет баллов за лабораторную работу:

1 балл – выполнение задания при наличии недочетов;

2 балла - выполнение задания в полном объеме.

Индивидуальное задание представляет собой комплексное задание по индивидуальному варианту, которое выполнятся самостоятельно и представляется для доработки в ходе сессии.

Оценка за индивидуальное задание

0-30 баллов – разработка сайта с минимальным количеством страниц и недочетами по оформлению и навигации;

31-60 баллов – разработка сайта с необходимым количеством страниц с содержанием текстов, списков и таблиц, соответствием стилей и навигации;

61-80 баллов – разработка сайта в полном соответствии с заданием и творческим подходом к дизайну.

 

Итоговая оценка от 60 до 100 баллов переводится в национальную шкалу и шкалу ECTS.

Студенты, не набравшие 60 баллов или не согласные с оценкой, допускаются к пересдаче зачета при условии досдачи всех лабораторных работ.

Литература

1. Янг М., Мюдер Д., Кей Д., Вафил К., Барроу Э. Internet: полное руководство, BHV, Киев, 2001.

2. Кожемякин А. А. HTML и CSS в примерах. Создание Web-страниц, Альтекс, М, 2004.

3. Гусев В.С. Освоение Internet. Краткое руководство, Диалектика, Киев, 2004.

4. Хольцшлаг М.Э. Использование HTML4. 6 издание, Вильямс, М, 2000.

5. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0. БХВ-Петербург, СПб, 2003.

6. Флэнаган Дэвид. JavaScript. Подробное руководство. Пятое издание, Символ-плюс, СПб, 2008.

7. Журин А.А. Самоучитель работы на компьютере: Microsoft Internet Explorer. Microsoft Outlook Express 6, Юнвес, М, 2003.

8. Клименко С.В., Уразметов В.Ф. Internet – Среда обитания информационного общества, РЦФТИ, М, 1995.

9. Спецификация Языка Гипертекстовой Разметки (HTML) (http://www.w3.org/TR/html401)

10. Спецификация Каскадных Таблиц Стилей (CSS) (http://www.w3.org/TR/CSS21)

 

 

РОБОЧА НАВЧАЛЬНА ПРОГРАМА

 

Основи Інтернет

(найменування типової програми, дата твердження)

Кафедра інформатики

I. Мета та завдання дисципліни, її місце в навчальному процесі: Вивчення основ структури і принципів функціонування глобальної інформаційної мережі Інтернет, а також основи Web-дізайна з використанням мови HTML.

Ознайомлення студентів з історією розвитку глобальної інформаційної мережі Інтернет, структурної мережі, методами фізичних з’єднань вузлів мережі, адресацією і основними протоколами, службами і сервісами, мовою гіпертекстової розмітки сторінок WWW (всесвітньої павутини).

 

Форма навчання	Курс	Семестри	Лекції (год)	Практичні/ семінарські (год.)	Лабора-торні (год.)	Усього годин	Самостійна робота (год)	Заліки (семестр)	Іспити (семестр)
Денна			-	-
Заочна			-	-

Цель и задачи дисциплины

 

Целью дисциплины Основы Интернет являются изучение основ структуры и принципов функционирования глобальной информационной сети Интернет, а также основы Web-дизайна с использованием языка HTML.

Задачей дисциплины является ознакомление студентов с историей развития глобальной информационной сетью Интернет, структурой сети, методами физических соединений узлов сети, адресацией и основными протоколами, службами и сервисами, языком гипертекстовой разметки страниц WWW (всемирной паутины).

 

 

II. Тематический план изучения дисциплины

а) распределение учебного времени

 

№		Количество часов
Пп	Темы курса	Всего	из них
		на курс	Лекции	Практ. лабор. Зан.	Сам. Работа, Конс.	Формы контр.
	Основные понятия и определения дисциплины Основы Интернет.					Лабор. работа №1
	Введение в HTML					Лабор. работа №2
3.	Списки и рисунки в языке HTML					Лабор. работа №3
4.	Таблицы в HTML					Лабор. работа №4
5.	Фреймы в языке HTML.					Лабор. работа №5
6.	Формы в HTML					Лабор. работа №6
7.	Таблицы каскадных стилей					Лабор. работа №7
8.	Свойства CSS.					Лабор. работа №8
9.	Свойства Box					Лабор. работа №9
10.	Навигационные карты					Лабор. работа №10
11.	Обозреватель Internet Explorer, поиск в итернет					Лабор. работа №11
12.	Скрипты в языке HTML. JavaScript					Лабор. работа №12
13.	Операторы в языке JavaScript					Лабор. работа №13
14.	Условные операторы JavaScript					Лабор. работа №14
15.	Объекты и свойства JavaScript					Лабор. работа №15
16.	Функции и методы JavaScript					Лабор. работа №16
17.	Динамический HTML					Лабор. работа №17
18.	Обработка событий					Лабор. работа №18
	Итого					Зачет

 

б) содержание тем курса

 

Тема 1. Основные понятия и определения.

(4 час., лабораторных – 2, самостоятельная работа – 2)

История возникновения и развития. Виды связи в сетях. Серверы Интернет. Протоколы обмена данными. Адресация в Интернет. Классификация сетей в Интернет. Доменная система имен. Службы и сервисы.

 

Тема 2. Введение в HTML.

(6 час., лабораторных – 2, самостоятельная работа – 4)

HTML – язык гипертекстовой разметки страниц. Структура и основные операторы языка HTML. Работа с текстом. Формирование атрибутов цвета. Адресные ссылки.

 

Тема 3. Списки и рисунки в языке HTML

(6 час., лабораторных – 2, самостоятельная работа – 4)

Использование и виды списков. Маркированные списки. Нумерованные списки. Списки определений. Рисунки в языке HTML.