-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhtml-course.html
154 lines (153 loc) · 22.2 KB
/
html-course.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&family=Poppins&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Teen Tutor</title>
</head>
<body>
<header class="header">
<nav class="navigation">
<a class="logo" href="index.html"><img src="img/logo.svg" alt="Логотип" width="265" height="38"></a>
</nav>
</header>
<main class="course">
<div class="course-navigation-container">
<h1>Веб-дизайн и разработка сайта</h1>
<ol class="course-navigation">
<li class="course-navigation-theme">
Всемирная компьютерная сеть Интернет
<ol>
<li class="course-navigation-item" id="internet-history">История создания интернета</li>
<li class="course-navigation-item" id="ip">IP-адрес</li>
<li class="course-navigation-item" id="dns">DNS</li>
</ol>
</li>
<li class="course-navigation-theme">
Основы HTML
<ol>
<li class="course-navigation-item" id="www">Всемирная паутина</li>
<li class="course-navigation-item" id="html">HTML</li>
<li class="course-navigation-item" id="html-structure">Структура HTML документа</li>
<li class="course-navigation-item">Разметка текста в коде - HTML</li>
<li class="course-navigation-item">Списки HTML</li>
<li class="course-navigation-item">Ссылки HTML</li>
<li class="course-navigation-item">Таблицы в HTML</li>
<li class="course-navigation-item">Изображение в HTML</li>
</ol>
</li>
<li class="course-navigation-theme">
Основы CSS
<ol>
<li class="course-navigation-item">История CSS</li>
<li class="course-navigation-item">CSS - элементы.<br>Изображение и текст.</li>
<li class="course-navigation-item">Присоединение CSS к HTML-документу</li>
</ol>
</li>
</ol>
</div>
<div class="course-themes-container">
<section id="internet-history" class="course-theme active">
<h2>1.1 История создания интернета</h2>
<p><b>Интернет</b> — информационно-коммуникационная сеть и всемирная система объединённых компьютерных сетей для хранения и передачи информации.</p>
<p><b>Раньше</b> упоминался как <b>Всемирная сеть</b> и <b>Глобальная сеть</b>, а также просто Сеть. Построена на базе стека протоколов TCP/IP. На основе Интернета работает Всемирная паутина (World Wide Web, WWW) и множество других систем передачи данных. К началу 2020 года число пользователей достигло 4,5 млрд человек, что составляет более 50% от всех жителей планеты Земля. Во многом это было обусловлено широким распространением сотовых сетей с доступом в Интернет стандартов 3G, 4G и 5G, развитием социальных сетей и удешевлением стоимости интернет-трафика.</p>
<p><b>История Интернета</b> началась с разработки компьютеров в 1950-х годах и появления научных и прикладных концепций глобальных вычислительных сетей почти одновременно в разных странах, в первую очередь в научных и военных лабораториях в США, Великобритании и Франции. Аналогичные разработки существовали и в СССР, но были засекречены военными, а проект гражданской сети ОГАС (1959) был искусственно заторможен. Тем не менее, в 1978 году в СССР появляется совместимая с Интернетом Академсеть, которая с 1981 года была подключена к формировавшемуся тогда международному Интернету.</p>
<p>Принципы, по которым строится Интернет, впервые были применены в сети <b>ARPANET</b>, созданной в 1969 году по заказу американского военного агентства <b>DARPA</b>. Используя наработки ARPANET, в 1984 году Национальный научный фонд США создал сеть NSFNET для связи между университетами и вычислительными центрами. В отличие от закрытой ARPANET подключение к NSFNET было достаточно свободным, и к 1992 году к ней подключились более 7500 мелких сетей, включая 2500 за пределами США. С передачей опорной сети NSFNET в коммерческое использование появился современный Интернет.</p>
<p>До 1980-х годов компьютерные сети были доступны в основном сотрудникам специализированных учреждений, а в 1980-х годах начинается распространение <b>персональных компьютеров</b>, в частности, домашних компьютеров, в частном пользовании, что породило массовый спрос на сети (которому предшествовала ручная передача носителей). Если специалисты в основном использовали сети для научно-производственных задач, то частные лица прежде всего проявили интерес к личному общению и получению популярных текстов и прочих файлов для своих ПК. Первой массовой сетевой технологией, решавшей эти задачи, стала электронная почта, на её базе в 1980 году была создана первая массовая глобальная сеть обмена компьютерной информацией — Usenet.</p>
<div class="test-container">
<h4>В каком году, впервые были применены в сети ARPANET принципы, по которым строится Интернет?</h4>
<form>
<label class="test-question">
<input type="radio" name="test-1" value="1969" class="correct"> 1969
</label>
<label class="test-question">
<input type="radio" name="test-1" value="1980"> 1980
</label>
<label class="test-question">
<input type="radio" name="test-1" value="2000"> 2000
</label>
<label class="test-question">
<input type="radio" name="test-1" value="1950"> 1950
</label>
</form>
<div class="submit">Отправить</div>
</div>
</section>
<section id="ip" class="course-theme hidden">
<h2>1.2 IP-адрес</h2>
<p>Каждый компьютер, подключённый к Интернету, получает свой уникальный 32-битовый идентификатор, называемый IP-адресом. Таких адресов более 4 миллиардов (223 - 1 =4 294 967 295). Человеку, в отличие от технических систем, сложно работать с длинными цепочками из нулей и единиц. Поэтому вместо 32-битового представления мы используем запись IP-адреса в виде четырёх десятичных чисел (от 0 до 255), разделённых точками, например 204.152.190.71.Для осуществления такого перехода 32-битовая запись разбивается на четыре части (по 8 битов), каждая из которых как 8-разрядное двоичное число переводится в десятичную систему счисления.</p>
<p>Объединение компьютерных сетей в единую всемирную структуру стало возможным благодаря протоколу IP, реализующему адресную систему, в которой каждому компьютеру присваивается индивидуальный адрес (IP-адрес, состоящий из 4 групп цифр, разделенных точками).</p>
<p>Каждая из сетей, входящая в Интернет, подсоединена к единой структуре через маршрутизатор – специальное аппаратное или программное устройство, производящее фильтрацию, сортировку и перенаправление пакетов данных компьютерам получателей, исходя из их IP-адресов. Такая система позволяет передавать информацию из одного компьютера на другой в пределах целого Интернета.</p>
<p>IP-адрес — это сокращение от фразы Internet Protocol Address, что означает — уникальный сетевой адрес.</p>
<p>Иными словами когда вы отправляете письмо (обычное, а не электронное), то указываете точный адрес человека — страну, город, улицу, дом и, наконец, ФИО. В этом случае письмо, по идее, должно дойти без проблем.</p>
<p>Так и в компьютерной сети IP-адрес точно таким же образом идентифицирует ваш (или любой другой) компьютер. Каждый компьютер в сети должен иметь свой уникальный адрес, чтобы информация с другого компьютера попала именно ему. Этот уникальный адрес и называется IP-адрес.</p>
<p>Причем справедливо это будет для любой сети: от локальной домашней до сети Интернет. Не важно сколько в ней будет компьютеров — два, десять или десять тысяч. Это может быть и беспроводная домашняя сеть или корпоративная сеть компании. В любом случае, все компьютеры должны иметь уникальный IP.</p>
<div class="test-container">
<h4>В каком году, впервые были применены в сети ARPANET принципы, по которым строится Интернет?</h4>
<form>
<label class="test-question">
<input type="radio" name="test-2" value="это строка чисел, разделенных точками"> это строка чисел, разделенных точками
</label>
<label class="test-question">
<input type="radio" name="test-2" value="это сокращение от фразы Internet Protocol Address, что означает — уникальный сетевой адрес" class="correct"> это сокращение от фразы Internet Protocol Address, что означает — уникальный сетевой адрес
</label>
<label class="test-question">
<input type="radio" name="test-2" value="уникальный числовой идентификатор устройства в компьютерной сети"> уникальный числовой идентификатор устройства в компьютерной сети
</label>
<label class="test-question">
<input type="radio" name="test-2" value="набор правил, регулирующих формат данных, отправляемых через интернет или локальную сеть"> набор правил, регулирующих формат данных, отправляемых через интернет или локальную сеть
</label>
</form>
<div class="submit">Отправить</div>
</div>
</section>
<section id="dns" class="course-theme hidden">
<h2>1.3 Доменная система имен (DNS)</h2>
<p><b>DNS (Domain Name System «система доменных имён»)</b> — компьютерная распределённая система для получения информации о доменах. Чаще всего используется для получения IP-адреса по имени хоста (компьютера или устройства), получения информации о маршрутизации почты и/или обслуживающих узлах для протоколов в домене.<br>Распределённая база данных DNS поддерживается с помощью иерархии DNS-серверов, взаимодействующих по определённому протоколу.<br>Основой DNS является представление об иерархической структуре имени и зонах. Каждый сервер, отвечающий за имя, может передать ответственность за дальнейшую часть домена другому серверу (с административной точки зрения — другой организации или человеку), что позволяет возложить ответственность за актуальность информации на серверы различных организаций (людей), отвечающих только за «свою» часть доменного имени.<br>Начиная с 2010 года в систему DNS внедряются средства проверки целостности передаваемых данных, называемые DNS Security Extensions (DNSSEC).</p>
<img src="img/dns.svg" width="931" height="286">
</section>
<section id="www" class="course-theme hidden">
<h2>2.1 Всемирная паутина</h2>
<p><b>Всемирная паутина</b>, или <b>WWW</b>,- это сервис, с помощью которого пользователи сети получают доступ к информационным ресурсам, хранящимся на компьютерах в разных частях света. Основой WWW являются web-страницы и web-сайты, на которых информация представлена в виде гипертекстовых и гипермедийных документов.Вы уже неоднократно путешествовали по Всемирной паутине с помощью браузеров, осуществляя переходы по гиперссылкам; искали ответы на интересующие вас вопросы с помощью поисковых систем по ключевым словам.</p>
<p>Сущестует ещё одна возможность поиска нужного документа в Интернете это использование адреса документа. Адрес документа в Интернете eгo <b>URL</b> (<b>Uniform Resource Locator</b> - универсальный указатель ресурса) состоит из следующих частей:</p>
<ol>
<li>название протокола со знаками :// в конце названия;</li>
<li>доменное имя сервера со знаком / в конце имени;</li>
<li>полное имя файла на сервере, где он находится.</li>
</ol>
<p>Рассмотрим <b>пример</b> адреса (URL):</p>
<img src="img/url.png" width="565" height="80">
<p>Первая часть адреса - это имя протокола. Оно определяет тип документа. Запись <i>http://</i> указывает на то, что это Web-страница (протокол <b>HTTP - Hyper Text Transfer Protocol</b> - протокол передачи гипертекстовых файлов). Для других типов документов протоколы могут быть другими.<br>Вторая часть адреса - это доменное имя сервера, на котором хранится страница.<br>Третья часть адреса- полное имя файла, включающее путь к файлу, т. е. все каталоги, в которые следует последовательно зайти, чтобы открыть требуемый файл.</p>
</section>
<section id="html" class="course-theme hidden">
<h2>2.2 HTML</h2>
<p><b>HTTP (Hyper Text Transfer Protocol)</b> - протокол передачи гипертекста.</p>
<p><b>HTTP</b> - протокол (то есть регламент, набор условных обозначений), который устанавливает определённый формат общения между клиентом и сервером. Суть его заключается в том, что клиент посылает запросы на URL, а сервер ему отвечает.</p>
<p><b>Клиент</b> - тот, кто посылает запросы. Когда ты открываешь сайт, ты - клиент.</p>
<p><b>Сервер</b> - тот, кто принимает запросы и отвечает на них. Когда ты открываешь сайт Яндекс, сервер Яндекса посылает веб-страничку - отвечает на запрос.</p>
<p>Разберем что такое "послать запрос"? "Говоря простыми словами" это означает отправить по сети сообщение с каким-нибудь требованием. Это работает так:</p>
<ol>
<li>Посылаете запрос;</li>
<li>Между клиентом и сервером устанавливается соединение;</li>
<li>Сервер формирует ответ, посылает его клиенту;</li>
<li>Соединение закрывается.</li>
</ol>
<p>Так вот, протокол передачи гипертекста. "Текста", потому что сервер отвечает на запрос текстом определённого формата. А так как любые данные можно представить в виде текста, то получается, что через HTTP можно пересылать всё: картинки видео.</p>
<h3>HTML-элементы</h3>
<p><b>HTML</b> - код состоит из символов, которые помещены между двух угловых скобок <>.Всё помещенные между двумя угловыми скобками символы называются <b>HTML-элементами</b>. Элементы, как правило состоят из двух тегов : <b>открывающего и закрывающего</b>. Закрывающий тег отличает косая черта / "слеш". Каждый HTML-элемент сообщает браузеру какую-либо информацию о тексте, помещенном между открывающим и закрывающим тегами.</p>
<img src="img/html-tag.png" width="559" height="323">
</section>
<section id="html-structure" class="course-theme hidden">
<h2>2.3 Структура HTML документа</h2>
<h3>Тег <!DOCTYPE></h3>
<h3><html>, <head> и <body></h3>
</section>
<div class="next-theme-button">Следующий урок</div>
</div>
</main>
<script src="course.js"></script>
</body>
</html>