. 15 Duboko unutar tela dokumenta | 25VAZNO Element je neophodan kada imamo naslov i podnasloy, ili vise H oznaka zajedno u istom elementu . Ovaj element moze da sadrdi samo H oznake, i zato u ovom primeru metapodatke ostavijamo izvan njega. Ako imate ‘samo oznaku ili samo oznaku s metapodacima, ne morate da grupisete ‘ove elemente. Na primer, u elernentu tela dokumenta, ovaj element nismo koristli jer unutar njega imamo samo jedan H element. Ne zaboravite da je namenjen samo grupisanju H aznaka, Sto i samo ime pokazuje. Citadi veba i programi koji izvrSavaju i prikazuju veb lokacije, otitavaju HTML kéd i prave unutra’nju strukturu kako bi se interpretirao i obradio svaki element. Unutra- Snja struktura se deli u odeljke, nezavisne od podele u dizajnu ili elementu . To su konceptualni odeljci koji se stvaraju tokom interpretacije koda. Element ne pravi sam ove konceptualne odeljke; to zna¢i da elementi unutar eleme- nta predstavljaju razlitite nivoe i da interno mogu da stvore razlitite odelj- ke. Element sludi za grupisanje H oznaka i izbegavanje pogresnih interpre- tacija Gitaéa veba. Podsetite se osnova Metapodaci su skup podataka koji opisuje drugi skup po- dataka i sadrdi informacije o njima. U ovom primeru, metapodatak je datum posta- vijanja lanaka. i Oznaka ima posebnu ulogu u deklarisanju sadréaja dokumenata. Pre nego 3to je ovaj element uveden u upotrebu, nisu se mogli prepoznati sadrZaji koji su pred- stavljali delove informacija, a istovremeno i samostalne celine — na primer, ilustracije, slike, video-zapisi itd. Ovi elementi su Zesto deo vaznih sadrZaja, ali se mogu preme- Stati bez uticaja na tok dokumenta i bez prekidanja tog toka. Kada se predstavija ta- kav tip informacija, mogu se koristiti oznake . Listing 1-20: Upotreba elemenata i. <1DOCTYPE html> neta charset="utf-8"> This is the main title of the website 26 | Poglavije 1 -HTMLS dokumenthomes/1i> <1i>photos1i> videos1i> contact
‘ subtitle of the post One posted 12-10-2012 This is the text of my first post This is the image of the first post
u dokumentu iz listinga 1-20, umetnuli smo datum obja- vijivanja élanka. Za prikaz datuma koristili smo jednostavan element unutar ele- menta u Glanku, ali HTMLS ima i poseban element za ovu namenu. Ele- ment omoguéava predstavijanje datuma i vremena deklarisanjem vremenske coznake, koja je razumljiva raéunarima, i teksta, koji je éitljiv korisnicima. Listing 1-27: Oznaéavanje datuma i vremena pomotu elementa . Title of post Two posted 12-10-2012 This is the text of the article U listingu 1-27, element <> kori8éen u prethodnim primerima zamenjuje se novim elementom , kako bi se prikazao datum objavijivanja Ganka. Atribut dateti- we ima vrednost koja predstavija vremensku oznaku u maginski fitKjivom obliku. For mat ove vremenske oznake obitno sledi neki obrazac, kao u ovom primeru: 2012~ 10-12T12:10:45. Umecemo i auribut pubdate, kako bismo ukazali na to da vrednost atributa datetime predstavlja datum objavljivanja. Za podatke koji se ne odnose na datum i vreme koristimo element . Ovaj ele- ment koristi atribut value da bi predstavio maSinski Gtljivu vrednost. Listing 1-28: Upotreba elementa. Thirty Two 16 Noviistarielementi | 311.7 Novi i stari atributi Uranim danima razvoja veba, namena atributa je bila da obezbede stilove za elemen- te na koje ée se primenjivati. Nakon integrisanja HTML-a, CSS-a i JavaScripta, ta se namena promenila. Sada atributi pre svega deklariSu vrstu sadrZaja i funkcionalno- sti elementa. Da bi se to postiglo, u jeziku HTMLS izmenjene su osobine nekih starih atributa i dodati su novi. Atribut data-* Ukoliko treba da deklariSemo dodame podatke, ne samo za elemente i , nego i za bilo koji HTML element, atribut data-* je pravo reSenje. On omoguéava da se dodame informacije dodele elementu a da se one pritom ne predotavaju korisni- ku. Te informacije koristi veb lokacija, a dostupne su i JavaScript kodu, o €emu éemo govoriti kasnije. Ime atributa se obrazuje od prefiksa data- iza kojeg sledi proizvoljno ime. Listing 1-29: Upotreba atributa data-*. J.D. Gauchat VAZNO Oatributu data-* i svojstvu dataset govoridemo u poglaviju 4. Atribut reversed UHTML dokumentu iz listinga 1-20 koristimo stare elemente i kako bismo dobili listu stavki. U tom primeru redosled stavki nije bio posebno vazan pa je upo- treba clementa bila ispravna, ali kada je redosled vaian, umesto njega treba ko- ristiti clement . Taj clement pravi uredenu, rastuéu listu, koja se podrazumevano oznaéava brojevima. Poboljanje u jeziku HTMLS jeste dodavanje logitkog atributa reversed za pravijenje opadajuée liste stavki. Listing 1-30: Formiranje opadajuce liste. home1i> photos1i> videos contact1i> Stavke se uvek prikazuju po redosledu deklarisanja, ali brojevi koji upuéuju na svaku stavku odrazavaju rastuéi ili opadajuci redosled. 32 | Poglavije 1 - HTMLS dokumentiAtributi ping i download Element je verovatno najvazniji clement HTML-a jer defini8e najvaZniju osobinu, ovog jezika, hipervezu (engl. hyperlink). Ona povezuje jedan dokument s drugim i ko- risnicima omogu¢ava navigaciju i jednostavan pristup informacijama sa veb lokacije. Medutim, osim pristupa dokumentima, potrebna nam je i moguénost njihovog preu- zimanja, a programeri treba da prate naSe aktivnosti. HTMLS sadr2i dva nova atribu- ta koji Zuvaju stare kvalitete ovog clementa i dodaju potrebnu funkcionalnost: ping — Ovaj atribut deklari8e putanje, kako bi URL adrese registrovale kada korisnik pritisne vezu, Vrednost atributa moze biti jedna ili vie URL adresa razdvojenih razmacima. download ~ Logitki atribut koji, kada se koristi, pokazuje da Gitat veba treba da preuzme datoteku, a ne samo da je Cita. + Listing 1-31: Primena atributa ping i download. Click here to Down oad U primeru iz listinga 1-31, URL adresa hiperveze ukazuje na datoteku myfile.pdf. U normalnim uslovima, savremeni Zitat veba bi prikazao sadrZaj datoteke na ekranu, ali u ovom sluéaju, atribut download nalaze éitatu da preuzme datoteku. Upotrebi- li smo i atribut ping, koji ukazuje na datoteku control .php. Kao rezultat, kad god ko- risnik pritisne vezu, PDF datoteka se preuzima a PHP skript izvréava, omoguéavaj &i programeru da prati ovu aktivnost (na primer, korisnikovi podaci se mogu snimiti u bazu podataka). Uradite sami Kopirajte izvorni kéd iz listinga 1-31 u praznu datoteku, snimite je pod odredenim imenom is nastavkom . html, i otvorite je u ditaéu veba. Kada pri- tisnete vezu, trebalo bi da vas Zitat pozove da preuzmete datoteku. Zatim izbacite atribut download kako biste uporedill ponasanje ditaéa u ova dva sluéaja. Atribut translate \Veéina dana’njih itata veba automatski prevodi dokument kada prepozna strani je- zik, ali postoje tekstovi koje u odredenim slutajevima treba ostaviti netaknutima — kao Sto su imena, originalni naslovi itd. Da bi se upravijalo postupkom prevodenja iz HTML-a, dodat je atribut translate. 1.7 Noviistari atributi | 33Listing 1-32: Upotreba atributa translate. Dos Caminos Ovaj atribut mode imati jednu od dve vrednosti: yes ili no. Podrazumevana vrednost je yes, osim kada je roditelski element promenjen u ne. U primeru iz listinga 1-32, naziy filma je obuhvacen oznakama , kako bi se zadalo da taj deo teksta treba ostaviti neizmenjen. Podsetite se osnova Element je opiti element za organizaci vanje. Zbog svojih osobina, éesto se koristi za stilizovanje teksta umesto zastarelog elementa . Element ima slitne osobine kao element , s tom razi- kom ito predstavija element bloka (engl. block element), dok je umet- ‘uti (redni) element (engl. inline element), Sto ga ini pogodnim za primenu stila i organizovanje teksta. Atribut contenteditable ‘Moguénost uredivanja sadréaja veb strane postoji veé godinama, ali nije nikada po- stala zvanitno svojstvo. Nakon Sto je uveden atribut contenteditable, svaki HTML element moZemo pretvoriti u izmenljiv Listing 1-33: Upotreba atributa contented table za uredivanje testa. ly favorite movie is Casablanca Ovaj atribut ima dve moguce vrednosti: true ili false. Nijedan element nije podrazu- mevano izmenljiv. Postavljanje ovog atributa na vrednost true omoguéava korisniku da ureduje sadraj datog elementa. Uradite sami Kopirajte izvomni kéd iz listinga 1-33 u praznu datoteku, snimite je Pod nekim imenom is nastavkom . htal, i otvorite je u citacu veba. Pritisnite misem ime filma da biste ga promenil. Atribut spellcheck Jo8 jedna funkcija koju Gitati veba automatski aktiviraju jeste provera pravopisa. lako je ovo korisna alatka i korisnici oSekuju da im je sve vreme' dostupna, ona u odrede- nim okolnostima mode biti neprikladna. Da biste je aktivirali ili deaktivirali, upotre- bite atribut spell check. Listing 1-34: Deaktiviranje provere pravopisa. My favorite movie is Casablanca 34 | Poglavje 1 - HTML dokumentOvaj atribut, kao i oni pre njega, ima dve moguée vrednosti: true ili false. Svojstvo je uvek aktivirano ako ne deklarisemo vrednost ovog atributa kao false. U primeru iz listinga 1-34, atribut spel1check se primenjuje na isti element koji smo koristili i rani- je. Sada mozete promeniti naziv filma, a da ¢itaé veba ne tra%i pravopisne ili grama- titke greske. 1.7 Noviistariatributi | 35POGLAVLJE 2 Stilizovanje u CSS-u i modeli okvira 2.1 CSSiHTML Nova specifikacija za HTML ne podrazumeva samo oznake i sam jezik HTML. Veb zahteva odgovarajuéi dizajn i funkcionalnost, a ne samo organizaciju strukture i de- finisanje odeljaka. U takvom novom modelu, HTML se integri8e sa CSS-om i Java- Scriptom u jedinstvenu novu tehnologiju. Do sada smo govorili o mogucnostima sva- kog pojedinatnog jezika i uveli nove elemente strukture HTML dokumenta; sada éemo proufavati vaZnost CSS-a u ovom strateSkom savezu, i njegov uticaj na prikazi- vanje HTML dokumenata. Zvanitno, CSS nema nikakve veze s jezikom HTMLS. CSS nije deo specifikacije,niti je to ikada bio: on je dopuna koja treba da prevazide ograniéenja HTML-a i smanji nje- govu slozenost. U poéetku, atributi unutar HTML oznaka definisali su osnovne stilo- ve svih elemenata, ali kako se jezik razvijao, kd je postajao sve komplikovaniji za pi- sanje i odréavanje, pa sam HTML vise nije mogao da zadovolji zahteve veb dizajnera. Zbog toga je usvojen CSS, kao natin razdvajanja strukture od prezentacije. Od tada se CSS razvija uporedo, usmeren pre svega na dizajnere i njihove potrebe, a ne na to da po svaku cenu bude deo razvoja HTML-a. Najnovija verzija CSS-a, CSS3, sledi isti put, ali uz mnogo vige kompromisa. Specifi- kacija 2a HTMLS razvila se tako Sto se implicitno podrazumevalo da je CSS zaduzen za dizajn. Zbog toga je integracija jezika HTML i CSS3 sada kijutna za razvoj veba, pa svako pominjanje jezika HTMLS istovremeno upuéuje i na CSS3, iako su to zva- nino dve nezavisne tehnologije. Moguénosti jezika CSS3, zajedno sa ostatkom specifikacije, danas se implementiraju i ugraduju u Zitate veba kompatibilne sa HTMLS. U ovom poglaviju nauci¢ete osnov- ne koncepte CSS-a i nove metode jezika CSS3 za predstavljanje i strukturiranje. Upo- zna¢ete i nove selektore i pseudoklase pomoéu kojih se HTML elementi lakSe bira- jui identifikuju.VAZNO Sledi kratak uvod u CSS stilove. Pominjemo samo one metode i svojstva koji su neophodni za razumevanje primera u ovoj knjizi. Ako nemate nikakvog isku- stva sa CSS-om, mogu vam pomoéi priruénici na vebu. Na¢i ¢ete ih na naioj veb lo- kaciji ako pratite veze za ovo poglavije. 2.2 Kratak uvod u CSS CSS je jezik koji zajedno sa HTML-om defini8e vizuelne stilove za elemente doku- menta, kao Sto su velitina, boja, pozadine, ivice itd. Iako Zitati veba podrazumevano dodeljuju stilove HTML elementima, ti stilovi ne moraju odgovarati idejama dizajne- ra ili Zeljama korisnika. Dizajneri i programeri Gesto moraju da primenjuju sopstvene stilove kako bi veb lokacija imala odgovarajuéi izgled na ekranu. U ovom delu poglavija, prikazacemo stilizovanje pomoéu CSS-a i objasniti osnovne metode za definisanje strukture dokumenta. VAZNO _ Neki koncepti koji ce biti objainjeni u narednim pasusima treba da uvedu potetnike u CSS i osnove stilizovanja. Ako su vam ove informacije poznate, slobod- no preskotite delove koje ste vee saviadali. Pravila CSS-a CSS definige kako Ge se HTML element prikazivati na ekranu. Za prikazivanje stilo- va u CSS-u koriste se svojstva (engl. properties) i vrednosti (engl. values). Ta sintaksa se zove deklaracija (engl. declaration), a sadrai dvotatku iza imena svojstva, i red za- tvoren tatkom i zarezom. Listing 2-1: Deklarisanje svojstava CSS-a. color: #FFO000; U primeru iz listinga 2-1, svojstvu color dodeljena je vrednost #FF0000. Ako se ovo svojstvo primeni na HTML element, on ¢e se na ekranu prikazati u crvenoj boji. Podsetite se osnova Boje u CSS-u definigu se pomo¢u kombinacije tri osnovne boje: crvene, zelene i plave. Mozemo ih predstaviti pomoéu heksadecimalnih bro- jeva (od 00 do FF) ili decimainih brojeva (od 0 do 255). Ako boju izrazavamo heksa- decimalnim brojem, na potetak stavijamo znak za povisilicu (tarabu), kao u prime- ruiz listinga 2-1. Za decimaine brojeve dostupna je funkcija rgb, a boje se deklarigu pomotu sintakse rgh(255, 0, 0). O funkciji rgb() i sliénim funkcijama govoricemo unastavku knjige. 38 | Poglavije 2 - Stiizovanje u (S5-u i modell okviraSvojstva se mogu grupisati pomoéu vititastih zagrada. Takva grupa od jednog ili vise svojstava naziva se pravilo (engl. rule) i identifikuje se pomoéu imena, tj. selektora (engl. selector), predstavljajuéi element ili grupu elemenata na koje ée pravilo uticati. Broj pravila koje moZemo napisati je neograniéen. Listing 2-2: Deklarisanje pravila CS5-0, pt color: #FFO000; font-size: 24px; } U listingu 2-2 vidite dva svojstva (color i font-size) navedena u zagradama, sa odgo- varajucim vrednostima. Ovo pravilo se identifikuje pomoéu imena p. U ovom sluéa- ju, ime pravila referencira elemente . Ako ga primenimo na na dokument, sadrZaj svakog elementa bice crvene boje i velitine 24 piksela. UCCSS pravilu mozemo deklarisati neograniten broj selektora. Treba samo da navede- mo njihova imena i razdvojimo ih zarezima. Listing 2-3: Deklarisanje pravila CSS-a. p. span ( color: #FF0000; font-size: 24px; ) U primeru iz listinga 2-3, pravilo utite na sve elemente i u dokumentu. ‘Mo¥emo referencirati i samo one elemente koji se nalaze unutar odredenog elemen- ta, nabrajajuéi ih i razdvajajuéi razmacima. Na primer, elementi koji predsta- vijaju decu elementa : Listing 2-4: Deklarisanje pravila CSS-a. P span { color: #FFO000; font-size: 24px; } Postoje razlitite metode za referenciranje HTML elemenata iz CSS-a. Ona koju smo primenili u prethodnom primeru koristi samo ime tipa elementa na koji se pravi- lo primenjuje. To je opita referenca, ali postoje i specifitne reference o kojima éemo uskoro govoriti. 22 Kratak wvod uCss | 39Svojstva Svojstva Gine jezgro CSS-a. Ima ih mnogo, a u svaku verziju jezika dodavana su nova. Neka od njih primeniéemo kroz praktitne primere u nastavku knjige. Sledi spisak najée3¢ih svojstava (ukljutujuéi i ona koja se koriste od prve verzije CSS-a): font — Omoguéava da deklarisemo stilove za tekst, kao Sto su intenzitet, ve- ligina, porodica fontova itd. Vrednosti moraju biti razdvojene razmacima i deklarisane odredenim redosledom (npr. font: bold 24px arial,sans-se- rif), Svaki stil moZemo deklarisati i nezavisno, pomoéu pojedinagnih svojsta- va font-style, font-variant, font-weight, font-size, line-height i font-fami- ly (npr, font-size: 24px). color — DeklariSe boju elementa. Vrednost se mode izraziti heksadecimal- nim brojevima (npr, color: #FF0000;) ili decimalnim brojevima (npr, color: rgb(255, 0, 0);). background — Omogu¢ava da na pozadinu elementa primenimo stilove, kao Sto su boja, slika, ponavijanje itd. Zadate vrednosti se moraju razdvojiti razmacima (npr, background: #0000FF url("bricks.jpg') no-repeat;). Svaki stil se moze deklarisati i nezavisno, pomocu pojedinatnih svojstava. Ova i sva pridruzena svojstva detaljnije emo prouéavati u poglaviju 3. width — Deklarige Sirinu elementa (npr, width: 200px). height — Deklarise visinu elementa (npr, height: 200px). margin — Deklarige spoljnu marginu elementa koja predstavlja prostor oko elementa. Ona moée imati Cetiri vrednosti: gore, desno, dole i levo, koje se na- vode tim redosledom i razdvojene razmacima (npr. margin: 10px 30px 10px 30px;). Medutim, ako se deklari8e samo jedan, dva ili tri parametra, ostalima se dodeljuju iste vrednosti (npr, margin: 10px 30px). I ove vrednosti se mogu deklarisati nezavisno, pomoéu pojedinatnih svojstava margin-top, margin- -right, margin-bottom i margin-left (npr, margin-left: 10px;). padding — DeklariSe unutra’nju marginu elementa, koja predstavlja prostor ‘oko sadr2aja unutar ivica elementa — na primer, prostor izmedu naslova i ivi- ce virtuelnog okvira, formiranog pomocu elementa koji sadrdi taj naslov. ‘Vrednosti se deklariSu na isti natin kao za svojstvo margin. I ove vrednosti se mogu deklarisati nezavisno, upotrebom svojstava padding-top, padding-right, padding-bottom i padding-Jeft (npr, padding-top: 10px;). border — Omoguéava da deklarigemo Sirinu, stil i boju ivice elementa (npr, border: 1px solid #990000;). Moguée vrednosti za stil su none, hidden, dotted, dashed, s01id, double, groove, ridge, inset, outset i inherit. I ovo svojstvo ima pojedinaéna svojstva za svaku stranu elementa: border-top, border-bottom, border-left i border-right. Svakoj strani nezavisno mozemo dodeliti i vred- nosti za Sirinu, stil i boju, pri emu se ime dodaje na kraju svojstva. Ivicu uvek 40 | Poglavije 2. Stitzovanje u CSS-u i model okviramoramo deklarisati pre nego Sto je na bilo koji nagin izmenimo (npr, bor- der-style: solid; border-top-width: 10px;). ‘text-align — Poravnava element unutar njegovog roditelja. Moguée vrednosti su left, right, center, justify i inherit. VAZNO Ovo nisu jedina dostupna svojstva CSS-a. U ovoj knjizi primenigemo samo nekoliko postoje¢in svojstava i proucavati nova koja su ugradena u CSS3. Da biste nauéilivige, posetite nau veb lokaciju | pratite veze za ovo poglavije. Umetnuti stilovi Primena stilova na HTML elemente menja natin njihovog prikazivanja na ckranu. Pomenuli smo da itati veba podrazumevano definiu skup stilova koji, u veini slu- %ajeva, ne zadovoljavaju potrebe dizajnera. Pomoéu razlititih metoda, te stilove mode- mo zanemariti i zameniti sopstvenim stilovima. Jedna od tih metoda dodeljuje stilo- ve unutar clementa u obliku atributa, Listing 2-5 prikazuje jednostavan HTML kéd ukome je na element primenjen atribut style sa dodeljenom vrednoSéu font-si- ze: 20px. Ovo svojstvo redefinige podrazumevanu velitinu teksta unutar elementa tako da je nova veligina 20 piksela. Listing 2-5: CSS stilovi unutar HTML oznaka, This text is the title of the document ‘ Hy text Uradite sami _U praznu tekstualnu datoteku kopirajte HTML kéd i otvorite datote- ku u svom éitatu veba da biste proverili kako radi. ime datoteke mora imati nasta- vak .htal da bi se pravilno otvorila (npr, ayfile. htal), Navedena metoda kori8éenja umetnutih ili rednih stilova (engl. inline styles) dobar je nadin za testiranje stilova i proveru rezultata, ali se ne preporuéuje u vecim projekti- ma. Razlog je jednostavan: ona zahteva da se svaki stil upisuje i ponavija za svaki ele- ment, Sto znatno povecava dokument i moze onemoguéiti njegavo azuriranje i odria- vanje. Na primer, ako biste odluéili da velitina teksta u svakom elementu umesto 20 piksela bude 24 piksela, morao bi da se promeni svaki stil u svakoj oznaci u ce- Jom dokumentu, kao i u svakom dokumentu vase veb lokacije, 22 Kratakuvod (SS | 41Ugradeni stilovi Bolje reenje od prethodnog jeste umetanje stilova u glavu dokumenta, nakon éega se na odgovarajuce HTML elemente moze uticati pomoéu referenci, Listing 2-6: Stilovi u glavi dokumenta. This text is the title of the document Element