Podstawowa struktura kodu dokumentu HTML.

I. Wprowadzenie do HTML

1. Co to jest HTML?

  • HTML (HyperText Markup Language) to podstawowy język używany do tworzenia stron internetowych. Każda strona internetowa zbudowana jest na bazie HTML, który definiuje jej strukturę.
  • HTML składa się z znaczników (tagów), które otaczają treść i opisują, jak przeglądarka powinna ją wyświetlić.
  • Ważne jest zrozumienie, że HTML nie jest językiem programowania, ale językiem opisu treści. HTML jedynie „opisuje” elementy na stronie (np. nagłówki, paragrafy, obrazy).

II. Podstawowa struktura dokumentu HTML

Każdy dokument HTML musi mieć określoną strukturę, która pozwala przeglądarce prawidłowo wyświetlać stronę. W strukturze tej znajdziemy kilka kluczowych elementów.

1. Deklaracja <!DOCTYPE html>

  • <!DOCTYPE html> to deklaracja typu dokumentu. Informuje przeglądarkę, że dokument jest w standardzie HTML5.
  • Zawsze powinna znajdować się na początku dokumentu. Jest to obowiązkowy element każdego pliku HTML.

Przykład:

<!DOCTYPE html>

2. Znacznik <html>

  • <html> oznacza początek dokumentu HTML. Otwiera sekcję, w której znajdzie się cała zawartość strony.
  • </html> zamyka dokument HTML.

Przykład:

<html>
<!-- Cała zawartość strony -->
</html>

3. Sekcja <head>

  • <head> to część dokumentu, która zawiera metadane strony. Metadane nie są wyświetlane użytkownikowi, ale są kluczowe dla działania strony oraz dla przeglądarki.
  • W sekcji <head> umieszcza się m.in.:
  • Kodowanie znaków (np. UTF-8) – umożliwia poprawne wyświetlanie polskich znaków.
  • Tytuł strony – wyświetlany w karcie przeglądarki.
  • Informacje o responsywności strony – np. dla urządzeń mobilnych.

Przykład:

<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>
</head>
  • <meta charset="UTF-8"> – ustawia kodowanie znaków, co pozwala na poprawne wyświetlanie znaków specjalnych (np. polskich liter).
  • <title> – tytuł strony wyświetlany na karcie przeglądarki.

4. Sekcja <body>

  • <body> to część dokumentu, która zawiera treści wyświetlane użytkownikowi. To tutaj umieszcza się wszystko, co widzi użytkownik na stronie – teksty, obrazy, linki, itp.
  • Każdy dokument HTML musi mieć sekcję <body>, bo to ona definiuje widoczną zawartość.

Przykład:

<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest mój pierwszy dokument HTML.</p>
</body>

5. Znaczniki otwierające i zamykające

  • Większość znaczników HTML ma otwierającą i zamykającą wersję:
  • Otwierający: <tag>
  • Zamykający: </tag>
  • Przykład dla paragrafu: <p>Treść</p>
  • Znaczniki muszą być poprawnie zagnieżdżone i zamknięte w odpowiedniej kolejności. Niewłaściwa struktura może spowodować błędy w wyświetlaniu strony.

III. Część praktyczna – Tworzenie podstawowego dokumentu HTML

Przykładowy kod dokumentu HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest przykładowy dokument HTML.</p>
</body>
</html>

Opis kodu:

  • Deklaracja <!DOCTYPE html>: Informuje przeglądarkę, że używamy standardu HTML5.
  • <html lang="pl">: Otwiera dokument HTML i definiuje, że jego język to polski.
  • Sekcja <head>: Zawiera metadane, w tym kodowanie znaków i tytuł strony.
  • Sekcja <body>: Zawiera widoczną treść – nagłówek i paragraf.

IV. Szczegóły techniczne znacznika <meta charset="UTF-8">

  • Kodowanie znaków w dokumencie HTML to bardzo ważna kwestia. Znacznik <meta charset="UTF-8"> ustawia kodowanie na UTF-8, co pozwala na poprawne wyświetlanie polskich liter oraz innych znaków spoza standardowego alfabetu łacińskiego.
  • Dlaczego UTF-8? Jest to najczęściej używane kodowanie znaków na stronach internetowych, ponieważ obsługuje szeroką gamę znaków z różnych języków.

V. Ćwiczenia

Ćwiczenie 1: Tworzenie podstawowego dokumentu HTML

  • Uczniowie tworzą nowy plik HTML, który zawiera wszystkie podstawowe elementy:
  • Deklarację <!DOCTYPE html>
  • Znaczniki <html>, <head>, <body>
  • Wewnątrz <head> – kodowanie znaków i tytuł strony.
  • Wewnątrz <body> – prosty nagłówek i jeden paragraf tekstu.

Ćwiczenie 2: Edycja i poprawa struktury HTML

  • Popraw poniższy kod:
<!DOCTYPE html>
<html>
<head>
<meta chaset="UTF-8">
<title>Moja strona</title>
<head>

<body>
<h2>Witaj na mojej stronie</h1>

<p>To jest przykładowy tekst</p>

<p>Oto lista rzeczy do zrobienia:
    <ul>
        <li>Nauczyć się HTML
        <li>Stworzyć stronę internetową
        <li>Opanować CSS
    </ol>

<p>Zapraszamy do kontaktu!</p>

</body>
</html>

Ćwiczenie 3: Stworzenie listy z rzeczami do zrobienia

Zadanie: Stwórz od podstaw dokument HTML, który zawiera uporządkowaną listę rzeczy do zrobienia (np. nauka HTML, CSS, JavaScript). Dodaj co najmniej 5 elementów do listy. Upewnij się, że lista jest poprawnie zagnieżdżona i używa odpowiednich znaczników.

Wskazówka: Pamiętaj, że lista uporządkowana (numerowana) powinna używać znacznika <ol>, a każdy element listy musi być wewnątrz znacznika <li>.

Ćwiczenie 4: Dodanie meta tagów i sekcji <head>

Zadanie: Stwórz nowy dokument HTML i zbuduj pełną strukturę sekcji <head>, zawierającą:

  • tytuł strony,
  • meta tagi informujące o kodowaniu znaków, autorze, opisie strony oraz słowach kluczowych.
    Zadanie obejmuje dodanie co najmniej czterech różnych meta tagów.

Wskazówka: Upewnij się, że każdy meta tag jest poprawnie zapisany, np.

<meta charset="UTF-8">
<meta name="description" content="Opis twojej strony">

Ćwiczenie 5: Napraw błędy w strukturze HTML i dodaj link

Zadanie: Napisz od podstaw dokument HTML z nagłówkiem, kilkoma akapitami tekstu oraz listą rzeczy do zrobienia. Upewnij się, że wszystkie znaczniki są poprawnie otwierane i zamykane. Na końcu strony dodaj sekcję "Kontakt", w której znajdzie się link z adresem e-mail, umożliwiający wysłanie wiadomości.

Wskazówka: Użyj znacznika <a> do utworzenia klikalnego linku e-mail, np.

<a href="mailto:example@example.com">Wyślij wiadomość</a>

Ćwiczenie 6: Dodawanie nagłówków i podziału treści

Zadanie: Stwórz od początku dokument HTML, który zawiera co najmniej trzy sekcje tematyczne. Każda sekcja powinna mieć własny nagłówek (użyj nagłówków od <h1> do <h3>). W jednej z sekcji umieść listę, w innej paragraf tekstu. Dodaj także link do zewnętrznej strony.

Wskazówka: Struktura dokumentu powinna być czytelna i podzielona na sekcje tematyczne. Pamiętaj, że znaczniki nagłówków mają hierarchię, a link zewnętrzny tworzymy przy użyciu znacznika <a href="URL">.