Блог экспериментатора инженера-разработчика: Infanty.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.
Блог существует при поддержке: "Оккупационных сил Марса".

Упрощённый вариант, того - как работает интернет

Упрощённо объяснить как работает интернет и как Ваш браузер отображает страницы определённого сайта, проще всего - в сравнении с покупкой книги в книжном магазине. В таком случае:

  • всемирную сеть интернет можно представить как книжный магазин;
  • URL сайта (имя домена вида: http://example.com/) аналогичен названию книги;
  • интернет браузер (например: Firefox) выполняет роль продавца в магазине;
  • сервер регистратора* можно представить в виде каталога книг в магазине;
  • технический адрес сайта (IP) это как номер зала, шкафа и полки в книжном магазине;
  • сервер сайта может обслуживать несколько разных сайтов, поэтому его проще представить в виде зала со шкафами на которых стоят книги;
  • программа web-сервера похожа на автомат который достает книгу с конкретным названием (HTML файл страницы сайта) с нужной полки, конкретного шкафа (папка сайта на сервере);
  • фотографии, HTML и JavaScript файлы - сразу возвращаются вашему интернет браузеру. А вот если браузер по указанному URL запросил PHP файлы, то запускается программа PHP которая обрабатывает этот PHP файл - в результате чего генерируется HTML файл, который без сохранения на сервере - возвращается вашему интернет браузеру.

* У каждого национального домена верхнего уровня (например: .ru) существует свой координационный центр на оборудовании которого и хранится список всех сайтов в этой доменной зоне.

Более сложный вариант, того - как работает интернет

Примечание: для общего ознакомления, в большинстве случаев рекомендую пропустить этот раздел.

  • Вы включаете свой компьютер и при загрузке операционной системы у Вас устанавливается интернет соединение с провайдером Вашего интернет. При этом вашему компьютеру выдаётся (временный или постоянный) IP-адрес для однозначной идентификации его в сети интернет. А так же, вашему компьютеру, сообщаются DNS-сервера (так же компьютеры с определённым программным обеспечением) для преобразования URL сайтов в сети интернет в IP адреса компьютеров на которых расположены файлы данных сайтов.
  • Вы открываете браузер и вводите адрес определённого интернет сайта (домена) в нём.
  • Браузер проверяет наличие домена в своём кэше. Если домена там нет, то браузер пытается найти нужный адрес в файле hosts в вашей операционной системе. Если домен не закэширован и отсутствует в файле hosts, то отправляет запрос к сетевому DNS-серверу. Сетевой DNS-сервер так же проверяет свой кэш и возвращает данные из него или обращается по протоколу whois к регистратору доменов (так же компьютеры с определённым программным обеспечением) и получает из его базы данных зарегистрированных доменов соответствие домена и IP, а так же дополнительные данные (NS-записи).
  • Получив IP удалённого сервера, браузер обращается к нему по протоколу HTTP или HTTPS.
  • На удалённом сервере этот запрос получает веб-сервер, программа обслуживающая такие запросы.
  • Веб-сервер на основании запроса определяет какой локальный файл требуется вернуть браузеру пользователя (html, css, js, txt или изображение). Или же необходимо запустить PHP (программа) и передать в него параметры файла, после чего вернуть в браузер пользователя строки возвращённые PHP.
  • Если необходимо запустить PHP, то запускается PHP (программа) которой передаётся для обработки файл с командами. Пример команд: соединится с базой данных (программа для хранения данных) и получить определённые данные, полученные данные совместить с шаблоном html и вернуть веб-серверу полученный результат в виде html строк.
  • Веб-сервер возвращает результат работы PHP или файл в Ваш браузер для отображения.
  • Браузер получив html страницу автоматически находит вставленные в неё с помощью html тегов: изображения, css и js которые он аналогичным образом запрашивает у веб-сервера.
  • Получив все необходимые данные (в зависимости от настроек браузера), браузер начинает сначала выполнять команды из html файла по отображению данный, после этого выполняет команды из css файла для изменения оформления отображённых данных, а после всего начинает выполнять команды из js файла по динамическому изменению отображённых данных на основании действий пользователя (нажатие на кнопки и т.п.).
  • Вы видите в своём браузере прекрасный сайт.

Необходимое программное обеспечение

Самый простой способ начать программировать это установить себе (на Windows):

P.S.: Вместо Acquia Dev Desktop можно использовать XAMPP (https://www.apachefriends.org/index.html). Но если вам необходимо одновременно работать над несколькими сайтами, то XAMPP потребует: дополнительной настройки виртуальных хостов веб-сервера и прописывание этих хостов - локально.

Примеры содержимого PHP, HTML, CSS и JS файлов с пояснениями

Упрощённо объяснить, зачем нужен PHP - можно на примере оригинальных новогодних открыток с поздравлениями которые нужно отослать в количестве не меньше 10 штук. Каждую открытку будем рассматривать как отдельную страницу сайта. Можно каждую открытку нарисовать в отдельности, т.е. каждую страницу сайта сверстать в отдельный html файл и положить на сервер. А можно нарисовать одну открытку, и сделать ее копию в фото-центре. В таком случае у нас будет один html файл с примером оформления всех страниц сайта, содержимое статей будет хранится в базе данных и при запросе URL вида http://example.com/index.php?page=1 или http://example.com/index.php?page=2, программа PHP будет обрабатывать код из файла index.php. В результате этой обработки (в данном случае) будет получена первая или вторая статья статья (номер переданный через переменную page в URL) из база данных, которая будет вставлена в html файл с примером оформления всех страниц сайта и полученный результат в виде html файла, будет возвращён интернет браузеру, без сохранения на сервере. Такой подход позволяет в случае необходимости не править дизайн всех (в данном случае: 10) html страниц сайта, а лишь внести изменения в один html файл который используется (указан) в index.php как файл для вставки статей из базы данных с последующим возвратом получившегося результата - интернет браузеру. Т.е. основное назначение PHP - получать статьи из базы данных, вставлять их в указанный html (в указанное место в html) и возвращать результат - интернет браузеру используя команду: echo или print.

Пример содержимого php файла с командой для вывода строки - Hello, world! в интернет браузере:

<?php
  echo 'Hello, world!'; 
?> 

HTML файл упрощённо можно сравнить с литературным описанием какой-нибудь картины, читая которое - мы понимаем, что на данной картине изображено и в каком месте. Т.е. браузер обрабатывая код html понимает в каком месте страницы вывести картинку, а в каком месте страницы вывести текст. Пример содержимого html файла:

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>HTML Document</title>
   </head>
   <body>
      <p>
         <b>
            Этот текст будет полужирным, 
            <i>а этот - ещё и курсивным</i>
         </b>
      </p>
   </body>
</html>

CSS упрощённо можно так же рассматривать как литературное описание какой-нибудь картины, только читая его - мы понимаем, какого цвета изображённые объекты на картине. Т.е. браузер обрабатывая код css файла понимает какой именно текст в html файле вывести жирным цветом или вокруг какого изображения вывести рамку. Пример содержимого css файла в котором задаётся шрифт для параграфоф (тег: <p>):

 p {
   font-family: arial, helvetica, sans-serif; 
} 

JavaScript упрощённо можно рассматривать как книжку любимых рецептов (патернов). Нужно сделать валидацию формы в окне браузера - используйте вот такой патерн, нужно вывести сообщение пользователю - используйте вот такой патерн. Пример содержимого js файла в котором содержится команда браузеру: после загрузки страницы в браузер пользователя, элементу с селектором id - alertLink назначается действие: после нажатия кнопкой мышки по данному элементу - вывести сообщение:

 window.onload = function() {
    var linkWithAlert = document.getElementById("alertLink");
    linkWithAlert.onclick = function() {
        return confirm('Вы уверены?'); 
    };
};