• Artykuł

          

Samouczek: Listy HTML - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Norbert Blandzi

Opublikowano: 2011-09-20

Podczas tworzenia strony internetowej często pojawia się problem wypisania elementów w kolejności, ich wypunktowania lub wykonania menu. Do tego celu przeznaczone są znaczniki dostępne w HTML. Warto zwrócić uwagę na to, iż list nie tworzymy poprzez wykorzystywanie tabelek czy obrazków, jak to zwykli robić niektórzy początkujący programiści. Przygotowane do tego celu zostały inne znaczniki.

Przed wykonaniem powinieneś przeczytać samouczki:

Po wykonaniu zadań nauczysz się:

  • tworzyć listę: numerowaną, wypunktowaną i definicji,
  • tworzyć menu wykorzystując listy, a także, w jaki sposób je formatować, wykorzystując Kaskadowe Arkusze Stylów (CSS).

Implementacja

Twoim zadaniem jest utworzenie listy numerowanej, wypunktowanej oraz definicji. Do formatowania list, zamiast standardowych znaczników HTML, wykorzystamy CSS - Kaskadowe Arkusze Stylów.

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy.

Przygotowanie strony

Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.

  1. Otwórz edytor HTML i utwórz szkielet strony.
<html>
    <head>
        <title>Listy HTML</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    </body>
</html>
  1. Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej. Upewnij się, czy tytuł strony jest taki, jaki chcieliśmy oraz czy widoczna jest treść. Jeżeli tak – możemy przejść do kolejnego kroku.

Lista numerowana

W celu utworzenia listy numerowanej, pomiędzy znacznikami <body></body>, należy dodać wg schematu:

<ol>
    <li>element 1</li> 

    <li>element 2</li>
    ...
</ol>

Znacznik <ol> określa, że lista ma być numerowana, a znacznik <li> oznacza kolejny element listy.

  1. Ustaw kursor za znacznikiem body i dodaj nową linię.
  2. Wpisz:
<ol>
    <li>Rosja</li>
    <li>Ukraina</li>
    <li>Francja</li>
    <li>Hiszpania</li>
    <li>Szwecja</li>
</ol>
  1. Do znacznika <style> dodaj:
ol { list-style-type: lower-alpha; }
Informacja

Atrybut, przypisujący znak na początku każdej linii, może być określony jako:

  • lower-alpha – małe litery alfabetu łacińskiego
  • upper-alpha – duże litery alfabetu łacińskiego
  • decimal – cyfry arabskie (domyślne)
  • lower-roman – małe cyfry rzymskie
  • upper-roman – duże cyfry rzymskie
  • none – brak

Więcej informacji znajdziesz w encyklopedii pod hasłem Jak tworzyć listę numerowaną w HTML oraz Jak formatować listę numerowaną w CSS.
  1. Zapisz plik i sprawdź, czy wygląda tak, jak na Rys. 2.

Rys 2. Plik index.html po dodaniu listy numerowanej.

  1. W przeglądarce odśwież plik index.html i zobacz, czy wygląda tak, jak na Rys. 3.

Rys. 3. Lista numerowana po zastosowaniu formatowania.

Lista wypunktowana

W celu utworzenia listy wypunktowanej, pomiędzy znacznikami <body></body>, należy dodać wg schematu:

<ul>
    <li>element 1</li> 

    <li>element 2</li>
    ...
</ul>

Znacznik <ul> umożliwia stworzenie listy wypunktowanej, a <li> oznacza kolejny element listy.

  1. Ustaw kursor za znacznikiem </ol> i dodaj nową linię.
  2. Wpisz:
<ul>
    <li>banan</li> 
    <li>pomarańcza</li>
    <li>jabłko</li>
    <li>kiwi</li>
    <li>truskawki</li>
</ul>
  1. Do znacznika <style> dodaj:
ul { list-style-type: square; }
Informacja

Atrybut, przypisujący znak na początku każdej linii, może być określony jako:

  • square – wypełniony kwadrat,
  • disc – wypełnione kółko (domyślnie),
  • circle – kółko puste w środku,
  • none – brak.

Więcej informacji znajdziesz w encyklopedii pod hasłem Jak tworzyć listę wypunktowaną w HTML oraz Jak formatować listę wypunktowaną w CSS.
  1. Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 4.

Rys 4. Plik index.html po dodaniu listy wypunktowanej.

  1. Otwórz plik index.html w przeglądarce i sprawdź, czy dodana lista wygląda tak, jak na Rys. 5.

Rys. 5. Lista wypunktowana po zastosowaniu formatowania.

Lista definicji

W celu utworzenia listy definicji, pomiędzy znacznikami <body></body>, należy dodać wg schematu:

<dl>
    <dt>element 1</dt> 
    <dd>definicja 1</dd>

    <dt>element 2</dt> 
    <dd>definicja 2</dd>
    ...
</dl>

Znacznik <dl> oznacza nową listę definicji, <dt> to nowy element na liście, a <dd> to jego definicja.

  1. Ustaw kursor za znacznikiem </ul> i dodaj nową linię.
  2. Wpisz:
<dl>
    <dt>młotek</dt> 
        <dd> jedno z najstarszych narzędzi używanych przez człowieka, służące do uderzania w materiał w celu jego obróbki, do uderzania w inne narzędzie (np. dłuto, przecinak) lub do wbijania w różne powierzchnie gwoździ</dd>
    <dt>łopata</dt> 
        <dd>to narzędzie służące do podnoszenia i przenoszenia materiałów sypkich, takich jak węgiel, gruz, śnieg, piasek, ziemia</dd>
    <dt>kilof</dt> 
        <dd>narzędzie służące do rozdrabniania większych części skalnych i wstępnego rozdrabniania twardego podłoża</dd>
</dl>
  1. Do znacznika <style> dodaj:
dt { font-weight: 800; font-size: 20; }
  1. Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 6.

Rys. 6. Plik index.html po dodaniu listy definicji.

  1. Otwórz plik index.html w przeglądarce i sprawdź, czy strona wygląda tak, jak na Rys. 1.
Informacja
Więcej informacji znajdziesz w Jak tworzyć listę definicji w HTML oraz Jak formatować listę definicji w CSS.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML:

<html>
<head>
    <title>Listy HTML</title>
    <style type="text/css">
        ol { list-style-type: lower-alpha; }
        ul { list-style-type: square; }
        dt { font-weight: 800; font-size: 20; }
    </style>
</head>
<body>
    <ol>
        <li>Rosja</li>
        <li>Ukraina</li>
        <li>Francja</li>
        <li>Hiszpania</li>
        <li>Szwecja</li>
    </ol>
    <ul>
        <li>banan</li> 
        <li>pomarańcza</li>
        <li>jabłko</li>
        <li>kiwi</li>
        <li>truskawki</li>
    </ul>
    <dl>
        <dt>młotek</dt> 
        <dd> jedno z najstarszych narzędzi używanych przez człowieka, służące do uderzania w materiał w celu jego obróbki, do uderzania w inne narzędzie (np. dłuto, przecinak) lub do wbijania w różne powierzchnie gwoździ</dd>
    <dt>łopata</dt> 
        <dd>to narzędzie służące do podnoszenia i przenoszenia materiałów sypkich, takich jak węgiel, gruz, śnieg, piasek, ziemia</dd>
        <dt>kilof</dt> 
            <dd>narzędzie służące do rozdrabniania większych części skalnych i wstępnego rozdrabniania twardego podłoża</dd>
    </dl>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się, jak tworzyć listę numerowaną, wypunktowaną i definicji, a także jak formatować je za pomocą CSS.

W kolejnym artykule nauczymy się wykorzystywać możliwości elementu blokowego i liniowego.

Dodatkowo zobacz: