Статика

Перед тем, как говорить о статике, сначала разберёмся из чего состоят сайты. Когда вы кликаете на ссылку в браузере, вы получаете страницу, которая содержит код сразу на трёх языках. Первый — это HTML, язык разметки. Файл с использованием одного только HTML выглядит примерно так:

это скриншот с нашей Энциклопедии, если отключить от неё всю статику.

HTML определяет, что будет на сайте по части содержания. Он решает, какие подгрузить файлы, какой на странице будет текст, какие на сайте будут ссылки. Только содержание, без красивостей и анимаций.

Раньше сайты пытались разнообразить с помощью стилей в HTML: поменять цвет или размер текста. Прямо в HTML это делать оказалось неудобно. Появился CSS — каскадная таблица стилей. Теперь в CSS определяют цвет, размер текста, отступы и тонну других настроек.

Третий язык — JavaScript, это уже язык программирования, в отличие от HTML и CSS — это языки разметки. Он позволяет менять стили, менять HTML-теги, менять текст и ещё много чего. Это штука, которая оживляет страницу: в ответ на действия пользователя (движение мышки, клики и т.д.) он может менять и стили (CSS), и содержание (HTML).

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

Одна страница сайта — это много файлов

Файлов нужно много, но всё начинается с HTML. В нём указано, какие файлы нужно подключать. Если что-то не подключилось, начинайте поиск оттуда.

Всё начинается с HTML

Так что же такое статика?

Когда у вас есть сайт интернет-магазина, на нём изо дня в день меняются цены, товары и уникальные предложения. Всё это меняется в HTML-составляющей сайта, т.к. это содержание страницы. Остальное же: стили, JS-скрипты, шрифты, лого сайта — не меняется, поэтому эти файлы называют статикой.

Статика — это файлы CSS и JS, картинки и шрифты

Браузеры ленивые и не загружают все стили google.com или vk.com каждый раз, когда вы заходите на эти сайты. У браузеров есть память, где они хранят файлы статики. Так, например, когда вы заходите на google.com второй раз за день, браузер скачивает только HTML, а стили, логотип сайта и т.д. он берёт из своей памяти на вашем компьютере.

Как подключить CSS

CSS файл можно подключить к HTML документу. Для примера рассмотрим простую страницу, состоящую всего из двух файлов. Есть каталог site, в нем находятся такие файлы:

site
├── index.html
└── styles.css

Подключение CSS происходит внутри HTML документа index.html. Откройте файл и в начале документа найдите тег <head>. Внутрь <head> добавьте новый тег <link>, он отвечает за подгрузку других файлов, и его атрибут href содержит адрес CSS файла:

<html>
  <head>
   <link rel="stylesheet" href="styles.css">
   ...
  </head> 
...

У <link> есть второй атрибут, rel. Он говорит браузеру “Что это за файл и что с ним делать”. Для CSS-файлов в rel проставляется значение stylesheet (переводится как список стилей).

Содержимое атрибута href очень похоже на путь к файлу — styles.css. Но на самом деле это адрес. В чем здесь отличие читайте в статье про относительные адреса.

Как подключить JS

Чтобы запустить код внутри JS файла, его надо подключить к HTML документу. Вот простой сайт, он состоит из двух файлов внутри каталога site:

site
├── index.html
└── script.js

Принцип подключения тот же, что и с CSS. В HTML есть специальный тег <script>. Внутри него можно подключать JS-код из других файлов. Обычно скрипты подключают в самом конце документа, прямо перед закрытием тега <body>:

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="script.js"></script>
  </body>
</html>

Внутри атрибута src указан относительный адрес файла script.js. Что такое адрес и чем отличается от пути читайте в статье про относительные адреса.

Что такое media

Вернёмся к примеру с интернет-магазином. У него есть код, а есть данные. Код сайта — это скрипты на Python, HTML страницы, статика… Без кода сайт будет выглядеть неправильно или вообще не работать. Данные сайта — это товары, их цены и фотографии, логины и кредитные карточки пользователей. Сайт может жить без данных, просто он будет пустым.

Есть картинки, относящиеся к коду: логотип сайта, иконки соцсетей, фоновая картинка… Они прибиты к сайту гвоздями, вынимать их никак нельзя. Все эти картинки — статика. Есть же картинки, относящиеся к данным: аватарки пользователей, фотографии товаров и так далее. Они могут меняться по несколько раз на дню. Их называют media.

Статика живёт с кодом, а Media живёт с базой данных

В популярных CMS на PHP большинство картинок (логотип, иконки) заливаются через админку и лежат с базой данных. Там они не статика, а media. Девман это не одобряет.

Попробуйте бесплатные уроки по Python

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

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Хочу код-ревью