logo
Wróć do spisu ♥
Następna lekcja ♥ ⇒
⇐ Poprzednia lekcja ♥

4. Listy

W tej lekcji zajmiemy się listami. Są one bardzo często używane, gdyż dają sporo ciekawych możliwości. Dzielimy je na trzy grupy: Listy uporządkowane, Listy nieuporządkowane oraz Listy definicji. To też nie traćmy czasu i przejdźmy do ich omówienia.

Listy uporządkowane

Są to listy, które posiadają jakąś numeracje. Zazwyczaj jest to numeracja liczbowa bądź literowa.

Oto przykład:

  1. Śniadanie
  2. Obiad
  3. Kolacja

A jak będzie wyglądał kod? 

<ol>				        - początek listy uporządkowanej, znacznik >ol> określa jej ramy
	<li> Śniadanie </li>	- w znaczniku >li> zapisujemy elementy naszej listy
	<li> Obiad </li>
	<li> Kolacja </li>
</ol>					-  znacznik >/ol> określa koniec listy uporządkowanej

Podsumowując aby utworzyć listę uporządkowaną należy zapamiętać tylko dwa znaczniki ol oraz li .

Listy nieuporządkowane

Są to listy, które nie posiadają numeracji. Ich elementy są "luźno" wymienione od punktorów. Domyślnie są to kropki.

Oto przykład:

  • mleko
  • płatki
  • dżem

A tak wygląda kod 

<ul>				        - znacznik otwierający liste nieuporządkowaną
	<li> mleko </li>	        - poszczególne elementy listy
	<li> płatki </li>
	<li> dżem </li>
</ul>					- znacznik zamykający listę nieuporządkowaną

Podsumowując aby utworzyć listę nieuporządkowaną należy zapamiętać również tylko dwa znaczniki ul oraz li .

Listy definicji

Ta lista odrobinę różni się od pozostałych, nie tylko nazwą, ale również
i znacznikami. Przypisujemy w niej do danego pojęcia określoną definicję

Oto przykład:

DOCTYPE
deklaracja języka, jakim jest napisany dokument HTML
encja
sekwencja znaków, odpowiadająca danemu znakowi

A tak wygląda kod 

<dl>                                                                        - znacznik określający ramy listy definicji
	<dt> HTML </dt>						- tak wygląda znacznik pojęcia
	<dd> Hyper Text Markup Language </dd> 	- a tak znacznik definicji
	<dt> Strona internetowa </dt>
	<dd> Dokument HTML </dd>
</dl>

Podsumowując aby utworzyć listę definicji należy zapamiętać tym razem, aż trzy znaczniki dl , dt oraz dd .

Listy zagnieżdżone

To lista, która jest umieszczona w innej liście.

A mianowicie to takie cudo:

  • Owoce
    • Gruszka
    • Banan
    • Jagody
  • Nabiał
  • Warzywa
    • Marchew
    • Ogórek

Kod prezentuje się w ten sposób: 

<ul>
	<li> Owoce					- znacznik otwierający pierwszy element listy głównej
		<ul>					- znacznik otwierający listę podporządkowaną
			<li> Gruszka </li>		- element listy podporządkowanej
			<li> Banan </li>		- element listy podporządkowanej
			<li> Jagody </li>	        - element listy podporządkowanej
			
		</ul>					- znacznik zamykający listę podporządkowaną
	</li>						- znacznik zamykający pierwszy element listy głównej
	<li> Nabiał </li>
	<li> Warzywa 
		<ul>
			<li> Marchew </li>
			<li> Ogórek </li>
		</ul>
	</li>
</ul>

Podsumowując aby utworzyć listę zagnieżdżoną należy opanować umiejętność tworzenia wyżej wymienionych list i odpowienio umieścić je w kodzie.

Właściwość: list-style-type

Przy okazji pragnę wprowadzić Ci właściwość CSS dotyczącą własnie list. Służy ona do zmiany rodzaju punktora i będzie umieszczana w przypadku arkusza lokalnego w atrybucie style. Jak dokładnie to robić dowiesz się w późniejszych lekcjach.

Przykład:

  • mleko
  • płatki
  • dżem

Myślę, że zdziwisz się patrząc na kod, jak banalne to było: 

<  ul style="list-style-type: katakana">        -dodana właściwość, która zmienia rodzaj punktorów
	<li> mleko </li>	                   
	<li> płatki </li>
	<li> dżem </li>
</ul>

Podsumowując aby zmienić rodzaj punktorów, nalezy wpisać style="list-style-type: rodzaj_punktora;" . W późniejszym okresie czasu, nayczysz sie jak jeszcze możesz to robić. Rodzaje punktorów możesz sprawdzić na stronie w3c school.

Kontakt

Tel: 512-345-287
Palcza 15
34-211 Palcza

Strone wykonała

Paulina Pasternak
E-mail: paula.pasternak@wp.pl