{"id":1163,"date":"2026-02-21T13:50:13","date_gmt":"2026-02-21T12:50:13","guid":{"rendered":"https:\/\/trzykody.pl\/?p=1163"},"modified":"2026-02-21T13:50:13","modified_gmt":"2026-02-21T12:50:13","slug":"jak-zrobic-podstrone-html-czym-jest-i-do-czego-sluzy-w-praktyce-tworzenia-stron-internetowych","status":"publish","type":"post","link":"https:\/\/trzykody.pl\/index.php\/2026\/02\/21\/jak-zrobic-podstrone-html-czym-jest-i-do-czego-sluzy-w-praktyce-tworzenia-stron-internetowych\/","title":{"rendered":"Jak zrobi\u0107 podstron\u0119 HTML \u2013 czym jest i do czego s\u0142u\u017cy w praktyce tworzenia stron internetowych"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Podstrona HTML jest jednym z podstawowych element\u00f3w ka\u017cdej strony internetowej. Jest to pojedynczy dokument w formacie HTML, kt\u00f3ry mo\u017ce zawiera\u0107 tekst, obrazy, linki, formularze czy inne elementy multimedialne. <strong>Jak zrobi\u0107 podstron\u0119 HTML<\/strong>? Podstrony s\u0105 u\u017cywane do strukturyzowania witryny, np. w celu rozdzielenia sekcji takich jak \u201eO nas\u201d, \u201eKontakt\u201d, \u201eGaleria\u201d czy \u201eProdukty\u201d. Tworzenie podstron pozwala na modularno\u015b\u0107 projektu i \u0142atwiejsze zarz\u0105dzanie tre\u015bci\u0105. Podstrona HTML jest samodzielnym plikiem, kt\u00f3ry mo\u017cna po\u0142\u0105czy\u0107 z innymi stronami poprzez linki, a tak\u017ce wykorzysta\u0107 wsp\u00f3lne szablony i style CSS. W ostatnim zdaniu warto podkre\u015bli\u0107, \u017ce proces tworzenia podstrony HTML wymaga znajomo\u015bci podstaw HTML i podstawowej struktury dokumentu HTML.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Spis Tre\u015bci<\/h2><nav><ol><li class=\"\"><a href=\"#podstawowa-struktura-dokumentu-html-potrzebna-przy-tworzeniu-podstrony-html\">Podstawowa struktura dokumentu HTML potrzebna przy tworzeniu podstrony HTML<\/a><ol><li class=\"\"><a href=\"#jak-zrobic-podstrone-html-z-naglowkami-akapitami-i-linkami-wewnetrznymi\">Jak zrobi\u0107 podstron\u0119 HTML z nag\u0142\u00f3wkami, akapitami i linkami wewn\u0119trznymi<\/a><\/li><\/ol><\/li><li class=\"\"><a href=\"#jak-zrobic-podstrone-html-z-obrazami-listami-i-tabelami-aby-tresc-byla-bardziej-przejrzysta\">Jak zrobi\u0107 podstron\u0119 HTML z obrazami, listami i tabelami, aby tre\u015b\u0107 by\u0142a bardziej przejrzysta<\/a><\/li><li class=\"\"><a href=\"#jak-zrobic-podstrone-html-z-prostym-formularzem-kontaktowym-dzialajacym-na-stronie-lokalnej\">Jak zrobi\u0107 podstron\u0119 HTML z prostym formularzem kontaktowym dzia\u0142aj\u0105cym na stronie lokalnej<\/a><\/li><li class=\"\"><a href=\"#jak-zrobic-podstrone-html-i-polaczyc-ja-ze-stylem-css-oraz-prostym-java-script-dla-interakcji-uzytkownika\">Jak zrobi\u0107 podstron\u0119 HTML i po\u0142\u0105czy\u0107 j\u0105 ze stylem CSS oraz prostym JavaScript dla interakcji u\u017cytkownika<\/a><\/li><li class=\"\"><a href=\"#faq-najczestsze-pytania-zwiazane-z-tworzeniem-podstrony-html\">FAQ \u2013 najcz\u0119stsze pytania zwi\u0105zane z tworzeniem podstrony HTML<\/a><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"podstawowa-struktura-dokumentu-html-potrzebna-przy-tworzeniu-podstrony-html\">Podstawowa struktura dokumentu HTML potrzebna przy tworzeniu podstrony HTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ka\u017cda podstrona HTML musi posiada\u0107 podstawow\u0105 struktur\u0119 dokumentu, kt\u00f3ra jest wymagana przez przegl\u0105darki internetowe. Bez niej strona mo\u017ce dzia\u0142a\u0107 niepoprawnie lub wcale nie by\u0107 wy\u015bwietlana. Podstawowa struktura sk\u0142ada si\u0119 z deklaracji typu dokumentu, sekcji <code>&lt;html&gt;<\/code>, <code>&lt;head&gt;<\/code> i <code>&lt;body&gt;<\/code>.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Deklaracja typu dokumentu (<code>&lt;!DOCTYPE html><\/code>)<\/strong> \u2013 informuje przegl\u0105dark\u0119, \u017ce dokument jest w standardzie HTML5.<\/li>\n\n\n\n<li><strong>Element <code>&lt;html><\/code><\/strong> \u2013 otacza ca\u0142y dokument, opcjonalnie mo\u017cna doda\u0107 atrybut <code>lang=\"pl\"<\/code> dla j\u0119zyka polskiego.<\/li>\n\n\n\n<li><strong>Sekcja <code>&lt;head><\/code><\/strong> \u2013 zawiera metadane, takie jak tytu\u0142 strony (<code>&lt;title><\/code>), kodowanie znak\u00f3w (<code>&lt;meta charset=\"UTF-8\"><\/code>) czy linki do arkuszy styl\u00f3w CSS.<\/li>\n\n\n\n<li><strong>Sekcja <code>&lt;body><\/code><\/strong> \u2013 zawiera ca\u0142\u0105 tre\u015b\u0107 strony widoczn\u0105 dla u\u017cytkownika: nag\u0142\u00f3wki, akapity, obrazy, linki, formularze itp.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Element<\/th><th>Opis<\/th><th>Przyk\u0142ad kodu<\/th><\/tr><\/thead><tbody><tr><td><code>&lt;!DOCTYPE html&gt;<\/code><\/td><td>Deklaracja typu dokumentu HTML5<\/td><td><code>&lt;!DOCTYPE html&gt;<\/code><\/td><\/tr><tr><td><code>&lt;html lang=\"pl\"&gt;...&lt;\/html&gt;<\/code><\/td><td>Otacza ca\u0142y dokument, ustawia j\u0119zyk<\/td><td><code>&lt;html lang=\"pl\"&gt; ... &lt;\/html&gt;<\/code><\/td><\/tr><tr><td><code>&lt;head&gt;...&lt;\/head&gt;<\/code><\/td><td>Metadane strony<\/td><td><code>&lt;head&gt;&lt;meta charset=\"UTF-8\"&gt;&lt;title&gt;Podstrona&lt;\/title&gt;&lt;\/head&gt;<\/code><\/td><\/tr><tr><td><code>&lt;body&gt;...&lt;\/body&gt;<\/code><\/td><td>Tre\u015b\u0107 widoczna dla u\u017cytkownika<\/td><td><code>&lt;body&gt;&lt;h1&gt;Witaj na podstronie&lt;\/h1&gt;&lt;\/body&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"jak-zrobic-podstrone-html-z-naglowkami-akapitami-i-linkami-wewnetrznymi\">Jak zrobi\u0107 podstron\u0119 HTML z nag\u0142\u00f3wkami, akapitami i linkami wewn\u0119trznymi<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nag\u0142\u00f3wki, akapity i linki wewn\u0119trzne s\u0105 podstaw\u0105 ka\u017cdej podstrony. Nag\u0142\u00f3wki pozwalaj\u0105 na hierarchizowanie tre\u015bci, akapity dziel\u0105 tekst na czytelne fragmenty, a linki umo\u017cliwiaj\u0105 przechodzenie mi\u0119dzy podstronami witryny.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Nag\u0142\u00f3wki<\/strong> \u2013 od <code>&lt;h1><\/code> do <code>&lt;h6><\/code>, gdzie <code>&lt;h1><\/code> jest najwa\u017cniejszy.<\/li>\n\n\n\n<li><strong>Akapity<\/strong> \u2013 element <code>&lt;p><\/code> grupuje tekst w logiczne fragmenty.<\/li>\n\n\n\n<li><strong>Linki wewn\u0119trzne<\/strong> \u2013 element <code>&lt;a href=\"nazwa_pliku.html\">Tekst linku&lt;\/a><\/code> pozwala przej\u015b\u0107 do innej podstrony w tej samej witrynie.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Funkcja<\/th><th>Element HTML<\/th><th>Przyk\u0142ad<\/th><\/tr><\/thead><tbody><tr><td>Nag\u0142\u00f3wek g\u0142\u00f3wny<\/td><td><code>&lt;h1&gt;<\/code><\/td><td><code>&lt;h1&gt;O nas&lt;\/h1&gt;<\/code><\/td><\/tr><tr><td>Podnag\u0142\u00f3wek<\/td><td><code>&lt;h2&gt;<\/code><\/td><td><code>&lt;h2&gt;Historia firmy&lt;\/h2&gt;<\/code><\/td><\/tr><tr><td>Akapit<\/td><td><code>&lt;p&gt;<\/code><\/td><td><code>&lt;p&gt;Firma powsta\u0142a w 2000 roku...&lt;\/p&gt;<\/code><\/td><\/tr><tr><td>Link do podstrony<\/td><td><code>&lt;a&gt;<\/code><\/td><td><code>&lt;a href=\"kontakt.html\"&gt;Kontakt&lt;\/a&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"jak-zrobic-podstrone-html-z-obrazami-listami-i-tabelami-aby-tresc-byla-bardziej-przejrzysta\">Jak zrobi\u0107 podstron\u0119 HTML z obrazami, listami i tabelami, aby tre\u015b\u0107 by\u0142a bardziej przejrzysta<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wstawianie obraz\u00f3w, list i tabel poprawia czytelno\u015b\u0107 podstrony i u\u0142atwia prezentacj\u0119 informacji.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Obrazy<\/strong> \u2013 element <code>&lt;img><\/code> wymaga atrybutu <code>src<\/code> (\u015bcie\u017cka do pliku) i najlepiej <code>alt<\/code> (alternatywny tekst).<\/li>\n\n\n\n<li><strong>Listy<\/strong> \u2013 mog\u0105 by\u0107 uporz\u0105dkowane (<code>&lt;ol><\/code>) lub nieuporz\u0105dkowane (<code>&lt;ul><\/code>), elementy listy oznaczamy <code>&lt;li><\/code>.<\/li>\n\n\n\n<li><strong>Tabele<\/strong> \u2013 element <code>&lt;table><\/code> wraz z <code>&lt;tr><\/code> (wiersze) i <code>&lt;td><\/code> (kom\u00f3rki) pozwala prezentowa\u0107 dane w formie macierzy.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Funkcja<\/th><th>Element HTML<\/th><th>Przyk\u0142ad<\/th><\/tr><\/thead><tbody><tr><td>Obraz<\/td><td><code>&lt;img&gt;<\/code><\/td><td><code>&lt;img src=\"logo.png\" alt=\"Logo firmy\"&gt;<\/code><\/td><\/tr><tr><td>Lista nieuporz\u0105dkowana<\/td><td><code>&lt;ul&gt;&lt;li&gt;...&lt;\/li&gt;&lt;\/ul&gt;<\/code><\/td><td><code>&lt;ul&gt;&lt;li&gt;Produkt A&lt;\/li&gt;&lt;li&gt;Produkt B&lt;\/li&gt;&lt;\/ul&gt;<\/code><\/td><\/tr><tr><td>Lista uporz\u0105dkowana<\/td><td><code>&lt;ol&gt;&lt;li&gt;...&lt;\/li&gt;&lt;\/ol&gt;<\/code><\/td><td><code>&lt;ol&gt;&lt;li&gt;Krok 1&lt;\/li&gt;&lt;li&gt;Krok 2&lt;\/li&gt;&lt;\/ol&gt;<\/code><\/td><\/tr><tr><td>Tabela<\/td><td><code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;...&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<\/code><\/td><td><code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;Imi\u0119&lt;\/td&gt;&lt;td&gt;Jan&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"jak-zrobic-podstrone-html-z-prostym-formularzem-kontaktowym-dzialajacym-na-stronie-lokalnej\">Jak zrobi\u0107 podstron\u0119 HTML z prostym formularzem kontaktowym dzia\u0142aj\u0105cym na stronie lokalnej<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Formularze pozwalaj\u0105 u\u017cytkownikowi przesy\u0142a\u0107 dane. Najprostszy formularz wykorzystuje element <code>&lt;form&gt;<\/code> z polami typu <code>&lt;input&gt;<\/code> lub <code>&lt;textarea&gt;<\/code> oraz przyciskiem <code>&lt;button&gt;<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Funkcja<\/th><th>Element HTML<\/th><th>Przyk\u0142ad<\/th><\/tr><\/thead><tbody><tr><td>Formularz<\/td><td><code>&lt;form&gt;<\/code><\/td><td><code>&lt;form action=\"mailto:test@example.com\" method=\"post\"&gt;...&lt;\/form&gt;<\/code><\/td><\/tr><tr><td>Pole tekstowe<\/td><td><code>&lt;input type=\"text\"&gt;<\/code><\/td><td><code>&lt;input type=\"text\" name=\"imie\" placeholder=\"Imi\u0119\"&gt;<\/code><\/td><\/tr><tr><td>Pole e-mail<\/td><td><code>&lt;input type=\"email\"&gt;<\/code><\/td><td><code>&lt;input type=\"email\" name=\"email\" placeholder=\"Adres e-mail\"&gt;<\/code><\/td><\/tr><tr><td>Pole tekstowe wieloliniowe<\/td><td><code>&lt;textarea&gt;<\/code><\/td><td><code>&lt;textarea name=\"wiadomosc\"&gt;&lt;\/textarea&gt;<\/code><\/td><\/tr><tr><td>Przycisk wysy\u0142ania<\/td><td><code>&lt;button&gt;<\/code><\/td><td><code>&lt;button type=\"submit\"&gt;Wy\u015blij&lt;\/button&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Uwagi praktyczne: na lokalnym serwerze lub plikach HTML formularze nie wy\u015bl\u0105 faktycznie danych do serwera bez dodatkowego backendu. Mo\u017cna natomiast u\u017cy\u0107 <code>mailto:<\/code> lub lokalnego serwera testowego typu XAMPP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"jak-zrobic-podstrone-html-i-polaczyc-ja-ze-stylem-css-oraz-prostym-java-script-dla-interakcji-uzytkownika\">Jak zrobi\u0107 podstron\u0119 HTML i po\u0142\u0105czy\u0107 j\u0105 ze stylem CSS oraz prostym JavaScript dla interakcji u\u017cytkownika<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Podstrona bez stylu i interakcji jest funkcjonalna, ale wizualnie ograniczona. CSS i JavaScript pozwalaj\u0105 poprawi\u0107 wygl\u0105d i doda\u0107 prost\u0105 logik\u0119.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Funkcja<\/th><th>Element<\/th><th>Przyk\u0142ad<\/th><\/tr><\/thead><tbody><tr><td>Pod\u0142\u0105czenie CSS<\/td><td><code>&lt;link&gt;<\/code><\/td><td><code>&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/code><\/td><\/tr><tr><td>Zmiana koloru tekstu w CSS<\/td><td>selektor<\/td><td><code>h1 { color: blue; }<\/code><\/td><\/tr><tr><td>Prost\u0105 funkcj\u0119 JS<\/td><td><code>&lt;script&gt;<\/code><\/td><td><code>&lt;script&gt;function powitanie(){alert(\"Witaj!\");}&lt;\/script&gt;<\/code><\/td><\/tr><tr><td>Wywo\u0142anie funkcji<\/td><td>atrybut HTML<\/td><td><code>&lt;button onclick=\"powitanie()\"&gt;Kliknij&lt;\/button&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Kod CSS mo\u017cna umie\u015bci\u0107 w osobnym pliku lub w <code>&lt;style&gt;<\/code> w <code>&lt;head&gt;<\/code>. JavaScript w <code>&lt;script&gt;<\/code> w <code>&lt;head&gt;<\/code> lub przed ko\u0144cem <code>&lt;body&gt;<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq-najczestsze-pytania-zwiazane-z-tworzeniem-podstrony-html\">FAQ \u2013 najcz\u0119stsze pytania zwi\u0105zane z tworzeniem podstrony HTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>P: Czy ka\u017cda podstrona musi mie\u0107 w\u0142asny plik HTML?<\/strong><br>O: Tak, ka\u017cda podstrona to osobny plik, kt\u00f3ry mo\u017cna po\u0142\u0105czy\u0107 z innymi linkami.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>P: Czy mog\u0119 u\u017cy\u0107 jednego pliku HTML dla wielu podstron?<\/strong><br>O: Mo\u017cna, ale wymaga to dynamicznego \u0142adowania tre\u015bci przez JavaScript lub backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>P: Czy obrazki musz\u0105 by\u0107 w tym samym folderze co plik HTML?<\/strong><br>O: Nie, mo\u017cna podawa\u0107 \u015bcie\u017cki wzgl\u0119dne lub bezwzgl\u0119dne, wa\u017cne aby by\u0142y poprawne.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>P: Czy formularze dzia\u0142aj\u0105 bez serwera?<\/strong><br>O: Nie w pe\u0142ni. <code>mailto:<\/code> dzia\u0142a tylko w kliencie pocztowym, do pe\u0142nej funkcjonalno\u015bci potrzebny jest backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>P: Czy linki musz\u0105 wskazywa\u0107 inne podstrony HTML?<\/strong><br>O: Mog\u0105 wskazywa\u0107 zar\u00f3wno inne pliki HTML, jak i sekcje tej samej strony (anchor linki).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u0179r\u00f3d\u0142o Foto: Freepik<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Podstrona HTML jest jednym z podstawowych element\u00f3w ka\u017cdej strony internetowej. Jest to pojedynczy dokument w formacie HTML, kt\u00f3ry mo\u017ce zawiera\u0107 tekst, obrazy, linki, formularze czy inne elementy multimedialne. Jak zrobi\u0107 podstron\u0119 HTML? Podstrony s\u0105 u\u017cywane do strukturyzowania witryny, np. w celu rozdzielenia sekcji takich jak \u201eO nas\u201d, \u201eKontakt\u201d, \u201eGaleria\u201d czy \u201eProdukty\u201d. Tworzenie podstron pozwala na modularno\u015b\u0107 projektu i \u0142atwiejsze zarz\u0105dzanie tre\u015bci\u0105. Podstrona HTML jest samodzielnym plikiem, kt\u00f3ry mo\u017cna po\u0142\u0105czy\u0107 z innymi stronami poprzez linki, a tak\u017ce wykorzysta\u0107 wsp\u00f3lne szablony i style CSS. W ostatnim zdaniu warto podkre\u015bli\u0107, \u017ce proces tworzenia podstrony HTML wymaga znajomo\u015bci podstaw HTML i podstawowej struktury dokumentu HTML. Podstawowa struktura dokumentu HTML potrzebna przy tworzeniu podstrony HTML Ka\u017cda podstrona HTML musi posiada\u0107 podstawow\u0105 struktur\u0119 dokumentu, kt\u00f3ra jest wymagana przez przegl\u0105darki internetowe. Bez niej strona mo\u017ce dzia\u0142a\u0107 niepoprawnie lub wcale nie by\u0107 wy\u015bwietlana. Podstawowa struktura sk\u0142ada si\u0119 z deklaracji typu dokumentu, sekcji &lt;html&gt;, &lt;head&gt; i &lt;body&gt;. Element Opis Przyk\u0142ad kodu &lt;!DOCTYPE html&gt; Deklaracja typu dokumentu HTML5 &lt;!DOCTYPE html&gt; &lt;html lang=&#8221;pl&#8221;&gt;&#8230;&lt;\/html&gt; Otacza ca\u0142y dokument, ustawia j\u0119zyk &lt;html lang=&#8221;pl&#8221;&gt; &#8230; &lt;\/html&gt; &lt;head&gt;&#8230;&lt;\/head&gt; Metadane strony &lt;head&gt;&lt;meta charset=&#8221;UTF-8&#8243;&gt;&lt;title&gt;Podstrona&lt;\/title&gt;&lt;\/head&gt; &lt;body&gt;&#8230;&lt;\/body&gt; Tre\u015b\u0107 widoczna dla u\u017cytkownika &lt;body&gt;&lt;h1&gt;Witaj na podstronie&lt;\/h1&gt;&lt;\/body&gt; Jak zrobi\u0107 podstron\u0119 HTML z nag\u0142\u00f3wkami, akapitami i linkami wewn\u0119trznymi Nag\u0142\u00f3wki, akapity i linki wewn\u0119trzne s\u0105 podstaw\u0105 ka\u017cdej podstrony. Nag\u0142\u00f3wki pozwalaj\u0105 na hierarchizowanie tre\u015bci, akapity dziel\u0105 tekst na czytelne fragmenty, a linki umo\u017cliwiaj\u0105 przechodzenie mi\u0119dzy podstronami witryny. Funkcja Element HTML Przyk\u0142ad Nag\u0142\u00f3wek g\u0142\u00f3wny &lt;h1&gt; &lt;h1&gt;O nas&lt;\/h1&gt; Podnag\u0142\u00f3wek &lt;h2&gt; &lt;h2&gt;Historia firmy&lt;\/h2&gt; Akapit &lt;p&gt; &lt;p&gt;Firma powsta\u0142a w 2000 roku&#8230;&lt;\/p&gt; Link do podstrony &lt;a&gt; &lt;a href=&#8221;kontakt.html&#8221;&gt;Kontakt&lt;\/a&gt; Jak zrobi\u0107 podstron\u0119 HTML z obrazami, listami i tabelami, aby tre\u015b\u0107 by\u0142a bardziej przejrzysta Wstawianie obraz\u00f3w, list i tabel poprawia czytelno\u015b\u0107 podstrony i u\u0142atwia prezentacj\u0119 informacji. Funkcja Element HTML Przyk\u0142ad Obraz &lt;img&gt; &lt;img src=&#8221;logo.png&#8221; alt=&#8221;Logo firmy&#8221;&gt; Lista nieuporz\u0105dkowana &lt;ul&gt;&lt;li&gt;&#8230;&lt;\/li&gt;&lt;\/ul&gt; &lt;ul&gt;&lt;li&gt;Produkt A&lt;\/li&gt;&lt;li&gt;Produkt B&lt;\/li&gt;&lt;\/ul&gt; Lista uporz\u0105dkowana &lt;ol&gt;&lt;li&gt;&#8230;&lt;\/li&gt;&lt;\/ol&gt; &lt;ol&gt;&lt;li&gt;Krok 1&lt;\/li&gt;&lt;li&gt;Krok 2&lt;\/li&gt;&lt;\/ol&gt; Tabela &lt;table&gt;&lt;tr&gt;&lt;td&gt;&#8230;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt; &lt;table&gt;&lt;tr&gt;&lt;td&gt;Imi\u0119&lt;\/td&gt;&lt;td&gt;Jan&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt; Jak zrobi\u0107 podstron\u0119 HTML z prostym formularzem kontaktowym dzia\u0142aj\u0105cym na stronie lokalnej Formularze pozwalaj\u0105 u\u017cytkownikowi przesy\u0142a\u0107 dane. Najprostszy formularz wykorzystuje element &lt;form&gt; z polami typu &lt;input&gt; lub &lt;textarea&gt; oraz przyciskiem &lt;button&gt;. Funkcja Element HTML Przyk\u0142ad Formularz &lt;form&gt; &lt;form action=&#8221;mailto:test@example.com&#8221; method=&#8221;post&#8221;&gt;&#8230;&lt;\/form&gt; Pole tekstowe &lt;input type=&#8221;text&#8221;&gt; &lt;input type=&#8221;text&#8221; name=&#8221;imie&#8221; placeholder=&#8221;Imi\u0119&#8221;&gt; Pole e-mail &lt;input type=&#8221;email&#8221;&gt; &lt;input type=&#8221;email&#8221; name=&#8221;email&#8221; placeholder=&#8221;Adres e-mail&#8221;&gt; Pole tekstowe wieloliniowe &lt;textarea&gt; &lt;textarea name=&#8221;wiadomosc&#8221;&gt;&lt;\/textarea&gt; Przycisk wysy\u0142ania &lt;button&gt; &lt;button type=&#8221;submit&#8221;&gt;Wy\u015blij&lt;\/button&gt; Uwagi praktyczne: na lokalnym serwerze lub plikach HTML formularze nie wy\u015bl\u0105 faktycznie danych do serwera bez dodatkowego backendu. Mo\u017cna natomiast u\u017cy\u0107 mailto: lub lokalnego serwera testowego typu XAMPP. Jak zrobi\u0107 podstron\u0119 HTML i po\u0142\u0105czy\u0107 j\u0105 ze stylem CSS oraz prostym JavaScript dla interakcji u\u017cytkownika Podstrona bez stylu i interakcji jest funkcjonalna, ale wizualnie ograniczona. CSS i JavaScript pozwalaj\u0105 poprawi\u0107 wygl\u0105d i doda\u0107 prost\u0105 logik\u0119. Funkcja Element Przyk\u0142ad Pod\u0142\u0105czenie CSS &lt;link&gt; &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221;&gt; Zmiana koloru tekstu w CSS selektor h1 { color: blue; } Prost\u0105 funkcj\u0119 JS &lt;script&gt; &lt;script&gt;function powitanie(){alert(&#8222;Witaj!&#8221;);}&lt;\/script&gt; Wywo\u0142anie funkcji atrybut HTML &lt;button onclick=&#8221;powitanie()&#8221;&gt;Kliknij&lt;\/button&gt; Kod CSS mo\u017cna umie\u015bci\u0107 w osobnym pliku lub w &lt;style&gt; w &lt;head&gt;. JavaScript w &lt;script&gt; w &lt;head&gt; lub przed ko\u0144cem &lt;body&gt;. FAQ \u2013 najcz\u0119stsze pytania zwi\u0105zane z tworzeniem podstrony HTML P: Czy ka\u017cda podstrona musi mie\u0107 w\u0142asny plik HTML?O: Tak, ka\u017cda podstrona to osobny plik, kt\u00f3ry mo\u017cna po\u0142\u0105czy\u0107 z innymi linkami. P: Czy mog\u0119 u\u017cy\u0107 jednego pliku HTML dla wielu podstron?O: Mo\u017cna, ale wymaga to dynamicznego \u0142adowania tre\u015bci przez JavaScript lub backend. P: Czy obrazki musz\u0105 by\u0107 w tym samym folderze co plik HTML?O: Nie, mo\u017cna podawa\u0107 \u015bcie\u017cki wzgl\u0119dne lub bezwzgl\u0119dne, wa\u017cne aby by\u0142y poprawne. P: Czy formularze dzia\u0142aj\u0105 bez serwera?O: Nie w pe\u0142ni. mailto: dzia\u0142a tylko w kliencie pocztowym, do pe\u0142nej funkcjonalno\u015bci potrzebny jest backend. P: Czy linki musz\u0105 wskazywa\u0107 inne podstrony HTML?O: Mog\u0105 wskazywa\u0107 zar\u00f3wno inne pliki HTML, jak i sekcje tej samej strony (anchor linki). \u0179r\u00f3d\u0142o Foto: Freepik<\/p>\n","protected":false},"author":1,"featured_media":1164,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"class_list":["post-1163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jezyk-programowania"],"_links":{"self":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/comments?post=1163"}],"version-history":[{"count":1,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1163\/revisions"}],"predecessor-version":[{"id":1165,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1163\/revisions\/1165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/media\/1164"}],"wp:attachment":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/media?parent=1163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/categories?post=1163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/tags?post=1163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}