Структура папок и элементов

В этой главе:

  • Структура сайта

  • Структура элементов

  • URL-адрес и его составляющие

В этой части самоучителя мы познакомимся с новыми для вас терминами, которые используются при описании папок и HTML-элементов.

Примечание: папку также часто называют директорией или каталогом.

Структура сайта

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

Иерархия каталогов (дерево папок)

Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".

Чтобы вам лучше запомнить, опишем термины отдельно:

  • Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.

  • Родительский каталог - это папка, содержащая другой каталог.

  • Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.

Структура элементов

Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <title></title>
    <style></style>
  </head>
  <body>
    <p></p>
  </body>
</html>

Схему, показывающую вложенность элементов, можно представить следующим образом:

Иерархия (дерево) элементов в html-документе

  • Дочерний элемент - это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком.

  • Родственный элемент - это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими, в примере такими элементами являются <head> и <body>, <title> и <style>.

  • Корневой элемент - самый верхний элемент в иерархии (<html>), все другие элементы являются его потомками.

  • Родительский элемент - это элемент, который содержит другой элемент. Иногда его называют просто родитель.

  • Потомок может являться непосредственно дочерним элементом, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например <head>, <title>, <body>, <p> и <style> являются потомками элемента <html>.

URL-адрес и его составляющие

Каждый файл или документ в интернете находится по уникальному адресу, называемому URL(Uniform Resource Locator с анг. Единый указатель ресурса). Термин URI (Uniform ResourceIdentifier с анг. Единый идентификатор ресурса) иногда используют взаимозаменяемо с URL-адресом, хотя это более общий термин.

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

Любой URL следует стандартной форме, которая может быть разбита на несколько основных частей (схема представлена на изображении). Каждый сегмент сообщает определенную информацию для клиента и сервера.

URL-адрес и его составляющие

Протокол указывает один из нескольких различных наборов правил, которые определяют передачу данных через Интернет. Веб использует стандартный протокол гипертекста, используемый для передачи данных, кодированных гипертекстом, с одного компьютера на другой. Протокол отделен от остальной части URL-адреса двоеточием и двумя косыми чертами (://).

Hostname является именем сайта, с которого браузеру будет извлекать файл. Истинным адресом веб-сервера является уникальный числовой адрес интернет протокола (IP - Internet Protocol), и каждый компьютер, подключенный к сети интернет имеет один IP-адрес (что-то вроде "141.8.192.108"), который, безусловно, не очень-то легко запомнить. Доменное имя - более запоминающийся псевдоним, который направляет трафик из интернета на IP-адрес. Многие веб-хостинги имеют префикс перед именем домена, после которого идет конкретный сервер, к которому осуществляется доступ (особенно когда есть несколько серверов в рамках одного домена). Префикс может быть любым, самым распространенным префиксом является конечно "WWW". Это дает возможность существования нескольких отдельных сайтов на одном домене, но имеющих разные префиксы - поддомены. Hostname также содержит суффикс домена, указывающий категорию доменов, например ".org" для сайтов различных организаций. Каждая страна также имеет свое собственное расширение домена, и вы будете часто видеть URL-адреса, которые указывают на страну, а не на какую-либо категорию.

Путь указывает каталог (папку) на веб-сервере, который содержит запрашиваемый документ. Файлы на веб-сервере могут храниться в подкаталогах - дочерних папках, расположенных внутри других папок, и каждый каталог в пути разделяется косой чертой (/). Путь является маршрутом, по которому будет следовать клиент, для достижения целевого файла. Каталог самого верхнего уровня веб-сайта (тот, который содержит в себе другие файлы и каталоги) называется корневым каталогом сайта и не отображается в URL-адресе.

Определенные файлы для извлечения идентифицируются по имени файла и расширению. Вы можете задать своему файлу любое нужное имя, а расширение файла будет указывать на тип файла. HTML-документы (или XHTML) будут иметь расширение .html или .htm (сокращенный вариант используется на некоторых серверах, которые поддерживают только три буквы в расширении). CSS-файлы используют расширение .css, файлы с JavaScript кодом используют .js и так далее. Веб-серверы настраивают на узнавания этих расширений и обработки файлов соответствующим образом, обработка различных типов файлов осуществляется различными способами.

Скорее всего вы не увидите имя файла и его расширение в каждом URL-адресе с которым вы сталкнетесь. Большинство веб-серверов настраивают для автоматического обнаружения специально именованного файла при запросе каталога без указанного имени файла. Это может быть файл index.html, default.html или какое-нибудь другое имя, в зависимости от настроек сервера. Действительно, большинство различных частей URL-адреса могут быть зависимы от конфигурации конкретного сервера.

URL-адрес является инструментом, который позволяет создавать ссылки на другие файлы в интернете, включая другие файлы вашего собственного сайта. Вам часто придется использовать URL-адреса в HTML и CSS.