SveZaWeb : Kreiranje Web-a : XHTML Uputstvo [ HTML + XML ]

Free Web space and hosting from dzaba.com


SveZaWeb		Web Design + Development Tutorials and Articles		EMail \| Pretraga \| Rečnik

Kreiranje

Poslednja izmena: 02.05.2003. g.

		Početna strana : Kreiranje XHTML

Sadržaj

Mane HTML-a
Razlike
Osnove
Deklaracije
Validacija

XHTML (eXtensible HyperText Markup Language) nastao je sa ciljem da reši probleme koje je HTML zajedno sa Web čitačima doneo.XHTML je identičan sa HTML 4.01 i vraća HTML prvobitnoj nameni a to je struktuiranje Web dokumenata. XHTML je definisan kao XML (eXtensible Markup Language) tj. svi elementi iz HTML 4.01 kombinovani sa snitaksom XML-a. XHTML 1.0 je oficijalna preporuka W3C od 26. Januara 2000. god, te predstavlja standard za kreiranje Web dokumenata.

Mane HTML-a

HTML je bar u početku sadržao jednostavnu sintaksu, koja je godinama rasla. Ta jednostavnost se pretvorila u najveću noćnu moru. Ne mogu da se stvore sopstvene oznake koje označavaju semantičke odnose unutar sadržaja jer HTML nije proširiv. Prilikom automatske, pouzdane razmene podataka HTML ne pomaže. Nedostaje podrška strukture u HTML, proveravnje sintakse niti sama svest o sadržaju. Web stranice se satalno pomeraju, a Webmasteri ne mogu da idu u korak sa promenama URL-ova. tj. problem je što HTML nema koncepciju centralne baze linkova.

Mnoge stranice na Internetu sadrže loš HTML. U sledećem primeru videćmo loš HTML kod ali koji će raditi u Web čitačima, iako se ne drži HTML pravila:

<html>

 <head>

 <title>Ovo je loš HTML</title>
       
 <body>

 <h1>Loš HTML
       
 </body>

XML je markerski jezik u kome sve mora da se markira ispravno. XML je napravljen da opiše informacije a HTML da ispisuje te informacije. Danas postoje različiti Web čitači, neki prikazuju Internet na računaru a neki na mobilnim telefonima i palm uređajima. Ti drugi Web čitači nemaju resursa da interpretiraju "loš" markerski jezik, ali XHTML je tu da premosti tu manu kombinujući snagu HTML i XML kako danas tako i u budućnosti.

Razlike

XHTML strane mogu biti gledane na svim uređajima koji podržavaju XML. XHTML predstvlja sledeću generaciju HTML. U suštim XHTML nije toliko različit od HTML 4.01, i ukoliko ste prebacili vaš HTML kod na ovaj standard neće vam biti teško da pređete na XHTML.

Odmah sad započnite da HTML kod pišete malim slovima i sve elemente zatvarajte završnim tagom, pogotovo mislim na paragraf </p> i elemente liste </li> kod kojih je završni tag opcioni.

Pogledajmo razlike između XHTML i HTML-a i neka osnovna pravila:

Ugnježđavanje
Kao prvo svi XHTML elementi moraju biti ispravno ugnježđeni, tj. :

pravilno	nepravilno	nepravilno
`<p> <strong> Sadržaj. Sadržaj. <strong> </p>`	`<p> <strong> Sadržaj. Sadržaj. </p> </strong>`	`<strong> <p> Sadržaj. Sadržaj. </strong> </p>`

Dokument mora biti pravilno struktuiran
Svi XHTML elementi moraju biti unutar <html> tj. osnovnog elementa. Svi ostali elementi mogu da mijau svoje pod elemente (decu). Elementi koji sadrže podelemente tj. decu nazivaju se roditelji npr. <html> je roditelj za sve ostale elemente. Deca moraju da budu u paru i pravilno ugnježđeni sa roditeljem. Osnovna struktura dokumenta je:

<html>

 <head> ... </head>

 <body> ... </body>

 </html>

Imena elementa u tagovima moraju biti pisani malim slovima
Zato što je XML case-sensitve tj. osetljiv je na znakove, ili pisete sve malim ili sve velikim. Pa je isprvno samo <html> dok <HtML> je neispravno, tj. tag <li> je različit od <LI>.

Svi elementi moraju imati svoj početni i završni tag
Pa je isprvno samo <p>Ovo je pargraf</p> dok <p>Ovo je pargraf je neispravno

Prazni elementi moraju biti zatvoreni
Prazni elementi tj. elementi koji ne sadrže nikakav sadržaj moraju biti zatvoreni. Prazni elementi započinju sa početnim tagom i moraju da se završavaju sa />.

Neispravno	Ispravno
Ovo je prelazak u novi red`<br>` Horiznotalna linije:`<hr>`	Ovo je prelazak u novi red`<br />` I ovo je prelazak u novi red`<br></br>` Horiznotalna linije:`<hr />`

NAPOMENA: Da bi XHTML bi kompatibilan sa sadašnjim brovserima potrebno je dodati i prazan prostor pre znaka "/" tj. kao u prethodnom primeru <br />, i: <hr />.

Atributi u tagovima moraju biti pisani malim slovima
Zato što je XML case-sensitve tj. osetljiv je na znakove. Pa je ispravno samo <table width="100%"> dok <table WIDTH="100%"> je neispravno

Vrednosti atributa obavezno se pišu pod navodnicma
Pa je isprvno samo <h1 align="center"> dok <h1 align=center> je neispravno

Nije dozvoljena minimizacija atributa

Neispravno	Ispravno
`<dl compact> <input checked> <input readonly> <input disabled> <option selected> <frame noresize>`	`<dl compact="compact"> <input cheched="checked"> <input readonly="readonly"> <input disabled="disabled"> <option selected="selected"> <frame noresize="noresize">`

Evo liste minimiziranih atributa u HTML-u i kako oni treba da se pišu u XHTML:

compact="compact"
checked="checked"
declare="declare"
readonly="readonly"
disabled="disabled"
selected="selected"
defer="defer"

ismap="ismap"
nohref="nohref"
noshade="noshade"
nowrap="nowrap"
multiple="multiple"
noresize="noresize"

Normativa

Postoje elementi kojima je zabranjeno da sadrže pojedine elemente, tj.

a
nesme da sadrzi druge a elemente
pre
must not contain the img, object, big, small, sub, or sup elements.
button
nesme da sadrzi druge input, select, textarea, label, button, form, fieldset, iframe ili isindex elemente
label
nesme da sadrzi druge label elemente
form
nesme da sadrzi druge form elemente

Script i Style elementi

Pošto unutar script i style elemenata se nalzi ne XML sadržaj pa bi se znak manje tretirao kao < i skript nebi radio. Tada se takav ne XML sadržaj postavlja unutar CDATA elementa, kako se nebi vršili data konverzija.

<script type="text/javascript"> 
       
    <![CDATA[ 
       
         ... unescaped script content ... 
       
    ]]>
       
 </script>

Atribut "id" zamenjuje "name" atribut

U HTML 4.01 definisan je atribut name za elemente a, applet, frame, iframe, img, i map a u XHTML on je isključen i umesto njega koristi se id atribut.

Ovo je neispravno:	Ovo je ispravno:
`<img src="picture.gif" name="picture1" />`	`<img src="picture.gif" id="picture1" />`

Entiteti se refernciraju sa heksadecimalnim vrednsotima

SGML and XML both permit references to characters by using hexadecimal values. In SGML these references could be made using either &#Xnn; or &#xnn;. In XML documents, you must use the lower-case version (i.e. &#xnn;)

Lang atribut

Atribut lang primenjuje se na skoro svaki XHTML element i navodi jezik sadržaja unatr elementa.

<div lang="no" xml:lang="no">Heia Norge!</div>

Osnova XHTML dokumenta

Svaki XHTML dokument započinje sa DOCTYPE deklaracijom, što predstavlja definiciju strukture dokumenta u vidu DTD-a(Document Type Definitions).

Minimalna osnova XHTML dokumenta:

<?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="en" lang="en">
       
 <head>

 <title>Virtual Library</title>
       
 </head>

 <body>

 <!--  ovde ide sadryaj -->
       
 <p>Moved to <a href="http://example.org/">example.org</a>.</p>
       
 </body>

 </html>

Osnovni element mora biti html.
Osnvni element mora da poseduje deklaraciju namespace-a tj. http://www.w3.org/1999/xhtml.
Mora da započinje sa DOCTYPE deklaracijom koja referncira na jedan od tri definisane definicije tipa dokumenta tj. DTD-e.

Deklaracija

DOCTYPE deklaracija nije XHTML element i nema svoj završni tag. Deklaracija mora uvek da se nalazi u prvoj liniji XHTML dokumenta i nosi tip DTD-a tj. tip definicije dokumenta.

DTD specifira sintaksu web strana u SGML-u, kao npr. HTML, gde su navedena pravila o primeni marker na određeni tip, uključujići set elemenata i deklaracije entiteta. Znači DTD definiše strukturu dokumenta tj. sam XHTML i njegovo značenje. Primer DTD-a je HTML specifikacija koja definiše značenje HTML elemenata koju Web čitači koriste kako bi prikazali WEB stranicu. Inače bi svaki Web čitač tumačio HTML na svoj način.

XHTML DTD omogućava sintaksu i grmatiku XHTML markera, a korsiti se za validaciju samog dokumenta. Postoje tri deklaracije: Strict, Transitional, i Frameset. Najpopularniji je XHTML Transitional.

XHTML 1.0 Strict

Strict DTD uključuje definicuju elemente i atributa za strukturu HTML dokumenata bez elemenata i atributa formatiranje sadržaja a ne sadrži definiciju okvira (framesets):

<!DOCTYPE html
       
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
       
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ova deklaracija se koristi kada imate čist kod i želite da izbegnete greške a koristite CSS (Cascading Style Sheets).

XHTML 1.0 Transitional

Transitional DTD uključuje sve elemente i atribute, bez definicije okvira:

<!DOCTYPE html

 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ova deklaracija se koristi kada koristite sve prednosti HTML-a i kada želite da podržite Web čitače koji nerazumeju CSS.

XHTML 1.0 Frameset

Frameset DTD uključuje sve što i pretnhodni plus okvire:

<!DOCTYPE html

 PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Ovu deklaraciju upotrebljavate kada koristite HTML okvire za deljenje prozora Web čitača na dva ili više okvira.

Validacija XHTML sa DTD

Prethodno opisanim radnjama pretvorite vaš HTML u XHTML. Da bi izvršla validacija XHTML dokumenta potrebno je referencirati odgovarajući DTD fajl. W3C validator se na nalzi na adresi http://validator.w3.org.

Pomoću progrma HTML TIDY možete automatski prebaciti iz HTML u XHTML. Dave Raggett's HTML TIDY je besplatni program za validaciju i čićenje HTML koda. Omogućava i čišćenje nepotrebnog koda kojeg unose razni HTML editori i razni drugi alati, npr. WORD. Program zamenjuje složene atribute fontova stilovima i uvlači oznake radi bolje čitljivosti. Program je veličine 136 kilobajta koji se koristi iz komadne linije. Program možete preuzeti sa strane www.w3.org/people/raggett/tidy

I na kraju sledi jednostavan XHTML dokument:

<!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="sr" lang="sr">

 <head>

 <title>Jednostavan dokument</title>

 </head>

 <body>

 <p>Jednostavan paragraf</p>

 </body>

 </html>

Ukoliko započinjete kreiranje Web prezentacije rukovodite se ovim pravilima radi standardizacije, i kreiranja čistog koda. Ova prezentacija je kreirana po XHTML-u, pogledaj desni klik mišem pa View Source.

Slične teme

HTML
XML

Resursi

http://www.w3.org/TR/xhtml1

Povratak na početak strane

Slične teme

HTML
XML

Prijavite se na naš informator

[ Informator ]

»» Preporuči prijatelju

»» Upišite komentar

»» Knjiga otisaka

Pomoć!

Trudimo se da SveZaWeb bude koristan i ispravan, međutim uvek postoje greške, molimo Vas da nam pomognete kako bi ih ispravili.

Ova prezentacija je još uvek statička, nisam u stanju tehnički da izvedem kompletno svoju zamisao. Veoma mi je žao što zbog toga trpi naša interakcija.

Zamolio bih Vas da ako želite pošaljete vaša iskustva u razvoju, dizajnu i populaciji Web-a.

Ukoliko imate primedbe, sugestije ili želite da učestvujete u izgradnji ovog sajta, javite se : webmaster@
svezaweb.dzaba.com

Najbolji pregled u 800*600 sa najpopulanijim browser-ima

Razvoj

Dizajn

Kreiranje

Panorama

Usluge