Witaj na mojej stronie!

To jest mój pierwszy akapit.

Teraz, gdy masz już kod, czas zobaczyć go w akcji. Oto jak zapisać i otworzyć swój pierwszy plik HTML:

1. Otwórz edytor tekstu: Użyj Notatnika, TextEdit lub wybranego edytora kodu.
2. Wklej kod: Skopiuj powyższy kod i wklej go do pustego pliku.
3. Zapisz plik: Wybierz "Zapisz jako..." (lub "Save As...").
4. Nadaj nazwę i rozszerzenie: Nazwij plik np. `index.html` (nazwa `index` jest standardowa dla strony głównej) i koniecznie upewnij się, że ma rozszerzenie `.html`. W Notatniku upewnij się, że w polu "Typ pliku" wybrano "Wszystkie pliki (*.*)", a nie "Dokumenty tekstowe (*.txt)".
5. Otwórz w przeglądarce: Znajdź zapisany plik na swoim komputerze i kliknij go dwukrotnie. Powinien otworzyć się w domyślnej przeglądarce internetowej, pokazując Twoją pierwszą stronę!

Kluczowe znaczniki HTML: budujemy zawartość strony

Po opanowaniu podstawowego szkieletu, nadszedł czas na poznanie najważniejszych znaczników, które pozwolą Ci wypełnić stronę treścią. To one są klockami Lego, z których zbudujesz swoją witrynę.

Nagłówki: od `` do ``

Nagłówki służą do strukturyzowania treści i nadawania jej hierarchii. `

` to najważniejszy nagłówek na stronie (zazwyczaj jest tylko jeden), a `

` jest najmniej ważny. Używaj ich zgodnie z logiką, aby czytelnicy (i wyszukiwarki!) mogli łatwo zrozumieć, o czym jest dany fragment tekstu.

Główny tytuł strony

Podtytuł sekcji

Mniejszy nagłówek

Jeszcze mniejszy nagłówek

Podtytuł w ramach podtytułu

Najmniejszy nagłówek

Akapity: `

` Znacznik `

` służy do tworzenia akapitów tekstu. To podstawowy sposób na wyświetlanie bloków tekstu na stronie.

To jest pierwszy akapit mojego tekstu. Tutaj mogę umieścić dowolną treść, którą chcę zaprezentować użytkownikom mojej strony.

A to jest drugi akapit. Pamiętaj, aby dzielić tekst na logiczne bloki, co poprawia czytelność.

Linkowanie: ``

Znacznik `` (anchor) służy do tworzenia hiperłączy, które łączą różne strony internetowe lub sekcje w ramach jednej strony. Atrybut `href` jest kluczowy, ponieważ to w nim podajesz adres URL, do którego ma prowadzić link.

Odwiedź Google lub Wikipedię.

Możesz też przejść do sekcji o mnie na tej samej stronie.

Obrazy: ``

Znacznik `` służy do wstawiania obrazów na stronę. Jest to znacznik samodomykający się, co oznacza, że nie potrzebuje tagu zamykającego. Atrybut `src` wskazuje ścieżkę do pliku obrazu, a `alt` jest niezwykle ważny zawiera tekst alternatywny, który wyświetla się, gdy obraz się nie załaduje, a także jest czytany przez czytniki ekranowe dla osób niewidomych i ma znaczenie dla SEO.

Listy: ``, ` ` i ``

HTML oferuje dwa główne typy list: nieuporządkowane (`

`) z punktorami oraz uporządkowane (`

`) z numeracją. Każdy element listy jest oznaczany znacznikiem `
1. ` (list item).

   Moje ulubione owoce (lista nieuporządkowana):

   • Jabłka
   • Banany
   • Truskawki

   Kroki do sukcesu (lista uporządkowana):

   1. Ucz się HTML
   2. Ćwicz regularnie
   3. Twórz projekty

   Przeczytaj również: Aplikacje na smartfonie: Instaluj bezpiecznie! Poradnik Android i iOS.

   Kontenery: `` i `` Znaczniki `` i `` to uniwersalne kontenery, które służą do grupowania innych elementów HTML. Są one niezwykle przydatne, gdy chcesz zastosować style CSS do wielu elementów naraz. Różnica między nimi polega na ich domyślnym zachowaniu: * `` to element blokowy: Zawsze zaczyna się w nowej linii i zajmuje całą dostępną szerokość, jak akapit. Używamy go do grupowania większych sekcji strony. * `` to element liniowy: Nie zaczyna się w nowej linii i zajmuje tylko tyle miejsca, ile potrzebuje jego zawartość, jak pojedyncze słowo w akapicie. Używamy go do stylowania małych fragmentów tekstu wewnątrz bloku. To jest sekcja w divie Ten tekst jest wewnątrz bloku div. Możesz wyróżnić pojedyncze słowa za pomocą span. HTML5: semantyczne znaczniki dla nowoczesnych stron Wraz z pojawieniem się HTML5, wprowadzono wiele nowych, semantycznych znaczników, które mają za zadanie lepiej opisywać strukturę i znaczenie treści na stronie. Dlaczego to takie ważne? Ponieważ ułatwiają one zrozumienie strony zarówno ludziom (kod jest bardziej czytelny), jak i maszynom przeglądarkom, czytnikom ekranowym oraz, co najważniejsze, wyszukiwarkom internetowym, takim jak Google. Używanie semantycznych znaczników to dobra praktyka, która poprawia dostępność i ma pozytywny wpływ na SEO (Search Engine Optimization). Oto kilka kluczowych znaczników semantycznych HTML5: ``: Reprezentuje sekcję wprowadzającą lub grupę elementów nawigacyjnych. Zazwyczaj zawiera logo, tytuł strony, a także nawigację. ``: Definiuje sekcję nawigacyjną, czyli linki do innych części strony lub innych witryn. To idealne miejsce na menu główne. ``: Określa główną zawartość dokumentu. Na stronie powinien być tylko jeden znacznik ``, a jego treść powinna być unikalna dla danej strony. ``: Reprezentuje niezależną, samodzielną treść, która ma sens sama w sobie. Może to być wpis na blogu, artykuł prasowy, komentarz użytkownika itp. ``: Grupuje tematycznie powiązane treści. Myśl o nim jako o ogólnym kontenerze dla fragmentów dokumentu, które mają wspólny temat. ``: Reprezentuje stopkę dokumentu lub sekcji. Zazwyczaj zawiera informacje o autorze, prawa autorskie, linki do polityki prywatności czy dane kontaktowe. Używanie tych znaczników pomaga wyszukiwarkom Google lepiej zrozumieć, jakie są kluczowe sekcje Twojej strony i jaka jest ich rola. Dzięki temu Twoja strona może być lepiej indeksowana i wyświetlana w wynikach wyszukiwania, co jest ogromną korzyścią dla każdego, kto chce, aby jego witryna była widoczna w internecie. Dodajemy styl: krótkie wprowadzenie do CSS Jak już wspomniałem, HTML to struktura, a CSS to wygląd. Chociaż ten przewodnik skupia się na HTML, nie mogę nie wspomnieć o CSS, bo to właśnie on sprawia, że strony internetowe są atrakcyjne wizualnie. CSS pozwala oddzielić prezentację od struktury, co czyni kod bardziej uporządkowanym i łatwiejszym do zarządzania. Dzięki niemu możesz zmieniać kolory, czcionki, rozmiary, marginesy, tła i wiele, wiele więcej. Trzy sposoby na ostylowanie strony Istnieją trzy główne sposoby, aby dodać style CSS do dokumentu HTML: Inline (bezpośrednio w tagu): Style są dodawane bezpośrednio do znacznika HTML za pomocą atrybutu `style`. Jest to najmniej zalecana metoda dla większych projektów, ponieważ miesza strukturę z prezentacją i utrudnia zarządzanie. Ten nagłówek jest niebieski i wyśrodkowany Internal (w sekcji ``): Style są umieszczane w sekcji `` dokumentu HTML, wewnątrz znacznika ``. Jest to lepsze rozwiązanie niż style inline, ale nadal ogranicza style do jednego pliku HTML. body { font-family: Arial, sans-serif; background-color: #f4f4f4; } h1 { color: green; } External (zewnętrzny plik CSS): Jest to najbardziej zalecana i profesjonalna metoda. Style są przechowywane w osobnym pliku z rozszerzeniem `.css` (np. `style.css`), a następnie linkowane do dokumentu HTML za pomocą znacznika `` w sekcji ``. Dzięki temu jeden plik CSS może stylować wiele stron HTML, co ułatwia utrzymanie spójnego wyglądu i zarządzanie zmianami. A w pliku `style.css` (który musi znajdować się w tym samym folderze co `index.html` lub w odpowiedniej ścieżce): css body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #e0f2f7; } h1 { color: #2c3e50; text-align: center; } Praktyczny przykład: zmiana koloru nagłówka i tła Abyś mógł zobaczyć, jak to działa w praktyce, spróbujmy zmienić kolor nagłówka i tło strony, używając zewnętrznego pliku CSS (co jest najlepszą praktyką). 1. Stwórz plik `index.html` z podstawowym szkieletem i nagłówkiem: Strona ze stylami Moja strona z kolorami! Ten tekst będzie miał domyślny kolor, ale tło strony i nagłówek już nie. 2. W tym samym folderze stwórz plik `style.css` i dodaj do niego następujący kod: css body { background-color: #f0f8ff; /* Jasnoniebieskie tło */ font-family: sans-serif; } h1 { color: #8a2be2; /* Fioletowy kolor nagłówka */ text-align: center; } Teraz, otwierając `index.html` w przeglądarce, zobaczysz stronę z jasnoniebieskim tłem i fioletowym, wyśrodkowanym nagłówkiem. To magia CSS! Najczęstsze błędy początkujących: unikaj pułapek Każdy początkujący popełnia błędy, i to jest całkowicie normalne. Ważne jest, aby wiedzieć, na co zwracać uwagę, aby szybko je znajdować i poprawiać. Oto najczęstsze pułapki, w które wpadają osoby rozpoczynające naukę HTML: Niezamykanie tagów: To klasyczny błąd. Zapomnienie o zamykającym znaczniku (np. `` po ``) może sprawić, że strona będzie wyglądać dziwnie lub wcale się nie wyświetli. Zawsze sprawdzaj, czy każdy otwarty tag ma swój odpowiednik zamykający (poza tagami samodomykającymi się, jak `` czy `
   `). Błędy w ścieżkach do plików: Jeśli obrazek się nie wyświetla, a link nie działa, najprawdopodobniej problem leży w atrybucie `src` lub `href`. Sprawdź, czy ścieżka do pliku (np. `obrazek.jpg` lub `strona.html`) jest poprawna i czy plik znajduje się we właściwym miejscu względem Twojego pliku HTML. Brak atrybutu `alt` w ``: Chociaż strona będzie działać bez niego, brak `alt` jest błędem z punktu widzenia dostępności i SEO. Zawsze dodawaj opisowy tekst alternatywny dla każdego obrazka. Używanie nieaktualnych znaczników: HTML ewoluuje. Unikaj znaczników, które są przestarzałe (deprecated), takich jak ``, `` czy ``. Ich funkcje przejęło CSS. Ignorowanie struktury: Nie używaj nagłówków ``-`` tylko do zmiany rozmiaru tekstu. Ich celem jest nadawanie semantycznej struktury dokumentowi. Aby szybko lokalizować błędy, zawsze sprawdzaj swoją stronę w przeglądarce. Jeśli coś wygląda inaczej, niż oczekujesz, otwórz narzędzia deweloperskie przeglądarki (zazwyczaj F12 lub prawy klik i "Zbadaj element"). Zwróć uwagę na konsolę, która często wyświetla komunikaty o błędach. Dodatkowo, istnieje świetne narzędzie online Walidator W3C. Wystarczy wkleić tam swój kod HTML, a on wskaże Ci wszystkie błędy i niezgodności ze standardami. To niezastąpiony pomocnik w utrzymywaniu czystego i poprawnego kodu! Możesz go znaleźć pod adresem: https://validator.w3.org/. Twoja strona jest gotowa: jak ją opublikować? Stworzenie strony na swoim komputerze to jedno, ale prawdziwa satysfakcja przychodzi, gdy Twoja strona jest dostępna dla wszystkich w internecie. Aby to osiągnąć, potrzebujesz domeny (adresu, np. `mojastrona.pl`) i hostingu (miejsca na serwerze, gdzie przechowywane są pliki Twojej strony). Na początku nie musisz jednak za nie płacić! Istnieją darmowe rozwiązania, które idealnie nadają się do publikacji prostych, statycznych stron HTML. Jednym z najlepszych i najpopularniejszych jest GitHub Pages. Oto krok po kroku, jak opublikować swoją pierwszą stronę na GitHub Pages: Załóż konto na GitHub: Jeśli jeszcze go nie masz, zarejestruj się na github.com. To platforma do przechowywania kodu i współpracy, niezwykle popularna w świecie programowania. Stwórz nowe repozytorium: Po zalogowaniu kliknij znak plusa (+) w prawym górnym rogu i wybierz "New repository". Nazwij repozytorium: Nazwa jest kluczowa. Jeśli chcesz, aby Twoja strona była dostępna pod adresem `twojanazwauzytkownika.github.io`, nazwij repozytorium dokładnie tak: `twojanazwauzytkownika.github.io` (np. `lukaszwojcik.github.io`). Jeśli nazwiesz je inaczej, np. `moja-strona`, adres będzie wyglądał tak: `twojanazwauzytkownika.github.io/moja-strona/`. Upewnij się, że repozytorium jest publiczne. Prześlij swoje pliki: Po utworzeniu repozytorium, przejdź do niego i kliknij "uploading an existing file". Przeciągnij i upuść pliki swojej strony (np. `index.html`, `style.css`, `obrazek.jpg`) do okna przeglądarki, a następnie zatwierdź zmiany klikając "Commit changes". Aktywuj GitHub Pages: Przejdź do zakładki "Settings" w swoim repozytorium. Po lewej stronie znajdź "Pages". W sekcji "Build and deployment" wybierz "Deploy from a branch", a następnie w "Branch" wybierz `main` (lub `master`, jeśli tak nazwałeś swoją główną gałąź) i kliknij "Save". Poczekaj i podziwiaj: GitHub Pages potrzebuje kilku minut na zbudowanie i opublikowanie Twojej strony. Po chwili, w sekcji "Pages" pojawi się link do Twojej opublikowanej strony (np. `https://twojanazwauzytkownika.github.io/`). Skopiuj go i otwórz w przeglądarce! Gratulacje! Właśnie opublikowałeś swoją pierwszą stronę internetową. To ogromny krok w Twojej podróży z web developmentem. Pamiętaj, że to dopiero początek, ale masz już solidne podstawy, na których możesz budować dalej.