Pierwsze Kroki z HTML

Witaj w pierwszej lekcji HTML.

Dzisiaj zaczynamy od zera.

Bez frameworków.

Bez JavaScriptu.

Bez skomplikowanych narzędzi build.

Tylko jeden prosty plik HTML i przeglądarka.

Pięknie.

Podejrzanie prosto.

Czego Się Nauczysz

W tej lekcji nauczysz się:

czym jest HTML;
jak wygląda plik HTML;
jak stworzyć pierwszą stronę webową;
jak otworzyć ją w przeglądarce;
jak działają nagłówki i akapity;
dlaczego HTML jest strukturą każdej strony internetowej.

Czym Jest HTML?

HTML oznacza:

HyperText Markup Language

Brzmi bardzo poważnie.

Ale idea jest prosta:

HTML opisuje strukturę strony webowej.

Mówi przeglądarce, co oznacza każda część strony.

Na przykład:

To jest nagłówek.
To jest akapit.
To jest link.
To jest obraz.

HTML nie służy głównie do robienia rzeczy pięknymi.

To robi głównie CSS.

HTML nie służy głównie do interakcji.

To robi głównie JavaScript.

HTML to szkielet.

Bez niego strona nie ma struktury.

A strona bez struktury jest jak szafka składana o północy bez instrukcji.

Możliwe, ale niebezpieczne.

Stwórz Folder do Ćwiczeń

Otwórz terminal i stwórz folder do ćwiczeń HTML:

mkdir -p ~/html-practice
cd ~/html-practice

Teraz stwórz plik index.html:

touch index.html

Otwórz go w edytorze.

Na przykład, jeśli używasz VS Code:

code index.html

Możesz użyć dowolnego edytora.

Najważniejsze, żeby plik nazywał się:

index.html

To popularna nazwa głównej strony witryny.

Twoja Pierwsza Strona HTML

Dodaj ten kod do index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Moja Pierwsza Strona HTML</title>
</head>
<body>
  <h1>Cześć, HTML!</h1>
  <p>To jest moja pierwsza strona webowa.</p>
</body>
</html>

Zapisz plik.

Gratulacje.

Napisałeś swoją pierwszą stronę HTML.

Bez fajerwerków.

Ale przeglądarka jest gotowa.

Otwórz Stronę w Przeglądarce

Możesz otworzyć plik bezpośrednio w przeglądarce.

Znajdź plik i otwórz go.

Albo z terminala, jeśli system to obsługuje:

xdg-open index.html

Powinieneś zobaczyć:

Cześć, HTML!
To jest moja pierwsza strona webowa.

Przeglądarka czyta HTML i zamienia go w stronę webową.

To podstawowa magia.

Nie czarna magia.

Po prostu magia przeglądarki.

Zrozumienie Kodu

Spójrzmy na stronę kawałek po kawałku.

Ta linia mówi przeglądarce, że to dokument HTML:

<!DOCTYPE html>

Ta linia otwiera dokument HTML:

<html lang="pl">

Ta część zawiera informacje o stronie:

<head>
  <meta charset="UTF-8">
  <title>Moja Pierwsza Strona HTML</title>
</head>

title pojawia się w karcie przeglądarki.

Ta część zawiera widoczną treść:

<body>
  <h1>Cześć, HTML!</h1>
  <p>To jest moja pierwsza strona webowa.</p>
</body>

Wszystko wewnątrz body jest tym, co użytkownik widzi na stronie.

Nagłówki i Akapity

Tag h1 tworzy główny nagłówek:

<h1>Cześć, HTML!</h1>

Tag p tworzy akapit:

<p>To jest moja pierwsza strona webowa.</p>

Tagi HTML zwykle występują parami:

<p>Tag otwierający, treść, tag zamykający.</p>

Tag otwierający to:

<p>

Tag zamykający to:

</p>

Slash / oznacza, że element się kończy.

HTML lubi, gdy rzeczy są poprawnie zamknięte.

W przeciwieństwie do niektórych ludzi z kartami w przeglądarce.

Zmień Treść

Teraz zmień swoją stronę:

<body>
  <h1>Moja Pierwsza Strona</h1>
  <p>Cześć! Uczę się HTML krok po kroku.</p>
  <p>Ta strona jest prosta, ale prawdziwa.</p>
</body>

Zapisz plik.

Odśwież przeglądarkę.

Powinieneś zobaczyć nowy tekst.

To podstawowy workflow:

edytuj plik
zapisz plik
odśwież przeglądarkę
zobacz wynik

Proste.

Uczciwe.

Bez tajemniczego błędu build z innej planety.

Opcjonalnie: Uruchom Stronę przez Caddy

Bezpośrednie otwieranie pliku jest w porządku.

Ale możesz też serwować folder jak małą lokalną stronę.

Jeśli masz Caddy, uruchom to w ~/html-practice:

caddy file-server --listen :8080

Potem otwórz:

http://localhost:8080

To przydatne, bo bardziej przypomina działanie prawdziwych stron.

Twój komputer staje się małym serwerem webowym.

Bardzo małym.

Bardzo dumnym.

Częste Błędy

Brak Zapisu Pliku

Jeśli zmieniasz plik, ale przeglądarka się nie zmienia, najpierw zapisz plik.

Przeglądarka nie czyta w myślach.

HTML też nie.

Złe Rozszerzenie Pliku

To jest poprawne:

index.html

To nie jest to samo:

index.txt
index.html.txt

Plik powinien kończyć się na .html.

Brak Tagów Zamykających

To jest lepsze:

<p>Cześć świecie.</p>

To jest bałagan:

<p>Cześć świecie.

Przeglądarki dużo wybaczają, ale nie nadużywaj ich dobroci.

Cierpliwa przeglądarka nie jest wymówką dla chaotycznego HTML.

Praktyka

Stwórz stronę z:

jednym głównym nagłówkiem;
dwoma akapitami;
swoim imieniem albo pseudonimem;
jednym zdaniem o tym, dlaczego chcesz uczyć się HTML.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>O Mnie</title>
</head>
<body>
  <h1>O Mnie</h1>
  <p>Cześć, mam na imię Viktor.</p>
  <p>Uczę się HTML, ponieważ chcę budować strony internetowe.</p>
</body>
</html>

Zmień tekst na swój.

Nie tylko kopiuj.

HTML lepiej wchodzi, kiedy palce trochę cierpią.

Mini Wyzwanie

Stwórz nowy plik:

touch about.html

W środku stwórz drugą stronę z:

tytułem w karcie przeglądarki;
nagłówkiem h1;
trzema akapitami;
jednym zdaniem: “To jest moja druga strona HTML.”

Otwórz ją w przeglądarce.

Właśnie stworzyłeś więcej niż jedną stronę HTML.

Niebezpieczny postęp.

Podsumowanie

Dzisiaj nauczyłeś się, że:

HTML oznacza HyperText Markup Language;
HTML opisuje strukturę strony webowej;
plik HTML zwykle kończy się na .html;
index.html często jest stroną główną;
head zawiera informacje o stronie;
body zawiera widoczną treść;
h1 tworzy główny nagłówek;
p tworzy akapit;
podstawowy workflow to edytuj, zapisz, odśwież.

Stworzyłeś swoją pierwszą stronę webową.

Mała strona.

Duży początek.

Następna Lekcja

W następnej lekcji dokładniej poznamy strukturę dokumentu HTML.

Zrozumiemy DOCTYPE, html, head, body, meta i dlaczego przeglądarki doceniają dobrą strukturę.