Tekst, Nagłówki i Akapity

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się struktury dokumentu HTML.

Teraz przechodzimy do samej treści.

Tekst.

Nagłówki.

Akapity.

Rzeczy, które ludzie naprawdę czytają.

Bo strona bez uporządkowanego tekstu to tylko ściana słów.

A nikt nie chce walczyć ze ścianą słów przed śniadaniem.

Czego Się Nauczysz

W tej lekcji nauczysz się:

• jak działają nagłówki w HTML;
• jaka jest różnica między h1, h2, h3 i innymi poziomami;
• jak pisać akapity za pomocą p;
• jak wyróżniać tekst przez strong i em;
• kiedy używać br;
• kiedy używać hr;
• jak tworzyć jasną i czytelną strukturę tekstu.

Nagłówki w HTML

HTML ma sześć poziomów nagłówków:

<h1>Główny Nagłówek</h1>
<h2>Nagłówek Sekcji</h2>
<h3>Nagłówek Podsekcji</h3>
<h4>Mniejszy Nagłówek</h4>
<h5>Jeszcze Mniejszy Nagłówek</h5>
<h6>Najmniejszy Nagłówek</h6>

Najważniejszy nagłówek to h1.

Zwykle strona powinna mieć jeden główny h1.

Pomyśl o nim jak o tytule strony.

Potem używasz h2 dla głównych sekcji, h3 dla podsekcji i tak dalej.

Jak w książce:

Tytuł Książki
  Rozdział
    Sekcja
      Mniejsza część

Nagłówki HTML nie są tylko o rozmiarze.

Opisują strukturę.

To ważne dla:

• czytelników;
• czytników ekranu;
• wyszukiwarek;
• organizacji strony;
• przyszłego ciebie, który będzie próbował zrozumieć stronę później.

Dobra Struktura Nagłówków

Przykład:

<h1>Mój Blog Podróżniczy</h1>

<h2>Podróż do Rzymu</h2>
<p>Rzym jest pełen historii, jedzenia i ludzi przechodzących przez ulicę jakby mieli immunitet dyplomatyczny.</p>

<h2>Podróż do Mediolanu</h2>
<p>Mediolan jest elegancki, szybki i jakoś zawsze nosi lepsze buty niż ty.</p>

<h3>Ulubione Miejsca w Mediolanie</h3>
<p>Katedra, galerie i każde miejsce, gdzie kawa pojawia się szybko.</p>

Ta struktura ma sens.

h1 to temat strony.

Elementy h2 to główne sekcje.

h3 to mniejsza sekcja wewnątrz jednego z tematów.

Dobra struktura jest spokojna.

Zła struktura to reklamówka pełna tagów.

Nie Pomijaj Poziomów Nagłówków

Staraj się nie skakać z h1 od razu do h4.

To nie jest idealne:

<h1>Moja Strona</h1>
<h4>Mała Sekcja</h4>

Lepiej:

<h1>Moja Strona</h1>
<h2>Mała Sekcja</h2>

Poziomy nagłówków powinny iść logicznie.

Nie dlatego, że przeglądarka wybuchnie.

Nie wybuchnie.

Ale dlatego, że treść staje się łatwiejsza do zrozumienia.

A lubimy treść, która nie zachowuje się jak puzzle zaprojektowane przez zmęczonego szopa.

Akapity

Akapity tworzymy za pomocą tagu p:

<p>To jest akapit.</p>

Akapit to blok tekstu.

Przykład:

<p>HTML pomaga nam jasno strukturyzować strony webowe.</p>
<p>Każdy akapit powinien zawierać jedną myśl albo małą grupę powiązanych myśli.</p>

Nie wkładaj całego tekstu do jednego ogromnego akapitu.

To boli:

<p>To jest bardzo długi tekst z wieloma myślami i bez przerw i czytelnik jest teraz uwięziony w tunelu słów bez wyjścia i bez kawy.</p>

Lepiej:

<p>To jest pierwsza myśl.</p>
<p>To jest druga myśl.</p>
<p>To jest trzecia myśl.</p>

Czytelny tekst jest przyjazny.

Ważny Tekst

Używaj strong dla ważnego tekstu:

<p>To jest <strong>bardzo ważne</strong>.</p>

Przeglądarka zwykle pokazuje strong pogrubieniem.

Ale znaczenie jest ważniejsze niż wygląd.

strong oznacza, że tekst ma mocną ważność.

Używaj go, kiedy coś naprawdę ma znaczenie.

Nie co trzy słowa.

Jeśli wszystko jest ważne, nic nie jest ważne.

I strona zaczyna krzyczeć.

Tekst z Emfazą

Używaj em dla emfazy:

<p>Naprawdę <em>lubię</em> czysty HTML.</p>

Przeglądarka zwykle pokazuje em kursywą.

Ale znowu, znaczenie jest ważne.

em zmienia akcent zdania.

Przykład:

<p>Powiedziałem, że lubię HTML.</p>
<p>Powiedziałem, że <em>lubię</em> HTML.</p>

Drugie zdanie podkreśla słowo “lubię”.

Mały tag.

Inne odczucie.

HTML bywa sprytny.

Łamanie Linii

Tag br tworzy złamanie linii:

<p>Pierwsza linia<br>Druga linia</p>

br nie potrzebuje tagu zamykającego.

Może być użyteczny dla:

• adresów;
• wierszy;
• krótkich łamań linii, gdy przerwa ma znaczenie.

Przykład:

<p>
  Viktor Holovin<br>
  Vigevano, Włochy<br>
  Web Developer
</p>

Nie używaj br tylko po to, aby tworzyć odstępy między sekcjami.

To nie jest dobre:

<p>Pierwszy akapit.</p>
<br>
<br>
<p>Drugi akapit.</p>

Do odstępów wizualnych lepszy jest CSS.

HTML jest od struktury.

CSS jest od wyglądu.

Nie każ HTML-owi robić pracy CSS.

On już ma pracę.

Pozioma Linia

Tag hr tworzy tematyczną przerwę:

<hr>

Oznacza zmianę lub oddzielenie treści.

Przykład:

<h2>O Mnie</h2>
<p>Buduję strony webowe i uczę się technologii krok po kroku.</p>

<hr>

<h2>Kontakt</h2>
<p>Możesz skontaktować się ze mną przez email.</p>

Używaj hr, gdy istnieje prawdziwe oddzielenie treści.

Nie tylko dlatego, że strona wygląda pusto.

To dekoracja.

CSS zajmie się dekoracją później.

Niech HTML zachowa godność.

Stwórz Stronę do Ćwiczeń

Stwórz nowy plik:

touch text.html

Dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ćwiczenie Tekstu</title>
</head>
<body>
  <h1>Ćwiczenie Tekstu</h1>

  <h2>O Tej Stronie</h2>
  <p>Ta strona pomaga mi ćwiczyć nagłówki i akapity w HTML.</p>
  <p>Dobra struktura tekstu sprawia, że strona jest łatwiejsza do czytania.</p>

  <h2>Ważna Notatka</h2>
  <p>HTML dotyczy <strong>struktury</strong>, a nie dekoracji.</p>
  <p>Uczę się go <em>krok po kroku</em>.</p>

  <hr>

  <h2>Kontakt</h2>
  <p>
    Viktor Holovin<br>
    Web Developer<br>
    Włochy
  </p>
</body>
</html>

Otwórz stronę w przeglądarce.

Masz teraz stronę z nagłówkami, akapitami, wyróżnieniem, łamaniem linii i poziomą linią.

Mała strona.

Poprawnie zbudowana strona.

Bardzo szanownie.

Częste Błędy

Używanie nagłówków tylko dla rozmiaru

To błędne myślenie:

<h1>Duży tekst</h1>
<h6>Mały tekst</h6>

Nagłówki to nie tylko rozmiary fontu.

To struktura.

Używaj ich do organizacji treści.

Za dużo h1

Zwykle jedna strona powinna mieć jeden główny h1.

Lepiej:

<h1>Moja Strona</h1>
<h2>O Mnie</h2>
<h2>Kontakt</h2>

Nie tak:

<h1>Moja Strona</h1>
<h1>O Mnie</h1>
<h1>Kontakt</h1>

Strona nie potrzebuje trzech królów.

Jeden wystarczy.

Używanie br do layoutu

Nie używaj wielu tagów br, aby tworzyć odstępy.

Źle:

<br>
<br>
<br>

Później użyjemy CSS do odstępów wizualnych.

HTML powinien opisywać znaczenie.

Praktyka

Stwórz stronę o hobby.

Powinna zawierać:

• jeden h1;
• co najmniej dwie sekcje h2;
• jedną podsekcję h3;
• cztery akapity;
• jeden element strong;
• jeden element em;
• jeden hr;
• jeden przykład z br.

Przykładowe tematy:

• karate;
• programowanie;
• joga;
• podróże;
• gotowanie;
• nauka języków.

Wybierz coś prawdziwego, jeśli możesz.

Prawdziwy tekst jest lepszy niż sztuczny.

Sztuczny tekst nie ma duszy.

Mini Wyzwanie

Stwórz plik:

article.html

Zbuduj prostą stronę artykułu.

Powinna zawierać:

• tytuł strony w karcie przeglądarki;
• tytuł artykułu jako h1;
• akapit wprowadzający;
• trzy sekcje z h2;
• jedną podsekcję z h3;
• słowa z emfazą;
• ważne słowa;
• końcową poziomą linię;
• krótki blok autor/kontakt z br.

Bez CSS.

Bez JavaScriptu.

Tylko czysta struktura tekstu HTML.

Podsumowanie

Dzisiaj nauczyłeś się, że:

• HTML ma sześć poziomów nagłówków od h1 do h6;
• h1 zwykle jest głównym nagłówkiem strony;
• poziomy nagłówków powinny iść logicznie;
• p tworzy akapity;
• strong oznacza ważny tekst;
• em oznacza tekst z emfazą;
• br tworzy znaczące łamanie linii;
• hr tworzy tematyczną przerwę;
• tekst HTML powinien być uporządkowany, czytelny i znaczący.

Tekst jest sercem większości stron webowych.

Jeśli struktura jest jasna, strona od razu staje się lepsza.

Nawet zanim CSS przyjdzie w okularach przeciwsłonecznych.

Następna Lekcja

W następnej lekcji poznamy listy i organizację.

Bo czasem treść potrzebuje porządku.

A czasem potrzebuje punktów.

Bardzo dramatycznych punktów.