Pre nego što nastavimo sa tutorijalom, ukoliko niste; prvo pročitate post Uvod u HTML5, oslobodite vašu kreativnosti tek onda se vratite na ovaj post. Ako ne znate kako da se vratite na ovaj post, kliknite na dugme Go Back vašeg pregledača ili pogledajte stranicu Sadržaj na ovom blogu jer tu ćete uvek pronaći linkove za aktivne postove na ovom blogu. Kad kažemo HTML lista, za većinu programera taj naziv može biti zbunjujući jer lista se može odnositi na reazne liste čak i generičku listu C# programskog jezika, ListBox serversku kontrolu ili čak ListBox HTML kontrolu. U ovom slučaju HTML liste se odnose na formatiranje teksta u različite formate liste pomoću atributa za stil liste. Isti efekat se može postignuti i na drugačiji način, npr. upotrebom određenog type - tipa stila, dok neke od starijih atributa kao npr. reversed koji vam omogućava da listu nabrajate obrnutim redosledom, apsolutno ne rade na primer u Microsoft Edge pregledaču. Iz tog razloga nećemo ih ni koristiti u našim primerima. To je najveća zamerka kod HTML kodiranja što neke stvari se menjaju dok druge ne podržavaju neki od najpoznatiji i najkorišćeniji pregledača. U prethodnom postu gde smo započeli učenje HTML5 već ste imali priliku da se upoznate sa par osnovnih HTML elemenata koji uglavnom čine osnovu HTML stranice. U ovom postu ćete imati mogućnost da naučite kako da organizujete informacije na veb stranici u različitim formatima tekstualnih listi. Upotreba HTML listi je neophodna da bi vaš tekst na vašoj stranici bio profesionalno organizovan i čitljiv. Ono što izdvaja HTML liste od prethodnih elemenata jeste što su HTML liste sastavljene od više tagova koji funkcionišu zajedno.

( HTML liste su sastavljene od više tagova koji rade zajedno )

HTML liste se uglavnom koriste kad god imate bilo kakva nabrajanja u tekstu veb stranice ali imajte u vidu da se HTML lista može koristiti i za navigaciju veb stranica. O tome će biti nešto više kada budemo stigli do učenja kako se kreira navigacija, posebno ona koje mora biti prihvatljiva i za prikaz mobilne verzije veb stranica, ali za sada je neophodno da savladate osnove HTML 5 i da to znate u bilo koje doba kad vas probude. Za sada treba da znate da postoji tri vrste HTML listi i to su:

Neuređene liste
Numerisane liste
Lista definicije

Ali sve njih možete ugnezditi tako što stavljate liste jedne u druge, čak iako su različite. Da bi demonstrirali kako se koriste sve HTML liste najbolje da kreiramo jednu veb stranicu u kojoj ćemo prezentovati njihove mogućnosti. Na sreću praktična primena HTML5 je definitivno jednostavnija od teorije. Imajte samo u vidu da u HTML5 neke stvari pišete kraće, drugačije i da ne zatvaranje tagova gde se to zahteva nije prihvatljivo. U HTML-u niste bili obavezni da koristite zatvorene tagove poput </dd>, </dt>, </li> itd. Ta praksa je loša i vreme je da se prekine sa tim.

Neuređene liste

Neuređene liste nisu numerisane što znači da su odlične kada imate neku listu stavki čije numeričko nabrajanje nije neophodno. Često se koristi i za skup linkova navigacije i padajući menija. Umesto brojeva u neuređenoj listi se stavke izdvajaju buletima poput crtice, velike tačke, kvadrata i kružića. Neuređena lista počinje tagom <ul> i završava sa zatvorenim </ul> tagom dok se za sve stavke uvek koristi isti tagovi <li> i </li> koji mogu da sadrže i druge elemente.

<ul>

<li>English</li>

<li>German</li>

<li>Serbian</li>

</ul>

Kao što možete videti u prethodnom code-u imamo neuređenu listu sa 3 stavke stranih jezika. S obzirom da nije naveden stil za ovu listu, koristi se disc marker koji je inače default za HTML neuređene liste. Rezultat je:

English
German
Serbian

Međutim ako podesimo stil za ovu uređenu listu na circle marker.

<li>English</li>

<li>German</li>

<li>Serbian</li>

</ul>

Rezultat su stavke sa markiranim malim kružićima:

English
German
Serbian

Neuređenu listu možete podesiti i na square marker da bi ste dobili umesto kružića kvadratiće ili na none marker koji će sve stavke prikazivati bez ikakvih buleta.

Numerisane liste

Numerisana lista počinje tagom <ol> i završava sa zatvorenim </ol> tagom dok se za sve stavke uvek koristi isti tagovi <li> i </li> kao i u neuređenim listama koji mogu da sadrže i druge elemente. Koriste se za numerisanje stavki i brojevima i slovima. Prema defaultu su podešeni na decimal i to nije neophodno podešavati ako koristite HTML numerisanu listu prema defaultu. Međutim, u sledećem code-u ćemo postaviti i atribut start na 4. Što znači da želimo da nam odbrojavanje počne od broja 4 umesto 1.

<li>English</li>

<li>German</li>

<li>Serbian</li>

</ol>

Rezultat je:

English
German
Serbian

Kao što sam već naveo, ovde ste mogli navesti atribut reversed da vam numerisanje bude 3, 2, 1 ali to Microsoft Edge ne podržava i ta mogućnost neće raditi. Ono što možete jeste da vaše numerisanje stavki prikažete rimskim brojevima, podešavanjem svojstva liste na upper-roman ili prikazati rimsko numerisanje malim slovima podešavanjem svojstva liste na lower-roman.

<li>English</li>

<li>German</li>

<li>Serbian</li>

</ol>

Rezultat je:

English
German
Serbian

Nabrajanje možete izvršiti i abecednim velikim slovima, podešavanjem svojstva stila liste na upper-alpha ili upper-latin; ili malim slovima lower-alpha ili lower-latin.

Lista definicije

Lista definicije nije kao druge liste. Ona se kreira sa 3 vrste tagova. Prvi otvoreni <dl> i zatvoreni </dl> tagovi označavaju da je HTML lista, lista definicije. Zatim se svaka stavka u listi deli na termin tagovima <dd> i </dd> i na definiciju termina tagovima <dl> i </dl>. Koristi se u slučajevima kada pored stavki trebate i opis istih.

<dl>

<dt>English</dt>

<dd>- can speak in England, United States, Australia...</dd>

<dt>German</dt>

<dd>- can speak in German, Austria, Switzerland...</dd>

<dt>Serbian</dt>

<dd>- can speak in Serbia, Croatia, Bosnia and Herzegovina...</dd>

</dl>

Ugnezditi HTML liste je jednostavno; samo stavite celu strukturu jedne liste u strukturu druge liste. Ali najbolje je da to sami iskodirate. Pronađite projekat html_css_tutorial i kreirajte novi fajl, nazovite isti lesson2.html dokument. Zatim unesite sledeći kôd.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lists in HTML</title>
</head>
<body>
    <h1>Lists in HTML</h1>

        <!-- <p> element defines a paragraph <b> element defines a bold text -->
        <p>This web page presents all kind of lists in <b>HTML</b></p>    

        <h2>An Unordered List</h2>

        <!-- use the HTML special chars &alt for < and &gt for > -->
        <p>An Unordered list starts with the <b>&ltul&gt</b> tag.</p> 

        <!-- disc - sets the list item marker to a bullet (default) -->
        <ul>
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>

        </ul>

        <!-- square - sets the list item marker to a square -->
        <ul style="list-style-type: square;">
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>
        
        </ul>

        <!-- none - the list item will not be marker -->
        <ul style="list-style-type: none;">
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>

        </ul>

        <h2>An Ordered List</h2>

        <!-- use the HTML special chars &lt for < and &gt for > -->
        <p>An ordered list starts with the <b>&ltol&gt</b> tag.</p>

        <!-- decimal - the list items will be numbered with numbers (default) -->
        <ol>
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>

        </ol>

        <!-- decimal with start - the list items will be numbered with numbers from 
             the start number -->

        <ol style="list-style-type: decimal;" start="4">
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>

        </ol>

        <!-- upper-alpha - the list items will be numbered with uppercase letters -->
        <ol style="list-style-type: upper-alpha;">
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>

        </ol>

        <!-- lower-alpha - the list items will be numbered with lowercase letters -->
        <ol style="list-style-type: lower-alpha;">
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>

        </ol>

        <!-- upper-roman - the list items will be numbered with uppercase roman numbers -->
        <ol style="list-style-type: upper-roman;">
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>

        </ol>

        <!-- lower-roman - the list items will be numbered with lowercase roman numbers -->
        <ol style="list-style-type: lower-roman;">
            <li>English</li>
            <li>German</li>
            <li>Serbian</li>

        </ol>

        <h2>A Description List</h2>

        <p>The <b>&ltdl&gt</b> tag defines the description list, the <b>&ltdt&gt</b>
            tag defines the name, and the <b>&ltdd&gt</b> tag describes each term.</p>
        
        <dl>
            <dt>English</dt>
            <dd>- can speak in England, United States, Australia...</dd>
            <dt>German</dt>
            <dd>- can speak in German, Austria, Switzerland...</dd>
            <dt>Serbian</dt>
            <dd>- can speak in Serbia, Croatia, Bosnia and Herzegovina...</dd>

        </dl>

        <h2>A Nasted List</h2>

        <p>The list can be nasted.</p>

        <ul>
            <li>English</li>
            <ul>
                <li>American English</li>
                <li>British English</li>
            </ul>
            <li>German</li>
            <li>Serbian</li>
        </ul>

        <footer> <!-- can use for information about the copyrights-->
            <h5>&copy;2023 Manuel Radovanovic</h5>
            
        </footer>
   

        <br/><br/><br/><br/>
</body>
</html>

Obratite pažnju da sam u code-u koristio tagove za pasus <p> i </p>, zatim specijalne HTML znake &lt za < i &gt za >, specijalni HTML znak &copy; za kopirajt i tagove <footer> i </footer> za donji deo veb stranice. Kad pokrenete navedeni HTML code u pregledaču dobićete sledeći rezultat.