Kurs HTML i CSS · Moduł 2: Internet i elementy HTML
Projekt: Kompletny przewodnik po internecie
W tej lekcji9
Gratulacje! Dotarłeś do końca modułu o działaniu internetu. Wiedzę z wielu lekcji najlepiej utrwalisz, porządkując ją samodzielnie - czas więc stworzyć kompletny przewodnik po internecie w formie strony HTML. Ten projekt podsumowuje wiedzę z modułu: sieć, adresy URL, protokoły HTTP i HTTPS, DNS i znaczniki HTML. Przy okazji poznasz kilka nowych pojęć: warstwy TCP/IP, protokół UDP i sieci CDN.
Wyobraź sobie, że jesteś skrybą faraona i musisz stworzyć wielki zwój wiedzy - encyklopedię internetową dla przyszłych pokoleń. Każda sekcja to inna komnata w piramidzie wiedzy!
Moja rada: buduj stronę krok po kroku i po każdym kroku sprawdzaj podgląd. Błąd w pięciu nowych liniach znajdziesz szybciej niż w stu.
Krok 1: Struktura dokumentu - fundament piramidy
Zacznij od solidnej podstawy. Każda piramida potrzebuje fundamentu, a każda strona HTML - poprawnej struktury. Wykorzystasz tu elementy z lekcji o semantyce: <header> to nagłówek strony z tytułem, a <main> - jej główna treść, która występuje na stronie tylko raz:
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Kompletny przewodnik po internecie</title>
7</head>
8<body>
9 <header>
10 <h1>Jak działa internet - przewodnik</h1>
11 <p>Odkryj tajemnice sieci, tak jak odkrywamy tajemnice piramid!</p>
12 </header>
13 <main>
14 <!-- Tutaj dodasz kolejne sekcje -->
15 </main>
16</body>
17</html>Na razie <main> jest pusty - komentarz podpowiada, że tam trafią kolejne sekcje. Atrybut lang="pl" podpowiada czytnikom ekranu język tekstu.
Krok 2: Sekcja o podstawach internetu
Każdy temat zamknij w osobnym elemencie <section> z własnym nagłówkiem <h2> - to komnata piramidy z tabliczką nad wejściem. Pierwsza komnata opisuje, czym jest internet, WWW i jak powstała globalna sieć:
1<section>
2 <h2>Czym jest internet?</h2>
3 <p>Internet to globalna sieć połączonych komputerów,
4 komunikujących się za pomocą protokołów TCP/IP.</p>
5
6 <h3>Kluczowe pojęcia</h3>
7 <ul>
8 <li><strong>Internet</strong> - sieć fizyczna łącząca komputery</li>
9 <li><strong>WWW</strong> - World Wide Web, system stron internetowych</li>
10 <li><strong>Przeglądarka</strong> - program wyświetlający strony</li>
11 <li><strong>Serwer</strong> - komputer udostępniający zasoby</li>
12 </ul>
13</section>Lista <ul> pasuje tu idealnie, bo kolejność pojęć nie ma znaczenia. Pamiętaj, że internet i WWW to nie to samo - WWW to tylko jedna z usług działających w sieci.
Krok 3: HTTP, HTTPS i komunikacja
Dodaj sekcję o protokołach komunikacji - o tym, jak przeglądarka rozmawia z serwerem. Różnice między HTTP i HTTPS najlepiej pokazać w tabeli, bo porównujesz te same cechy obu protokołów:
1<section>
2 <h2>Protokoły HTTP i HTTPS</h2>
3 <p>HTTP (Hypertext Transfer Protocol) to język, którym
4 przeglądarka i serwer porozumiewają się ze sobą.</p>
5
6 <table>
7 <thead>
8 <tr>
9 <th>Cecha</th>
10 <th>HTTP</th>
11 <th>HTTPS</th>
12 </tr>
13 </thead>
14 <tbody>
15 <tr>
16 <td>Szyfrowanie</td>
17 <td>Brak</td>
18 <td>Tak (SSL/TLS)</td>
19 </tr>
20 <tr>
21 <td>Bezpieczeństwo</td>
22 <td>Niskie</td>
23 <td>Wysokie</td>
24 </tr>
25 <tr>
26 <td>Ikona w przeglądarce</td>
27 <td>Brak kłódki</td>
28 <td>Kłódka</td>
29 </tr>
30 </tbody>
31 </table>
32</section>Tym razem tabela ma część <thead> z nagłówkami kolumn i <tbody> z danymi, co porządkuje jej budowę. Możesz tu też wypisać poznane kody odpowiedzi HTTP, np. 200 i 404.
Krok 4: DNS - system nazw domen
Wyjaśnij, jak DNS tłumaczy nazwy domen na adresy IP. Tutaj kolejność kroków ma znaczenie, więc zamiast <ul> użyj listy numerowanej <ol>:
1<section>
2 <h2>System DNS</h2>
3 <p>DNS (Domain Name System) zamienia przyjazne nazwy
4 jak "google.com" na adresy IP jak "142.250.74.206".</p>
5
6 <h3>Etapy rozwiązywania DNS</h3>
7 <ol>
8 <li>Przeglądarka sprawdza lokalny cache</li>
9 <li>Zapytanie trafia do resolvera DNS</li>
10 <li>Resolver pyta root DNS server</li>
11 <li>Root kieruje do serwera TLD (.com, .pl)</li>
12 <li>Serwer TLD kieruje do serwera domeny</li>
13 <li>Otrzymujemy adres IP strony</li>
14 </ol>
15</section>Lista <ol> sama numeruje etapy. Adres IP w przykładzie jest poglądowy - duże serwisy mają wiele adresów. W egipskiej analogii DNS to strażnik świątyni, który wskazuje drogę do właściwej komnaty.
Krok 5: TCP/IP i pakiety danych
Opisz, jak dane podróżują przez internet. Ta sekcja łączy obie poznane struktury: listę numerowaną warstw i tabelę porównującą TCP z UDP:
1<section>
2 <h2>Model TCP/IP</h2>
3 <p>TCP/IP to zestaw protokołów organizujących
4 przesyłanie danych w internecie.</p>
5
6 <h3>Warstwy TCP/IP</h3>
7 <ol>
8 <li><strong>Warstwa dostępu do sieci</strong> - kable, WiFi</li>
9 <li><strong>Warstwa internetowa (IP)</strong> - adresowanie</li>
10 <li><strong>Warstwa transportowa (TCP/UDP)</strong> - niezawodność</li>
11 <li><strong>Warstwa aplikacji</strong> - HTTP, DNS, FTP</li>
12 </ol>
13
14 <h3>TCP vs UDP</h3>
15 <table>
16 <thead>
17 <tr>
18 <th>Cecha</th>
19 <th>TCP</th>
20 <th>UDP</th>
21 </tr>
22 </thead>
23 <tbody>
24 <tr>
25 <td>Niezawodność</td>
26 <td>Gwarantuje dostarczenie</td>
27 <td>Brak gwarancji</td>
28 </tr>
29 <tr>
30 <td>Szybkość</td>
31 <td>Wolniejszy</td>
32 <td>Szybszy</td>
33 </tr>
34 <tr>
35 <td>Zastosowanie</td>
36 <td>Strony, email, pliki</td>
37 <td>Streaming, gry</td>
38 </tr>
39 </tbody>
40 </table>
41</section>Warstwy wypisujemy od najniższej (kable, Wi-Fi) do najwyższej (HTTP, DNS). TCP pilnuje, żeby każdy pakiet dotarł, a UDP rezygnuje z tej kontroli na rzecz szybkości.
Krok 6: Streaming i CDN
Dodaj sekcję o multimediach w sieci. Wystarczą tu akapity i nagłówek <h3>, bo opisujesz pojęcia, a nie wyliczasz kolejnych kroków:
1<section>
2 <h2>Streaming i CDN</h2>
3 <p>Streaming pozwala odtwarzać multimedia bez pobierania
4 całego pliku. CDN przyspiesza dostarczanie treści.</p>
5
6 <h3>Jak działa CDN?</h3>
7 <p>CDN (Content Delivery Network) to sieć serwerów
8 na całym świecie przechowujących kopie treści.
9 Użytkownik łączy się z najbliższym serwerem.</p>
10</section>CDN możesz porównać do spichlerzy wzdłuż Nilu: zamiast wozić zboże z jednej stolicy, każdy bierze je z najbliższego magazynu.
Krok 7: Bezpieczeństwo
Dodaj sekcję o ochronie w internecie. To dobre miejsce na egipską analogię z grobowcami, których strzeżono pieczęciami i pułapkami przed rabusiami:
1<section>
2 <h2>Bezpieczeństwo w internecie</h2>
3 <ul>
4 <li>Zawsze sprawdzaj kłódkę HTTPS w pasku adresu</li>
5 <li>Certyfikat SSL/TLS szyfruje komunikację</li>
6 <li>Nigdy nie podawaj haseł na stronach HTTP</li>
7 <li>Uważaj na phishing - fałszywe strony</li>
8 </ul>
9</section>Każdy punkt listy to jedna zasada. Phishing możesz rozwinąć w osobnym akapicie: fałszywa strona potrafi nawet mieć kłódkę, więc zawsze sprawdzaj adres.
Krok 8: Stopka - pieczęć faraona
Zamknij stronę stopką, jak pieczęcią na królewskim dekrecie. Element <footer> wstaw po zamknięciu </main>, tuż przed zamknięciem </body>:
1 <footer>
2 <p>Przewodnik po internecie - Moduł 2</p>
3 <p>Stworzony podczas podróży przez Starożytny Egipt</p>
4 </footer>
5</body>
6</html>To koniec dokumentu. Sprawdź, czy każdy otwarty znacznik ma swoją parę - to najczęstszy błąd w dużych projektach.
Twoje zadanie
Stwórz kompletną stronę HTML łączącą wszystkie powyższe sekcje w jeden spójny dokument. Dodaj własne opisy, przykłady i egipskie analogie. Strona powinna być czytelna, dobrze zorganizowana i zawierać przynajmniej:
- Nagłówki
<h1>do<h3>- hierarchia tematów - Listy
<ul>i<ol>- wyliczanie kroków i pojęć - Tabele
<table>- porównania protokołów - Paragrafy
<p>- opisy i wyjaśnienia - Elementy semantyczne
<header>,<main>,<section>,<footer>
Mentor oceni też Twoje egipskie analogie, więc dodaj sekcje, których nie ma w szkielecie: budowę adresu URL (protokół, domena, ścieżka, parametry) na przykładzie wymyślonej egipskiej strony, ładowanie strony opisane jak ceremonia w świątyni, przeglądarki przedstawione jako egipscy bogowie oraz bezpieczeństwo pokazane przez pryzmat ochrony grobowców.
Wyślij gotowy projekt do sprawdzenia mentorowi w następnym kroku. W edytorze poniżej czeka szkielet z nagłówkami sekcji i komentarzami z podpowiedziami - wypełnij go treścią:
Kod do tej lekcji: index.html
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <title>Kompletny przewodnik po internecie</title>
6</head>
7<body>
8 <h1>Wielki Zwój Wiedzy - Encyklopedia Internetu</h1>
9
10 <!-- Sekcja 1: Czym jest internet? -->
11 <h2>1. Czym jest internet?</h2>
12 <!-- Opisz czym jest internet jako globalna sieć komputerów -->
13
14 <!-- Sekcja 2: Protokoły HTTP i HTTPS -->
15 <h2>2. Protokoły komunikacji</h2>
16 <!-- Opisz różnicę między HTTP a HTTPS -->
17 <!-- Użyj tabeli <table> do porównania -->
18
19 <!-- Sekcja 3: System DNS -->
20 <h2>3. System DNS</h2>
21 <!-- Wyjaśnij jak DNS zamienia domeny na adresy IP -->
22 <!-- Użyj listy numerowanej <ol> do opisania kroków -->
23
24 <!-- Sekcja 4: Przeglądarki -->
25 <h2>4. Przeglądarki internetowe</h2>
26 <!-- Wymień popularne przeglądarki w liście <ul> -->
27
28 <!-- Sekcja 5: Bezpieczeństwo -->
29 <h2>5. Bezpieczeństwo w sieci</h2>
30 <!-- Opisz zasady bezpiecznego korzystania z internetu -->
31
32 <!-- Sekcja 6: Multimedia i streaming -->
33 <h2>6. Multimedia w internecie</h2>
34 <!-- Opisz czym jest streaming i CDN -->
35
36 <footer>
37 <p><em>Autor: Skryba Faraona | Akademia Internetu</em></p>
38 </footer>
39</body>
40</html>Pamiętaj: dobry przewodnik jest jak piramida - solidny fundament, komnaty-sekcje z czytelnymi tabliczkami i pieczęć stopki na końcu. W następnym module nadasz mu kolory za pomocą CSS.
Widzisz błąd w tej lekcji?