Slušaj robot čitača
Kako započeti HTML dokument?
Kada otvorite tekstualni editor, (najverovatnije Visual Studio Code ) i u njemu otvorite novi fajl sa ekstenzijom .html, (u novije vreme čim kreirate novi prazan fajl kroz VSC, on vas pita da odaberete tip fajla) sve što treba da uradite jeste da ukucate ! ↹
Standardno, HTML fajl stranice sajta koja se otvara kad se ukuca domen, nazivamo index.html. Ovo je zaostavština iz ranih dana weba, gde bi odlazak na neku adresu, izlistao sve fajlove koji se na toj adresi nalaze, odnosno, dao bi nam "indeks" te lokacije. Ako bismo hteli da posetilac odmah vidi prvu stranicu sajta, umesto spisak fajlova odakle treba sam da odabere šta hoće da vidi prvo, morali smo napraviti fajl nazvan index.html, i server bi onda automatski otvaro taj fajl. Danas je ovo moguće promeniti, i podesiti server da otvara bilo kako nazvan fajl, ali kao i uvek, čim uradite nešto nestandardno, to uvek pravi probleme kasnije. Kada recimo za godinu dana odlučite da menjate svoj sajt, nećete se više sećati kako ste nazvali početni HTML fajl. Šta vam to treba.
Svi tekst editori imaju ekstenziju emmet, koja je sada sastavni deo VSC, a koja na ↹ dugme proširuje skraćenice u željeni kôd, tako da, dá, upamtite ↹ dugme, koristićete ga često.
U ovom konkretnom slučaju, ! je skraćenica koju ↹ proširuje u elementarni HTML kôd.
ta-da:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Ovo je najelementarnija HTML stranica. Ima sve što joj treba, sve što svaka HTML stranica ima, a opet, na njoj nema ničega. Ako ovaj kôd sačuvate u fajlu sa ekstenzijom .html, i otvorite ga u browser-u, videćete samo praznu stranicu.
Sve što vidite u ovom kôdu, osim prve deklaracije, su HTML tagovi. Svaki tag počinje sa <, i završava se sa >. Između ovih uglastih zagrada, je naziv taga.
Svi tagovi u ovom kôdu, imaju svog para. <html>, <head>, <title> i <body> su počteni tagovi, a </html>, </head>, </title> i </body> su krajnji tagovi. Tako sve što se nalazi između <html> i </html> taga, predstavlja HTML dokument.
Većina HTML tagova, mora da se otvori, i da se zatvori. Ako tag ne bi bio zatvoren, to bi se njegov CSS primeno na sav tekst do kraja strane, ili do sledećeg mesta gde se drugi isti takav tag zatvorio. Mali broj tagova odstupa od ovog pravila i ti tagovi su samozatvarajući, npr. <img> tag za dodavanje slika na web stranicu je jedan takav tag. Moderni text editori automatski zatvaraju tag čim ga otvorite.
Deklarisanje fajla kao HTML fajla <!Doctype html>
Jedini izuzetak u ovom malom snipetu kôda, je <!DOCTYPE html> deklaracija.
Ova deklaracija je uvek prva u HTML fajlu, pre samog <html> taga, a sama nije HTML.
U ranim danima web-a, postojala su dva bitna browser-a, Microsoft-ov Internet Explorer, i Netscape Navigator. I ova dva browser-a, su se onda sudarila, i nisu mogla između sebe da se dogovore kako kôd treba da se piše, pa su u to vreme, developeri morali da pišu po dve stranice za svaki sajt, jednu za Navigator, i jednu za IE.
Ovo su pokušali zaustaviti 1994-e, osnivanjem W3C. W3C je osnovao TimBl, pri MIT/LCS-u kada je napustio CERN, uz podršku EC i jezive DARPA-e. DARPA je američka državna vojna organizacija, koja je 1969 projektovala ARPANET, preteču Interneta, a u svrhu špijuniranja. Danas se DARPA prvenstveno bavi izgradnjom i razvojem autonomnih bojnih robota.
Problem sa uvođenjem standarda tek 1994-e (pune tri godine postojanja web-a) je značio da je već postojao značajan broj sajtova (sveukupno 3000) koji bi prestali da rade, ako bi se samo novi standard primenjivao. Iz tog razloga browser-i imaju nekoliko modova rada, kako bi mogli da podrže i moderno standardizovane sajtove, kao i prvi sajt ikada izrađen.
<!DOCTYPE html> deklaracija obaveštava browser da ovaj sajt koristi savremeni standard, odnosno da je naš dokument HTML5.
Usled toga što su browser-i tako pravljeni, da ne daju grešku, nego ignorišu sve greške u HTML-u, to bi sajtovi radili i kada bi se doctype deklaracija skroz izostavila. U ovom slučaju browser-i rade u tzv quirks môdu, i ponašanje može biti nepredvidivo, iz kog razloga uvek navodimo doctype deklaraciju.
Deklaracija <!DOCTYPE html>, samim tim nije HTML tag već ključna reč. Takođe vredi napomenuti da nije bitno da li se deklaracija piše velikim ili malim slovima, te da će browser razumeti šta ste hteli da kažete čak iako koristite <!DoCtYpE HtMl>.
Generalno nije bitno da li HTML pišete malim ili velikim slovima, ali se podstiče pisanje malih slova. U JS-u, i CSS-u je bitno da znate gde ste pisali mala a gde velika slova, pa je onda lakše samo pisati mala slova svuda, nego svaki put proveravati.
Doctype se ne može izostaviti, jer prvobitni sajtovi, koji su pravljeni za zastarelu verziju HTML-a nisu koristili ovu deklaraciju, pa ako bismo sad pravili browser-e koji izostanak ove deklaracije tumače kao HTML5, onda bi ti sajtovi iz kamenog doba prestali da rade.
U ranijim verzijama HTML-a, doctype je bio znatno duži, npr u HTML-u 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Ako ovo ukucate kao deklaraciju u svoj moderni projekat, on će i dalje raditi, ali postoji mogućnost da browser primeni drugi môd u čitanju vašeg sajta, i da neke elemente prikazuje pogrešno. <!DOCTYPE html> je sasvim dovoljno u HTML-u 5, i čak preporučljivo, jer će skratiti učitavanje kôda za nekoliko pikosekundi
Browser-i i organizacije koje se bave HTML standardima su se usaglasile da se ništa od danas postojećih tagova neće izbacivati iz upotrebe u budućnosti, pa su time najkraću moguću deklaraciju, dodelili HTM5-ici. U tom smislu su neke organizacije preimenovale HTML5 u HTML living standard, i time označili da je HTML projekat zvanično prevazišao verzije. Nikada neće postojati HTML6. U tom smislu se može reći da je HTML standard kompletiran, ali kako će se nove stvari i dalje dodavati, bez promene verzije, to je on onda "živi" standard. Isto važi i za CSS3
Koren HTML dokumenta, <html>
<html>…</html> tag, definiše naš HTML dokument, i često se naziva "root element" iliti "korenski element". Svi ostali HTML elementi se moraju naći unutar ovog taga, baš kao što se i grane moraju naći na drvetu.
<html lang="sr">
...
</html>
Ovaj atribut je kako pretraživači poput duckduckgo i googla-a znaju koji jezik neka stranica koristi. Ovde možete videti spisak svih jezika i njihovih oznaka.
Zaglavlje web stranice, <head>
<head>…</head> tag definiše zaglavlje HTML dokumenta. Ovo zaglavlje se u opštem slučaju ne vidi na samom sajtu, ali definiše mnogo toga potrebnog za ispravan rad sajta.
Ovde se nalaze sve one stvari koje naš sajt misli, ali ne mora obavezno i da (po)kaže, informacije o samom sajtu; takozvani meta tagovi, linkovi ka resursima koje sajt koristi, i naravno naziv sajta.
Kako prikazati naziv sajta na tabu? <title>
U <title>…</title> pišemo naziv sajta. Recimo, ova stranica ima nekoliko naslova, ali samo jedan naziv (Kodiranje | Struktura web stranice). Ako sajt ima više stranica, sadržaj ovog taga bi mogao da bude isti na svakoj stranici, ali bi mogao i da se razlikuje. Tekst koji se nalazi u ovom tagu, će biti ispisan ne na stranici, već na tabu u kom je sajt otvoren. Možete to odmah probati, u HTML fajl koji ste malopre sačuvali, ukucajte neki tekst unutar <title> taga, npr:
<title>
Šta je ovo?
</title>
Sačuvajte ovu izmenu, i otvorite ovaj fajl u browser-u. Kao što vidite, na tabu će pisati "Šta je ovo?", ili šta god ste vi upisali.
- Title element takođe definiše šta će google prikazati kao naziv strane u rezultatima pretrage
- Koristiće se kao naziv pod kojim će strana biti bookmark-ovana.
- Neki browser-i, kao recimo Firefox, imaju opciju da se stranica otvori sa minimalnim CSS-om, u tzv "distraction free" izdanju, gde izgleda kao knjiga. U tom slučaju će sadržaj title taga, biti ispisan na stranici kao njezin naslov.
Telo web stranice, <body>
<body>…</body> tag označava telo HTML-a, i u njega ćemo upisivati skoro sav HTML kôd koji se očitava u browser-u. Ako pogledate ponovo osnovnu struktura HTML-a zapazićete da su <head> i <body> tagovi istog nivoa. Oba su direktni "potomci" <html> taga, njegova "deca", ili ako je <html> element koren stabla, head i body su prve dve, glavne grane sajta. Iz tog razloga ih pišemo jednako uvučene u .html dokumentu. <body> počinje odmah nakon <head> taga. Ništa se ne može upisati između njih. To jest, vi možete upisati, ali će ga browser-i vratiti u okrilje jednog od ova dva taga.
U ovom tagu se nalaze svi sadržaji HTML dokumenta, dakle; tekst, slike, linkovi, video sadržaji, i HTML elementi koji se ne prikazuju na strani direktno, ali bliže definišu njenu strukturu.
Ako ukucate bilo koji tekst između <body>…</body> tagova, i ponovo otvorite svoj .html dokument u browser-u, videćete taj tekst ispisan na ekranu:
...
</head>
<body>
Pozdrav narode!
</body>
</html>
Mi naravno nikada ne upisujemo text ovako u prazno, već ga stavljamo između odgovarajućih tagova, o kojima ćemo učiti u narednoj lekciji.
Završna reč
U najranijim verzijama HTML-a, tagovi <html>, <head>, i <body>, nisu bili definisani, iako se počinju pominjati relativno brzo, i uključeni su već u HTML 2.0 specifikaciji.
Specifikacija za HTML 1.0, kao takva ne postoji, iz istih razloga iz kojih smo i prvi svetski rat počeli tako zvati tek nakon drugog svetskog rata. Pre toga se prvi svetski zvao "veliki rat" ili samo "svetski rat" . Kome je moglo pasti na pamet da bismo, kolektivno, kao ljudski rod, to mogli ponoviti.
I kao što se iz prethodno iznetog može zaključiti, zbog kompatibilnosti unazad, i dan danas se tagovi <html>, <head>, i <body> mogu izostaviti a da stranica nastavi da radi, tj, opcioni su.
Browser-i se tako dizajniraju, da pretpostavljaju ova tri taga ako su izostavljeni, što možete videti i na Live DÔM Viewer-u, te u skladu s tim, ne postoji mnogo razloga da se ovi tagovi uopšte pišu. Šta više, google-ovo "stilsko uputstvo za pisanje html"-a eksplicitno preporučuje da se pisanje ovih tagova preskoči, dakle samo doctype odmah iza koga sledi <title> element.
Ako na skoro bilo kojoj stranici na web-u na tastaturi pritisnete dugme F12 ili Ctrl+Shift+i, otovriće vam se "developer tools".. Ovaj prozor bi trebao da bude podeljen na dva dela, jedan koji prikazuje HTML kôd, i drugi za CSS. Primetićete i ovde da čak i ako izostavite <html>, <body>, i <head> tagove, stranica ih i dalje ima, jer ih browser insertuje za nas. To dalje znači da i dalje na njih možemo primenjivati javaskript kao da su i napisani u kôdu.
Zašto onda učimo ove tagove, ako nisu bitni?
- Kako nisu bitni? Da nisu bitni, zar bi ih browser-i sami insertovali?
- Javascript kad manipuliše DÔM-om, uvek počinje tako što pristupa html elementu, a preko njega i ostalim elementima
- Ove tagove biste ionako svuda viđali, počev sa "developer tools"-ima, tako da bi bilo vrlo čudno da ih ne obradimo
- Ovi tagovi su deo HTML5 specifikacije, dakle nigde ne idu
- Čak iako google sugeriše svojim zaposlenima da preskoče ove tagove, to ne znači da će se od vas sutra na poslu očekivati da ih preskočite.
Sada smo spremni i da kreiramo svoj prvi sajt ikada
Članak prvi put objavljen: 7.5.2021.
Poslednje izmene: 3.2.2022.
Autor: k.