Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Listy

Wyróżniamy następujące rodzaje list:
  • listy wypunktowane (nieuporządkowane),
  • listy numerowane (uporządkowane),
  • listy definicji.

Proste listy wypunktowane

<ul>Tutaj kolejne punkty</ul> - ten znacznik obejmuje punkty listy <li>Treść kolejnego punktu</li>. Kod tworzący prostą listę wypunktowaną wygląda następująco:

<body>
  <ul>
    <li>pierwszy punkt listy wypunktowanej</li>
    <li>drugi punkt listy wypunktowanej</li>
    <li>trzeci punkt listy wypunktowanej</li>
    <li>...</li>
  </ul>
</body>

Ćwiczenie 2_1_4_1

Wykonaj stronę WWW pokazującą listę wypunktowaną zgodnie z pokazanym wyżej kodem.

Tak powinna wyglądać poprawnie wykonana strona:

Zagnieżdżone listy wypunktowane

Listy wypunktowane można zagnieżdżać. Znacznik zamykający </li> zamyka wtedy podlistę umieszczoną w damym punkcie <li>:

<body>
  <ul>
    <li>
      pierwszy punkt listy
      <ul>
        <li>pierwszy podpunkt punktu pierwszego</li>
        <li>drugi podpunkt punktu pierwszego</li>
      </ul>
    </li>
    <li>drugi punkt listy</li>
  </ul>
</body>

Ćwiczenie 2_1_4_2

Wykonaj stronę WWW pokazującą zagnieżdżoną listę wypunktowaną zgodnie z pokazanym wyżej kodem.

Tak powinna wyglądać poprawnie wykonana strona:

Zwróć uwagę, że podpunkty są pokazywane za pomocą innego znaku graficznego.

Proste listy numerowane

<ol>Tutaj kolejne punkty</ol> - ten znacznik obejmuje punkty listy <li>Treść kolejnego punktu</li>. Kod tworzący prostą listę numerowaną wygląda następująco:

<body>
  <ol>
    <li>pierwszy punkt listy numerowanej</li>
    <li>drugi punkt listy numerowanej</li>
    <li>trzeci punkt listy numerowanej</li>
    <li>...</li>
  </ol>
</body>

Ćwiczenie 2_1_4_3

Wykonaj stronę WWW pokazującą listę numerowaną zgodnie z pokazanym wyżej kodem.

Tak powinna wyglądać poprawnie wykonana strona:

Zagnieżdżone listy numerowane

Listy numerowane można zagnieżdżać. Znacznik zamykający </li> zamyka wtedy podlistę umieszczoną w damym punkcie <li>:

<body>
  <ol>
    <li>
      pierwszy punkt listy
      <ol>
        <li>pierwszy podpunkt punktu pierwszego</li>
        <li>drugi podpunkt punktu pierwszego</li>
      </ol>
    </li>
    <li>drugi punkt listy</li>
  </ol>
</body>

Ćwiczenie 2_1_4_4

Wykonaj stronę WWW pokazującą zagnieżdżoną listę numerowaną zgodnie z pokazanym wyżej kodem.

Tak powinna wyglądać poprawnie wykonana strona:

Listy mieszane

Zarówno listy punktowane jak i numerowane można zagnieżdżać praktycznie do dowolnego poziomu, przy czym lista kolejnego poziomu może być inna jak poziomu "rodzica". W poniższym przykładzie pierwszy punkt listy numerowanej posiada dwa podpunkty listy wypunktowanej:

<body>
  <ol>
    <li>
      pierwszy punkt listy
      <ul>
        <li>pierwszy podpunkt punktu pierwszego</li>
        <li>drugi podpunkt punktu pierwszego</li>
      </ul>
    </li>
    <li>drugi punkt listy</li>
  </ol>
</body>

Ćwiczenie 2_1_4_5

Wykonaj stronę WWW pokazującą listę mieszaną zgodnie z pokazanym wyżej kodem.

Tak powinna wyglądać poprawnie wykonana strona:

Ćwiczenie 2_1_4_6

Wykonaj stronę WWW pokazującą listę mieszaną wielopoziomową zgodnie z pokazanym niżej kodem.


<body>
  <ol>
    <li>
      Punkt 1 listy numerowanej ma dwa podpunkty numerowane.
      <ol>
        <li>
          Ten podpunkt listy numerowanej ma dwa wypunktowania:
          <ul>
            <li>pierwsze wypunktowanie,</li>
            <li>drugie wypunktowanie.</li>
          </ul>
        </li>
        <li>Ten podpunkt listy numerowanej nie ma podpunktów.</li>
      </ol>
    </li>
    <li>
      Punkt 2 listy numerowanej ma podpunkty:
      <ul>
        <li>podpunkt 1,</li>
        <li>podpunkt 2.</li>
      </ul>
    </li>
    <li>Punkt 3 listy numerowanej nie ma podpunktów.</li>
  </ol>
</body>

Tak powinna wyglądać poprawnie wykonana strona:

Lista definicji

<dl></dl> - ten znacznik obejmuje teksty, wraz ich opisem:
<dt>Tekst opisywany</dt>,
<dd>Tekst opisujący</dd>.
Przykład kodu tworzącego listę definicji:

<body>
  <dl>
    <dt>Pierwszy tekst do opisania (zdefiniowania)</dt>
    <dd>Opis (definicja) tekstu pierwszego</dd>
    <dt>Drugi tekst do opisania (zdefiniowania)</dt>
    <dd>Opis (definicja) tekstu drugiego</dd>
  </dl>
</body>

Ćwiczenie 2_1_4_7

Wykonaj stronę WWW pokazującą listę definicji zgodnie z pokazanym wyżej kodem.

Tak powinna wyglądać poprawnie wykonana strona:

Zasady interpunkcji podzas sporządzania list

Inne zasady stosujemy gdy lista jest fragmentem tekstu, a inne podczas tworzenia plakatów i ulotek reklamowych.
W tekście ciągłym punkty listy zamyka się przecinkiem gdy punkty są krótkie, lub średnikiem gdy są dłuższe i same zawierają przecinki. Kropkę stawiamy wtedy gdy punkty mają charakter pełnych zdań, wtedy też powinno się je otwierać wielką literą. Te zasady stosujemy we wszystkich listach.
W plakatach, ogłoszeniach, ulotkach reklamowych – wszędzie tam, gdzie względy wizualne są nie mniej ważne niż treść, poszczególnych punktów zwykle nie zamyka się żadnym znakiem interpunkcyjnym.

Praca domowa

  1. Wykonaj ponownie wszystkie ćwiczenia z lekcji wymyślając tym razem swoje listy.
  2. Opanuj na pamięć nowe terminy - musisz umieć własnymi słowami wytłumaczyć jak tworzy się listy.

Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.