internetSimilar presentations:
Как работает компьютерная сеть?
1. Компьютерные сети
1Компьютерные
сети
§ 1. Как работает компьютерная сеть?
§ 2. Структуры сетей
§ 3. Локальные сети
§ 4. Глобальная сеть Интернет
§ 5. Службы Интернета
§ 6. Веб-сайты
§ 7. Язык HTML
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
2. Компьютерные сети
2Компьютерные
сети
§ 1. Как работает компьютерная
сеть
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
3. Что такое компьютерная сеть?
Компьютерные сети, 9 класс3
Что такое компьютерная сеть?
Компьютерная сеть – это группа компьютеров,
соединенных линиями связи.
Линии связи:
• электрические кабели
• оптическое волокно
• радиоволны (в беспроводных сетях)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
4. Компьютерные сети – «за» и «против»
Компьютерные сети, 9 класс4
Компьютерные сети – «за» и «против»
обмен данными между компьютерами
совместное использование ресурсов
• данные
• программы
• внешние устройства
распределённые вычисления
электронная почта
затраты на сетевое оборудование
снижается безопасность данных
нужен системный администратор
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
5. Системный администратор
Компьютерные сети, 9 класс5
Системный администратор
• устанавливает и настраивает ПО
• устанавливает права доступа
• обеспечивает защиту информации
• делает резервные копии данных
• восстанавливает данные в случае сбоев
• устраняет неисправности в сети
Сетевой администратор – занимается только
работой сети.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
6. Типы сетей
Компьютерные сети, 9 класс6
Типы сетей
• персональные сети (PAN = Personal Area Network),
радиус до 30 м (Bluetooth)
• локальные сети (LAN = Local Area Network) – в одном
или нескольких соседних зданиях;
беспроводные – Wi-Fi
• корпоративные сети – одна организация
• городские сети (MAN = Metropolitan Area Network)
• глобальные сети (WAN = Wide Area Network)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
7. Обмен данными
Компьютерные сети, 9 класс7
Обмен данными
Протокол – это набор правил и соглашений,
определяющих порядок обмена данными.
Пакетный режим
5
1
3
2
К.Ю. Поляков, Е.А. Ерёмин, 2018
4
большой файл не
блокирует сеть
при сбое повтор 1 пакета
пакеты могут идти
разными маршрутами
6
http://kpolyakov.spb.ru
8. Пакетный режим
Компьютерные сети, 9 класс8
Пакетный режим
Состав пакета:
• адрес получателя
• адрес отправителя
• данные
• контрольная сумма
куда
откуда
контрольная
сумма
данные
CRC-32
=?
Размер пакета: до 1,5 Кбайт
нет
передать заново
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
9. Серверы и клиенты
Компьютерные сети, 9 класс9
Серверы и клиенты
Сервер – это компьютер, предоставляющий свои
ресурсы в общее использование.
• файловый сервер
• сервер печати
• почтовый сервер
• сервер приложений
Клиент – это компьютер, использующий ресурсы
сервера.
клиент
запрос
• отправить запрос
• вывести ответ
ответ
программа-клиент
К.Ю. Поляков, Е.А. Ерёмин, 2018
cервер
• получить запрос
• выполнить задание
• отправить ответ
программа-сервер
http://kpolyakov.spb.ru
10. Терминальный сервер
Компьютерные сети, 9 класс10
Терминальный сервер
управление
(клавиатура, мышь)
рабочий стол
cервер
• процессор
• ОЗУ
• долговременная
память
терминалы
(«тонкие» клиенты)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
11.
Компьютерные сети, 9 классК.Ю. Поляков, Е.А. Ерёмин, 2018
11
http://kpolyakov.spb.ru
12. Компьютерные сети
12Компьютерные
сети
§ 2. Структуры сетей
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
13. Топология сетей
Компьютерные сети, 9 класс13
Топология сетей
схема соединения каналами связи компьютеров или
узлов сети между собой, и описание принципов
передачи данных
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
14. Заполни таблицу
Компьютерные сети, 9 класс14
Заполни таблицу
Вид
Схема
Принцип
осуществления
передачи
информации
К.Ю. Поляков, Е.А. Ерёмин, 2018
Сервер
(+/-)
Достоинства
Недостатки
http://kpolyakov.spb.ru
15. «Общая шина»
Компьютерные сети, 9 класс15
«Общая шина»
Шина – это линия связи, которую несколько устройств
используют для обмена данными.
шина
простота, дешевизна
небольшой расход кабеля;
легко подключать новые рабочие станции;
сеть работает при отказе любого компьютера
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
16. «Общая шина»
Компьютерные сети, 9 класс16
«Общая шина»
при разрыве кабеля вся сеть не работает
один канал связи на всех
низкий уровень безопасности
сложно обнаруживать неисправности
ограничение размера (не более 185 м)
!
Фактически используется в беспроводных сетях!
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
17. Заполни таблицу
Компьютерные сети, 9 класс17
Заполни таблицу
Вид
Обща
я
шина
Схема
Принцип
Сервер
осуществления
(+/-)
передачи
информации
Один канал
связи, данные
передаются по
очереди, сигнал
получают все
компьютеры.
-
Достоинства
Недостатки
при разрыве
простота,
кабеля вся сеть
дешевизна
не работает
небольшой
расход кабеля;
один канал
легко подключать связи на всех
новые рабочие
низкий уровень
станции;
безопасности
сеть работает
сложно
при отказе любого обнаруживать
компьютера
неисправности
ограничение
размера (не
более 185 м)
дорогостоящие
терминаторы
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
18. ДЗ
Компьютерные сети, 9 класс18
ДЗ
параграф №1, стр. 7-12, тест№2
https://kpolyakov.spb.ru/school/test9a/2.htm
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
19. «Кольцо»
Компьютерные сети, 9 класс19
«Кольцо»
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
20. «Кольцо»
Компьютерные сети, 9 класс20
«Кольцо»
большой размер сети (до 20 км)
надежная работа при большом потоке данных
не нужны коммутаторы
для подключения нового узла нужно
останавливать сеть
низкая безопасность
сложность настройки и поиска неисправностей
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
21. «Звезда»
Компьютерные сети, 9 класс21
«Звезда»
сервер
коммутатор
Коммутатор (свитч) передаёт пакеты только адресату!
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
22. «Звезда»
Компьютерные сети, 9 класс22
«Звезда»
сеть работает при отказе любой рабочей станции
высокий уровень безопасности
простой поиск неисправностей и обрывов
большой расход кабеля
высокая стоимость
при отказе коммутатора вся сеть не работает
количество рабочих станций ограничено
количеством портов коммутатора.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
23. «Дерево» = многоуровневая звезда
Компьютерные сети, 9 класс23
«Дерево» = многоуровневая звезда
сервер
коммутатор
коммутатор
К.Ю. Поляков, Е.А. Ерёмин, 2018
коммутатор
http://kpolyakov.spb.ru
24. По параграфу 3 работают самостоятельно по учебнику в электронной тетради
33Компьютерные
сети
§ 4. Глобальная сеть Интернет
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
25. Компьютерные сети
Компьютерные сети, 9 класс34
Что такое Интернет?
InterNet = Interconnected Networks
взаимосвязанные
сети
Интернет – это глобальная сеть, объединяющая
компьютерные сети.
распределённая
сеть
маршрутизаторы в
узлах сети
Данные хранятся на серверах (клиент-сервер).
Провайдер – это фирма, предоставляющая
пользователям выход в Интернет через её
локальную сеть.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
26. Что такое локальная сеть?
Компьютерные сети, 9 класс35
Подключение к Интернету
Интернет
ADSL-модем
телефонная станция
Локальная
сеть провайдера
сплиттер
кабельная
линия
сплиттер
К.Ю. Поляков, Е.А. Ерёмин, 2018
ADSL-модем
оптическая
сеть (PON)
http://kpolyakov.spb.ru
27. Одноранговые сети
Компьютерные сети, 9 класс37
Протоколы Интернета (TCP/IP)
Протокол – это набор правил и соглашений,
определяющих порядок обмена данными.
TCP (Transmission Control Protocol) – протокол
управления передачей данных
• установка соединения
• разбивка файла на пакеты (около 1,5 Кбайт)
• доставка данных
• сборка файла из пакетов
IP (Internet Protocol) – межсетевой протокол
• правила построения пакета
• система IP-адресов
TCP/IP – эти два протокола работают в паре
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
28. Сети с выделенным сервером
Компьютерные сети, 9 класс38
Протоколы Интернета
Протокол – это набор правил и соглашений,
определяющих порядок обмена данными.
HTTP (HyperText Transfer Protocol) – протокол передачи
гипертекста (переход по сайтам с помощью
гиперссылок)
HTTPS (HyperText Transfer Protocol Secure) – протокол
передачи гипертекста с шифрованием данных
FTP (File Transfer Protocol) – протокол передачи файлов
(файловые сервера)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
29. Терминальный доступ
Компьютерные сети, 9 классК.Ю. Поляков, Е.А. Ерёмин, 2018
39
http://kpolyakov.spb.ru
30. Беспроводные сети
Компьютерные сети, 9 класс40
IP-адреса
! Каждый узел имеет уникальный адрес!
3232262259
=110000001010100001101000011100112
11000000.10101000.01101000.011100112
192.168.104.115
? Каков интервал чисел в IP-адресе?
? Сколько байтов занимает IP-адрес?
0…255
4
IP-адрес содержит номер сети и код узла в
этой сети.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
31. Сетевое оборудование
410..255
IP-адрес:
0..255 0..255
0..255
193.162.230.115
номер сети + номер
компьютера в сети
32. Маршрутизатор
Компьютерные сети, 9 класс42
Задача
Определите, какие последовательности,
не могут быть IP-адресами:
1. 101.123.278.211
2. 156.21.0.1
3. 257.212.100.1
4. 112.345.0.43
5. 23.32.12.11
6. 101.1.201.2
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
33. Компьютерные сети
ЗадачиАвтор: Доронина Екатерина
Валерьевна, МКОУ СОШ № 1, Г.
34. Что такое Интернет?
ЗадачиАвтор: Доронина Екатерина
Валерьевна, МКОУ СОШ № 1, Г.
35. Подключение к Интернету
ЗадачиАвтор: Доронина Екатерина
Валерьевна, МКОУ СОШ № 1, Г.
36. Подключение через мобильную связь
Компьютерные сети, 9 класс48
Доменные имена
1984 г. DNS = Domain Name System, система доменных имён
173.194.71.94
www.google.ru
Домен – это группа символьных адресов в Интернете.
.
уровень 1
com
net
ru
ua
уровень 2
spb
msk
уровень 3
www
news
list
К.Ю. Поляков, Е.А. Ерёмин, 2018
edu
org
корневой домен
by
http://kpolyakov.spb.ru
37. Протоколы Интернета (TCP/IP)
Компьютерные сети, 9 класс49
Домены верхнего уровня
Вид организации
.com коммерческие организации
Страна
.ru, рф Россия
.edu
образование
.ua Украина
.gov
правительство США
.by Белоруссия
.mil
военные ведомства США
.uk Великобритания
.net
сетевые организации
.it
Италия
.org
разные организации
.jp
Япония
.info информационные сайты
.cn Китай
бизнес
.ca Канада
.name личные сайты
.de Германия
.museum музеи
.ee Эстония
.biz
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
38. Протоколы Интернета
Компьютерные сети, 9 класс50
Преобразование адресов
Сервер DNS преобразует доменный адрес в IP-адрес.
www.google.com
DNS-сервер
1) запрос серверу DNS для
получения IP-адреса сайта 193.124.85.210
www.google.com
2) ожидание ответа
3) запрос Web-страницы по
полученному IP-адресу
172.194.71.104
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
39.
Компьютерные сети, 9 класс51
Преобразование адресов
www.google.com
2ip.ru/lookup
ycad-ba.narod.ru
csmsoft.narod.ru
opera-site.narod.ru
detki-help.narod.ru
seasoft.narod.ru
…
К.Ю. Поляков, Е.А. Ерёмин, 2018
173.194.71.99
173.194.71.103
173.194.71.104
173.194.71.105
173.194.71.106
173.194.71.147
? Зачем?
193.109.247.225
2ip.ru/domain-list-by-ip
? Зачем?
http://kpolyakov.spb.ru
40. IP-адреса
Компьютерные сети, 9 класс53
Всемирная паутина (WWW)
1991 г.: WWW = World Wide Web – система
обмена данными в виде гипертекста.
WWW (World Wide Web) – служба для
обмена информацией в виде гипертекста.
Гипертекст – текст, содержащий активные
ссылки (гиперссылки) на другие
документы.
Т. Бернес-Ли
Гипермедиа – документ, который включает текст,
рисунки, звуки, видео, причём каждый элемент может
быть гиперссылкой.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
41.
Компьютерные сети, 9 класс54
Веб-сайты
Сайт (веб-сайт) – это группа веб-страниц, которые
расположены на одном сервере, объединены общей
идеей и связаны с помощью гиперссылок.
Веб-сервер – это программа, которая обеспечивает
работу сайтов: приём запросов и выдачу ответов по
протоколу HTTP или HTTPS.
Браузер – это программа для просмотра веб-страниц на
экране.
Internet Explorer
Mozilla Firefox
Google Chrome
Opera
Safari
К.Ю. Поляков, Е.А. Ерёмин, 2018
бесплатно!
http://kpolyakov.spb.ru
42. Задача
Компьютерные сети, 9 класс55
Адрес документа в Интернете
URL (Uniform Resource Locator) – универсальный адрес
документа в Интернете.
http: // www.vasya.ru / images/new/ qq.jpg
протокол
адрес сайта
http: // www.vasya.ru
каталог
(папка)
имя файла
главная страница
сайта: index.html,
index.htm
ftp: // files.vasya.ru / pub / download / qq.zip
скачать файл
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
43. IP-адреса
Компьютерные сети, 9 классК.Ю. Поляков, Е.А. Ерёмин, 2018
56
http://kpolyakov.spb.ru
44. Задачи
Компьютерные сети, 9 классК.Ю. Поляков, Е.А. Ерёмин, 2018
57
http://kpolyakov.spb.ru
45. Задачи
Компьютерные сети, 9 класс60
Как работает электронная почта?
[email protected]
mail.ru
SMTP
Вася
gmail.com
SMTP
Интернет
POP3,
IMAP почтовый
сервер
[email protected]
POP3,
почтовый IMAP
сервер
Джон
vasya@ mail.ru
почтовый ящик
почтовый сервер
@ коммерческое «at», 1971 год, Р. Томлисон
«собака» (Россия)
«кошечка» (Польша)
«роза» (Турция)
XVI век: вес 10 кг, объем 15 л (1 амфора)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
46. Задачи
Компьютерные сети, 9 класс61
Сообщение электронной почты
Кому (To):
От кого (From):
Ответить (Reply To):
Копия (CC):
Скрытая копия (BC):
Тема (Subject):
Здравствуйте, Джон!
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
О покупке слона
заголовок
письма
приветствие
Нет ли у вас желания купить
основной текст
слона?
присоединенные файлы
подпись
(attachments)
С уважением, Василий Рогов,
генеральный директор,
ООО «Слонопотам»,
г. Солнечный, ул. Слоновья, 2
тел. +7 (1812) 111-22-33
контактная
факс +7 (1812) 111-22-34
информация
http://slonopotam.ru
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
47. Задачи
Компьютерные сети, 9 класс62
Этикет при работе с электронной почтой
• точно формулируйте тему письма
• начинайте с приветствия, заканчивайте подписью
• пишите грамотно
• не используйте жаргон (может быть непонятен)
• не отправляйте пустых писем (пишите комментарий к
посылаемым файлам)
Привет, Сеня!
Посылаю эссе в приложении. Что ты об этом думаешь?
Серафим.
• не пишите всеми заглавными буквами (= крик)
• подтверждайте получение письма, если не можете
сразу ответить
Привет, Серафим!
Эссе получил. Подробнее отвечу завтра, когда прочитаю.
Сеня.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
48. Доменные имена
Компьютерные сети, 9 класс63
Почтовые программы
• создание, отправка и
прием сообщений
• автоматическая
проверка почты
• сортировка сообщений
• ведение адресной книги
Почта Windows
Microsoft Outlook
(в составе Microsoft Office)
TheBat (www.ritlabs.com)
Apple Mail (www.apple.com)
Mozilla Thunderbird
(www.mozilla-russia.org)
К.Ю. Поляков, Е.А. Ерёмин, 2018
бесплатно!
http://kpolyakov.spb.ru
49. Домены верхнего уровня
Компьютерные сети, 9 класс64
Файловые архивы
FTP-сервер – это программа, которая обеспечивает
обмен файлами: приём запросов и выдачу ответов по
протоколу FTP.
FTPS = File Transfer Protocol Secure – c шифрованием
Возможности
скачивание файлов c сервера (download)
загрузка файлов на сервер (upload), в том числе
загрузка Web-сайтов
Распространение программ:
freeware (бесплатные)
shareware (условно-бесплатные)
демо-версии
бета-версии
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
50. Преобразование адресов
Компьютерные сети, 9 класс65
FTP-серверы
Права доступа
login: кодовое имя пользователя
password: пароль
ftp:// user : asd @ files.example.com
Анонимный вход (в браузерах – автоматически)
login: anonymous
password: любой
ftp:// files.vasya.ru
Поиск файла на FTP-сервере
dirinfo, readme, index
ftpsearch.com
www.filesearch.ru
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
51. Преобразование адресов
Компьютерные сети, 9 класс66
FTP-клиенты
FileZilla (filezilla-project.org)
кроссплатформенная!
К.Ю. Поляков, Е.А. Ерёмин, 2018
бесплатно!
http://kpolyakov.spb.ru
52. Компьютерные сети
Компьютерные сети, 9 класс67
Форумы
Форумы – это специальные веб-сайты,
предназначенные для публичного общения
посетителей в форме обмена сообщениями.
ник (псевдоним)
аватар
цитата
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
53. Всемирная паутина (WWW)
Компьютерные сети, 9 класс68
Форумы
Тред (нить, thread) цепочка связанных сообщений,
которая содержит вопрос, ответы на него и
комментарии.
Топик (topic) – тема обсуждения.
Топик-стартер – тот, кто начал тему.
Оффтопик (off-topic) – высказывание не по теме.
Бан (ban) – лишение права отправлять сообщения.
FAQ (Frequently Asked Questions)
ЧаВо (Часто задаваемые вопросы) – список самых
частых вопросов новичков и ответы на них.
Модератор – имеет право удалять сообщения за:
оффтопик
оскорбление участников
нецензурную брань
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
54. Веб-сайты
Компьютерные сети, 9 класс69
Общение в реальном времени (онлайн)
Mail.ru Агент (www.mail.ru)
Kopete (для Linux)
iChat (для компьютеров Apple)
WhatsApp (www.whatsapp.com)
Telegram (telegram.org)
Viber (www.viber.com)
Skype (www.skype.com/ru )
• чат (обмен текстовыми сообщениями)
• голосовая и видеосвязь
• обмен файлами
• конференции
• звонки на мобильные и стационарные телефоны
• отправка SMS
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
55. Адрес документа в Интернете
Компьютерные сети, 9 класс70
Облачные хранилища данных
Объём?
Скорость чтения и записи?
2 Гбайт
15 Гбайт
40 Гбайт
• доступ с любого компьютера
• совместная работа с данными
• клиент не беспокоится о хранении данных
• синхронизация данных на разных устройствах
• нужен быстрый Интернет
• скорость работы ниже
• безопасность под угрозой!
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
56.
Компьютерные сети, 9 класс71
Информационные системы
Погода
pogoda.yandex.ru
gismeteo.ru
Расписание транспорта
rasp.yandex.ru
www.tutu.ru
+ покупка билетов
+ электронный билет
(e-ticket)
Карты
maps.yandex.ru
maps.google.ru
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
57.
72Компьютерные
сети
§ 6. Веб-сайты
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
58. Веб 2.0
Компьютерные сети, 9 класс73
Основные определения
Веб-страница – это гипертекстовый документ в Интернете.
Веб-сайт – группа веб-страниц, которые объединены
общей темой и оформлением, связаны гиперссылками.
Веб-сервер – это программа, которая принимает запросы
по протоколу HTTP (или HTTPS) и отвечает на них –
возвращает веб-страницы и дополнительные данные
(рисунки, звуковые файлы, видеофайлы).
Браузер – это программа для просмотра веб-страниц на
экране монитора.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
59. Веб 2.0
Компьютерные сети, 9 класс74
Что такое веб-страница?
HTML = Hypertext Markup Language
(язык разметки гипертекста)
! HTML – это не язык программирования!
запрос на
каждый файл!
images
sunset.jpg
tree.jpg
index.html
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas facilisis scelerisque metus, non hendrerit neque
convallis placerat. Phasellus consequat convallis nisl, a volutpat
quam posuere sed. Maecenas laoreet congue nibh, et euismod
lectus varius sit amet. In tristique mattis leo, eget commodo
ante egestas eget. Sed id purus quis ligula scelerisque fringilla.
Suspendisse scelerisque, sapien id scelerisque imperdiet, tellus
odio consequat nunc, eu fermentum diam lacus non urna.
Praesent faucibus massa in risus sagittis a luctus justo aliquam.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Praesent metus dolor, semper
ut fermentum vel, imperdiet in risus. Nam a lectus lorem,
dictum semper nulla. In eget ipsum non arcu aliquet lacinia.
Morbi iaculis sodales metus, vel posuere orci vulputate vel.
Nulla non felis sem, sagittis porttitor mi. Curabitur in tortor in
nisi egestas cursus quis at sapien. Proin pulvinar, odio id lacinia
suscipit, sem justo aliquam risus, nec suscipit enim felis at
justo. Donec at nulla orci, suscipit auctor arcu. Donec nec
tortor quis justo scelerisque cursus id et magna.
media
laugh.wav
movie.flv
Кроссбраузерность: сайт должен одинаково
отображаться в любом браузере.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
60. Как работает электронная почта?
Компьютерные сети, 9 класс75
Какие бывают веб-страницы?
• статические – готовые файлы *.htm, *.html
быстро загружаются
почти не нагружают сервер
невозможна работа с базами данных (в т.ч.
гостевые книги, комментарии, Веб 2.0)
• динамические – полностью или частично
создаются на сервере в момент запроса
*.php, *.asp, *.pl, *.cgi, *.shtml …
работа с базами данных
загружаются медленнее
дополнительная нагрузка на сервер
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
61. Сообщение электронной почты
Компьютерные сети, 9 класс76
Веб-программирование
• серверные программы (back-end) выполняются на
сервере, языки PHP, Python, JavaScript, Perl, …
• клиентские программы (front-end) – на языке
JavaScript, выполняются в браузере.
Скрипт (сценарий) – это программа для
автоматизации действий пользователя.
можно
• заменять текст, оформление, рисунки
• строить многоуровневые выпадающие меню
• скрывать и открывать части страницы
• проверять данные, введённые пользователем
• выполнять вычисления и т. д.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
62. Этикет при работе с электронной почтой
Компьютерные сети, 9 класс77
Системы управления сайтами
CMS = Content Management System, система управления
содержимым сайта.
!
Функции:
Не нужно знать HTML!
• создание разделов сайта
• создание страниц
• база данных пользователей
• управление доступом
бесплатно!
• обеспечение навигации и поиска
1c-bitrix.ru
ucoz.ru
К.Ю. Поляков, Е.А. Ерёмин, 2018
Joomla!
joomla.org
Drupal
drupal.org
wordpress.org
http://kpolyakov.spb.ru
63. Почтовые программы
Компьютерные сети, 9 класс78
Как разместить сайт?
На своём компьютере:
• постоянно включенный компьютер
• стабильный скоростной канал связи
• «белый» IP-адрес;
• установка и настройка веб-сервера
• защита сайта от взломщиков, вредоносных программ
и сетевых атак – самостоятельно
Хостинг — услуга по размещению сайта (данных) на
постоянно работающем сервере.
Бесплатные хостинги
• ucoz.ru
• www.holm.ru
• webservis.ru
• www.hut.ru
• www.hostinger.ru
• wallst.ru
К.Ю. Поляков, Е.А. Ерёмин, 2018
оплата – реклама
http://kpolyakov.spb.ru
64. Файловые архивы
Компьютерные сети, 9 класс79
Тарифный план
Тарифный план стоимость
• ограничение объема данных (файлов и почты)
• ограничение трафика
100 Мбайт
ежедневно: 100 пользователей
10 страниц по 100 Кбайт
в месяц: 3 Гбайт
• поддержка баз данных (да/нет/количество)
• поддержка серверных скриптов (PHP)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
65. FTP-серверы
Компьютерные сети, 9 класс80
Загрузка файлов на сайт
• создание страниц в конструкторе: *.ucoz.ru
• FTP
FileZilla (filezilla-project.org)
сайт
логин
пароль
локальный
компьютер
К.Ю. Поляков, Е.А. Ерёмин, 2018
каталог на
сайте
http://kpolyakov.spb.ru
66. FTP-клиенты
81Компьютерные
сети
§ 7. Язык HTML
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
67. Форумы
Компьютерные сети, 9 класс82
Первая веб-страница
Тэг – команда языка HTML
<html>
открывающий тэг
</html>
закрывающий тэг
контейнер
(парный тэг)
<html>
<head>
<title>Первая страница</title>
</head>
<body>
Привет!
</body>
</html>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
68. Форумы
Компьютерные сети, 9 класс83
Заголовки
заголовок
документа
заголовок
раздела
<h1> – заголовок документа
<h2> – заголовок раздела
<h3> – заголовок подраздела
<h4> – заголовок параграфа
<h1>Глава 1. Информация</h1>
<h2>1.1 Что такое информация?</h2>
Задачи, связанные с хранением, передачей и
обработкой информации человеку приходилось решать
во все времена...
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
69. Общение в реальном времени (онлайн)
Компьютерные сети, 9 класс84
Выравнивание заголовков
атрибут (свойство)
<h1 align="center">Глава 1. Информация</h1>
left,
center,
right
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
70. Облачные хранилища данных
Компьютерные сети, 9 класс85
Абзацы (параграфы)
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...
! Браузер «проглатывает» переходы на новую строку!
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
71. Информационные системы
Компьютерные сети, 9 класс86
Абзацы (параграфы)
paragraph – абзац
<p>И вечный бой! Покой нам только снится</p>
<p>Сквозь кровь и пыль...</p>
<p>Летит, летит степная кобылица </p>
<p>И мнёт ковыль...</p>
интервал
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
72. Компьютерные сети
Компьютерные сети, 9 класс87
Выравнивание абзацев
left, center, right, justify
<p align="justify">
Молекула воды испарилась из кипящего
чайника и, подлетая к потолку, лоб в
лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
</p>
? Что плохо?
Решение:
align="left"
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
73. Основные определения
Компьютерные сети, 9 класс88
Переход на новую строку
break –
разрыв
И вечный бой! Покой нам
только снится<br>Сквозь кровь и
пыль... <br>Летит, летит
степная кобылица<br>И мнёт ковыль...
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
74. Что такое веб-страница?
Компьютерные сети, 9 класс89
Специальные символы (HTML entities)
Символ
Название
HTML-код
неразрывный пробел
–
–
короткое тире
—
—
(длинное) тире
§
§
параграф
«
«
левая русская кавычка
»
»
правая русская кавычка
<
<
левая угловая скобка
>
>
правая угловая скобка
©
©
символ авторского права
®
®
зарегистрированная торговая марка
°
°
градус
²
²
квадрат
³
³
куб
×
×
знак умножения
÷
÷
знак деления
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
75. Какие бывают веб-страницы?
Компьютерные сети, 9 класс90
Применение специальных символов
Неразрывный пробел ( )
не отрывать:
Дом сдали в 2011 году.
год
А.С. Пушкин
инициалы
Пёс весил 12 кг.
единицы
измерения
Из дома вышел А.С.
Пушкин – солнце
русской поэзии.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
76. Веб-программирование
Компьютерные сети, 9 класс91
Применение специальных символов
Длинное тире (—)
Вышел А.С. Пушкин —
солнце русской поэзии.
не начинать
строку с тире!
Вышел А.С. Пушкин
– солнце русской
Что плохо?
?
поэзии.
Короткое тире (–)
Дорога Васюки–Васютино строилась
в 2007–2013 годах.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
77. Системы управления сайтами
Компьютерные сети, 9 класс92
Применение специальных символов
Угловые скобки (< >)
<p>Верно ли, что X < Y?</p>
?
В чём проблема?
X < Y
это начало
тэга?
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
78. Как разместить сайт?
Компьютерные сети, 9 класс93
Гиперссылки (локальные)
страница в том же каталоге:
Переход на
<a href="newpage.html">новую страницу</a>.
anchor
(якорь)
hyper reference
(гиперссылка)
во вложенном каталоге:
<a href="news/info.htm">Информация</a>.
в родительском каталоге:
<a href="../info.htm">Информация</a>.
в соседнем каталоге:
<a href="../news/info.htm">Информация</a>.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
79. Тарифный план
Компьютерные сети, 9 класс94
Как записать гиперссылки от show.htm?
main
index.htm
goods
goods.htm
food
food.htm
show
show.htm
history
hist.htm
before
before.htm
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
80. Загрузка файлов на сайт
Компьютерные сети, 9 класс95
Куда переход?
<a href="example.html">...</a>
<a href="../example.html">...</a>
<a href="../../../example.html">...</a>
<a href="../new/old/example.html">...</a>
<a href="download/example.zip">...</a>
<a href="mailto:[email protected]">...</a>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
81. Компьютерные сети
Компьютерные сети, 9 класс96
Гиперссылки (внешние)
на URL:
<a href="http://example.net/news/info.htm">
Информация</a>.
на главную страницу сайта:
<a href="http://example.net">Информация</a>.
для скачивания архива:
<a href="http://example.net/game.zip">
Скачать</a>.
для запуска почтовой программы:
<a href="mailto:[email protected]">
Напишите мне!</a>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
82. Первая веб-страница
Компьютерные сети, 9 класс97
Маркированные списки
unordered list
(неупорядоченный список)
list item
(элемент списка)
<ul>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ul>
изменение маркера:
<ul type="disc">
...
</ul>
К.Ю. Поляков, Е.А. Ерёмин, 2018
disc
circle ○
square ■
http://kpolyakov.spb.ru
83. Заголовки
Компьютерные сети, 9 класс98
Нумерованные списки
ordered list
(упорядоченный список)
<ol>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ol>
изменение нумерации:
1, i, I, a, A
<ol type="i" start="4">
...
</ol>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
84. Выравнивание заголовков
Компьютерные сети, 9 класс99
Многоуровневые списки
<ol>
<li>Россия
<ul>
<li>Москва</li>
<li>Санкт-Петербург</li>
</ul>
</li>
<li>Украина
<ul>
<li>Киев</li>
<li>Одесса</li>
</ul>
</li>
</ol>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
85. Абзацы (параграфы)
Компьютерные сети, 9 класс100
Форматы рисунков
GIF (Graphic Interchange Format)
• сжатие без потерь (LZW)
• прозрачные области
• анимация
• только с палитрой (2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert Group)
• сжатие с потерями
• только True Color (16,7 млн. цветов)
• нет анимации и прозрачности
рисунки с размытыми границами, фото
PNG (Portable Network Graphic)
• сжатие без потерь
• с палитрой (PNG-8) и True Color (PNG-24)
• прозрачность и полупрозрачность (альфа-канал)
• нет анимации
• плохо сжимает мелкие рисунки
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
86. Абзацы (параграфы)
Компьютерные сети, 9 класс101
Форматы рисунков
SVG (Scalable Vector Graphics, масштабируемые
векторные изображения)
<svg>
<rect width="135" height="30"
x="0" y="10"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,255,255)"/>
<rect width="135" height="30" x="0" y="40"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(0,0,255)"/>
<rect width="135" height="30" x="0" y="70"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,0,0)"/>
</svg>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
87. Выравнивание абзацев
Компьютерные сети, 9 класс102
Рисунки в документе
из той же папки:
image
(изображение)
source
(источник)
<img src="night.jpg">
из другой папки:
<img src="images/night.jpg">
<img src="../../images/night.jpg">
с другого сервера:
<img src="http://example.com/img/night.jpg">
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
88. Переход на новую строку
Компьютерные сети, 9 класс103
Выравнивание
<img src="flag.jpg" align="left">
left
top
К.Ю. Поляков, Е.А. Ерёмин, 2018
right
bottom
(по умолчанию)
middle
http://kpolyakov.spb.ru
89. Специальные символы (HTML entities)
Компьютерные сети, 9 класс104
Отступы
<img src="net.jpg"
align="left">
<img src="net.jpg"
align="left"
hspace="10"
vspace="10">
vspace
(vertical space)
hspace
(horizontal space)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
90. Применение специальных символов
Компьютерные сети, 9 класс105
Другие атрибуты
<img src="night.jpg"
надпись на месте
рисунка, если его нет
всплывающая
подсказка
размеры позволяют:
• растянуть – сжать
• не портить дизайн,
если рисунка нет
К.Ю. Поляков, Е.А. Ерёмин, 2018
alt="Фото: Ладога"
title="Ночь на Ладоге"
width="800"
height="600">
http://kpolyakov.spb.ru
91. Применение специальных символов
Компьютерные сети, 9 класс106
Рисунок-гиперссылка
локальная ссылка:
иначе будет синяя
рамка вокруг
<a href="gallery.htm">
<img src="night.jpg" border="0">
</a>
если </a> не вплотную к
<img …>, будет «хвост»
ссылка на другой сервер:
не будет
«хвоста»
<a href="http://www.mail.ru">
<img src="mailru.jpg"
alt="Бесплатная почта" border="0"></a>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
92. Применение специальных символов
Компьютерные сети, 9 класс107
Вставка векторных рисунков
тип нестандартных
данных
<object type="image/svg+xml"
имя файла
data="test.svg"
width="48" height="48"
размеры
align="left">
выравнивание
</object>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
93. Гиперссылки (локальные)
Компьютерные сети, 9 класс108
Конец фильма
ПОЛЯКОВ Константин Юрьевич
д.т.н., учитель информатики
ГБОУ СОШ № 163, г. Санкт-Петербург
[email protected]
ЕРЕМИН Евгений Александрович
к.ф.-м.н., доцент кафедры мультимедийной
дидактики и ИТО ПГГПУ, г. Пермь
[email protected]
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
94. Как записать гиперссылки от show.htm?
Компьютерные сети, 9 класс109
Источники иллюстраций
1. techlearning.com
2. www.hp.com
3. technotactics.in
4. www.dlink.ru
5. dlink.com.ru
6. www.texnooffice.ru
7. hitechworldwide.net
8. ru.wikipedia.org
9. fotosearch.com
10. magicjack.com
11. map.yandex.ru
12. keenetic.com
13. www.innopvaticecomputers.in
14. иллюстрации художников издательства «Бином»
15. авторские материалы
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru