Poradnik edycji stron internetowych
stworzonych w HTML i CSS

1. Charakterystyka stron HTML i CSS

Podstawowe właściwości, zalety, ograniczenia i różnice pomiędzy CMS WordPress

Zacznijmy od zrozumienia podstaw. Kod HTML (HyperText Markup Language) i CSS (Cascading Style Sheets), to podstawowe technologie, na których opiera się każda strona w Internecie.

• HTML odpowiada za strukturę i treść strony – to on mówi przeglądarce, co jest nagłówkiem, co akapitem, w którym miejscu ma być wyświetlony obrazek, a gdzie link czy przycisk. HTML to niesformatowana zawartość całej strony.
• CSS odpowiada za wygląd i styl – czyli kolory, rodzaje czcionek (fontów), rozmiary, marginesy, układ i wzajemne położenie elementów. CSS komponuje warstwę wizualną strony i tworzy wszelkie efekty widoczne w witrynie.

Strony zaprojektowane w HTML i CSS

Strony lub sklepy internetowe stworzone na CMS (np. WordPress)

2. Czym się różni strona zbudowana na WordPress
od strony stworzonej w HTML?

Dla odbiorców – niczym.
Różnica polega na sposobie, w jaki przeglądarka (renderuje) czyli uzyskuje i wyświetla zawartość strony.

• Strona HTML i CSS: Pliki HTML i CSS są statycznie osadzone na serwerze – raz stworzone, wyglądają tak samo za każdym razem, gdy ktoś je otworzy. Przeglądarka po prostu pobiera te pliki z serwera i od razu je wyświetla. To jest bardzo szybkie i proste zadanie.
• Strona WordPress: Kiedy wchodzisz na stronę zbudowaną na WordPress, serwer wykonując wiele czynności musi w pierwszej kolejności:

Ten proces jest znacznie bardziej złożony i dlatego WordPress (czy inne CMS-y) potrzebują mocniejszych serwerów i są zazwyczaj wolniejsze od prostych stron HTML. Dają jednak wygodę zmian zawartości bez edytowania kodu strony. Jeśli nie potrzebujesz dynamicznie zmieniających się treści strona HTML zawsze okaże się wydajniejsza.

3. Możliwości edycji strony w HTML i CSS

Generalna zasada jest taka, że możliwości edycji kodu HTML i CSS są nieograniczone!
Każdy element, który widzisz na stronie – tekst, obrazy, kolory, fonty, układ sekcji, przyciski czy tła – jest zdefiniowany w plikach HTML i CSS. Zmieniając odpowiednie linie kodu, możesz zmienić absolutnie wszystko.

4. Podstawowe narzędzia potrzebne do edycji kodu

Aby edytować pliki HTML i CSS, będziesz potrzebował kilku narzędzi. Wszystkie tu wymienione, są darmowe i łatwe w obsłudze.

Edytory kodu: Twoje niezbędne narzędzie pracy

Visual Studio Code (VS Code)

Zalety

• Podświetlanie składni (Syntax Highlighting): Różne części kodu są kolorowane, co ułatwia czytanie i wykrywanie błędów,
• Autouzupełnianie (Autocomplete): Podpowiada fragmenty kodu, co przyspiesza pisanie i minimalizuje błędy literówki,
• Wbudowany terminal: Możesz wykonywać polecenia bezpośrednio w edytorze,
• Ogromna liczba rozszerzeń: Dodatkowe funkcje, które możesz zainstalować, np. do sprawdzania kodu, formatowania, pracy z Git w szerokim zespole.

Podstawowa instrukcja obsługi:

2. Instalacja: Przejdź przez standardowy proces instalacji,

Sublime Text

Zalety

• Szybkość: Działa bardzo płynnie nawet na starszych komputerach,
• Minimalistyczny interfejs: Skupia się na kodzie, bez zbędnych rozpraszaczy,
• Wielokrotne kursory: Możliwość edycji wielu linii jednocześnie.

Instrukcja obsługi:

Wskazówka: Osobiście korzystam z Sublime Text ponieważ ma bardzo prosty interfejs, początkującym polecam jednak VS Code ze względu na jego wszechstronność i ogromne możliwości rozbudowy.

Przeglądarka internetowa z narzędziami deweloperskimi

• Przeglądarka Chrome ma wbudowany zestaw narzędzi deweloperskich, które są nieocenione przy edycji stron.

Właściwości:

• Inspekcja elementów: Pozwala zobaczyć kod HTML i CSS konkretnego elementu na stronie,
• Tymczasowa edycja CSS: Możesz zmieniać style bezpośrednio w przeglądarce i od razu widzieć efekty, bez edycji plików. Te zmiany są jednak tylko tymczasowe i znikają po odświeżeniu strony! To idealny sposób na eksperymenty,
• Podgląd responsywności: Możesz symulować, jak strona wygląda na różnych rozmiarach ekranów (smartfony, tablety).

Uruchamianie DevTools:

2. Kliknij prawym przyciskiem myszy na dowolny element na stronie i wybierz Zbadaj (lub Inspect),

3. Alternatywnie, naciśnij F12 (Windows/Linux) lub Cmd + Option + I (macOS).

W otwartym panelu Elements zobaczysz kod HTML, a w panelu Styles, obok niego – odpowiadające mu style CSS. Możesz klikać w wartości CSS i wpisywać nowe, aby zobaczyć, jak strona się zmieni. Pamiętaj, że to tylko działania tymczasowe – żeby zmiany były trwałe, musisz wprowadzić je w plikach na dysku i wyeksportować na serwer!

Pobieranie i przesyłanie plików na serwer. Klient FTP: FileZilla

Krótka instrukcja obsługi:

2. Instalacja: Standardowy proces instalacji,

3. Połączenie z serwerem: Będziesz potrzebował danych do połączenia FTP, które otrzymałeś od swojego dostawcy hostingu (lub od osoby, która konfigurowała Twój hosting):

• Host: Adres serwera FTP (np. ftp.twojadomena.pl lub adres IP),
• Nazwa użytkownika: (Login FTP),
• Hasło: (Hasło FTP),
• Numer portu: Zazwyczaj 21, ale może być inny (sprawdź u dostawcy).

5. Interfejs:

• Lewa strona okna (Lokalna strona): pliki na Twoim komputerze,
• Prawa strona okna (Zdalna strona): pliki na serwerze.

8. Sprawdzenie: Po przesłaniu plików odśwież stronę w przeglądarce (wciskając klawisz F12), aby zobaczyć zmiany.

Jak już zapewne widzisz, edycja strony w HTML sprowadza się do trzech kroków które musisz wykonać: pobranie pliku witryny na pulpit swojego komputera, modyfikacja kodu i eksport (nadpisanie) zmodyfikowanego pliku ponownie na serwer.

5. Edycja tekstu: nagłówek, akapit (paragraf), przycisk i lista

Oto podstawowe elementy tekstowe które znajdziesz w kodzie. Zobacz, jak je rozpoznać oraz edytować w HTML:

• Nagłówki (H1 do H6): Służą do tworzenia hierarchii treści. H1 to najważniejszy nagłówek (tytuł strony/główny nagłówek), H2 to podtytuł, itd. Ich wielkość i styl są zazwyczaj definiowane w CSS.

<h1>Główny tytuł strony</h1>

<h2>Podtytuł sekcji</h2>

<h3>Nagłówek w bloku tekstu</h3>

Aby zmienić tekst nagłówka, po prostu edytuj tekst między znacznikami otwierającymi (<h1>) a zamykającymi (</h1>).

• Paragrafy (akapity tekstu): Podstawowy blok tekstu.

<p>To jest standardowy paragraf tekstu na stronie. Tutaj możesz wprowadzić swoje zmiany.</p>

Zmień lub napisz tekst między znacznikami <p> i </p>.

• Pogrubienie i pochylenie tekstu:
  • Pogrubienie: Używaj znacznika <strong> pomiędzy frazami dla tekstu o dużym znaczeniu i <b> dla zwykłego pogrubienia.

<p>Ten tekst jest zwykły, ale ten jest <strong>ważny</strong>, a ten jest <b>tylko pogrubiony</b></p>

Pochylenie: Używaj <em> dla tekstu eksponowanego, <i> dla zwykłego pochylenia (np. skąd pochodzi jakieś zdjęcie).

<p>Ten tekst jest normalny, ale ten jest <em>wyeksponowany</em>, a ten jest <i>tylko pochylony</i></p>

• Linki: Tworzą odnośniki do innych stron lub miejsc na tej samej stronie.

<a href=”https://www.google.com”>Odwiedź stronę Google</a>

<a href=”#sekcja-o-nas”>Przejdź do sekcji O nas</a>

• a: Kotwica czyli link do obiektu,
• href: Adres docelowy linku,
• target=”_blank”: Dodaj ten atrybut, jeśli chcesz, aby link otwierał się w nowej karcie przeglądarki.

<a href=”https://www.google.com” target=”_blank”>Otwórz stronę Google w nowej karcie</a>

• Przyciski z odpowiednim stylem CSS: Przyciski to często linki, które wyglądają jak przyciski dzięki stylom CSS.

<a href=”#kontakt” class=”button”>Skontaktuj się z nami</a>

<button type=”submit”>Wyślij Formularz</button>

Tekst przycisku edytujesz między znacznikami otwierającymi a zamykającymi. Wygląd (kolor, rozmiar, kształt) zawsze zmieniasz w plikach CSS.

• Listy:
  • Nienumerowana lista (ul – unordered list): Używa punktorów.

<ul>

    <li>Element pierwszy</li>

    <li>Element drugi</li>

    <li>Element trzeci</li>

</ul>

• Numerowana lista (ol – ordered list): Używa numeracji.

<ol>

    <li>Pierwszy punkt</li>

    <li>Drugi punkt</li>

    <li>Trzeci punkt</li>

</ol>

Każdy element listy to li (list item).

6. Edycja grafiki. Dodawanie albo podmiana obrazów i zdjęć na stronie HTML

1. Przygotowanie obrazu:
   • Rozmiar: Obrazy powinny mieć odpowiednie wymiary. Nie wgrywaj zdjęć z aparatu cyfrowego (często po kilka MB!) bezpośrednio na stronę, bo ją spowolnią. Zmniejszaj je do rozsądnych rozmiarów (np. szerokość 1920px dla dużych zdjęć, 800-1200px dla mniejszych).
   • Optymalizacja: Używaj formatów JPEG dla zdjęć, PNG dla grafik z przezroczystością, WebP dla jak najlepszej kompresji (już wszystkie wiodące przeglądarki w pełni wspierają ten format). Możesz użyć darmowych narzędzi online do kompresji zdjęć, np. TinyPNG (tinypng.com) oraz Convertio (convertio.co/pl/) do konwersji formatu swojej grafiki.
   • Darmowe programy do edycji grafiki:
     • Canva (online): Świetne do szybkich podstawowych edycji, dodawania tekstu, kompresji.
     • GIMP (desktop): Darmowa alternatywa dla Photoshopa, bardziej zaawansowana od Canva, z ogromnym potencjałem możliwości.
     • Photopea (online): Rozbudowany i bardzo funkcjonalny darmowy program do obróbki grafiki rastrowej i wektorowej..
2. Umieszczenie obrazu na serwerze: Wgraj przygotowane obrazy (np. moje-zdjecie.jpg) do folderu images (lub podobnego, w którym przechowujesz zdjęcia) w katalogu swojej strony na serwerze, używając FileZilli.
3. Kod HTML: Dodaj obraz do swojej strony za pomocą tagu <img>:

<img src=”images/moje-zdjecie.jpg” alt=”Opis mojego zdjęcia” width=”800″ height=”600″>

• src: Ścieżka do pliku obrazu. Upewnij się, że jest poprawna! Pamiętaj aby każde zdjęcie miało odpowiednie rozszerzenie (.jpg, .png, .webp itd.)
• alt: Bardzo ważny! To tekst alternatywny dla obrazu. Wyświetla się, gdy obraz się nie załaduje, jest czytany przez czytniki ekranowe dla osób niewidomych i jest ważny dla SEO. Zawsze go dodawaj!

• width i height: (szerokość i wysokość) Ustalają wstępne wymiary grafiki, ale często są kontrolowane przez style CSS.

7. Dodawanie różnych innych, przydatnych mediów na stronę HTML

2. Mapy Google: Podobnie jak z filmami. Wejdź na Google Maps, znajdź lokalizację, kliknij Udostępnij, a następnie Osadź mapę. Skopiuj kod <iframe>.
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!…” width=”600″ height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy”></iframe>
W podanych przykładach osadzania filmu z YouTube i mapy Google style CSS umieszczone są śród liniowo, czyli bezpośrednio w kodzie HTML. Dobrą praktyką jest jednak nadanie klasy lub identyfikatora poszczególnym elementom <iframe> i stylowanie w arkuszu CSS znajdującym się w oddzielnym pliku.

3. Ikony: Zamiast obrazków, często używa się ikon wektorowych (np. z bibliotek takich jak Font Awesome). Są lekkie, skalowalne i łatwe do stylowania za pomocą CSS. Zazwyczaj wymaga to dodania linku do biblioteki CSS w sekcji <head> dokumentu HTML i potem używania prostych znaczników:
<i class=”fas fa-home”></i>

Instrukcje osadzania ikon wraz z linkiem do implementacji, zawsze znajdziesz na stronach bibliotek tych elementów. Czasami wymagana jest bezpłatna rejestracja w serwisie.

Media społecznościowe

Pozwala to na wyświetlanie treści z  mediów społecznościowych bezpośrednio na stronie, co zwiększa interakcję i zaangażowanie użytkowników.
Skopiuj adres URL profilu lub konkretnego posta i wklej go w kodzie HTML, zwykle w atrybucie href elementu <a> albo <iframe>. 
<a href=”https://www.facebook.com/nazwafirmy” target=”_blank”>Odwiedź mój profil na Facebooku</a>
<iframe src=”https://www.youtube.com/embed/ID_FILMU” allowfullscreen></iframe>

W ten sposób osadzisz treść bezpośrednio z platform takich jak Facebook czy YouTube.

8. Wysyłanie wyedytowanych plików strony za pomocą FileZilla na serwer FTP

To jest już ostatni ale nieodzowny punkt kończący edycję plików. Wykonaj go w następujących, prostych krokach:

1. Zrób kopię zapasową! ZAWSZE pobierz aktualną wersję plików z serwera na swój komputer zanim zaczniesz je modyfikować. To Twoja kopia bezpieczeństwa.
2. Otwórz FileZillę i połącz się z serwerem FTP, używając danych dostępowych (Host, Użytkownik, Hasło, Port – jak opisałem wcześniej).
3. Ustal folder swojej strony na serwerze (prawa strona FileZilli, często public_html lub www).
4. Zlokalizuj zmienione pliki na swoim komputerze (lewa strona FileZilli).
5. Przeciągnij i upuść zmodyfikowane pliki (np. index.html, style.css lub nowe obrazy) z lewej strony na prawą, do odpowiednich folderów na serwerze.
6. Gdy FileZilla zapyta o nadpisanie plików, wybierz opcję Nadpisz (Overwrite).
7. Po zakończeniu przesyłania, odśwież swoją stronę w przeglądarce (może być konieczne wyczyszczenie pamięci podręcznej przeglądarki – Ctrl + F5 lub Cmd + Shift + R). Zobaczysz wszystkie wprowadzone zmiany.

Jeśli nowy widok witryny wyświetla się poprawnie i spełnia Twoje oczekiwania to znaczy, że edycja zakończyła się sukcesem. Dobrą praktyką pozostaje jeszcze sprawdzenie poprawności kodu HTML i CSS. Nie musisz tego robić za każdym razem, ale warto wiedzieć jak najprościej przeprowadzić taką walidację. W dużym skrócie opisuję to w kolejnym punkcie tego poradnika.

9. Walidacja (weryfikowanie poprawności) kodu strony

2. Ułatwia debugowanie: Poprawny kod jest łatwiejszy do zrozumienia i naprawienia w razie problemów.

3. Wpływa na SEO: Choć może nie bezpośrednio, poprawny kod może pomóc wyszukiwarkom lepiej indeksować Twoją stronę.

Narzędzia do walidacji:

W3C Markup Validation Service (dla HTML): Wejdź na validator.w3.org. Możesz wkleić adres URL swojej strony, przesłać plik HTML lub wkleić kod bezpośrednio w okno programu.

W3C CSS Validation Service (dla CSS): Wejdź na jigsaw.w3.org/css-validator/. Podobnie jak w przypadku HTML, możesz wpisać URL, przesłać plik CSS lub wkleić kod.
Narzędzia te wskażą błędy i ostrzeżenia, które warto poprawić. Ale Ty, postępując zgodnie z tym poradnikiem, nie popełnisz żadnych błędów.

10. O czym warto pamiętać, aby edycja HTML była prosta i skuteczna?

Zrób kopię zapasową plików strony PRZED każdą edycją. Wystarczy, że skopiujesz cały folder ze swoimi plikami na dysk komputera przed rozpoczęciem pracy. Dzięki temu, jeśli coś pójdzie nie tak, spokojnie będziesz mógł powrócić do poprzedniej, działającej wersji.

b) Zrozumienie struktury plików
Zazwyczaj pliki strony na serwerze wyglądają tak:
index.html: To główny plik strony, to co widzisz, gdy widzisz stronę główną,
css/ (folder): Zawiera pliki .css, np. style.css, które definiują wygląd,
images/ (folder): Zawiera zdjęcia i grafiki,
js/ (folder): Zawiera pliki JavaScript (jeśli są), które odpowiadają za interakcje (np. animacje, galerie). Edycja JavaScript jest nieco bardziej zaawansowana.

c) Ostrożność i metoda prób i błędów

• Edytuj małymi krokami: Zmieniaj jedną rzecz naraz, zapisuj, przesyłaj i sprawdzaj, czy działa.
• Komentarze w kodzie: Jeśli zmienisz coś ważnego w HTML, możesz dodać komentarz, aby pamiętać, co zrobiłeś (jest widoczny tylko w kodzie, nie na stronie):

W HTML: <h2>Wielkie Wyprzedaże!</h2>     <!– zmieniono poziom nagłówka –>

W CSS: .header { background-color: #000080; } 

/* Zmieniono kolor tła nagłówka na granatowy */

d) Podstawy CSS: Jak działają kaskadowe arkusze stylów?

Właściwości: To, co zmieniasz (np. color, font-size, background-color, margin, padding).

Wartości: Jak zmieniasz (np. blue, 48px, #ff6600).

Jeśli chcesz zmienić kolor tekstu w paragrafie, znajdź w pliku CSS selektor odpowiadający za paragrafy (np. p lub jakąś klasę na przykład .main-text) i zmień wartość właściwości color.

e) Responsywność strony (Mobile-Friendly)

11. Podsumowanie: HTML i CSS to fundament Internetu

Niezależnie od tego, czy strona jest prostym landing page’em, czy gigantycznym sklepem internetowym opartym na WordPressie, każda z nich na samym końcu składa się z tych samych podstawowych elementów:

• HTML: Struktura i treść.
• CSS: Wygląd i styl.
• JavaScript: Interaktywność (jeśli jest).
• PHP/Python/Ruby/inne języki serwerowe: Logika po stronie serwera (w przypadku CMS-ów i dynamicznych stron).
• MySQL/PostgreSQL/inne bazy danych: Przechowywanie danych (w przypadku CMS-ów).

Jeśli Twoja strona jest zbudowana wyłącznie w „czystym” kodzie – HTML i CSS. czyni ją to szybką, bezpieczną i daje Ci pełną kontrolę nad jej zawartością i wyglądem. Z narzędziami, które opisałem, jesteś w stanie samodzielnie wprowadzać wiele zmian, osiągając niezależność i oszczędzać czas oraz pieniądze. Nauka podstaw HTML i CSS to naprawdę bardzo przydatna umiejętność w dzisiejszym, cyfrowym świecie.

Odbierz darmowy PDF

Chętnie dzielimy się wiedzą. Aby Ci to ułatwić, wpisz swój adres e-mail, a otrzymasz wersję PDF gotową do druku lub czytania offline. Nigdy nie otrzymasz od nas żadnego spamu! Tutaj możesz zapoznać się z naszą Polityką Prywatności.

Aby wypełnić ten formularz, włącz obsługę JavaScript w przeglądarce.

Wpisz swój adres e-mail *

zgody swój adres

Wymagane zgody marketingowe *

• Akceptuję Politykę Prywatności i wyrażam zgodę na przetwarzanie moich danych w celu przesłania darmowego poradnika PDF. Chcę otrzymywać newsletter na temat nowych technologii. (w każdej chwili możesz zrezygnować)

Pobierz

Udostępnij i podziel się treścią: