abc HTML5 i CSS TUTORIAL

Definisana lista /DEFINITION LIST/ <DL><DT><DD>

<DL>
  <DT>tekst1</DT>
  <DD>tekst2</DD>
</DL>

Slika 1. DEFINISANA LISTA /DEFINITION LIST/

Definisana lista /DEFINITION LIST/ <DL><DT><DD>   Sintaksa: <DL><DT>tekst1<DD>tekst2</DL>

Definisana lista počine sa tagom <DL> a završava sa </DL>. Elementi se označavaju sa tagovima <DT> i <DD>. Ovi tagovi ne trebaju završne tagove. Razlikuju se po nivou uvučenosti. <DT> (od engl. riječi DEFINITION TERM) ne uvlači dok <DD> (od engl. riječi DEFINITION)  uvlači tekst. 

Oznake:
dl - TAG definisane liste
dt - element liste (nije uvučen)
dd - element liste (uvučen)
/dl - kraj liste


Slika 2. Definisana lista /DEFINITION LIST - DL & DT & DDUL & LI/

 

Primjer 1 Definisana lista sa neuvučenim elementima
Opis rješenja:

<!DOCTYPE html>
<html>
<head><title>Definisana lista</title></head>
<body>
<DL>
  <DT>jedan</DT>
  <DT>dva</DT>
  <DT>tri</DT>
</DL>
</body></html>
jedan
dva
tri

Primjer 2  Definisana lista sa uvučenim elementima.
Opis rješenja: Koristi se TAG <DD> za uvlačenje sadržaja.

<!DOCTYPE html>
<html>
<head><title>Definisana lista</title></head>
<body>
<DL>
  <DD>WORD</DD>
  <DD>EXCEL</DD>
  <DD>ACCESS</DD>
</DL>
</body></html>
WORD
EXCEL
ACCESS

Primjer 3 Tekst u prvoj liniji bez promjene a u drugoj i trećoj je uvućen definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja pozadine</title>
</head>
<body>
<DL>
  <DT>Vojskovođe Rimskog carstva:</DT>
  <DD>Cezar</DD>
  <DD>Konstantin</DD>
</DL>
</body></html>
Vojskovođe Rimskog carstva:
Cezar
Konstantin
 

Daljnji rad: Napisati html kod:

  1. sa izradom rječnika 
  2. sa izradom vaših omiljenih grupa pojmova i podpojmova.
  3. Šta će ispisati slijedeći kod
    <P>Na ulici:
    <DL>
    <DD><I>Mladić</I> Nestrpljivo puši i gleda na sat.
    <DD><I>Djevojka</I> Žurno dolazi iza ugla.
    </DL>
    </P> 
  4. Napisati HTML kod koji će imati za posljedicu ispis taksta:
    Dijelovi računara:
    HARD DISK tvrdi diks.
    DISK DRIVE disketna jedinica
    ...

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index