Понимание основ окажется бесценным для веб-разработчика в долгосрочной перспективе.
Мотивация
По состоянию на июль 2017 года во всем мире насчитывалось 4,57 миллиарда активных пользователей Интернета. Удобное использование Интернета уже стало частью естественного человеческого поведения.
Однако, если вы стремитесь стать профессионалом в области веб-разработки с полным стеком, важность выхода за пределы взаимодействия на уровне пользователя с сетью невозможно переоценить. Точно так же, как автомеханик должен знать больше, чем просто способы вождения автомобиля - вы, разработчик, должны смотреть за пределы экрана и по-настоящему понимать внутреннюю работу самой сети.
Хотя уже существует множество ценных (и бесплатных) ресурсов для изучения конкретных веб-технологий, эта статья не претендует на роль учебного пособия. Скорее, я хочу помочь вам получить фундаментальные знания о сети, не вдаваясь в подробности.
Интернет против всемирной паутины (WWW)
Во-первых, немного терминологии.
Есть ли разница между Интернетом и Интернетом? Да.
Поскольку в настоящее время большинство людей получают доступ к информации в Интернете исключительно через веб-браузер, эти термины часто - но ошибочно - становятся синонимами.
Интернет относится к обширной сети компьютерных сетей, через которые можно обмениваться цифровой информацией по различным протоколам. Интернет - самая популярная компьютерная сеть в мире, но, безусловно, существуют и другие компьютерные сети.
Всемирная паутина (WWW) или, для краткости, Интернет - это способ доступа к информации через Интернет. Сеть - всего лишь яркий пример Интернет-приложения. Другие примеры интернет-приложений включают электронную почту, интерактивные онлайн-игры, чат-приложения. и BitTorrent.
Истоки Интернета
Сеть, которую мы знаем сегодня, была впервые концептуализирована сэром Тимом Бернерс-Ли, когда он работал в ЦЕРНе в 1989 году. Он стремился улучшить то, как ученые обмениваются информацией в ЦЕРН, изложив свое видение в документе под названием Управление информацией: A Предложение . В документе описаны такие концепции, как HTML, URI и HTTP - все это технологии, которые остаются чрезвычайно актуальными в сегодняшней веб-инфраструктуре. К концу 1990 года Тим Бернерс-Ли создал первый в мире веб-сервер.
Основные компоненты Интернета
Давайте рассмотрим основные компоненты, составляющие инфраструктуру современного Интернета.
1. HTML - каркас веб-страницы
HTML, или полностью язык разметки гипертекста, является стандартным языком разметки для создания веб-страниц. Вопреки распространенному мнению, HTML не является языком программирования, так как не может выполнять логические операции. HTML статичен и используется специально для определения структуры веб-страницы. HTML использует теги, чтобы описать браузеру, как должны отображаться данные. Полный список HTML-тегов можно найти здесь.
Ниже приведен краткий пример HTML-файла:
Как вы могли заметить, теги в основном бывают парами. Пара тегов сообщает браузеру, как должен отображаться контент, заключенный между ними. Для быстрой справки теги <h1>, <h2>, <h3> - это просто теги header с разными размерами шрифта по умолчанию. <p> - это тег абзаца. Приведенный выше код отображается в представлении ниже:
HTML определяет структуру веб-страницы.
2. CSS - придание стиля веб-страницам
Каскадные таблицы стилей (CSS) - это язык, используемый для стилизации HTML-документов. Как мы видели на изображении выше, стиль отсутствует во всех смыслах. Встраивая дополнительный CSS, мы можем вносить стилистические изменения в веб-страницу.
Конечно, с помощью HTML и CSS можно сделать гораздо гораздо. Это всего лишь пример, демонстрирующий их назначение.
Практически все, что вы видите на любом веб-сайте, структурировано с использованием HTML и стилизовано с помощью CSS.
3. JavaScript - обеспечение динамического поведения веб-страниц
Скорее всего, вы наверняка слышали о термине JavaScript раньше.
С помощью только HTML и CSS веб-страница полностью статична без каких-либо функциональных возможностей, потому что HTML и CSS несут исключительную ответственность за внешний вид. К сожалению, это очень быстро надоедает пользователям, поскольку они вообще не могут взаимодействовать с веб-страницей.
Однако, встраивая JavaScript в наш HTML-код, наша веб-страница начинает иметь динамические и интерактивные возможности.
Теперь, когда вы нажимаете кнопку на нашей веб-странице, мы начинаем видеть какое-то действие!
4. HTTP / HTTPS - как компьютеры общаются друг с другом
Протокол передачи гипертекста (HTTP) - это протокол прикладного уровня, который компьютеры используют для передачи данных (например, файла HTML).
Думайте о HTTP как о согласованной процедуре, с помощью которой компьютеры обмениваются информацией. HTTP следует модели клиент / сервер, когда клиент инициирует запросы к серверу для выполнения определенных действий.
HTTP-запросам предшествует глагол, который сообщает серверу, какой тип действия следует предпринять. Ниже приведены несколько наиболее распространенных типов HTTP-глаголов:
- GET (сообщает серверу, что клиент хочет получить ресурсы)
- POST (сообщает серверу, что клиент хочет создать новые ресурсы)
- PUT (сообщает серверу, что клиент хочет обновить существующие ресурсы)
- УДАЛИТЬ (сообщает серверу, что клиент хочет удалить ресурсы)
Получив запрос от клиента, сервер выполняет определенные операции и отвечает кодом состояния клиенту.
Чтобы увидеть HTTP в действии, перейдите на weather.com (или на любой другой веб-сайт, на самом деле) и щелкните правой кнопкой мыши в любом месте страницы . Затем нажмите проверить элемент, перейдите на вкладку сеть и перезагрузите страницу. Вы должны внезапно увидеть список сетевых запросов. Здесь каждая строка представляет собой отдельный HTTP-запрос, сделанный вашим браузером.
HTTP (S) - это согласованный протокол, который ваш браузер использует для связи с сервером.
Кроме того, прежде чем мы продолжим, HTTPS - это просто HTTP S ecure. HTTP передает незашифрованные данные - это означает, что злонамеренный посредник, перехватывающий любые передаваемые данные, сможет просматривать данные в необработанном виде. HTTPS шифрует данные с использованием протокола TLS и гарантирует, что передаваемые данные будут доступны для просмотра (по крайней мере, разборчивости) только предполагаемому получателю. Подробнее о HTTPS можно прочитать здесь.
5. DNS - Телефонная книга Интернета.
Теперь, когда мы знаем, что такое HTTP и HTTPS, естественно возникает вопрос. Как компьютеры узнают друг друга?
Помните, что Интернет работает через Интернет, который представляет собой невероятно огромную сеть взаимосвязанных компьютерных узлов. Когда вы ранее заходили на сайт weather.com, как именно ваш браузер узнал, где сервер weather.com в Интернете?
Здесь на помощь приходит система доменных имен (DNS).
Существенная функция DNS - переводить удобочитаемые доменные имена (например, weather.com) в IP-адреса, которые представляют собой уникальные идентификаторы, присваиваемые каждому устройству, подключенному к Интернету. Думайте о IP-адресе устройства как о его SSN в Интернете. Ваш телефон, ваш ноутбук, ваш iPad, ваш Roku - все они имеют свои собственные IP-адреса при подключении к Интернету.
Вот что делает ваш браузер "за кулисами", когда вы запрашиваете посещение weather.com:
- Убедитесь, что IP-адрес weather.com уже существует в кеше. Если да, отлично! Продолжайте и переходите к шагу 3). В противном случае переходите к шагу 2).
- Запросите у DNS-сервера (сервера, специально выделенного для преобразования доменных имен в IP-адреса) IP-адрес weather.com.
- Выполните запросы HTTP / HTTPS к серверу, идентифицированному данным IP-адресом. Кроме того, кешируйте IP-адрес, чтобы избежать повторных запросов к DNS-серверу при посещении сайта weather.com в будущем.
Подобно тому, как телефонная книга позволяет вам искать контакты людей по их именам, DNS позволяет вам находить IP-адрес сервера.
Собираем вещи вместе
Всемирная паутина (WWW) - это Интернет-приложение, в котором информация может передаваться по сетевым протоколам. Впервые он был задуман сэром Тимом Бернерс-Ли еще в 1989 году как решение для решения проблем совместного использования данных в CERN.
Когда вы посещаете веб-сайт в Интернете, ваш браузер фактически запрашивает ресурсы (такие как HTML, CSS, код JavaScript, изображения и т. Д.) С веб-сервера в Интернете. HTML определяет структуру веб-страницы, CSS стилизует макет, а JavaScript обеспечивает динамическое поведение.
Ваш компьютер может найти сервер в Интернете благодаря DNS, которая представляет собой систему, которая преобразует удобочитаемые доменные имена (например, weather.com) в IP-адреса. IP-адреса - это уникальные идентификаторы, присваиваемые устройствам, подключенным к Интернету.
Браузер взаимодействует с веб-сервером по протоколу HTTP (или HTTPS, который является зашифрованным расширением HTTP) и использует глаголы для передачи серверу типа запроса, который он делает. Затем сервер отвечает кодом состояния после выполнения операций, запрошенных клиентом.
Только начало вашего путешествия
Надеюсь, эта статья помогла вам составить хорошее представление о сети в целом. Если вы хотите узнать больше о веб-технологиях (я надеюсь, что вы заинтересованы), подпишитесь на меня, так как я буду публиковать больше статей!
