Tworzenie własnej strony internetowej to umiejętność, którą łatwo opanować bez specjalnego wykształcenia technicznego. W dzisiejszych latach, gdy internet stanowi miejsce pracy, nauki i biznesu, każdy powinien znać podstawy HTML dla początkujących i CSS stylizacji. Ten poradnik przeprowadzi Cię krok po kroku przez proces tworzenia stron od zera, od napisania pierwszej linijki kodu do publikacji w sieci.
Co to jest własna strona WWW i dlaczego warto ją mieć?
Własna strona internetowa to dokument cyfrowy wyświetlany w przeglądarce internetowej, zawierający tekst, obrazy, linki i interaktywne elementy. Uczniowie, dorośli i przedsiębiorcy tworzą strony internetowe z kilku konkretnych powodów. Po pierwsze, prezentacja portfolia – projektanci, fotografowie i programiści mają na własnej stronie internetowej galerie swoich prac. Po drugie, budowanie marki osobistej – nauczyciele i specjaliści dlatego tworzą blogi edukacyjne, aby podzielić wiedzę z szerszą publicznością. Po trzecie, sprzedaż online – przedsiębiorcy mogą oferować produkty bezpośrednio z własnej strony bez pośredników. Po czwarte, praktyka nauki – dla uczniów i studentów informatyki tworzenie własnej strony internetowej to ćwiczenie programistyczne, które buduje zaufanie do swoich umiejętności. Studenci pedagogiki znajdują tu możliwość stworzenia materiałów edukacyjnych dla uczniów szkół podstawowych.
HTML i CSS – podstawowe języki do tworzenia stron internetowych
HTML i CSS to dwa uzupełniające się języki – HTML dostarcza treść i strukturę, CSS dodaje wygląd i stylizację. Jeśli porównamy proces budowy strony do konstruowania domu, HTML jest szkieletem – określa układ pomieszczeń, umieszczenie drzwi i okien. CSS stylizacja to farba, tapety i meble – wszystko, co czyni dom pięknym i wygodnym. HTML (HyperText Markup Language) używa znaczników (zwanych tagami) do oznaczania elementów: `
` dla paragrafu, `
` dla nagłówka głównego, `` dla obrazu. CSS (Cascading Style Sheets) to narzędzia do tworzenia stron, które określają jak te elementy mają wyglądać – rozmiar czcionki, kolor tekstu, tło czy marginesy.
Praktycznie: w HTML napiszesz `
Witaj na mojej stronie
`, a w CSS określisz, że ten paragraf ma być niebieski, pisany czcionką Arial, wielkości 16 pikseli. Bez CSS strona byłaby zupełnie szara i nudna. Bez HTML CSS nie miałby co stylizować. Oba języki są niezbędne do stworzenia nowoczesnej, funkcjonalnej własnej strony internetowej.
Jakie narzędzia i programy są potrzebne do stworzenia strony?
Do utworzenia własnej strony internetowej potrzebujesz edytora tekstu i przeglądarki internetowej. Oto 5 najlepszych narzędzi dla początkujących:
1. Visual Studio Code (VS Code) – to profesjonalny, darmowy edytor kodu stworzony przez Microsoft. Obsługuje podświetlanie składni (różne kolory dla różnych elementów kodu), podpowiadanie kodu i rozszerzenia, które ułatwiają pracę z HTML dla początkujących. Praktycznie wszyscy programiści z niego korzystają, więc warto zacząć od razu od tego narzędzia.
2. Notepad++ – prosty, bezpłatny edytor dla Windows. Bardziej minimalistyczny niż VS Code, ale wystarczający dla początkujących. Podświetla składnię i jest bardzo lekki.
3. Replit – edytor online, w którym nie musisz nic instalować na komputerze. Wpisujesz kod w przeglądarce, a strona pojawia się natychmiast obok. Idealny jeśli pracujesz na różnych urządzeniach lub na szkolnym komputerze.
4. Sublime Text – płatny (ale bezpłatna wersja testowa), bardzo szybki edytor z potężnymi funkcjami. Przydatny dla tych, którzy planuują tworzyć strony długoterminowo.
5. Twine lub Google Keep – zanim zaczniesz pisać kod, możesz planować strukturę własnej strony internetowej w notatniku. Wiele osób najpierw škicuje układ na kartce papieru.
Do pracy z HTML dla początkujących wystarczy jeden z edytorów (najlepiej VS Code lub Replit) i przeglądarka Chrome, Firefox lub Safari. Wszystkie są bezpłatne.
Struktura strony HTML – jak zbudować szkielet dokumentu?
Struktura HTML to szablon, w który wstawiasz całą zawartość swojej strony – teksty, obrazy, linki. Każda własna strona internetowa zaczyna się od tej samej podstawowej struktury:
„`html
Tytuł mojej strony
Nagłówek główny strony
To jest mój pierwszy akapit.
„`
Wyjaśnienie każdej części: `` informuje przeglądarkę, że to dokument HTML5. `` to główny element, zawierający cały dokument – atrybut `lang=”pl”` mówi przeglądarce, że strona jest w polskim. `
` to „głowa” dokumentu – tam znajdują się metadane (informacje o stronie), które nie są widoczne dla użytkownika. `` pozwala na wyświetlanie polskich znaków (ą, ę, ó itp.). `` jest niezbędny dla responsywnych stron (które wyglądają dobrze na urządzeniach mobilnych). `` to tekst widoczny w karcie przeglądarki. `<link rel="stylesheet" href="style.css">` łączy stronę HTML z plikiem CSS.</p>
<p class="wp-block-paragraph">`<body>` to „ciało” dokumentu – tutaj umieszczasz wszystko, co ma być widoczne dla użytkownika: nagłówki, paragrafy, obrazy, linki. To <strong>narzędzia do tworzenia stron</strong>, bez których nie możesz zbudować nawet najprostszej <strong>własnej strony internetowej</strong>.</p>
<h2 class="wp-block-heading"><span id="Podstawowe_tagi_HTML_8211_naglowki_paragrafy_linki_i_obrazy">Podstawowe tagi HTML – nagłówki, paragrafy, linki i obrazy</span></h2>
<p class="wp-block-paragraph"><strong>Tagi to komendy dla przeglądarki, mówią jej jak ma interpretować i wyświetlać treść.</strong> Każdy tag zaczyna się od `<` i kończy `>`, zawierając nazwę elementu. Oto 10 podstawowych tagów używanych w <strong>HTML dla początkujących</strong>:</p>
<p class="wp-block-paragraph"><strong>1. `<h1><span id="_do_8211_naglowki_8211_H1_to_najwiekszy_naglowek_zwykle_tytul_strony_H6_to_najmniejszy_Moja_strona">` do `<h6>` – nagłówki</strong> – H1 to największy nagłówek (zwykle tytuł strony), H6 to najmniejszy. `<h1><span id="_do_8211_naglowki_8211_H1_to_najwiekszy_naglowek_zwykle_tytul_strony_H6_to_najmniejszy_Moja_strona">Moja strona</span></h1>` utworzy duży nagłówek.</p>
<p class="wp-block-paragraph"><strong>2. `<p>` – akapit/paragraf</strong> – wszystkie bloki tekstu opakowujesz w ten tag. `<p>To jest mój tekst.</p>
`</p>
<p class="wp-block-paragraph"><strong>3. `<a>` – hiperlink</strong> – umożliwia klikanie na tekst prowadzący do innej strony. `<a href="https://google.pl" target="_blank" rel="noopener">Kliknij tutaj</a>` – atrybut `href` zawiera adres URL, gdzie prowadzi link.</p>
<p class="wp-block-paragraph"><strong>4. `<img>` – obraz</strong> – wyświetla obrazy na stronie. `<img decoding="async" src="zdjecie.jpg" alt="Opis zdjęcia">` – atrybut `src` pokazuje gdzie jest plik, `alt` to tekst widoczny jeśli obraz się nie załaduje.</p>
<p class="wp-block-paragraph"><strong>5. `<ul>` i `<ul></p>
<li>` – lista nienumerowana</strong> – tworzy wypunktowanie. `<ul><li>Punkt 1</li><li>Punkt 2</li></ul>`
<p class="wp-block-paragraph"><strong>6. `<ol>` i `<li>` – lista numerowana</strong> – jak wyżej, ale z numerami zamiast punktów.</p>
<p class="wp-block-paragraph"><strong>7. `<div>` – kontener</strong> – grupuje inne elementy w bloki, przydatny do organizacji <strong>CSS stylizacji</strong>. `<div class="sekcja">Treść</div>`</p>
<p class="wp-block-paragraph"><strong>8. `<span>` – kontener inline</strong> – jak `<div>`, ale nie zajmuje całej linii – przydatny dla pojedynczych słów lub fraz.</p>
<p class="wp-block-paragraph"><strong>9. `<strong>` – pogrubienie</strong> – `<strong>Ważny tekst</strong>` wyświetli pogrubiony tekst.</p>
<p class="wp-block-paragraph"><strong>10. `<em>` – pochylenie</strong> – `<em>Tekst pochylony</em>` wyświetli tekst w kursywie.</p>
<p class="wp-block-paragraph">Praktycznie: wymień je od najczęściej do rzadziej używanych. H1, p, a i img to cztery „złote” tagi, których nauczysz się w pierwszej kolejności. Reszta rozszerza możliwości Twojej <strong>własnej strony internetowej</strong>.</p>
<h2 class="wp-block-heading"><span id="CSS_do_stylizacji_8211_jak_zmienic_kolory_fonty_i_rozmiary">CSS do stylizacji – jak zmienić kolory, fonty i rozmiary?</span></h2>
<p class="wp-block-paragraph"><strong>CSS stylizacja zmienia wygląd elementów HTML poprzez definiowanie ich koloru, rozmiaru, pozycji i wielu innych właściwości.</strong> Istnieją 3 sposoby dodawania CSS do strony:</p>
<p class="wp-block-paragraph"><strong>1. CSS inline (wstawione bezpośrednio do tagu)</strong></p>
<p class="wp-block-paragraph">„`html
<p style="color: red; font-size: 18px;">Ten tekst jest czerwony i większy</p>
„`</p>
<p class="wp-block-paragraph">To najprościej, ale najmniej eleganckie – kod HTML robi się zaśmiecony.</p>
<p class="wp-block-paragraph"><strong>2. CSS internal (w sekcji `<head>`)</strong></p>
<p class="wp-block-paragraph">„`html</p>
<head>
<p class="wp-block-paragraph"><style>p{color:blue;font-size:16px;}</p></style>
</head>
<p class="wp-block-paragraph">„`</p>
<p class="wp-block-paragraph">Bardziej organizowane – wszystkie style są w jednym miejscu.</p>
<p class="wp-block-paragraph"><strong>3. CSS external (najlepsze podejście)</strong></p>
<p class="wp-block-paragraph">Tworzysz oddzielny plik `style.css`:</p>
<p class="wp-block-paragraph">„`css
p {
color: green;
font-size: 16px;
}
„`</p>
<p class="wp-block-paragraph">Następnie łączysz go w HTML: `<link rel="stylesheet" href="style.css">` (jak widzieliśmy wcześniej). To najczystsze rozwiązanie – HTML odpowiada za strukturę, CSS za wygląd.</p>
<p class="wp-block-paragraph"><strong>Oto 6 najczęściej używanych właściwości CSS:</strong></p>
<p class="wp-block-paragraph"><strong>1. `color: red;`</strong> – zmienia kolor tekstu. Możesz użyć nazw kolorów (red, blue, green) lub kodów heksadecymalnych (#FF0000).</p>
<p class="wp-block-paragraph"><strong>2. `font-size: 18px;`</strong> – zmienia rozmiar czcionki (px to piksele, ale możesz też użyć em lub %).</p>
<p class="wp-block-paragraph"><strong>3. `font-family: Arial, sans-serif;`</strong> – zmienia czcionkę. Zawsze dodaj rezerwę (sans-serif) na wypadek gdyby czcionka nie załadowała.</p>
<p class="wp-block-paragraph"><strong>4. `background-color: yellow;`</strong> – zmienia kolor tła.</p>
<p class="wp-block-paragraph"><strong>5. `margin: 20px;`</strong> – dodaje przestrzeń wokół elementu (na zewnątrz).</p>
<p class="wp-block-paragraph"><strong>6. `padding: 10px;`</strong> – dodaje przestrzeń wewnątrz elementu (pomiędzy tekstem a krawędzią).</p>
<p class="wp-block-paragraph">Selektory CSS mogą wskazywać elementy na wiele sposobów: `p` dotyczy wszystkich `<p>`, `.klasa` dotyczy elementów z klasą `class=”klasa”`, `#id` dotyczy elementu z id `id=”moje_id”`. To podstawa <strong>CSS stylizacji</strong> dla każdej <strong>własnej strony internetowej</strong>.</p>
<h2 class="wp-block-heading"><span id="Responsive_design_8211_jak_dostosowac_strone_do_urzadzen_mobilnych">Responsive design – jak dostosować stronę do urządzeń mobilnych?</span></h2>
<p class="wp-block-paragraph"><strong>Responsive design to podejście do tworzenia stron, które wyglądają dobrze na wszystkich urządzeniach – komputerach, tabletach i telefonach.</strong> Ludzie przeglądają strony głównie na <strong>ekrany mobilne</strong> (smartfony), więc ignorowanie tego to błąd. Zamiast tworzyć dwie różne strony (jedną dla komputerów, jedną dla mobilu), responsive design używa CSS aby zmieniać układ w zależności od rozmiaru ekranu.</p>
<p class="wp-block-paragraph">Podstawowy element to <strong>viewport meta tag</strong> w sekcji `<head>`:</p>
<p class="wp-block-paragraph">„`html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
„`</p>
<p class="wp-block-paragraph">To mówi przeglądarce, aby strona miała szerokość urządzenia i aby nie zmniejszała automatycznie zawartość.</p>
<p class="wp-block-paragraph">Drugi element to <strong>media queries</strong> – reguły CSS, które aktywują się tylko przy określonych rozmiarach ekranu:</p>
<p class="wp-block-paragraph">„`css
/<em> Dla dużych ekranów (desktop)</em>/
body {
font-size: 18px;
}</p>
<p class="wp-block-paragraph">/<em> Dla ekranów poniżej 768px (tablety)</em>/
@media (max-width: 768px) {
body {
font-size: 16px;
}
}</p>
<p class="wp-block-paragraph">/<em> Dla ekranów poniżej 480px (smartfony)</em>/
@media (max-width: 480px) {
body {
font-size: 14px;
}
}
„`</p>
<p class="wp-block-paragraph">Podejście <strong>mobile-first</strong> oznacza, że zaczynasz od projektowania dla telefonów, a potem dodajesz więcej treści dla większych ekranów. To mądrzejsze niż odwrotnie, bo zwykle ludzie przeglądarki na mobilach mają mniej miejsca. Punkty przerwania (breakpoints) to dokładne rozmiary ekranu, w których zmienia się układ – 480px dla mobilu, 768px dla tabletu, 1024px+ dla komputera. To <strong>tworzenie stron od zera</strong> w nowoczesny sposób.</p>
<h2 class="wp-block-heading"><span id="Publikacja_strony_w_internecie_8211_domena_hosting_i_FTP">Publikacja strony w internecie – domena, hosting i FTP</span></h2>
<p class="wp-block-paragraph"><strong>Publikacja to proces przesłania plików Twojej strony na serwer, aby byli dostępni dla każdego w internecie.</strong> Aby strona była dostępna online, potrzebujesz trzech rzeczy:</p>
<p class="wp-block-paragraph"><strong>1. Domena</strong> – to nazwa Twojej strony (np. moja-strona.pl). Kupujesz ją zwykle na rok od rejestrara domen takich jak Nazwa.pl, Onet Domeny czy GoDaddy.</p>
<p class="wp-block-paragraph"><strong>2. Hosting</strong> – to serwer, na którym przechowywane są pliki Twojej strony. Gdy ktoś wpiszę Twoją domenę w przeglądarkę, hosting dostarcza pliki HTML i CSS.</p>
<p class="wp-block-paragraph"><strong>3. FTP (File Transfer Protocol)</strong> – to protokół, którym przesyłasz pliki z komputera na hosting. Używasz programu takiego jak FileZilla, aby przesłać folder ze swoją stroną.</p>
<p class="wp-block-paragraph">Dla początkujących (zwłaszcza uczniów) są darmowe alternatywy. <strong>GitHub Pages</strong> pozwala bezpłatnie publikować strony – wystarczy stworzyć repozytorium, przesłać pliki HTML i CSS, a strona pojawia się automatycznie. <strong>Netlify</strong> to kolejna usługa, gdzie możesz przesłać folder ze stroną i otrzymać darmową domenę. Obie opcje są bezpłatne i nie wymagają kupowania hostingu ani domeny.</p>
<p class="wp-block-paragraph">Procedura wygląda następująco: przygotowujesz pliki HTML i CSS na komputerze (index.html to główna strona), wybierasz hosting (GitHub Pages, Netlify, lub płatny hosting), przesyłasz pliki (przez FTP lub upload przez interfejs), czekasz kilka minut aż strona się propaguje, i jest! Twoja <strong>własna strona internetowa</strong> jest dostępna dla całego świata.</p>
<h2 class="wp-block-heading"><span id="Praktyczne_przyklady_8211_gotowe_szablony_HTML_do_pobrania">Praktyczne przykłady – gotowe szablony HTML do pobrania</span></h2>
<p class="wp-block-paragraph"><strong>Szablony to gotowe struktury HTML i CSS, które możesz pobrać i dostosować do swoich potrzeb bez pisania kodu od zera.</strong> Zaoszczędzają czas i pokazują jak działają profesjonalne strony. Oto 4 najlepsze źródła:</p>
<p class="wp-block-paragraph"><strong>1. GitHub.com</strong> – wiele programistów udostępnia swoje projekty bezpłatnie. Wpisz w wyszukiwarkę „html css template” i znajdziesz tysiące opcji. Każdy projekt ma instrukcję jak go pobrać.</p>
<p class="wp-block-paragraph"><strong>2. CodePen.io</strong> – platforma gdzie frontend deweloperzy dzielą się fragmentami kodu. Możesz zobaczyć kod na żywo, skopiować go i modyfikować. Nie musisz nic instalować.</p>
<p class="wp-block-paragraph"><strong>3. Bootstrap</strong> – framework (zestaw gotowych elementów) dla HTML i CSS. Zawiera szablony dla menu, przycisków, grid`u (układu na siatce). Początkujący mogą je używać bez głębokiego rozumienia.</p>
<p class="wp-block-paragraph"><strong>4. Templatemonster.com</strong> – większość szablonów jest płatna, ale mają sekcję za darmo. Szablony są bardzo profesjonalne i zawierają więcej funkcji niż ręcznie pisany kod.</p>
<p class="wp-block-paragraph">Aby używać szablon: pobierasz plik ZIP, rozpakowujesz folder na komputerze, otwierasz plik `index.html` w VS Code, modyfikujesz tekst na swój, zmieniaż kolory w pliku CSS, i już masz <strong>własną stronę internetową</strong>. Nie musisz rozumieć każdej linijki kodu – możesz eksperymentować i uczyć się w praktyce.</p>
<h2 class="wp-block-heading"><span id="Bledy_poczatkujacych_8211_co_unikac_przy_tworzeniu_pierwszej_strony">Błędy początkujących – co unikać przy tworzeniu pierwszej strony?</span></h2>
<p class="wp-block-paragraph">Tak, początkujący popełniają błędy, ale są one łatwe do naprawienia. Oto 6 najczęstszych:</p>
<p class="wp-block-paragraph"><strong>1. Brakujące lub źle napisane zamknięcia tagów</strong></p>
<li>Błąd: ` <p class="wp-block-paragraph">Tekst` (brakuje `</p> `)</li>
<li>Naprawa: ` <p class="wp-block-paragraph">Tekst</p> `</li>
<li>Konsekwencja: przeglądarka może źle wyświetlić resztę strony.</li>
<p class="wp-block-paragraph"><strong>2. Źle użyte selektory CSS</strong></p>
<li>Błąd: `p.main { color: red; }` ale w HTML: `<p id="main">Tekst</p>` (użyłeś id zamiast class)</li>
<li>Naprawa: zmień CSS na `p#main { color: red; }` lub zmień HTML na `<p class="main">Tekst</p>`</li>
<li>Konsekwencja: CSS nie działa, tekst nie zmienia koloru.</li>
<p class="wp-block-paragraph"><strong>3. Brak `<meta charset="UTF-8">`</strong></p>
<li>Błąd: polskie znaki (ą, ę, ó) wyświetlają się jako dziwne symbole.</li>
<li>Naprawa: dodaj `<meta charset="UTF-8">` w sekcji `<head>`</li>
<li>Konsekwencja: strona wygląda zmięto, nikt jej poważnie nie bierze.</li>
<p class="wp-block-paragraph"><strong>4. Nieprawidłowe ścieżki do plików</strong></p>
<li>Błąd: `<img decoding="async" src="C:\Moje_dokumenty\zdjecie.jpg">` (pełna ścieżka z komputera)</li>
<li>Naprawa: `<img decoding="async" src="zdjecie.jpg">` (względna ścieżka, plik w tym samym folderze)</li>
<li>Konsekwencja: obrazy się nie wczytują.</li>
<p class="wp-block-paragraph"><strong>5. Zapomnienie o atrybucie `alt` w obrazach</strong></p>
<li>Błąd: `<img decoding="async" src="zdjecie.jpg">`</li>
<li>Naprawa: `<img decoding="async" src="zdjecie.jpg" alt="Opis zdjęcia">`</li>
<li>Konsekwencja: strona jest mniej dostępna dla osób niewidomych, a SEO jest słabsze.</li>
<p class="wp-block-paragraph"><strong>6. Umieszczenie całego stylu w CSS inline zamiast w oddzielnym pliku</strong></p>
<li>Błąd: każdy tag ma `style=”…”` wbudowany, HTML robi się nieczytelny.</li>
<li>Naprawa: utwórz `style.css` i linkuj go w `<head>` (jak pokazaliśmy wcześniej).</li>
<li>Konsekwencja: kod jest trudny do utrzymania, modyfikacja designu wymaga edytowania każdego elementu.</li>
</ul>
<p class="wp-block-paragraph">Podczas tworzenia <strong>własnej strony internetowej</strong> posługuj się przeglądarką i konsolą programisty (naciśnij F12). Pokaże Ci błędy w kodzie i ułatwi debugowanie. <a href="https://bibliotekawolontariatu.pl/notion-dla-studenta-sesja-praca-dyplomowa-i-system-zettelkasten-w-jednym-miejscu/">narzędziach edytorskich</a> znacznie pomagają w organizacji całego projektu. Każdy programista zaczyna od błędów – to normalne i część procesu nauki.
**</p>
<div class="saboxplugin-wrap" itemtype="http://schema.org/Person" itemscope itemprop="author"><div class="saboxplugin-tab"><div class="saboxplugin-gravatar"><img decoding="async" src="http://bibliotekawolontariatu.pl/wp-content/uploads/2025/07/Adam-Klastor.jpeg" width="100" height="100" alt="" itemprop="image"></div><div class="saboxplugin-authorname"><a href="https://bibliotekawolontariatu.pl/author/jacek/" class="vcard author" rel="author"><span class="fn">Adam Klastor</span></a></div><div class="saboxplugin-desc"><div itemprop="description"><p>Nazywam się Adam Klastor i jako redaktor wraz z całym zespołem mam przyjemność zaprosić Cię do świata, w którym pomaganie staje się drogą do sukcesu. Wierzymy, że nasz portal to nie tylko bezinteresowna pomoc, ale także niezwykła szansa na rozwój.</p></div></div><div class="clearfix"></div></div></div><div class='yarpp yarpp-related yarpp-related-website yarpp-template-thumbnails'>
<h3>Powiązane wpisy:</h3>
<div class="yarpp-thumbnails-horizontal"> <a class='yarpp-thumbnail' rel='norewrite' href='https://bibliotekawolontariatu.pl/canva-dla-ucznia-jak-zaczac-tworzyc-grafiki-za-darmo-w-2025-roku/' title='Canva dla ucznia – jak zacząć tworzyć grafiki za darmo w 2025 roku'> <img width="150" height="150" src="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-canva-dla-ucznia-jak-zaczac-tworzyc-grafiki-za-darmo-w-2025-1777352631412-150x150.webp" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Uczen siedzacy przy laptopie tworzy kolorowa prezentacje szkolna w Canvie" data-pin-nopin="true" srcset="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-canva-dla-ucznia-jak-zaczac-tworzyc-grafiki-za-darmo-w-2025-1777352631412-150x150.webp 150w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-canva-dla-ucznia-jak-zaczac-tworzyc-grafiki-za-darmo-w-2025-1777352631412-600x600.webp 600w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-canva-dla-ucznia-jak-zaczac-tworzyc-grafiki-za-darmo-w-2025-1777352631412-120x120.webp 120w" sizes="(max-width: 150px) 100vw, 150px"/><span class="yarpp-thumbnail-title">Canva dla ucznia – jak zacząć tworzyć grafiki za darmo w 2025 roku</span></a> <a class='yarpp-thumbnail' rel='norewrite' href='https://bibliotekawolontariatu.pl/funkcja-jezeli-w-excelu-przyklady-warunkow-i-praktyczne-zastosowania/' title='Funkcja JEŻELI w Excelu – przykłady warunków i praktyczne zastosowania'> <img width="150" height="150" src="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-funkcja-jezeli-w-excelu-przyklady-warunkow-i-praktyczne-zast-1777352888952-150x150.webp" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Interfejs Excel z funkcją JEŻELI w pasku formuły pokazujący warunki warunkowe" data-pin-nopin="true" srcset="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-funkcja-jezeli-w-excelu-przyklady-warunkow-i-praktyczne-zast-1777352888952-150x150.webp 150w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-funkcja-jezeli-w-excelu-przyklady-warunkow-i-praktyczne-zast-1777352888952-600x600.webp 600w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-funkcja-jezeli-w-excelu-przyklady-warunkow-i-praktyczne-zast-1777352888952-120x120.webp 120w" sizes="(max-width: 150px) 100vw, 150px"/><span class="yarpp-thumbnail-title">Funkcja JEŻELI w Excelu – przykłady warunków i praktyczne zastosowania</span></a> <a class='yarpp-thumbnail' rel='norewrite' href='https://bibliotekawolontariatu.pl/tabela-przestawna-w-excelu-przewodnik-tworzenia-i-analizy-danych/' title='Tabela przestawna w Excelu – przewodnik tworzenia i analizy danych'> <img width="150" height="150" src="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-tabela-przestawna-w-excelu-przewodnik-tworzenia-i-analizy-da-1777352890809-150x150.webp" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Ekran Excela z tabelą przestawną pokazującą dane podsumowane i sformatowane w wierszach i kolumnach" data-pin-nopin="true" srcset="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-tabela-przestawna-w-excelu-przewodnik-tworzenia-i-analizy-da-1777352890809-150x150.webp 150w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-tabela-przestawna-w-excelu-przewodnik-tworzenia-i-analizy-da-1777352890809-600x600.webp 600w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-tabela-przestawna-w-excelu-przewodnik-tworzenia-i-analizy-da-1777352890809-120x120.webp 120w" sizes="(max-width: 150px) 100vw, 150px"/><span class="yarpp-thumbnail-title">Tabela przestawna w Excelu – przewodnik tworzenia i analizy danych</span></a> <a class='yarpp-thumbnail' rel='norewrite' href='https://bibliotekawolontariatu.pl/jak-zrobic-plakat-w-canvie-krok-po-kroku-poradnik-dla-nauczycieli-i-uczniow/' title='Jak zrobić plakat w Canvie krok po kroku – poradnik dla nauczycieli i uczniów'> <img width="150" height="150" src="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-plakat-w-canvie-krok-po-kroku-poradnik-dla-nauczy-1777352918740-150x150.webp" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Interfejs Canvy z otwartym szablonami plakatu szkolnego" data-pin-nopin="true" srcset="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-plakat-w-canvie-krok-po-kroku-poradnik-dla-nauczy-1777352918740-150x150.webp 150w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-plakat-w-canvie-krok-po-kroku-poradnik-dla-nauczy-1777352918740-600x600.webp 600w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-plakat-w-canvie-krok-po-kroku-poradnik-dla-nauczy-1777352918740-120x120.webp 120w" sizes="(max-width: 150px) 100vw, 150px"/><span class="yarpp-thumbnail-title">Jak zrobić plakat w Canvie krok po kroku – poradnik dla nauczycieli i uczniów</span></a></div></div><div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://bibliotekawolontariatu.pl/hiperlacza-w-powerpoint-jak-ustawic-nawigacje-po-prezentacji-krok-po-kroku/" target="_blank" rel="dofollow" class="ufccd094f011f2e53efcfd37ecaa9ef4c"><style>.ufccd094f011f2e53efcfd37ecaa9ef4c{padding:0px;margin:0;padding-top:1em!important;padding-bottom:1em!important;width:100%;display:block;font-weight:bold;background-color:#eaeaea;border:0!important;border-left:4px solid #34495E!important;text-decoration:none;} .ufccd094f011f2e53efcfd37ecaa9ef4c:active, .ufccd094f011f2e53efcfd37ecaa9ef4c:hover{opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;text-decoration:none;} .ufccd094f011f2e53efcfd37ecaa9ef4c{transition:background-color 250ms;webkit-transition:background-color 250ms;opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;} .ufccd094f011f2e53efcfd37ecaa9ef4c .ctaText{font-weight:bold;color:#464646;text-decoration:none;font-size:16px;} .ufccd094f011f2e53efcfd37ecaa9ef4c .postTitle{color:#000000;text-decoration:underline!important;font-size:16px;} .ufccd094f011f2e53efcfd37ecaa9ef4c:hover .postTitle{text-decoration:underline!important;}</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Przeczytaj</span> <span class="postTitle">Hiperłącza w PowerPoint - jak ustawić nawigację po prezentacji krok po kroku</span></div></a></div></div><div class="ct-share-box is-width-constrained ct-hidden-sm" data-location="bottom" data-type="type-1">
<div data-icons-type="simple"> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbibliotekawolontariatu.pl%2Fjak-zrobic-wlasna-strone-www-od-zera-poradnik-html-i-css-dla-poczatkujacych%2F" data-network="facebook" aria-label="Facebook" rel="noopener noreferrer nofollow"> <span class="ct-icon-container"> <svg width="20px" height="20px" viewBox="0 0 20 20" aria-hidden="true"> <path d="M20,10.1c0-5.5-4.5-10-10-10S0,4.5,0,10.1c0,5,3.7,9.1,8.4,9.9v-7H5.9v-2.9h2.5V7.9C8.4,5.4,9.9,4,12.2,4c1.1,0,2.2,0.2,2.2,0.2v2.5h-1.3c-1.2,0-1.6,0.8-1.6,1.6v1.9h2.8L13.9,13h-2.3v7C16.3,19.2,20,15.1,20,10.1z"/></svg></span></a> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fbibliotekawolontariatu.pl%2Fjak-zrobic-wlasna-strone-www-od-zera-poradnik-html-i-css-dla-poczatkujacych%2F&text=Jak%20zrobi%C4%87%20w%C5%82asn%C4%85%20stron%C4%99%20WWW%20od%20zera%20%26%238211%3B%20poradnik%20HTML%20i%20CSS%20dla%20pocz%C4%85tkuj%C4%85cych" data-network="twitter" aria-label="X (Twitter)" rel="noopener noreferrer nofollow"> <span class="ct-icon-container"> <svg width="20px" height="20px" viewBox="0 0 20 20" aria-hidden="true"> <path d="M2.9 0C1.3 0 0 1.3 0 2.9v14.3C0 18.7 1.3 20 2.9 20h14.3c1.6 0 2.9-1.3 2.9-2.9V2.9C20 1.3 18.7 0 17.1 0H2.9zm13.2 3.8L11.5 9l5.5 7.2h-4.3l-3.3-4.4-3.8 4.4H3.4l5-5.7-5.3-6.7h4.4l3 4 3.5-4h2.1zM14.4 15 6.8 5H5.6l7.7 10h1.1z"/></svg></span></a> <a href="#" data-network="pinterest" aria-label="Pinterest" rel="noopener noreferrer nofollow"> <span class="ct-icon-container"> <svg width="20px" height="20px" viewBox="0 0 20 20" aria-hidden="true"> <path d="M10,0C4.5,0,0,4.5,0,10c0,4.1,2.5,7.6,6,9.2c0-0.7,0-1.5,0.2-2.3c0.2-0.8,1.3-5.4,1.3-5.4s-0.3-0.6-0.3-1.6c0-1.5,0.9-2.6,1.9-2.6c0.9,0,1.3,0.7,1.3,1.5c0,0.9-0.6,2.3-0.9,3.5c-0.3,1.1,0.5,1.9,1.6,1.9c1.9,0,3.2-2.4,3.2-5.3c0-2.2-1.5-3.8-4.2-3.8c-3,0-4.9,2.3-4.9,4.8c0,0.9,0.3,1.5,0.7,2C6,12,6.1,12.1,6,12.4c0,0.2-0.2,0.6-0.2,0.8c-0.1,0.3-0.3,0.3-0.5,0.3c-1.4-0.6-2-2.1-2-3.8c0-2.8,2.4-6.2,7.1-6.2c3.8,0,6.3,2.8,6.3,5.7c0,3.9-2.2,6.9-5.4,6.9c-1.1,0-2.1-0.6-2.4-1.2c0,0-0.6,2.3-0.7,2.7c-0.2,0.8-0.6,1.5-1,2.1C8.1,19.9,9,20,10,20c5.5,0,10-4.5,10-10C20,4.5,15.5,0,10,0z"/></svg></span></a> <a href="https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fbibliotekawolontariatu.pl%2Fjak-zrobic-wlasna-strone-www-od-zera-poradnik-html-i-css-dla-poczatkujacych%2F&title=Jak%20zrobi%C4%87%20w%C5%82asn%C4%85%20stron%C4%99%20WWW%20od%20zera%20%26%238211%3B%20poradnik%20HTML%20i%20CSS%20dla%20pocz%C4%85tkuj%C4%85cych" data-network="linkedin" aria-label="LinkedIn" rel="noopener noreferrer nofollow"> <span class="ct-icon-container"> <svg width="20px" height="20px" viewBox="0 0 20 20" aria-hidden="true"> <path d="M18.6,0H1.4C0.6,0,0,0.6,0,1.4v17.1C0,19.4,0.6,20,1.4,20h17.1c0.8,0,1.4-0.6,1.4-1.4V1.4C20,0.6,19.4,0,18.6,0z M6,17.1h-3V7.6h3L6,17.1L6,17.1zM4.6,6.3c-1,0-1.7-0.8-1.7-1.7s0.8-1.7,1.7-1.7c0.9,0,1.7,0.8,1.7,1.7C6.3,5.5,5.5,6.3,4.6,6.3z M17.2,17.1h-3v-4.6c0-1.1,0-2.5-1.5-2.5c-1.5,0-1.8,1.2-1.8,2.5v4.7h-3V7.6h2.8v1.3h0c0.4-0.8,1.4-1.5,2.8-1.5c3,0,3.6,2,3.6,4.5V17.1z"/></svg></span></a></div></div><nav class="post-navigation is-width-constrained">
<a href="https://bibliotekawolontariatu.pl/jak-zrobic-gre-w-scratchu-krok-po-kroku-kompletny-przewodnik-dla-poczatkujacych/" class="nav-item-prev">
<figure class="ct-media-container "><img width="300" height="169" src="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-gre-w-scratchu-krok-po-kroku-kompletny-przewodnik-1777352933489-300x169.webp" class="attachment-medium size-medium wp-post-image" alt="Interfejs Scratcha z kolorowymi blokami kodu, sceną projektu i listą postaci" loading="lazy" decoding="async" srcset="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-gre-w-scratchu-krok-po-kroku-kompletny-przewodnik-1777352933489-300x169.webp 300w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-gre-w-scratchu-krok-po-kroku-kompletny-przewodnik-1777352933489-1024x576.webp 1024w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-gre-w-scratchu-krok-po-kroku-kompletny-przewodnik-1777352933489-768x432.webp 768w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-jak-zrobic-gre-w-scratchu-krok-po-kroku-kompletny-przewodnik-1777352933489.webp 1200w" sizes="auto, (max-width: 300px) 100vw, 300px" itemprop="image" style="aspect-ratio: 1/1;"/><svg width="20px" height="15px" viewBox="0 0 20 15" fill="#ffffff"><polygon points="0,7.5 5.5,13 6.4,12.1 2.4,8.1 20,8.1 20,6.9 2.4,6.9 6.4,2.9 5.5,2 "/></svg></figure>
<div class="item-content"> <span class="item-label"> Poprzedni <span>Wpis</span></span> <span class="item-title ct-hidden-sm"> Jak zrobić grę w Scratchu krok po kroku - kompletny przewodnik dla początkujących</span></div></a>
<a href="https://bibliotekawolontariatu.pl/bezpieczne-haslo-jak-je-stworzyc-i-zapamietac-kompletny-poradnik/" class="nav-item-next">
<div class="item-content"> <span class="item-label"> Następny <span>Wpis</span></span> <span class="item-title ct-hidden-sm"> Bezpieczne hasło - jak je stworzyć i zapamiętać: kompletny poradnik</span></div><figure class="ct-media-container "><img width="300" height="169" src="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-bezpieczne-haslo-jak-je-stworzyc-i-zapamietac-kompletny-pora-1777352949739-300x169.webp" class="attachment-medium size-medium wp-post-image" alt="Infografika pokazująca kroki tworzenia bezpiecznego hasła z symbolami: klucz, zamek, znaki specjalne, litery i cyfry" loading="lazy" decoding="async" srcset="https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-bezpieczne-haslo-jak-je-stworzyc-i-zapamietac-kompletny-pora-1777352949739-300x169.webp 300w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-bezpieczne-haslo-jak-je-stworzyc-i-zapamietac-kompletny-pora-1777352949739-1024x576.webp 1024w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-bezpieczne-haslo-jak-je-stworzyc-i-zapamietac-kompletny-pora-1777352949739-768x432.webp 768w, https://bibliotekawolontariatu.pl/wp-content/uploads/2026/04/hero-bezpieczne-haslo-jak-je-stworzyc-i-zapamietac-kompletny-pora-1777352949739.webp 1200w" sizes="auto, (max-width: 300px) 100vw, 300px" itemprop="image" style="aspect-ratio: 1/1;"/><svg width="20px" height="15px" viewBox="0 0 20 15" fill="#ffffff"><polygon points="14.5,2 13.6,2.9 17.6,6.9 0,6.9 0,8.1 17.6,8.1 13.6,12.1 14.5,13 20,7.5 "/></svg></figure></a>
</nav>
</article>
<aside class="ct-hidden-sm ct-hidden-md" data-type="type-1" id="sidebar" itemtype="https://schema.org/WPSideBar" itemscope="itemscope"><div class="ct-sidebar"><div class="ct-widget is-layout-flow widget_block widget_search" id="block-2"><form role="search" method="get" action="https://bibliotekawolontariatu.pl/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Szukaj</label><div class="wp-block-search__inside-wrapper"><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Szukaj" class="wp-block-search__button wp-element-button" type="submit" >Szukaj</button></div></form></div><style>.saboxplugin-wrap{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border:1px solid #eee;width:100%;clear:both;display:block;overflow:hidden;word-wrap:break-word;position:relative}.saboxplugin-wrap .saboxplugin-gravatar{float:left;padding:0 20px 20px 20px}.saboxplugin-wrap .saboxplugin-gravatar img{max-width:100px;height:auto;border-radius:0;}.saboxplugin-wrap .saboxplugin-authorname{font-size:18px;line-height:1;margin:20px 0 0 20px;display:block}.saboxplugin-wrap .saboxplugin-authorname a{text-decoration:none}.saboxplugin-wrap .saboxplugin-authorname a:focus{outline:0}.saboxplugin-wrap .saboxplugin-desc{display:block;margin:5px 20px}.saboxplugin-wrap .saboxplugin-desc a{text-decoration:underline}.saboxplugin-wrap .saboxplugin-desc p{margin:5px 0 12px}.saboxplugin-wrap .saboxplugin-web{margin:0 20px 15px;text-align:left}.saboxplugin-wrap .sab-web-position{text-align:right}.saboxplugin-wrap .saboxplugin-web a{color:#ccc;text-decoration:none}.saboxplugin-wrap .saboxplugin-socials{position:relative;display:block;background:#fcfcfc;padding:5px;border-top:1px solid #eee}.saboxplugin-wrap .saboxplugin-socials a svg{width:20px;height:20px}.saboxplugin-wrap .saboxplugin-socials a svg .st2{fill:#fff;transform-origin:center center;}.saboxplugin-wrap .saboxplugin-socials a svg .st1{fill:rgba(0,0,0,.3)}.saboxplugin-wrap .saboxplugin-socials a:hover{opacity:.8;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s;box-shadow:none!important;-webkit-box-shadow:none!important}.saboxplugin-wrap .saboxplugin-socials .saboxplugin-icon-color{box-shadow:none;padding:0;border:0;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s;display:inline-block;color:#fff;font-size:0;text-decoration:inherit;margin:5px;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;overflow:hidden}.saboxplugin-wrap .saboxplugin-socials .saboxplugin-icon-grey{text-decoration:inherit;box-shadow:none;position:relative;display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;margin:10px 5px;color:#444;fill:#444}.clearfix:after,.clearfix:before{content:' ';display:table;line-height:0;clear:both}.ie7 .clearfix{zoom:1}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-twitch{border-color:#38245c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-behance{border-color:#003eb0}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-deviantart{border-color:#036824}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-digg{border-color:#00327c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-dribbble{border-color:#ba1655}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-facebook{border-color:#1e2e4f}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-flickr{border-color:#003576}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-github{border-color:#264874}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-google{border-color:#0b51c5}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-html5{border-color:#902e13}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-instagram{border-color:#1630aa}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-linkedin{border-color:#00344f}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-pinterest{border-color:#5b040e}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-reddit{border-color:#992900}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-rss{border-color:#a43b0a}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-sharethis{border-color:#5d8420}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-soundcloud{border-color:#995200}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-spotify{border-color:#0f612c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-stackoverflow{border-color:#a95009}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-steam{border-color:#006388}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-user_email{border-color:#b84e05}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-tumblr{border-color:#10151b}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-twitter{border-color:#0967a0}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-vimeo{border-color:#0d7091}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-windows{border-color:#003f71}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-whatsapp{border-color:#003f71}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-wordpress{border-color:#0f3647}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-yahoo{border-color:#14002d}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-youtube{border-color:#900}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-xing{border-color:#000202}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-mixcloud{border-color:#2475a0}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-vk{border-color:#243549}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-medium{border-color:#00452c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-quora{border-color:#420e00}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-meetup{border-color:#9b181c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-goodreads{border-color:#000}.saboxplugin-socials.sa
