Найти в Дзене
HTML/CSS-курсы

Вступительная лекция по HTML-программированию.

Добрый день!

Меня зовут Николай и сейчас вы читаете вступительную лекцию по html-программированию.

Эта лекция даст вам первые (базовые) знания о работе вашего браузера и его взаимодействии с любым сайтом. Эти знания лучше помогут вам понять, что такое сайт и подходить к работе с ним более рационально.

Итак, начнём с того, что попробуем ввести URL-адрес любого сайта в в адресную (поисковую) строку вашего браузера и нажмём Enter. Перед нами появилась страница сайта. Теперь наша задача состоит в том, чтобы понять, как это происходит, и почему сайт выглядит именно таким, каким вы его видите.

Для того, чтобы понять это, мы копнём поглубже и ответим на 3 вопроса:

  1. Где находится сам сайт?
  2. Как браузер этот самый сайт находит?
  3. Из чего ваш браузер создаёт интерфейс сайта (т. е. как он создаёт ту самую картинку страницы сайта, которая предстаёт перед вами?)?

Приступим к разбору первого вопроса. Где находится сайт?

Сайт ­­- это, естественно, просто набор файлов определённого расширения. Это означает, что сайт должен находиться на каком-то физическом носителе, который подключен к глобальной сети (Internet). Конечно такой носитель не один, поэтому представим себе большое хранилище с физическими носителями такими, как обычный жёсткий диск. Так вот, установка, которая содержит в одном месте все эти жёсткие диски (с размещёнными на них сайтами), называется сервер. Само помещение, в котором находится сервер, - серверная. Конечно, серверов по всему миру огромное количество. Многие из них (такие сервера Google, Yandex, Microsoft) огромны и даже обеспечены собственной службой поддержки, чтобы данные сервисы работали бесперебойно 24/7. Но это не значит, что все сервера такие. Напомню, что сервер - это физическое хранилище данных, подключённое к сети Internet. Из этого мы можем сделать вывод, что сервером может быть любой персональный компьютер или ноутбук, который располагается, к примеру, у вас дома и имеет подключение к интернету.

Пример сервера крупной компании.
Пример сервера крупной компании.

Пример сервера, сделанного своими руками.
Пример сервера, сделанного своими руками.

Естественно, к такому компьютеру (поскольку он используется как сервер) есть дополнительные требования, которые должны будут соблюдаться, чтобы данные, размещённые на нём, были доступны в сети. Что для этого необходимо, мы разберём в другой раз. Подписывайтесь на канал, тогда точно не пропустите!

Итак, продолжим. Мы с вами разобрались, что каждый сайт находится на том или ином сервере. И для того, чтобы наш с вами браузер нашёл нужный нам сайт, нужно, чтобы он для начала нашёл сервер, на котором он располагается. Значит, у сервера есть какой-то идентификатор. Этим идентификатором является ip-адрес. Ip-адрес - это, своего рода, координаты сервера в сети интернет, по которому его можно найти.

Все сервера объединены между собой глобальной сетью. Здесь мы и начинаем более полно понимать, что такое интернет.

Интернет - это, как раз, и есть эта самая совокупность всех серверов, компьютеров, ноутбуков, телефонов, и других гаджетов, имеющих доступ в интернет, объединённых между собой с помощью кабелей (оптических и медных) и беспроводных соединений.

Вернёмся к нашему вопросу. Как же браузер находит местоположение интересующего нас сайта? В этом ему помогают поставщики услуг доступа, а именно, провайдеры.

Провайдеры бывают 1-го, 2-го и 3-го уровней. Провайдеры 1-го уровня являются межконтинентальными. Для того, чтобы, к примеру, объединить Северную Америку и Евразию именно эти провайдеры прокладывали огромные кабели прямо под водой. Именно им мы обязаны тем, что интернет является мировой сетью, и мы имеем доступ ко всем ресурсам любых стран. Но, логично предположить, что не они подводят кабель к нашему дому. Нет, они это делают только до соответствующих распределительных центров, а оттуда уже и предоставляют поставку услуг провайдеры 2-го и 3-го уровней.

Трансокеанический подводный оптоволоконный кабель. Источник diext.ru.
Трансокеанический подводный оптоволоконный кабель. Источник diext.ru.

Вот мы разобрались, что все сервера и устройства , поддерживающие соединение с интернетом, объединены в глобальную сеть, в которой именно ip-адрес и подсказывает, где (на каком сервере) искать тот или иной сайт.

НО!!!

Говоря образно, мы узнали номер дома (ip-адрес), но не номер квартиры. Ведь в доме могут располагаться тысячи и тысячи квартир. Именно поэтому каждой программе на сервере присваивается ещё и порт, через который и идёт обращение к программе (в нашем случае, к сайту).

И, наконец, перейдём к последнему вопросу. Как браузер создаёт интерфейс запрашиваемого сайта?

Вот наш браузер нашёл сайт на сервере. Сайт, к примеру, состоит из нескольких файлов:

  • один HTML-файл;
  • один CSS-файл;
  • 10 фотографий или картинок.

Именно инструкция, как всё это вывести на экран, и содержится в файлах HTML и CSS. Это и есть основные файлы на которых сайт строится, а в сам браузер встроена инструкция, как эти файлы читать и отображать в окне. Поэтому сами файлы HTML и CSS пишутся согласно определённым стандартам.

Именно эти стандарты мы и будем с вами изучать на этом курсе.