Informatyka · klasa 7 · od HTML do własnej strony

Mój bohater: Spock. Najpierw poznaj HTML, potem zbuduj stronę.

Zobaczymy, z czego składa się strona i co robią jej elementy. Najpierw krótkie przykłady i doświadczenia. Później wykorzystasz je do zbudowania strony o Spocku, a na końcu dodasz kolory przez CSS.

HTML od podstaw
Przykład → symulacja → własny zapis
Na końcu projekt i CSS

Po tej lekcji: odróżnisz head od body, dobierzesz znaczniki do treści i zbudujesz stronę z nagłówkiem, bocznym panelem, główną treścią, zdjęciem, linkami oraz stopką.

Zakres podstawowy · materiał otwarty

Czym jest HTML i do czego służy?

Otwierasz stronę i widzisz tytuł, tekst, listę, zdjęcie oraz link. Przeglądarka musi wiedzieć, co jest czym. Właśnie do tego służy HTML — język znaczników opisujący treść i strukturę strony.

Znacznik to krótki zapis w nawiasach < i >. Na przykład <p> rozpoczyna akapit, a </p> go kończy. W środku umieszczasz treść: <p>To jest moja strona.</p>. Ten cały fragment to element HTML.

HTML opisuje rolę treści. CSS nadaje jej wygląd: kolory, odstępy i rozmieszczenie. Najpierw poznamy elementy, dopiero na końcu zajmiemy się wyglądem.

Podstawowa struktura strony

index.htmlhtml

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Moja pierwsza strona</title>
</head>
<body>
  Tu będzie widoczna treść strony.
</body>
</html>

<!doctype html> informuje przeglądarkę, że dokument używa współczesnego HTML.
<html lang="pl"> obejmuje dokument i wskazuje język polski.
<head> zawiera informacje o stronie. title ustawia tytuł karty przeglądarki. meta z UTF-8 określa kodowanie znaków, np. ą, ł i ż.
<body> zawiera treść strony, którą ogląda użytkownik. W tym miejscu będziemy umieszczać kolejne elementy.

Sprawdź w działaniu

Zobacz, za co odpowiadają head i body.

Zmień tytuł w head i porównaj go z nagłówkiem w body. Możesz też dołączyć lub usunąć cały element header i footer wraz z treścią. Obserwuj jednocześnie kod i stronę.

Nagłówki: od h1 do h6

Nagłówek pomaga czytelnikowi zorientować się w treści. h1 opisuje główny temat strony, h2 tytuł ważnej części, h3 jej podrozdział. Są też h4, h5 i h6.

Przykład: h1 „Spock”, h2 „Za co go cenię?”, h3 „Ciekawość świata”. To hierarchia, a nie zestaw przycisków do zmiany wielkości liter. Rozmiary możemy później ustawić w CSS.

Sprawdź w działaniu

Ten sam tekst, różne poziomy nagłówka.

Wybierz znacznik i porównaj efekt w przeglądarce. Poniżej zobaczysz też przykład sensownej hierarchii.

Akapit zapisujemy przez p

W akapicie umieszczasz kilka zdań dotyczących jednej myśli. Piszesz <p>, potem tekst i zamykasz przez </p>. Kolejny akapit to kolejna para tych znaczników.

Samo naciśnięcie Enter w kodzie zwykle nie tworzy nowego akapitu na stronie. Jeśli chcesz dwa akapity, zapisz dwa elementy p.

Sprawdź w działaniu

Dwa wiersze w kodzie czy dwa akapity?

Wpisz dwie linie tekstu. Porównaj je bez znaczników, w osobnych p oraz z pojedynczym przełamaniem br.

Listy: punktory albo numeracja

ul to lista nieuporządkowana, zwykle z punktorami — np. cechy bohatera. ol to lista uporządkowana, zwykle z numerami — np. kolejne kroki pracy. W obu przypadkach każdy punkt zapisujesz w osobnym <li>…</li>.

<ul><li>Ciekawość</li><li>Spokój</li></ul> to dwa punkty jednej listy. li znajduje się wewnątrz ul albo ol.

Sprawdź w działaniu

Ta sama lista z punktami albo z numerami.

Wybierz ul lub ol. Zmień kolejność elementów i zobacz, co dzieje się z numerami. Treść punktów zostaje taka sama.

Wstawiamy obraz przez img

Znacznik obrazu wygląda tak: <img src="spock.png" alt="Spock w niebieskim mundurze" width="280">. Nie dopisujemy </img>.

src wskazuje plik. alt opisuje zawartość dla osoby, która nie widzi obrazu; może też pojawić się przy problemie z plikiem. width określa szerokość w pikselach. To atrybuty — dodatkowe informacje zapisane przy znaczniku.

Pobierz zdjęcie poniżej jako spock.png. W naszym projekcie obraz będzie leżał obok index.html w jednym folderze. Nie zmieniaj PNG na JPG przez samo przemianowanie pliku.

Spock w niebieskim mundurze na pokładzie statku — Zdjęcie do projektu przekazane przez nauczyciela. Pobierz je jako spock.png.

Sprawdź w działaniu

Dopasuj src do pliku w folderze.

Sprawdź, co się pojawi, gdy wpiszesz właściwą nazwę, inne rozszerzenie lub nieistniejący podfolder.

Odnośnik: a oraz jego atrybut href

Link zapisujesz tak: <a href="#ciekawostka">Przejdź do ciekawostki</a>. a jest elementem odnośnika, href podaje jego cel, a tekst między znacznikami to nazwa, którą klikasz.

Cel #ciekawostka oznacza element z id="ciekawostka" na tej stronie. Cel https://www.nasa.gov/ prowadzi do innej witryny, a druga.html do innego pliku. Na początek przećwiczymy bezpieczny skok w tej samej stronie.

Sprawdź w działaniu

Kliknij link i znajdź jego cel.

Do którego fragmentu strony prowadzi href? Wybierz cel, a potem kliknij odnośnik w podglądzie.

Podzielmy stronę na cztery części.

Teraz połączymy poznane elementy w sensowną całość. header to wprowadzenie, aside — treść uzupełniająca (tu boczny panel z informacjami), main — główna treść, footer — stopka. W tym projekcie użyjemy jednego widocznego main.

Panel aside i main obejmiemy wspólnym <div class="uklad">. div to neutralny pojemnik. Sama nazwa aside nie ustawi panelu po lewej: HTML określa rolę, a CSS ustawi kolumny. Schemat poniżej jest planem docelowego rozmieszczenia.

Sprawdź w działaniu

Wskaż część strony na planie.

Kliknij nagłówek, panel boczny, główną treść albo stopkę. Zobaczysz rolę elementu i odpowiadający mu kod.

Teraz budujemy: od pustego pliku do strony o Spocku.

Znasz już elementy. Użyjemy ich w jednym projekcie. Najpierw zbuduj HTML; nie dodawaj jeszcze kolorów.

Utwórz folder MojBohater. Otwórz Notatnik, wybierz nowy dokument i wpisz szkielet z początku lekcji. W head ustaw title: Mój bohater — Spock.

Oczekiwany wynikMasz head oraz body wewnątrz html.
W body dodaj header z h1 „Spock — mój bohater” oraz krótkim akapitem. Na końcu body dodaj footer z informacją o autorze.

Oczekiwany wynikNagłówek oraz stopka mają własne znaczniki.
Pomiędzy nimi utwórz div class="uklad", a w nim aside i main. W aside dodaj listę z linkami do #o-spocku i #powody.

Oczekiwany wynikPanel i główna treść są rozdzielone.
W main dodaj h2 z id="o-spocku", opis w p oraz obraz. Dodaj drugi h2 z id="powody", listę trzech powodów i listę ol z trzema krokami uczenia się.

Oczekiwany wynikMasz tekst, dwie listy, zdjęcie i cele odnośników.
Użyj Plik → Zapisz jako: nazwa index.html, typ Wszystkie pliki, kodowanie UTF-8. Zdjęcie spock.png połóż w tym samym folderze. Otwórz HTML w przeglądarce. Po zmianach używaj Ctrl+S → odśwież stronę (na Macu ⌘S → ⌘R).

Oczekiwany wynikPlik nie kończy się na .txt. Strona działa lokalnie; nie została automatycznie opublikowana w internecie.

Gotowy HTML: porównaj go ze swoją wersją.

Najpierw zobacz wersję bez CSS. Wszystko jest pod sobą — to normalne. Role header, aside, main i footer już są, ale kolumn oraz kolorów jeszcze nie ustawiliśmy.

index.htmlhtml

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mój bohater — Spock</title>
</head>
<body>
  <header>
    <h1>Spock — mój bohater</h1>
    <p>Ciekawość świata i spokojne myślenie.</p>
  </header>
  <div class="uklad">
    <aside>
      <h2>Na tej stronie</h2>
      <ul>
        <li><a href="#o-spocku">Kim jest Spock?</a></li>
        <li><a href="#powody">Za co go cenię?</a></li>
      </ul>
    </aside>
    <main>
      <h2 id="o-spocku">Kim jest Spock?</h2>
      <p>Spock to fikcyjny bohater Star Treka,
         oficer naukowy statku Enterprise.</p>
      <img src="spock.png" alt="Spock w niebieskim mundurze" width="280">
      <h2 id="powody">Za co go cenię?</h2>
      <ul>
        <li>Za ciekawość świata.</li>
        <li>Za szukanie odpowiedzi.</li>
        <li>Za współpracę z załogą.</li>
      </ul>
      <h3>Jak chcę się uczyć?</h3>
      <ol>
        <li>Zadaję pytanie.</li>
        <li>Sprawdzam fakty.</li>
        <li>Wyciągam wnioski.</li>
      </ol>
    </main>
  </div>
  <footer>
    <p>Strona wykonana na lekcji informatyki. Autor: uczeń klasy 7.</p>
  </footer>
</body>
</html>

Sprawdź w działaniu

Uruchom i popraw własny HTML.

Wklej swój kod albo zmień przykład. Sprawdź zdjęcie i odnośniki. Jeśli obraz znika, wróć do src i folderu. Przycisk pobierania zachowa kod; zdjęcie pobierz obok niego. Paczka ZIP zawiera końcową wersję z CSS.

Na końcu CSS: ubieramy gotową treść.

HTML już działa. Teraz w head dodaj element style i umieść w nim CSS. Zapis h2 { color: #155d9b; } oznacza: „nagłówki h2 mają mieć ten kolor”. Selektor wybiera element, a zapis w klamrach podaje jego wygląd.

background-color zmienia tło, color kolor tekstu, padding dodaje miejsce wewnątrz elementu, a border-radius zaokrągla rogi. .uklad wybiera pojemnik o class="uklad". Użyjemy display: grid i grid-template-columns, żeby panel i main stały obok siebie.

Sprawdź w działaniu

Zmień wygląd całej strony o Spocku.

Włączaj kolejne reguły: kolory, odstępy i układ kolumn. Widzisz zarówno CSS, jak i prawdziwą stronę. Zauważ, że słowa i znaczniki HTML nie muszą się przy tym zmieniać.

CSS do umieszczenia pomiędzy style i /style w head.

Wklej ten fragment w <style>…</style>, przed zamknięciem head. Zapisz i odśwież. Reguła @media ustawia jedną kolumnę na wąskim ekranie; nie musisz jeszcze pisać jej samodzielnie.

CSS w elemencie stylecss

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #edf4fa;
  color: #17233b;
}
header, footer {
  background-color: #183c68;
  color: white;
  padding: 20px;
}
.uklad {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}
aside, main {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  min-width: 0;
}
h2 { color: #155d9b; }
p, li { line-height: 1.6; }
a { color: #155d9b; }
img { max-width: 100%; height: auto; }
@media (max-width: 600px) {
  .uklad { grid-template-columns: 1fr; }
}

header, footer przecinek pozwala nadać ten sam wygląd obu typom elementów.
grid-template-columns: 180px 1fr pierwsza kolumna ma 180 pikseli, druga bierze pozostałe miejsce. display: grid włącza ten układ.
max-width, margin, gap ograniczają szerokość, pomagają wyśrodkować pojemnik i zostawiają odstęp między kolumnami.
min-width: 0 i reguła dla img pozwalają zawartości zmieścić się w wąskiej kolumnie; obraz może się zmniejszyć bez zmiany proporcji.

Podsumowanie

Teraz wiesz, skąd bierze się każdy fragment strony.

HTML opisuje treść i strukturę, CSS nadaje wygląd.
head przechowuje informacje o dokumencie, body jego treść. header jest elementem wewnątrz body.
Nagłówki mają poziomy h1–h6, akapity zapisujesz w p, punkty list w li wewnątrz ul lub ol.
Obraz wskazuje src w img. Link to a, a jego cel to href.
Header, aside, main i footer nadają częściom znaczenie. Dopiero CSS ustawia je w kolumny i dodaje kolory.

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ę →

Źródła i dalsza nauka