initial commit

9 files changed, 1457 insertions, 0 deletions

diff --git a/files/pl/learn/getting_started_with_the_web/css_basics/index.html b/files/pl/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..44783a7f55
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,272 @@
+---
+title: CSS podstawy
+slug: Learn/Getting_started_with_the_web/CSS_basics
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Kaskadowe arkusze stylów CSS (ang. Cascading Style Sheets) to kod służący do nadawania wyglądu strony. <em>CSS Podstawy</em> przeprowadzi cię przez bazowe zagadnienia, abyś mógł zacząć modyfikować wygląd swojej strony. Odpowiemy na takie pytania jak: Jak zrobić, żeby mój tekst był czarny albo czerwony? Jak wyświetlić poszczególną zawartość strony w wybranych miejscach ekranu? Jak dekorować stronę obrazami czy nadać kolor tła?</p>
+</div>
+
+<h2 id="Czym_właściwie_jest_CSS">Czym właściwie jest CSS?</h2>
+
+<p>Podobnie jak HTML, CSS nie jest językiem programowania. Nie jest jednak też <em>językiem znaczników</em> — jest językiem arkuszy stylów (ang. <em>style sheet language</em>). <span id="result_box" lang="pl"><span>Oznacza to, że pozwala on selektywnie stosować style do elementów w dokumentach HTML.</span> <span>Na przykład, aby zaznaczyć wszystkie paragrafy na stronie HTML i zmienić w nich kolor tekstu na czerwono, należy napisać ten kod CSS:</span></span></p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Sprawdźmy: wklej te trzy linie kodu do nowego pliku. Plik nazwij <code>style.css</code> i umieść go w katalogu <code>styles</code>.</p>
+
+<p>Wciąż jednak musimy powiązać ten kod CSS z twoim dokumentem HTML. W przeciwnym wypadku stworzony kod CSS nie będzie miał wpływu na wygląd twojej strony. (Jeśli nie śledzisz naszego projektu od poczatku, przeczytaj <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Struktura plików witryny</a> oraz <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML podstawy</a>, żeby dowiedzieć się co wpierw należy wykonać.)</p>
+
+<ol>
+ <li>Otwórz plik <code>index.html</code> i wklej poniższy kod gdzieś w sekcji nagłówka (czyli pomiędzy elementami <code>&lt;head&gt;</code> i <code>&lt;/head&gt;</code>):
+
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Zapisz plik <code>index.html</code> a następnie otwórz go w przeglądarce. Powinieneś móc zobaczyć coś takiego:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Jeśli tekst twoich akapitów jest czerwony, gratulacje! Właśnie napisałeś swój pierwszy skuteczny kod CSS.</p>
+
+<h3 id="Anatomia_reguł_CSS">Anatomia reguł CSS</h3>
+
+<p>Przyjrzyjmy się nieco bardziej szczegółowo naszemu kodowi CSS:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Cała struktura jest nazywana <strong>listą </strong><strong>dyrektyw</strong> - reguł. Oto nazwy poszczególnych części:</p>
+
+<dl>
+ <dt>Selektor</dt>
+ <dd>Element HTML na początku reguły. Wybiera poszczególne elementy (bądź też tylko jeden) do wystylizowania - w tym wypadku wszystkie elementy <code>p</code>. Aby dodać styl do innego elementu, po prostu zmień selektor;</dd>
+ <dt>Deklaracja</dt>
+ <dd>Pojedyncza reguła, taka jak <code>color: red;</code>, która ustala jakie <strong>właściwości</strong> elementu chcesz wystylizować.</dd>
+ <dt>Właściwości</dt>
+ <dd>Sposoby stylizowania danego elementu HTML. (W powyższym przykładzie <code>color</code> jest właściwością selektrora <code>p</code>.) W CSS wybierasz, która właściwość ma być nadana w danej deklaracji.</dd>
+ <dt>Wartość właściwości</dt>
+ <dd>Po prawej stronie właściwości za dwukropkiem mamy wartość właściwości, która wybiera jeden z wielu możliwych wyglądów dla danej właściwości (istnieje wiele wartości <code>color</code> oprócz <code>red</code>).</dd>
+</dl>
+
+<p>Zauważ inne ważne części składni:</p>
+
+<ul>
+ <li>Każda deklaracja (oprócz selektror) musi być ujęta w nawias klamrowy (<code>{}</code>).</li>
+ <li>W ramach każdej deklaracji należy użyć dwukropka (<code>:</code>), aby oddzielić właściwość od jej wartości.</li>
+ <li>W ramach każdej deklaracji należy użyć średnika (<code>;</code>), aby oddzielić każdą deklarację od następnej.</li>
+</ul>
+
+<p>Aby zmodyfikować wiele wartości właściwości jednocześnie, wystarczy napisać je oddzielone średnikami, np.:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Wybieranie_wielu_elementów">Wybieranie wielu elementów</h3>
+
+<p>Możesz również wybrać wiele typów elementów i zastosować dla nich jeden zestaw deklaracji. Wypisz kilka selektorów oddzielonych przecinkami. Na przykład:</p>
+
+<pre class="brush: css">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Inne_typy_selektorów">Inne typy selektorów</h3>
+
+<p>Istnieje wiele innych typów selektorów. Do tej pory używaliśmy tylko <strong>selektorów elementów</strong>, które wybierają wszystkie elementy danego typu z kodu HTML. Ale możemy stworzyć bardziej szczegółowe selektory. Oto kilka powszechnych typów selektorów:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nazwa selektora</th>
+   <th scope="col">Co wybiera?</th>
+   <th scope="col">Przykład</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Selektor elementu (czasem nazywany selektorem tagu lub typu)</td>
+   <td>Element(y) HTML o podanym typie.</td>
+   <td><code>p</code><br>
+    Wybiera elementy <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selektor ID</td>
+   <td>Element na stronie o podanym ID (na jednej stronie HTML możesz użyć konkretnego ID tylko raz).</td>
+   <td><code>#my-id</code><br>
+    Wybiera <code>&lt;p id="my-id"&gt;</code> lub <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selektor klasy</td>
+   <td>Element(y) na stronie o podanej klasie (Tej samej klasy możesz użyć wiele razy na stronie).</td>
+   <td><code>.my-class</code><br>
+    Wybiera <code>&lt;p class="my-class"&gt;</code> oraz <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selektor atrybutu</td>
+   <td>Element(y) na stronie o podanym atrybucie.</td>
+   <td><code>img[src]</code><br>
+    wybiera <code>&lt;img src="myimage.png"&gt;</code> ale nie <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selektor pseudo-klasy</td>
+   <td>Element(y) o określonym stanie np. najechanie myszą na element</td>
+   <td><code>a:hover</code><br>
+    Wybiera <code>&lt;a&gt;</code>, ale tylko gdy kursor znajduje się nad elementem.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Istnieje wiele innych typów selektorów, możesz je poznać w naszym <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a>.</p>
+
+<h2 id="Czcionki_i_tekst">Czcionki i tekst</h2>
+
+<p>Teraz, gdy poznaliśmy podstawy CSS, dodajmy więcej reguł i informacji do naszego pliku <code>style.css</code> żeby nasz przykład wyglądał lepiej. Zacznijmy od zmiany wyglądu czcionek i tekstu.</p>
+
+<ol>
+ <li>Na początek, cofnij się i znajdź <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">output from Google Fonts</a>, który przechowałeś w bezpiecznym miejscu. Dodaj element {{htmlelement("link")}} gdzieś wewnątrz sekcji head w pliku <code>index.html</code> (gdziekolwiek pomiędzy tagami <code>&lt;head&gt;</code> i <code>&lt;/head&gt;</code>). Linijka będzie wyglądała podobnie do:
+
+  <pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>Następnie, usuń istniejące reguły w pliku <code>style.css</code>. To był dobry test, ale czerwony tekst nie wygląda najlepiej.</li>
+ <li>Dodaj poniższy kod, zastępując linie "placeholder" z <code>font-family</code> wygenerowanym w Google Fonts. (<code>font-family</code> oznacza czcionkę lub czcionki których chcesz używać). Pierwsza reguła ustala bazową wielkość tekstu i czcionkę dla całej strony (ponieważ <code>&lt;html&gt;</code> to element-rodzic całej strony i wszystkie elementy wewnątrz niego dziedziczą ten sam <code>font-size</code> i <code>font-family</code>):
+  <pre class="brush: css">html {
+  font-size: 10px; /* px oznacz 'piksele': bazowy rozmiar tekstu to teraz 10 pikseli wysokości  */
+  font-family: placeholder; /* tu powinnien być font-family wygenerowany w Google fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>Uwaga</strong>: Wszystko w dokumencie CSS pomiędzy <code>/*</code> i <code>*/</code> jest <strong>komentarzem </strong><strong>CSS</strong>, który przyglądarka zignoruje podczas wyświetlania strony. To miejsce dla Ciebie na notatki dotyczące tego co dzieje się w danym miejscu.</p>
+  </div>
+ </li>
+ <li>Teraz ustawimy rozmiar czcionki dla elementów zawierających tekst wewnątrz ciała (body) HTML: ({{htmlelement("h1")}}, {{htmlelement("li")}}, i {{htmlelement("p")}}). Wycentrujemy również tekst naszego nagłówka i ustawimy wysokość linii tekstu i odstęp między znakami dla głównej treści aby uczynić ją bardziej czytelną:
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Możesz dostosować wartości <code>px</code> na jakiekolwiek chcesz, aby uzyskać wygląd jaki chcesz, ale generalnie twoja strona powinna wyglądać podobnie jak ta:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Pudełka_pudełka_wszędzie_pudełka">Pudełka, pudełka, wszędzie pudełka</h2>
+
+<p>Jedną z rzeczy którą zauważysz podczas pisania CSS to, że wiele z nich dotyczy pudełek (ang. boxes) — ustawianie ich rozmiaru, koloru, pozycji etc. O większości elementów na stronie możesz myśleć jak o pudełkach stawianych jedne na drugim.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Nic dziwnego, że układ CSS opiera się głównie na <em>modelu pudełkowym</em> (ang. <em>box model</em>). Każdy z bloków zajmujących miejsce na Twojej stronie ma takie właściwości:</p>
+
+<ul>
+ <li><code>padding</code>, przestrzeń wokół elementu (np. wokół paragrafu tekstu)</li>
+ <li><code>border</code>, obramowanie poza padding-iem</li>
+ <li><code>margin</code>, przestrzeń wokół zewnętrznej części elementu</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>W tej sekcji możemy także użyć:</p>
+
+<ul>
+ <li><code>width</code>, szerokość elementu,</li>
+ <li><code>background-color</code>, kolor pod zawartością i paddingiem elementu,</li>
+ <li><code>color</code>, kolor treści elementu (zazwyczaj tekstu),</li>
+ <li><code>text-shadow</code>: ustawia cień pod tekstem wewnątrz elementu,</li>
+ <li><code>display</code>: określa sposób wyświetlania elementu (póki co nie martw się tym).</li>
+</ul>
+
+<p>Dodajmy trochę więcej CSS do naszej strony! Dodawaj nowe reguły na dole pliku i nie bój się eksperymentować ze zmianą wartości, aby zobaczyć, jak działają.</p>
+
+<h3 id="Zmiana_koloru_strony">Zmiana koloru strony</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Ten zestaw reguł ustawi kolor tła dla całej strony. Zmień powyższy kod koloru na dowolny wybrany podczas<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color"> planning your site</a>.</p>
+
+<h3 id="Sortowanie_elementów_body">Sortowanie elementów body</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Teraz element {{htmlelement("body")}}. Jest tu kilka deklaracji, więc przejrzyjmy je wszystkie jedna po drugiej:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — wymusza, aby szerokość elementu body wynosiła 600 pikseli.</li>
+ <li><code>margin: 0 auto;</code> — Kiedy ustawiasz dwie wartości na właściwościach takich jak <code>margin</code> czy <code>padding</code>, pierwsza wartość dotyczy górnej i dolnej strony elementu (ustawia je na 0 w tym wypadku), a druga wartość ustawia lewą i prawą stronę (<code>auto</code> to specjalna wartość która dzieli dostępną przestrzeń w poziomie równo pomiędzy lewą i prawą stronę). Możesz równiej użyć jednej, dwóch, trzech lub czterech wartości tak jak zostało to opisane <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">tutaj</a>.</li>
+ <li><code>background-color: #FF9500;</code> — jak wcześniej, ustawia tło elementu. Użyliśmy czerwono-pomarańczowego koloru dla body, jako przeciwieństwa dla ciemno niebieskiego koloru dla elementu {{htmlelement("html")}}, ale nie krępuj się eksperymentować.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — mamy cztery wartości do ustawienia odstępów do uzyskania przestrzeni wokół elementu. Tym razem ustawiamy brak górnego odstępu i po 20 pikseli odstępu dla prawej strony, dołu i lewej strony. Wartości ustawiają kolejno górę, prawą stronę, dół i lewą stronę.</li>
+ <li><code>border: 5px solid black;</code> — ta prosta reguła ustawia obramowanie ciągłą linią o szerokości 5-ciu pikseli w czarnym kolorze dla każdego z boków.</li>
+</ul>
+
+<h3 id="Ustawianie_i_stylowanie_głównego_nagłówka">Ustawianie i stylowanie głównego nagłówka</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Być może zauważysz paskudną szparę na górze ciała strony. Dzieje się tak dlatego, że przeglądarki stosują pewne <strong>domyślne style</strong> dla elementu {{htmlelement("h1")}} (oraz innych), nawet jeżeli nie użyjesz żadnego stylu CSS! To może brzmieć jak zła koncepcja, ale chcemy by nawet nieostylowana strona wyglądała czytelnie. Aby pozbyć się luki, zmieniliśmy domyślny styl, ustawiając <code>margin: 0;</code>.</p>
+
+<p>Następnie ustawiliśmy górny i dolny margines nagłówka na 20 pikseli i nadaliśmy tekstowi nagłówka taki sam kolor, jak kolor tła dla html.</p>
+
+<p>Ciekawą właściwością, którą tutaj wykorzystaliśmy, jest <code>text-shadow</code>, który nadaje cień dla tekstu wewnątrz elementu. Jego cztery wartości są następujące: </p>
+
+<ul>
+ <li>Pierwsza wartość w pikselach określa <strong>przesunięcie poziome</strong> cienia od tekstu - jak daleko przesunąć go w poprzek: wartość ujemna powinna przesunąć cień w lewo.</li>
+ <li>Druga wartość w pikselach określa <strong>pionowe przesunięcie</strong> cienia - jak daleko przesunąć go w dół; Wartość ujemna przesunie cień w górę.</li>
+ <li>Trzecia wartość w pikselach to <strong>promień rozmycia</strong> cienia — większa wartość oznacza bardziej rozmyty cień.</li>
+ <li>Czwarta wartość określa kolor cienia.</li>
+</ul>
+
+<p>Ponownie, eksperymentuj z innymi wartościami i zobacz co możesz zrobić!</p>
+
+<h3 id="Centrowanie_obrazka">Centrowanie obrazka</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Wreszcie wycentrujemy obrazek żeby wyglądał lepiej. Możemy użyć ponownie triku <code>margin: 0 auto</code> którego użyliśmy w przypadku body, ale dodatkowo musimy zrobić coś jeszcze. Element {{htmlelement("body")}} jest <strong>blokowy (ang. block)</strong>, co oznacza, że zajmuje całą dostępną przestrzeń na stronie i możesz zastosować dla niego marginesy i inne ustawienia wielkości. Z drugiej strony, obrazki są elementali <strong>liniowymi</strong> (ang.inline) i nie posiadają takich właściwości. Dlatego żeby zastosować marginesy dla grafiki musimy zmienić jej sposób wyświetlania na blokowy używając <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Powyższe instrukcje zakładają, że używasz obrazu o szerokości mniejszej niż szerokość ustawiona dla elementu body (600 pikseli). Jeśli obraz jest większy, spowoduje to przelanie treści i rozlanie jej na resztę strony. Aby temu zapobiec możesz 1) zmniejszyć wielkość obrazu za pomocą <a href="https://pl.wikipedia.org/wiki/Edytor_grafiki_rastrowej">editora graficznego</a>, lub 2) zmniejszyć obraz przy użyciu CSS ustawiając właściwość {{cssxref("width")}} dla elementu <code>&lt;img&gt;</code> na mniejszą wartość (np., <code>400 px;</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Nie przejmuj się jeżeli jeszcze nie rozumiesz <code>display: block;</code> i różnicy między elementami liniowymi a blokowymi. Zrozumiesz z czasem zgłębiania wiedzy o CSS. Więcej o różnych dostępnych sposobach wyświetlania możesz znaleźć w naszym <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p>
+</div>
+
+<h2 id="Konkluzja">Konkluzja</h2>
+
+<p>Jeżeli prześledziłeś instrukcje z tego artykułu powinieneś zakończyć ze stroną wyglądającą jak ta (możesz również zobaczyć <a href="http://mdn.github.io/beginner-html-site-styled/">naszą wersję tutaj</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Jeżeli utkniesz możesz zawsze porównać swój kod z naszym <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">gotowym przykładem na GitHub</a>.</p>
+
+<p>To naprawdę podstawowe informacje o CSS. Aby dowiedzieć się więcej sprawdź nasz <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..fe33799b70
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,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">&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>
diff --git a/files/pl/learn/getting_started_with_the_web/html_basics/index.html b/files/pl/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..1b7835d180
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,223 @@
+---
+title: HTML podstawy
+slug: Learn/Getting_started_with_the_web/HTML_basics
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<ol>
+ <li>
+  <h2 id="LearnSidebar">{{LearnSidebar}}</h2>
+ </li>
+</ol>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) jest to kod używany do tworzenia struktury strony i jej zawartości. <span id="result_box" lang="pl"><span>Na przykład treść może być uporządkowana w obrębie zestawu akapitów, listy punktowanych punktów lub tabel obrazów i danych.</span> <span>Jak sugeruje tytuł, ten artykuł daje podstawy do zrozumienia HTML i jego funkcji.</span></span></p>
+</div>
+
+<h2 id="Czym_właściwie_jest_HTML">Czym właściwie jest HTML?</h2>
+
+<p>HTML nie jest językiem programowania; jest <em>językiem znaczników</em> (ang. <em>markup language</em>). HTML składa się z serii znaczników (tagów), których używa się do zamknięcia, <em>opakowania </em>różnych części treści, tak aby wyglądały i/lub działały w określony sposób. Z pomocą tagów możesz ze słów czy obrazów zrobić linki do innych stron, sprawić by były napisane kursywą, większą czcionką, wytłuścić je itd. Na przykład weźmy poniższą treść:</p>
+
+<pre class="notranslate">My cat is very grumpy</pre>
+
+<p>Jeśli chcemy utworzyć z niej paragraf, wystarczy użyć odpowiednich tagów:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h3 id="Anatomia_elementu_HTML">Anatomia elementu HTML</h3>
+
+<p>Przyjrzyjmy się nieco dokładniej jak tworzymy paragraf.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Główne składniki naszego elementu to:</p>
+
+<ol>
+ <li><strong>Tag otwierający:</strong> Znacznik ten zawiera nazwę elementu (w tym wypadku "p") otoczony parą ostrych nawiasów (<em>znak mniejszości i większości na klawiaturze - przyp. tłum.</em>)</li>
+ <li><strong>Tag zamykający:</strong> Jest w zasadzie taki sam jak tag otwierajacy z wyjątkiem tego, że obowiązkowo musi zawierać znak slash przed nazwą tagu. Oznacza to, że w tym miejscu kończy się dany element. Jeśli w kodzie nie umieścisz znaku końca elementu, co jest częstym błędem poczatkujących twórców stron, może to spowodować nieoczekiwane błędy podczas wyświetlania i działania strony.</li>
+ <li><strong>Zawartość:</strong> Po prostu treść elementu, w tym wypadku jest to tekst.</li>
+ <li><strong>Element:</strong> Element to całość tej konstrukcji: tag otwierający plus zawartość plus tag zamykajacy.</li>
+</ol>
+
+<p>Elementy mogą zawierać atrybuty, np:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Atrybuty zawierają dodatkowe informacje o elemencie, które nie są widoczne dla odwiedzających stronę. W tym przykładzie <code>class</code> jest <em>nazwą</em> atrybutu, a <code>editor-note</code> jest jego <em>wartością</em>. Atrybut <code>class</code> pozwala nadać elementowi indentyfikator, który potem może być użyty do nadania stylu elementowi przez CSS lub do innych celów.</p>
+
+<p>Atrybut zawsze powinien mieć:</p>
+
+<ol>
+ <li>Spację między nazwą tagu a nazwą atrybutu (lub innego atrybutu, jeśli dany element ma więcej atrybutów).</li>
+ <li>Nazwę atrybutu oraz znak równości.</li>
+ <li>Wartość podaną w cudzysłowie.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Uwaga</strong>: Proste wartości atrybutów, które nie zawierają białych znaków ASCII (ani żadnego ze znaków <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code> ) mogą pozostać bez cudzysłowów, ale zaleca się używać cudysłowów dla wszystkich wartości atrybutów, ponieważ czyni to kod bardziej spójnym i zrozumiałym.</p>
+</div>
+
+<h3 id="Zagnieżdżanie_elementów">Zagnieżdżanie elementów</h3>
+
+<p>Możesz elementy umieszczać wewnąrz innych elementów kodu HTML — nazywa się to <strong>zagnieżdżaniem</strong>. Jeśli chcemy podkreślić, że nasz kot jest <strong>bardzo</strong> gderliwy, możemy otoczyć slowo "bardzo" tagiem wytluszczającym {{htmlelement("strong")}}:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>Jednak musisz upewnić się, że elementy te są odpowiednio zagnieżdżone: w powyższym przykładzie najpierw otwieramy element {{htmlelement("p")}}, następnie element {{htmlelement("strong")}}, dalej musimy zamknąć element {{htmlelement("strong")}} a dopiero potem {{htmlelement("p")}}. Poniższy przykład jest błędny:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Elementy muszą zaczynać się i kończyć we właściwy sposób, tak aby jeden zawierał się w drugim. Jeśli elementy będą niewłaściwie domknięte, jak w przykładzie wyżej, przeglądarka będzie próbowała zgadnąć co miałeś na myśli, co może prowadzić do nieoczekiwanych rezultatów. Nie rób tak!</p>
+
+<h3 id="Elementy_puste">Elementy puste</h3>
+
+<p>Czasem elementy nie mają zawartości i nazwyamy je <strong>elementami pustymi</strong>. Weźmy element {{htmlelement("img")}}, który używaliśmy wcześniej w naszym kodzie HTML:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Element ten zawiera dwa atrybuty, ale nie posiada tagu zamykającego <code>&lt;/img&gt;</code>ani żadnej treści. To dlatego, że element ten nie opakowuje żadnej treści, której miałby nadawać wygląd. Jego zadaniem jest załączenie do strony obrazka, który pojawi się na stronie.</p>
+
+<h3 id="Anatomia_dokumentu_HTML">Anatomia dokumentu HTML</h3>
+
+<p><span id="result_box" lang="pl"><span>Na razie tyle podstaw poszczgólnych elementów. Teraz przyjrzymy się, w jaki sposób są one łączone, aby utworzyć całą stronę HTML.</span> <span>Powróćmy do kodu, który umieściliśmy w naszym przykładzie</span></span> <code>index.html</code> <span id="result_box" lang="pl"><span>(który poznaliśmy po raz pierwszy w artykule </span></span><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Struktura plików witryny</a>):</p>
+
+<pre class="brush: html notranslate">&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="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Mamy tutaj:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — <span id="result_box" lang="pl"><span>doctype czyli typ dokumentu.</span> <span>Dawno temu, gdy HTML był jeszcze młody (około 1991/2 roku), doctypy miały działać jako linki do zestawu reguł, których strona HTML musiała przestrzegać, aby była uważana za poprawną HTML, co mogło służyć do automatycznego sprawdzania błędów i innych</span> <span>przydatnych rzeczy.</span> <span>Jednak w dzisiejszych czasach nikt nie dba o nie, a tak naprawdę jest tylko historycznym artefaktem, który trzeba uwzględnić, aby wszystko działało dobrze.</span> <span>Na razie to wszystko, co musisz wiedzieć.</span></span></li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — element {{htmlelement("html")}} zawiera całą treść strony i czasem nazwany jest elementem bazowym (ang. root element). Wskazuje, gdzie zaczyna i kończy się kod HTML.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — element {{htmlelement("head")}} to tzw. nagłówek strony. <span id="result_box" lang="pl"><span>Ten element działa jak kontener dla wszystkich elementów, które chcesz umieścić na stronie HTML, ale nie w treści, które wyświetlasz przeglądającym twoją stronę.</span> <span>Obejmuje to takie rzeczy jak </span></span> {Glossary("keyword", "keywords")}} <span lang="pl"><span> i opis strony, który ma się pojawiać w wynikach wyszukiwania, styl CSS, stylowanie naszej treści, deklaracje zestawu znaków, użytych skryptow i inne.</span></span></li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — element {{htmlelement("body")}}. <span id="result_box" lang="pl"><span>Zawiera <em>całą</em> zawartość, która ma być wyświetlana użytkownikom internetowym podczas odwiedzania Twojej strony, niezależnie od tego, czy chodzi o tekst, obrazy, wideo, gry, odtwarzalne ścieżki dźwiękowe czy cokolwiek innego.</span></span></li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — <span id="result_box" lang="pl"><span>ten element ustawia zestaw znaków, którego twój dokument powinien używać do wyświetlenia treści strony. W tym wypadku jest to UTF-8, który zawiera większość znaków z większości ludzkich języków pisanych.</span> <span>Zasadniczo jest w stanie obsłużyć dowolne treści tekstowe, które można na nim umieścić.</span> <span>Nie ma powodu, aby tego nie ustawiać, a to pomoże uniknąć późniejszych problemów.</span></span></li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — element {{htmlelement("title")}}.  Ustawia<span id="result_box" lang="pl"><span> tytuł strony, który jest tytułem wyświetlanym na karcie przeglądarki, do której wczytywana jest strona. Służy ona również do opisu strony po dodaniu jej do zakładek ulubionych, a także pokazuje tutuł strony w wynikach wyszukiwania.</span></span></li>
+</ul>
+
+<h2 id="Obrazy">Obrazy</h2>
+
+<p>Zajmijmy się teraz ponownie elementem {{htmlelement("img")}}:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Jak powiedzieliśmy wcześniej, ten element odpowiada za wyświetlanie obrazu na stronie. Atrybut <code>src</code> (źródło - ang. source) wskazuje ścieżkę do pliku z obrazem.</p>
+
+<p>Mamy również załączony atrybut <code>alt</code> (ang. alternative). Ten atrybut określa jaki napis powinien pojawić się na stronie, jeśli użytkownikowi nie został z jakiegoś powodu wyświetlony obraz:</p>
+
+<ol>
+ <li>Użytkownicy niewidzący lub z poważnymi wadami wzroku często korzystają z narzędzi nazywanymi czytnikami ekranu, które pozwalają im odczytać tekst alternatywny.</li>
+ <li>Czasem coś pójdzie nie tak i obraz nie jest wyświetlany na stronie. Na przykład spróbuj zmienić ścieżkę wewnątrz atrybutu <code>src</code> na błędną. Jeśli zapiszesz i ponownie załadujesz stronę, powinieneś zobaczyć coś takiego zamiast obrazu:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>Kluczowe dla atrybutu <code>alt</code> jest użycie dobrego opisu obrazka. Piszący tekst alternatywny powinien zapewnić czytelnikowi wystarczającą ilość informacji, aby ten mógł dobrze zrozumieć co przekazuje obraz. W tym przykładzie nasz alternatywny tekst "Mój obraz testowy" wcale nie jest dobry. Znacznie lepiej dla naszego obrazka z logo Firefoxa będzie napisać "Logo Firefoxa: płonący lis otaczający Ziemię".</p>
+
+<p>Teraz spróbuj wymyślić dobre teksty alternatywne dla swojego obrazka.</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Dowiedz się więcej na temat dostępności na stronie <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p>
+</div>
+
+<h2 id="Tagowanie_tekstu">Tagowanie tekstu</h2>
+
+<p>W tej sekcji omowimy podstawowe znaczniki HTML do tagowania tekstu strony.</p>
+
+<h3 id="Nagłówki">Nagłówki</h3>
+
+<p><span id="result_box" lang="pl"><span>Elementy nagłówków pozwalają określić, że określone części treści są nagłówkami - lub podtytułami - treści.</span> <span>W taki sam sposób, w jaki książka ma tytuł główny, tytuły rozdziałów i napisy, może również wyglądać dokument HTML.</span> <span>HTML zawiera sześć poziomów nagłówków, {{htmlelement ("h1")}} - {{htmlelement ("h6")}}, chociaż najczęściej będziesz używać tylko co najwyżej 3-4 z nich:</span></span></p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My main title&lt;/h1&gt;
+&lt;h2&gt;My top level heading&lt;/h2&gt;
+&lt;h3&gt;My subheading&lt;/h3&gt;
+&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+
+<p>Teraz spróbuj dodać odpowiedni nagłówej do twojej strony w pliku HTML, tuż nad elementem {{htmlelement("img")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Zobaczysz, że Twój nagłówek na poziomie 1 ma już ustawiony niejawny styl. Nie używaj elementów nagłówka po to, aby uzyskać tekst większy lub pogrubiony, ponieważ są one używane z powodów <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#Text_content">semantycznych</a> i <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">innych przyczyn, takich jak SEO</a>. Spróbuj utworzyć znaczącą sekwencję nagłówków na swoich stronach, bez pomijania poziomów.</p>
+</div>
+
+<h3 id="Paragrafy">Paragrafy</h3>
+
+<p>Jak wyjaśniono wcześniej, elementy {{htmlelement("p")}} służą do formatowania parafrafów tekstu; <span id="result_box" lang="pl"><span>będziesz ich często używać podczas oznaczania zwykłej treści tekstowej:</span></span></p>
+
+<pre class="brush: html notranslate">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p>Dodaj do swojego tekstu na stronie jeden lub więcej paragrafów (powinieneś go mieć po lekturze artykułu <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Jak powinna wyglądać twoja strona internetowa?</em></a>). Paragrafy umieść bezpośrednio pod elementem {{htmlelement("img")}}.</p>
+
+<h3 id="Listy">Listy</h3>
+
+<p>Wiele stron internetowych posiada listy, a HTML ma odpowiedni element do ich utworzenia. Tworzenie listy zawsze wymaga przynajmniej dwóch elementów. Najpopularnieszymi typami list są lista numerowana i lista wypunktowana</p>
+
+<ol>
+ <li><strong>Lista wypunktowana</strong> jest rodzajem listy, gdzie kolejność jej elementów nie ma znaczenia, np. lista zakupów. Aby ją utworzyć użyj znacznika {{htmlelement("ul")}} (ang. unordered list).</li>
+ <li><strong>Lista numerowana</strong><strong> </strong>jest rodzajem listy, gdzie kolejność jej elementów ma znaczenie, np. przepis na coś. Do tego rodzaju listy używany jest znacznik {{htmlelement("ol")}} (ang. ordered list).</li>
+</ol>
+
+<p>Każdy element listy musi być umieszczony w swoim znaczniku {{htmlelement("li")}} (ang. list item).</p>
+
+<p>Na przykład, jeśli chcielibyśmy utworzyć listę z poniższego paragrafu:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>Możemy to zrobić w następujący sposób:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologists&lt;/li&gt;
+  &lt;li&gt;thinkers&lt;/li&gt;
+  &lt;li&gt;builders&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;working together ... &lt;/p&gt;</pre>
+
+<p>Spróbuj dodać oba rodzaje list do swojej przykładowej strony.</p>
+
+<h2 id="Linki_odnośniki">Linki (odnośniki)</h2>
+
+<p>Odnośniki są bardzo ważne — są tym co sprawia, że Sieć jest Siecią! Aby utworzyć odnośnik musimy użyć prostego elementu — {{htmlelement("a")}} — "a" jest skrótem od angielskiego "anchor", czyli kotwica. Aby zrobić z twojego teksu w paragrafie link, wykonaj następujące czynności:</p>
+
+<ol>
+ <li>Wybierz jakiś tekst. My wybraliśmy "Mozilla Manifesto".</li>
+ <li>Umieść go wewnątrz elementu {{htmlelement("a")}}:
+  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Nadaj elementowi {{htmlelement("a")}} atrybut <code>href</code>:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Wypełnij atrybut <code>href</code> odpowiednią zawartością, tj. adresem strony do jakiej twoj odnośnik ma prowadzić:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Możesz otrzymać nieoczekiwany rezultat jeśli w adresie pominiesz część <code>https://</code> lub <code>http://</code>, zwana  <em>protokołem.</em> Po dodaniu linku przetestuj stronę czy odnośnik prowadzi tam gdzie chciałeś.</p>
+
+<div class="note">
+<p><code>href</code> może się wydawać niejasnym wyborem dla nazwy atrybutu. Jeśli masz problem z zapamiętaniem go, pamietaj że oznacza on hipertekstową referencję <em>(</em>ang.<em> <strong>h</strong>ypertext <strong>ref</strong>erence</em>)</p>
+</div>
+
+<p>Jeśli tego jeszcze nie zrobiłeś, dodaj odnośnik na twojej stronie.</p>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Jeśli podążałeś za instrukcjami zawartymi w tym artykule, obecnie twoja strona powinna wyglądać podobnie do tej poniżej (możesz ją również zobaczyć <a href="http://mdn.github.io/beginner-html-site/">tutaj</a>):<br>
+ <br>
+ <s><img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></s></p>
+
+<p>Jeśli gdzieś po drodze utknąłeś, zawsze możesz porównać swój kod z  GitHub <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">ukończonymi przykładami</a> na GitHubie.</p>
+
+<p>Tutaj jedynie prześlizgnęliśmy się po powierzchni HTMLa. Aby dowiedzieć się więcej przejdź do strony <a href="/en-US/Learn/HTML">Nauka HTMLa </a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/pl/learn/getting_started_with_the_web/index.html b/files/pl/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..622e465103
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,59 @@
+---
+title: Rozpocznij pracę z Siecią
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Index
+  - NeedsTranslation
+  - TopicStub
+  - publishing
+  - theory
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Rozpocznij pracę z Siecią</em> to zwięzła seria wprowadzająca w praktyczne aspekty tworzenia stron internetowych. Skonfigurujesz narzędzia potrzebne do zbudowania prostej strony internetowej i opublikowania własnego prostego kodu.</p>
+</div>
+
+<h2 id="Historia_twojej_pierwszej_strony_internetowej">Historia twojej pierwszej strony internetowej</h2>
+
+<p>Stworzenie profesjonalnej strony internetowej to dużo pracy, więc jeśli dopiero zaczynasz tworzenie stron internetowych, zachęcamy do rozpoczęcia od czegoś małego. Nie zbudujesz od razu drugiego Facebooka, ale nie jest trudno zbudować własną, prostą stronę internetową, więc zaczniemy od tego.</p>
+
+<p>Przeglądając poniższe artykuły w sugerowanej kolejności, przejdziesz od zera do pierwszej strony internetowej. Zacznijmy naszą podróż!</p>
+
+<h3 id="Instalacja_podstawowego_oprogramowania"><a href="/pl/Learn/Getting_started_with_the_web/Installing_basic_software">Instalacja podstawowego oprogramowania</a></h3>
+
+<p>Jeśli chodzi o narzędzia do budowy strony internetowej, jest wiele do wyboru. Jeżeli dopiero zaczynasz, możesz być zdezorientowany przez szereg edytorów kodu, frameworków i narzędzi do testowania. <a href="/pl/Learn/Getting_started_with_the_web/Installing_basic_software">Instalując podstawowe oprogramowanie</a> pokazujemy ci krok po kroku, jak zainstalować tylko takie oprogramowanie, które jest Ci potrzebne do rozpoczęcia podstawowego tworzenia stron internetowych.</p>
+
+<h3 id="Jak_będzie_wyglądała_twoja_strona_internetowa"><a href="/pl/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Jak będzie wyglądała twoja strona internetowa?</a></h3>
+
+<p>Zanim zaczniesz pisanie kodu dla swojej strony internetowej, należy ją najpierw zaplanować. Jakie informacje prezentujesz? Jakich czcionek i kolorów używasz? <a href="/pl/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Jak będzie wyglądać twoja strona internetowa?</a> Przedstawiamy prostą metodę, którą możesz zastosować, aby zaplanować treść i wygląd witryny.</p>
+
+<h3 id="Radzenie_sobie_z_plikami"><a href="/pl/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a></h3>
+
+<p>Strona składa się z wielu plików: treści tekstowych, kodu, arkuszy stylów, treści multimedialnych itp. Kiedy budujesz stronę internetową, musisz zebrać te pliki w sensowną strukturę i upewnić się, że mogą się one między sobą komunikować. Sekcja <a href="/pl/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a> wyjaśnia, jak utworzyć sensowną strukturę plików dla swojej strony internetowej i jakich zagadnień trzeba mieć świadomość.</p>
+
+<h3 id="Podstawy_HTML"><a href="/pl/Learn/Getting_started_with_the_web/HTML_basics">Podstawy HTML</a></h3>
+
+<p>Hipertekstowy język znaczników (HTML) to kod, którego używasz do strukturyzowania treści internetowych i nadawania im znaczenia i celu. Na przykład, czy zawartość mojej strony to zestaw akapitów, czy wypunktowana lista? Czy na mojej stronie znajdują się obrazy? Czy mam tabelę danych? Nie przytłaczając cię, <a href="/pl/Learn/Getting_started_with_the_web/HTML_basics">podstawy HTML</a> zapewniają wystarczającą ilość informacji, aby zapoznać Cię z HTML.</p>
+
+<h3 id="Podstawy_CSS"><a href="/pl/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a></h3>
+
+<p>Kaskadowe arkusze stylów (CSS) to kod, którego używasz do stylizacji swojej strony internetowej. Na przykład, czy chcesz, aby tekst był czarny, czy czerwony? W którym miejscu na ekranie ma być wyświetlana dana zawartość strony? Jakie obrazy i kolory tła powinny być użyte do udekorowania twojej strony? <a href="/pl/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a> przeprowadzą Cię przez to, czego potrzebujesz, aby zacząć.</p>
+
+<h3 id="Podstawy_JavaScript"><a href="/pl/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a></h3>
+
+<p>JavaScript to język programowania, którego używasz do dodawania interaktywnych funkcji do swojej strony internetowej. Przykładami mogą być gry, rzeczy, które zdarzają się po naciśnięciu przycisków lub wprowadzeniu danych w formularzach, dynamiczne efekty stylizacji, animacje i wiele innych. <a href="/pl/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a> dają ci wyobrażenie o tym, co jest możliwe z tym ekscytującym językiem i jak zacząć.</p>
+
+<h3 id="Publikowanie_swojej_strony_internetowej"><a href="/pl/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej strony internetowej</a></h3>
+
+<p>Po zakończeniu pisania kodu i organizowania plików, które składają się na twoją stronę internetową, musisz umieścić to wszystko w Internecie, aby ludzie mogli ją znaleźć.<a href="/pl/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej witryny</a> opisuje, jak przy minimalnym wysiłku można uzyskać prosty przykładowy kod online.</p>
+
+<h3 id="Jak_działa_sieć"><a href="/pl/Learn/Getting_started_with_the_web/Jak_dziala_Siec">Jak działa sieć</a></h3>
+
+<p>Kiedy wchodzisz na swoją ulubioną stronę internetową, w tle dzieje się wiele skomplikowanych rzeczy, o których możesz nie wiedzieć. <a href="/pl/Learn/Getting_started_with_the_web/How_the_Web_works">Sposób działania sieci</a> określa, co dzieje się podczas przeglądania strony internetowej na komputerze.</p>
diff --git a/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..86fd252681
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,80 @@
+---
+title: Instalacja podstawowego oprogramowania
+slug: Learn/Getting_started_with_the_web/Installing_basic_software
+tags:
+  - Beginner
+  - Browser
+  - Learn
+  - Setup
+  - Tools
+  - WebMechanics
+  - 'l10n:priority'
+  - text editor
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>W sekcji <em>Instalacja podstawowego oprogramowania</em> pokazujemy, jakie narzędzia są potrzebne do podstawowego tworzenia stron internetowych i jak je prawidłowo zainstalować.</p>
+</div>
+
+<h2 id="Jakich_narzędzi_używają_profesjonaliści">Jakich narzędzi używają profesjonaliści?</h2>
+
+<ul>
+ <li><strong>Komputer</strong>. Może wydaje się to oczywiste dla niektórych ludzi, ale część z Was czyta ten artykuł w telefonie lub na komputerze w bibliotece. Dla poważnego tworzenia stron internetowych, lepiej jest zainwestować w komputer stacjonarny lub laptop z systemem Windows, macOS lub Linux.</li>
+ <li><strong>Edytor tekstowy</strong>, do pisania kodu. Może to być edytor tekstowy (np. <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, lub <a href="https://www.vim.org/">VIM</a>), lub edytor hybrydowy (np. <a href="https://www.adobe.com/pl/products/dreamweaver.html">Dreamweaver</a> lub <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Edytory dokumentów biurowych nie nadają się do tego celu, ponieważ opierają się na ukrytych elementach, które zakłócają działanie silników renderujących używanych przez przeglądarki internetowe.</li>
+ <li><strong>Przeglądarki internetowe</strong>, do testowania kodu. Obecnie najczęściej używanymi przeglądarkami internetowymi są <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/pl">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://support.microsoft.com/pl-pl/help/17621/internet-explorer-downloads">Internet Explorer</a> i <a href="https://www.microsoft.com/pl-pl/edge">Microsoft Edge</a>. Należy także sprawdzić, jak twoja strona działa na urządzeniach mobilnych i na starszych przeglądarkach, których wciąż mogą używać twoi odbiorcy (takich jak IE 8–10.) <a href="https://lynx.browser.org/">Lynx</a>, terminalowa przeglądarka tekstowa, jest świetna do sprawdzenia, jak Twoja strona jest doświadczana przez użytkowników z wadami wzroku.</li>
+ <li><strong>Edytor graficzny</strong>, taki jak <a href="https://www.gimp.org/">GIMP</a>, <a href="https://www.figma.com/">Figma</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/pl/products/photoshop.html">Photoshop</a>, lub <a href="https://www.adobe.com/pl/products/xd.html">XD</a>, do tworzenia obrazów lub grafiki dla swoich stron internetowych.</li>
+ <li><strong>System kontroli wersji</strong>, do zarządzania plikami na serwerach, współpracy przy projekcie z zespołem, współdzielenia kodu i zasobów oraz unikania konfliktów edycyjnych. Obecnie <a href="http://git-scm.com/">Git</a> jest najpopularniejszym systemem kontroli wersji, wraz z serwisem hostingowym <a href="https://github.com/">GitHub</a> lub <a href="https://gitlab.com">GitLab</a>.</li>
+ <li><strong>Program FTP</strong>, używany na starszych kontach hostingowych do zarządzania plikami na serwerach (<a href="http://git-scm.com/">Git</a> coraz częściej zastępuje w tym celu FTP). Dostępnych jest wiele programów (S)FTP, w tym <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> i <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>System automatyzacji</strong>, taki jak <a href="https://webpack.js.org/">Webpack</a>, <a href="http://gruntjs.com/">Grunt</a> lub <a href="http://gulpjs.com/">Gulp</a>, który automatycznie wykonuje powtarzające się zadania, takie jak minifikacja kodu i przeprowadzanie testów.</li>
+ <li>Biblioteki, frameworki, itp., aby przyspieszyć pisanie powszechnych funkcji. Biblioteka jest zazwyczaj istniejącym plikiem JavaScript lub CSS, który zapewnia gotowe funkcje do wykorzystania w kodzie. Framework ma tendencję do kontynuowania tego pomysłu, oferując kompletny system z niestandardowymi składniami do pisania aplikacji internetowej na najwyższym poziomie.</li>
+ <li>Oraz wiele więcej narzędzi!</li>
+</ul>
+
+<h2 id="Jakich_właściwie_narzędzi_potrzebuję_na_teraz">Jakich właściwie narzędzi potrzebuję na teraz?</h2>
+
+<p>Wygląda to na przerażającą listę, ale na szczęście można zacząć tworzyć strony internetowe, nie wiedząc nic o większości z nich. W tym artykule przedstawimy Ci tylko minimum - edytor tekstu i kilka nowoczesnych przeglądarek internetowych.</p>
+
+<h3 id="Instalacja_edytora_tekstowego">Instalacja edytora tekstowego</h3>
+
+<p>Prawdopodobnie masz już podstawowy edytor tekstu na swoim komputerze. Domyślnie Windows zawiera <a href="https://pl.wikipedia.org/wiki/Notatnik_(program)">Notatnik</a> a macOS dostarczany jest z <a href="https://pl.wikipedia.org/wiki/TextEdit">TextEdit</a>. Dystrybucje Linuksa różnią się od siebie; na Ubuntu jest to <a href="https://pl.wikipedia.org/wiki/Gedit">gedit</a>.</p>
+
+<p>W przypadku tworzenia stron internetowych, przydałby ci się jednak lepszy edytor tekstowy. Polecamy zacząć od <a href="https://code.visualstudio.com/">Visual Studio Code</a>, który jest darmowym edytorem, oferującym podglądy na żywo i podpowiedzi do kodu.</p>
+
+<h3 id="Instalacja_nowoczesnych_przeglądarek_internetowych">Instalacja nowoczesnych przeglądarek internetowych</h3>
+
+<p>Na razie zainstalujemy kilka przeglądarek internetowych, aby przetestować nasz kod. Wybierz swój system operacyjny poniżej i kliknij odpowiednie linki aby pobrać instalatory swoich ulubionych przeglądarek:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (System Windows 10 jest domyślnie wyposażony w przeglądarkę Edge; jeśli masz Windows 7 lub nowszy, możesz zainstalować Internet Explorer 11; w przeciwnym razie należy zainstalować alternatywną przeglądarkę).</li>
+ <li>macOS: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (macOS i iOS są domyślnie wyposażone w Safari).</li>
+</ul>
+
+<p>Zanim przejdziesz dalej, należy zainstalować co najmniej dwie z tych przeglądarek i mieć je gotowe do testów.</p>
+
+<div class="blockIndicator note">
+<p><strong>Uwaga</strong>: Internet Explorer nie jest kompatybilny z niektórymi nowoczesnymi funkcjami sieciowymi i może nie być w stanie uruchomić twojego projektu. Zazwyczaj nie musisz się martwić o to, aby twoje projekty były z nim kompatybilne, ponieważ bardzo niewiele osób nadal z niego korzysta - na pewno nie martw się o niego zbytnio podczas nauki. Czasami możesz natknąć się na projekt, który wymaga wsparcia.</p>
+</div>
+
+<h3 id="Instalacja_lokalnego_serwera_sieciowego">Instalacja lokalnego serwera sieciowego</h3>
+
+<p>Niektóre przykłady będą musiały być uruchamiane przez serwer sieciowy, aby działały poprawnie. Możesz dowiedzieć się jak to zrobić w <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">Jak skonfigurować lokalny serwer testowy?</a></p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pl/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalacja podstawowego oprogramowania</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pl/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Jak będzie wyglądała twoja strona internetowa?</a></li>
+ <li id="Dealing_with_files"><a href="/pl/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a></li>
+ <li id="HTML_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/HTML_basics">Podstawy HTML</a></li>
+ <li id="CSS_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a></li>
+ <li id="JavaScript_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/pl/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej strony internetowej</a></li>
+ <li id="How_the_web_works"><a href="/pl/docs/Learn/Getting_started_with_the_web/Jak_dziala_Siec">Jak działa sieć</a></li>
+</ul>
diff --git a/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html b/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html
new file mode 100644
index 0000000000..6d1a97d33c
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html
@@ -0,0 +1,110 @@
+---
+title: Jak działa Sieć
+slug: Learn/Getting_started_with_the_web/Jak_dziala_Siec
+tags:
+  - Beginner
+  - Client
+  - DNS
+  - HTTP
+  - IP
+  - Infrastructure
+  - Learn
+  - Server
+  - TCP
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Jak działa Sieć</em> zapewnia uproszczony wgląd w to, co dzieje się podczas przeglądania witryny w przeglądarce internetowej na komputerze lub telefonie.</p>
+</div>
+
+<p>Teoria ta nie jest niezbędna do pisania kodu, ale na dłuższą metę zrozumienie tego, co dzieje się w tle, przynosi korzyści.</p>
+
+<h2 id="Klienci_i_serwery">Klienci i serwery</h2>
+
+<p>Komputery podłączone do sieci są nazywane <strong>klientami </strong>i <strong>serwerami</strong>. Uproszczony schemat ich interakcji może wyglądać w ten sposób:</p>
+
+<p><img alt="Dwa kółka reprezentujące klienta i serwer. Strzałka oznaczona jako zapytanie przechodzi z klienta do serwera, a strzałka oznaczona jako odpowiedź przechodzi z serwera do klienta." src="https://media.prod.mdn.mozit.cloud/attachments/2020/08/11/17375/3a120e53720c56bd08e3e0b3465edc88/simple-client-server_PL.png" style="height: 371px; width: 1193px;"></p>
+
+<ul>
+ <li>Klientami są typowe urządzenia użytkownika podłączone do Internetu (na przykład komputer podłączony do sieci Wi-Fi lub telefon podłączony do sieci komórkowej) oraz oprogramowanie umożliwiające dostęp do Internetu znajdujące się na tych urządzeniach (zazwyczaj przeglądarka internetowa, taka jak Firefox lub Chrome).</li>
+ <li>Serwery to komputery, na których przechowywane są witryny, strony lub aplikacje. Gdy urządzenie klienckie chce uzyskać dostęp do strony internetowej, kopia strony jest pobierana z serwera na komputer kliencki i wyświetlana w przeglądarce internetowej użytkownika.</li>
+</ul>
+
+<h2 id="Pozostałe_części_składowe">Pozostałe części składowe</h2>
+
+<p>Klient i serwer, o których pisaliśmy powyżej, nie opowiadają całej historii. Jest wiele innych części, które są związane z tym tematem, a my opiszemy je poniżej.</p>
+
+<p>Na razie, wyobraźmy sobie, że sieć to droga. Na jednym końcu tej drogi jest klient, który jest jak twój dom. Na drugim końcu drogi jest serwer, który jest sklepem, w którym chcesz coś kupić.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Oprócz klienta i serwera, musimy się również przywitać z:</p>
+
+<ul>
+ <li><strong>Twoim połączeniem internetowym</strong>: Pozwala na wysyłanie i odbieranie danych w sieci. W zasadzie jest jak ulica pomiędzy twoim domem a sklepem.</li>
+ <li><strong>TCP/IP</strong>: Protokół Sterowania Transmisją i Protokół Internetowy są protokołami komunikacyjnymi, które określają sposób przesyłania danych przez Internet. To tak jak mechanizmy transportowe, które pozwalają na składanie zamówień, chodzenie do sklepu i kupowanie towarów. W naszym przykładzie jest to samochód lub rower (lub jakkolwiek inaczej możesz się poruszać).</li>
+ <li><strong>DNS</strong>: System Nazw Domen jest jak książka adresowa dla stron internetowych. Kiedy wpisujesz adres internetowy w przeglądarce, przeglądarka patrzy na DNS, aby znaleźć prawdziwy adres strony internetowej, zanim będzie mogła go wyświetlić. Przeglądarka musi dowiedzieć się, na którym serwerze znajduje się strona internetowa, aby mogła wysłać wiadomości HTTP we właściwe miejsce (patrz poniżej). Jest to jak szukanie adresu sklepu, aby uzyskać do niego dostęp.</li>
+ <li><strong>HTTP</strong>: Hypertext Transfer Protocol jest {{Glossary("Protocol" , "protokołem")}} aplikacji, który definiuje język, w którym klienci i serwery mogą rozmawiać ze sobą. Jest to język, którego używasz do zamawiania swoich towarów.</li>
+ <li><strong>Plikami składowymi</strong>: Strona składa się z wielu różnych plików, które są jak różne części towaru kupowanego w sklepie. Pliki te występują w dwóch głównych typach:
+  <ul>
+   <li><strong>Pliki z kodem</strong>: Strony internetowe są zbudowane głównie z HTML, CSS i JavaScript, choć inne technologie poznasz nieco później.</li>
+   <li><strong>Zasoby</strong>: To wspólna nazwa dla wszystkich innych rzeczy, które składają się na stronę internetową, takich jak obrazy, muzyka, wideo, dokumenty Word i PDFy.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Więc_co_się_dokładnie_dzieje">Więc co się dokładnie dzieje?</h2>
+
+<p>Po wpisaniu adresu strony internetowej w przeglądarce (dla naszej analogii jest to jak chodzenie do sklepu):</p>
+
+<ol>
+ <li>Przeglądarka przechodzi do serwera DNS i znajduje rzeczywisty adres serwera, na którym znajduje się strona internetowa (znajduje się adres sklepu).</li>
+ <li>Przeglądarka wysyła do serwera wiadomość z żądaniem HTTP, prosząc go o przesłanie kopii strony internetowej do klienta (wchodzisz do sklepu i zamawiasz towar). Ta wiadomość i wszystkie inne dane wysyłane pomiędzy klientem a serwerem są przesyłane przez twoje połączenie internetowe przy użyciu TCP/IP.</li>
+ <li>Jeśli serwer zaakceptuje prośbę klienta, serwer wysyła do niego wiadomość "200 OK", co oznacza "Oczywiście możesz zajrzeć na tę stronę! Tutaj jest", a następnie zaczyna wysyłać pliki strony do przeglądarki w postaci serii małych kawałków zwanych pakietami danych (sklep daje Ci towar, a Ty przynosisz go z powrotem do domu).</li>
+ <li>Przeglądarka składa małe kawałki w kompletną stronę internetową i wyświetla ją Tobie (towar dociera do Twoich drzwi - nowe błyszczące rzeczy, niesamowite!).</li>
+</ol>
+
+<h2 id="Wyjaśnienie_DNS">Wyjaśnienie DNS</h2>
+
+<p>Prawdziwe adresy internetowe nie są miłymi, zapadającymi w pamięć słowami, które wpisujesz do paska adresu, aby znaleźć swoje ulubione strony. Są to specjalne numery, które wyglądają tak: <code>63.245.215.20</code>.</p>
+
+<p>Nazywa się to {{Glossary("IP Address", "adresem IP")}} i reprezentuje on unikalną lokalizację w sieci. Jednakże, nie jest to łatwe do zapamiętania, prawda? Właśnie dlatego wynaleziono system nazw domen. Są to specjalne serwery, które dopasowują adres internetowy, który wpisujesz do przeglądarki (np. "mozilla.org") do rzeczywistego adresu strony internetowej (IP).</p>
+
+<p>Do stron internetowych można dotrzeć bezpośrednio poprzez ich adresy IP. Adres IP strony internetowej można znaleźć wpisując jej domenę do narzędzia takiego jak <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<h2 id="Objaśnienie_pakietów">Objaśnienie pakietów</h2>
+
+<p>Wcześniej używaliśmy terminu "pakiety" do określenia formatu, w jakim dane są wysyłane z serwera do klienta. Co mamy tu na myśli? Zasadniczo, gdy dane są wysyłane przez sieć, są one wysyłane w postaci tysięcy małych kawałków, dzięki czemu wielu różnych użytkowników sieci może pobrać tę samą stronę w tym samym czasie. Gdyby strony internetowe były wysyłane jako pojedyncze duże kawałki, tylko jeden użytkownik mógłby pobrać jeden na raz, co oczywiście uczyniłoby sieć bardzo nieefektywną i mało przyjemną w użyciu.</p>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/How_the_Internet_works">Jak działa Internet</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Uznanie">Uznanie</h2>
+
+<p>Zdjęcie ulicy: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, autorstwa <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pl/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalacja podstawowego oprogramowania</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pl/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Jak będzie wyglądała twoja strona internetowa?</a></li>
+ <li id="Dealing_with_files"><a href="/pl/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a></li>
+ <li id="HTML_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/HTML_basics">Podstawy HTML</a></li>
+ <li id="CSS_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a></li>
+ <li id="JavaScript_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/pl/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej strony internetowej</a></li>
+ <li id="How_the_web_works"><a href="/pl/docs/Learn/Getting_started_with_the_web/Jak_dziala_Siec">Jak działa sieć</a></li>
+</ul>
diff --git a/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..cf62e22bb7
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,395 @@
+---
+title: Podstawy JavaScript
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - Początkujący
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript to język programowania, który dodaje interaktywność do Twojej witryny (na przykład: gry, odpowiedzi po naciśnięciu przycisków lub wprowadzeniu danych do formularza, dynamiczne stylowanie, animacja). Ten artykuł pomoże Ci rozpocząć przygodę z tym ekscytującym językiem oraz przedstawi przedsmak tego, co dzięki niemu jest możliwe.</p>
+</div>
+
+<h2 id="Czym_naprawdę_jest_JavaScript">Czym naprawdę jest JavaScript?</h2>
+
+<p>{{Glossary("JavaScript")}} (w skrócie "JS") jest pełnoprawnym {{Glossary("Dynamic programming language", "dynamicznym językiem programowania")}}, który po dodaniu do dokumentu {{Glossary("HTML")}}, może dostarczyć dynamiczną zawartość do stron internetowych. Został stworzony przez Brendan'a Eich, współtwórcę projektu Mozilla, Mozilla Foundation i Mozilla Corporation.</p>
+
+<p>JavaScript jest niezwykle wszechstronny. Możesz zacząć z czymś małym, z karuzelami, galeriami obrazków, zmiennymi układami strony i odpowiedziami na kliknięcia przycisków. Z większym doświadczeniem, będziesz w stanie stworzyć gry, animowane grafiki 2D i 3D, kompleksowe aplikacje oparte na bazach danych i wiele więcej!</p>
+
+<p>JavaScript jest dość zwarty, ale jednocześnie bardzo elastyczny. Programiści napisali wiele różnych narzędzi z wykorzystaniem rdzenia języka JavaScript, otwierając mnóstwo dodatkowych funkcjonalności przy minimalnym wysiłku. Obejmują one:</p>
+
+<ul>
+ <li>Browser Application Programming Interfaces ({{Glossary("API","APIs")}}) — API wbudowane w przeglądarki internetowe, zapewniające takie funkcjonalności jak dynamiczne tworzenie HTML i ustawianie stylów CSS, zbieranie i manipulowanie strumieniem wideo z kamery internetowej użytkownika lub generowanie grafiki 3D i próbek audio.</li>
+ <li>API innych firm umożliwiające programistom dołączenie do swoich witryn funkcjonalności pochodzących od innych dostawców treści, takich jak Twitter czy Facebook.</li>
+ <li>Frameworki i biblioteki innych firm zewnętrznych, które możesz  wykorzystać w swoim kodzie HTML, by umożliwić sobie szybkie tworzenie witryn i aplikacji internetowych.</li>
+</ul>
+
+<p>Ponieważ ten artykuł ma być jedynie lekkim wprowadzeniem do JavaScript, nie będziemy mieszać Ci na tym etapie mówiąc szczegółowo o tym, jaka jest różnica między jądrem języka JavaScript, a różnymi narzędziami wymienionymi powyżej. Możesz później nauczyć się tego wszystkiego szczegółowo, w naszym <a href="/en-US/docs/Learn/JavaScript">JavaScript learning area</a> i w pozostałych artykułach MDN.</p>
+
+<p>Poniżej przedstawimy kilka aspektów podstaw języka, będziesz miał także okazje pobawić się kilkoma funkcjonalnościami interfejsu API przeglądarki. Baw się dobrze!</p>
+
+<h2 id="Przykład_hello_world">Przykład "hello world"</h2>
+
+<p>Powyższa sekcja może brzmieć naprawdę ekscytująco i tak powinno być — JavaScript jest jedną z najbardziej żywych technologii internetowych i kiedy zaczniesz się nią dobrze posługiwać to twoje witryny internetowe wejdą w nowy wymiar mocy i kreatywności.</p>
+
+<p>Jednak uzyskanie poczucia komfortu w używaniu JavaScript jest trudniejsze niż w przypadku korzystania z HTML i CSS. Być może lepiej będzie zacząć powoli i kontynuować pracę za pomocą małych konsekwentnych kroków. Na początek pokażemy, jak dodać podstawowy kod JavaScript do Twojej strony tworząc przykład "hello world!" (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">standard w podstawowych przykładach programowania</a>).</p>
+
+<div class="warning">
+<p><strong>Ważne</strong>: Jeśli nie podążałeś za wcześniejszą częścią naszego kursu, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">pobierz ten przykładowy kod</a> i użyj go jako punktu wyjścia.</p>
+</div>
+
+<ol>
+ <li>Po pierwsze, przejdź do swojej strony testowej i utwórz nowy folder o nazwie „scripts” (bez cudzysłowów). Następnie w nowym folderze skryptów utwórz nowy plik o nazwie <code>main.js</code>. Zapisz go w folrderze <code>scripts</code>.</li>
+ <li>Następnie w pliku <code>index.html</code> wprowadź następujący element w nowej linii, tuż przed zamknięciem tagu <code>&lt;/body&gt;</code>:
+  <pre>&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>W zasadzie, ten kod działa identycznie, jak element {{htmlelement("link")}} w CSS — dodaje JavaScript do strony, więc może mieć wpływ na HTML (wraz z CSS i czymkolwiek innym na stronie).</li>
+ <li>Teraz dodaj następujący kod do pliku <code>main.js</code>:
+  <pre>var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj <code>index.html</code> w przeglądarce. Powinieneś zobaczyć coś takiego:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png"></li>
+</ol>
+
+<div class="note">
+<p><strong>Notatka</strong>: Powód, dla którego wstawiliśmy element {{htmlelement("script")}} w dolnej części pliku HTML jest to, że elementy w HTML są ładowane przez przeglądarkę w kolejności pojawienia się ich w pliku. Jeśli JavaScript jest ładowany jako pierwszy i ma wpływać na HTML poniżej, może to nie zadziałać, ponieważ JavaScript byłby ładowany przed HTML na którym ma pracować. Dlatego umieszczenie kodu JavaScript w dolnej części strony HTML jest często najlepszą strategią.</p>
+</div>
+
+<h3 id="Co_się_wydarzyło">Co się wydarzyło?</h3>
+
+<p>Twój tekst nagłówka został zmieniony na "Hello world!" przy użyciu JavaScript. Zrobiłeś to najpierw, używając funkcji zwanej <code>{{domxref("Document.querySelector", "querySelector()")}}</code> by chwycić referencje do nagłówka i przechowywać ją w zmiennej o nazwie <code>myHeading</code>. Jest to bardzo podobne do tego, co zrobiliśmy przy użyciu selektorów CSS. Kiedy chcesz coś zrobić z elementem, najpierw musisz go wybrać.</p>
+
+<p>Następnie ustawiłeś wartość właściwości<code>{{domxref("Node.textContent", "textContent")}}</code> zmiennej <code>myHeading</code> (która reprezentuje zawartość nagłówka) na "Hello world!".</p>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Obie funkcje, których używałeś powyżej, są częścią <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, który pozwala na manipulowanie treścią strony.</p>
+</div>
+
+<h2 id="Podstawy_języka">Podstawy języka</h2>
+
+<p>Wytłumaczmy niektóre podstawowe cechy języka JavaScript, aby lepiej zrozumieć, jak to wszystko działa. Warto zauważyć, że te cechy są wspólne dla wszystkich języków programowania, więc jeśli opanujesz te podstawy, jesteś na dobrej drodze aby móc programować w czymkolwiek!</p>
+
+<div class="warning">
+<p><strong>Ważne</strong>: W tym artykule spróbuj wprowadzać przykładowe linie kodu do konsoli JavaScript, aby zobaczyć, co się zdarzy. Więcej informacji na temat konsoli JavaScript można znaleźć w sekcji <a href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p>
+</div>
+
+<h3 id="Zmienne">Zmienne</h3>
+
+<p>{{Glossary("Variable", "Zmienne")}} są kontenerami w których można zapisywać wartości. Zacznij od zadeklarowania zmiennej za pomocą słowa kluczowego <code>var</code>, a następnie dowolnej nazwy, której chcesz użyć:</p>
+
+<pre class="brush: js">var myVariable;</pre>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Średnik na końcu wiersza wskazuje, gdzie kończy się instrukcja; jest to bezwzględnie wymagane tylko w przypadku, gdy musisz oddzielić poszczególne instrukcje w jednej linii. Jednak niektórzy uważają, że dobrą praktyką jest umieszczenie ich pod koniec każdej instrukcji. Istnieją inne zasady kiedy należy, a kiedy nie powinno się ich używać — po więcej szczegółów zobacz <a href="https://www.codecademy.com/blog/78">Your Guide to Semicolons in JavaScript</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Możesz dowolnie nazwać zmienną, ale istnieją pewne zastrzeżone nazwy (zobacz <a href="http://www.codelifter.com/main/tips/tip_020.shtml">w tym artykule o regułach nazewnictwa zmiennych</a>). Jeśli nie jesteś pewien, <a href="https://mothereff.in/js-variables">możesz sprawdzić nazwę zmiennej</a>, aby upewnić się, czy jest prawidłowa.</p>
+</div>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: JavaScript rozróżnia małe i duże litery — <code>myVariable</code>jest inną zmienną niż <code>myvariable</code>. Jeśli pojawiają się problemy w kodzie, sprawdź wielkość liter!</p>
+</div>
+
+<p>Po zadeklarowaniu zmiennej możesz nadać jej wartość:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>Jeśli chcesz, możesz wykonać obydwie operacje w tej samej linii:</p>
+
+<pre>var myVariable = 'Bob';</pre>
+
+<p>Możesz pobrać wartość przez wywołanie zmiennej po nazwie:</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>Po podaniu wartości zmiennej można ją później zmienić:</p>
+
+<pre>var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Warto zauważyć, że zmienne mają różne <a href="/en-US/docs/Web/JavaScript/Data_structures">typy danych</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Typ</th>
+   <th scope="col">Wyjaśnienie</th>
+   <th scope="col">Przykład</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Sekwencja tekstu znana jako ciąg znaków. Aby potwierdzić, że zmienna jest ciągiem, należy zamknąć jej wartość w apostrofach.</td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Liczba. Liczb nie zamyka się w apostrofach.</td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Prawda / Fałsz. Słowa <code>true</code> i <code>false</code> to specjalne słowa kluczowe w JS i nie potrzebują apostrofów.</td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Konstrukcja, która pozwala na przechowywanie wielu wartości w jednym odniesieniu.</td>
+   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+    Odwołaj się do każdego elementu tej tablicy:<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, itd.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Zasadniczo cokolwiek. Wszystko w JavaScript jest obiektem i może być przechowywane w zmiennej. Pamiętaj o tym podczas nauki.</td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    Również wszystkie powyższe przykłady.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Więc dlaczego potrzebujemy zmiennych? Cóż, zmienne są potrzebne, aby zrobić cokolwiek interesującego w programowaniu. Jeśli nie moglibyśmy zmieniać wartości, to nie możnaby zrobić nic dynamicznego, jak personalizacja powitania lub zmiana wyświetlanego obrazu w galerii.</p>
+
+<h3 id="Komentarze">Komentarze</h3>
+
+<p>Możesz umieścić komentarze w kodzie JavaScript, tak samo jak w CSS:</p>
+
+<pre class="brush: js">/*
+Wszystko pomiędzy to komentarz.
+*/</pre>
+
+<p>Jeśli Twój komentarz nie zawiera przerw między wierszami, często łatwiej jest umieścić go za dwoma ukośnikami:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// To jest komentarz
+</pre>
+
+<h3 id="Operatory">Operatory</h3>
+
+<p><code>{{Glossary("Operator")}}</code> jest symbolem matematycznym, który generuje wynik w oparciu o dwie wartości (lub zmienne). W poniższej tabeli można zobaczyć niektóre z najprostszych operatorów oraz kilka przykładów, które można wypróbować w konsoli JavaScript.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operator</th>
+   <th scope="col">Wyjaśnienie</th>
+   <th scope="col">Symbole</th>
+   <th scope="col">Przykład</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Dodawanie</th>
+   <td>Służy do dodawania dwóch liczb lub sklejenia dwóch ciągów znaków.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Odejmowanie, Mnożenie, Dzielenie</th>
+   <td>Robią to, co można oczekiwać od nich w podstawowej matematyce.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // mnożenie w JS jest gwiazdką<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Przypisanie wartości</th>
+   <td>Widzieliście już to: przypisuje wartość zmiennej.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Znak równości</th>
+   <td>Wykonuje test sprawdzający, czy dwie wartości są sobie równe i zwraca wynik <code>true</code> / <code>false</code> (Boolean).</td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Zaprzeczenie, Nie równa się</th>
+   <td>Zwraca logicznie odwrotną wartość tego, co poprzedza; zmienia <code>true</code> w <code>false</code>, itd. Kiedy jest używany wraz z operatorem równości, operator negacji sprawdza, czy dwie wartości <em>nie</em> są równe.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Podstawowe wyrażenie jest <code>true</code>, ale porównanie zwraca <code>false</code>, ponieważ zostało ono zanegowane:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Tu testujemy "czy <code>myVariable</code> NIE równa się 3". To zwraca wartość <code>false</code> ponieważ <code>myVariable</code> JEST równa 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Istnieje wiele więcej operatorów, ale to wystarczy na razie. Jeśli chcesz zobacz pełną listę sprawdź w <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a>.</p>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Mieszanie typów danych może powodować dziwne efekty podczas wykonywania obliczeń, dlatego należy uważać, aby prawidłowo odwoływać się do zmiennych i uzyskać spodziewane wyniki. Na przykład wprowadź <code>"35" + "25"</code> do konsoli. Dlaczego nie dostaniesz oczekiwanego rezultatu? Ponieważ znaki cudzysłowów zmieniają liczby w ciągi znaków, więc skończyłeś na łączeniu łańcuchów zamiast dodawać liczby. Jeśli wpiszesz, <code>35 + 25</code> otrzymasz poprawny wynik.</p>
+</div>
+
+<h3 id="Warunki">Warunki</h3>
+
+<p>Warunkami są struktury kodu, które pozwalają na sprawdzenie, czy wyrażenie zwraca <code>true</code>, czy nie, i uruchamia inny kod ujawniony przez jego wynik. Bardzo popularną formą warunku są instrukcje <code>if ... else</code>. Na przykład:</p>
+
+<pre class="brush: js">var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p>Wyrażenie wewnątrz <code>if (...)</code> jest testem — który używa operatora tożsamości (opisanego powyżej) w celu porównania zmiennej <code>iceCream</code> z ciągiem znaków <code>chocolate</code>, aby sprawdzić, czy te dwa są równe. Jeśli to porównanie zwróci <code>true</code>, uruchomiony zostanie pierwszy blok kodu. Jeśli porównanie nie jest prawdziwe, pierwszy blok jest pomijany, a drugi blok kodu, po wywołaniu <code>else</code>, jest uruchamiany.</p>
+
+<h3 id="Funkcje">Funkcje</h3>
+
+<p>{{Glossary("Function", "Funkcje")}} są sposobem na zapakowanie funkcjonalności, które chcesz wykorzystać ponownie. Gdy potrzebujesz procedury, zamiast pisać cały kod za każdym razem, możesz wywołać funkcję z nazwą funkcji. Powyżej widzieliście już niektóre zastosowania funkcji, na przykład:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>Funkcje te, <code>document.querySelector</code> i <code>alert</code>, są wbudowane w przeglądarkę, aby używać w dowolnym momencie.</p>
+
+<p>Jeśli widzisz coś, co wygląda jak nazwa zmiennej, ale ma nawiasy — <code>()</code> — po niej, to prawdopodobnie jest to funkcja. Funkcje często biorą {{Glossary("Argument", "argumenty")}} — bity danych potrzebne do wykonywania ich pracy. Znajdują się one w nawiasach, oddzielone przecinkami jeśli jest więcej niż jeden argument.</p>
+
+<p>Na przykład, funkcja <code>alert ()</code> powoduje pojawienie się okna podręcznego wewnątrz okna przeglądarki, ale musimy dać mu ciąg znaków jako argument, aby powiedzieć użytkownikowi o tym, co należy wyświetlić w wyskakującym okienku.</p>
+
+<p>Dobrą wiadomością jest możliwość zdefiniowania własnych funkcji — w następnym przykładzie napiszemy prostą funkcję, która przyjmuje dwie liczby jako argumenty i mnoży je:</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Spróbuj uruchomić powyższą funkcję w konsoli, a następnie przetestuj kilka argumentów. Na przykład:</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> informuje przeglądarkę o zwróceniu zmiennej <code>result</code> z funkcji, dzięki czemu jest ona dostępna. Jest to konieczne, ponieważ zmienne zdefiniowane wewnątrz funkcji są dostępne tylko w tych funkcjach. Jest to tak zwany {{Glossary("Scope", "zakres")}} zmiennej. (Poczytaj <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">więcej o zakresie zmiennej</a>.)</p>
+</div>
+
+<h3 id="Zdarzenia">Zdarzenia</h3>
+
+<p>Prawdziwa interaktywność na stronie internetowej potrzebuje zdarzeń. Są to struktury kodu nasłuchające rzeczy, które dzieją się w przeglądarce i uruchamiajace kod w odpowiedzi. Najbardziej oczywistym przykładem jest zdarzenie kliknięcia, które jest uruchamiane przez przeglądarkę po kliknięciu na coś za pomocą myszy. Aby to zademonstrować, wpisz następujący kod w konsoli, a następnie kliknij na bieżącej stronie internetowej:</p>
+
+<pre>document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>Istnieje wiele sposobów dołączania zdarzenia do elementu. Tutaj wybieramy element {{htmlelement("html")}} i ustawiamy obsługę jego właściwości <code>onclick</code> równą funkcji anonimowej (tj. bezimiennej), która zawiera kod, który ma być uruchamiany.</p>
+
+<p>Zauważ że</p>
+
+<pre>document.querySelector('html').onclick = function() {};</pre>
+
+<p>jest równe temu</p>
+
+<pre>var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>To jest po prostu krócej.</p>
+
+<h2 id="Podrasowanie_naszej_przykładowej_strony">Podrasowanie naszej przykładowej strony</h2>
+
+<p>Omówiliśmy kilka podstawowych zasad JavaScript, dodajmy kilka ciekawych funkcji do naszej przykładowej witryny, aby zobaczyć, co jest możliwe.</p>
+
+<h3 id="Dodawanie_zmieniarki_obrazu">Dodawanie zmieniarki obrazu</h3>
+
+<p>W tej sekcji dodajemy dodatkowy obraz do naszej witryny, korzystając z kilku innych funkcji DOM API, używając JavaScript, aby przełączać się między nimi, gdy klikniesz obraz.</p>
+
+<ol>
+ <li>Na samym początku znajdź inne zdjęcie, które chciałbyś pokazać na stronie. Upewnij się, że jest tego samego rozmiaru, co pierwsze - albo przynajmniej jak najbliżej się da.</li>
+ <li>Zachowaj zdjęcie w swoim katalogu <code>images</code>.</li>
+ <li>Nazwij je 'firefox2.png' (bez apostrofów).</li>
+ <li>Otwórz swój plik <code>main.js</code>, następnie dopisz następujący kod (jeżeli nadal znajduje się tam skrypt "witaj, świecie" - usuń go).
+  <pre>var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Zapisz wszystko i otwórz <code>index.html</code> w przeglądarce. Teraz gdy klikniesz na obrazek, zmieni on się w inny!</li>
+</ol>
+
+<p>Przechowujesz odwołanie do elementu {{htmlelement("img")}} w zmiennej <code>myImage</code>. Następnie ustawiasz dla tej zmiennej obsługę zdarzenia <code>onclick</code> jako funkcję bez nazwy (finkcja anonimowa). Teraz za każdym razem, gdy kliknięty zostanie ten element:</p>
+
+<ol>
+ <li>Pobierasz wartość atrybutu <code>src</code> tego obrazu.</li>
+ <li>Za pomocą wyrażenia warunkowego sprawdzasz, czy wartość <code>src</code> jest równa ścieżce do oryginalnego obrazu:
+  <ol>
+   <li>Jeśli tak, zmienisz wartość <code>src</code> na ścieżkę do drugiego obrazu, zmuszając drugi obraz do załadowania do elementu {{htmlelement("img")}}.</li>
+   <li>Jeśli nie (to oznacza, że ​​już musiała się zmienić), wartość <code>src</code> zmienia się z powrotem na ścieżkę oryginalnego obrazu, do stanu oryginalnego.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Dodanie_spersonalizowanej_wiadomości_powitalnej">Dodanie spersonalizowanej wiadomości powitalnej</h3>
+
+<p>Następnie dodamy kolejny fragment kodu, zmieniając tytuł strony na spersonalizowaną wiadomość powitalną, gdy użytkownik po raz pierwszy odwiedzi witrynę. Ta wiadomość powitalna będzie trwała, nawet jeśli użytkownik opuści witrynę, a później wróci - zapiszemy ją za pomocą interfejsu <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Będzie również zawierać opcję zmiany użytkownika, a zatem będziemy mogli zmienić wiadomość powitalną w dowolnym momencie.</p>
+
+<ol>
+ <li>W pliku <code>index.html</code>, dodaj następujący wiersz tuż przed elementem {{htmlelement("script")}}:
+
+  <pre>&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li>Na końcu pliku <code>main.js</code>, umieść następujący kod, dokładnie tak, jak napisano — pobiera on odwołania do nowego przycisku i nagłówka, przechowując je w zmiennych:
+  <pre>var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Teraz dodaj następującą funkcję, aby ustawić spersonalizowane powitanie — to jeszcze nic nie zrobi, ale poprawimy to za chwilę:
+  <pre>function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}</pre>
+  Ta funkcja zawiera funkcję <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, która wyświetla okno dialogowe, przypominające komunikat <code>alert()</code>. Jednak ten komunikat <code>prompt()</code>, prosi użytkownika o wprowadzenie danych i zapisanie ich w zmiennej po naciśnięciu przycisku <strong>OK</strong><em>.</em> W takim przypadku prosimy użytkownika o podanie jego nazwy. Następnie wywołujemy interfejs API o nazwie <code>localStorage</code>, który pozwala nam przechowywać dane w przeglądarce, a następnie je odzyskać. Używamy funkcji <code>setItem()</code> dla localStorage, aby utworzyć i przechować element danych o nazwie <code>'name'</code>, ustawiając jego wartość jako wartość zmiennej <code>myName</code> która zawiera dane wprowadzone przez użytkownika. Na koniec ustawiamy <code>textContent</code> nagłówka jako string, oraz nowo zapisaną nazwę użytkownika.</li>
+ <li>Następnie dodaj poniższy blok <code>if ... else</code>, który możemy nazwać kodem inicjalizacji, ponieważ tworzy strukturę aplikacji podczas pierwszego ładowania:
+  <pre>if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}</pre>
+  W tym bloku najpierw używamy operatora negacji (logiczne NIE, reprezentuje znak wykrzyknika !) aby sprawdzić, czy obiekt <code>name</code> istnieje. Jeśli nie, to uruchamiana jest funkcja <code>setUserName()</code>, aby go utworzyć. Jeśli on istnieje (to znaczy, że użytkownik ustawił go podczas poprzedniej wizyty), pobieramy zapisaną nazwę za pomocą <code>getItem()</code> i ustawiamy <code>textContent</code> nagłówka jako string oraz nazwę użytkownika, podobnie jak robiliśmy to w <code>setUserName()</code>.</li>
+ <li>Na koniec poniższą funkcję przypisujemy do zdarzenia <code>onclick</code> przycisku. Kiedy zostanie on kliknięty, zostanie uruchomiona funkcja <code>setUserName()</code>. Dzięki temu użytkownik może ustawić nową nazwę, kiedy chce, naciskając przycisk:
+  <pre>myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Teraz, kiedy po raz pierwszy odwiedzisz witrynę, poprosi ona o podanie nazwy użytkownika, a następnie otrzymasz spersonalizowaną wiadomość. Możesz zmienić nazwę w dowolnym momencie, naciskając przycisk. Dodatkowym bonusem jest to, że nazwa utrzymuje się po zamknięciu strony, zachowując spersonalizowaną wiadomość przy następnym otwarciu strony! Dzieje się tak, ponieważ nazwa przechowywana jest w localStorage.</p>
+
+<h2 id="Wniosek">Wniosek</h2>
+
+<p>Jeśli wykonałeś wszystkie instrukcje zawarte w tym artykule, powinieneś otrzymać stronę, która wygląda mniej więcej tak (możesz również <a href="https://mdn.github.io/beginner-html-site-scripted/">zobaczyć naszą wersję tutaj</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png"></p>
+
+<p>Jeśli utkniesz, możesz porównać swoją pracę z naszym <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">gotowym przykładowym kodem na GitHub</a>.</p>
+
+<p>Ledwo zarysowaliśmy powierzchnię JavaScript. Jeśli lubisz grać i chcesz posunąć się jeszcze dalej, przejdź do naszego <a href="/pl/docs/Learn/JavaScript">następnego tematu kursu JavaScript</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..ac173eef00
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,124 @@
+---
+title: Publikacja strony internetowej
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+tags:
+  - GitHub
+  - Początkujący
+  - Silnik Aplikacji Google
+  - Uczyć się
+  - serwer internetowy
+  - sieć
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your simple sample code online with little effort.</p>
+</div>
+
+<h2 id="Jakie_są_możliwości">Jakie są możliwości?</h2>
+
+<p dir="ltr" id="tw-target-text">Opublikowanie strony internetowej jest tematem złożonym, ponieważ istnieje wiele sposobów, aby to osiągnąć. W tym artykule nie probujemy udokumentować wszystkie możliwe metody. Zamiast tego wyjaśniamy zalety i wady trzech podejść, które są praktyczne dla początkujących. Następnie przechodzimy przez jedną metodę, która może działać od razu dla wielu użytkowników.</p>
+
+<h3 id="Getting_hosting_and_a_domain_name">Getting hosting and a domain name</h3>
+
+<p>To have more control over content and website appearance, most people choose to buy web hosting and a domain name:</p>
+
+<ul>
+ <li>Web hosting is rented file space on a hosting company's <a href="/en-US/Learn/What_is_a_web_server">web server</a>. You put website files on the web server. The web server provides website content to website visitors.</li>
+ <li>A <a href="/en-US/Learn/Understanding_domain_names">domain name</a> is the unique address where people find your website, such as <code>http://www.mozilla.org</code> or <code>http://www.bbc.co.uk</code>. You can rent your domain name for as many years as you want from a <strong>domain registrar</strong>.</li>
+</ul>
+
+<p>Many professional websites go online this way.</p>
+
+<p>In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> for more details) to actually transfer the website files over to the server. FTP  programs vary widely, but generally, you have to connect to your web server using details provided by your hosting company (typically username, password, hostname). Then the program shows you your local files and the web server's files in two windows, and provides a way for you to transfer files back and forth.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Tips_for_finding_hosting_and_domains">Tips for finding hosting and domains</h4>
+
+<ul>
+ <li>MDN does not promote specific commercial hosting companies or domain name registrars. To find hosting companies and registrars, just search for "web hosting" and "domain names". All registrars will have a feature to allow you to check if the domain name you want is available.</li>
+ <li>Your home or office {{Glossary("ISP", "internet service provider")}} may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments.</li>
+ <li>There are also free services available like <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, and <a href="https://wordpress.com/">WordPress</a>.  Sometimes you get what you pay for, but sometimes these resources are good enough for your initial experiments.</li>
+ <li>Many companies provide hosting and domains.</li>
+</ul>
+
+<h3 id="Using_an_online_tool_like_GitHub_or_Google_App_Engine">Using an online tool like GitHub or Google App Engine</h3>
+
+<p>Some tools let you publish your website online:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> is a "social coding" site. It allows you to upload code repositories for storage in the <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called <a href="https://pages.github.com/">GitHub Pages</a>, which allows you to expose website code live on the web.</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> for more information.</li>
+</ul>
+
+<p>These options are usually free, but you may outgrow the limited feature-set.</p>
+
+<h3 id="Using_a_web-based_IDE_such_as_CodePen">Using a web-based IDE such as CodePen</h3>
+
+<p>There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript, and then display the result of that code as a website — all in one browser tab. Generally speaking, these tools are relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features). They host your rendered page at a unique web address. However, the features are limited, and these apps usually don't provide hosting space for assets (like images).</p>
+
+<p>Try playing with some of these examples to find out which one works best for you:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://glitch.com/">Glitch</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publishing_via_GitHub">Publishing via GitHub</h2>
+
+<p>Now let's examine how to easily publish your site via GitHub Pages.</p>
+
+<ol>
+ <li>First of all, <a href="https://github.com/">sign up for GitHub</a> and verify your email address.</li>
+ <li>Next, you need to <a href="https://github.com/new">create a repository</a> to store files.</li>
+ <li>On this page, in the <em>Repository name</em> box, enter <em>username</em>.github.io, where <em>username</em> is your username. For example, our friend Bob Smith would enter <em>bobsmith.github.io</em>.<br>
+  Check the "<em>Initialize this repository with a README" </em>box. Then click <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Drag and drop the content of your website folder into your repository. Then click <em>Commit changes</em>.<br>
+
+  <div class="note">
+  <p><strong>Note</strong>: Make sure your folder has an <code>index.html</code> file.</p>
+  </div>
+ </li>
+ <li>
+  <p>Navigate your browser to <em>username</em>.github.io to see your website online. For example, for the username <em>chrisdavidmills</em>, go to <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p>
+
+  <div class="note">
+  <p><strong>Note</strong>: It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.</p>
+  </div>
+ </li>
+</ol>
+
+<p>To learn more, see <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="Further_reading">Further reading</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="W_tym_module"><font><font>W tym module</font></font></h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>Instalowanie podstawowego oprogramowania</font></font></a></li>
+ <li id="What_will_your_website_look_like"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like"><font><font>Jak będzie wyglądać Twoja strona internetowa?</font></font></a></li>
+ <li id="Dealing_with_files"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>Radzenie sobie z plikami</font></font></a></li>
+ <li id="HTML_basics"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics"><font><font>Podstawy HTML</font></font></a></li>
+ <li id="CSS_basics"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics"><font><font>Podstawy CSS</font></font></a></li>
+ <li id="JavaScript_basics"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics"><font><font>Podstawy JavaScript</font></font></a></li>
+ <li id="Publishing_your_website"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website"><font><font>Publikowanie Twojej witryny</font></font></a></li>
+ <li id="How_the_web_works"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works"><font><font>Jak działa internet</font></font></a></li>
+</ul>
diff --git a/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..da94d8989d
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,99 @@
+---
+title: Jak będzie wyglądała twoja strona internetowa?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Assets
+  - Beginner
+  - Composing
+  - Content
+  - Deprecated
+  - Design
+  - Fonts
+  - Learn
+  - Simple
+  - 'l10n:priority'
+  - step by step
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<p><em>Jak będzie wyglądać twoja strona internetowa?</em> Omawia prace planistyczne i projektowe, które trzeba wykonać przed rozpoczęciem pisania kodu, w tym "Jakie informacje zawiera moja strona internetowa?", "Jakich czcionek i kolorów chcę użyć?" oraz "Co robi moja strona?".</p>
+
+<hr>
+<h2 id="Pierwsza_sprawa_planowanie">Pierwsza sprawa: planowanie</h2>
+
+<p>Zanim cokolwiek zrobisz, potrzebujesz kilku pomysłów. Co właściwie powinna robić twoja strona? Strona internetowa może robić w zasadzie wszystko, ale przy pierwszej próbie lepiej zachować prostotę. Zaczniemy od stworzenia prostej strony internetowej z nagłówkiem, obrazem i kilkoma akapitami.</p>
+
+<p>Na początek, musisz odpowiedzieć sobie na te pytania:</p>
+
+<ol>
+ <li><strong>O czym jest twoja strona internetowa?</strong> Lubisz psy, Nowy York albo Pac-Mana?</li>
+ <li><strong>Jakie informacje prezentujesz na ten temat?</strong> Napisz tytuł i kilka akapitów i pomyśl o obrazku, który chcesz pokazać na swojej stronie.</li>
+ <li><strong>Jak wygląda twoja strona internetowa</strong>, w prostych, ogólnych założeniach. Jaki jest kolor tła? Jaka czcionka jest odpowiednia: formalna, kreskówkowa, pogrubiona i donośna, subtelna?</li>
+</ol>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Złożone projekty wymagają dokładnych wytycznych, które zagłębiają się we wszystkie szczegóły dotyczące kolorów, czcionek, odstępów między elementami na stronie, odpowiedniego stylu pisania itd. Nazywa się to czasem przewodnikiem projektanta, systemem projektowania lub księgą marki, a przykład można zobaczyć w systemie projektowania <a href="https://design.firefox.com/photon/">Firefox Photon Design System</a>.</p>
+</div>
+
+<hr>
+<h2 id="Szkicowanie_twojego_projektu">Szkicowanie twojego projektu</h2>
+
+<p>Następnie złap za ołówek i papier i naszkicuj z grubsza, jak chcesz, aby twoja strona wyglądała. Na pierwszej prostej stronie internetowej, nie ma zbyt wiele do szkicowania, ale należy już teraz wyrobić sobie ten nawyk. To naprawdę pomaga — nie musisz być jak Van Gogh!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Nawet przy prawdziwych, skomplikowanych stronach internetowych, zespoły projektowe zazwyczaj rozpoczynają od szkiców wstępnych na papierze, a następnie budują cyfrowe makiety przy użyciu edytora graficznego lub technologii sieciowych.</p>
+
+<p>W skład zespołów webowych często wchodzi zarówno grafik, jak i projektant {{Glossary("UX", "doświadczeń użytkownika")}} (UX). Graficy przygotowują wizualizacje strony internetowej. Projektanci UX mają nieco bardziej abstrakcyjną rolę w zajmowaniu się tym, jak użytkownicy będą doświadczać i wchodzić w interakcję ze stroną internetową.</p>
+</div>
+
+<hr>
+<h2 id="Dobieranie_zasobów">Dobieranie zasobów</h2>
+
+<p>W tym momencie warto zacząć kompletować treść, która ma pojawić się na twojej stronie.</p>
+
+<h3 id="Tekst">Tekst</h3>
+
+<p>Nadal powinieneś mieć te kilka paragrafów i tytuł przygotowany wcześniej. Miej je w zanadrzu.</p>
+
+<h3 id="Kolor_motywu_strony">Kolor motywu strony</h3>
+
+<p>Aby wybrać kolor, użyj <a href="https://www.w3schools.com/colors/colors_picker.asp">tej strony, przygotowanej przez W3Schools</a> i znajdź kolor, jaki ci się podoba. Kiedy klikniesz na wybrany kolor, zobaczysz dziwny, sześciocyfrowy kod, jak np. <code>#660066</code>. To jest tzw. <em>kod</em> <em>hexadecymalny </em>(ang. hex code), który reprezentuje twój kolor. Na razie skopiuj go w jakieś bezpieczne miejsce.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Obrazy">Obrazy</h3>
+
+<p>Aby wybrać jakiś obraz, odwiedź <a href="https://www.google.com/imghp?gws_rd=ssl">Grafikę Google</a> i znajdź coś, co ci odpowiada.</p>
+
+<ol>
+ <li>Kiedy wybierzesz jakiś obraz, kliknij na niego aby zobaczyć go w większym rozmiarze.</li>
+ <li>Kliknij na obraz prawym klawiszem myszy (Ctrl + klik na Macu), wybierz <em>Zapisz obraz jako...</em> i wybierz miejsce na komputerze, gdzie chcesz go zapisać. Możesz też skopiować adres URL obrazu, z paska adresowego twojej przeglądarki, aby mieć go pod ręką i skorzystać z niego w przyszłości</li>
+</ol>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2019/04/30/16599/62acc9942836dde3dac0a857fcd7dcd9/updated-google-images.png" style="height: 636px; width: 750px;"></p>
+
+<p>Pamiętaj jednak o tym, że większość obrazów w internecie, również tych w Grafice Google, jest chronione prawami autorskimi. Żeby zminimalizować prawdopodobieństwa naruszenia czyichś praw, możesz skorzystać z narzędzi filtrowania Google. Kliknij w przycisk <em>Narzędzia</em>, następnie w <em>Prawa użytkowania</em> i wybierz <em>Oznaczone do ponownego wykorzystania </em></p>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2019/04/30/16598/93d8101cce495b0149b51d452ed97f31/updated-google-images-licensing.png" style="height: 401px; width: 750px;"></p>
+
+<h3 id="Czcionki">Czcionki</h3>
+
+<p>Aby wybrać czcionkę:</p>
+
+<ol>
+ <li>Odwiedź witrynę <a href="http://www.google.com/fonts">Google Fonts</a> i poszukaj takiej czcionki, która ci odpowiada. Aby ułatwić sobie wyszukiwanie, możesz skorzystać z filtrów, które znajdują się po prawej stronie.</li>
+ <li>Kliknij <em>znaczek plusa</em> obok nazwy czcionki, która ci się podoba.</li>
+ <li>Kliknij na panel, który pojawi się na dole strony.</li>
+ <li>Skopiuj kod, który się pojawił i zapisz go dla późniejszego użycia</li>
+</ol>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2016/09/12/13871/4b391a133a9f3a7ab34476d70c0b16a2/font1.png" style="height: 1016px; width: 1697px;"></p>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2016/09/12/13873/acf07297222686c37649eda5c1e4b8e2/font2.png" style="height: 714px; width: 705px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>