Informatyka · Zakres podstawowy
Tabela na stronie i publikacja — od pliku do adresu WWW
Strona otwarta z dysku jest widoczna tylko u Ciebie. Dopiero publikacja udostępnia ją pod adresem innym osobom.
- Przewidź
- Sprawdź
- Wyjaśnij
Po tej lekcji: Dodasz semantyczną tabelę i opublikujesz własną stronę w szkolnym serwisie lub na zatwierdzonym hostingu.
Zakres podstawowy · materiał otwarty
Tabela służy do danych
Tabela pokazuje zależność wierszy i kolumn, np. plan spotkań. Nie buduj nią układu całej strony. caption nazywa tabelę, thead grupuje nagłówek, tbody dane, tr wiersz, th nagłówek komórki, a td zwykłą komórkę. scope="col" określa nagłówek kolumny.
Wstaw czytelny plan
<table>
<caption>Spotkania koła filmowego</caption>
<thead><tr><th scope="col">Dzień</th><th scope="col">Temat</th></tr></thead>
<tbody>
<tr><td>Poniedziałek</td><td>Montaż</td></tr>
<tr><td>Środa</td><td>Dźwięk</td></tr>
</tbody>
</table>Przygotuj folder publikacji
W folderze umieść index.html, style.css i katalog obrazy. W HTML połącz CSS przez <link rel="stylesheet" href="style.css">; obraz odwołuje się do obrazy/bohater.jpg. Stosuj dokładne wielkości liter i ścieżki względne. Nie używaj C:\..., bo serwer i komputer kolegi nie mają Twojego dysku.
Sprawdź w działaniu
Plik lokalny czy zasób na serwerze?
Wskaż, które odwołania zadziałają po publikacji. Model pokazuje drogi plików, nie wysyła ich do internetu.
Najpierw przewidź wynik, potem sprawdź i wyjaśnij różnicę.
Opublikuj i sprawdź z innego urządzenia
Użyj miejsca wskazanego przez nauczyciela. W szkolnym panelu plików wybierz swój katalog WWW, prześlij index.html, style.css oraz obrazy z zachowaniem folderów. Otwórz przydzielony adres HTTPS w oknie prywatnym i na innym urządzeniu. Sprawdź tabelę, style, obrazy i linki. Jeżeli pracownia korzysta z GitHub Pages: w szkolnym repozytorium wgraj te pliki, zatwierdź commit, w Settings → Pages wybierz publikację z gałęzi main i katalogu /(root), zapisz i odczytaj adres po ukończeniu publikacji. Wykonuj to na koncie i repozytorium zatwierdzonym przez szkołę; nie wymagamy prywatnego konta ucznia.
Gdy serwer zwraca 404
Sprawdź nazwę index.html, wybrany katalog publikacji, zakończenie procesu i wielkość liter w ścieżkach. Sam zapis lub podgląd w Live Server nie jest publikacją w internecie. Nie wysyłaj danych uczniów, haseł ani plików konfiguracyjnych.
Ćwiczenie z pomocą · samodzielna praca
Dodaj trzeci wiersz i opublikuj
Dodaj piątek z tematem Napisy. Zastosuj obramowanie komórek w CSS i dodaj podpis tabeli. Opublikuj całość w przydzielonym miejscu.
Publiczny lub szkolny adres HTTPS z działającym CSS i trzema wierszami.
? Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź
W tbody dodaj tr z dwiema komórkami td.
Krok 2 — pokaż podpowiedź
W CSS użyj table { border-collapse: collapse; } i obramowania th,td.
Krok 3 — pokaż podpowiedź
Po publikacji sprawdź stronę w nowej sesji przeglądarki.
Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.
Podsumowanie
Zapamiętaj
- Tabela opisuje dane, nie układ strony.
- Folder i ścieżki muszą zgadzać się na serwerze.
- Publikację potwierdza działający adres, nie zapis na dysku.
Po zalogowaniu zobaczysz dodatkowe lekcje i materiały oznaczone jako rozszerzenie. Podstawowe quizy i zadania pozostają dostępne w biurku.
Dalej na swoim koncie
Rozgrzewki, quiz i zadania są w biurku ucznia.
Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.
Zaloguj się →