В Методический Центр

Северного Административного Округа

г. Москвы

Реферат

(Мастер класс)

Уроки по теме:

«Изучение Internet - технологий в 10 – 11 классах. HTML - программирование»
Подготовил: учитель ИиИТ САО СОШ № 662

Федорова Светлана Владимировна

Москва, 2007

Содержание:

1. 
   Введение ……………………………………………………….. 3 стр.
   
2. 
   1 занятие ……………………………………………………….. 4 стр.
   
3. 
   2 занятие ……………………………………………………….. 5 стр.
   
4. 
   3 занятие ……………………………………………………….. 6 стр.
   
5. 
   4 занятие ……………………………………………………….. 8 стр.
   
6. 
   5 занятие ………………………………………………………. 10 стр.
   
7. 
   6 занятие ………………………………………………………. 11 стр.
   
8. 
   7 занятие ………………………………………………………. 13 стр.
   
9. 
   8 занятие ………………………………………………………. 15 стр.
   
10. 
    9 занятие ………………………………………………………. 16 стр.
    
11. 
    10 занятие ……………………………………………………... 18 стр.
    
12. 
    11 занятие ……………………………………………………... 20 стр.
    
13. 
    12 занятие ……………………………………………………... 22 стр.
    
14. 
    13 занятие ……………………………………………………... 26 стр.
    
15. 
    14 занятие ……………………………………………………... 27 стр.
    
16. 
    15 занятие ……………………………………………………... 29 стр.
    
17. 
    16 занятие ……………………………………………………... 31 стр.
    
18. 
    17 занятие ……………………………………………………... 33 стр.
    
19. 
    18 занятие ……………………………………………………... 34 стр.
    
20. 
    19 занятие ……………………………………………………... 35 стр.
    
21. 
    20 занятие ……………………………………………………... 37 стр.
    
22. 
    21 занятие ……………………………………………………... 39 стр.
    

Введение

Преподавание раздела Internet – технологии является одним из самых сложных, и, в тоже время, одним из самых актуальных и интересных разделов ИиИТ для учащихся 10-11 классов. Это объясняется тем, что молодежь давно пользуется услугами Internet, не имея при этом глубоких знаний в этой области.

Именно в разделе Internet – технологии вводится большое количество терминов, которыми должны легко оперировать учащиеся. На этапе программирования и изучения Web – редактора, появляется возможность задействовать весь творческий потенциал ребят, а работа становится полной и осмысленной.

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

Литература и методические рекомендации по этому разделу хорошо отражают информационную часть, но, практически, не затрагивают глубоко разделы программирования и Web – дизайна, т.е. самой интересной части Internet – технологий.

Данный реферат разработан с целью, помочь преподавателям ИиИТ давать этот материал без особых затруднений, даже не имея собственного большого опыта.

Содержание представляет собой уже отработанные уроки. Количество уроков можно сократить, в зависимости от специфики комплектаций компьютерных классов, часов отведенных на ИиИТ.

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

Рекомендую требовать от учащихся ведения подробных конспектов, т.к. каждое занятие – проанализированный материал из многих книг и учебников, содержит самую главную и необходимую для понимания информацию.
1 занятие
«Глобальная сеть. Интернет. Технические ресурсы Internet.»

• 
  Глобальная сеть – это система объединенных компьютеров, находящихся на большом расстоянии друг от друга.
  

Историческая справка:

• 
  в 1964 г. в США была создана первая глобальная сеть, которая называлась «Система раннего оповещения о приближении ракет противника» (была засекречена).
  
• 
  в 1969 г. в США была создана первая невоенного назначения сеть, которая называлась ARPANET. Сеть имела научное назначение и объединяла несколько Университетов в США.
  
• 
  в 1983 г. на базе ARPANET был разработан протокол TCP/IP (с аббревиатурой познакомимся ниже). По этому протоколу и работает современный Internet.
  
• 
  1993 г. стал, поистине, революционным в развитии Internet – технологий с появлением службы WWW(World Wide Web – всемирная информационная сеть).
  

Так что же такое Internet?

• 
  Интернет – это всемирная система компьютерных сетей, объединенных на базе протокола TCP/IP.
  
• 
  Протокол – это стандарт (набор целого пакета программ, правил и т.д.) на предоставление сетевой информации, на способы ее передачи и обработки.
  

Технические ресурсы Internet

Основными составляющими Internet являются узлы коммуникации и каналы связи между ними.

Для примера работы можно провести аналогию работы телефонной сети:

• 
  узлами телефонной сети являются АТС - автоматические телефонные станции.
  
• 
  АТС объединены между собой линиями связи, образующую городскую, региональную и т.д. телефонную сеть.
  

Аналогично абонент компьютерной сети (это может быть отдельный пользователь или целая организация) подключается к определенному Провайдеру (provider – поставщик, снабженец). Пользователь заключает с Провайдером договор на предоставление определенных услуг и в дальнейшем оплачивает определенный тариф.

В распоряжении Провайдера находятся 1 – 2 мощных компьютера, которые работают в круглосуточном режиме. Эти компьютеры называются – Host-компьютерами (host - хозяин).

Каждый Host-компьютер имеет свой уникальный адрес в Internet, он называется IP – адресом (Identify Password).
IP – адрес состоит из 4-ех десятичных цифр (0 - 255), разделенных точками.

Пример IP – адреса:

193.126.9.17
Компьютеры пользователя также получают IP – адрес, но они называются временными адресами (действуют только на время подключения пользователя к сети).
__________________________________________________________

2 занятие
Повторение предыдущего материала:

1. 
   Что такое глобальная сеть?
   
2. 
   Что такое Протокол?
   
3. 
   Что такое Интернет?
   
4. 
   Как работает Интернет?
   
5. 
   Кто такой Провайдер?
   
6. 
   Что такое Host-компьютерами?
   
7. 
   Что такое IP – адрес?
   

«DNS – адресация. Каналы связи.»

Наряду с IP – адресами, в Internet действует система символьных адресов. Она называется доменной системой имен (DNS – Domain Name System). Каждый Host-компьютер помимо IP – адреса, приобретает имя.

Слово «домен» обозначает участок, зону. Система доменных имен строится по иерархическому принципу:

www.yandex.ru
1-ый с права от точки – домен верхнего уровня (называется суффиксом), следующий за ним – домен второго уровня и т.д.

Пример: www.discoland.ru/shop

Слева от точки - домен – имя компьютера.
Домен верхнего уровня (суффикс) бывает географическим (содержит 2 буквы) и административным (содержит 3 буквы).

Географический	Административный
Российская зона - .ru Англия - .uk Канада - .ca Германия - .de Япония - .jp	На примере США: .gov - правительственная сеть США .mil - военная сеть США .edu - образовательная сеть США .com- коммерческая сеть

Каналы связи

В настоящее время широко используются 4 канала связи:

1. 
   Телефонные линии (в системный блок ПК устанавливается модем);
   
2. 
   Электрическая кабельная связь;
   
3. 
   Оптоволоконныя связь;
   
4. 
   Радиосвязь.
   

Все каналы различаются по трем главным различиям:

1. 
   Пропускной способности;
   
2. 
   Помехоустойчивости;
   
3. 
   Стоимости.
   

Пропускная способность- это максимальная скорость передачи информации по каналу. Она выражается в Кбит/сек или в Мбит/сек (десятки-сотни Кбит/сек – модемное соединение, десятки-сотни Мбит/сек – оптоволоконныя связь).
__________________________________________________________
3 занятие
Повторение предыдущего материала:

1. 
   Что такое доменная система имен?
   
2. 
   Какими бываю домены верхнего уровня?
   
3. 
   Какие бывают каналы связи, их отличие?
   
4. 
   Что такое пропускная способность?
   

«Программный ресурс Internet. Работа сети.»
Программный ресурс Internet
Работа сети поддерживается программным обеспечением. Оно функционирует на Host-компьютерах и на персональных ПК.


Часто под словом сервер понимают Host-компьютер, выполняющий определенные сервер – программы.
ПК пользователя имеет в ОС тоже специальные программы, которые называются Клиент – программами:

Outlook Express

Internet Explorer и т.д.
Работа сети
В Internet используется пакетная система передачи информации, т.е. вся, пересылаемая информация делится на небольшие блоки - пакеты протоколом TCP (Transfer Control Protocol – протокол управления передачей), к каждому пакету прикладывается IP- адрес получателя, затем все пакеты рассылаются (они могут отправиться по разным путям, но придут в одно место, т.к. на всех указан один IP- адрес получателя). На Host-компьютере получателя протокол TCP объединит все пакеты в единый документ.

Если какой-то пакет при транспортировке испорчен, то передача всего документа будет запрещена.

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



4 занятие
Повторение предыдущего материала:

1. 
   Каким программным обеспечением поддерживается работа сети?
   
2. 
   Что такое пакетная система передачи информации?
   

«Internet – услуги. Коммуникационные службы Internet»
От устройства и функционирования сети самое время перейти к главному вопросу:

Для чего используется Internet?
Компьютерная сеть Internet может выполнять две услуги:

1. 
   быть средством общения между ее пользователями, находящимися на расстоянии друг от друга (эта функция называется коммуникационной).
   
2. 
   быть средством доступа к информационным ресурсам (эта функция называется информационной).
   

Коммуникационная служба Internet

I. Электронная почта (E-mail) – самая старая сетевая услуга. Ее назначение – поддержка обмена письмами в сети.


Процесс передачи почтового сообщения прост:

1. 
   Сначала пользователь пишет текст письма в режиме off – line (т.е. без подключения к Internet), указывает адрес получателя и тему письма.
   
2. 
   Подготовленное письмо помещается в папку «исходящие».
   
3. 
   Далее в режиме on – line (подключившись к Internet) сервер по паролю определяет ПК – пользователя и отправляет все письма из папки «Исходящие», а также передает все поступившие письма в папку «Входящие» по протоколу POP3 (POP3 – Post Office Protocol – протокол почтового отделения).
   

Сеанс связи окончен!
Клиент–программа ПК – пользователя только передает и получает почту. Работает по протоколу SMTP – Simple Maile Transfer Protocol (простейший протокол передачи информации).
II. Телеконференции
Это также почтовая переписка, но отличается тем, что письмо отсылается всем участникам телеконференции (одновременно), и все сообщения, поступающие в адрес телеконференции от разных участников, отправляются каждому участнику.

Телеконференция требует регистрации всех участников, с указанием выбранной темы обсуждения, E-mail участника, Ф.И.О. участника.

Как правило, конференции посвящены обсуждению какой-либо темы (научной, политической, проектной).
В сети Телеконференции обслуживаются серверами – Новостей.

Клиент–программа ПК – пользователя только передает и получает почту. Работает по протоколу SMTP – Simple Mail Transfer Protocol (простейший протокол передачи информации).
III. Форумы прямого общения IRC (Internet Relay Chat – в переводе «болтовня»)
Проходит в режиме on-line в письменном виде.

Также надо зарегистрироваться, как участник, выбрать тему, но можно указать только свой nik – т.е. вымышленное имя

На Host-компьютере работает chat- сервер, а на ПК-пользователя - chat-клиент.

Ваше сообщение публикуется в Internet, и в дальнейшем обсуждается участниками. Всю переписку можно увидеть в Internet.
__________________________________________________________
5 занятие
Повторение предыдущего материала:

1. 
   Как работает почта?
   
2. 
   Что такое телеконференция?
   
3. 
   Что такое форум?
   

«Информационная служба Internet (1993 г.). Сайт, структура каждой страницы.»
Эта служба работает в двух направлениях:

1. 
   Служба передачи файлов, работает по протоколу FTP (File Transfer Protocol – протокол передачи данных).
   

На Host-компьютере установлены серверы (программы) FTP, а на ПК – пользователя FTP-клиент (программы).

Для того, чтобы стало понятно: с появлением символьных имен Host-компьютеры (иногда их называют сервер – ПК из-за программ серверов, установленных на них) имеют большую область на жестком диске, которая предлагается всем пользователям Host-компьютера. Здесь пользователь может хранить папки с документами, свой личный банк данных и многое др.

Вся эта информация образует иерархическую структуру папок (подобно Проводнику). Часто информация, хранящаяся на сервере, является секретной. Каждый владелец получает от Провайдера свой FTP – доступ (со своим паролем и логином).

Аналогию можно провести с ячейками банка, где секретность содержимого ячейки клиента банка, гарантирует сам банк.

2. 
   Служба WWW. На сервере могут храниться сайты клиентов, которые воспроизводятся по протоколу HTTP (Hyper Text Transfer Protocol – протокол передачи гипертекстовых страниц). Его основной задачей является поиск и передача документов клиенту, а также обработкой гиперссылок.
   

Host-компьютер обладает WEB – сервером, а на ПК-клиента хранятся программы WEB- клиент (например Internet Explorer).
Что такое сайт (site)?

Сайт можно сравнить с каталогом или книгой, но в отличии от них, сайт можно просматривать в любой последовательности. Все страницы увязаны ссылками – link, при нажатии на которые открываются запрошенные страницы (или даже другой сайт).

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



При публикации сайт получает свой адрес URL (Uniformed Resource Locator – универсальный указатель ресурса).
Структура гипертекстовой страницы



6 занятие
«Программирование на HTML»
Каждый оператор на языке программирования HTML называется тег, начинается угловой скобкой <, и заканчивается >. Различают парные (т.е. тег имеет закрывающий тег) и не парные теги.

• 
  <html> - 1 – ый тег (парный), определяет, что данный документ содержит html – код.
  
• 
  <head> - голова программы, содержит:
  

- <title> - имя сайта, оно будет высвечиваться в верхней строке браузера (парный).
Пример:

- <meta> - содержит информацию о странице, облегчает поиск сайта поисковыми роботами.

• 
  <body> - парный тег. Содержит тело страницы, т.е. именно эту информацию увидит посетитель Вашего сайта.
  

Напишем нашу первую программу на языке HTML.

Программа пишется в блокноте.










<h1>Привет Всем!h1>




Сохранить документ в специально подготовленной папке с именем index.htm
Раздел
Параметры тега:

1. 
   background="name.jpg" – фоновый узор для всего поля страницы
   
2. 
   bgcolor="yellow" - цвет фона
   
3. 
   link="blue" –цвет ссылок
   
4. 
   alink="red" – цвет активной ссылки
   
5. 
   vlink="black" – цвет посещенной ссылки
   

Теперь можно расширить тег <body> :

Расширьте тег <body> в вашей рабочей странице index.htm (после внесенных изменений выполнить команду Файл-сохранить).
Цвет в тегах может быть записан английским названием цвета, а м.б. записан кодом цветовой палитры RGB.



В рабочем документе попробуйте поменять названия цвета фона на код. __________________________________________________________

7 занятие

Повторение предыдущего материала:

4. 
   Что такое тег ?
   
5. 
   Что такое тег ?
   
6. 
   Что такое тег ? Его параметры.
   
7. 
   Что такое код цвета?
   

«Оформление абзацев. Форматирование текста»

• 
  Создание абзаца
  

<div> - парный тег, который начинает абзац с новой строки.
Параметры:

1. 
   align="left" (right, center, justify) - выравнивание абзаца.
   

Мы изучаем программирование на языке HTML

Вставьте этот тег после тега в html – код рабочей программы. Сохранитесь и посмотрите результат.

• 
  Задание стиля шрифта
  

<font> - парный тег.


В рабочем документе вставим в тег – абзаца стиль шрифта:

"sans-serif" size=3 color="green">Мы изучаем программирование на языке HTML

Посмотрите, как изменился шрифт.

• 
  Физическое форматирование
  

Это парные теги и требуют закрытия. В рабочем документе перед русским текстом вставьте один из приведенных выше тегов, а после текста, закройте этот тег (вставьте этот фрагмент в рабочий документ, вместо

<div align="left">Мы изучаем программирование на языке HTMLdiv>).
Пример (Обратите внимание, что все теги закрываются в обратном порядке!!!):

"sans-serif" size=3 color="green">Мы изучаем программирование на языке HTML

Посмотрите как изменился шрифт!
______________________________________________________

8 занятие
Повторение предыдущего материала:

1. 
   Тег абзаца?
   
2. 
   Как задать стиль шрифта?
   
3. 
   Какие теги относятся к физическому форматированию?
   

«Спец. символы. Заголовки.»

• 
  Использование спец. символов
  

Тег переноса строки <br> (соответствует Enter при работе в Word).
Если вам надо писать большой текст:

«Да, будут ясны дни твои!

Как милый взор твой ныне ясен.

Средь лучших жребиев судьбы,

Да, будет жребий твой прекрасен!»

Здесь надо использовать тег абзаца, тег форматирования, тег спец. символов «» и тег перевода строки по окончанию каждой фразы, чтобы текст выглядел как стихотворение, иначе он растянется в длинное предложение, т.к. Enter в html – коде не воспринимается, как перевод строки.
Пример:

Да, будут ясны дни твои!


Как милый взор твой ныне ясен.


Средь лучших жребиев судьбы,


Да, будет жребий твой прекрасен!

Вставьте этот фрагмент в html код вашей рабочей страницы, после закрытия первого абзаца (). Сохраните изменения и посмотрите на вашу html – страницу.

• 
  Заголовки (парные теги, т.е. требуют закрытия)
  

- самый большой заголовок

- поменьше

и т.д. до

- самый маленький

Раньше мы уже использовали этот тег, но у него есть параметр:

align="left" (right, center, justify) – выравнивание
Изменим заголовок в рабочем документе:
<h1 align="center">Привет Всем!h1>

Сохраните изменения и посмотрите на вашу html – страницу.

9 занятие
Повторение предыдущего материала:

1. 
   Какие спец. символы вам известны и для чего они используются?
   
2. 
   Как можно создать заголовок и отцентрировать его?
   

«Списки. Линии.»

• 
  Различают пронумерованные и непронумерованные списки.
  

1. 
   Пронумерованные списки
   

Пронумерованные списки начинаются стартовым тегом (парный)

Каждый элемент списка начинается с непарного (не требует закрытия) тега: <li>
Параметры тега
:

type=A (a,I,1)

A – большие латинские буквы (A,B,C ….)

I – большие римские цифры (I, II,III….)

1 – обычные цифры (1,2,3…)

start=n - число с которого начинается нумерация списка.
Пример:




5. Программирование
   
   
6. Алгоритмизация
   
   
7. Проектирование
   
   

Вставьте этот фрагмент в html код вашей рабочей страницы, после закрытия последнего абзаца (после последнего