abc HTML5 i CSS TUTORIAL

Izgled i veličina fonta definisane liste /DEFINITION LIST FONT FAMILY & FONT SIZE/ style="font-family & style="font-size

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

Slika 1. DEFINISANA LISTA /DEFINITION LIST/

Boja teksta i pozadine definisane liste /DEFINITION LIST font-size & BACKGROUND font-size/   Sintaksa: <TAG style="font-family:naziv_fonta;"> | <TAG style="font-size:Veličina_fonta;"> | <TAG style="font-family:naziv_fonta; font-size:Veličina_fonta;">

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

font-family - Atribut za ime fonta
naziv_fonta - Otkucati ime fonta (vidi iz tabele).
font-size - Atribut za veličinu fonta
Veličina_fonta - Brojna vrijednost fonta i mjerna jedinica veličine fonta (em, px, pt, %).

FONT FACE tag je zastario i u HTML 5 verziji se za izbor parametera fonta koristi CSS.

Vojskovođe Rimskog carstva:
Cezar
Konstantin

Primjer parametara fonta

 

Primjer 1. Promjena fonta u TAHOMA kod definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Ime fonta</title>
</head>
<body>
<p>Tekst ispred liste</p>
<DL style="font-family:Tahoma;">
  <DT>jedan</DT>
  <DD>dva</DD>
  <DD>tri</DD>
</DL>
</body></html>

Tekst ispred liste

jedan
dva
tri

Primjer 2. Promjena fonta u Comic Sans MS kod definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Ime fonta</title>
</head>
<body>
<p>Tekst ispred liste</p>
<DL style="font-family:Comic Sans MS;">
  <DT>Softver</DT>
  <DD>Windows</DD>
  <DD>Word</DD>
</DL>
</body></html>

Tekst ispred liste

Softver
Windows
Word

Primjer 3. Promjena veličine fonta kod definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Veličina fonta</title>
</head>
<body>
<p>Tekst ispred liste</p>
<DL style="font-size:1.5em;">
  <DT>Hardware</DT>
  <DD>Tastatura</DD>
  <DD>Miš</DD>
</DL>
</body></html>

Tekst ispred liste

Hardware
Tastatura
Miš

Primjer 4. Promjena veličine fonta kod definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Veličina fonta</title>
</head>
<body>
<p>Tekst ispred liste</p>
<DL>
  <DT style="font-size:1.5em;">Vojskovođe Rimskog carstva:</DT>
  <DD style="font-size:1.2em;">Cezar</DD>
  <DD style="font-size:1.2em;">Konstantin</DD>
</DL>
</body></html>

Tekst ispred liste

Vojskovođe Rimskog carstva:
Cezar
Konstantin

Primjer 5. Različiti fontovi i veličina fonta tekst definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Veličina fonta</title>
</head>
<body>
<DL>
  <DT style="font-size:1.5em;">Vojskovođe Rimskog carstva:</DT>
  <DD style="font-size:1.2em; font-family:Comic Sans MS;">Cezar</DD>
  <DD style="font-size:1.2em; font-family:Impact;">Konstantin</DD>
</DL>
</body></html>

Tekst ispred liste

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:
    Na sceni su bili:
    Majka Radi u kuhinji, spremajući sinu doručak.
    Sin Sjedi za stolom, nestrpljivo čekajući obrok.
  5. Ispisati kod ze slijedeći tekst
    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