Osnovna struktura HTML dokumenata je univerzalna, striktno definisana i ista je za sve veb strane, bez obzira na to da li se na ekranu pojavljuju u jednostavnom ili složenom obliku. Neki osnovni elementi zajednički za sve HTML dokumente kreiraju tu strukturu. U osnovne elemente spadaju definicija tipa dokumenta (DTD – Document Type Definition), glavni element (zaglavlje) i telo elementa. Sve ove elemente stavili smo u naš HTML šablon u prethodnom zadatku.
Osnovna struktura dokumenta nema nikakve veze sa stranom sadržaja. Sadržaj je ono što vidimo na strani, ali to nije ni u kakvoj vezi sa osnovnom strukturom HTML dokumenta. Kompozicija HTML dokumenta je delimično vidljiva i nevidljiva onima koji pregledaju veb stranu.
Svi HTML dokumenti sastoje se iz dva primarna odeljka: zaglavlja strane (gornje žive kolone) i tela. Sav sadržaj sa strane, odnosno sve ono što vidite i na šta delujete nalazi se u telu.
HTML oznake i elementi su termini koji imaju različita značenja, ali se između njih u svakodnevnoj praksi ne pravi razlika. Većina veb dizajnera i programera više ne pravi razliku između oznaka i elemenata.
Odeljak sa zaglavljem strane sadrži podatke koji nisu vidljivi. To je sadržaj koji korisnici ili oni koji pregledaju stranu u stvari ne vide.
Prva linija svakog HTML dokumenta, bez obzira na to šta je još uključeno u dokument, mora biti definicija tipa dokumenta (Document Type Declaration), odnosno DOCTYPE Declaration ili DTD. U ranijim verzijama HTML-a, mnogi slojevi podešavanja i doterivanja HTML standarda značili su i složeniji i teži DTD. Međutim, u HTML5 DTD je neverovatno jednostavan. Mora biti učitan na sledeći način:
<! DOCTYPE html>
Ovaj DTD će raditi i u ranijim verzijama HTML-a sa kojima ćete se takođe susretati na veb stranama. DTD saopštava pretraživaču da očekuje HTML dokument, a ne neki drugi markerski jezik ili drugi tip dokumenta. Zbog ove funkcije DTD-a, pre DTD-a ne sme da postoji prazan prostor odnosno prazne linije. Ovo je jako bitno, jer ukoliko pretraživao prepozna prazne linije ispred DTD-a, on će se ponašati kao da DTD-a nema i rezultati mogu biti nepredvidljivi.
Nakon DTD-a sledi HTML element. Uz HTML element stoje početna i krajnja oznaka, tako da to izgleda:
<html></html>
Svi ostali elementi HTML datoteke sadržani su u ovom elementu, koji saopštava pretraživaču da je ovo HTML dokument.
<head></head>
U glavnom odeljku nalaze se informacije o samom dokumentu, kao što su naslov (koji će se prikazati na naslovnoj traci pri vrhu pretraživača), bilo koji metapodatak i bilo koji stil ili skript koji se koriste u dokumentu.
<body></body>
Sledeći u liniji je odeljak sa telom. Ovo je vidljivi i interaktivan sadržaj dokumenta. Sve što možete da vidite na veb strani nalazi se u ovom delu dokumenta. Sav sadržaj i formatiranje sadržaja nalazi se u telu dokumenta.
Pomenuli smo tagove kao osnovnu gradivnu jedinicu HTML dokumenata (stranica) i videli strukturu jednog jednostavnog dokumenta.
Elementi se sastoje od tri dela:
- početni HTML tag
- završni HTML tag
- sadržaj između njih (neki tagovi nemaju sadržaj)
Često se umesto reči element koristi samo reč tag. U tom kontekstu se ceo element (početni tag + sadržaj + završni tag) označava samo kao tag. Tako se može reći nešto poput: „Otvaramo p tag, unosimo sadržaj i zatvaramo tag“.
- Početni HTML tag
- Završni HTML tag
- znak manje i znak veće se koriste da označe početak, odnosno kraj početnog i završnog taga.
- karakter ili karakteri koji označavaju tip taga
- kosa crta (forward slash) određuje da je to završni HTML tag
Dakle, imajući prethodno pomenuto u vidu, svaki element počinje početnim HTML tagom, tako što pišemo znak manje, zatim jedan ili više karaktera koji označavaju tip taga (sami karakteri nisu proizvoljni) i znak više. Zatim sledi sadržaj taga. Na kraju pišemo završni HTML tag koji se sastoji od znaka manje, zatim kose crte, ponovljenih karaktera koji označavaju tip taga, i znaka veće. Svi, osim nekih izuzetaka prate ovo pravilo.
Osnovna pravila pisanja HTML jezika
- Prvo pravilo
Jedan tag (element) može obuhvatiti neograničeno drugih, ali se svi ti tagovi moraju i završiti u okviru taga u kome su napravljeni. Pogledajmo na primeru.
Ovaj primer je dobar:
dok ovaj nije:
U prvom je unutar p taga otvoren i zatvoren strong tag, a tek zatim se završava i sam p. U drugom dolazi do greške jer su tagovi ukršteni, nije završen strong pre okružujućeg p, što je greška.
Ovakve vrste grešaka se ponekad događaju kada se kombinuje rad sa aplikacijom za dizajniranje (WYSIWYG) i ručnog unosa HTML kôda i umeju da budu prilično teške za lociranje u većim dokumentima. Najbolja prevencija je pažljiv unos tagova.
- Drugo pravilo
Svaki početni tag mora imati i završni tag. Odnosno, ako počnemo određeni element (tag), moramo ga negde i završiti. Ne smemo dozvoliti da npr počnemo h1 tag za naslov, unesemo sadržaj (tekst naslova) i samo nastavimo dalje sa paragrafima teksta. Pre paragrafa u ovom primeru moramo završiti (zatvoriti) h1 tag, i tek onda nastaviti dalje. Ovaj primer je dobar:
dok ovaj nije:
Većina elemenata se piše kako smo pomenuli, ali postoje i takozvani samozatvarajući tagovi. Samozatvarajućitagovi su oni koji počinju i završavaju se istovremeno.
Na primer, oznaka za prelom reda unutar paragrafa je <br>. Kod tog taga nema sadržaja i ako bi važila pravila od malopre, trebali bi da pišemo <br></br>. Pošto je ovo nepotrebno (i pri tom nepravilno), takve tagove pišemo samo kao <br> ili <br />.
U HTML varijanti se samozatvarajući tagovi pišu <x> (potpuno isto kao početni tagovi, bez završnih), dok se u xHTML varijanti mora pisati <x /> (što je kombinacija početnog izavršnog taga). Imajući ovo u vidu, pogledajmo primer za tzv. normalne i samozatvarajuće tagove:
Primećujemo početni i završni p tag, koji čine p element i okružuju jedan paragraf teksta. Unutar tog p taga nalazi se samozatvarajući br tag koji označava da se na tom mestu prelama red.
Kada browser naiđe na problem vezano za ova dva pravila, tj nepravilan kod, on pokušava da ga ipak prikaže, ali pretpostavljajući neke detalje i ispravljajući kod koliko može prilikom prikaza. Tada se mogu desiti razne nepredviđene situacije i verovatno različit prikaz u različitim browserima. HTML i xHTML se u 90% pravila poklapaju. xHTML je nadogradnja HTML seta.
Atributi HTML tagova
Na samim tagovima, odnosno na početnim tagovima elemenata mogu se pojaviti atributi koji sadrže dodatne informacije.
Atributi se sastoje iz dva dela: ime atributa i vrednost atributa. Pišu se na početnom tagu elementa i to odvojeni jednim razmakom od oznake tipa taga. Ime atributa se piše malim slovima, postavlja se znak jednakosti, a zatim vrednost atributa pod znacima navoda. Razmaci su zabranjeni unutar konstrukcije atributa. Pogledajmo primer:
