HTML i CSS

Da li ste se ikada zapitali šta stoji iza svakog sajta na internetu? Iako se svi sajtovi koje posećujete mogu razlikovati po tome kako su nastali, iz čega se sastoje, i na koji način funkcionišu, zajedničko im je nekoliko stvari. Najvažnija je ta da se u osnovi svakog sajta, svake stranice na internetu, nalaze HTML i CSS jezici. Njihova uloga je da saopšte vašem internet pregledaču / browseru (Firefox, Chrome, i slično) na koji način da prikazuje sadržinu sajtova koje posećujete. Da bismo videli kako to rade, krenućemo najpre od HTML.

HTML

HTML saopštava (opisuje) internet pregledaču šta je to što se u njemu nalazi – naslov, pasus, red teksta, tabela, slika, odnosno, saopštava internet pregledaču koji su to elementi koje sadrži. Zbog toga kažemo da HTML predstavlja opisni jezik. Kao i svaki drugi jezik, HTML ima svoju gramatiku i pravopis, odnosno, način i pravila pisanja kôda. Pored toga, za HTML se često vezuju i tri termina: elementi, tagovi, i atributi.

Elementi predstavljaju već pomenute naslove, pasuse, redove teksta, i slično. U HTML jeziku, naziv jednog elementa se smešta između znakova nejednakosti, tako da izgleda ovako:

Element koji smo smestili između znakova nejednakosti se odnosi na glavni naslov teksta na našoj stranici. Dakle, time što smo između znakova nejednakosti stavili h1, internet pregledaču smo rekli da tekst koji sledi posle h1 elementa tretira kao glavni naslov.

Tagovi nastaju upotrebom znakova nejednakosti, odnosno, njihovim obmotavanjem oko naziva nekog elementa. Tagovi se najčešće pišu u paru – prvi tag služi za otvaranje, a drugi tag u paru služi za zatvaranje. Otvarajući tag saopštava browseru da započinje neki element, a zatvarajući tag da je to kraj tog elementa. Sve ono što pišemo između tagova, predstavlja sadržinu. Koristeći primer naslova, pravilno napisan tag bi izgledao ovako:

Atributi se pišu u okviru otvarajućeg taga, odmah posle naziva elementa, i dopunjuju element u kojem se nalaze. Na primer, recimo da želimo da naš naslov bude crvene boje. Jedan od načina na koji to možemo da postignemo je da koristimo style atribut, i to na sledeći način:

Svaki atribut ima ime (u našem primeru, to je style), i vrednost (u našem primeru, color: red).

Ako ovo što smo sada naučili i primenimo na našem primeru, doći ćemo do sledećeg:

Neki od najčešćih HTML elemenata su (pored pomenutog h1):

• h2, h3, h4, h5, h6, za pisanje naslova
• p, za pisanje pasusa, odnosno celina teksta
• br, za prelazak u novi red
• img, za prikazivanje slika
• a href=““, za postavljanje linkova (sâm link se stavlja između znakova navoda)
• ul, ol, li, za pisanje listi

Pored ovih elemenata, postoje i oni koji su prisutni u svakoj HTML strani. To su:

• html, koji označava početak html fajla
• head, koji sadrži dodatne informacije za browser, koje mi, kao posetioci internet strane, ne vidimo. Svrha tih dodatnih informacija je da poboljšaju prikaz sadržaja na jednoj internet strani.
• body, koji sadrži sve što posetioci jedne internet strane vide – tekst, slike, video i zvučne zapise, linkove ka drugim stranama i fajlovima koje možemo da preuzmemo, i slično

CSS

Kao što smo videli, HTML jezik je prvenstveno okrenut sadržaju. Međutim, da bi taj sadržaj bio prikazan na pravi način, potreban nam je CSS. CSS predstavlja još jedan opisni jezik, koji našim browserima saopštava na koji način da prikazuju i raspoređuju tekst, slike i sve ostalo što se može naći na jednoj internet strani. Sva ta uputstva se najčešće nalaze u posebnom fajlu.

Postoji nekoliko razloga zbog kojih se stilizovanje strane (CSS) razdvaja od njene sadržine (HTML). Najvažniji je taj da jednostavnim promenama u css fajlu, menjamo izgled svih stranica koje koriste taj fajl.

U našem primeru sa h1 elementom, koristili smo atribut style, da bismo tekst naslova obojili crvenom bojom. Zamislite da smo na taj način bojili svaki od naslova, na svakoj od strana koje imamo. Zamislite, dalje, da u nekom trenutku poželimo da promenimo boju naslova iz crvene, u plavu. Šta bismo morali da uradimo da promenimo boju? Morali bismo da otvorimo svaki html fajl, da u sâmom kôdu pronađemo gde se sve javlja h1, i da potom umesto red, ukucamo blue.

Međutim, ako nam je izgled i raspored svakog elementa zapisan u posebnom css fajlu, i ako je taj fajl povezan sa svakim html fajlom na našem sajtu, biće dovoljno da ukucamo ovo:

pa da svaki naslov, unutar svakog h1, na svakoj od strana na našem sajtu, bude obojen plavom bojom.

Kao i kod HTML, i kod CSS postoje neki osnovni pojmovi koje bi trebalo da znamo – selektori, osobine (svojstva), i vrednosti. Ako ovo zvuči nerazumljivo i strašno, ne brinite, sledi objašnjenje.

Selektor, kao što možda naslućujete iz prethodne ilustracije, predstavlja ono što stilizujemo, odnosno, čiji izgled menjamo. U našem primeru, pošto želimo da promenimo boju naslova, selektor je h1. Osobina ili svojstvo je ono što želimo da uredimo kod konkretnog elementa. U našem primeru, to je boja. Umesto boje, mogli smo da uređujemo neku drugu osobinu naslova – font, mesto u dokumentu, poravnanje, okvir, ili nešto drugo. Na kraju, vrednost, u našem primeru, predstavlja plavu boju. Da smo se odlučili za promenu fonta, to je mogao da bude font Arial, ili Calibri, ili Comic Sans, ili neki drugi font. Da smo želeli da promenimo veličinu fonta, to je mogla da bude vrednost 30px, ili 20px, ili bilo koja druga.

Da biste zaista videli zašto je CSS značajan, predlažemo vam sledeće. Ako koristite browser Firefox, u njemu otvorite svoj omiljeni sajt. Zatim istovremeno pritisnite tastere Alt i V. Kada se otvori padajući meni, odaberite opciju Page Style, i u okviru nje No Style.

Programi za pisanje HTML i CSS kôda

Verovali ili ne, za pisanje HTML i CSS kôda vam je dovoljan i Notepad. Međutim, da biste lakše i brže pronalazili greške u kôdu, i da biste ga brže menjali i pisali, preporučujemo vam da koristite programe kao što su Notepad++ (besplatan), Sublime Text (donekle besplatan), iliDreamweaver (plaća se). Na internetu možete pronaći mnogo uputstava za izradu stranica korišćenjem ovih programa. Ukoliko se baš i ne snađete, ili vam ta uputstva nisu dovoljno jasna, uvek možete da dođete u Smile školicu, da zajedno naučimo kako da pravimo sajtove uz pomoć nekog od ovih programa.

Za kraj, preporučujemo vam da povremeno koristite opciju koja je prisutna u svakom novijem browseru – Inspect element. Do nje dolazite desnim klikom, bilo gde na stranici. Uz pomoć ove opcije, možete da vidite koji je deo kôda odgovoran za određeni element na strani, kao i to kako je taj element stilizovan. Naravno, uvek možete i da vidite kako bi taj element izgledao, da su neke vrednosti drugačije – dvoklikom na bilo koju od njih, dobijate mogućnost da je menjate onako kako vi želite. Samo napred sa eksperimentima! Ništa ne možete da pokvarite. :)