Uvod u web dizajn - 1. deo - Početni koraci

Uvod

U različitim oblastima industrije postoje poduhvati koje u delo mogu sprovesti samo velike organizacije sa timovima stručnjaka i znatnim materijalnim sredstvima, međutim, postoje i poduhvati (pogotovo u računarskoj industriji), za koje nije potrebno ništa osim volje, dobre organizacije vremena i želje za učenjem.

Web dizajn (srećom), spada u drugu kategoriju, i stoga - ukoliko želite da započnete bavljenje web dizajnom - možete odmah da se 'bacite na posao', a sa naše strane, potrudićemo se (kroz članak koji je pred nama i kroz nekoliko narednih članaka), da odgovorimo na pitanja o tome koliko izrada sajtova zahteva vremena i truda, šta je potrebno od sredstava, koliki su izdaci (da li i koliko, sve to košta) i naravno - bavićemo se tehnikalijama koje se tiču strukture i dizajna web stranica ....

Kako započeti?

Izrada web sajtova, pod uslovom da na raspolaganju već imate računar, ne podrazumeva novčane izdatke, ali, iako vas takav lep i koristan poduhvat (bar na početku) * neće koštati novca - svakako zahteva vreme i trud (i nije bez izazova).

Da biste se u svemu snašli na najbolji način, preporučujemo sledeće:

odvojite dovoljno slobodnog vremena, tako da možete efikasno (bez žurbe i naprezanja), da se posvetite zadatku koji ste postavili pred sebe
dobro savladajte osnovne internet jezike: prvo HTML i CSS, a posle nekog vremena i JavaScript (koji je svakako nešto teži i komplikovaniji od prva dva)
izaberite jedan dobar editor teksta i (polako, kroz praksu) detaljno se upoznajte sa opcijama za efikasnu obradu teksta
uvek budite spremni da učite i vežbate

Ako svemu pristupite na konstruktivan način - zaista neće biti teško i rezultati neće izostati.

* Da pojasnimo zašto smo napisali "bar na početku"? U osnovnom smislu, budući da se besplatno možete opremiti vrlo kvalitetnim softverskim alatima (što ćemo opisati u nastavku), bavljenje web dizajnom vas neće koštati u finansijskom smislu (a ukoliko 'pronađete sebe' u web dizajnu i potrudite se oko tehničkog umeća, možete čak i početi da zarađujete, kreirajući sajtove za druge, pri čemu će cene hostinga * plaćati vlasnici sajtova).

Međutim, ukoliko budete želeli da postavljate sajtove na javno dostupne servere 'o svom trošku', to najverovatnije neće biti besplatno (doduše, cene su uglavnom prilično umerene, a postoji i mogućnost besplatnog postavljanja sajtova online, naravno, uz određena ograničenja). *

* više o tome šta je 'hosting', kao i o drugim detaljima vezanim za postavljanje sajtova na servere - u nastavku ....

Softver za kreiranje web sajtova

Kad je u pitanju "opremanje alatom", za početak morate na raspolaganju imati računar sa instaliranim web browserom (u kome možete direktno otvarati statičke web stranice koje kreirate).

Izbor browsera svakako prepuštamo vama (daćemo i nekoliko preporuka ispod), * međutim, najbitnije je da se browser 'uposli' na pravi način, preko tzv. web-dev alata, ** preko kojih se lako može sagledati struktura web stranica koje otvaramo, kao i mnoge druge 'tehnikalije' (bilo da su u pitanju sajtovi koje kreiramo sami, ili drugi sajtovi).

Naravno, među svim alatima, najvažniji su programi preko kojih ćemo aktivno kreirati web stranice.

Pre svega mislimo na editor, program za unos i uređivanje teksta, * a dobro će doći i program za osnovnu obradu slika (sečenje, obrtanje, promena rezolucije, osnovne korekcije boja i sl).

Čitaocima za početak preporučujemo sledeća dva alata:

Notepad++ - program za rad sa tekstom
FastStone Image Viewer - program za osnovnu obradu slika

Navedene programe odlikuje optimalan spoj jednostavnog korisničkog interfejsa i dobrih tehničkih mogućnosti (naravno, i bilo koji drugi editor i ostali softver, koji eventualno već koristite, može poslužiti sasvim dobro). **

Pre nego što počnemo da se bavimo HTML-om i CSS-om, osvrnućemo se i na to kako sajtovi koje kreiramo mogu postati dostupni za pregled, bilo da je u pitanju javna dostupnost sajta ili prosta mogućnost pokretanja sajta na lokalnom računaru korisnika. ***

* Većina zadataka u izradi web sajtova (i inače u programiranju), svodi se upravo - na unos i obradu teksta.

** Bitno je da softver nudi bar najosnovnije mogućnosti (što je u današnje vreme gotovo uvek slučaj), i bitno je da ste dobro upoznati sa mogućnostima određenog softvera, to jest, da imate rutinu u korišćenju.

*** Nećemo se previše baviti detaljima, ali (sa jedne strane), uvažićemo činjenicu da su web sajtovi, nalik literarnim delima i sl. - u najvećem broju slučajeva i u idejnom smislu - 'javno dobro' (koje uglavnom 'konzumira' manja ili veća grupa pojedinaca, a ne sam autor), a uvažićemo i to da kod većine polaznika postoji (reklo bi se, sasvim prirodna i razumljiva), radoznalost po pitanju toga "kako sajtovi na kraju završe na serverima", pa ćemo stoga već u sledećem odeljku napraviti osvrt na tematiku postavljanja sajtova na servere (pre nego što počnemo da se bavimo kreiranjem sajtova).

Postavljanje sajtova na servere

Postavljanje sajtova iz 'domaće radinosti' na javno dostupne servere je (kao što smo već pomenuli), opcija koja svakako deluje najzanimljivije, kako početnicima, tako i iskusnijim web developerima, ali, takođe valja pomenuti da takav pristup nije nešto čime se pojedinci zainteresovani za web dizajn "moraju" baviti (pogotovo na početku i pogotovo kada su u pitanju "ne-besplatne" opcije) ....

Međutim, ukoliko smo odlučili da sajt koji kreiramo, učinimo dostupnim korisnicima na udaljenim računarima, datoteke koje čine sadržaj sajta (a u slučaju ozbiljnijih sajtova, takođe i baze podataka i sl), svakako je potrebno postaviti na javno dostupni server, koji mora biti povezan sa javno dostupnom (i jedinstvenom) web adresom.

Komercijalna rešenja za objavljivanje sajtova

Pod komercijalnim uslovima (to jest, uz novčane izdatke), moguće je zakupiti hosting i domen, najčešće na godišnjem nivou.

Pojam hostinga (host = domaćin, u prevodu sa engleskog), podrazumeva iznajmljivanje javno dostupnih web servera, pri čemu se zakupcima na raspolaganje stavlja i softver za administraciju sajtova.

Domen je zvaničan naziv za web adresu sajta ("www.sajt.com"), a ukoliko vas terminologija vezana za internet zanima u većoj meri, možete posetiti sledeću stranicu: Struktura web adresa i pristup internet stranicama.

Postavljanje sajta se svodi na kopiranje datoteka na server (makar kada su u pitanju jednostavniji sajtovi kakve ćemo za početak opisivati), uz prethodno podešavanje domena i hostinga.

Podešavanja dostupna u okviru hosting paketa su relativno jednostavna, a sam softver preko koga se obavljaju podešavanja je (u većini slučajeva), prilično pregledan i sveobuhvatan.

Međutim - posao nije ni iz daleka trivijalan (definitivno nije za početnike) i usled nepažnje i neiskustva, lako može doći do grešaka, pa preporučujemo da se podešavanjem servera (a pogotovo, podešavanjem domena), ne bavite bez (minimum) nekoliko meseci ozbiljnijeg izučavanja web dizajna, uz poveću količinu pročitanog teksta i (više nego poželjno), pomoć i savete iskusnijih kolega.

Nekomercijalna rešenja (besplatan hosting)

Pored mogućnosti zakupa domena i hostinga (što objektivno jeste najprivlačnija opcija, budući da je u pitanju pristup koji nudi: i najviše mogućnosti, i najmanje ograničenja), postoje i sajtovi koji nude besplatan hosting (vrlo često sasvim solidan i prilično funkcionalan), s tim da takav aranžman gotovo uvek podrazumeva i izvesna ograničenja (manje prostora koji je korisniku stavljen na raspolaganje, manje opcija za podešavanje, vreme tokom kojeg će sajt biti isključen i sl).

Naravno, osnovno ograničenje je adresa sajta, koja neće biti jedinstvena i lako prepoznatljiva (sajt neće imati sopstveni domen), već će adresa tipično biti formirana po obrascu nalik na:

		
www.besplatnihosting.com/vas_sajt

Slika 1. - Primer web adrese na (fiktivnom) besplatnom hosting sajtu.

Pokretanje sajtova 'u lokalu' (sa ili bez pokretanja lokalnog servera)

Pored besplatnog hostinga (odnosno, postavljanja sajtova online u opštem smislu), postoji i opcija pokretanja sajtova "u lokalu": jednostavni statički sajtovi mogu se neposredno otvarati u browserima, dok se dinamički sajtovi (prilično) lako mogu pokretati preko lokalnog servera.

Sajtovi pokrenuti na lokalnom računaru neće (razume se), biti dostupni udaljenim korisnicima, ali se svakako možete lepo zabaviti pokretanjem sajtova u lokalu (pogotovo ako pokrenete lokalni server) i - što je mnogo važnije - možete mnogo toga naučiti.

Međutim, da bismo uopšte imali šta da postavljamo na servere, potrebno je prvo naučiti kako se kreiraju sajtovi ....

HTML, CSS i JavaScript - osnovni internet jezici

Kao što smo već nagovestili, sam početak bavljenja izradom sajtova podrazumeva upoznavanje sa tri osnovna internet jezika (ili, da upotrebimo izraz koji je popularniji poslednjih godina - tri internet tehnologije):

HTML (Hypertext Markup Language) je jezik za definisanje strukture web stranica
CSS (Cascading Style Sheets) služi za stilizaciju sadržaja (tipografija/grafički dizajn i jednostavne animacije)
JavaScript je jezik koji (između ostalog), omogućava dinamičko kreiranje HTML elemenata i dodatne oblike interakcije korisnika sa stranicom

HTML - Hypertext Markup Language (struktura web stranica)

HyperText Markup Language (skraćeno - HTML), osnovni je jezik koji se koristi u izradi web stranica.

Iza HTML-a stoji ideja o definisanju strukture web stranica preko teksta, ali - kao što i sami verovatno možete pretpostaviti - nije u pitanju 'skroz običan tekst'.

Da pojasnimo ....

U tehničkom smislu, može se reći da HTML jeste 'običan tekst' (jer - nije u pitanju zatvoreni binarni format), međutim, u praktičnom smislu - HTML kod predstavlja kombinaciju ('zaista') običnog teksta, i tagova - posebno formatiranih niski sa unapred određenim značenjem (preko kojih se definišu različiti elementi koje zapažamo na web stranicama)

Zašto je za definisanje strukture web stranica izabran "običan tekst" (a ne 'nekakav' binarni format)?

Ukoliko imate nešto više iskustva sa programiranjem, verovatno ste upoznati sa time da se programi koji se kompajliraju 'pre upotrebe' (programi napisani u C-u, C++ - u i sličnim jezicima), izvršavaju brže od programa koji su zapisani u jezicima koji se interpretiraju pri pokretanju (kao što je na primer Python).

Međutim, za razliku od tekstualnih formata, binarni formati nisu transparentni, to jest, direktnim otvaranjem izvršne datoteke - ne može se utvrditi čemu program služi - pa stoga binarni formati (uvek) predstavljaju izvestan sigurnosni rizik, a pogotovo bi to bio slučaj u hipotetičkoj situaciji u kojoj bi se sadržaj web sajtova preuzimao u binarnom obliku.

Šta su tagovi

HTML tag je (da dopunimo definiciju iz prethodnog odeljka), deo teksta koji počinje znakom <, završava se znakom > i ima specifičnu namenu u definisanju strukture stranice ili nekog od pojedinačnih elemenata.

Postoje tagovi koji definišu jasno vidljive elemente (slike, pasuse, linkove ka drugim stranicama i sl), tagovi preko kojih se definiše opšta struktura stranice (prostorna podela), a postoje i tagovi koji se ne vide - ali su i te kako bitni za pravilno funkcionisanje sajtova (više o svemu u narednim poglavljima).

Da bi stranica bila pravilno definisana, (različiti) tagovi moraju biti korektno zapisani i pravilno raspoređeni.

U smislu korektnog definisanja pojedinačnih tagova, ne možemo samo napisati (na primer): (ovde početi sa podebljavanjem)Tekst koji treba podebljati(ovde prestati sa podebljavanjem), jer - bez obzira na to što smo naveli tekst koji (sam po sebi), predstavlja razumno uputstvo na prirodnom jeziku - nismo naveli programski kod koji bi mogao biti uspešno protumačen u nekom browseru (jednino što možemo postići, je da navedeni tekst bude ispisan doslovno onako kako smo već videli).

Međutim, ako zapišemo nešto drugačiji "tekst":

		
<b>Tekst koji treba podebljati</b>

Slika 2. - Tagovi stoje na početku i na kraju dela HTML koda na koji utiču: tag <b> (bold) sugeriše browseru da započne ispis podebljanih slova, dok komplementarni tag </b> sugeriše programu da isključi ispis podebljanih slova.

.... browser će ovoga puta 'razumeti' da pojava odrednice <b> ne znači da treba (doslovno) ispisati tekst "<b>", već da niska <b> predstavlja precizno uputstvo browseru, koje se odnosi na to da slova u nastavku treba ispisivati uz upotrebu podebljanog ("boldovanig") fonta, sve dok se ne naiđe na odgovarajući "zatvarajući" tag - </b>.

Rezultat je ispis: Tekst koji treba podebljati.

Tag koji smo videli u primeru (tag <b>, preko koga se uključuje podebljavanje teksta), nije naravno proizvoljno izabrana niska znakova, već deo HTML koda sa unapred definisanim značenjem (jedan od mnogih), pa tako pored "b taga" postoje i tagovi preko kojih se definišu: pasusi, naslovi, slike, linkovi, tabele, odeljci stranica, kao i mnogi drugi elementi stranica.

Jednodelni i dvodelni tagovi

Većina tagova sastoji se iz dva dela: "otvarajućeg" i "zatvarajućeg" (pri čemu se drugi deo, u odnosu na prvi, prepoznaje po znaku "/"), ali, ima i tagova koji nemaju drugi deo, već se pojavljuju samostalno.

Zašto je tako?

Neki tagovi određuju (na primer), gde je početak i gde je kraj pasusa, gde počinje i gde se završava naslov odeljka (posle čega verovatno sledi običan tekst koji počinje u novom redu), a možemo svakako u grupu dvodelnih tagova uvrstili i "bold" tagove koje smo videli u prethodnom odeljku.

Neki drugi tagovi, ne definišu elemente i pojave koje imaju "početak i kraj", već samo navode pojavu određenog elemenata na datoj poziciji u HTML kodu, ili su u pitanju tagovi specijalne namene, koji određuju osnovna svojstva stranice (kao što je na primer tag <meta> sa kojim ćemo se upoznati u nastavku).

Verovatno najpoznatiji "jednodelni" tagovi su: <img/> (skraćeno od image) - tag koji definiše pojavu slike na stranici i tag <br/> (break), koji navodi browser da u ispisu teksta pređe u novi red.

		
<img src='/slike/slika1.png' title='Slika sa izložbe'/>

<br/>

Slika 3. - Da li je potrebno da tagovi za slike (img) i prelazak u novi red (br) imaju zatvarajući tag? Recimo da nije: slika će se jednostavno prikazati, u celosti, tamo gde smo naveli, a prelazak u novi red dešava se takođe tamo gde je navedeno (i "ne traje").

Sada kada razumemo šta su tagovi (kao i to, po čemu se dvodelni tagovi razlikuju od jednodelnih), red je da se vratimo na sam početak ....

Osnovni tagovi: <html>, <head> i <body>

Osnovni tagovi koji definišu strukturu web stranice su: <html>, <head> i <body>.

Tag <html> sugeriše browseru da (u nastavku), sledi HTML kod, sve dok se ne naiđe na zatvarajući </html> tag (u idejnom smislu, sasvim nalik 'vitičastim' zagradama koje uokviruju funkciju main u programskom jeziku C).

Unutar <head> tagova, upisuju se informacije koje su bitne za funkcionisanje stranice u opštem tehničkom smislu, ali (izuzev naslova i ikone koji se vide u naslovnoj liniji browsera), nemaju pojavni oblik (više o tipičnom sadržaju <head> tagova - u nastavku).

Celokupan vidljivi sadržaj stranice, zapisuje se unutar <body> tagova.

Da se uvodna priča ne bi previše 'odužila', počnimo polako sa izradom stranice, pa - ukoliko želite da samostalno isprobavate primere koje ćemo prikazivati (što svakako preporučujemo) - otvorite datoteku sa nazivom index.html u editoru teksta, sačuvajte datoteku u zaseban folder i unesite sledeći kod:

		
<!DOCTYPE html>

<html>
	<head>
	</head>

	<body>

	</body>
</html>

Slika 4. - Najosnovnija struktura HTML dokumenta.

Celokupan dokument napisan je unutar <html> tagova, <head> tagovi prethode <body> tagovima, pa će ovakvu strukturu browser pravilno protumačiti.

Međutim, u praktičnom smislu, stranica koju smo definisali - i dalje je prazna ....

Tagovi <meta> (dodatne informacije o stranici), <title> (naslov)

Prethodno navedena struktura je sama po sebi korektna, ali nije potpuna čak ni u smislu "nevidljive" strukture koja je svojstvena većini dobro dizajniranih sajtova (a pogotovo ne, u smislu vidljivog, dopadljivog sadržaja), pa ćemo strukturu stranice postepeno dopunjavati.

Pre nego što počnemo da dodajemo vidljivi sadržaj, dopunićemo strukturu <head> tagova, time što ćemo dodati tagove <meta> i <title>.

		
<head>
	<meta charset='UTF-8'/>
	<title>Naša prva stranica</title>
</head>

Slika 5. - Dodatni tagovi koji definišu: naslov (title) i upotrebu UNICODE znakova (meta, sa atributom charset).

Tag <title> (kao što smo već pomenuli) definiše naslov stranice koji će biti vidljiv na naslovnoj liniji browser-a, ili na jezičcima (tabovima).

Tag <meta> služi definisanju opštih svojstava stranice, kao što su: izbor standarda za kodiranje znakova (ASCII, UNICODE ili neki drugi), kratak opis stranice (koji se ne vidi na samoj stranici ali se vidi ukoliko se stranica pojavi pri pretrazi na nekom internet pretraživaču), ključne reči, potpis autor i sl.

Međutim, pojava "praznog" <meta> taga ne bi imala efekta na strukturu stranice, pa ćemo se osvrnuti na atribute koji daju pravi smisao <meta> tagovima, kao i na pojam atributa u opštem smislu.

Pojam HTML atributa

Za razliku od (drugih) tagova koji se mogu pisati bez dodatnog koda u otvarajućem tagu, <meta> tag mora sadržati atribute - odrednice koje dopunjuju funkcionalnost taga.

Atribut se zapisuje kao kombinacija naziva (u gornjem primeru charset) i vrednosti koja se navodi između apostrofa ili navodnika ('UTF-8').

Upotrebom atributa charset (kome je pripisana vrednost 'UTF-8'), browseru se sugeriše da je pri pregledu stranice potrebno uključiti podršku za UNICODE znake (bez čega latinična slova sa "kvačicama", kao i azbuka i druga pisma koja ne koriste engleski alfabet, ne mogu biti pravilno prikazana).

Sada je već vreme da počnemo da popunjavamo stranicu sadržajem. :)

Pasusi u tekstu: <p>

U smislu vidljivog sadržaja na HTML stranicama, poseban značaj imaju <p> tagovi (skraćenica od 'paragraph'), preko kojih se tekst (baš kao i inače u literaturi), deli na pasuse.

Za primer, dodaćemo sledeći sadržaj ....

		
<p>
	Dobar dan!
</p>

Slika 6. - Pasus je blokovski element, odvojen od ostatka sadržaja sa gornje i donje strane (a definisan je preko tagova <p>).

.... unutar <body> tagova (koje smo ranije definisali).

Celokupna HTML struktura ima sledeći oblik:

		
<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>Naša prva stranica</title>
	</head>

	<body>
		<p>
			Dobar dan!
		</p>	
	</body>
</html>

Slika 7. - Osnovna HTML struktura (sa jednim dodatim pasusom).

.... i sada možemo otvoriti stranicu u browseru i pogledati kako izgleda.

Razlike između linijskih (inline) i blokovskih elemenata

Tag <p>, koji smo prethodno koristili za definisanje pasusa (paragrafa), pripada grupi tzv. blokovskih elemenata (eng. block element).

Pored blokovskih elemenata, postoje i linijski elementi (eng. inline element(s)), a razlika, između blokovskih elemenata i linijskih elemenata, je sledeća:

blokovski elementi se (u prikazu) odvajaju po visini od okolnog sadržaja
linijski elementi se prikazuju 'u istoj liniji' sa okolnim sadržajem (naravno, pod uslovom da inline tagovi nisu zapisani između dva blok elementa)

Pošto smo se sa blok elementima upoznali na primeru <p> tagova, upoznaćemo se odmah i sa jednim linijskim tagom (verovatno najznačajnijim linijskim tagom i jednim od najvažnijih tagova u opštem smislu).

Linkovi ka spoljnim stranicama: <a> (anchor)

Tag <a> je dvodelni linijski tag preko koga se definišu linkovi, tipično prema spoljnim stranicama (koje su deo istog sajta, ili pripadaju drugim sajtovima).

		
<a href='https://www.sajt.com/stranica.html'>Link ka drugoj stranici</a>

Slika 8. - Za linkove ka drugim stranicama koristi se tag <a> ("anchor"), čiji je glavni atribut href - URL na koji link upućuje.

Atribut href (hyperlink reference), najvažnija je odrednica bilo kog <a> taga i predstavlja web adresu na koju link upućuje.

Između otvarajućeg i zatvarajućeg <a> taga, definiše se tekst * koji će biti direktno ispisan u browseru.

Tekst može biti proizvoljan (odnosno, ne mora odgovarati sadržaju atributa href), ali, svakako je preporučljivo da tekst linka bude formatiran tako da bude jasno na kakav sadržaj link upućuje.

Na primer, sledeći HTML kod ....

		
<a href='https://www.codeblog.rs'>codeblog</a>

Slika 9. - Konkretan primer upotrebe "a" taga (uz korišćenje atributa target).

.... može se ubaciti u paragraf (može se zapisati između <p> tagova), čime se definiše tekstualni link prema početnoj stranici sajta codeBlog, na kome se trenutno nalazite, a usput smo videli kako sve izgleda i funkcioniše u praksi (tekst linka prikazan je u istoj liniji sa okolnim tekstom i formatiran tako da bude jasno da 'ipak nije u pitanju običan tekst').

Preko atributa target kome se pripisuje vrednost '_blank' (umesto apostrofa, mogu se koristiti i znaci navoda, naravno, pod uslovom da ih ne mešamo), browseru se sugeriše da linkovanu stranicu treba otvoriti u zasebnom prozoru (u praktičnom smislu, 'u novom tabu'). **

Ukoliko se link (za razliku od prethodnog primera), definiše između dva pasusa, ili posle pasusa (odnosno, u opštijem smislu, između dva blok elementa, ili posle blok elementa):

		
<p>
	Prvi pasus ....
</p>

<a href='https://www.codeblog.rs'>codeBlog</a>

<p>
	Drugi pasus ....
</p>

Slika 10. - Primer HTML koda sa inline elementom koji je zapisan između dva blokovska elementa.

.... u prikazu će biti odvojen ('po vertikali') od susednih elemenata (a razlog je to što su blok elementi obavezno odvojeni (po vertikali) od okolnog sadržaja):

Prvi pasus ....

codeBlog

Drugi pasus ....

Naslovi stranica i podnaslovi: <h1> - <h6>

Za razliku od naslova koji je definisan preko taga <title> (unutar <head> tagova), koji nije previše uočljiv (niti predstavlja deo tekstualnog sadržaja stranice), za definisanje "vidljivih" naslova koji se pojavljuju na odgovarajućim mestima u samom tekstu, predviđeni su tagovi od <h1> do <h6>.

Tag <h1> definiše glavni naslov stranice i po pravilu (koje ne treba kršiti), * pojavljuje se samo jednom, tipično na vrhu stranice.

Ostali "h tagovi", <h2> - <h6>, označavaju podnaslove (h2) i podnaslove podnaslova (h3-h6).

* Na posredan način, nagovestili smo da je tehnički izvodljivo da se pravilo o postavljanju samo jednog para <h1> tagova prekrši, pa želimo da pojasnimo o čemu se zapravo radi.

Web browseri ne proveravaju da li stranica sadrži samo jedan naslov koji je definisan preko <h1> tagova (ili takvih naslova ima više), i stoga - u osnovnom tehničkom smislu - jeste moguće postaviti dva (ili više) naslova, koji su definisani preko tagova <h1>, međutim (!) ....

definisanje samo jednog glavnog naslova stranice je stvar pravilnog kodiranja i dobrih navika **
internet pretraživači (Google i sl), vode računa o strukturi stranica i dodeljuju niži rang stranicama koje nisu pravilno strukturirane

** U najpraktičnijem smislu: bez obzira na uložen trud, nismo mogli da se setimo kada smo poslednji put naišli na stranicu sa dva ili više h1 naslova. :)

Ukoliko vam je stalo (samo) do estetike, lako možete postići da <h2> naslovi izgledaju isto kao <h1> naslovi, mada - svakako je preporučljivo da ni to ne radite, jer time dovodite u zabunu posetioce sajta koji su (makar podsvesno), naviknuti na to da se naslovi (h1), podnaslovi (h2) i podnaslovi podnaslova (h3-h6) - razlikuju i u vizuelnom smislu.

Slike: <img>

Tag <img> je (kao što smo već pominjali), jednodelni linijski tag koji definiše pojavu slike (između delova teksta, kao deo linka, ili na nekom drugom mestu).

Slike na HTML stranicama se tipično definišu uz korišćenje sledećih atributa:

		
<img src='./slika_01.png' alt='Pejzaž 1' title='Pejzaž 1'/>

Slika 11. - Slike se postavljaju preko tagova <img>: atribut source definiše putanju prema datoteci koja sadrži sliku, dok atribut alt definiše tekst koji će biti ispisan ukoliko slika nije pronađena.

Preko HTML koda iz prethodnog odeljka, definisana je sledeća slika:

Pejzaž — Slika 12. Kada se HTML kod iz prethodnog odeljka interpretira u browseru, dobijamo sliku koju vidimo iznad.

Atribut src (source), upućuje na adresu datoteke koja sadrži sliku koju želimo da prikažemo, pa ćemo iskoristiti priliku da se (usput) upoznamo i sa opštim principima zadavanja putanja prema datotekama/direktorijumima.

Apsolutne i relativne putanje, atributi alt i title

Ukoliko nije navedena celokupna putanja, adresa je relativna i u slučaju <img> taga koji smo prethodno definisali, browser će sliku tražiti u istom direktorijumu (folderu) u kome se nalazi i datoteka u kojoj je zapisan HTML kod preko koga se poziva slika (u našem slučaju, kod je zapisan u datoteci index.html, koja se nalazi u korenom direktorijumu servera).

Ukoliko je potrebno navesti putanju prema poddirektorijumu (trenutnog direktorijuma), možemo to izvesti na sledeći način: src='./slike/slika_01.png') i browser će ovoga puta sliku tražiti unutar direktorijuma (foldera) slike, koji se nalazi na istoj putanji kao i sam HTML dokument (koji se otvara u browseru).

Putanje prema poddirektorijumima koje počinju sa ./ svakako deluju 'lepo i zvanično', ali, često ćete se sretati i sa putanjama koje su navedene bez odrednice ./ na početku (na primer: src='slike/slika_01.png'), što je takođe 'legitiman' način za zadavanje putanja.

Ukoliko je potrebno navesti putanju prema direktorijumu sa prethodnog nivoa hijerarhije, putanja počinje sa dve uzastopne tačke: ../slike/slika_x.png, ali - takva putanja u trenutnom primeru nije od praktičnog značaja - budući da je datoteka index.html (čiji sadržaj definišemo), smeštena u koreni direktorijum servera (pa stoga ne postoji "direktorijum na prethodnom nivou hijerarhije").

.... ali (naravno), da pojasnimo ("za inače") ....

Kao što jedna tačka, u putanjama označava trenutni direktorijum, tako dve uzastopne tačke: .., označavaju 'roditeljski' direktorijum, odnosno, direktorijum u okviru koga se nalazi trenutni direktorijum.

Ako (recimo), na serveru postoji datoteka /index.html (kosa crta na početku je oznaka za koreni direktorijum servera), direktorijum /slike i datoteka /blog/kako_zameniti_filter_za_ulje.html, unutar datoteke /index.html, putanja prema slikama se navodi kao: src='/slike/slika_x.png', dok se unutar datoteke /blog/kako_zameniti_filter_za_ulje.html, putanja prema slikama navodi kao: src='../slike/slika_x.png'.

Praktično (i slikovito), budući da navedena HTML datoteka nije u korenom direktorijumu, prvo je potrebno "vratiti se korak unazad": ../, posle čega se može preći u direktorijum slike).

Ukoliko navedemo putanju prema slici na udaljenom serveru (recimo: https://www.nekiserver.com/slike/nekaslika.png) i ukoliko je putanja ispravna, ne moramo (naravno) voditi računa o hijerarhiji foldera u odnosu na html datoteku (jer smo zadali apsolutnu putanju do datoteke na drugom/udeljenom serveru), ali, budući da je u pitanju udaljeni računar koji (najverovatnije) nije pod našim nadzorom, lako se može desiti da - ukoliko neko ukloni, premesti ili preimenuje navedenu sliku - ostanemo bez slike u prikazu.

Ako se to desi, na scenu stupa atribut alt (skraćeno od "alternative"), preko koga je definisan tekst koji će se pojaviti umesto nedostajuće slike (što naravno neće nadomestiti nedostatak slike, ali, pružiće koliko-toliko adekvatnu informaciju o tome "šta predstavlja slika koje nema").

Atribut title definiše naslov slike, pri čemu (naravno) nije u pitanju naslov koji će se videti neposredno (nalik na naslove koji se definišu preko tagova <h1>-<h6> i <title>), već naslov koji će 'iskočiti' u malom prozorčiću * onda kada zaustavimo kursor iznad slike, i nestati čim se kursor ukloni (a slično važi i za druge elemente koji mogu imati definisan atribut title).

Komentari u kodu

Za pisanje komentara, to jest, delova koda koji se neće videti kao deo sadržaja (i neće uticati na strukturu web stranice), koriste se posebni tagovi ....

<!-- - početak komentara
--> - završetak komentara

.... preko kojih se definišu blok komentari (a ukoliko je potrebno da komentar bude u jednoj liniji, takođe se mora poštovati ista sintaksa).

Pogledajmo primer:

		
<!-- Linijski komentar -->

<!--
	Blok komentari mogu se koristiti za opis
	važnijih delova koda (na isti način kako
	se komentari koriste i u drugim jezicima)
-->

Slika 13. - Primer upotrebe komentara u HTML kodu.

Finalna HTML struktura primera

Pre nego što pređemo na CSS, pogledajmo izmenjenu i dopunjenu HTML strukturu koju ćemo dalje koristiti:

		
<!DOCTYPE html>

<html>
	<head>
		<meta charset='utf-8'/>
		<title>Naša prva stranica</title>
		<link rel='stylesheet' href='./stil.css'/>
	</head>

	<body>
		<h1>Ovo je glavni naslov</h1>
		
		<h2>Podnaslov 1</h2>
		
		<p>
			Tekst prvog pasusa.
		</p>

		<h2>Podnaslov 2</h2>

		<p>
			Tekst drugog pasusa.
		</p>

		<p>
			Dobar dan!
		</p>

		<a href='https://www.codeblog.rs'>Ovo je link</a>

		<img src='./slika_01.png' alt='Slika 1' title='Slika 1'/>
	</body>
</html>

Slika 14. - Dovršen HTML dokument koji ćemo, u sledećem odeljku, stilizovati upotrebom CSS-a.

Slobodno proširite pasuse obimnijim tekstom (po želji), a novost u odnosu na prethodno stanje je tag <link>.

Tag <link>

Tag <link>, je tag preko koga se HTML datoteka povezuje sa drugim datotekama (najčešće na istom serveru), ali, ne u smislu direktnog otvaranja sadržaja takvih datoteka (kao što je slučaj kada se koristi <a> tag, koji smo već razmotrili), već u smislu internog povezivanja osnovne HTML datoteke sa određenim sadržajima koji su neophodni za funkcionisanje stranice (CSS datoteke, ikone i sl).

CSS - Cascading Style Sheets (estetika web stranica)

CSS (Cascading Style Sheets), je jezik preko koga se obavlja stilizacija HTML elemenata i vizuelno strukturiranje stranica (to jest, definisanje prostorne podele), a obradovaćemo vas i reći da se radi o prilično jednostavnom jeziku sa veoma razumljivom sintaksom. *

U pitanju je svojevrsna kombinacija tipografije i grafičkog dizajna u opštem smislu, a u svemu ima i jednostavnih animacija, kao i "tehnikalija" opšteg tipa.

Pre nego što pređemo na CSS, pomenućemo (zarad "opšte kulture"), da se podešavanje stila HTML elemenata može obaviti i direktnim zadavanjem vrednosti atributa (na samim elementima) ....

		
<body background-color='purple'>
	<p font-family='Arial'>
	</p>
</body>

Slika 15. - Definisanje stila HTML elemenata preko atributa

.... ali, u pitanju je prilično zastareo (i ni iz daleka praktičan) način, koji je gotovo u potpunosti istisnut iz upotrebe još pre dvadesetak godina (u vreme kada je CSS masovnije ušao u upotrebu).

CSS omogućava da - preko sintakse koja je elegantnija i preglednija od prethodno navedene ....

		
body {
	background: purple;
}

p {
	font-family: Arial;
}

Slika 16. - Primer CSS koda koji obavlja "isti posao" kao HTML atributi sa prethodne slike.

.... elemente bojimo, skupljamo i razvlačimo, približavamo ih i udaljavamo jedne od drugih, i mnogo šta još.

Pojam selektora (i definisanje atributa)

Ukoliko želimo da definišemo podešavanja koja su vezana za određenu kategoriju tagova (na primer <p>), potrebno je između vitičastih zagrada, kojima prethodi oznaka "p", navesti proizvoljan broj kombinacija koje su formatirane po obrascu atribut: vrednost;.

Kao što smo ranije nagovestili, atribute (i vrednosti atributa), ne možemo "izmišljati" sami i pisati ih "kako nam je volja", već samo možemo koristiti unapred definisane atribute (sa kojima ćemo se postepeno upoznavati).

Blok CSS koda koji je definisan po prethodno navedenim pravilima nosi naziv - selektor.

Za sajt koji koristimo kao primer u članku, definisaćemo selektor za <p> elemente, ali takođe i selektore za <h1>, <img> i <a> tagove.

		
/*
	Primeri različitih CSS selektora:
*/

h1 {
	font-family: Arial, sans-serif;
	font-weight: bold;
	color:       orange;
	font-size:   26pt;
}

h2 {
	font-family: Arial, sans-serif;
	font-weight: normal;
	/* color:       black; */
	font-size:   20pt;	
}

p {
	font-size: 13pt;
}

a {
	font-family:     Arial, sans-serif;
	font-weight:     bold;
	font-size:       14pt;
	color:           purple;
	text-decoration: none;
}

img {
	display:    block;
	width:      400px;
	height:     240px;
	margin-top: 20px;
}

Slika 17. - CSS selektori koji definišu stil HTML elemenata sa kojima su povezani.

Atributi i vrednosti iz gornjeg bloka CSS koda, krajnje su deskriptivni (skoro da doslovno opisuju sami sebe), ali, svejedno ćemo dodatno pojasniti kod koji smo videli.

Preko atributa font-family, bira se font za grupu elemenata na koje utiče selektor, pri čemu smo, u različitim selektorima u gornjim primerima, navodili dve stavke ('za svaki slučaj'): ukoliko prvi navedeni font ne bude pronađen, biće iskorišćen drugi - i tako ćemo postići da (u najgorim slučajevima koji se retko dešavaju i koje uz malo spretnosti lako možemo izbeći), prikazani tekst bude najpribližniji našoj zamisli.

U opštem smislu ('inače'), može se desiti da drugi navedeni font takođe ne bude pronađen, međutim, u prethodnom primeru nije naveden konkretan font, već zapravo familija (kategorija) fontova, i stoga će browser (u najgorem slučaju), za prikaz iskoristiti podrazumevani (default) font iz navedene kategorije.

Atribut font-weight definiše debljinu slova, preko poznatih vrednosti "normal" i "bold" (ali, zapravo ima i drugih opcija, a mogu se koristiti i brojčane vrednosti (o čemu smo pisali u članku o fontovima)).

Atributi color i font-size definišu boju i veličinu slova, a atribut text-decoration, uz zadatu vrednost none, uklanja podvučenu crtu sa linkova (sasvim je moguće da je u pitanju najomiljenija opcija većine polaznika koji se tek upoznaju sa CSS-om). :)

Što se tiče atributa koje smo koristili za img selektor, pored prepoznatljivih atributa width i height (preko kojih se zadaju širina i visina), koristili smo i atribut display (sa vrednošću block), preko koga smo sliku označili kao blok element, * a koristili smo i atribut margin-top, preko koga smo zadali gornju marginu slike, čime smo sliku pomerili nadole u odnosu na link.

Što se tiče komentara u kodu, možete primetiti da CSS koristi "C-ovske" blok-komentare, koji počinju sa /* i završavaju se sa */ (moguće je koristiti i linijske komentare: //, ali, nije preporučljivo).

Smatramo da smo, za sada, izneli dovoljno informacija (koje čitaoci treba da procesiraju na adekvatan način, pre nego što nastavimo da se upoznajemo sa ostalim tehnikama web dizajna), pa ćemo se za kraj uvodnog članka osvrnuti samo još na tzv. web-dev alate koje smo ukratko pomenuli u odeljku o softveru koji se koristi pri kreiranju sajtova.

Web-dev alati koji su dostupni u browserima

Preko prečice F12 (koja važi u velikoj većini browsera), može se pristupiti alatima koji omogućavaju:

sagledavanje HTML strukture stranice
pregled CSS datoteka u izvornom obliku
pregled CSS selektora koji se tiču elementa koji se trenutno posmatra
pregled korišćenih JavaScript datoteka
pristup konzoli preko koje JavaScript ispisuje servisne poruke korisniku

.... a prisutan je i veći broj drugih prozora (koji pružaju korisne informacije).

Pogledajmo i nekoliko primera na sledećim slikama:

opšti prikaz browsera sa otvorenim web-dev alatima:

Slika 18. Web dev alati (koji se tipično pokreću preko prečice F12).
prikaz HTML koda stranice:

Slika 19. Prikaz HTML strukture u browseru.
pregled korišćenih CSS datoteka:

Slika 20. Pregled korišćenih CSS datoteka.
pregled CSS selektora i pregled fonta koji je korišćen za prikaz određenog elementa (kao i pregled drugih tekstualnih parametara) *

Slika 21. Prikaz CSS selektora i tekstualnih parametara vezanih za trenutno izabrani element.

Pored navedenih opcija, lako se može sagledati i kako će stranica izgledati na ekranima mobilnih uređaja (pri čemu sami možemo birati rezoluciju) ....

Web-dev alati - slika 5 — Slika 22. Simulacija prikaza stranice na ekranu mobilnog telefona.

.... a svakako su prisutne i druge opcije, kojima se nećemo previše baviti za sam početak, već ćemo vas pustiti da opcije istražujete sami i sa njima se polako i postepeno upoznajete.

Sledeći koraci ....

Prvi članak (koji ipak predstavlja samo mali uvod u HTML i CSS), relativno je obiman sam po sebi, pa stoga dajte sebi dovoljno vremena da 'pohvatate konce' (da se pravilno upoznate sa svim osnovnim tagovima i ostalim pojedinostima koje smo naveli), pre nego što nastavite.

Na sledećoj adresi ....

Web dizajn 01 - primer

.... možete pogledati gotov primer sajta koji smo postepeno definisali.

U sledećem članku koji je posvećen web dizajnu: Web dizajn - 2. deo, nastavićemo da se upoznajemo sa osnovama HTML-a i CSS-a (a posebnu pažnju ćemo posvetiti klasama, id-ovima, kao i internom i linijskom CSS-u).