path: root/files/pl/learn/getting_started_with_the_web/html_basics/index.html

---
title: HTML podstawy
slug: Learn/Getting_started_with_the_web/HTML_basics
translation_of: Learn/Getting_started_with_the_web/HTML_basics
---
<div>{{LearnSidebar}}</div>

<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="/en-US/docs/Learn/Accessibility/HTML#Text_content">semantycznych</a> i <a href="/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>
 <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;"></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>