8 klasa — 1. HTML: znaczniki i pierwsza strona w CodePen

Klasa 8 · Lekcja 1 z 6 · HTML i CSS w CodePen

Cel lekcji

Wyjaśniasz, do czego służy HTML i jak przeglądarka odczytuje znaczniki.
Rozpoznajesz znacznik otwierający, treść, znacznik zamykający i atrybut.
Budujesz nagłówki, akapity i listę z zachowaniem prawidłowego zagnieżdżenia.
Korzystasz z W3Schools, aby znaleźć przykład i samodzielnie go zmienić.

Wstęp

Gdy otwierasz stronę, widzisz tekst, ilustracje i odsyłacze. Przeglądarka potrzebuje informacji, które fragmenty są tytułem, które akapitami, a które listą. Tę strukturę opisuje HTML. Podczas sześciu lekcji zbudujesz stronę fikcyjnego Klubu Odkrywców. Dzisiaj przygotujesz jej treść; wygląd dopracujesz później. Nie musisz od razu znać wszystkich znaczników. Ważniejsze jest rozumienie kilku podstawowych elementów i obserwowanie skutków własnych zmian.

Pracujemy w CodePen, w sposobie dostępu ustalonym przez nauczyciela. Nie zakładaj samodzielnie konta, jeśli nauczyciel nie ustalił zasad korzystania z usługi dla Twojego wieku. Publiczny projekt może zobaczyć każdy: używaj fikcyjnych treści i nie wpisuj nazwiska, adresu ani danych logowania.

HTML opisuje znaczenie i strukturę

HTML, czyli HyperText Markup Language, jest językiem znaczników. Nie jest językiem programowania takim jak C++. W tym dziale nie piszemy algorytmów: opisujemy zawartość strony. CSS będzie odpowiadał za wygląd. Przez cały cykl korzystamy z HTML i CSS.

<p>Odkrywamy świat.</p>

 otwiera akapit, tekst jest jego zawartością, a  go zamyka. Całość to element HTML. Ukośnik w znaczniku zamykającym ma znaczenie. Stosuj małe litery i zwykłe cudzysłowy kodu, a nie ozdobne cudzysłowy z edytora tekstu.

<p class="wprowadzenie">Poznaj nasz klub.</p>

class to atrybut zapisany w znaczniku otwierającym. Jego wartością jest wprowadzenie. Atrybut przekazuje dodatkową informację o elemencie; w kolejnej lekcji wykorzystasz klasę do nadania wyglądu.

Nagłówki, akapity i listy

W projekcie używamy jednego h1 jako tytułu strony. Nagłówki h2 rozpoczynają główne części, a h3 mogą rozpoczynać ich podczęści. Poziom nagłówka wybieramy według struktury treści, a nie oczekiwanego rozmiaru liter. Rozmiar zmienia CSS.

p oznacza akapit, strong ważny fragment, a em zaakcentowanie wypowiedzi. ul tworzy listę wypunktowaną, ol numerowaną, a każdy punkt obu list zapisujemy w li. Wcięcia pomagają zobaczyć, co znajduje się wewnątrz czego. Poprawnie: To ważne.. Zamykamy najpierw element wewnętrzny.

Nie każdy element ma znacznik zamykający: img i br są elementami pustymi. br oznacza złamanie wiersza, a nie narzędzie do tworzenia odstępów między sekcjami.

Pełny dokument a panel CodePen

Samodzielny plik strony ma deklarację typu dokumentu, element html, część head z informacjami o stronie oraz body z treścią. Poniższy szkielet służy do zrozumienia budowy pliku; nie wklejaj go w całości do panelu HTML CodePen.

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Klub Odkrywców</title>
</head>
<body>
  <h1>Klub Odkrywców</h1>
</body>
</html>

W standardowym edytorze Pen wpisujesz do panelu HTML zawartość, która trafi do body. CodePen przygotowuje dokument podglądu. title określa tytuł dokumentu, a h1 nagłówek widoczny w jego treści. To różne zadania.

W3Schools i film do lekcji

W3Schools to serwis edukacyjny z opisami i przykładami. Nie jest organizacją W3C i nie tworzy standardów internetu. W razie wątpliwości porównujemy informacje z dokumentacją MDN. Aby skorzystać z W3Schools: otwórz dział HTML, wybierz temat „HTML Headings”, przeczytaj przykład, uruchom „Try it Yourself” i zmień jedną rzecz. Najpierw przewidź wynik, potem go sprawdź. Nie kopiuj całych stron bez czytania.

Materiał wideo wskazany do lekcji: Znaczniki HTML — film na YouTube. Obejrzyj go z nauczycielem. Zapisz dwa przykłady znaczników i jedno pytanie, które chcesz wyjaśnić. Następnie sprawdź te przykłady w swoim edytorze.

Budowa elementu HTML: znacznik otwierający, treść i znacznik zamykający; HTML opisuje treść odczytywaną przez przeglądarkę.

Ćwiczenie krok po kroku

Zadanie: przygotuj pierwszą wersję strony „Klub Odkrywców”. Przewidywany przebieg: około 10 minut wprowadzenia, 25 minut ćwiczenia i 10 minut sprawdzenia.

Otwórz nowy Pen zgodnie z instrukcją nauczyciela. Rozpoznaj panel HTML, panel CSS i podgląd. Panel CSS na razie pozostaw pusty.
Wpisuj poniższy kod w panelu HTML małymi fragmentami. Po każdym nagłówku i akapicie sprawdź podgląd.
Zmień opis klubu na dwa własne zdania. Zachowaj fikcyjny charakter projektu.
Dodaj czwarty punkt listy oraz jedno wyróżnienie em. Wyjaśnij, dlaczego wyróżniasz właśnie ten fragment.
Sprawdź, czy każdy punkt listy znajduje się wewnątrz ul i ma znaczniki li.
Zapisz projekt nazwą „Klub Odkrywców — etap 1” w ustalonym trybie. Zapisz również kopię kodu w szkolnym folderze. Jeśli nie masz możliwości zapisu Pena, przekaż nauczycielowi plik tekstowy z kodem.

<h1>Klub Odkrywców</h1>
<p>To miejsce dla osób, które lubią poznawać świat.</p>
<h2>O klubie</h2>
<p>Łączymy <strong>ciekawość</strong> z uważną obserwacją.</p>
<h2>Nasz projekt</h2>
<p>Przygotowujemy atlas drzew. Najpierw obserwujemy, potem opisujemy.</p>
<ul>
  <li>Rozpoznajemy kształty liści.</li>
  <li>Rysujemy własne ilustracje.</li>
  <li>Porównujemy wyniki obserwacji.</li>
</ul>
<h2>Źródła</h2>
<p>Teksty projektu przygotowujemy samodzielnie.</p>

Dla chętnych: dodaj pod nagłówkiem „Nasz projekt” podtytuł h3 „Plan obserwacji” i listę numerowaną trzech czynności. Nie zmieniaj poziomów nagłówków tylko po to, aby uzyskać mniejszą czcionkę.

Gdy coś nie działa: sprawdź nawiasy ostrokątne i ukośniki. Sam Enter w kodzie zwykle nie tworzy nowego akapitu na stronie. Jeżeli przeglądarka pokazuje wynik mimo błędu, nie oznacza to, że zapis jest poprawny.

Sprawdź swoją pracę

Mam jeden tytuł h1, trzy główne części h2, akapity i listę.
Potrafię wskazać treść elementu i objaśnić jego znaczniki.
Dodałem własne zdania, a nie tylko skopiowałem przykład.
Zachowałem kod i potrafię znaleźć go na następną lekcję.

Podsumowanie

HTML pomaga czytelnikowi i przeglądarce rozpoznać znaczenie treści. Dobra strona zaczyna się od logicznych nagłówków, akapitów i list. Na następnej lekcji wykorzystasz tę samą treść i dodasz CSS.

Materiały i źródła

Pytania kontrolne

Do czego służy HTML?
Czym różni się znacznik od całego elementu?
Po co w znaczniku zamykającym znajduje się ukośnik?
Czym różnią się h1 i h2?
Jak zbudować listę z trzema punktami?
Gdzie zapisujemy atrybut class?
Dlaczego do panelu HTML CodePen nie wklejamy całego szkieletu dokumentu?
Jak użyć W3Schools, żeby nauczyć się czegoś zamiast tylko skopiować kod?

ilość wywołań: 46