1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
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"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="" alt="My test image">
</body>
</html> </pre>
</li>
<li>W linii <code><img src="" alt="My test image"></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>
|
