Lekcja 1

Lekcja 1: Podstawy HTML – Twój pierwszy krok do dominacji w internecie (Teraz z dodatkiem serwera Caddy!)

Witaj, przyszły mistrzu internetu! Dziś zagłębimy się w cudowny świat HTML – sekretny składnik, który kryje się za każdą stroną internetową. Stworzysz swoją pierwszą stronę (tak, serio!), a jeśli poczujesz się pewnie, pokażemy ci, jak hostować ją lokalnie za pomocą Caddy. Ale spokojnie, Caddy nie jest wymagany do nauki HTML – jest tu tylko po to, żebyś wyglądał na jeszcze większego kozaka. Gotowy? No to zaczynamy!

Krok 1: Czym jest HTML?

HTML (Hypertext Markup Language) to kręgosłup każdej strony internetowej. To język, który mówi przeglądarkom, jak wyświetlać zawartość, taką jak tekst, obrazy i linki. Myśl o HTML jak o przepisie na stronę: dodajesz składniki (treść), a HTML mówi przeglądarce, jak je ładnie „ugotować”.

Teraz, kiedy wiesz, czym jest HTML, czas pobrudzić sobie ręce i stworzyć stronę!

Krok 2: Pisanie HTML (Wybierz ulubiony edytor tekstu)

Zanim zaczniemy kodowanie, potrzebujesz miejsca, gdzie napiszesz swój HTML. Możesz otworzyć VIM, jeśli czujesz się jak terminalowy ninja, albo użyć VS Code, jeśli wolisz bardziej nowoczesne narzędzie. Tak naprawdę, każdy edytor tekstu się nada – nawet Notatnik, jeśli chcesz poczuć nostalgię (ale dla własnego zdrowia psychicznego wybierz coś z podświetlaniem składni).

Oto podstawowa struktura dokumentu HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Moja pierwsza strona</title>
</head>
<body>
    <h1>Cześć, świecie!</h1>
    <p>Patrzcie, piszę kod i hostuję stronę jak prawdziwy profesjonalista!</p>
</body>
</html>

Co tu się dzieje?

<!DOCTYPE html>: Informuje przeglądarkę, że dokument jest w HTML5.
<html>: Jak śpiwór dla całego twojego kodu. Wszystko ląduje w środku.
<head>: Miejsce na nudne, techniczne informacje (np. tytuł strony).
<title>: To, co pojawi się na karcie przeglądarki.
<body>: Tu znajdzie się cała widoczna zawartość – tekst, obrazy, cokolwiek wymyślisz.

Masz już swoją pierwszą stronę, teraz podkręcimy to i zhostujemy ją lokalnie!

Krok 3: Instalacja Caddy (Bo jesteś kozakiem!)

Dlaczego Caddy?

Nie musisz używać Caddy do nauki HTML, ale to fajny sposób, żeby zobaczyć swoją stronę w sieci lokalnej. Traktuj to jako ostatni szlif, który dodaje +10 do twojej programistycznej reputacji. No i jest niesamowicie prosty w konfiguracji.

Instalacja Caddy na Ubuntu

Zaktualizuj system:

sudo apt update && sudo apt upgrade -y

Zainstaluj Caddy:

Po prostu uruchom tę komendę:

sudo apt install caddy

Sprawdź, czy działa:

caddy version

Jeśli widzisz numer wersji – bingo, działa!

Instalacja Caddy na Arch Linux

Zaktualizuj system:

sudo pacman -Syu

Zainstaluj Caddy:

sudo pacman -S caddy

Sprawdź instalację:

caddy version

Super! Teraz Caddy działa również na Arch Linux. Pora go użyć do hostowania twojej strony.

Krok 4: Hostowanie swojej pierwszej strony przez Caddy

Stwórz katalog na plik HTML:

mkdir ~/my-website
cd ~/my-website

Stwórz swój pierwszy plik HTML:

Zapisz poniższy kod jako index.html w folderze ~/my-website:

<!DOCTYPE html>
<html>
<head>
    <title>Moja pierwsza strona na Caddy</title>
</head>
<body>
    <h1>Witaj na mojej pierwszej stronie</h1>
    <p>Ta strona jest hostowana przez Caddy. Jakie to epickie!</p>
</body>
</html>

Uruchom Caddy:

Przejdź do folderu ze stroną i uruchom:

caddy file-server --listen :8080

Caddy teraz hostuje twoją stronę na porcie 8080. Sprawdźmy to!

Otwórz stronę:

Otwórz przeglądarkę i przejdź pod adres http://localhost:8080. Powinna się pojawić twoja pierwsza strona. Niezła robota!

Krok 5: Twoje zadanie – Stwórz i zhostuj własną stronę

Teraz czas na twój błysk talentu. Stwórz swoją stronę i zhostuj ją przez Caddy. Dodaj:

Gruby nagłówek z twoim imieniem.
Akapit, w którym wyjaśnisz, dlaczego uczysz się HTML (żeby rządzić internetem, oczywiście).
Link do swojej ulubionej strony (bo dlaczego by nie?).

Oto przykład na start:

<!DOCTYPE html>
<html>
<head>
    <title>Witaj na mojej super-stronie</title>
</head>
<body>
    <h1>Cześć, jestem [Twoje imię]</h1>
    <p>Uczę się HTML, żeby stworzyć coś wielkiego (albo przynajmniej nie rozwalić swojego własnego serwisu).</p>
    <a href="https://www.example.com">Zobacz moją ulubioną stronę!</a>
</body>
</html>

Ponownie uruchom serwer Caddy:

caddy file-server --listen :8080

Przejdź pod adres http://localhost:8080 i podziwiaj efekty. Właśnie stworzyłeś i zhostowałeś swoją pierwszą stronę!

Podsumowanie:

Opanowałeś podstawy HTML i stworzyłeś swoją pierwszą stronę internetową.
Zainstalowałeś i użyłeś Caddy, żeby hostować stronę lokalnie (bo dlaczego by nie pokazać, jak bardzo jesteś super?).
Pamiętaj, Caddy to tylko dla zabawy – nie jest konieczny do nauki HTML. Jest tutaj, żeby dodać trochę stylu.

W następnym lekcji nauczymy się jeszcze więcej, żeby twoje strony wyglądały jeszcze lepiej, od formatowania tekstu po listy. Na razie ciesz się swoją lokalnie hostowaną stroną!