Uvod u HTML i CSS

UVOD U HTML I CSS UVODNA LEKCIJA Šta je HTML? 1

HTML je akronim od HyperText Markup Language , i to je opisni jezik pomoću kojeg kreiramo veb-stranice, odnosno uređujemo elemente veb-stranica. HTML je opisni jezik, iako možete nekad čuti pogrešno da je reč o programskom jeziku. Ukoliko bismo otvorili HTML stranu koristeći Notepad na Win ili u TextEdit alatu na Mac sistemu, otvara se i prikazuje HTML kôd (tekst). Sa druge strane, kada tu istu stranu pokrenemo u web browseru, on je interpretira i prikazuje na pravi način. Malo istorije HTML je 1990. godine kreirao Tim Berners Li, tada zaposlen u CERN-u. Uporedo je stvoren i prvi web browser. U to doba, internet je postojao, ali u mnogo drugačijem obliku nego danas. HTML je, u tom prvobitnom periodu razvoja, omogućio lakšu saradnju na projektima na velikoj udaljenosti. Pomoću njega prenosimo prost kôd (tekst) od izvora do primaoca, čiji browser taj kôd interpretira u smislen dokument.

slika 1.1 - Bernsov NeXT računar koji je služio kao prvi veb-server na svetu. Izvor slike: http://en.wikipedia.org/wiki/File:First_Web_Server.jpg HTML se danas znatno razlikuje od te prvobitne verzije, ali je zadržao osnove na kojima je kreiran. Berners Li nije

zaštitio HTML i objavljen je pod open source uslovima. Tokom godina, konstantno je unapređivan, a i osnovan je W3C (World Wide Web Consortium – http://www.w3.org/), koji se bavi standardizacijom i unapređenjem HTML i drugih standarda. Takođe, 2004. zaposleni u kompanijama usko vezanim za veb, kao što su Apple, Mozilla, Opera i mnoge

druge,

osnovali

su WHATWG (Web

Hypertext

Application

Technology

Working

Group

–

http://www.whatwg.org/) a sve kao odgovor na tromost W3C-a u razvoju novih tehnologija. Danas su W3C i WHATWG dva najbitnija tela koja se bave budućnošću interneta. Trenutno je aktuelna i preporučena verzija HTML jezika, HTML5 koja je 28. oktobra 2014. dostigla status W3C Recommendation. To označava da je HTML5 posle dugog perioda razvoja postao preporučeni standard za sve nove sajtove i uslovno rečeno objavljena je njegova „finalna” verzija. Kompletna specifikacija jezika i detalji se mogu naći nahttp://www.w3.org/TR/html5/

slika 1.2 - Logotip HTML5 jezika. Izvor slike http://en.wikipedia.org/wiki/File:HTML5-logo.svg

Šta je CSS? CSS (akronim od Cascading Style Sheets) je style sheet jezik koji se koristi za opis prezentacione semantike dokumenta pisanog u opisnom jeziku (markup language). Ako zanemarimo formalnu definiciju, jednostavnije rečeno, CSS opisuje, tj. uređuje izgled i formatiranja bilo kog elementa na stranici. Možete se zapitati čemu CSS i zar nema istu funkciju kao HTML? Iako bi takav stav na prvi pogled delovao logično,HTML i CSS imaju potpuno drugačiju namenu, ali se idealno dopunjuju. HTML nosi sadržaj, dok CSS taj isti sadržaj uređuje. Možemo napraviti analogiju sa programerima i dizajnerima. Koliko god se i jedni i drugi trudili da dokažu kako su baš oni bitni, činjenica je da jedni bez drugih ne mogu. Određeni sajt koji je kreirao samo programer funkcionisaće, ali tako da samo drugi programeri razumeju o čemu se tu u stvari radi, dok sajt koji je kreirao samo dizajner neće verovatno ni funkcionisati, ali će barem odlično izgledati. Šalu na stranu, kao što spoj dizajnera i programera daje odličan sajt, tako je i spoj HTML-a i CSS-a dobitna kombinacija za veb-stranice. HTML, sam po sebi, odvojen od CSS-a, ima određena pravila i mogućnosti za stilizaciju, ali ih treba izbegavati i prepustiti sve što je vezano za stilizaciju elemenata CSS opisima.

Malo istorije Koreni style sheet jezika datiraju sa početka osamdesetih i od SGML-a. Sam CSS je razvijan krajem devedesetih, dok od 2000. počinje njegova značajnija primena. Kao što je već rečeno, HTML nije kreiran kao vizuelni medijum, već kao jezik koji su koristili programeri i slični eksperti, a uglavnom za razmenu informacija prilikom rada na projektima. Tako se i pojavila potreba za nekim načinom da se taj HTML vizuelno uredi. Devet različitih style sheet jezika je predloženo u okviru W3C-a. Izabrana su dva od kojih je nastao CSS kakav danas poznajemo. Trenutno, možemo reći da je aktuelna verzija CSS3, ali je to samo donekle tačno. U ranijem periodu, i CSS jezik je označavan brojevima, zaključno sa verzijom CSS3. Trenutno, ali i u godinama koje dolaze nećemo imati nove verzije kompletnog jezika (nikada se neće pojaviti CSS4, ili CSS5 npr) već se svaki modul (deo jezika) razvija u svom tempu. Jasno određene verzije su se pokazale kao nepraktične (barem u pogledu CSS jezika) i zbog toga se napušta ta terminologija, iako je danas popularno pričati o HTML5 i CSS3. Za više informacija možete pogledati ovaj blog post: http://www.xanthir.com/b4Ko0

Neki osnovni pojmovi Iako su sledeći detalji verovatno poznati, korisno je utvrditi ove pojmove pre nego što krenemo dalje. Šta je internet? Internet je mreža svih mreža. On povezuje milione računara na globalnom nivou, formirajući tako globalnu mrežu. Pomoću interneta, računar može komunicirati sa drugim računarom bilo gde u svetu, dokle god su oba povezana na internet. Informacije putuju preko interneta posredstvom različitih načina (protokola). U okviru interneta funkcionišu različiti servisi, kao što su WWW (World Wide Web), E-mail, FTP i mnogi drugi. Šta je WWW (World Wide Web)? Iako većina ljudi poistovećuje malopre pomenuti internet i WWW, ta dva pojma nikako ne označavaju istu stvar.World Wide Web, ili skraćeno WWW, jeste model (način) pristupa informacijama, uz korišćenje interneta kao medijuma. WWW koristi HTTP protokol, jedan od jezika koji se koriste na internetu. WWW koriste browseri koji pristupaju web sajtovima. Ukoliko je razlika između internet i WWW i dalje nejasna, zamislite internet kao putnu mrežu jedne zemlje, a WWW kao autobuski prevoz te zemlje. Mi kao korisnici možemo koristiti usluge autobusa radi putovanja u različite krajeve zemlje, možemo koristiti različite prevoznike i tipove usluga i tako dalje. Ali sa druge strane, putnu mrežu (internet) mogu koristiti i mnogi drugi, a ne samo autobusi (WWW). Web browser (internet pretraživači, pregledači...) Sajtovima na internetu ljudi pristupaju upotrebljavajući tip softvera koji se naziva Web browser, ili samo browser. Najpopularniji browseri danas su Chrome, Firefox, Internet Explorer, Opera i Safari. Korisnici pristupaju sajtovima tako što unesu tačan URL sajta, prate link sa druge stranice ili putem bookmarka. Sami browseri se regularno unapređuju kako bi pratili novine, ali ne možemo uvek biti sigurni da je korisnik, posetilac našeg sajta, izvršio update na najnoviju verziju ili i dalje koristi npr. Internet Explorer 7, koji je objavljen 2006. i ne podržava većinu modernih tehnika. To je jedan od osnovnih problema modernog veb-dizajna i uopšte razvoja sajtova. Mi, sa jedne strane

možemo da iskoristimo najmodernije tehnike koje jezici HTML i CSS podržavaju, ali ako taj sajt pokrenemo u browseru koji je nastao pre tih tehnika, jasno je da ih neće pročitati i interpretirati na pravi način.

slika 1.3 - Logotipovi danas najpopularnijih pregledača. Izvor slike techglobex.blogspot.com

Veb-server Veb-serveri su specijalizovani računari koji su stalno uključeni i konstantno povezani sa internetom radi opsluživanja sajtova i njihovih korisnika. Kada korisnik, odnosno njegov browser, zatraži određeni veb-sajt, on biva upućen preko interneta do računara pod nazivom veb-server, ili kraće server, a koji sadrži traženi sajt. Kako funkcioniše www? Kada unesemo željenu adresu u browser, pomoću DNS sistema (Domain Name System) browser dobija informaciju o IP adresi veb-servera, odnosno sajta koji je potrebno učitati. IP adresa je tačna adresa gde se željeni sajt nalazi. Drugim rečima, mi koristimo URL (adresu sajta) kako bismo olakšali pamćenje, dok računari sajtove pronalaze pomoću IP adresa. Na primer, lakše je zapamtiti www.google.com, nego njegovu IP adresu: 74.125.224.72, iako možemo ukucati taj IP u browser i dobiti isti rezultat (probajte, možete otvoriti bilo koji browser i u adress bar uneti malopre pomenutu IP adresu u obliku: http://74.125.224.72/, otvoriće se Google). Pošto browser od DNS servera dobije informaciju o IP adresi sajta, on pristupa njoj, otvara root folder i traži index.html (ili default.html), te ih onda prikazuje korisniku.

slika 1.4 - Proces pristupanja sajtu

Šta vidimo na sajtu? Kada korisnik otvori sajt u browseru, prikazuje se stranica tako što browser preuzima HTML i CSS od servera, a zatim interpretira taj kôd u smislen, vizuelno adekvatno pripremljen sadržaj. Većina današnjih sajtova sadrži i slike, video/audio zapise, razna skripta i druge multimedijalne elemente. Svi ti elementi čine doživljaj sajta (ili kako se popularno još zove – UX – User eXperience). Šta je „ispod haube” sajta? Većina korisnika nikad ne vidi HTML i CSS, od koga je sastavljen sajt. Browser je zadužen, dakle, da sve što dobije od servera, uključujući HTML, CSS, JavaScript i tako dalje, pretvori u sadržaj koji će prezentovati korisniku (iz prethodne stavke).

slika 1.5 – Sajt http://www.adobe.com/ – prikaz HTML koda (levo) i prikaz korisniku u browseru (desno) Možete i sami pokušati da na nekom sajtu prikažete source stranice (HTML). U većini browsera, prečica je Ctrl+U (u IE desni klik na stranicu i View source). Pojaviće se HTML, koji, ako se niste susretali sa njime, verovatno neće ništa značiti i verovatno ćete pomisliti da ovim nikad nećete ovladati, ali među veb-developerima kruži šala da su oni kao likovi iz filma Matrix, koji gledaju kôd, a vide realan svet. Ono što želim da istaknem jeste da ćete posle nekoliko lekcija uvideti i sami da su HTML i CSS jezici veoma jednostavni za savladavanje jer prate određeni set pravila. 2

Posle nekog vremena, u radu sa HTML/CSS jezicima desiće se i vaš aha-momenat , posle kog ćete se pitati kako je uopšte moglo da deluje tako zbunjujuće. Da li su sajtovi sastavljeni samo od HTML i CSS jezika? Svi današnji sajtovi na vebu su, u osnovi, neka vrsta HTML jezika. Čak i sajtovi koji su „kompletno” izrađeni u Flashu ili sličnom alatu zahtevaju barem minimalni deo napisan u HTML jeziku kako bi bili prikazani u browseru. Može se reći da je HTML osnova celog veba, zato se i Tim Berners Li pominje kao tvorac WWW-a. Ipak, HTML je samo opisni jezik i njegova (uslovna) jednostavnost je doprinela popularnosti i opštem prihvatanju, ali zato, sa druge strane, ne može funkcionisati sam. Danas se, na osnovu koju čini HTML, dodaju mnogi drugi programski jezici koji omogućavaju interaktivnost i dinamički sadržaj. Najpopularniji programski jezici na vebu su PHP, Python, Java, ASP.NET, JavaScript, AJAX, za koje verujem da ste barem čuli, ali i mnogi drugi. Svi oni rade u

simbiozi sa HTML-om. Da bih ovo plastičnije prikazao, pogledajte kontakt-stranice svuda po webu, prijavljivanje na različite sajtove koristeći user/pass, komentari na Facebooku, dinamičko učitavanje novih tvitova na Twitteru i skoro svaka druga interakcija sajta i korisnika bazirana je na nekom programskom jeziku, jer HTML to ne može postići. Strana izrađena samo u HTML/CSS varijanti bila bi „mrtva”. Uočićemo to na jednom primeru sa veba. Na slici ispod vidimo jednu formu za komentar.

slika 1.6 - Formular za ostavljanje komentara na jednoj od strana sajta: http://www.smashingmagazine.com/ Na ovom konkretnom primeru, HTML je zadužen da postavi naslov, tekst, tri polja za unos podataka i dugme za potvrdu. CSS stilizuje boju, font i veličinu naslova i teksta, definiše razmak između redova, ali i polja, zaobljenost uglova polja, boju pozadine dugmeta, kao i njegovu širinu, visinu, i tako dalje. Praktično sve što vidimo. Ako bismo se na tome zadržali, forma može izgledati potpuno isto kao na slici, ali pošto unesemo komentar i potvrdimo klikom na dugme, ništa se ne bi desilo, jer HTML i CSS ne mogu da obrade unete podatke. Zato je ovde korišćen PHP jezik, koji će te podatke pokupiti od forme, obraditi, uraditi nešto sa njima (poslaće administratoru sajta komentar na

proveru i eventualno postavljanje) i na kraju će prikazati novu stranicu na kojoj će obavestiti posetioca da je komentar sačuvan. Naravno, ta nova stranica je opet HTML i CSS. Dolazimo do zaključka da su HTML i CSS, ali i programski jezici, usko povezani i isprepletani na modernim veb-stranama. Posle ovih uvodnih napomena, kojima sam želeo da steknete pravu opštu sliku pre detalja, verujem da ste spremni da idemo dalje. Na ovom kursu ćemo se baviti HTML i CSS jezicima, dok ćete o veb-dizajnu i programiranju učiti na drugim kursevima. Idemo dalje ka tagovima HTML-a...

STRUKTURA HTML STRANICA Osnovna struktura Struktura svih HTML stranica je striktno definisana. Osnovni gradivni element je HTML tag. Tagovi se nalaze svuda i svaki element se mora sadržati u nekom tagu. Pogledajmo prvo, za primer, jednu kratku stranicu teksta u MS Word alatu.

slika 2.1 - Tekst u MS Word programu

Na slici možemo uočiti jedan pravilno strukturiran dokument. Počinje naslovom kome je dodeljen stil Heading 1. Zatim sledi paragraf teksta, ili, kako se popularno kaže – običan tekst. Zatim sledi naslov nižeg nivoa (Heading 2),

dva paragrafa teksta, opet naslov drugog nivoa (Heading 2) i tako dalje. Naslovima u nivoima strukturiramo dokument i kreiramo smisleni tok. Ovaj isti tekst možemo preneti i na veb-stranicu, koja bi mogla da izgleda kao na slici.

slika 2.2 - Isti tekst iz prethodnog primera na HTML stranici

Primetićemo da tekst izgleda slično. Na početku je Heading 1 naslov i uvodni tekst, kao i Heading 2 naslovi, i tako dalje. Da bismo dobili ovakvu strukturu, morali smo uneti određeni HTML kôd, koji izgleda ovako:

slika 2.3 - HTML stranica (nepotpuna) – prikaz koda

Crvenom bojom je obeležen HTML kôd, dok je tekst koji se vidi na stranici crne boje. Verujem da ste i sami već 1

zaključili da u HTML dokumentima postoje delovi koji su vidljivi korisniku i delovi koji to nisu . Ti delovi koji nisu vidljivi određuju i diferenciraju delove stranice. Pogledajmo prethodni primer malo bliže. Postoji nekoliko elemenata. Svaki ima svoj početni i završni tag.

slika 2.4 - HTML stranica (nepotpuna) – prikaz koda – označeni delovi

Na slici iznad je ista stranica, ali sa jasno označenim delovima. Primećujemo sledeće elemente: … Na početku i kraju stoji html tag, odnosno početni i završni html tag; oni okružuju sve elemente i time ukazuju da sve što je između jeste html kôd; ... Neposredno posle početnog, odnosno pre završnog html taga, stoje početni, odnosno završni body tag; sve što je unutar biće prikazano u prozoru web browsera; ... Početni i završni h1 tag uokviruju naslov prvog nivoa (Heading1); ...

Paragraf teksta se nalazi između p tagova; ... Slično h1 i p tagovima, početni i završni h2 tag uokviruju naslov drugog nivoa (Heading2).

Zamislite tagove kao okvire (kontejnere) koji nam daju neke informacije o sadržaju koji se nalazi između početnog i završnog taga. Detaljno ćemo se upoznati sa tipovima tagova i načinima na koje se oni primenjuju.

Njegovo veličanstvo HTML TAG Pomenuli smo tagove kao osnovnu gradivnu jedinicu HTML dokumenata (stranica) i videli strukturu jednog jednostavnog dokumenta u kome se pojavljuju određeni tagovi. Sada ćemo razjasniti šta je uopšte HTML tag i kako se postavlja. Elementi (tagovi) 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”.

slika 2.5 - Početni i završni HTML tagovi A.

Početni HTML tag

B.

Završni HTML tag

C.

Znak manje i znak veće se koriste da označe početak, odnosno kraj početnog i završnog taga.

D.

Karakter ili karakteri koji označavaju tip taga

E.

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 od kose crte, ponovljenih karaktera koji označavaju tip taga, i znaka veće. Svi, osim nekih izuzetaka, prate ovo pravilo. Sada, ako se vratimo na jedan deo koda iz primera sa početka lekcije i pogledamo:

slika 2.6 - h1 tag

možemo uočiti tačno ove elemente o kojima je bilo reči. Početni HTML tag je gde su između znakova manje i veće upisana dva karaktera h1, što označava nedvosmisleno i definiše naslov (Heading1). Sam sadržaj elementa je konkretan tekst, odnosno u ovom slučaju Lorem ipsum dolor sit amet. Završni HTML tag je , a njega prepoznajemo kao završni zbog dodatka znaka / . Podsećamo, ceo ovaj red je jedan element (ili jedan tag).

Osnovna pravila pisanja HTML jezika Kada pišemo tagove, moramo pratiti dva osnovna pravila. 1. Prvo pravilo Jedan tag (element) može obuhvatiti neograničen broj drugih, ali se svi ti tagovi moraju i završiti u okviru taga u kome su napravljeni. Pogledajmo na primeru. Ovaj primer je dobar:

slika 2.7 - Pravilno postavljeni p i strong elementi

dok ovaj nije:

slika 2.8 - Pogrešno postavljeni p i strong elementi

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 koda i umeju da budu prilično teške za lociranje u većim dokumentima. Najbolja prevencija je pažljiv unos tagova. 2. 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, na primer, 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.

Samozatvarajući tagovi Većina elemenata se piše kako smo pomenuli, ali postoje i takozvani samozatvarajući tagovi. Samozatvarajući tagovi su oni koji počinju i završavaju se istovremeno. Na primer, oznaka za prelom reda unutar paragrafa je . Kod tog taga nema sadržaja i ako bi važila pravila od malopre, trebalo bi da pišemo . Pošto je ovo nepotrebno (i pri tom nepravilno), takve tagove pišemo samo kao ili . U HTML varijanti se samozatvarajući tagovi pišu u obliku (potpuno isto kao početni tagovi, bez završnih), dok se u xHTML varijanti mora pisati (što je kombinacija početnog i završnog taga) uz obavezan razmak između slova i kose crte. Imajući ovo u vidu, pogledajmo primer za tzv. normalne i samozatvarajuće tagove:

slika 2.9 - Pravilno napisan p element – otvoren i zatvoren, kao i samozatvarajući br tag

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 vezan za ova dva pravila, tj. na nepravilan kôd, on pokušava da ga ipak prikaže, ali pretpostavljajući neke detalje i ispravljajući kôd koliko može prilikom prikaza. Tada se mogu desiti razne nepredviđene situacije i verovatno različit prikaz u različitim browserima. Pomenuli smo HTML i xHTML i razlike u pisanju. Na primer, ovde kod samozatvarajućih tagova. U principu, kompletna osnova pisanja HTML i xHTML jezika je ista, osim nekih razlika. Tokom kursa, bavićemo se primarno HTML5 varijantom jezika, ali će biti napomena i za starije verzije.

Atributi HTML tagova Na 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:

slika 2.10 - Atribut class nad p elementom

Ime atributa je označeno sa A, dok je vrednost atributa B. Imena atributa nisu proizvoljna i postoje pravila po kojima se određeni atributi koriste na određenim tagovima. Atributi shodno tome mogu biti opcioni ili obavezni, u zavisnosti od taga i atributa. U primeru na slici, paragrafu je dodata klasa tako što smo koristili ime atributa class. Jedan tag može imati jedan atribut ili više njih, ali može i da nema nijedan atribut. HTML5 dozvoljava pisanje imena atributa velikima slovima (uppercase), kao i izostavljanje znaka navoda oko vrednosti atributa, ali to nije preporučljivo, jer može lakše dovesti do grešaka.

KREIRANJE PRVE HTML STRANICE I OSNOVNI TAGOVI Osnovni tagovi HTML stranica HTML stranice se ne pišu proizvoljno, već prate tačno definisanu strukturu i tri taga se u osnovu uvek moraju postaviti: , i . U HTML5 ovi tagovi se čak mogu i izostaviti zbog slobodnije strukture samog jezika, ali to nikada i ni u kom slučaju nije preporučljivo.

slika 3.1 - HTML tag

Ovaj tag smo sreli u prethodnoj lekciji. Početni HTML tag je na samom početku HTML dokumenta, dok je završni HTML tag uvek na samom kraju dokumenta. To praktično znači da je sav sadržaj kompletnog HTML dokumenta unutar ovog taga. Sve što se nalazi unutar njega (između početka i kraja taga) jeste deo HTML stranice. Osim jednog izuzetka, o kome će biti više reči u narednim jedinicama, ništa se ne sme pisati pre njega niti posle. Takođe, ovaj element se pojavljuje samo jednom na stranici.

slika 3.2 - Head tag

Head tag postavljamo odmah po otvaranju prethodno pomenutog taga. U samom head tagu se postavljaju elementi koji nisu direktno vidljivi na stranici. Na primer, u head delu postavljamo metatagove, koji služe pretraživačima kod indeksiranja stranica; takođe, tu postavljamo veze (linkove) ka spoljnim CSS i drugim fajlovima i tako dalje.

slika 3.3 - Body tag

Body tag sledi odmah posle head taga i u njemu se nalazi sve što je direktno vidljivo na stranici. Česta greška početnika je dupliranje ovog taga ili njegovog dela prilikom prepravke stranica ili kopiranja delova strane u stranu. Osnovna struktura svih HTML stranica sadrži ove tagove i kôd može izgledati ovako:

1 2 3 4 5 6



odnosno, html tag okružuje head i body delove:

slika 3.4 - Tri osnovna taga HTML stranica

Zapamtite da se svi drugi elementi, sav dodatni kôd nalazi ili unutar head ili unutar body dela. Nije dozvoljeno postavljati tagove direktno u HTML. Takođe, zapamtite da se html, head i body delovi pojavljuju samo jednom i uvek u redosledu prikazanom iznad.

Naša prva HTML stranica Pošto već imamo određeno znanje koje smo upravo usvojili, hajde da kreiramo i prvu HTML stranicu. CSS ćemo ostaviti za kasnije. Ukoliko koristite Windows, pokrenite Notepad, ili ukoliko koristite Mac, pokrenite TextEdit. Iako su pomenute aplikacije sasvim dovoljne za rad u ovom kursu, preporučujem da instalirate i koristite Notepad++ (Windows)

– http://notepad-plus-plus.org/,

odnosno

TextWrangler

(Mac)

–

http://www.barebones.com/products/textwrangler/. Svakako, možete koristiti i naprednije editore kao što su Dreamweaver ili Eclipse, ali to ne preporučujem u početku. Sve u svemu, HTML kôd se može obrađivati u bilo kom tekst editoru. Ukoliko ste pokrenuli tekst editor, unećete sledeći kôd:

1 2 3 4 5 6 7 8 9

My first HTML page Hello! I am HTML document.

Možete kopirati direktno odavde, a možete i sami otkucati. Ukoliko raščlanimo na elemente, primećujemo html, head i body elemente koje smo pomenuli ranije u lekciji. Dalje, u head elementu nalazi se title element (takođe obavezan) koji će biti vidljiv u tabu browsera. U body delu nalaze se h1 i p elementi, koji predstavljaju naslov i jedan paragraf teksta. Ovim tagovima za tekst i ostalima ćemo se baviti u narednim jedinicama. Snimite stranicu negde na računaru, unesite ime, ali obratite pažnju na to da ne snimite kao txt dokument (što je kod svih tekst editora osnovno, default podešavanje), već kao html fajl. Podsećam, svi html fajlovi imaju ekstenziju .htmlili .htm. Ukoliko pogledate sledeću sliku, videćete save dijalog Notepad++ alata u kome je kao tip fajla izabran html.

slika 3.5 - Snimanje naše stranice - Notepad++ (Windows)

Ukoliko radite na Mac sistemu i u TextWrangleru, dijalog će izgledati ovako:

slika 3.6 – Snimanje naše stranice - TextWrangler (Mac)

Bilo izborom tipa fajla (Notepad++), bilo ručnim ukucavanjem .html ekstenzije na kraju imena (Notepad++ i TextWrangler) snimite fajl kao html. Sada možete locirati fajl na disku i pokrenuti ga. Otvoriće se vaš podrazumevani web browser, koji će prikazati našu stranicu. Dobićete nešto slično ovome:

slika 3.7 – Prikaz naše stranice u Chrome browseru

Možete i iz browsera prikazati kôd stranice. Uradite desni klik mišem nad samom stranicom i iz padajućeg menija izaberite View page source, odnosno View source (razlikuje se od browsera do browsera). Prikazaće vam se isti onaj kôd koji smo uneli malopre u editor. Iz ovog dijaloga browsera on se ne može menjati, ali je korisno kada želite da vidite HTML neke druge stranice koju niste vi kreirali. Pogledajmo za primer popularne sajtove Wikipedije (wikipedia.org) i Amazona (amazon.com). Ukoliko otvorimo source Wikipedije, primetićemo da i u toj stranici postoje osnovni tagovi , i , iako ima veoma mnogo redova drugog koda. Pomenuti osnovni tagovi su označeni crvenom bojom na slikama:

slika 3.8 - Primer koda wikipedia.org sajta

slika 3.9 - Primer koda wikipedia.org sajta

Varijante HTML jezika HTML se razvijao tokom godina i tako danas imamo situaciju da postoji više aktuelnih verzija. Iako se možda ne razlikuju na prvi pogled, razlike svakako postoje i drastično utiču na to kako ćemo pisati kôd, odnosno kreirati naše dokumente, ali i na to kako će ti dokumenti biti prikazani. Svaka nova verzija HTML jezika donosila je poboljšanja i nove elemente, dok su neki raniji elementi i pravila ukidani. Uglavnom je HTML jezik narastao u svakoj novoj verziji i reviziji, što je svakako slučaj i sa aktuelnim HTML5, ali je uporedo sa time, iz pomenute verzije ukinuta praktično sva HTML stilizacija. Danas se možemo ograničiti na tri aktuelne verzije (sa nekim podverzijama): HTML 4 Ova varijanta je objavljena 1997. godine, što je u sferi veb-dizajna veoma dug period. Podržava određenu stilizaciju direktno kroz HTML. U tu svrhu postoje tagovi kao što su , i tako dalje. Ipak, danas je za svaku stilizaciju zadužen CSS. HTML4 se praktično više ne koristi, ali ga možete prepoznati na nekim ranijim sajtovima. Ne kreirajte nove stranice u njemu.

xHTML 1 Objavljen je 2000. godine i predstavlja kombinaciju HTML4 i XML jezika i odatle naziv xHTML. Na osnovu od HTML4 jezika dodata su neka veoma značajna, ali i dosta stroža pravila iz XML-a, među kojima su i sledeća:



svaki element (tag) mora imati početni i zatvarajući tag, osim kod samozatvarajućih elemenata (kao što je );



imena atributa nad tagovima moraju biti ispisana malim slovima;



svi atributi nad tagovima moraju imati vrednosti koje su postavljene pod znacima navoda;



zabranjeni su neki tagovi iz HTML4.

xHTML je omogućio da dokumenti pisani u ovom standardu lako funkcionišu sa alatima predviđenim za XML. Takođe je omogućio implementaciju elemenata u drugim formatima koji se baziraju na XML-u, kao što su SVG, MathML i tako

dalje.

Postoje tri tipa xHTML-a.



Strict XHTML 1.0 – u njemu se novouvedena XML pravila moraju u potpunosti poštovati.



Transitional XHTML 1.0 – U njemu je dozvoljen nešto „labaviji” način pisanja dokumenata. Dozvoljeno je korišćenje napuštenih tagova, kao što su i, na primer. I po samom imenu (transitional – engl. prelazni) možemo zaključiti da je osmišljen kao prelazni, privremeni tip, ali se i dalje koristi zajedno sa strict varijantom.



XHTML1.0 Frameset – Ova varijanta je u potpunosti napuštena i podrazumevala je definisanje regiona, frejmova (frame) na stranici, u kojima bi bile učitane posebne stranice.

xHTML (strict i transitional) je praktično do pre godinu ostao manje-više standard koji se najčešće koristio. Ipak, od pojave prve stabilne verzije, HTML5 je uzimao sve više maha, da bi u oktobru 2014. zvanično bio finalizovan (Recommendation status) i možemo reći da je xHTML otišao u zasluženu penziju. HTML5 HTML5 je, kao što je već pomenuto, trenutno preporučeni standard za kreiranje HTML dokumenata. Sve što budemo kreirali tokom kursa radićemo u toj verziji. Dalji razvoj nije zaustavljen, naprotiv, već je znatno odmakao razvoj verzije 5.1 koja je najavljena za 2016. Vredi pomenuti da je HTML5 već implementiran u sve moderne browsere na računarima (aktuelne verzije), ali i na mobilnim i srodnim uređajima. Na primer, Android, iOS i Windows Phone, najpopularniji operativni sistemi već podržavaju HTML5 u potpunosti. Ipak, moramo voditi računa o tome da naše stranice budu dostupne i vidljive na pravi način i u starijim browserima, čak iako to zahteva dodatne elemente pisane za njih. Može se desiti da neki napredni elementi uopšte ne budu vidljivi u starijim browserima (jer ne podržavaju HTML5), ali ne sme se desiti da se stranica ne prikaže ili da se funkcionalnost naruši. Ovaj problem se uglavnom ispoljava kod računara i upotrebe starijih browsera. Na primer, Microsoft Internet Explorer 8 je objavljen 2009, a Internet Explorer 7, 2006. godine ne podržavaju veći deo HTML5 specifikacije, a još se koriste (ne značajno, ali ipak su prisutni na tržištu).

Videli smo koje varijante jezika postoje, ali koju ćemo koristiti definišemo koristeći Doctype na početku stranice.

Doctype Svaki dokument mora posedovati deklaraciju (u kojoj su podaci o dokumentu i karakteristikama samog jezika) i koreni element, ispod koga se nalazi struktura dokumenta. Kada je reč o HTML-u, deklaracija obično podrazumeva verziju jezika i adresu fajla u kome se nalazi definicija za ovaj jezik. Ova deklaracija naziva se Document Type Declaration i smeštena je na sam početak svake HTML strane pod „tagom” DOCTYPE. Razlog zbog kojeg je reč tag stavljena u navodnike jeste taj što ovo, zapravo, nije pravi HTML tag, već instrukcija upućena browseru (zbog oznake ! nakon otvaranja taga). Instrukcija takođe može biti upućena i web serveru i prepoznaćemo je (kao i instrukciju browseru) tako što, obično, na svom početku sadrži specijalni karakter (npr.