InnoMarts logo
InnoMarts
Fast websites
← Back to course

Struktura Dokumentu HTML

Struktura Dokumentu HTML

Witaj ponownie.

W poprzedniej lekcji stworzyłeś swoją pierwszą stronę HTML.

Teraz zwolnimy i przyjrzymy się strukturze dokładniej.

Bo HTML to nie jest tylko “kilka tagów na stronie”.

Dobry dokument HTML ma jasną strukturę.

A jeśli struktura jest zła, przeglądarka i tak spróbuje ci pomóc.

Ale poleganie na przeglądarce, żeby naprawiała twój chaos, jest jak proszenie kelnera o odbudowę kuchni podczas kolacji.

Możliwe?

Może.

Dobry pomysł?

Nie.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Podstawowa Struktura HTML

Standardowy dokument HTML wygląda tak:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moja Strona</title>
</head>
<body>
  <h1>Witaj</h1>
  <p>To jest moja strona webowa.</p>
</body>
</html>

Ta struktura jest fundamentem prawie każdej strony HTML.

Wygląda niepozornie.

Ale robi ważną pracę.

Jak rama domu.

Niezbyt efektowna.

Bardzo potrzebna.

DOCTYPE

Pierwsza linia to:

<!DOCTYPE html>

Mówi przeglądarce:

Ten dokument używa nowoczesnego HTML.

Dokładniej: mówi przeglądarce, żeby użyła trybu standardowego.

To znaczy, że przeglądarka powinna wyświetlać stronę według nowoczesnych standardów webowych.

Jeśli tego zabraknie, przeglądarka może wejść w dziwne zachowania kompatybilności.

A nikt nie chce, żeby przeglądarka zachowywała się tak, jakby znalazła stary zakurzony podręcznik z 2003 roku.

Więc zostaw to.

Zawsze.

Element html

Po DOCTYPE otwieramy główny element HTML:

<html lang="pl">

I zamykamy go na końcu:

</html>

Wszystko na stronie znajduje się wewnątrz tego elementu.

To korzeń dokumentu.

Duży kontener.

Cyfrowa walizka.

Atrybut lang

Ta część jest ważna:

lang="pl"

Mówi przeglądarkom i technologiom wspomagającym, jakiego języka używa strona.

Dla angielskiego:

<html lang="en">

Dla włoskiego:

<html lang="it">

Dla polskiego:

<html lang="pl">

Dla ukraińskiego:

<html lang="uk">

Dla rosyjskiego:

<html lang="ru">

To pomaga:

Mały atrybut.

Duża użyteczność.

HTML ma wiele takich małych rzeczy.

Drobne szczegóły, które po cichu zapobiegają przyszłemu bólowi.

Element head

Element <head> zawiera informacje o stronie.

Przykład:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moja Strona</title>
</head>

Ta zawartość zwykle nie jest bezpośrednio widoczna na stronie.

Użytkownik nie widzi <head> jako normalnej treści.

Ale przeglądarka go czyta.

<head> jest jak backstage twojej strony.

Niewidoczny dla publiczności.

Wciąż bardzo ważny.

Tag meta charset

Ta linia jest ważna:

<meta charset="UTF-8">

Mówi przeglądarce, jakiego kodowania znaków używać.

Używaj UTF-8.

Obsługuje wiele języków i znaków specjalnych.

Bez niego tekst czasem może wyglądać źle.

Na przykład polskie znaki, cyrylica albo symbole mogą zamienić się w cyfrowe spaghetti.

Więc tak:

<meta charset="UTF-8">

Dodawaj to zawsze.

Twoja przyszła wielojęzyczna strona ci podziękuje.

Cicho.

Ale szczerze.

Tag Viewport

Ta linia też jest ważna:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Pomaga stronie poprawnie wyświetlać się na telefonach i tabletach.

Bez niej mobilne przeglądarki mogą pokazać stronę jak małą desktopową wersję ściśniętą na ekranie telefonu.

Bardzo niewygodne.

Jak czytanie gazety przez dziurkę od klucza.

Tag viewport mówi przeglądarce:

Użyj szerokości urządzenia jako szerokości strony.

To podstawa responsywności.

Nawet jeśli CSS później zajmie się wyglądem, HTML przygotowuje stronę poprawnie.

Najpierw dobra struktura.

Potem ładny layout.

Element title

Element <title> ustawia tytuł w karcie przeglądarki:

<title>Moja Strona</title>

To nie jest to samo co h1.

title pojawia się w karcie przeglądarki, zakładkach i wynikach wyszukiwania.

h1 pojawia się wewnątrz strony.

Przykład:

<title>O Mnie</title>

A w body:

<h1>O Mnie</h1>

Mogą być podobne.

Ale nie są tym samym.

Jedno jest dla przeglądarki i wyszukiwarek.

Drugie jest dla treści strony.

Element body

Element <body> zawiera wszystko, co widoczne na stronie:

<body>
  <h1>Witaj</h1>
  <p>To jest moja strona webowa.</p>
</body>

Nagłówki, akapity, obrazy, linki, listy, formularze — wszystko idzie do body.

Jeśli użytkownik to widzi, prawdopodobnie należy do body.

Body to miejsce, gdzie naprawdę żyje strona.

Head to sala planowania.

Body to scena.

Wcięcia

HTML nie wymaga perfekcyjnych wcięć, żeby działać.

To działa:

<body><h1>Cześć</h1><p>Tekst</p></body>

Ale wygląda brzydko.

I trudniej to czytać.

Lepiej:

<body>
  <h1>Cześć</h1>
  <p>Tekst</p>
</body>

Wcięcia pomagają ludziom zrozumieć strukturę.

Przeglądarki mogą wybaczyć niechlujny HTML.

Ludzie mniej.

Zwłaszcza przyszły ty o 23:47, próbujący zrozumieć własny kod.

Komentarze HTML

Możesz pisać komentarze w HTML:

<!-- To jest komentarz -->

Komentarze nie są widoczne na stronie.

Są przydatne jako notatki:

<!-- Główny nagłówek strony -->
<h1>Witaj</h1>

Nie przesadzaj z komentarzami.

Dobry HTML powinien być zrozumiały sam w sobie.

Komentarze mają wyjaśniać użyteczne rzeczy, nie dekorować stronę jak konfetti.

Stwórz Lepszą Stronę

Otwórz plik index.html z lekcji 1.

Zastąp go tym:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moja Strona do Ćwiczeń HTML</title>
</head>
<body>
  <h1>Moja Strona do Ćwiczeń HTML</h1>
  <p>Ta strona ma czystą strukturę dokumentu HTML.</p>
  <p>Uczę się, jak przeglądarki rozumieją strony webowe.</p>
</body>
</html>

Zapisz plik.

Otwórz albo odśwież go w przeglądarce.

Strona nadal wygląda prosto.

I dobrze.

Dzisiaj nie dekorujemy.

Budujemy szkielet.

Szkielet nie potrzebuje jeszcze kapelusza.

Częste Błędy

Zapomnienie DOCTYPE

Nie zaczynaj od razu od:

<html>

Użyj:

<!DOCTYPE html>
<html lang="pl">

Przeglądarka lubi jasność.

Widoczna Treść w head

To jest błędne:

<head>
  <h1>Cześć</h1>
</head>

Widoczna treść należy do body:

<body>
  <h1>Cześć</h1>
</body>

head jest dla informacji o stronie.

body jest dla widocznej treści.

Brak viewport

Bez tego:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

strona może źle zachowywać się na urządzeniach mobilnych.

Dodaj to teraz.

Nie czekaj, aż twoja strona będzie wyglądała jak znaczek pocztowy na telefonie.

Praktyka

Stwórz nowy plik:

touch structure.html

W środku stwórz pełny dokument HTML z:

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ćwiczenie Struktury</title>
</head>
<body>
  <!-- Główny nagłówek -->
  <h1>Ćwiczenie Struktury HTML</h1>
  <p>Ta strona pomaga mi zrozumieć strukturę HTML.</p>
  <p>Dobra struktura ułatwia czytanie i utrzymanie stron.</p>
</body>
</html>

Otwórz go w przeglądarce.

Potem zmień title i odśwież.

Zobacz, jak zmienia się karta przeglądarki.

Mała rzecz.

Prawdziwy efekt.

Mini Wyzwanie

Stwórz plik:

profile.html

Zbuduj poprawny dokument HTML dla prostej strony profilowej.

Powinien zawierać:

Bez CSS.

Bez JavaScriptu.

Tylko czysty HTML.

Bo zanim założymy stronie kurtkę, musimy mieć kości na właściwym miejscu.

Podsumowanie

Dzisiaj nauczyłeś się, że:

Struktura HTML może wyglądać prosto.

Ale ta prosta struktura jest początkiem każdej dobrej strony.

Następna Lekcja

W następnej lekcji zajmiemy się tekstem, nagłówkami i akapitami.

Nauczymy się organizować treść tak, żeby strona nie wyglądała, jakby ktoś zrzucił słowa z balkonu.