Lekcja 2: Formatowanie tekstu i list – Nadaj swojej stronie trochę struktury (Teraz z serwerem Caddy!)

Lekcja 2

Lekcja 2: Formatowanie tekstu i list – Nadaj swojej stronie trochę struktury (Teraz z serwerem Caddy!)

Witaj ponownie, przyszły mistrzu internetu! Teraz, kiedy rozpocząłeś swoją podróż po HTML, nadszedł czas, by nadać twojej stronie więcej organizacji. Dzisiaj zgłębimy temat nagłówków, akapitów i list, aby dodać twojej stronie porządek. A jak w Lekcji 1, ponownie wykorzystamy Caddy, by uruchomić twoje dzieło. Gotowy, by pokazać światu swój uporządkowany kontent? Zaczynajmy!

Nagłówki: Spraw, aby Twój kontent się wyróżniał

Nagłówki w HTML pełnią funkcję tytułów i podtytułów. Pomagają uporządkować treść i dają odwiedzającym wyobrażenie o tym, co jest najważniejsze. HTML oferuje sześć poziomów nagłówków, od <h1> (najważniejszy) do <h6> (najmniej ważny).

Oto jak wyglądają:

<h1>Główny nagłówek (H1)</h1>
<h2>Podnagłówek (H2)</h2>
<h3>Jeszcze mniejszy podnagłówek (H3)</h3>
<h4>Nagłówek czwartego poziomu (H4)</h4>
<h5>Nagłówek piątego poziomu (H5)</h5>
<h6>Nagłówek szóstego poziomu (H6)</h6>

Zadanie: Wypróbuj swoje nagłówki

Stwórz stronę o swoim ulubionym hobby lub temacie. Użyj różnych nagłówków, aby uporządkować swoje myśli. Pamiętaj, <h1> to główny nagłówek, a <h6> to najmniejszy.

Akapity: Czas pisać!

Znacznik akapitu (<p>) pozwala na dodanie bloków tekstu do twojej strony. To idealny sposób na podzielenie się swoimi genialnymi pomysłami bez przeciążania czytelników.

Przykład:

<p>To jest akapit. Możesz pisać tyle, ile chcesz, a tekst automatycznie się dopasuje do strony. Doskonałe do opowiadań lub wyjaśnień.</p>

Zadanie: Dodaj kilka akapitów

Napisz kilka akapitów o czymś, co lubisz — filmach, książkach, a może ulubionym deserze. To twoja strona, baw się dobrze!

Listy: Zorganizuj swój kontent jak prawdziwy pro

Nieuporządkowane listy (z kropkami)

Nieuporządkowana lista (<ul>) tworzy listę z punktami. Idealna do tworzenia list zadań lub rzeczy, które nie muszą być w określonej kolejności.

Przykład:

<ul>
    <li>Nauczyć się HTML</li>
    <li>Zostać mistrzem web developmentu</li>
    <li>Podbić internet</li>
</ul>

Uporządkowane listy (numerowane kroki)

Uporządkowana lista (<ol>) tworzy listę numerowaną, idealną do kroków, które trzeba wykonać w określonej kolejności.

Przykład:

<ol>
    <li>Obudzić się</li>
    <li>Zrobić kawę</li>
    <li>Zdominować dzień</li>
</ol>

Zadanie: Stwórz swoje listy

Stwórz nieuporządkowaną listę (np. ulubione filmy, jedzenie, czy aktywności) i uporządkowaną listę (np. kroki twojej porannej rutyny). Eksperymentuj!

Zagnieżdżone listy: O krok dalej

Możesz także tworzyć zagnieżdżone listy wewnątrz innych list, aby jeszcze lepiej zorganizować swój kontent.

Przykład:

<ul>
    <li>Rzeczy do nauki:
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Rzeczy do opanowania:
        <ol>
            <li>Kontrola wersji</li>
            <li>Terminal</li>
        </ol>
    </li>
</ul>

Zadanie: Spróbuj zagnieżdżonych list

Stwórz zagnieżdżoną listę swoich celów i podcelów. To jak planowanie życia, tylko dla strony!

Hosting twojej strony z Caddy

Teraz, gdy twoja strona jest ładnie zorganizowana, wykorzystajmy Caddy, aby ją ponownie uruchomić. Postępuj zgodnie z poniższymi krokami, aby pokazać swoje umiejętności HTML światu:

Krok 1: Otwórz terminal

Przejdź do folderu, w którym zapisany jest twój plik HTML:

cd ~/my-website

Krok 2: Uruchom Caddy

Uruchom tę komendę, aby zhostować stronę lokalnie na porcie 8080:

caddy file-server --listen :8080

Krok 3: Obejrzyj swoją stronę

Otwórz przeglądarkę i wejdź na http://localhost:8080, aby zobaczyć swoją nową, pięknie zorganizowaną stronę. Podziwiaj cały ten porządek!

Podsumowanie:

W tej lekcji nauczyłeś się, jak:

  • Używać nagłówków, aby uporządkować kontent.
  • Pisać akapity, aby dodać treść.
  • Tworzyć nieuporządkowane (z punktami) i uporządkowane (numerowane) listy.
  • Tworzyć zagnieżdżone listy do bardziej złożonego kontentu.

Uruchomiłeś także swoją zaktualizowaną stronę przy pomocy Caddy, więc teraz możesz pokazać swoją schludnie uporządkowaną stronę całemu światu! W następnej lekcji dodamy trochę wizualnej magii, korzystając z obrazków i linków, aby twoja strona stała się jeszcze bardziej interaktywna. Zostań z nami!

HTML  Początkujący  Web Design  Caddy 

Zobacz też