---
title: Struktura plików witryny
slug: Learn/Getting_started_with_the_web/Dealing_with_files
translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>Strona internetowa zawiera wiele plików: pliki z treścią, kod, arkusze stylów, media, i więcej. Kiedy budujesz stronę internetową, musisz zebrać je wszystkie razem i stworzyć z nich rozsądną strukturę na swoim komputerze oraz upewnić się, że mogą się one między sobą komunikować, zanim <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">wyślesz je na serwer hostingowy</a>. Sekcja <em>Struktura plików witryny</em> omawia podstawowe kwestie jakich powinieneś być świadomy, aby zbudować racjonalną strukturę plików dla twojej strony internetowej.</p>
</div>

<h2 id="Gdzie_na_twoim_komputerze_powinna_znajdować_się_twoja_strona_internetowa">Gdzie na twoim komputerze powinna znajdować się twoja strona internetowa?</h2>

<p>Kiedy pracujesz lokalnie na swoim komputerze, powinieneś wszystkie pliki zwiazane z daną stroną trzymać w pojedynczym folderze, który będzie odzwierciedlał folder na serwerze, na którym zamierzasz publikować stronę.  Ten folder może się znajdować gdzie tylko chcesz, na twoim komputerze, choć raczej powinieneś go przechowywać w miejscu, które łatwo odnajdziesz. Może to być twój Pulpit czy folder domowy linuxa, albo bezpośrednio na dysku twardym bez katalogów nadrzędnych.</p>

<ol>
 <li>Wybierz miejsce przechowywania projektu strony. Utwórz katalog o nazwie <code>web-projects</code> (lub podobnej). Tu będzie się znajdował projekt twojej strony.</li>
 <li>Wewnątrz katalogu utwórz kolejny folder do przechowywania twojej pierwszej strony internetowej. Nazwij go <code>test-site</code> (lub w bardziej kreatywny sposób).</li>
</ol>

<h2 id="Nazewnictwo_folderów_i_plików">Nazewnictwo folderów i plików</h2>

<p>Jak zauważysz, w tym artykule poprosimy cię o nazywanie folderów i plików tylko małymi literami i bez spacji w nazwie. A to dlatego, że:</p>

<ol>
 <li>Wiele komputerów, a w szczególności serwerów sieciowych, jest wrażliwych na wielkość liter w nazwach. Tak więc na przykłąd, jeśli umieścisz obraz z twojej strony w <code>test-site/MyImage.jpg</code>, a następnie w innym pliku odwołasz się do niego jako <code>test-site/myimage.jpg</code>, to może nie zadziałać.</li>
 <li>Przeglądarki, serwery sieciowe oraz języki programowania nie do końca radzą sobie ze spacjami w nazwach. Na przykład, jeśli użyjesz spacji w nazwie pliku, niektóre systemy potraktują tę nazwę jako dwie nazwy dwóch plików. Niektóre serwery zastąpią spacje w nazwie symbolem "%20" (kod znaku dla spacji w URIs), w rezultacie przestaną działać wszystkie twoje odnośniki do takiego pliku. Lepiej jest stosować myślniki niż podkreślenia: <code> my-file.html</code> vs. <code>my_file.html</code>.</li>
</ol>

<p>Krótko mówiąc powinieneś używać myślników w nazwach plików (oczywiście jeśli chcesz używać kilkuwyrazowych nazw). Wyszukiwarka Google traktuje myślnik jako separator słów, ale podkreślenie już nie. Z tego powodu najlepiej jest wyrobić sobie nawyk pisania nazw plików i folderów małymi literami i bez spacji, i raczej nie używać myślników czy podkreśleń, chyba że wiesz co robisz. W ten sposób unikniesz już części problemów jakie możesz napotkać.</p>

<h2 id="Jaką_strukturę_powinna_mieć_twoja_strona_internetowa">Jaką strukturę powinna mieć twoja strona internetowa?</h2>

<p>Następnie zobaczmy jaką strukturę powinna mieć twoja strona internetowa. <span id="result_box" lang="pl"><span>Najczęściej rzeczy, które będziemy mieli w każdym projekcie strony internetowej, który tworzymy, to podstawowy plik HTML </span></span><code>index.html</code><span lang="pl"><span> i foldery zawierające obrazy, pliki stylów i pliki skryptów</span></span> . Stwórzmy je teraz:</p>

<ol>
 <li><code><strong>index.html</strong></code>: Ten plik zawiera podstawową treść strony głównej twojej witryny, czyli tekst i obrazy jakie ludzie widzą wchodząc na twoją stronę. Przy pomocy twojego edytora tekstowego stwórz plik o nazwie <code>index.html</code> i zapisz go w twoim folderze projektu <code>test-site</code>.</li>
 <li><strong>katalog <code>images</code></strong>: Ten folder będzie zawierał obrazy jakie użyjesz na twojej stronie. Utwórz katalog <code>images</code> wewnątrz folderu <code>test-site</code>.</li>
 <li><strong>katalog <code>styles</code></strong>: Ten folder będzie zawierał pliki CSS do nadania wyglądu twojej strony (np. ustawieni koloru tekstu i tła strony). Utwórz katalog <code>styles</code> wewnątrz folderu <code>test-site</code>.</li>
 <li><strong>katalog <code>scripts</code></strong>: Ten folder będzie zawierał cały JavaScript użyty do uczynienia twojej strony interaktywną (np. przyciski wczytujące dane po kliknięciu). Utwórz folder o nazwie <code>scripts</code> wewnątrz katalogu <code>test-site</code>.</li>
</ol>

<div class="note">
<p><strong>Uwaga</strong>: W systemie Windows, możesz napotkać na problem z wyświetlaniem nazw plików, ponieważ domyślnie włączona jest opcja folderów zwana <strong>Ukryj rozszeżenia znanych typów plików</strong>. Możesz ją wyłączyć w prosty sposób. Otwórz Eksplorator Plików, kliknij opcję w menu <strong>Organizuj</strong> a następnie  <strong>Opcje folderów i wyszukiwania</strong>. W zakładce <strong>Widok</strong> odzdnacz opcję <strong>Ukryj rozszeżenia...</strong> Po bardziej szczegółowe informacje (w zależności od twojej wersji systemu Windows) sięgnij do strony Microsoft lub po prostu poszukaj w Internecie!</p>
</div>

<h2 id="Ścieżki_do_plików">Ścieżki do plików</h2>

<p>Aby pliki mogły się między sobą komunikować, musisz ustawić odpowiednie ścieżki między nimi — po prostu chodzi o takie ścieżki, żeby pliki wiedziały wzajemnie, gdzie który się znajduje. Pokażemy ci o co chodzi tworząc nieco kodu w naszym pliku <code>index.html</code>, tak aby wyświetlał obraz jaki wybrałeś zgodnie ze wskazówkami artykułu <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Jak będzie wyglądała twoja strona internetowa?"</a></p>

<ol>
 <li>Skopiuj uprzednio wybrany obrazek do katalogu <code>images</code>.</li>
 <li>Otwórz plik <code>index.html</code> i wklej do niego poniższy kod. Nie martw się na razie tym co on oznacza - przyjżymy się jego strukturze dalej.
  <pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My test page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;img src="" alt="My test image"&gt;
  &lt;/body&gt;
&lt;/html&gt; </pre>
 </li>
 <li>W linii <code>&lt;img src="" alt="My test image"&gt;</code> znajduje się kod HTML, który odpowiada za umieszczenie obrazu na twojej stronie. Musimy mu tylko wskazać, gdzie znajduje się plik z obrazem. Obrazek jest w katalogu <em>images</em>, który z kolei jest w tym samym folderze co <code>index.html</code>. Aby przejść od pliku <code>index.html</code> do naszego obrazu, ścieżka jaką potrzebujemy wskazać to <code>images/your-image-filename</code>. Na przykład, jeśli plik z obrazkiem nazywa się <code>firefox-icon.png</code>, ścieżką do niego jest <code>images/firefox-icon.png</code>.</li>
 <li>Wstaw sieżkę do pliku we wskazanej wcześniej linii w cudzysłowie atrybutu <code>src=""</code>.</li>
 <li>Zapisz plik HTML i otwórz go w przeglądarce (klikając na niego dwa razy). Powinieneś zobaczyć w oknie przeglądarki swój obrazek!</li>
</ol>

<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>

<p>Kilka ogólnych reguł tworzenia ścieżek:</p>

<ul>
 <li>Aby wskazać plik znajdujący się w tym samym katalogu, co plik HTML, który się do niego odwołuje, po prostu podaj nazwę pliku, np. <code>moj-obraz.jpg</code>.</li>
 <li>Aby wskazać plik znadujący się w podkatalogu, podaj nazwę katalogu, następnie slash i nazwę pliku, np. <code>podkatalog/moj-obraz.jpg</code>.</li>
 <li>Aby wskazać plik znadujący się <strong>powyżej</strong> odwołującego się do niego pliku HTML, napisz dwie kropki. Przykładowo, jeśli <code>index.html</code> jest w podfolderze katalogu <code>test-site</code> a <code>moj-obraz.jpg</code> jest wewnątrz folderu <code>test-site</code>, możesz się do niego odnieść pisząc <code>../moj-obraz.jpg</code>.</li>
 <li>Możesz łączyć powyższe reguły na różne sposoby, np <code>../podkatalog/inny-podkatalog/moj-obraz.jpg</code>.</li>
</ul>

<p>Jak narazie to wszystko co powinieneś o tym wiedzieć.</p>

<div class="note">
<p><strong>Uwaga</strong>: W systemie Windows w ścieżkach do plików używa się znaku backslash a nie slash, enp. <code>C:\windows</code>. To jest nieistotne dla HTML — nawet jeśli tworzysz strony na Windowsie, nadal powinieneś używać w ścieżkach znaku slash.</p>
</div>

<h2 id="Co_jeszcze_należy_zrobić">Co jeszcze należy zrobić?</h2>

<p>Na razie to tyle, a twoja struktura plików i folderów powinna wyglądać mniej więcej tak:</p>

<p><img alt="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" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>