Dnevnik eklektika // HTML, XHTML, elementi, tagovi i atributi

HTML, XHTML, elementi, tagovi i atributi

Drugi po redu članak iz serije o uvodu u web dizajn i markup.

Ovaj članak diskutuje strukturu HTML dokumenta, njegove sekcije i pokušava da pojasni terminologiju i konfuziju oko toga šta je HTML element, šta je tag, a šta atribut.

Po obećanju, evo ga i nastavak serije unosa o prvim koracima u web dizajnu i učenju markupa.

Dakle ono što prvo treba da razlučimo je sledeće—*HTML ili/i XHTML*?

HTML i XHTML

HTML iliti HyperText Markup Language je jednostavno jezik kojim se formiraju HTML elementi. On nije programski jezik i sintaksa mu je stoga mnogo jednostavnija od većine programskih respektivno.

XHTML iliti eXtensible HyperText Markup Language je isto što i HTML samo malo savremenije. XHTML je produžena verzija HTMLa—on je u stvari HTML reformulisan kao XML. To je sve što treba da znate za sada.

Ima li razlike između ova dva gorepomenuta?

Drago mi je što sam pitao, naravno da ima. Neke od osnovnih razlika su (lista se odnosi na XHTML):

Vrednosti atributa se moraju „obuhvatiti” duplim navodnicima,
Tagovi se moraju pisati malim slovima,
Tagovi moraju biti pravilno zatvoreni. Kod elemenata bez zatvarajućeg taga poput br, dok je u HTMLu dozvoljen <br> u XHTMLu oni se moraju zatvoriti ovako: <br />. Ovo je urađeno radi unazadne kompatibilnosti,
Svi atributi koji određuju prezentaciju su nedozvoljeni u XHTMLu 1.1 i 1.0 Strict, poput align, bgcolor, valign,
img elementi moraju da sadrže opisne alt atribute,
input elementi moraju da imaju svoj label,

XHTML markup mora biti pravilno struktuiran. Što će reći da inline element ne sme da sadrži block level element, link ne sme da bude ugnježđen u link, itd.

Ovo su neke od glavnih razlika ove dve varijante markup jezika. Neke od bitnijih i više tehničkih i profinjenijih razlika su pravilno uslužavanje XHTMLa (MIME type), takođe jedna od veoma bitnih stvari je i doctype.

Doctype iliti DTD

DTD—Document Type Declaration određuje način na koji će browser da interpretira naš markup, tj. verziju HTMLa koji će se koristiti u dokumentu. Svaki HTML dokument je mora sadržati i to kao prvu liniju pre head sekcije.

Od DTDova možemo birati (po mojoj preporuci) između HTML4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Transitional

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

i na kraju XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Preporuke W3Ca , i više o DTDovima ovde. „Roger Johansson o Strict vs. Transitional”:http://24ways.org/advent/transitional-vs-strict-markup

Sada kada smo pokrili osnove mogli bismo da idemo dalje.

Elementi, tagovi i atributi i sekcije dokumenta

Ovo zapamtite sada i gledajte da ne mešate gorepomenute. Samim tim ćete izbeći podsmevanje kolega. ;) Nema razloga da ne naučite pravilno da se izražavate i ne naučite šta je šta. Lično mi se digne kosa na glavi (koje i nemam) kada mi neko kaže div tag.

HTML elementi

Element se sastoji od otvarajućeg i zatvarajućeg taga. Mislim da već ovo objašnjava oba termina, ali objasnićemo svaki posebno za svaki slučaj. Dakle element bi trebali posmatrati kao neku malu celinu.

Pošto postoje elementi koji nemaju zatvarajući tag (br, img…) oni se zatvaraju na način već objašnjen gore (razmak i sleš pre znaka „više od”).

U prethodnom članku smo pominjali block i inline elemente, to su prezentacioni momenti kod HTML elemenata, tj. ta stanja određuju kako će ih browser prikazati.

Tagovi

Tagovi obmotavaju HTML element. Sastoje se od „<” znaka, slede ime elementa, atributi, i onda u zavisnosti od prirode elementa (da li je samozatvarajući ili ne) ako je samozatvarajući „/>” (gde je „„ razmak), a ako je običan element u pitanju sledi samo znak „>” pa onda ide sadržaj elementa pa zatvarajući tag </imetaga>. Primer:

Ilustracija i primeri običnih i samozatvarajućih elemenata

Atributi

Atributi se nalaze u otvarajućem tagu elementa (ukoliko je element samozatvarajući onda se navode posle imena elementa). Pod atribute podrazumevamo: class, id, style, tabindex, itd.

Sekcije HTML dokumenta

Kako smo već spomenuli doctype je prvo što se navodi u HTML dokumentu. Posle doctype definicije dolazi head sekcija. Ona sadrži meta informacije (_meta tagove_), naslov dokumenta (title), linkove ka style sheetovima, JavaScript fajlovima, RSS feedovima (XML dokumentima), favicon, itd. Tačnije u head sekciji sa nalaze veze sa svim eksternim fajlovima koje pozivamo za izvršenje u našem HTML dokumentu. Sadržaj head sekcije korisnik ne vidi i on nije direktno namenjen njemu.

Head sekcija na primer izgleda ovako:

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="
Odlučio sam da usled mnogo pitanja u vezi početka učenja CSSa i samog markupa, posvetim par unosa baš njima." />
<meta name="keywords" content="css, uvod u css, css tutorijal, html, xhtml style sheets" />
<link rel="stylesheet" href="http://dnevnikeklektika.com/textpattern/css.php?s=blog" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Dnevnik eklektika - skoriji unosi (RSS)" href="index.php?rss=1" />
<link rel="alternate" type="application/rss+xml" title="Dnevnik eklektika - skoriji unosi (atom)" href="index.php?atom=1" />
<link rel="alternate" type="application/rss+xml" title="Dnevnik eklektika - delišs linkovi" href="index?rss=1&amp;area=link" />
<title>Dnevnik eklektika &middot; Uvod u CSS; Block i inline elementi</title>
<link rel="shortcut-icon" href="http://dnevnikeklektika.com/favicon.ico" />
<script src="http://dnevnikeklektika.com/index.php?file=nhn_livecommentpreview" type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="http://dnevnikeklektika.com/index.php?js=upm_img_popper"></script>
</head>

Posle head sekcije dolazi body sekcija. U body ide sav markup. To znači sav HTML kod koji ćemo videti na ekranu, koji će se izrenderovati za display—naš sadržaj sa HTML elementima.

Za sada toliko, sledeći unos u ovoj seriji će se pozabaviti samom strukturom markupa i njegovom semantikom.

U toku pisanja ovog članka Molly E. Holzschlag je napisala jedan veoma dobar članak (molly.com je inače veoma referentan blog po pitanju web standarda i markupa respektabilno). Definitivno ga overite.

Nema komentara 0

Komentari su zatvoreni za ovaj unos.

Info

Postavljeno: 2005-12-09 19:49 u blogu
CSS i markup
Web dizajn
Unosi / Komentari
Komentari zatvoreni

Dnevnik eklektika - Piše Dragan Babić