RP1 - XHTML

✓XHTML1

Struktura XHTML dokumenta

Pogledajmo jedan tipi~cni dokument, pisan u dijalektu "XHTML 1.0 Strict" (po kojem ~temo mi raditi na ovim vje~zbama):


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hr" lang="hr">
<head>
	<title> Primjer web stranice napisane u XHTMLu </title>
	<link rel="stylesheet" type="text/css" href="moj.css" />
</head>
<body>

<h1>Moja prva 
<acronym title="eXtensible HyperText Markup Language">XHTML</acronym>
stranica</h1>

<p>Ovo je primjer jednog vrlo jednostavnog 
<acronym>XHTML</acronym> dokumenta.</p>

</body></html>

Vidimo da na po~cetku stoje dvije deklaracije. Ona u prvom retku deklarira da se radi o XMLu 1.0, te specificira tzv. encoding, na~cin kako se interpretiraju znakovi koji nisu ~cisti ASCII. Druga deklaracija ka~ze da se radi preciznije o XHTMLu 1.0 Strict, te daje mjesto (DTD) na kojem se mo~ze na~ti formalna definicija tog jezika. Nakon toga slijedi html-element. On ima tri atributa, xmlns (koji slu~zi preciziranju kako to~cno shvatiti pojedine elemente), lang (jezik dokumenta), te xml:lang (jezik dokumenta iz perspektive XMLa -- za sve prakti~cne potrebe treba ga staviti na istu vrijednost kao lang atribut). Oznaka za jezik je dvoslovna oznaka prema me~dunarodnom ISO standardu, samo ~sto se pi~se malim slovima ("hr" za hrvatski, "en" za engleski jezik). Ina~ce, XHTML je case sensitive (razlikuje velika i mala slova), te se prakti~cki sve "klju~cne rije~ci" (tagovi, imena i vrijednosti atributa, ~cak i slova a..f i x u heksadecimalnim znakovnim jedinicama) pi~su malim slovima. Jedini izuzetak je DOCTYPE deklaracija (drugi i tre~ti redak u gornjem dokumentu).

Sadr~zaj html elementa je propisan: unutar njega nalaze se to~cno dva elementa (i ni~sta vi~se), head i body. Unutar head elementa nalaze se elementi koji odre~duju op~ta svojstva dokumenta, dok se unutar body elementa nalaze elementi od kojih se stvarno dokument sastoji. U ovom slu~caju imamo:

  1. Unutar head elementa nalazi se title element, koji specificira naslov web-stranice. To nije naslov poput hx elementa, ve~t globalni naslov koji svaka stranica ima (ili bi trebala imati) i na osnovu kojeg joj se pristupa u raznim bazama. Na primjer, Google vra~ta rezultate pretra~zivanja u kojima za svaku stranicu navodi naslov kao osnovni identifikacijski podatak (klikom na naslov odlazi se na pojedinu stranicu).
  2. Tako~der unutar head elementa, nalazi se i link element, kojem je svrha povezati trenutni dokument s nekim drugim. U ovom slu~caju, link element slu~zi za povezivanje s CSS dokumentom, koji specificira kako to~cno renderirati pojedine elemente (za one elemente za koje to ~zelimo propisati). rel atribut specificira vrstu veze, type tip dokumenta s kojim se povezujemo, a href atribut mjesto na kojem se taj dokument nalazi (u ovom slu~caju, treba se zvati moj.css, i nalaziti se u istom direktoriju kao gornji XHTML dokument. Taj element pokazuje i posebnu skra~tenu sintaksu za tzv. prazne elemente, odnosno elemente bez sadr~zaja: umjesto "<link atributi></link>", mo~zemo pisati samo "<link atributi />".
  3. Unutar body elementa, nalazi se h1 element. On nam kazuje glavni naziv dokumenta, kao i ~cinjenicu da iznad njega nema nekog drugog dokumenta u hijerarhiji (njegovi poddokumenti bi trebali imati h2 naslove, njihovi poddokumenti h3, i tako dalje). Sadr~zaj tog elementa je ono ~sto ~te se stvarno napisati kao naslov u browseru.
  4. Tako~der unutar body elementa, nalazi se i p element. To je jednostavno odlomak teksta. Tekst ne smijemo pisati direktno unutar body elementa -- moramo ga staviti unutar elementa poput "p" (ili nekog drugog, poput "h1").
  5. Unutar h1, kao i unutar p elementa, nalazi se, osim obi~cnog teksta, i "acronym"-element. On slu~zi za pisanje akronima, pri ~cemu se mo~ze (kao ~sto je u~cinjeno u prvoj instanci) pomo~tu title atributa raspisati ~sto taj akronim zna~ci. Dobro je to u~ciniti bar jedamput po dokumentu (najjednostavnije prilikom prve pojave tog akronima u dokumentu), kako bi korisnik mogao pogledati zna~cenje akronima koji mu nije poznat. Uobi~cajeno renderiranje je takvo da se raspis akronima (vrijednost njegovog title atributa) pojavi kao tooltip prilikom dolaska mi~sem iznad samog akronima (probajte to za iscrtkani primjer u naslovu dolje linkanog dokumenta).

Mo~zete i vidjeti kako se gornji kod zaista renderira u browseru koji koristite.