☰ 4. razred - Računarstvo i informatika

4. razred - Računarstvo i informatika

3. Dizajn i izrada WEB stranica - Teorija

HTML napredne tehnike


HTML boje

Svi ekrani modernih uređaja boje prikazuju kao kombinaciju crvene, zelene i plave (Red Green Blue - RGB).

Postoje tri načina zadavanja boja:

  • rgb(Red, Green, Blue)
  • heksadecimalni način zadavanja boja
  • imena boja

RGB (Red, Green, Blue)

Na ovaj način se boje zadaju u sledećem formatu: rgb(R, G, B). Brojevi unutar zagrade (R, G, B) mogu da uzmu vrednosti od 0 do 255. Oni definišu intenzitet crvene, zelene i plave boje u rasponu od 0 do 255. Najtamnija je 0 a najsvetlija je 255. Na primer rgb(255,0,0) je crvena, crvena boja ima intenzitet 255 dok zelena i plava imaju intenzitet jednak 0.

Color RGB
  rgb(255,0,0)
  rgb(255,255,0)
  rgb(0,255,0)
  rgb(0,255,255)
  rgb(0,0,255)

Osnovne boje svim nijansama sive boje doprinose istim intenzitetima:

Color RGB
  rgb(0,0,0)
  rgb(63,63,63)
  rgb(127,127,127)
  rgb(191,191,191)
  rgb(255,255,255)

Maksimalan broj je 256 * 256 * 256 = 16.777.216 različitih boja.


Heksadecimalne boje

Princip zadavanja boja je identičan prethodnom načinu. Sve tri boje se definišu sa po 256 različitih vrednosti. Jedina razlika je u načinu zadavanju vrednosti brojeva za crvenu, zelenu i plavu. Umesto rgb(R, G, B) gde su brojevi R, G i B zadati u dekadnom brojnom sistemu, u ovom načinu zadavanja se definišu kao #RRGGBB pri čemu su RR, GG i BB brojevi u heksadecimalnom brojnom sistemu.

Slično prethodnom primeru za crvenu boju rgb(255,0,0), u heksadecimalnom načinu zadavanja boja bi se pisalo #FF0000.

Color RGB
  #FF0000
  #FFFF00
  #00FF00
  #00FFFF
  #0000FF

Osnovne boje svim nijansama sive boje doprinose istim intenzitetima:

Color RGB
  #000000
  #404040
  #808080
  #C0C0C0
  #FFFFFF

Maksimalan broj je 256 * 256 * 256 = 16.777.216 različitih boja.


Imena boja

Boje se mogu zadavati i navođenjem imena boja. Svi savremeni browseri podržavaju narednih 140 imena boja.

Color Name HEX RGB Color
AliceBlue #F0F8FF 240,248,255  
AntiqueWhite #FAEBD7 250,235,215  
Aqua #00FFFF 0,255,255  
Aquamarine #7FFFD4 127,255,212  
Azure #F0FFFF 240,255,255  
Beige #F5F5DC 245,245,220  
Bisque #FFE4C4 255,228,196  
Black #000000 0,0,0  
BlanchedAlmond #FFEBCD 255,235,205  
Blue #0000FF 0,0,255  
BlueViolet #8A2BE2 138,43,226  
Brown #A52A2A 165,42,42  
BurlyWood #DEB887 222,184,135  
CadetBlue #5F9EA0 95,158,160  
Chartreuse #7FFF00 127,255,0  
Chocolate #D2691E 210,105,30  
Coral #FF7F50 255,127,80  
CornflowerBlue #6495ED 100,149,237  
Cornsilk #FFF8DC 255,248,220  
Crimson #DC143C 220,20,60  
Cyan #00FFFF 0,255,255  
DarkBlue #00008B 0,0,139  
DarkCyan #008B8B 0,139,139  
DarkGoldenRod #B8860B 184,134,11  
DarkGray #A9A9A9 169,169,169  
DarkGrey #A9A9A9 169,169,169  
DarkGreen #006400 0,100,0  
DarkKhaki #BDB76B 189,183,107  
DarkMagenta #8B008B 139,0,139  
DarkOliveGreen #556B2F 85,107,47  
DarkOrange #FF8C00 255,140,0  
DarkOrchid #9932CC 153,50,204  
DarkRed #8B0000 139,0,0  
DarkSalmon #E9967A 233,150,122  
DarkSeaGreen #8FBC8F 143,188,143  
DarkSlateBlue #483D8B 72,61,139  
DarkSlateGray #2F4F4F 47,79,79  
DarkSlateGrey #2F4F4F 47,79,79  
DarkTurquoise #00CED1 0,206,209  
DarkViolet #9400D3 148,0,211  
DeepPink #FF1493 255,20,147  
DeepSkyBlue #00BFFF 0,191,255  
DimGray #696969 105,105,105  
DimGrey #696969 105,105,105  
DodgerBlue #1E90FF 30,144,255  
FireBrick #B22222 178,34,34  
FloralWhite #FFFAF0 255,250,240  
ForestGreen #228B22 34,139,34  
Fuchsia #FF00FF 255,0,255  
Gainsboro #DCDCDC 220,220,220  
GhostWhite #F8F8FF 248,248,255  
Gold #FFD700 255,215,0  
GoldenRod #DAA520 218,165,32  
Gray #808080 128,128,128  
Grey #808080 128,128,128  
Green #008000 0,128,0  
GreenYellow #ADFF2F 173,255,47  
HoneyDew  #F0FFF0 240,255,240  
HotPink #FF69B4 255,105,180  
IndianRed #CD5C5C 205,92,92  
Indigo #4B0082 75,0,130  
Ivory #FFFFF0 255,255,240  
Khaki #F0E68C 240,230,140  
Lavender #E6E6FA 230,230,250  
LavenderBlush #FFF0F5 255,240,245  
LawnGreen #7CFC00 124,252,0  
LemonChiffon #FFFACD 255,250,205  
LightBlue #ADD8E6 173,216,230  
LightCoral #F08080 240,128,128  
LightCyan #E0FFFF 224,255,255  
LightGoldenRodYellow #FAFAD2 250,250,210  
LightGray #D3D3D3 211,211,211  
LightGrey #D3D3D3 211,211,211  
LightGreen #90EE90 144,238,144  
LightPink #FFB6C1 255,182,193  
LightSalmon #FFA07A 255,160,122  
LightSeaGreen #20B2AA 32,178,170  
LightSkyBlue #87CEFA 135,206,250  
LightSlateGray #778899 119,136,153  
LightSlateGrey #778899 119,136,153  
LightSteelBlue #B0C4DE 176,196,222  
LightYellow #FFFFE0 255,255,224  
Lime #00FF00 0,255,0  
LimeGreen #32CD32 50,205,50  
Linen #FAF0E6 250,240,230  
Magenta #FF00FF 255,0,255  
Maroon #800000 128,0,0  
MediumAquaMarine #66CDAA 102,205,170  
MediumBlue #0000CD 0,0,205  
MediumOrchid #BA55D3 186,85,211  
MediumPurple #9370DB 147,112,219  
MediumSeaGreen #3CB371 60,179,113  
MediumSlateBlue #7B68EE 123,104,238  
MediumSpringGreen #00FA9A 0,250,154  
MediumTurquoise #48D1CC 72,209,204  
MediumVioletRed #C71585 199,21,133  
MidnightBlue #191970 25,25,112  
MintCream #F5FFFA 245,255,250  
MistyRose #FFE4E1 255,228,225  
Moccasin #FFE4B5 255,228,181  
NavajoWhite #FFDEAD 255,222,173  
Navy #000080 0,0,128  
OldLace #FDF5E6 253,245,230  
Olive #808000 128,128,0  
OliveDrab #6B8E23 107,142,35  
Orange #FFA500 255,165,0  
OrangeRed #FF4500 255,69,0  
Orchid #DA70D6 218,112,214  
PaleGoldenRod #EEE8AA 238,232,170  
PaleGreen #98FB98 152,251,152  
PaleTurquoise #AFEEEE 175,238,238  
PaleVioletRed #DB7093 219,112,147  
PapayaWhip #FFEFD5 255,239,213  
PeachPuff #FFDAB9 255,218,185  
Peru #CD853F 205,133,63  
Pink #FFC0CB 255,192,203  
Plum #DDA0DD 221,160,221  
PowderBlue #B0E0E6 176,224,230  
Purple #800080 128,0,128  
RebeccaPurple #663399 102,51,153  
Red #FF0000 255,0,0  
RosyBrown #BC8F8F 188,143,143  
RoyalBlue #4169E1 65,105,225  
SaddleBrown #8B4513 139,69,19  
Salmon #FA8072 250,128,114  
SandyBrown #F4A460 244,164,96  
SeaGreen #2E8B57 46,139,87  
SeaShell #FFF5EE 255,245,238  
Sienna #A0522D 160,82,45  
Silver #C0C0C0 192,192,192  
SkyBlue #87CEEB 135,206,235  
SlateBlue #6A5ACD 106,90,205  
SlateGray #708090 112,128,144  
SlateGrey #708090 112,128,144  
Snow #FFFAFA 255,250,250  
SpringGreen #00FF7F 0,255,127  
SteelBlue #4682B4 70,130,180  
Tan #D2B48C 210,180,140  
Teal #008080 0,128,128  
Thistle #D8BFD8 216,191,216  
Tomato #FF6347 255,99,71  
Turquoise #40E0D0 64,224,208  
Violet #EE82EE 238,130,238  
Wheat #F5DEB3 245,222,179  
White #FFFFFF 255,255,255  
WhiteSmoke #F5F5F5 245,245,245  
Yellow #FFFF00 255,255,0  
YellowGreen #9ACD32 154,205,50  



HTML stilovi - CSS

CSS je skraćenica od Cascading Style Sheets. Stilovi se u HTML-u mogu definisati na tri načina:

  • Inline - upotrebom style atributa u HTML elementima
  • Internal - upotrebom <style> elementa u HTML <head> sekciji
  • External - upotrebom jednog ili više CSS fajlova

Najrasprostranjeniji način upotrebe stilova je njihovo čuvanje u odvojenim CSS fajlovima.


CSS sintaksa

CSS stilovi se pišu na sledeći način:
element { osobina:vrednost; osobina:vrednost; ... }

Element je ime HTML elementa. Osobina je CSS osobina. Vrednost je CSS vrednost. Različiti stilovi su odvojeni sa tačkom i zarezom (;).


Inline styling (Inline CSS)

Inline styling je koristan za jedinstveni stil nekog HTML elementa. Za Inline styling se koristi style atribut. Ovaj inline stil menja boju teksta naslova:

...
<h1 style="color:blue">This is a Blue Heading</h1>
...


Izgled ovog html koda u browseru:



Internal styling (Internal CSS)

Internal style se najčešće upotrebljava za definisanje stilova za sve HTML elemente na stranici. Internal styling se definiše u <head> sekciji HTML stranice, uz upotrebu <style> elementa:

<head>
...
   <style>
      body{background-color:lightgray;}
      h1{color:blue;}
      p{color:green;}
   </style>
...
</head>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
...


Izgled ovog html koda u browseru:



External Styling (External CSS)

CSS fajlovi u kojima su definisani stilovi su veoma korisni kada se stilovi primenjuju na više stranica. Uz upotrebu CSS fajlova u kojima su definisani stilovi, izled cele web prezentacije se može promeniti u jednom koraku, promenom datog CSS fajla. Stilovi se definišu u CSS fajlovima i povezuju se u <head> sekciji HTML koda.

...
<head>
   <link rel="stylesheet" href="styles.css">
</head>
...



CSS fontovi

CSS color osobina definiše boju teksta HTML elementa.

CSS font-family osobina definiše upotrebljeni font HTML elementa.

CSS font-size osobina definiše veličinu teksta HTML elementa.

...
<style>
   h1{
      color:blue;
      font-family:verdana;
      font-size:300%;
   }
   p{
      color:red;
      font-family:courier;
      font-size:160%;
   }
</style>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
...


Izgled ovog html koda u browseru:



CSS box model

Svaki HTML element poseduje okvir oko sebe čak i ukoliko je okvir nevidljiv.


CSS border osobina definiše vidljivost okvira oko HTML elementa:

...
<style>
   p {
      border:1px solid gray;
   }
</style>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
...


Izgled ovog html koda u browseru:



CSS padding osobina definiše padding (prostor) unutar okvira:

...
<style>
   p {
      border:1px solid gray;
      padding:10px;
   }
</style>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
...


Izgled ovog html koda u browseru:



CSS margin osobina definiše marginu (prostor) oko okvirne linije:

...
<style>
   p {
      border:1px solid gray;
      padding:10px;
      margin:50px;
   }
</style>
...
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
...


Izgled ovog html koda u browseru:



Pregled

  • Upotrebljavati style atribut za inline stilove
  • Upotrebljavati <style> element za definisanje internal CSS
  • Upotrebljavati <link> element za vezu ka CSS fajlu
  • Upotrebljavati <head> element za skladištenje <style> i <link> elemenata
  • Upotrebljavati CSS color za boju teksta
  • Upotrebljavati CSS font-family za izbor fontova
  • Upotrebljavati CSS font-size za izbor veličine fontova
  • Upotrebljavati CSS border za vidljivost okvira
  • Upotrebljavati CSS padding za prostor unutar okvira
  • Upotrebljavati CSS margin za marginu izvan okvira


HTML tabele

Tabele se definišu pomoću <table> taga. Novi red se otvara pomoću <tr> (table row) taga. Nova kolona se otvara pomoću <td> (table data) taga. Zaglavlje tabele se definiše pomoću <th> (table header) taga. Tagovi <td> su predviđeni za sadržaj tabele (table data). Tabele mogu da sadrže sve tipove HTML elemenata kao što su tekst, slike, liste, druge tabele i slično.

...
<table>
   <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
   </tr>
   <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
   </tr>
   <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
   </tr>
   <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
   </tr>
</table>
...


Izgled ovog html koda u browseru:



HTML tabela sa border atributom

Ukoliko se border (okvir) ne definiše, neće biti ni vidljiv (border – okvir tabele). Upotrebom border atributa se dodaju okvirne linije tabeli. Za dodavanje okvirnih linija preporučljivo je upotrebljavati CSS border osobinu unutar <style> tag-a:

...
<style>
   table, th, td {
      border: 1px solid black;
   }
</style>
...


Izgled ovog html koda u browseru:

Potrebno je definisati okvirne linije i za tabelu i za ćelije.



HTML tabela sa jednostrukim okvirom

Ukoliko je potrebno iscrtati tabelu sa jednostrukim okvirom, potrebno je dodati CSS osobinu border-collapse:

...
<style>
   table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
   }
</style>
...


Izgled ovog html koda u browseru:



HTML tabela sa razmakom između teksta i okvira

Padding definiše prostor između sadržaja ćelije i okvira. Ukoliko se ne odredi prostor (padding), ćelija se pikazuje bez praznog prostora. Za prostor se upotrebljava CSS padding osobina:

...
<style>
   table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
   }
   th, td {
      padding: 15px;
   }
</style>
...


Izgled ovog html koda u browseru:



Zaglavlja HTML tabela

Zaglavlja se definišu pomoću <th> taga. U većini browsera podrazumevan je prikaz zaglavlja koje je zadebljano i u sredini ćelije:

...
<style>
   table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
   }
   th, td {
      padding: 5px;
   }
</style>
...


Izgled ovog html koda u browseru:


Za levo orijentisano zaglavlje se upotrebljava CSS text-align osobina:

...
<style>
   table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
   }
   th, td {
      padding: 5px;
   }
   th {
      text-align: left;
   }
</style>
...


Izgled ovog html koda u browseru:



HTML tabele sa okvirnim prostorom

Border spacing je prostor između ćelija. Za podešavanje prostora između ćelija upotrebljava se CSS border-spacing osobina:

...
<style>
   table, th, td {
      border: 1px solid black;
      padding: 5px;
   }
   table {
      border-spacing: 15px;
   }
</style>
...


Izgled ovog html koda u browseru:



Ćelije koje se protežu iznad više kolona

Za prostiranje ćelije iznad nekoliko kolona, koristi se colspan atribut:

...
<table>
   <tr>
      <th>Name</th>
      <th colspan="2">Telephone</th>
   </tr>
   <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
   </tr>
</table>
...


Izgled ovog html koda u browseru:



Ćelije koje se protežu iznad više redova

Za prostiranje ćelije iznad nekoliko redova, koristi se rowspan atribut:

...
<table>
   <tr>
      <th>Name</th>
      <td>Bill Gates</td>
   </tr>
   <tr>
      <th rowspan="2">Telephone</th>
      <td>555 77 854</td>
   </tr>
   <tr>
      <td>555 77 855</td>
   </tr>
</table>
...


Izgled ovog html koda u browseru:



HTML naslov tabele

Za dodavanje naslova (objašnjenja) tabeli, upotrebljava se <caption> tag:

...
<table style="width:100%">
<caption>Number of earned points</caption>
...


Izgled ovog html koda u browseru:

<caption> tag mora da se doda nakon <table> taga.



Pregled

  • HTML <table> element upotrebljavati za definisanje tabela
  • HTML <tr> element upotrebljavati za definisanje redova tabele
  • HTML <td> element upotrebljavati za definisanje podataka u tabeli
  • HTML <th> element upotrebljavati za definisanje zaglavlja tabele
  • HTML <caption> element upotrebljavati za definisanje naslova tabele
  • CSS border osobinu upotrebljavati za definisanje okvira tabele
  • CSS border-collapse osobinu upotrebljavati za jednostruki okvir
  • CSS padding osobinu upotrebljavati za dodavanje razmaka između sadržaja i okvira ćelije
  • CSS text-align osobinu upotrebljavati za poravnanje teksta u ćeliji
  • CSS border-spacing osobinu upotrebljavati za podešavanje razmaka između ćelija
  • colspan atribut upotrebljavati za prostiranje ćelije iznad više kolona
  • rowspan atribut upotrebljavati za prostiranje ćelije iznad više redova

HTML tagovi za tabele

TagOpis
<table>Definisanje tabele
<th>Definisanje zaglavnja tabele
<tr>Definisanje reda tabele
<td>Definisanje ćelije tabele
<caption>Definisanje naslova tabele
<colgroup>Izbor jedne ili više kolona za formatiranje
<col>Određuje column osobinu za kolone unutar <colgroup> elementa
<thead>Grupisanje sadržaja zaglavlja tabele
<tbody>Grupisanje body sadržaja tabele
<tfoot>Grupisanje sadržaja podnožja tabele



HTML liste

Liste počinju sa <ul> tagom, svaki element liste počinje sa <li> tagom.

...
<h4>Unordered List with Default Bullets</h4>
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


Izgled ovog html koda u browseru:



HTML liste - style atribut

Style atribut može da se doda listi da bi se definisao znak koji će označavati elemente liste:

StyleOpis
list-style-type:discOznaka elementa liste crna tačka (podrazumevano)
list-style-type:circleOznaka elementa liste krug
list-style-type:squareOznaka elementa liste kvadrat
list-style-type:noneOznaka elementa neće biti prikazana


list-style-type:disc

...
<h4>Unordered List with Disc Bullets</h4>
<ul style="list-style-type:disc">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


Izgled ovog html koda u browseru:



list-style-type:circle

...
<h4>Unordered List with Circle Bullets</h4>
<ul style="list-style-type:circle">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


Izgled ovog html koda u browseru:



list-style-type:square

...
<h4>Unordered List with Square Bullets</h4>
<ul style="list-style-type:square">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


Izgled ovog html koda u browseru:



list-style-type:none

...
<h4>Unordered List Without Bullets</h4>
<ul style="list-style-type:none">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>
...


Izgled ovog html koda u browseru:




HTML nabrajanja

Nabrajanja počinju sa <ol> tagom, svaki element nabrajanja počinje sa <li> tagom.

...
<h4>Ordered List</h4>
<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


Izgled ovog html koda u browseru:



HTML nabrajanja - type atribut

Type atribut može da se doda nabrajanju da bi se definisao znak koji će označavati nabrajanje:

TypeOpis
type="1"Oznaka elementa nabrajanja broj (podrazumevano)
type="A"Oznaka elementa nabrajanja velika slova
type="a"Oznaka elementa nabrajanja mala slova
type="I"Oznaka elementa nabrajanja rimski brojevi velikim slovima
type="i"Oznaka elementa nabrajanja rimski brojevi malim slovima


type="1"

...
<h4>Ordered List</h4>
<ol type="1">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


Izgled ovog html koda u browseru:



type="A"

...
<h4>Ordered List with Letters</h4>
<ol type="A">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


Izgled ovog html koda u browseru:



type="a"

...
<h4>Ordered List with Lowercase Letters</h4>
<ol type="a">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


Izgled ovog html koda u browseru:



type="I"

...
<h4>Ordered List with Roman Numbers</h4>
<ol type="I">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


Izgled ovog html koda u browseru:



type="i"

...
<h4>Ordered List with Lowercase Roman Numbers</h4>
<ol type="i">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
...


Izgled ovog html koda u browseru:




HTML liste sa opisom

HTML podržava liste sa opisom. Liste sa opisom su liste sa opisom za svaki pojam. Opisne liste definiše <dl> tag, svaki pojam (ime pojma) se definiše sa <dt> tagom, dok <dd> tag opisuje podatak za svaki pojam.

...
<h4>A Description List</h4>
<dl>
   <dt>Coffee</dt>
   <dd>- black hot drink</dd>
   <dt>Milk</dt>
   <dd>- white cold drink</dd>
</dl>
...


Izgled ovog html koda u browseru:



Ugneždene HTML liste

Liste mogu biti ugneždene (liste unutar listi):

...
<h4>A Nested List</h4>
<ul>
   <li>Coffee</li>
   <li>Tea
      <li>Black Tea</li>
      <li>Green Tea</li>
   </li>
   <li>Milk</li>
</ul>
...


Izgled ovog html koda u browseru:



Horizontalne liste

Liste se mogu stilizovati na mnogo načina uz CSS. Jedan od popularnih načina je prikazivanje horizontalne liste:

...
<style>
   ul#menu li {
      display:inline;
   }
</style>
...
<h4>Horizontal List</h4>
<ul id="menu">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>PHP</li>
</ul>
...


Izgled ovog html koda u browseru:


Uz malo dodatog stila, može se napraviti meni:

...
<style>
   ul#menu {
      padding: 0;
   }
   ul#menu li {
      display: inline;
   }
   ul#menu li a {
      background-color: black;
      color: white;
      padding: 10px 20px;
      text-decoration: none;
      border-radius: 4px 4px 0 0;
   }
   ul#menu li a:hover {
      background-color: orange;
   }
</style>
...
<h2>Horizontal List</h2>
<ul id="menu">
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JavaScript</a></li>
   <li><a href="#">PHP</a></li>
</ul>
...


Izgled ovog html koda u browseru:



Pregled

  • Upotrebljavati HTML <ul> element za definisanje liste
  • Upotrebljavati HTML style atribut za definisanje znaka nabrajanja
  • Upotrebljavati HTML <ol> element za definisanje nabrajanja
  • Upotrebljavati HTML type atributa za definisanje tipa numerisanja
  • Upotrebljavati HTML <li> element za definisanje elementa nabrajanja
  • Upotrebljavati HTML <dl> element za definisanje opisne liste
  • Upotrebljavati HTML <dt> element za definisanje pojmova opisne liste
  • Upotrebljavati HTML <dd> element za definisanje objašnjenja pojmova opisne liste
  • Liste mogu biti ugneždene
  • Liste mogu sadržavati druge HTML elemente
  • Upotrebljavati CSS osobinu display:inline za prikaz horizontalne liste

Tagovi lista i nabrajanja

TagOpis
<ul>Definisanje liste
<ol>Definisanje nabrajanja
<li>Definisanje elementa liste
<dl>Definisanje opisne liste
<dt>Definisanje pojma opisne liste
<dd>Definisanje objašnjenja pojmova opisne liste