Zadanie 2: Budujemy Treść (Znaczniki HTML)

Wstęp

Masz już szkielet strony, ale jest on pusty. Czas wypełnić go treścią! HTML oferuje mnóstwo znaczników, które pozwalają formatować tekst, tworzyć listy czy wstawiać zdjęcia.

Cel zadania

Stworzenie prostej strony internetowej "O mnie" lub o swoim hobby, wykorzystującej poznane znaczniki do formatowania treści.

Nowe znaczniki

1. Nagłówki (`<h1>` do `<h6>`)

Służą do tworzenia tytułów i śródtytułów. <h1> to najważniejszy nagłówek (tytuł strony), a <h6> najmniej ważny.

<h1>Główny tytuł</h1>
<h2>Podtytuł sekcji</h2>
<h3>Mniejszy nagłówek</h3>

2. Formatowanie tekstu

<p> - Paragraf (akapit tekstu).
<b> lub <strong> - Pogrubienie. <strong> ma też znaczenie semantyczne ("ważny tekst").
<i> lub <em> - Kursywa. <em> to "emfa" (nacisk).
<u> - Podkreślenie.
<br> - Pojedyncze łamanie linii (nowa linijka bez nowego akapitu). Ten znacznik nie ma zamknięcia! (tzw. self-closing).

<p>To jest <strong>bardzo ważny</strong> tekst, a to jest <em>tylko wyróżnienie</em>.</p>

3. Listy

<ul> (Unordered List) - Lista punktowana (kropki).
<ol> (Ordered List) - Lista numerowana (1, 2, 3...).
<li> (List Item) - Pojedynczy element listy.

<h3>Moje ulubione owoce:</h3>
<ul>
    <li>Jabłko</li>
    <li>Banan</li>
</ul>

<h3>Kroki do sukcesu:</h3>
<ol>
    <li>Wstań rano</li>
    <li>Ucz się HTML</li>
</ol>

4. Obrazy (`<img>`)

Obrazki ożywiają stronę. Znacznik <img> też nie ma zamknięcia.

<img src="nazwa-pliku.jpg" alt="Opis obrazka">

src (source) - ścieżka do pliku z obrazkiem (może być lokalny plik lub link z internetu).
alt (alternative text) - tekst alternatywny. Wyświetli się, gdy obrazek się nie załaduje, oraz jest czytany przez czytniki dla niewidomych. Ważne dla dostępności!

Zadanie do wykonania

Utwórz folder zadanie2 (lub pracuj w tym samym co poprzednio, tworząc nowy plik).
Stwórz plik hobby.html.
Uzupełnij standardowy szkielet HTML5 (pamiętasz z Zadania 1?).
W sekcji <body> stwórz stronę o swoim hobby (np. gry, sport, gotowanie).
Strona musi zawierać:
- Jeden nagłówek <h1> z nazwą hobby.
- Przynajmniej jeden nagłówek <h2> dla sekcji (np. "Dlaczego to lubię?").
- Dwa akapity tekstu (<p>) z użyciem pogrubienia (<strong>) i kursywy (<em>).
- Listę punktowaną (<ul>) z np. cechami tego hobby lub potrzebnym sprzętem.
- Jeden obrazek (<img>) z internetu (skopiuj adres grafiki z Google Grafika). Pamiętaj o atrybucie alt!

Przykład rozwiązania

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moje Hobby: Rower</title>
</head>
<body>
    <h1>Jazda na rowerze</h1>
    
    <p>Jazda na rowerze to <strong>świetny sposób</strong> na spędzanie wolnego czasu.</p>
    
    <h2>Dlaczego warto?</h2>
    <ul>
        <li>Poprawia kondycję</li>
        <li>Pozwala zwiedzać okolicę</li>
        <li>Jest ekologiczna</li>
    </ul>

    <img src="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg" alt="Rowerzysta w lesie" width="400">
</body>
</html>

HTML: Znaczniki i Treść