Jak działa internet i twoja pierwsza strona

Dowiesz się, co się dzieje, gdy wpisujesz adres w przeglądarce, i zbudujesz fundament swojej strony.

Co się dzieje, gdy otwierasz stronę

Gdy wpiszesz coś takiego jak www.myschool.com w przeglądarce, dzieje się to:

Przeglądarka wysyła przez internet wiadomość do serwera – komputera, na którym mieszka strona: „Hej, wyślij mi stronę!”
Serwer odpowiada i odsyła pliki – tekst, obrazki, kod.
Przeglądarka rysuje stronę na ekranie z tych plików.

Pliki, które serwer wysyła, są napisane w języku HTML. I tego właśnie się uczysz. Na razie twoja strona nie będzie na serwerze – będzie na twoim komputerze, a wrzucimy ją do internetu w ostatniej lekcji.

Wybierz swój projekt

Zanim napiszesz choć jedną linijkę, zdecyduj, co właściwie budujesz. Przez cały poziom pracujesz nad jednym z tych projektów:

🏫 Strona mojej szkoły – plan lekcji, menu stołówki, wydarzenia, nauczyciele
🙋 Moja strona osobista – o mnie, co lubię, moje projekty
🌍 Dziennik podróży – wyjazdy, zdjęcia, wspomnienia
⚽ Strona klubu sportowego – drużyna, mecze, treningi

Wybrałeś? Super. Zadania w każdej lekcji obejmują wszystkie cztery projekty – znajdź swój.

Pokażę ci: szkielet, od którego zaczyna każda strona na świecie

Każda strona – od twojej po YouTube – zaczyna się od tego samego szkieletu:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Przetłumaczmy to na prosty język:

Kod	Co mówi przeglądarce
`<!doctype html>`	„Uwaga, zaczyna się strona HTML!”
`<html lang="en">`	„Wszystko w środku to jedna strona, po angielsku.”
`<head>` … `</head>`	„Tu jest informacja o stronie.” Odwiedzający tego nie widzą.
`<meta charset="UTF-8">`	„Mogą być specjalne znaki, bądź gotowa.”
`<title>` … `</title>`	Nazwa strony – widać ją na karcie przeglądarki.
`<body>` … `</body>`	„Tu zaczyna się wszystko, co odwiedzający naprawdę widzi.” Cała treść idzie tutaj.

Zauważ, jak działają tagi: <h1> otwiera coś, a </h1> (ze slashem) zamyka. To, co jest między nimi, należy do tego tagu. Jak nawiasy.

Teraz ty 💪

Otwórz folder my-website (z poziomu przygotowawczego) w VS Code i plik index.html w środku. Usuń to, co jest, i wpisz szkielet strony z przykładu powyżej.
Zmień <title> i <h1>, żeby pasowały do twojego projektu, i dodaj akapit <p> pod nagłówkiem z jednym zdaniem o tym, czym jest twoja strona.
Zapisz (Ctrl+S) i otwórz index.html w przeglądarce (albo odśwież stronę klawiszem F5).

Nie wiesz jak? Oto rozwiązania dla każdego projektu:

🏫 Rozwiązanie: Strona mojej szkoły

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Rozwiązanie: Moja strona osobista

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Rozwiązanie: Dziennik podróży

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Rozwiązanie: Strona klubu sportowego

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Sprawdź się: Karta przeglądarki pokazuje nazwę twojej strony, a na stronie widać nagłówek i zdanie. Jeśli tak – kamień węgielny położony!

Co wyniesiesz z tej lekcji

Strona = pliki, które serwer wysyła do przeglądarki. Przeglądarka z nich rysuje stronę.
Każda strona ma ten sam szkielet: <head> (informacje o stronie) i <body> (widoczna treść).
Tagi otwierają się jak <to> i zamykają jak </to>.