## Организация Интернета. Виды связей.

**Интернет** — это всемирная сеть устройств, соединённых проводным или беспроводным способом. 
 
**Клиенты** — это устройства, на которых пользователи потребляют информацию, а **серверы** — это компьютеры, которые предназначены для раздачи информации клиентам.
 
**Виды организации**
Проводные виды организации связи в интернете: DSL, коаксиальный и оптоволоконный. DSL использует медные линии для передачи данных, коаксиальный — проводные сети, а оптоволоконный — специальные кабели из пластика или стекла. Беспроводные виды: стационарный и спутниковый. Стационарный использует беспроводные вышки и антенны, а спутниковый — радиоволны от спутников.
## Что представляет из себя IP-адрес? Как узнать IP-адрес компьютера?

**IP-адрес** – это уникальный адрес, идентифицирующий устройство в интернете или локальной сети. Он состоит из четырёх байт (цифр), содержащих 256 значений — от 0 до 255 включительно. 
**P. S.**: Существует несколько версий — IPv6 и IPv4. Адрес IPv4 содержит 4 байта, а IPv6 16 байт, что позволяет кодировать больше значений.
Для того, чтобы узнать свой ip адрес достаточно ввести команду `ifconfig` в командной строке Windows или `ip addr` в терминале Unix подобных систем.
## Система доменных имен. URL-адрес.
**DNS** (Domain Name System) — это система, которая преобразует доменные имена в IP-адреса и наоборот. Она используется для получения информации о доменах, маршрутизации почты.
 
Вся информация, передаваемая по интернету, разбивается на пакеты, а затем передаётся с помощью специальных правил — протоколов. При передаче веб-страниц используется протокол HTTP, а для повышения безопасности — HTTPS. Протокол, по которому происходит обмен данными, можно увидеть в начале адресной строки браузера при загрузке страницы сайта.
 
**URL** (Uniform Resource Locator, единый указатель ресурсов) — это адрес ресурса в интернете. Он указывает на конкретный объект, такой как файл или папка, и выглядит как ссылка.
**Например**: https://mel.fm/teens
**Или**: https://kvantik.com/issue/pdf/2020-01.pdf
![picture](https://git.gogacoder.com/gogacoder/gkl_test_week/raw/branch/main/media/Pasted image 20231225175430.png)
Части из которых состоит URL представлены выше.
## Безопасность данных в Интернете

Надежный **пароль** — один из самых важных факторов для обеспечения безопасности данных. Пароль считается надежным, если:
* длина пароля 10 и более символов,
* в пароле нет простых легкоугадываемых последовательностей (qwert, 12345 и т. д.),
* есть заглавные и строчные буквы,
* пароль используется только для 1 ресурса (сайт, аккаунт, устройство),
* есть спецсимволы, например: "$", "^", "@", "\*"
* пароль должен быть известен только 1 человеку.

**Компьютерный вирус** — вредоносная программа, способная внедряться в код других программ, системные области памяти, загрузочные секторы. Есть несколько типов вирусов, у каждого из них своё название и своя цель.
Существует 3 основных вида вирусов: черви, трояны, руткиты.

**Компьютерный червь** — это вредоносная программа, которая может копировать сама себя и распространяться между компьютерами. Они могут замедлять или полностью парализовать работу компьютера. Сетевые черви часто используются для массовой рассылки спама и блокировки работы компьютерных сетей у конкурентов.

**Троянцы** — это вредоносные программы, которые проникают в компьютер вместе с другими программами и могут нанести ущерб, когда пользователь запустит программу, в которой они находятся. Они могут удалять информацию, распространять другие вирусы и повреждать файлы.

**Руткиты** — это вредоносные программы, которые скрывают активность других вирусов и злоумышленников. Они могут изменять режим работы операционной системы и отключать или подключать различные функции, чтобы остаться незамеченными. Некоторые руткиты могут блокировать работу антивирусных программ, чтобы скрыть наличие вредоносных программ или злоумышленников на компьютере.

Антивирусы, утилиты и обновления ПО помогают обезопасить себя от вирусов и уязвимостей.

## Поисковые запросы. Круги Эйлера
**Поисковые запросы** — это слова или фразы, которые пользователи вводят в поисковую строку браузера или поисковой машины, чтобы найти информацию в интернете. Основной принцип работы поисковых машин заключается в том, чтобы найти документы, которые наиболее точно соответствуют запросу пользователя. Для этого поисковые машины используют алгоритмы и методы, которые анализируют страницы в интернете и определяют их релевантность по отношению к запросу. Поисковая машина ищет нужную информацию в своем индексе, предварительно определив язык запроса и исправив ошибки.

**Круги Эйлера** — это диаграммы, которые используются для иллюстрации отношений между различными элементами или понятиями. Они состоят из кругов, которые могут быть перекрыты или не перекрыты другими кругами. Круги Эйлера часто используются для визуализации и анализа сложных систем и концепций.

**Операторы поискового запроса**:
* Кавычки "" используют для поиска определенной фразы
* Минус - используют как логическое НЕ для исключения слова.
* Плюс + используется как логическое И для обязательного включения в запрос 
* Квадратные скобки \[\] сохраняют порядок слов в фразе
* Круглые скобки создают приоритет для логического выражения внутри них
* Восклицательный знак ! закрепляет форму слова.
## Таблица истинности логических выражений

См.: https://www.yaklass.ru/p/informatika/8-klass/teoreticheskie-osnovy-informatiki-7279393/elementy-algebry-logiki-6617745/re-095b3b62-25d3-47b3-9fd5-33fc96a91adb

## Элементы веб-страниц. Структура HTML-документа.

Любой HTML документ состоит из тегов. Первой строкой декларируется тип документа  — HTML, далее объявляется основной тэг html, а внутри его дочерние тэги  — $head$ и $body$. В $head$ обычно размещают все метаданные (например для соцсетей), ссылки на стили и т. д. В тэге $body$ содержатся все элементы на веб странице и скрипты.

``` html
<!doctype html>
<html class="no-js" lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>

<body>
  <p>Hello world! This is HTML5 Boilerplate.</p>
  <script src="js/app.js"></script>

</body>

</html>
```

Тэг может иметь свои атрибуты, например у $img$ это width и height. 
```html
<img width="30" height="40" src="...">
```
Тэг может быть парным и непарным. В первом случае, его содержимое необходимо закрыть тэгом с обратным слэшем и тем же названием. 
```html
<div class="item-card"> ... </div>
```

## Основные теги форматирования текста и списка

Форматирование текста осуществляется путем заключения нужного фрагмента в парные тэги b, a, i, p...
 Тэг <b> используют для создания **полужирного** текста. 
Например: 
```html
<p> Первый абзац. <b>Полужирный шрифт</b>
```

	Пришел на замену устаревшего тега <strong> в html4

 Тэг <i> нужен для придания _курсивного_ начертания.
 Тэг <s> используют для ~~перечеркивания~~ текста.
 Тэг <u> придает фрагменту <u>подчеркивание</u>. 
 Тэг <p> позволяет разделять текст на абзацы (семантический тэг).
 Тэг <br> создает перевод строки (переходит на новую строку). Непарный.
 Тэг <a> создает <a href="https://example.com">гиперссылку</a>. Ссылку на ресурс необходимо прописать в атрибут $href$: 
 ```html
 <a href="https://example.com">Ссылка</a>
 ```

Списки реализуются через тэги <ul> (неупорядоченный список, $unordered list$) и <ol> (упорядоченный список, ordered list). Элемент списка помечается парным тэгом <li> (от англ. `list item`).
Пример:
```html
<h3> Список продуктов </h3>
<ul>
	<li> Молоко </li>
	<li> Хлеб </li>
	<li> Сало </li>
</ul>

<h3> Список должников </h3>
<ol>
	<li> Сириус.Кузбасс </li>
	<li> Иван Иванов </li>
	<li> *Цензура* </li>
</ol>
```
Результат:
<h3> Список продуктов </h3>
<ul>
	<li> Молоко </li>
	<li> Хлеб </li>
	<li> Сало </li>
</ul>

<h3> Список должников </h3>
<ol>
	<li> Сириус.Кузбасс </li>
	<li> Иван Иванов </li>
	<li> *Цензура* </li>
</ol>
## Оформление таблиц. Создание фреймов

 Фрейм создается следующим образом:
``` html
<iframe width="100%" height="250px" src="https://google.com"></iframe>
```

Результат:
<iframe width="100%" height="250px" src="https://google.com"></iframe>

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

Таблицы создаются таким образом:
```html
<table border="1"> <!-- border добавляет обводку к таблице -->
	<caption>Подпись к таблице</caption>
	<tr> <!-- table row, строка в таблице -->
		<th> ID </th> <!-- заголовок столбца -->
		<th> ФИО </th>
		<th> Класс </th>
	</tr>
	<!-- столбец 1, столбец 2, столбец 3 -->
	<tr> <td> 1 </td> <td> Иван Иванович Иванов </td> <td> 1Д </td> </tr>
</table>
```
Результат:
<table border="1">
	<caption>Подпись к таблице</caption>
	<tr> <!-- table row, строка в таблице -->
		<th> ID </th> <!-- заголовок столбца -->
		<th> ФИО </th>
		<th> Класс </th>
	</tr>
	<!-- столбец 1, столбец 2, столбец 3 -->
	<tr> <td> 1 </td> <td> Иван Иванович Иванов </td> <td> 1Д </td> </tr>
</table>

## Вставка объектов (аудио, видео, изображения) и ссылок

```html
<!-- Вставка изображений -->
<img src="https://danceon.ru/wp-content/uploads/2/9/f/29fba8891a7ea3aeda1ee329bead1590.jpeg" width="100%" height="250px">
<!-- Вставка аудио -->
<audio controls src="https://developer.mozilla.org/media/cc0-audio/t-rex-roar.mp3">
<!-- Вставка видео -->
<video controls src="https://cloud.gogacoder.com/s/9RRBg98mJajoMgW/download">
  Ваш браузер не поддерживает HTML5.
</video>
<a href="https://example.com"> Нажми на меня! </a>
```
Результат:
<img src="https://danceon.ru/wp-content/uploads/2/9/f/29fba8891a7ea3aeda1ee329bead1590.jpeg" width="100%" height="250px">
<video controls src="https://cloud.gogacoder.com/s/9RRBg98mJajoMgW/download">
  Ваш браузер не поддерживает HTML5.
</video>
<a href="https://example.com">Нажми на меня!</a>

## Стиль элементов веб-страниц. Структура CSS-файла
Каждому элементу на странице можно задать оформлением путем написанием стиля. Стиль в CSS файле создается следующим образом: `выражение_селектор {свойство: значение;}`
Стили разбиваются на блоки для возможности их легкого переиспользования. 
CSS файл состоит из набора стилей, которые применяются к элементам на странице. Например:
```css
* {
	/* применится ко всем элементам */
	color: red;
}

p {
	/* к элементам с тэгом p */
	font-size: 15px;
	background: darkblue;
}

.my-class {
	/* только к элементам с классом my-class */
}

#my-class {
	/* только к элементам с id my-class */
}
```
## Стилизация текста. Внешние и внутренние отступы. Границы

Стилизация текста:
```css
p {
	text-align: center;
	font-weight: 600; /* чем больше, тем жирнее начертание */
	font-size: 15px; /* размер шрифта */
	font-family: sans-serif; /* изменение шрифта */
	line-height: 5px; /* межстрочный интервал */
	letter-spacing: 3px; /* межбуквенный интервал */ 
}
```
Внешние отступы:
```css
.rect {
	margin 5px; /* внешний отступ элемента (со всех сторон) */
	margin-top: 3px; /* сверху, снизу, слева, справа */
	margin-bottom: 7px;
	margin-left: 6px;
	margin-right: 3px; 
}
```
Внутренние отступы:
```css
.rect {
	/* внутренний отступ элемента (со всех сторон) */
	padding 5px; 
	padding-top: 3px; /* сверху, снизу, слева, справа */
	padding-bottom: 7px;
	padding-left: 6px;
	padding-right: 3px; 
}
```
Границы: https://developer.mozilla.org/ru/docs/Web/CSS/border
## Фон и цвет. RGB-палитра
```css
/* Цвет  можно задать так: */
color: rgb(255, 255, 255); /* красный, зеленый, синий */
color: #FFFFFF; /* то же самое RGB, только в HEX */
color: orange;
```

## Разделы веб-страниц. Классы в CSS.
Секции позволяют делить веб страницу на разделы.
```html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>section</title>
 </head> 
 <body>
  <section>
   <h1>Съёмки фильма Полипропилен</h1>
   <p>История о том, как снимали фильм, где герои отдыхали на пляже, 
   потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, 
   и что из этого получилось.</p>
  </section>
  <section>
   <h1>Хороший язык</h1>
   <p>История о том, как проходила студия изучения языка эсперанто, 
   в то время, как над ней, на веранде велась студия приколистов, 
   где травились анекдоты, и что из этого получилось.</p>
  </section>
 </body>
</html>
```
Каждой секции можно задать атрибут class, чтобы изменить её дизайн (добавить рамку, фон и т. д.).
Про классы CSS смотрите 1 тему выше.

## CSS-эффекты. Анимация и трансформация
```css
/* Пример анимации на CSS */
p {
        animation-duration: 4s; /* длительность анимации */
        animation-name: slide; /* имя анимации */
        animation-iteration-count: infinite; /* кол-во повторений */
        /* порядок проигрывания анимации:*/
        animation-direction: alternate; 
}

@keyframes slide {
	from {
		/* начальное состояние */
	    transform: translateX(0%);
        color: Maroon;
        font-size: 20px;
    }
    to {
	    /* конечное состояние */
	    transform:translateX(50%);
        color: Goldenrod;
        font-size: 45px;
    }
}
```
[Подробно про animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)

## Граф

**Граф** - это структура данных, которая состоит из набора вершин и ребер, соединяющих эти вершины. Граф представляет собой совокупность объектов и связей между ними.

**Ориентированный граф** - это граф, в котором направление ребер имеет значение. В ориентированном графе ребра могут быть направлены только в одном направлении, от одной вершины к другой.

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

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

Для поиска пути в таблице смежности нужно найти строку (место), откуда вы собираетесь отправится и соответствующий столбец будет являться местом прибытия. **Обратное неверно.**

## Дерево

**Дерево** - это неориентированный не взвешенный граф без циклов. В компьютерах деревья используются для хранения и организации данных. Дерево обычно представляют в виде таблицы, где столбец  — родитель, а ячейка  — потомок. 
**Бинарные деревья**  — дерево, у которого каждая вершина имеет не более 2-х потомков. Такие деревья часто используют для решения задач по комбинаторике.
**Высота дерева** — максимальное число вершин дерева в цепочке, начинающейся в корне дерева, заканчивающейся в одном из его листьев, и не содержащей никакую вершину дважды. Высота дерева, состоящего из единственной вершины, равна единице.
**Листья дерева** — элементы дерева, на которые не ссылается ни один другой элемент.

## Алгоритм Дейкстры

**Алгоритм Дейкстры** - это алгоритм нахождения кратчайшего пути во взвешенном графе от одной вершины до всех остальных вершин. Он основан на идее постепенного раскрытия потенциала каждой вершины, начиная с начальной вершины и заканчивая конечной.

Алгоритм Дейкстры состоит из следующих шагов:

1. Начинаем с начальной вершины и устанавливаем ее расстояние до 0.
2. Для каждой соседней вершины текущей вершины, обновляем расстояние до нее, если новое расстояние меньше текущего расстояния плюс вес ребра между ними.
3. Если новое расстояние меньше текущего расстояния, обновляем текущее расстояние и сохраняем предыдущую вершину.
4. Повторяем шаги 2 и 3 для всех соседних вершин текущей вершины.
5. Переходим к следующей вершине с наименьшим расстоянием и повторяем шаги 2-4.
6. Повторяем шаги 2-5, пока не достигнем конечной вершины или пока не будет достигнуто максимальное количество итераций.

Алгоритм Дейкстры может использоваться для нахождения кратчайшего пути между двумя вершинами в графе, а также для нахождения кратчайшего пути от одной вершины до всех остальных вершин. Этот алгоритм работает **только для взвешенных графов с положительным весом**. 

## Функция ВПР
**Английское название**: `VLOOKUP`
**Назначение**: Соотносит ячейку из левого столбца со столбцом правее, переносит i-ую ячейку справа от найденной справа ячейки в указанную, если находит совпадение.
![picture](https://git.gogacoder.com/gogacoder/gkl_test_week/raw/branch/main/media/Pasted image 20231225210941.png)
**Пример**:
Имеем 2 таблицы. Необходимо совместить долг города по его названию в колонку C.
![picture](https://git.gogacoder.com/gogacoder/gkl_test_week/raw/branch/main/media/Pasted image 20231225211727.png)
Запишем формулу в ячейку C2: `=ВПР(A2;$E$2:$F$5;2;ЛОЖЬ)`
Напишем абсолютную ссылку для интервального просмотра, чтобы его границы не сдвигались при протягивании формулы.
![picture](https://git.gogacoder.com/gogacoder/gkl_test_week/raw/branch/main/media/Pasted image 20231225212102.png)

Протянем формулу и получим результат.
![picture](https://git.gogacoder.com/gogacoder/gkl_test_week/raw/branch/main/media/Pasted image 20231225212137.png)