-
Notifications
You must be signed in to change notification settings - Fork 3
/
internet.html
220 lines (220 loc) · 14.3 KB
/
internet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<title>Устройство сети Интернет</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="shower/themes/ribbon/styles/styles.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="icon" sizes="16x16" href="favicon.png">
<link rel="icon" sizes="32x32" href="favicon.png">
<style>
.shower {
--slide-ratio: calc(16 / 9);
}
#cover h2 {
margin: 30px 0 0;
color: rgb(51,51,51);
text-align: center;
font-size: 70px;
}
#cover p {
margin: 10px 0 0;
text-align: center;
color: rgb(51,51,51);
font-style: italic;
font-size: 20px;
}
#cover p a {
color: rgb(51,51,51);
}
span {
padding-bottom: 3px;
}
.url {
display: inline-block;
position: absolute;
left: 50%;
top: 41%;
transform: translateX(-50%);
}
.http,
.www,
.domain-2,
.domain-1 {
display: inline-block;
height: initial;
position: relative;
}
.http::after,
.www::after,
.domain-2::after,
.domain-1::after {
content: "";
position: absolute;
top: 1.6em;
left: 3%;
width: 94%;
height: 0.5em;
border-bottom: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
z-index: 10;
white-space: pre;
}
.http::after {
content: " 1";
border-color: rgb(33, 84, 192);
color: rgb(33, 84, 192);
}
.www::after {
content: " 2";
border-color: rgb(33, 192, 67);
color: rgb(33, 192, 67);
}
.domain-2::after {
content: " 3";
border-color: rgb(192, 189, 33);
color: rgb(192, 189, 33);
}
.domain-1::after {
content: "4";
border-color: rgb(207, 39, 33);
color: rgb(207, 39, 33);
}
.url-legend {
position: relative;
top: 80px;
}
.url-legend-item:first-child::before {
color: rgb(33, 84, 192);
}
.url-legend-item:nth-child(2)::before {
color: rgb(33, 192, 67);
}
.url-legend-item:nth-child(3)::before {
color: rgb(192, 189, 33);
}
.url-legend-item:nth-child(4)::before {
color: rgb(207, 39, 33);
}
</style>
</head>
<body class="shower list">
<header class="caption">
<h1>Устройство сети Интернет</h1>
</header>
<section class="slide" id="cover">
<h2>Устройство сети Интернет</h2>
<p>Автор <a href="https://vallek.github.io/index.html">Валера Хаслер</a></p>
</section>
<section class="slide">
<h2>Что такое Интернет?</h2>
<p>Всемирная (глобальная) компьютерная сеть Интернет</p>
</section>
<section class="slide">
<h2>Компьютерная сеть</h2>
<ul>
<li>Два или больше устройств, соединенных так, чтобы между ними можно было передавать информацию.</li>
<li class="next">Предоставление доступа, передача файлов</li>
<li class="next">Работает с помощью протоколов (программные инструкции) и железа (аппаратной части).</li>
<li class="next">Устройства могут быть физически соединены кабелями, которые подключают к сетевой карте компьютера (настольный ПК, ноутбук) или беспроводным способом, через wi-fi (смартфоны, планшеты).</li>
</ul>
</section>
<section class="slide">
<h2>Локальные сети Ethernet</h2>
<p>Ограничены физическими рамками. Локальные сети можно встретить в офисах, институтах, домах. В них могут входить 10, 100, 1000 устройств.</p>
</section>
<section class="slide">
<h2>Глобальная сеть</h2>
<p>Объединяет устройства по всему миру.</p>
<img class="place" style="max-width: 400px; top: 60%;" src="pictures/www.svg" alt="">
<a style="font-size: 12px; position: absolute;" href="https://www.submarinecablemap.com/">Карта подводных магистралей</a>
<a class="copyright" href="https://www.rawpixel.com/image/477969/character-illustration-people-global-network-concept" style="background-image:none; text-decoration: underline; margin-right: 5px;">изображение с сайта rawpixel</a>
</section>
<section class="slide">
<h2>Провайдеры</h2>
<p>Доступ к сети предоставляют провайдеры (ISP). Предлагают выбор из тарифов, которые могут отличаться объемом информации, скоростью и опциями. Работают на территории района, города или страны.</p>
<p>Проводят кабель от квартир и домов к магистрали, которая объединяет города, страны и континенты. Клиенты могут быть подключены беспроводным способом, по вайфаю. В общественных местах с бесплатным вайфаем тоже есть свои провайдеры. Магазины, рестораны, ТК выступают посредником между ними и вами.</p>
</section>
<section class="slide">
<h2>Клиент и сервер</h2>
<p>Компьютер пользователя, который хочет получить доступ к информации называют <strong>клиентом</strong>. Большая часть домашних и офисных компьютеров — клиенты. Клиентом также называют программы, которые используют Интернет (браузеры, почтовые клиенты, читалки).</p>
<p>Компьютер, где расположена информация называют <strong>сервером</strong>. Это может быть, как обычный домашний компьютер, так и целый комплекс специальных устройств.</p>
</section>
<section class="slide">
<h2>Интернет</h2>
<p>Интернет — это название самой популярной глобальной сети. Существовали и существуют другие. Но сеть Интернет стала настолько популярной, что ее название стало нарицательным. В быту интернетом как правило называют доступ к сети или часть глобальной сети — всемирную паутину, то есть веб-сайты.</p>
</section>
<section class="slide">
<h2>Всемирная паутина</h2>
<p>Сеть интернет позволяет выполнять разные задачи с помощью протоколов (набор TCP/IP). Например, передавать файлы (FTP), посылать и получать письма по электронной почте (SMTP, POP3, IMAP) и многое другое. Но самая популярная — доступ к веб-сайтам (HTTP).</p>
<p>Веб-страница — это документ, файл с содержимым, к которому можно предоставить и получить доступ. Веб-сайт — это объединение страниц. Глобальная паутина (world wide web, www) — все веб-сайты.</p>
</section>
<section class="slide">
<h2>Содержимое</h2>
<p>Когда-то сеть, как и сами компьютеры, могла содержать только текстовую информацию. Интернет использовали в военных и научных целях. Позже его стали использовать в бизнесе и быту. Появились новые требования к компьютерам.</p>
<p>Сейчас сайты могут содержать <strong>текст</strong>, <strong>изображения</strong>, <strong>звук</strong>, <strong>видео</strong>.</p>
</section>
<section class="slide">
<h2>Веб-приложения</h2>
<p>Сайты позволяют выполнять разные задачи. Пользователи могут вводить информацию, которую обрабатывает сервер, чтобы выдать результат. Например, сайт подскажет ближайший ресторан на карте, рекомендации на основе ваших интересов, поможет управлять финансами и множество других задач.</p>
<p>В наше время граница между программами и веб-сайтами стирается. Многие сайты выпускают в виде отдельных приложений. И наоборот многие программы выводят в веб.</p>
</section>
<section class="slide">
<h2>IP адреса</h2>
<p>Чтобы компьютеры могли находить друг друга в сети, у каждого есть свой адрес. Как в реальном мире есть адреса квартир, чтобы вы могли прийти в гости.</p>
<p>Протокол IP отвечает за адреса устройств. Они представлены в виде набора чисел. Например адрес главной страницы Гугл — 172.217.18.100 (попробуйте ввести этот адрес в адресной строке браузера!)</p>
</section>
<section class="slide">
<h2>URL адреса</h2>
<p>IP адреса удобны для машин, но не людей. Поэтому создали URL адреса в виде слов.</p>
<span class="url">
<span class="http">https</span>://<span class="www">www</span>.<span class="domain-2">yandex</span>.<span class="domain-1">ru</span>
</span>
<ol class="url-legend">
<li class="url-legend-item">Протокол передачи данных (s на конце означает шифрование)</li>
<li class="url-legend-item">Обозначение всемирной паутины (часто опускается)</li>
<li class="url-legend-item">Домен второго уровня (любое незанятое слово)</li>
<li class="url-legend-item">Доменная зона (означает страну и язык)</li>
</ol>
</section>
<section class="slide">
<h2>DNS</h2>
<p>DNS серверы помогают сопоставить доменные имена с нужными IP. DNS используются на уровне провайдеров. Кроме того некоторые компании предоставляют свои собственные, в том числе бесплатные (<a href="https://developers.google.com/speed/public-dns">Гугл</a>, <a href="https://developers-cloudflare-com.translate.goog/1.1.1.1/ip-addresses/?_x_tr_sl=en&_x_tr_tl=ru&_x_tr_hl=ru&_x_tr_pto=rq">Cloudflare</a> и <a href="https://en.wikipedia.org/wiki/Public_recursive_name_server">другие</a>).</p>
<a href="https://howdns.works/ru/">Как работает DNS</a>
</section>
<section class="slide">
<h2>HTML</h2>
<p>Для создания документов в вебе придумали специальный язык — HTML.</p>
<p>HTML — язык гипертекстовой разметки.</p>
<p>Гипертекст — текст, часть которого может ссылаться на место в документе, другой документ, или сайт. Это называют <a href="">ссылкой</a>. Ссылки в вебе интерактивны, то есть на них можно нажать, чтобы перейти по адресу ссылки.</p>
</section>
<section class="slide">
<h2>HTML</h2>
<p>HTML используется для разметки структуры и содержимого страницы. На этом языке мы даем инструкции программам и устройствам, которые используют посетители сайтов. В основном это браузеры на десктопах, ноутбуках, планшетах и смартфонах. Кроме того существуют читалки для слабовидящих.</p>
</section>
<section class="slide">
<h2>HTML</h2>
<p>С помощью HTML мы сообщаем браузеру:</p>
<ul>
<li><strong>Что</strong> мы хотим показать пользователю. То есть содержимое (контент).</li>
<li>Как разные части содержимого связанны друг с другом. То есть <strong>структуру</strong> содержимого. Например, заголовки разделяют страницу на части.</li>
<li><strong>Смысловое значение</strong> каждого элемента. Это называют семантикой.</li>
</ul>
</section>
<section class="slide">
<h2>Как писать код</h2>
<p>Код пишут в формате plain text. Такой текст содержит только данные о введенных символах без оформления (в отличие от файлов текстовых процессоров типа MS Word).</p>
<p>Есть множество редакторов кода от обычного Блокнота до более продвинутых (VS Code, Sublime Text и более специализированные IDE), которые облегчают работу с кодом.</p>
</section>
<footer class="badge">
<a href="https://github.com/Vallek/shower">Fork me on GitHub</a>
</footer>
<div class="progress"></div>
<script src="shower/shower.min.js"></script>
<script src="js/nav.js"></script>
</body>
</html>