Использование Интернета стало неотъемлемой частью нашей жизни. Мы ежедневно читаем новости в Интернете или используем различные приложения. Но как такой веб-сайт на самом деле работает изнутри? Мы рассмотрим самые основные принципы того, как на самом деле выглядит веб-сайт, и что происходит на нашем компьютере или мобильном телефоне, когда мы просматриваем веб-сайт.
Это определенно не руководство для продвинутых пользователей или тех, кто ищет подробные инструкции. Это очень упрощенный и в основном только принципиальный взгляд на то, как работают веб-сайты, от самых основ до роли языков программирования в создании веб-сайта.
Основа — HTML-код
Когда мы открываем веб-страницу, мы видим, что она состоит из различных элементов, таких как изображения, текст, видео, а также различных полей для ввода текста. Когда мы открываем страницу, наш интернет-браузер должен точно знать, как скомпоновать элементы, как они должны выглядеть и где их следует размещать.
Веб-сайты состоят из так называемого HTML (Hyper-Text Markup Language), языка разметки (не языка программирования), который используется для создания веб-сайтов. Язык разметки состоит в том, что каждый элемент на странице так или иначе помечен так называемыми тегами. Теги помогают компьютеру понять, как должен выглядеть сайт.
Это может выглядеть так:
<h1> Это основной заголовок </h1>
Текст «Это основной заголовок» помечается начальным тегом <h1> и заканчивается </h1>, который является тегом HTML, ограничивающим заголовок уровня 1, наиболее важный.
Существует множество типов тегов, некоторые из них используются для разделения абзацев, другие — для изображений, полужирного текста и т. д., и они имеют разное применение для разных целей. Теги также могут быть вложены друг в друга, т.е. когда один элемент является частью другого (например, тег для полужирного текста является частью тега для абзаца).
На практике все, что появляется в Интернете, должно быть помечено тегами. Затем интернет-браузер представляет нам результат того, как он переводит теги, поэтому мы даже не видим сами теги, если не смотрим на исходный код страницы.
По сути, HTML — это просто текстовый файл, в котором элементы, находящиеся в сети, описаны в некотором порядке с помощью тегов.
Обратите внимание, что каждый интернет-браузер может интерпретировать и отображать эти теги немного по-разному. Поэтому одни и те же страницы могут немного отличаться в разных браузерах, даже если код HTML идентичен.
CSS следит за элементами
У нас появился сайт, где благодаря тегам мы знаем, что такое абзац, что такое заголовок и что такое изображение. Но элементы все равно должны выглядеть примерно так, как, например, цвет или размер текста, цвет фона, ширина, длина или точное расположение элемента на результирующем сайте. Именно об этом позаботятся каскадные таблицы стилей, или CSS (Cascading Style Sheet).
CSS просто описывает внешний вид и расположение элементов. Когда мы вернемся к нашему тегу <h1>, заголовок уровня 1. Что, если мы хотим, чтобы этот заголовок был красным?
Поэтому существует другой тип файла CSS, в котором прописано, как должен выглядеть каждый тег. В этом случае мы запишем в этот файл:
ч1 {
красный цвет;
}
В результате все теги <h1> будут красными. Однако мы можем добавить другие свойства, такие как размер шрифта, цвет фона или что угодно еще.
Поэтому на разных сайтах одни и те же теги, но выглядят они по-разному. Веб-сайты используют одни и те же теги, но CSS отличается. Интернет-браузеры также заботятся о правильном отображении тегов и их содержимого.
Мы также можем «называть» теги и назначать им различные идентификационные данные, поэтому тогда мы модифицируем только эти именованные теги в стилях. Если бы, например, мы хотели, чтобы только некоторые типы заголовков h1 были красными, а не все, то мы могли бы как-то различать эти заголовки, а затем редактировать в CSS только разные. Точно так же мы можем записать эти стили прямо в отдельные теги.
Практика такова, что некоторые теги стилизуются напрямую, но мы также добавляем файл с расширением .css, в котором описываются стили элементов и то, как они должны выглядеть.
Резюме HTML и CSS
И HTML, и CSS по сути являются текстовыми файлами. HTML — это язык разметки, в котором отдельные элементы веб-сайта помечаются так называемыми тегами. Они используются по-разному, и благодаря им интернет-браузеры распознают, какие элементы находятся в сети. Таким образом, HTML добавляет структуру веб-страницам.
CSS определяет, как выглядят элементы и где именно они находятся, когда страница отображается пользователю. Стили могут быть написаны непосредственно для отдельных элементов или вообще, когда эти стили будут применяться в зависимости от того, как мы помечаем элементы в HTML и как мы хотим, чтобы они выглядели. Таким образом, CSS добавляет внешний вид и расположение страниц.
И в-третьих JavaScript
JavaScript (JS) — это язык программирования, который добавляет в сеть более сложные и сложные элементы. Это могут быть интерактивные карты, анимированная графика. JavaScript также используется для различных расчетов или манипуляций с HTML-кодом. Это могут быть различные калькуляторы, например, когда мы вводим какие-то данные, а программа на JavaScript что-то вычисляет из этих данных и добавляет результат в отображаемый нам HTML-код.
Это также может быть связано с отправкой различных форм или обнаружением того, что происходит на сайте. Вы, возможно, заметили, что на некоторых веб-сайтах всплывающее окно или реклама могут появляться, когда мы перемещаем мышь за пределы браузера. В качестве альтернативы окно откроется через некоторое время, которое мы проведем в Интернете. Это все динамические элементы, за которыми на 99% стоит JavaScript, который модифицирует, добавляет или удаляет HTML-код или CSS в соответствии с некоторыми условиями.
Практически каждую веб-страницу на нашем компьютере можно описать с помощью комбинации HTML, CSS и JavaScript + путем загрузки необходимых файлов, таких как изображения.
Веб-сайты создаются динамически с использованием PHP
То, что мы видим в веб-браузере, в основном всегда является комбинацией HTML + CSS + JS. Чисто теоретически мы могли бы сохранять страницы по одной в файлы и потом открывать их с помощью браузера. Однако это было бы очень долго и занимало бы много места. Сегодня страницы создаются динамически, для чего используется другой язык программирования PHP, которого мы не видим. Итак, как это работает?
Веб-сайты всегда хранятся на удаленном компьютере, который мы называем сервером. Когда мы вводим URL некоторых страниц, наш компьютер связывается с сервером, который отправляет все, что нам нужно, то есть HTML + CSS + JS, чтобы мы могли правильно отображать страницу. Однако перед отправкой этой тройной комбинации он создает ее полностью в соответствии с некоторыми требованиями и отправляет только результат.
👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻
Для создания этого сайта вам понадобится база данных, в которой хранится вся необходимая информация и контент сайта. По сути, мы можем представить базу данных как таблицу Excel (или множество таблиц), которая каким-то образом структурирована. Используя PHP, данные извлекаются из этой таблицы для создания веб-страниц.
Здесь мы показываем ОЧЕНЬ примитивное представление о том, как это может выглядеть.
Вот как могут выглядеть наши примитивные базы данных:
Затем на сервере есть программа, написанная на PHP, которая извлекает информацию из этой базы данных и экспортирует из нее HTML-код в соответствии с адресом, который мы хотим посетить. PHP также может динамически изменять страницы и способен выполнять различные функции и задачи, но в основе лежит динамическое создание веб-страниц на основе некоторых требований.
Теперь последует то, что мы рекомендуем программистам просто пропустить, чтобы жила в голове не лопнула. Следующие строки можно было бы найти в компьютерной программе, но мы пишем их совершенно по-человечески (поэтому в реальности это выглядело бы совсем иначе, но опять же, это просто принцип). Таким образом, эта «программа» будет выглядеть так:
Теперь мы посетим веб-сайты, любые, но путь такой: названиесайта.ru/1/, где он / 1 / сообщает серверу, какую статью мы хотим увидеть, и, соответственно, сервер знает, какие данные мы хотим получить. Если бы место 1 в URL было 2, то та же программа загружала бы строку номер 2 и так далее. Это крайнее упрощение, потому что URL-адреса выглядят иначе, чем просто число, но в принципе это работает именно так.
Программа на сервере будет это делать, просматривая таблицу и считывая вставленный HTML-код из строки с номером статьи 1 и вставляя его в нужные места на странице. Затем сервер отправит нам полученный HTML-код, и мы его отобразим.
Результат будет выглядеть так:
На практике наша «программа» складывала данные из таблицы, как мы ему и сказали. Опять же, это не настоящая программа, а просто человеческая инструкция, которую компьютер не поймет.
🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵
PHP также может создавать пользовательские страницы
PHP может создавать страницы полностью динамически на основе практически любых требований. Каждый посетитель может увидеть что-то совершенно разное. Очень хорошим примером являются социальные сети, такие как вконтакте (vk.com).
Когда мы посещаем vk.com, мы попадаем на страницу входа. Когда мы войдем в систему, мы увидим сложенные сообщения ниже. Каждый пользователь видит эти посты совершенно по-разному. Даже если мы перезагрузим эту веб-страницу, мы увидим что-то другое — посты, скорее всего, будут совсем другими, в другом порядке и так далее. И мы все еще на vk.com, без дополнительной информации в URL.
Почему это происходит? Когда мы посещаем вконтакте и авторизуемся, сервер будет динамически создавать для нас новые страницы, в зависимости от того, кто мы есть, и это, вероятно, никогда не повторится. Затем он отправляет эти страницы в наш браузер, который их отображает, но создает их сам по своему усмотрению.
Вконтакте — это, конечно, крайний случай невероятно сложных алгоритмов. Вконтакте использует не только PHP, но и различные другие языки программирования, но вы можете видеть, какова на самом деле динамика сайта.
Так что же происходит, когда мы посещаем веб-сайт?
Мы посетим веб-сайт с некоторым URL. В соответствии с этим веб-сервер знает, какую страницу мы хотим видеть и на какую часть базы данных смотреть. С помощью PHP он извлекает необходимые данные из базы данных и создает HTML-код, который сервер отправляет в наш браузер.
Интернет-браузер сочетает в себе HTML + CSS + JavaScript, распознает структуру + внешний вид и расположение элементов + динамические элементы и, таким образом, составляет веб-страницы, которые мы просматриваем или иным образом используем.
И все это обычно происходит за секунду или несколько секунд.
#сайты #языки программирования #html #css #url #javascript #php #теги #создание сайтов #браузер
