Pierwsza strona HTML

Lekcja 1.2: Pierwsza strona HTML

Strona główna > Rozdział 1: Wprowadzenie do HTML > Pierwsza strona HTML

Podstawowa Struktura Dokumentu HTML

Każda strona internetowa, niezależnie od jej złożoności, opiera się na fundamentalnej strukturze HTML. Ta struktura, często nazywana "boilerplate", stanowi szkielet, na którym budowana jest cała zawartość strony. Zrozumienie tej struktury jest kluczowe do rozpoczęcia pracy z HTML.

Oto minimalny kod wymagany do stworzenia poprawnego dokumentu HTML5:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tytuł Twojej Strony</title>
</head>
<body>
    <!-- Tutaj umieścisz widoczną zawartość strony -->
    <h1>Witaj na mojej stronie!</h1>
    <p>To jest treść mojej pierwszej strony HTML.</p>
</body>
</html>

Wyjaśnienie Elementów Struktury

<!DOCTYPE html>: Ta deklaracja musi znajdować się na samym początku dokumentu. Informuje przeglądarkę, że strona jest napisana w standardzie HTML5. Nie jest to znacznik HTML, ale instrukcja dla przeglądarki.
<html lang="pl">: Jest to główny element (korzeń) dokumentu HTML. Wszystkie inne elementy muszą znajdować się wewnątrz tego znacznika. Atrybut lang="pl" określa język strony jako polski, co jest ważne dla SEO i narzędzi wspomagających.
<head>: Ta sekcja zawiera metadane dokumentu, czyli informacje o stronie, które nie są bezpośrednio wyświetlane użytkownikowi (z wyjątkiem tytułu). Znajdują się tu m.in. tytuł strony, kodowanie znaków, linki do arkuszy CSS, skryptów JavaScript i inne metainformacje.
<meta charset="UTF-8">: Określa kodowanie znaków używane na stronie. UTF-8 jest standardem obsługującym większość znaków z różnych języków, w tym polskie znaki diakrytyczne (ą, ć, ę, ł, ń, ó, ś, ź, ż). Jest to kluczowe dla poprawnego wyświetlania tekstu.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ten meta tag jest niezbędny do tworzenia responsywnych stron internetowych. Informuje przeglądarkę, jak ma skalować stronę na różnych urządzeniach, zwłaszcza mobilnych. width=device-width ustawia szerokość strony na szerokość ekranu urządzenia, a initial-scale=1.0 ustawia początkowy poziom powiększenia.
<title>Tytuł Twojej Strony</title>: Definiuje tytuł strony, który jest wyświetlany na karcie przeglądarki lub w tytule okna. Jest to również ważny element dla SEO.
<body>: Ta sekcja zawiera całą widoczną zawartość strony internetowej – tekst, obrazy, linki, tabele, formularze itp. Wszystko, co użytkownik widzi w oknie przeglądarki, znajduje się wewnątrz znaczników <body> i </body>.
: Komentarze w HTML pozwalają dodawać notatki do kodu, które są ignorowane przez przeglądarkę. Są przydatne do wyjaśniania fragmentów kodu lub tymczasowego wyłączania jego części.

Tworzenie Pierwszej Strony Krok po Kroku

Otwórz edytor tekstu: Użyj dowolnego edytora tekstu (np. Notatnik, VS Code, Sublime Text, Atom).
Wklej kod struktury: Skopiuj powyższy kod "boilerplate" i wklej go do edytora.
Zmodyfikuj treść: Zmień tekst wewnątrz znaczników <title>, <h1> i <p> na własny.
Zapisz plik: Zapisz plik z rozszerzeniem .html (np. moja-strona.html). Upewnij się, że kodowanie pliku jest ustawione na UTF-8 (większość nowoczesnych edytorów robi to domyślnie).
Otwórz w przeglądarce: Znajdź zapisany plik na dysku i otwórz go za pomocą przeglądarki internetowej (np. Chrome, Firefox, Edge).

Gratulacje! Właśnie stworzyłeś swoją pierwszą stronę HTML.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz prostą stronę HTML zawierającą tytuł "Moje Hobby", nagłówek pierwszego poziomu z tym samym tekstem oraz paragraf opisujący Twoje ulubione zajęcie.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moje Hobby</title>
</head>
<body>
    <h1>Moje Hobby</h1>
    <p>Moim ulubionym zajęciem jest czytanie książek fantastycznych. Pozwala mi to przenieść się do innych światów i rozwijać wyobraźnię.</p>
</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Dodaj drugi paragraf opisujący inne hobby.
Zmień tytuł strony (w sekcji <head>) na "O mnie i moich zainteresowaniach".
Dodaj komentarz w sekcji <body> wyjaśniający, co zawiera strona.
Eksperymentuj z dodaniem nagłówka drugiego poziomu (<h2>) przed drugim paragrafem.

Najczęściej zadawane pytania

Co to jest DOCTYPE?

<!DOCTYPE html> to deklaracja typu dokumentu. Informuje przeglądarkę, że strona jest napisana w standardzie HTML5. Musi być to pierwsza linia kodu w pliku HTML, aby zapewnić poprawne renderowanie strony przez przeglądarkę.

Do czego służy sekcja <head>?

Sekcja <head> zawiera metadane strony, czyli informacje o dokumencie, które nie są bezpośrednio wyświetlane. Obejmuje tytuł strony, kodowanie znaków, linki do CSS i JavaScript oraz inne meta tagi ważne dla przeglądarek i wyszukiwarek.

Dlaczego kodowanie UTF-8 jest ważne?

Kodowanie UTF-8 pozwala na poprawne wyświetlanie szerokiego zakresu znaków, w tym polskich liter (ą, ę, ć itp.) oraz znaków specjalnych z różnych języków. Użycie UTF-8 zapobiega problemom z "krzaczkami" na stronie.

Co oznacza meta tag viewport?

Meta tag viewport kontroluje sposób wyświetlania strony na urządzeniach mobilnych. Ustawienie width=device-width, initial-scale=1.0 zapewnia, że strona dopasuje się do szerokości ekranu urządzenia i nie będzie domyślnie pomniejszona.

Gdzie umieszczać widoczną treść strony?

Cała widoczna treść strony, taka jak tekst, obrazy, linki, tabele i formularze, powinna być umieszczona wewnątrz znaczników <body> i </body>. To właśnie tę część dokumentu HTML przeglądarka renderuje dla użytkownika.