HTML prvi koraci - lekcija 3 - tagovi lista ul, ol. Atributi HTML tagova.
Vrlo često na sajtovima se koriste liste: u menijima, u tekstu za nabrajanje nečega. Počnimo sa najpopularnijim tipom liste - nenumerisana lista <UL></UL> (unordered list - nenumerisana lista).
UL lista
UL lista se koristi za menije, za liste sa markerima, i preko HTML-a možemo definisati izgled markera.
Izmenimo naš HTML kod:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ul>
</ul>
</body>
</html>
U dokumentu će se prikazati samo naslov jer je lista prazna, dodajmo stavke u listu koristeći tagove <LI></LI> (list item - stavka liste).
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ul>
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treća stavka</li>
</ul>
</body>
</html>
Sada će se prikazati markirana lista. Izgled markera možemo menjati pomoću atributa taga <UL>.
Atributi HTML tagova
Kao što sam pomenuo, tag UL ima atribute. Svi HTML tagovi imaju atribute, kasnije ćemo ih detaljno proučiti, a sada ćemo objasniti šta je atribut. Atribut nam omogućava da kontrolišemo prikaz HTML taga: boju, veličinu, oblik i slično. Za tag UL možemo podesiti izgled markera: krug, kružić ili kvadrat.
Atributi imaju ovaj oblik:
<tag atribut="vrednost atributa">
Ovako u samom tagu pišemo kako želimo da se tag prikazuje. Za UL atribut se zove type:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ul type="square">
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treća stavka</li>
</ul>
</body>
</html>
Osvježite stranicu u pretraživaču i videćete da su markeri kvadratni (square - kvadrat). Takođe, možemo koristiti kružiće (circle):
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ul type="circle">
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treća stavka</li>
</ul>
</body>
</html>
Možete koristiti različite markere u listi, ali onda je potrebno da i tagu li dodate atribut type:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ul type="circle">
<li>Prva stavka</li>
<li type="square">Druga stavka</li>
<li>Treća stavka</li>
</ul>
</body>
</html>
Podrazumevano, tagovi UL i LI koriste tip markera disc (krug):
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ul type="disc">
<li>Prva stavka</li>
<li type="square">Druga stavka</li>
<li>Treća stavka</li>
</ul>
</body>
</html>
Sada uklonimo atribut type sa taga UL i pogledajmo šta će se desiti:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ul>
<li>Prva stavka</li>
<li type="square">Druga stavka</li>
<li>Treća stavka</li>
</ul>
</body>
</html>
Sada napravimo sve tri stavke sa različitim markerima:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ul>
<li type="disc">Prva stavka</li>
<li type="square">Druga stavka</li>
<li type="circle">Treća stavka</li>
</ul>
</body>
</html>
Verujem da sada znate gde se pišu atributi tagova, dalje ćemo proučavati još mnogo različitih atributa.
OL liste
Tag OL (ordered list - numerisana lista) nije toliko čest kao UL, ali se često koristi kada treba prikazati niz koraka, hronologiju događaja, numeraciju objekata i slično. Svuda gde je potrebno numerisati stavke, koristi se OL.
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ol>
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treća stavka</li>
</ol>
</body>
</html>
Kao i UL, OL ima atribut type, ali vrednosti za OL su drugačije:
- type="A" - velika slova latiničnog alfabeta;
- type="a" - mala slova latiničnog alfabeta;
- type="I" - velika rimska slova;
- type="i" - mala rimska slova;
- type="1" - arapski brojevi (podrazumevano).
Možete isprobati različite vrednosti atributa type za OL. Evo jednog primera:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<ol type="i">
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treća stavka</li>
<li>Četvrta stavka</li>
</ol>
</body>
</html>