Как работает интернет? HTTP, клиент-сервер и публикация первого сайта

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

Вы узнаете, чем интернет отличается от World Wide Web, как браузер общается с сервером, зачем нужны протоколы TCP/IP, HTTP и HTTPS, что такое URL, клиент-серверная архитектура, HTML, семантические теги и хостинг.

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

В уроке разберём:
— что такое интернет и децентрализованная сеть;
— чем World Wide Web отличается от интернета;
— что такое браузер, сервер и веб-сервер;
— как работают HTTP и HTTPS;
— что такое URL и из каких частей он состоит;
— что такое клиент и сервер;
— как работает клиент-серверная архитектура;
— что такое HTML и почему это не язык программирования;
— базовую структуру HTML-документа;
— теги html, head, body, title, meta;
— семантические теги header, main, section, footer;
— базовые теги h1-h6, p, span, a, img;
— относительный путь к изображению;
— атрибуты href, target, src и alt;
— как создать index.html;
— как запустить сайт через Live Server;
— как выложить первый сайт на хостинг.

Урок подойдёт новичкам, которые изучают HTML, CSS и web-разработку с нуля.

Таймкоды:
00:00 Знакомство с автором курса
01:43 Тема урока: принцип работы web-сети, HTML и хостинг
02:01 Что разберём в уроке
03:33 Что такое интернет
04:01 Децентрализованная сеть простыми словами
05:08 Аналогия интернета с рыбацкой сетью
06:25 Провода, серверы и узлы сети
08:17 Что делает браузер
08:48 Что такое децентрализация
12:04 Что такое протоколы
13:42 Протокол TCP/IP
14:05 Интернет не равен сайтам
15:35 Что такое World Wide Web
18:12 Основные элементы веба
18:40 Три значения понятия «веб-сервер»
20:11 HTTP и HTTPS
20:42 Как домен превращается в IP-адрес
23:12 Чем HTTP отличается от HTTPS
24:01 Что такое веб-страница
24:39 Как браузер получает и отображает сайт
25:45 Что такое URL
26:17 Из каких частей состоит URL
27:47 Путь к файлу и маршрут после домена
29:27 Клиент и сервер
30:00 Клиент — это не только браузер
32:23 Что делает сервер
33:06 Клиент-серверная архитектура
35:20 Как сайт собирается из файлов в браузере
35:44 Схема клиент-серверной архитектуры
38:41 Метод GET и сетевой запрос
39:13 Веб-сервер как программа и физическая машина
40:00 Файловая система и web application
43:56 Что такое HTML
44:20 Почему HTML не язык программирования
44:54 Зачем нужен HTML
46:43 Создаём папку проекта и открываем VS Code
48:09 Создаём файл index.html
49:14 Базовая структура HTML-документа через Emmet
50:00 Что такое HTML-тег
51:32 Зачем нужен DOCTYPE
53:05 Атрибут lang
53:46 Корневой тег html
55:39 Тег head и метаданные
57:16 Что такое атрибуты
58:18 Кодировка UTF-8
1:00:34 Viewport и адаптация страницы
1:02:25 Тег title
1:03:02 Тег body
1:04:09 Семантические HTML-теги
1:07:12 Header, main, section и footer
1:09:07 Базовые теги h1-h6, p, span, a, img
1:10:52 Переходим к практике в VS Code
1:11:44 Комментарии в HTML
1:12:29 Создаём header
1:13:42 Добавляем h1
1:14:08 Добавляем параграф
1:14:41 Создаём main
1:17:42 Добавляем h2 и изображение
1:18:32 Относительный путь к картинке
1:21:31 Как работает относительный путь
1:25:41 Тег img и атрибут alt
1:26:16 Тег a и атрибут href
1:27:50 Вставляем ссылку в href
1:28:45 Создаём footer
1:29:21 Запускаем сайт через Go Live
1:30:24 HTML-справочник
1:32:17 Атрибут target
1:34:15 Задача по изученным тегам
1:34:36 Публикуем сайт на Neocities
1:38:18 Редактируем сайт на хостинге
1:39:36 Загружаем изображение на хостинг
1:41:38 Загружаем index.html
1:42:24 Первый сайт доступен в интернете
1:43:30 Итоги по тегам и хостингу
1:45:33 GitHub Pages как вариант публикации
1:46:04 Где найти полный курс и материалы
1:47:27 Telegram, LinkedIn и GoCoding
1:47:53 Завершение урока

#HTML #WebРазработка #Frontend #Хостинг #Верстка