MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

Веб-сайт складається з багатьох файлів: текстового наповнення, коду, стилів, медіаконтенту тощо. Коли ви будуєте веб-сайт, ви маєте поєднати ці файли у єдину змістову структуру на своєму локальному комп'ютері, переконатися, що всі файли можуть "спілкуватися" один з одним і правильно відображати весь контент, до того, як ви завантажите їх на сервер. У статті Робота з файлами ми розглядаємо кілька питань, які допоможуть правильно налаштувати структуру файлів для вашого сайту. 

Де саме має зберігатися сайт на вашому комп'ютері?

Коли ви працюєте над своїм сайтом локально на комп'ютері, вам слід зберігати всі файли сайту в одній папці, структура якої має повністю відповідати структурі папки живого сайту, яка зберігається на сервері. Ваша локальна папка може зберігатися де завгодно, але найкраще тримати її там, де ви зможете її легко знайти, наприклад, на робочому столі чи в корені диска. 

  1. Виберіть місце для зберігання ваший веб-сайтів. Створіть нову папку і назвіть її web-projects (або схожим чином). У цій папці житимуть всі ваші веб-проекти. 
  2. Всередині папки, створіть ще одну папку для вашого першого веб-сайту. Назвіть її test-site (або більш вигадливо).

Примітка про великі й малі літери і пробіли

Читаючи цю статтю, ви помітите, що ми просимо вас називати папки і файли малими літерами і без пробілів. Це тому що:

  1. Багато комп'ютерів, особливо веб-серверів, є чутливими до регістрів літер. Наприклад, якщо ви покладете зображення MyImage.jpg у ваш веб-проект  test-site, а потім у якомусь файлі спробуєте вставити це зображення, вказавши шлях як test-site/myimage.jpg, це може не спрацювати.
  2. Браузери, веб-сервери і мови програмування не завжди правильно опрацьовують пробіли. Наприклад, якщо ви використовуєте пробіли в назві файлу, деякі системи можуть вважати, що це дві окремі назви файлів. Деякі сервери замінять пробіли в назві файлів символом "%20" (код символу пробіл в URI), поламаючи при цьому ваші посилання. Краще розділяти слова дефісом, ніж нижнім підкресленням: my-file.html замість my_file.html.

Коротко кажучи, вам слід використовувати дефіс у назвах файлів. Google розуміє дефіс як спосіб розділення слів, але на нижнє підкреслення це не поширюється. З цих міркувань, найкраще звикати до написання назв папок і файлів малими літерами без пробілів, розділяючи слова дефісом, принаймні допоки у вас немає достатніх знань. Так ви матимете менше проблем згодом. 

Яку структуру вибрати для вашого сайту?

Давайте поглянемо, яку структуру повинен мати ваш сайт. Найбільш поширені компоненти, які мають практично всі проекти, які ми створюємо, — це HTML-файл з назвою index, а також кілька папок: із зображеннями, стилями і скриптами. Давайте створимо їх зараз:

  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 за замовчанням приховує розширення файлів. Ви можете змінити налаштування так: у File Explorer вибрати вкладку View і поставити "галочку" в пункті File name extensions. Більш детальну інформацію про те, як змінити налаштування на вашій версії Windows, можна легко знайти в інтернеті.

Шляхи файлів

Щоб змусити файли "спілкуватися" між собою, ви маєте вказати їм шлях один до одного — по суті, маршрут, за яким один файл буде знати, де лежить інший файл. Щоб показати, як це працює, ми додамо трохи HTML у наш файл index.html, щоб вкласти на сторінку зображення, яке ви вибрали в статті "What will your website look like?".

  1. Скопіюйте вибране раніше зображення в папку images.
  2. Відкрийте файл index.html і вставте туди цей код, точно так, як він поданий тут. Поки що не переймайтеся, що він означає, — пізніше ми розглянемо його в деталях. 
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. Рядок <img src="" alt="My test image"> є кодом HTML, який вставить зображення на нашу сторінку. Ми маємо сказати цьому коду, де саме шукати картинку, тобто вказати шлях файлу. Наше зображення зберігається в папці images, яка, в свою чергу, зберігається на тому ж рівні (в тій самій директорії), що і файл index.html. Щоб файл index.html зміг дістатися до нашого зображення, нам потрібно спочатку вказати назву папки із зображеннями, а потім ім'я конкретного зображення, отак: images/ім'я-вашого-файлу. Наприклад, якщо наше зображення називається 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

Загальні правила шляху файлу:

  • Якщо файл, який приєднується, зберігається у тій самій директорії (на тому ж рівні), що і файл, до якого приєднується, то у шляху можна вказати лише назву приєднуваного файла, наприклад, src="my-image.jpg".
  • Якщо файл, який приєднується, лежить у піддиректорії (рівнем нижче), ніж файл, до якого приєднується, спочатку вкажіть ім'я піддиректорії, потім скісну риску, потім назву приєднуваного файлу, наприклад, src="subdirectory/my-image.jpg".
  • Якщо файл, який приєднується, лежить в директорії вище (рівнем вище), ніж файл, до якого приєднується, додайте на початку шляху дві крапки. Наприклад, якщо файл index.html лежав би в підпапці основної папки test-site, а my-image.jpg лежав би в корені основної папки test-site, то шлях до my-image.jpg з файлу index.html був би src="../my-image.jpg".
  • Шлях до файлу, який приєднується, може бути складним і поєднувати директорії різних рівнів, наприклад: ../subdirectory/another-subdirectory/my-image.jpg.

Поки що це все, що вам потрібно знати.

Примітка: файлова система Windows у своїх шляхах зазвичай використовує обернену скісну риску замість звичайної, наприклад, C:\windows. На ваш код HTML це не впливає— навіть якщо ви пишете сайт на 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

Мітки документа й учасники

 Зробили внесок у цю сторінку: mdymytrova, feel13good
 Востаннє оновлена: mdymytrova,