Listy

Czas zająć się jednym z często używanych elementów w HTML jakim są listy. Dzielimy je na trzy główne rodzaje: listy uporządkowanie, nieuporządkowane oraz listy definicji. Zaczniemy od tych pierwszych, czyli list uporządkowanych:

Listy uporządkowane w języku html to takie, których elementy posiadają pewną numerację, stąd też zwyczajowa nazwa lista numerowana. Numeracje w tych listach możemy uzyskać poprzez cyfry, bądź litery.

Przykład:

1. pierwszy element
2. drugi element
3. trzeci element

A w kodzie wygląda to tak:

<ol>							- początek listy uporządkowanej
	<li> pierwszy element </li>	- poszczególne elementy listy
	<li> drugi element </li>
	<li> trzeci element </li>
</ol>							- koniec listy uporządkowanej 
					

Tak więc aby utworzyć uporządkowaną listę wystarczy zapamiętać dwa znaczniki ol oraz li

---

Drugim rodzajem list którym się przyjrzymy są listy nieuporządkowane

Lista nieuporządkowana zwana też listą wypunktowaną. Elementy tej listy nie są numerowane, a luźno wymienione po tzw. myślnikach. Domyślnie rolę tych myślników przejmują kropki.

• pierwszy element
• drugi element
• trzeci element

A w kodzie wygląda to tak:

<ul>							- początek listy nieuporządkowanej
	<li> pierwszy element </li>	- poszczególne elementy listy
	<li> drugi element </li>
	<li> trzeci element </li>
</ul>							- koniec listy nieuporządkowanej 
					

Tak więc aby utworzyć nieuporządkowaną listę wystarczy zapamiętać iż zamiast ol używamy ul

---

Ostatnim rodzajem list którym się zajmiemy są listy definicji

Lista definicji oprócz nazwy różni się trochę od poprzednich list. W tej liście do danego pojęcia przypisujemy określoną definicję (stąd nazwa), tak jakbyśmy pisali słownik.

HTML

Hyper Text Markup Language

Strona internetowa

Dokument HTML

A w kodzie wygląda to tak:

<dl>
	<dt> HTML </dt>						- znacznik pojęcia
	<dd> Hyper Text Markup Language </dd> 	- znacznik definicji
	<dt> Strona internetowa </dt>
	<dd> Dokument HTML </dd>
</dl>
					

Tak więc aby utworzyć listę definicji potrzebujemy trzech znaczników: dl, dt, dd

---

Omówiliśmy już wszystkie rodzaje list ale warto jeszcze wspomnieć o czymś takim jak listy zagnieżdżone

Listy zagnieżdżone to inaczej mówiąc lista w liście, a wygląda to tak:

• 1
  • 1.1
  • 1.2
• 2
• 3
  • 3.1
  • 3.2
  • 3.3

Konstrukcja takiej listy jest prosta i logiczna, w kodzie wygląda to tak:

<ul>
	<li> 1 					- znacznik otwierający pierwszy element listy głównej
		<ul>					- znacznik otwierający listę podporządkowaną
			<li> 1.1 </li>		- element listy podporządkowanej
			<li> 1.2 </li>		- element listy podporządkowanej
		<ul>					- znacznik zamykający listę podporządkowaną
	</li>						- znacznik zamykający pierwszy element listy głównej
	<li> 2 </li>
	<li> 3 
		<ul>
			<li> 3.1 </li>
			<li> 3.2 </li>
			<li> 3.3 </li>
		</ul>
	</li>
</ul>