{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Максим Кузнецов: заметки с тегом основы", "_rss_description": "Простыми словами о веб-разработке", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/maxkuznetsov.ru\/tags\/osnovy\/", "feed_url": "https:\/\/maxkuznetsov.ru\/tags\/osnovy\/json\/", "icon": "https:\/\/maxkuznetsov.ru\/user\/userpic@2x.jpg?1586398004", "author": { "name": "Максим Кузнецов", "url": "https:\/\/maxkuznetsov.ru\/", "avatar": "https:\/\/maxkuznetsov.ru\/user\/userpic@2x.jpg?1586398004" }, "items": [ { "id": "24", "url": "https:\/\/maxkuznetsov.ru\/all\/how-web-works\/", "title": "Как работает веб, или что происходит, когда вы сёрфите в интернете", "content_html": "

Каждый раз, когда вы открываете на компьютере или телефоне google.com, ваш браузер незаметно для вас отправляет множество запросов в интернет. Что это за запросы? Кто на них отвечает? Где хранятся страницы социальных сетей и статьи медиа-проектов?<\/p>\n

\n\"\"\n<\/div>\n

Браузер и веб-сервер<\/h2>\n

Для базового понимания работы веба можно провести аналогию с телевидением.<\/p>\n

Браузеры — Google Chrome, Firefox, Safari, Internet Explorer \/ Edge — это всего лишь экраны телевизоров, которые показывают программу, записанную и транслируемую откуда-то из далёких телестудий. В вебе такие студии называются веб-серверами.<\/p>\n

Вбивая новый адрес в браузере, вы переключаете канал. Только в отличие от телевидения в интернете этих каналов огромное количество, вы даже можете создать свой, настроив собственный веб-сервер.<\/p>\n

У каждого веб-сервера подобно телеканалу есть свой номер, который называется IP. Чаще всего он выглядит как четыре группы трёхзначных чисел, разделённых точкой — XXX.XXX.XXX.XXX, но может выглядеть иначе — см. IPv6<\/a>.<\/p>\n

\n

Например, Вконтакте имеет IP 87.240.137.158, Facebook — 31.13.72.36, данный блог — 5.63.155.79.<\/p>\n<\/blockquote>\n

Чтобы нам не пришлось запоминать адреса в виде 87.240.137.158 для посещения контакта, были придуманы доменные имена — это как раз тот понятный и лёгкий для запоминания адрес, что мы вбиваем в браузере: vk.com, facebook.com, maxkuznetsov.ru.<\/p>\n

Поскольку таких пар «IP — домен» по всему интернету огромное количество, то браузер не может все их знать и поэтому он обращается за помощью к DNS-серверу, который работает как адресная книга — по домену выдаёт IP, на который нужно слать запросы, и перенаправляет запрос на нужный веб-сервер в интернете.<\/p>\n

Получив запрос от браузера, веб-сервер отправляет в ответ запрошенную веб-страницу или ошибку, если что-то пошло не так.<\/p>\n

\n\"\"\n<\/div>\n
\n

Если такой страницы не существует, браузер покажет ошибку.<\/p>\n<\/blockquote>\n

Из чего состоит веб-страница<\/h2>\n

Веб-страница — это то, что вы видите в браузере. Она представляет собой HTML — обычный текст, но помещённый в специальные символы — «теги», подсказывающие браузеру, где заголовки и списки, а где картинки, формы для пользовательского ввода и, конечно же, ссылки на другие страницы. Ссылки — они же гипертекс — в своё время и сделали веб таким удобным и популярным.<\/p>\n

Вы можете посмотреть из чего состоит любая веб-страница, кликнув по ней в браузере правой кнопкой мыши и выбрав пункт View Page Source \/ Посмотреть исходную страницу или что-то аналогичное в зависимости от браузера и языка интерфейса. Скорее всего вы ничего не поймёте, так как помимо HTML-разметки современные веб-страницы включают в себя кучу CSS и Javascript. Первая технология позволяет создавать красивый вид страниц (дизайн), а вторая — анимировать их и расширять функционал: всплывающие окна, проигрыватели аудио и видео, слайдеры, счётчики, метрики, обработка картинок, анимированная галерея фотографий и много чего ещё.<\/p>\n

\n

Кратко:
\nHTML — это разметка статического контента, задание его структуры
\nCSS — наведение красоты, включая простую анимацию
\nJavascript — более сложная анимация и дополнительный функционал поверх контента<\/p>\n<\/blockquote>\n

Вы можете создавать свои веб-страницы прямо у себя на компьютере. Но чтобы другие люди их увидели, вам нужен веб-сервер, доступный через интернет. Попробуйте создать на своём компьютере файл index.html (скачать готовый пример<\/a>), внутри которого написать<\/p>\n

<h1>Hello world!<\/h1>\r\n<ol>\r\n  <li>Это мой первый<\/li>\r\n  <li>Сайт<\/li>\r\n<\/ol>\r\n<button>Супер!<\/button><\/code><\/pre>
Сохраните и перетащите файл прямо в браузер — вы увидите ваш первый, хоть и не публичный, сайт.<\/p>\n
Статические и динамические страницы<\/h2>\n
Все веб-страницы можно условно разделить на два вида — статичные и динамичные.<\/p>\n