Twój pierwszy krok w świecie kodowania: jak stworzyć prostą stronę w HTML
Pierwsza strona w HTML: podstawy struktury
Tworzenie strony HTML polega na używaniu tagów (znaczników), które przeglądarka internetowa interpretuje jako polecenia, co ma wyświetlić. Każda podstawowa strona HTML ma stałą, wymaganą strukturę. Poniżej znajdziesz przykład kodu oraz szczegółowe wyjaśnienie każdej jego linii.
Przykład podstawowej strony HTML:
| Źródło: | Nazwa: | Podgląd: |
|---|---|---|
| Centrum Pobierania | post_30pl | HTML |
Wyjaśnienie każdej linii kodu
| <!DOCTYPE html> | Deklaracja typu dokumentu. Musi być zawsze pierwsza. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. |
| <html lang="pl"> | Główny znacznik strony. Obejmuje całą treść. Atrybut lang="pl" informuje o języku treści (polski). |
| <head> | Sekcja nagłówkowa. Zawiera metadane (informacje o stronie) ważne dla przeglądarki i wyszukiwarek. |
| <meta charset="UTF-8"> | Określa kodowanie znaków, kluczowe dla poprawnego wyświetlania polskich liter (np. ą, ć, ł). |
| <meta name="viewport" ...> | Ustawienie kluczowe dla responsywności, zapewniające skalowanie na urządzeniach mobilnych. |
| <meta name="description" ...> | Opis strony używany przez wyszukiwarki w wynikach. |
| <meta name="author" ...> | Określa autora lub twórcę strony. |
| <link rel="canonical" ...> | Znacznik kanoniczny. Wskazuje preferowany adres URL dla SEO. (Szczegóły poniżej). |
| <title>...</title> | Tytuł strony, pojawia się na karcie przeglądarki i jest kluczowy dla SEO. |
| <body> | Ciało dokumentu. Zawiera całą widoczną treść strony. |
| <h1>...</h1> | Nagłówek pierwszego stopnia. Najważniejszy tytuł na stronie, zazwyczaj jeden na dokument. |
| <h2>...</h2> i <h3>...</h3> | Nagłówki niższego rzędu, służące do strukturyzowania treści. |
| <p>...</p> | Akapit tekstu. Podstawowy znacznik do oznaczania bloków tekstu. |
| <ul>...</ul> | Lista nieuporządkowana (punktory). |
| <li>...</li> | Element listy, musi znajdować się wewnątrz <ul> lub <ol>. |
| <a>...</a> | Znacznik hiperłącza (kotwicy). Używany do tworzenia linków. |
| href="..." | Atrybut znacznika <a> określający adres URL docelowej strony. |
| target="_blank" | Atrybut znacznika <a> otwierający link w nowej karcie. |
Jak dodać link (hiperłącze)
Kluczowym elementem każdej strony jest możliwość przejścia do innej. Do tego służy znacznik kotwicy, czyli tag <a>.
Używamy atrybutu href, aby określić cel linku, oraz opcjonalnego atrybutu target="_blank", aby link otwierał się w nowej karcie:
<a href="https://www.przykładowadomena.pl" target="_blank">Tekst widoczny dla użytkownika</a>
Ważne metadane i znacznik kanoniczny
Metadane w sekcji <head> są niewidoczne, ale niezbędne dla wyszukiwarek.
| meta name="description" | Krótkie podsumowanie treści, które Google może wyświetlić w wynikach wyszukiwania. |
| meta name="author" | Proste wskazanie twórcy treści. |
Kiedy i jak oznaczyć stronę kanoniczną
Znacznik kanoniczny (<link rel="canonical" href="...">) to instrukcja dla wyszukiwarek, która rozwiązuje problem duplikacji treści.
Używaj go, gdy:
- Ta sama treść jest dostępna pod różnymi adresami URL (np. z parametrami śledzącymi lub różnymi wersjami ścieżki).
- Masz wiele stron z bardzo podobną treścią.
Wskazanie preferowanego adresu URL zapobiega temu, by Google potraktowało te adresy jako duplikaty, co mogłoby obniżyć Twoją pozycję w wynikach.
Składnia: Musisz umieścić go w sekcji <head>, wskazując pełny, preferowany adres:
<link rel="canonical" href="https://www.twojadomena.pl/preferowana-strona.html">
Podsumowanie
Gratulacje! Poznałeś absolutne podstawy HTML: od struktury dokumentu, przez nagłówki, listy i akapity, aż po dodawanie linków i kluczowych metadanych dla SEO. Pamiętaj, że HTML to fundament – do nadania jej stylu (kolory, czcionki, układ) potrzebny będzie CSS.
| Źródło: | Nazwa: | Podgląd: |
|---|---|---|
| Centrum Pobierania | post_30pl | HTML |
👇
▒ Przewodnik po blogu: wszystkie posty o programowaniu w jednym miejscu. ▹ Zobacz