Работа с файлами
================

* Назад
* Обзор: Getting started with the web
* Далее

Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге загрузите их на сервер. В статье *Работа с файлами* обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.

Где ваш веб-сайт должен располагаться на вашем компьютере?
----------------------------------------------------------

Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.

1. Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем `web-projects` (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
2. Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её `test-site` (или как-то более творчески).
Небольшое отступление о регистре и пробелах
-------------------------------------------

Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:

1. Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в `test-site/MyImage.jpg`, а затем в другом файле вы пытаетесь вызвать изображение как `test-site/myimage.jpg`, это может не сработать.
2. Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: `my-file.html` лучше чем `my_file.html`.

Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.

Какую структуру должен иметь ваш веб-сайт?
------------------------------------------

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

1. **`index.html`**: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем `index.html` и сохраните его прямо внутри вашей папки `test-site`.
2. **Папка `images`**: Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем `images` внутри вашей папки `test-site`.
3. **Папка `styles`**: Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем `styles` внутри вашей папки `test-site`.
4. **Папка `scripts`**: Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем `scripts` внутри вашей папки `test-site`.

**Примечание:** На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция **Скрывать расширения для известных типов файлов**, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант **Свойства папки...** и снять флажок **Скрывать расширения для зарегистрированных типов файлов**, затем щёлкнуть **OK**. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.

Файловые пути
-------------

Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл `index.html` и научим его отображать изображение, которое вы выбрали в статье "Каким должен быть ваш веб-сайт?"

1. Скопируйте изображение, которое вы выбрали ранее, в папку `images`.
2. Откройте ваш файл `index.html` и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="" alt="Моё тестовое изображение" />
  </body>
</html>
```

3. Строка `<img src="" alt="Моё тестовое изображение">` - это HTML код, который вставляет изображение на страницу. Мы должны сказать HTML, где находится изображение. Изображение находится внутри папки *images*, которая находится в той же директории что и `index.html`. Чтобы спуститься вниз по нашей файловой структуре от `index.html` до нашего изображения, путь к файлу должен выглядеть так `images/your-image-filename`. Например наше изображение, названное `firefox-icon.png`, имеет такой путь к файлу: `images/firefox-icon.png`.
4. Вставьте путь к файлу в ваш HTML код между двойными кавычками `src=""`.
5. Сохраните ваш HTML файл, а затем загрузите его в вашем браузере (двойной щелчок по файлу). Вы должны увидеть вашу новую веб-страницу, отображающую ваше изображение!

![A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files/website-screenshot.png)

Некоторые общие правила о путях к файлам:

* Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, `my-image.jpg`.
* Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: `subdirectory/my-image.jpg`.
* Для ссылки на целевой файл в директории **выше** вызывающего HTML файла, напишите две точки. Например, если `index.html` находится внутри подпапки `test-site`, а `my-image.png` - внутри `test-site`, вы можете обратиться к `my-image.png` из `index.html`, используя `../my-image.png`.
* Вы можете комбинировать их так, как вам нравится, например `../subdirectory/another-subdirectory/my-image.png`.

На данный момент это все, что вам нужно знать

**Примечание:** Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например `C:\windows`. Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.

Что должно быть сделано?
------------------------

К настоящему моменту структура вашей папки должна выглядеть примерно так:

![A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files/file-structure.png)

* Назад
* Обзор: Getting started with the web
* Далее