8 800 500 20 63
Обратный звонок
09-08-2016
Школа Современных Технологий

Как работает Web

Все мы отлично знаем, что такое интернет, и прекрасно умеем им пользоваться. Но не задумывались ли Вы, что интернет чем-то напоминает магию – вы открываете браузер и пишите URL в адресной строке, а уже через долю секунды (или чуть дольше – зависит от скорости интернета) попадаете в какой-то невероятный новый мир. И так происходит после каждого клика мышью по ссылке. Большинство пользователей и не задумывается, сколько действий на самом деле за этим стоит.

Клиенты и сервера

Как работ WEBНачнём с того, что все компьютеры во всемирной паутине связаны, и делятся они на два типа – клиенты и сервера. На сервере содержатся файлы, которые необходимо передать клиенту, что осуществляется с помощью специальных «адресов» компьютеров – IP (выражается в числовом значении). Но, так как запоминать IP сайтов неудобно, была придумана система доменных имен – Domain Name System (DNS). DNS – это своего рода посредник между сервером и пользователем, он преобразовывает числовой адрес в символьный. Таким образом, прежде чем отослать запрос на сервер, компьютеру необходимо узнать его IP – за этим он обращается к DNS. Если расписать по действиям, то это будет выглядеть так:

  1. компьютер посылает запрос (URL) на DNS [об «адресе» DNS заботится провайдер];
  2. DNS передаёт компьютеру IP;
  3. компьютер отправляет этот IP (вместе с URL) серверу;
  4. у нас появляется картинка сервер передает содержимое необходимой страницы сайта компьютеру, что впоследствии выводится на дисплей.

«Кухня» написания сайтов тоже достойна внимания. Сайт пишется с помощью четырёх основных языков: HTML, CSS, PHP и JavaScript. Все эти языки действуют вместе, каждый имеет своё назначение, дополняют друг друга.

HTML и CSS: структура и оформление

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

HTML (HyperText Markup Language) – язык гипертекстовой разметки документа. Основное его назначение – вывести на монитор текст, пригодный для чтения.

CSS (Cascading Style Sheets) – язык описания внешнего вида документа.

Есть ли в языке HTML возможность оформить сайт, а не только прописать основную разметку? Да, есть. Но в случае, если Вы захотите изменить цвет шапки, это придётся делать на всех страницах вручную, что, во-первых, долго, а во-вторых, есть опасность пропустить какую-либо страницу. В этом случае на помощь приходит CSS – Вы прописываете одно оформление для всех страниц (или для той группы страниц, которая Вам нужна), и при необходимости меняете всё, что нужно, в одном документе.

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

PHP - слоник - мозг сайта

PHP - мозг сайта

PHP (Hypertext Preprocessor, изначально Personal Home Page Tools) – это динамика сайта, его наполнение. Язык PHP обрабатывает запрос пользователя на сервере, после чего генерирует ответ в HTML и отсылает клиенту. Для наглядности приведем пример. Предположим, Вы захотели прочитать статью (одну из ста) на сайте. Эта статья содержится на сервере, в базе данных, под определенным номером (этот номер можно увидеть в адресной строке). PHP видит запрос, с которым пользователь обращается (клик по названию статьи), достаёт эту статью из базы данных, вставляет её в HTML-код и отсылает назад пользователю. Гораздо легче, чем прописывать отдельную страницу для каждой статьи вручную.

Javascript - красота в движении

JavaScript - интерактив

Казалось бы – сайт готов, оформлен, что ещё нужно? Правильно, интерактивность! Сайт без возможности каким-либо образом изменять страницу без перезагрузки смотрится довольно уныло. И тут на помощь приходит JavaScript (сокращенно JS). JS позволяет реагировать на какие-либо действия пользователя моментально на этой же странице без её перезагрузки. Все подсвечиваемые кнопки при наведении на них мышью, каскадные меню и разворачивающиеся на странице окна – заслуга JS. Сайт таким образом выглядит не только более наполненным, ярким и профессиональным, но еще и компактным – с помощью JS можно скрыть большую часть информации до тех пор, пока она не понадобится пользователю.

Самые читаемые: