HTML I CSS · INF.03 · MODUŁ 02

Tekst, listy i linki

Dobra strona to nie ściana tekstu. Nauczysz się dzielić treść i prowadzić użytkownika po linkach.

Wprowadzenie

Tekst na stronie nie może być jedną długą ścianą. HTML daje narzędzia do dzielenia treści i nadawania jej znaczenia: wyróżniasz ważne fragmenty, budujesz listy i prowadzisz użytkownika linkami.

Znaczniki formatujące nie służą tylko do zmiany wyglądu. <strong> oznacza ważną informację, <em> — akcent, <mark> — fragment wyróżniony, a <code> — krótki kod. Czytnik ekranu korzysta z tych znaczeń.

Listy porządkują informacje. <ul> służy do wyliczeń bez kolejności, <ol> — do kroków, a <dl> — do słownika pojęć. Linki łączą strony i sekcje; mogą prowadzić do adresu internetowego, poczty, telefonu albo miejsca w tym samym dokumencie.

Dobry link mówi, dokąd prowadzi. „Kliknij tutaj” nic nie wnosi, a „pobierz cennik” od razu wyjaśnia cel. To szczególnie ważne dla osób, które przeglądają stronę czytnikiem ekranu albo klawiaturą.

Najważniejsza własność

Najważniejsza zasada brzmi: najpierw znaczenie, potem wygląd. Wybieraj element po sensie treści, a nie po tym, jak domyślnie wygląda. CSS i tak może zmienić każdy styl.

Formatowanie tekstu

Listy i linki

Link tworzysz elementem <a> z atrybutem href. Adres może być bezwzględny (pełny adres z https://), względny (ścieżka do pliku w serwisie), pocztowy (mailto:), telefoniczny (tel:) albo prowadzić do kotwicy (#sekcja).

Link zewnętrzny otwierany w nowej karcie zapisujesz jako <a href="https://..." target="_blank" rel="noopener">. Atrybut rel="noopener" odcina nowej stronie dostęp do obiektu window.opener i utrudnia podmianę adresu w karcie z Twoją stroną.

<p>Zobacz <a 
      — wybierz —
      href
      src
      link
    ="https://example.com" target="
      — wybierz —
      _self
      _blank
      _top
    " rel="
      — wybierz —
      nofollow
      stylesheet
      noopener
    ">nasze portfolio</a>.</p>

Przykłady

Przykład 1 — formatowanie tekstu

Wyróżnij ważne fragmenty, pokaż krótki kod i dodaj cytat ze źródłem. Zwróć uwagę, że każdy znacznik ma inne znaczenie, nie tylko inny wygląd.

HTML

<h1>Formatowanie tekstu</h1>
<p>To jest <strong>ważna informacja</strong>, a to <em>akcent</em>.</p>
<p>Wynik działania: <mark>48 punktów</mark>.</p>
<p>Fragment kodu: <code>&lt;strong&gt;</code>.</p>
<blockquote>
  <p>Dobra strona zaczyna się od dobrej treści.</p>
  <p><cite>— Jan Kowalski, projektant</cite></p>
</blockquote>
<p>Pierwsza linia.<br>Druga linia po znaczniku br.</p>
<hr>
<p>Pozioma linia oddziela sekcje.</p>

podgląd w przeglądarce

1. <strong> oznacza ważną informację, a <em> — akcent w zdaniu.
2. <mark> wyróżnia fragment tłem, a <code> zmienia krój na monospace.
3. <blockquote> tworzy cytat, a <cite> podaje jego źródło.
4. <br> łamie linię w obrębie akapitu, a <hr> oddziela sekcje.

Wynik: tekst ma znaczenie i czytelny podział. Wygląd można później zmienić w CSS, ale sens znaczników pozostaje.

Przykład 2 — listy: ul, ol, zagnieżdżona i dl

Zbuduj cztery rodzaje list: wyliczenie, kroki, listę zagnieżdżoną i słownik pojęć. Pamiętaj, że zagnieżdżona lista jest częścią elementu li.

HTML

<h1>Listy w HTML</h1>
<h2>Zakupy</h2>
<ul>
  <li>mleko</li>
  <li>chleb</li>
  <li>jajka</li>
</ul>
<h2>Plan dnia</h2>
<ol>
  <li>Śniadanie</li>
  <li>Nauka HTML
    <ul>
      <li>powtórka</li>
      <li>ćwiczenia</li>
    </ul>
  </li>
  <li>Spacer</li>
</ol>
<h2>Słownik pojęć</h2>
<dl>
  <dt>HTML</dt>
  <dd>język opisu struktury strony</dd>
  <dt>CSS</dt>
  <dd>język opisu wyglądu strony</dd>
</dl>

podgląd w przeglądarce

1. <ul> stosujesz wtedy, gdy kolejność elementów nie ma znaczenia.
2. <ol> numeruje kroki automatycznie — nie wpisujesz numerów w treści.
3. Zagnieżdżoną listę wkładasz do <li>, nie bezpośrednio do <ul>.
4. <dl> łączy pojęcie <dt> z definicją <dd>.

Wynik: listy porządkują treść i są czytelne dla czytników ekranu. Zagnieżdżenie pokazuje zależność między elementami.

Przykład 3 — linki: nawigacja, link zewnętrzny, mailto i kotwica

Połącz sekcje tej samej strony, dodaj link zewnętrzny otwierany w nowej karcie oraz linki do poczty i telefonu. Każdy link ma opisowy tekst.

HTML

<h1>Linki</h1>
<nav aria-label="Nawigacja główna">
  <a href="#oferta">Oferta</a> |
  <a href="#kontakt">Kontakt</a>
</nav>
<h2 id="oferta">Oferta</h2>
<p>
  Zobacz
  <a href="https://example.com"
     target="_blank"
     rel="noopener">przykładową stronę</a>
  (otwiera się w nowej karcie).
</p>
<h2 id="kontakt">Kontakt</h2>
<p>Napisz: <a href="mailto:biuro@example.com">biuro@example.com</a></p>
<p>Zadzwoń: <a href="tel:+48123456789">+48 123 456 789</a></p>
<p><a href="#oferta">Wróć do oferty</a></p>

podgląd w przeglądarce

1. href="#oferta" prowadzi do elementu z id="oferta" w tym samym dokumencie.
2. Link zewnętrzny ma pełny adres, target="_blank" i rel="noopener".
3. mailto: otwiera program pocztowy, a tel: — dialer telefonu.
4. Tekst linku mówi, dokąd prowadzi; aria-label opisuje całą nawigację.

Wynik: nawigacja, link zewnętrzny, poczta i telefon działają w jednym dokumencie. Użytkownik wie, dokąd prowadzi każdy link.

Spróbuj samodzielnie

1. Sformatuj zdanie: „Ważne: egzamin odbędzie się 12 maja. Przeczytaj rozdział 3.” Użyj <strong> dla słowa „Ważne”, <em> dla „egzamin”, <mark> dla daty i <code> dla „rozdział 3”. Dodaj krótki cytat z <cite>.

   Pokaż rozwiązanie

   Każdy fragment opakuj w znacznik zgodny ze znaczeniem. Cytat umieść w <blockquote>, a źródło w <cite>.

   HTML

   <p><strong>Ważne:</strong> <em>egzamin</em> odbędzie się <mark>12 maja</mark>.</p>
   <p>Przeczytaj <code>rozdział 3</code>.</p>
   <blockquote>
     <p>Powtórzenie to najlepszy sposób nauki.</p>
     <p><cite>— Jan Kowalski</cite></p>
   </blockquote>

2. Zbuduj listę „Kursy” z dwoma elementami: HTML i CSS. Pod HTML umieść „struktura” i „tekst”, a pod CSS „selektory” i „box model”. Użyj listy zagnieżdżonej.

   Pokaż rozwiązanie

   Zagnieżdżoną listę wstaw do środka elementu <li> nadrzędnego punktu. Dzięki temu czytnik ekranu odczyta ją jako część tego punktu.

   HTML

   <ul>
     <li>HTML
       <ul>
         <li>struktura</li>
         <li>tekst</li>
       </ul>
     </li>
     <li>CSS
       <ul>
         <li>selektory</li>
         <li>box model</li>
       </ul>
     </li>
   </ul>

3. W nawigacji są błędy: link „Strona główna” nie ma protokołu, link zewnętrzny nie ma zabezpieczenia, a teksty „Kliknij tutaj” i „Mail” nie mówią, dokąd prowadzą. Popraw kod i dodaj opis nawigacji.

   HTML — kod z błędami

   <nav>
     <a href="www.example.com">Strona główna</a>
     <a href="https://example.com" target="_blank">Kliknij tutaj</a>
     <a href="mailto:biuro@example.com">Mail</a>
     <a href="tel:123456789">Telefon</a>
     <a href="#kontakt">Kontakt</a>
   </nav>

   Pokaż rozwiązanie

   Dodaj pełny protokół, rel="noopener" i opisowe teksty linków. Numer telefonu zapisz z kierunkowym kraju, a nawigację opisz przez aria-label.

   HTML — kod poprawny

   <nav aria-label="Nawigacja główna">
     <a href="https://example.com">Strona główna</a>
     <a href="https://example.com/portfolio"
        target="_blank"
        rel="noopener">Zobacz portfolio</a>
     <a href="mailto:biuro@example.com">Napisz e-mail</a>
     <a href="tel:+48123456789">Zadzwoń: +48 123 456 789</a>
     <a href="#kontakt">Przejdź do kontaktu</a>
   </nav>

Podsumowanie. Znaczniki tekstowe nadają treści sens, listy ją porządkują, a linki prowadzą do innych miejsc. Pamiętaj o opisowych tekstach linków, poprawnych adresach i rel="noopener" przy target="_blank".