Zadania na lekcje

HTML: Podstawy i Struktura

HTML
Priorytet: Normalny Szkic

Zadanie 1: Witaj Świecie (Podstawy HTML)

Wstęp

HTML (HyperText Markup Language) to szkielet każdej strony internetowej. To on mówi przeglądarce: "to jest nagłówek", "to jest obrazek", a "to jest link". Bez HTML nie ma Internetu.

Cel zadania

Utworzenie pierwszego, poprawnego semantycznie pliku HTML5 oraz zrozumienie zasad nazewnictwa plików w projektach webowych.

Wymagania techniczne

  1. Plik: Utworzenie pliku index.html.
  2. Struktura: Zastosowanie pełnego szkieletu HTML5 (<!DOCTYPE>, <html>, <head>, <body>).
  3. Metadane: Ustawienie kodowania znaków na UTF-8.
  4. Treść: Dodanie nagłówka i akapitu.

Kroki do wykonania

1. Nazewnictwo plików

W świecie stron WWW panują żelazne zasady:

  • Główny plik strony zawsze nazywamy index.html. Dlaczego? Bo serwery automatycznie go szukają, gdy wejdziesz na adres folderu (np. twojastrona.pl/ otworzy twojastrona.pl/index.html).
  • Używamy tylko małych liter.
  • Nie używamy spacji (zamiast moje zdjecie.html użyj moje-zdjecie.html lub moje_zdjecie.html).
  • Rozszerzenie to zawsze .html.

2. Szkielet HTML

Utwórz plik index.html i wpisz ramy dokumentu. Nie martw się, omówimy je za chwilę.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja Pierwsza Strona</title>
</head>
<body>
    
    <!-- Tutaj będzie treść widoczna dla użytkownika -->

</body>
</html>
  • <!DOCTYPE html> - Informuje przeglądarkę, że to nowoczesny HTML5.
  • <html lang="pl"> - Główny kontener. lang="pl" mówi wyszukiwarkom (i czytnikom dla niewidomych), że strona jest po polsku.
  • <head> - "Mózg" strony. Tu są informacje dla przeglądarki (tytuł karty, kodowanie znaków, style). Tego użytkownik nie widzi bezpośrednio na stronie.
  • <body> - "Ciało" strony. Wszystko co tu wpiszesz, wyświetli się w oknie przeglądarki.

3. Dodawanie treści

Wewnątrz znacznika <body> dodaj nagłówek i akapit tekstu.

<body>
    <h1>Witaj w świecie HTML!</h1>
    <p>To jest mój pierwszy poprawny dokument stworzony od zera.</p>
</body>
  • <h1> - Najważniejszy nagłówek na stronie. Powinien być tylko jeden.
  • <p> - Paragraf (akapit) tekstu.

[!IMPORTANT] Commit 1: Utworzenie index.html ze strukturą.

4. Kodowanie znaków (Dlaczego krzaczki?)

Zauważ linię <meta charset="UTF-8"> w sekcji <head>. Gdybyś ją usunął, polskie znaki (ą, ę, ś, ć) mogłyby wyświetlać się jako dziwne symbole (krzaczki). UTF-8 to standard kodowania obsługujący prawie wszystkie języki świata. Zawsze go dodawaj!

Zadanie dla chętnych

Stwórz drugi plik o nazwie kontakt.html. W pliku index.html dodaj link do niego:

<a href="kontakt.html">Przejdź do kontaktu</a>

Sprawdź w przeglądarce, czy kliknięcie przenosi Cię między stronami.