RP1 - XHTML

✓XHTML1

Neki ~ce~s~te kori~steni blokovski elementi

Za svaki element ~te biti navedeno ime, intendirana svrha, ~ce~s~ti atributi, te primjer koda koji koristi taj element. Kod uvijek mo~zete jednostavno copy&pasteati u neki svoj dokument, da vidite kako se renderira u browseru koji koristite. Tako~der, postoji poseban dokument u kojem to mo~zete vidjeti.

• Liste i tablice

  ol (ordered list)

  ul (unordered list)

  li (list item)

  Elementi za stvaranje ure~denih i neure~denih list~a. Ideja je ure~dene liste koristiti kad je redoslijed elemenata bitan (npr. koraci u nekom algoritmu), a neure~dene kad objekte u listi promatramo kao (multi)skup, dakle redoslijed nije bitan (npr. popis ovih XHTML elemenata). ol i ul elementi su blokovski elementi vi~seg reda, i unutar sebe smiju sadr~zavati samo li elemente. Dodu~se, li elementi unutar sebe mogu sadr~zavati sva~sta, pa i nove ul/ol elemente. Na taj na~cin mo~zemo ugnje~z~divati liste.
  <p>Osnovne boje:</p>
<ul>
  <li>crvena</li>
  <li>zelena</li>
  <li>plava</li>
</ul>


  dl (definition list)

  dt (definition term)

  dd (definition data)

  Elementi za stvaranje liste definicij~a. dl je blokovski element vi~seg reda, i smije sadr~zavati samo dt i dd elemente -- iako ne nu~zno naizmjeni~cno: jednom dt elementu mo~ze odgovarati vi~se dd elemenata, i obrnuto. dt predstavlja pojam koji se definira, a dd njegovu definiciju. U ~sirem smislu, dl element mo~zemo koristiti kad god ~zelimo prirodno povezati neke relativno kratke dijelove teksta s nekim malo duljim -- na primjer, kod zapisivanja dijaloga. <dl>
  <dt>Gospodar:</dt>
    <dd><q>Mi~ce li se kaktus, Jean?</q></dd>
  <dt>Jean:</dt>
    <dd><q>Ne mi~ce, gospodine.</q></dd>
  <dt>Gospodar:</dt>
    <dd><q>Sigurno se ne mi~ce?</q></dd>
  <dt>Jean:</dt>
    <dd><q>Sasvim sigurno.</q></dd>
  <dt>Gospodar:</dt>
    <dd><q>Onda sam zalio je~za.</q></dd>
</dl> (renderirajte gornji kod. Vidite li ~cemu slu~zi q element?)

  table

  tr (table row)

  th (table heading)

  td (table data)

  Elementi za stvaranje tablic~a. table element predstavlja tablicu, i mo~ze sadr~zavati (od gore navedenih) samo tr elemente, koji predstavljaju retke tablice. Svaki tr element mo~ze sadr~zavati samo th i td elemente. th elementi predstavljaju zaglavlja stupaca ili redaka, dok td predstavljaju obi~cne podatke u tablici. td i th elementi mogu imati atribute rowspan i/ili colspan, koji govore kroz koliko redaka/stupaca se taj podatak ili zaglavlje ~siri. <table>
  <tr> <th colspan="3">And</th> </tr>
  <tr> <th>&#x2227;</th> <th>T</th> <th>F</th> </tr>
  <tr> <th>T</th> <td>T</td> <td>F</td> </tr>
  <tr> <th>F</th> <td>F</td> <td>F</td> </tr>
</table>

• Ostalo:

  p (paragraph)

  Obi~cni odlomak teksta. Unutar njega se obi~cno stavlja ve~tina teksta koja dolazi na stranicu. p element je blokovski element ni~zeg reda -- smije sadr~zavati samo linijske elemente. Korolar toga je da liste ne smijemo stavljati unutar p elementa, ve~t treba zatvoriti odlomak, staviti listu, i po~ceti novi odlomak. <p>Ovo je jedan odlomak teksta.</p>
<p>A ovo je drugi.</p>

  pre (preformatted)

  Za razliku od p elementa, ovo je tzv. preformatirani odlomak. Odnosno, unutar njega ne vrijede pravila o zanemarivanju vi~sestrukih razmaka i novih redova, o automatskom prelamanju redova, i ostala pravila koja normalno vode renderiranje obi~cnih odlomaka teksta. Dakle, ideja je da se unutar ovog elementa po~stuje raspored praznog prostora, to~cno onako kako je navedeno u izvornom dokumentu. <pre>

  |\---/|
  | o_o |
   \_^_/

</pre>

  h1 (heading 1)

  h2 (heading 2)

  h3 (heading 3)

  h4 (heading 4)

  h5 (heading 5)

  h6 (heading 6)

  Razine naslova. h1 je zami~sljen kao glavni naslov, recimo ~citavog web sitea. Pojedini dijelovi sitea onda mogu imati naslove h2. Podstranice tih dijelova tada mogu imati naslove h3, dokumenti koji se na njima nalaze glavne naslove h4, podnaslove h5 i potpodnaslove h6. U praksi, naslovi ispod razine h3 vam ne~te trebati, osim ako imate jako veliki site. No o tome ne trebate puno misliti. Jednostavno glavnom dokumentu dajte naslov h1, i onda svakom dokumentu koji je logi~cki ispod dokumenta s naslovom hi, dajte naslov h(i+1). <h6>Ovo je naslov 6. razine</h6>

  hr (horizontal rule)

  Element namijenjen odvajanju ve~tih cjelin~a u dokumentu. Obi~cno je bolje umjesto njega staviti hx element, gdje je x od 1 do 6, odnosno dati naslov toj ve~toj cjelini koju ~zelimo odvojiti. No ponekad i hr element ima svojih prednosti.
  hr je prazan element, ~sto zna~ci da nema sadr~zaja. Umjesto "<hr></hr>" mo~zemo pisati samo "<hr />". <p>They laughed at Columbus.</p>
<p>They laughed at Fulton.</p>
<p>They laughed at the Wright brothers.</p>
<hr />
<p>But they also laughed at Bozo the Clown.</p>
<p><cite>Carl Sagan</cite></p>

  address

  blockquote

  Blokovi teksta s posebnom namjenom. address element slu~zi za stavljanje kontaktnih informacija u dokument, a u ~sirem smislu za op~tenito navo~denje podataka o autoru dokumenta. blockquote slu~zi za dulje navode, koji su recimo preneseni iz vanjskih medija ili s drugih internet stranica. blockquote elementu mo~zemo dodati cite atribut, koji slu~zi dokumentiranju odakle smo uzeli dani navod. Ukoliko ~zelimo da se na~s izvor renderira u dokumentu, mo~zda je bolje koristiti cite linijski element. Za kra~te navode koji ne zahtijevaju blokove teksta, mo~zemo koristiti q linijski element, s kojim smo se ve~t upoznali gore. <p>Mnoga ustavna prava u na~soj domovini <em>nisu apsolutna</em>:</p>
<blockquote cite="Ustav Republike Hrvatske, ~clanak 17">
<p>U doba ratnog stanja ili neposredne ugro~zenosti neovisnosti i jedinstvenosti dr~zave, te velikih prirodnih nepogoda pojedine slobode i prava zajam~cena Ustavom mogu se ograni~citi. O tome odlu~cuje Hrvatski sabor dvotre~tinskom ve~tinom svih zastupnika, a ako se Hrvatski sabor ne mo~ze sastati, na prijedlog Vlade i uz supotpis predsjednika Vlade, Predsjednik Republike.
</p></blockquote> (Primijetimo da je blockquote blokovski element vi~seg reda: ne smije sadr~zavati ~cisti tekst.)