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 značajni 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'.

Da bismo vam u svemu pomogli, 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?

U opštem smislu (i pod uslovom da na raspolaganju već imate računar), izrada web sajtova ne podrazumeva novčane izdatke, ali, iako vas ovaj lep i koristan poduhvat neće koštati novca (bar na početku), * svakako je u pitanju aktivnost koja 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.

Softver za kreiranje web sajtova

Kada je u pitanju "opremanje alatom", za početak je potrebno da na raspolaganju imate 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 ćete lako moći da sagledate strukturu web stranica koje otvarate, kao i mnoge druge 'tehnikalije' (bilo da su u pitanju sajtovi koje kreirate sami, ili drugi sajtovi).

Naravno, među svim alatima, najvažniji su programi preko kojih se aktivno kreira sadržaj web stranica.

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, ** ali, i bilo koji drugi editor, program za obradu slika i ostali softver koji eventualno već koristite, može poslužiti sasvim dobro (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).

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

Postavljanje sajtova na servere

Kao što smo već pomenuli, postavljanje sajtova iz 'domaće radinosti' na javno dostupne servere, predstavlja opciju 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 (eng. host = domaćin), 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 ispratiti sledeći link: 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 koja su dostupna u okviru hosting paketa, relativno su jednostavna, a sam softver preko koga se obavljaju podešavanja, u većini slučajeva je prilično pregledan i sveobuhvatan.

Međutim - posao nije ni iz daleka trivijalan (definitivno nije za početnike), i lako može doći do grešaka usled nepažnje i neiskustva, 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 najviše mogućnosti uz minimum restrikcija), * 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 nezanemarljiva ograničenja (manje prostora koji je korisniku stavljen na raspolaganje, manje opcija za podešavanje u odnosu na plaćeni hosting, reklame, vreme tokom kojeg će sajt biti isključen i sl).

Naravno, osnovno ograničenje je adresa sajta, koja nije jedinstvena i lako prepoznatljiva (sajt neće imati sopstveni domen), već je u pitanju adresa koja je tipično formatirana po sledećem obrascu:

		
www.besplatnihosting.com/vas_sajt
		
	

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
• dinamički sajtovi se mogu pokretati preko lokalnog servera (malo komplikovanije od prve opcije, ali, i dalje prilično jednostavno)

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

Takođe, celokupno iskustvo pokretanja prvih sajtova, u većini slučajeva je vrlo zabavno i inspirativno (i predstavlja podstrek za dalji rad).

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 opšte strukture web stranica *
• CSS (Cascading Style Sheets) je jezik koji služi za stilizaciju sadržaja i definisanje vizuelne strukture web stranica *
• 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).

Šta su tagovi

HTML tag (da dopunimo definiciju iz prethodnog odeljka), predstavlja 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 dr), tagovi preko kojih se definiše opšta struktura stranice (koja, uz upotrebu CSS-a, praktično postaje "prostorna podela" koju vidimo u browseru), a postoje i tagovi koji se ne vide, ali - i te kako su bitni za pravilno funkcionisanje sajtova (više o svemu u narednim odeljcima).

Da bi stranica bila pravilno definisana, potrebno je da različiti tagovi budu pravilno zapisani i pravilno raspoređeni.

U kontekstu korektnog definisanja pojedinačnih tagova, ne može se samo napisati (na primer): (ovde početi sa podebljavanjem)Tekst koji treba podebljati(ovde prestati sa podebljavanjem), jer - bez obzira na to što je naveden tekst koji sam po sebi predstavlja 'razumno uputstvo na prirodnom jeziku' - nije naveden programski kod koji bi mogao biti uspešno protumačen u browseru (i jedino možemo postići 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>
		
	

.... 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, koje se odnosi na to da slova u nastavku treba ispisivati uz upotrebu podebljanog (tj. "boldovanog") 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 HTML strukture.

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 (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/>
		
	

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>

Osnovna struktura web stranice definiše se preko tagova <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 telo funkcije 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), nisu u pitanju HTML elementi koji imaju 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>
		
	

Celokupan dokument je zapisan unutar <html> tagova, <head> tagovi prethode <body> tagovima i - kada se prikazana struktura preda browseru - biće pravilno protumačena.

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

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

Prethodno prikazana HTML struktura, sama po sebi je 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), i stoga je potrebno da strukturu stranice (postepeno) dopunimo.

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

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

Tag <title> (kao što je već pomenuto), definiše naslov stranice koji će biti vidljiv na naslovnoj liniji browsera, ili na jezičcima (tj 'tabovima').

Tag <meta> služi definisanju opštih ('tehničkih') 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, nema efekta na strukturu stranice, i stoga je potrebno upoznati se sa "atributima" koji daju pravi smisao <meta> tagovima, i pogotovo je neophodno upoznati se sa pojmom 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 (tj. svojstva).

Atribut je odrednica koja se zapisuje unutar otvarajućeg taga, u obliku naziv_atributa='vrednost', i služi za preciznije definisanje funkcionalnost taga.

U slučaju taga <meta>, 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 praktično nije moguće pravilno prikazivati latinična slova sa "kvačicama", kao ni azbuku i druga pisma koja koriste znake kojih nema u engleskom alfabetu).

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

Pasusi u tekstu: <p>

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

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

		
<p>
	Dobar dan!
</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>
		
	

.... 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 (tj. 'paragrafa'), pripada grupi tzv. blokovskih elemenata (eng. block element(s)).

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, koji tipično upućuju prema spoljnim stranicama (koje su deo istog sajta, ili (još češće), pripadaju drugim sajtovima).

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

Da bi <a> tagovi pravilno funkcionisali, potrebno je navesti i uskladiti sledeće detalje:

• 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 između otvarajućeg i zatvarajućeg <a> taga 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>
		
	

.... 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 na kome se trenutno nalazite, a usput smo videli i kako postavljanje sličnog linka u paragraf 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').

Ukoliko se (za razliku od prethodnog primera), link 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>
		
	

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

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

Za razliku od naslova koji je definisan preko taga <title> i 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 <h1>, <h2>, <h3>, <h4>, <h5> i <h6>.

Slovo "h" je skraćenica reči "heading" (u prevodu sa engleskog - naslov), a broj upućuje na hijerarhijski smisao naslova: tag <h1> definiše glavni naslov stranice, a ostali "h tagovi" (<h2> - <h6>), označavaju naslove (pod)odeljaka i drugih manjih zaokruženih celina.

Slike: <img>

Tag <img> je 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'/>
		
	

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

U svemu je najvažnije pravilno podesiti vrednost atributa src (source), koji upućuje na adresu datoteke koja sadrži sliku koju je potrebno prikazati (slično kao atribut href u <a> tagovima), a gornji primer poslužiće i kao prilika za upoznavanje sa opštim principima za zadavanje putanja prema datotekama (i sa atributima alt i title).

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 (tj. folderu) u kome se nalazi i datoteka u kojoj je zapisan HTML kod preko koga se poziva slika (u primeru koji razmatramo, kod je zapisan u datoteci index.html, koja se nalazi u korenom direktorijumu servera).

Ukoliko je potrebno navesti putanju prema poddirektorijumu (trenutnog direktorijuma), poddirektorijum se dopisuje posle oznake za trenutni direktorijum: src='./slike/slika_01.png') i browser će ovoga puta sliku tražiti unutar direktorijuma (tj. '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").

Ukoliko se navede putanja prema slici na udaljenom serveru (recimo https://www.nekiserver.com/slike/nekaslika.png), i ukoliko je putanja ispravna, nije (očigledno) potrebno voditi računa o hijerarhiji foldera u odnosu na html datoteku (jer je zadata apsolutna putanja do datoteke na drugom/udeljenom serveru), ali: u pitanju je računar na koji (najverovatnije) nemamo uticaja, lako * se može desiti da linkovana slika bude uklonjena ili premeštena, i (naravno) - u navedenim okolnostima - <img> tag gubi (pravu) funkciju.

Ako se desi "da ostanemo bez slike" (pod prethodno navedenim okolnostima), 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 se kursor zaustavi iznad slike, i nestati čim se kursor ukloni (a slično važi i za druge elemente koji mogu imati definisan atribut title).

"Negde usput" pomenuli smo mogućnost definisanja linkova koji se na stranicama pojavljuju u obliku slika (umesto u obliku teksta), a svakako je uputno da se upoznamo i sa načinom za pisanje komentara u HTML kodovima ....

Linkovi sa slikom

Linkovi koji se prikazuju kao slike (umesto teksta), česta su pojava na web stranicama i (uglavnom) deluju prilično dopadljivo, ali, ugnežđavanje <a> tagova i <img> tagova neretko ume da bude problem na početku (iz nekog razloga :)), i stoga ćemo u nastavku prikazati primer pravilnog ugnežđavanja.

Na svu sreću, pravilna struktura "linka sa slikom" je jednostavna, i podrazumeva da se <img> tag postavlja kao unutrašnji sadržaj <a> taga:

		
<a href="/clanci/osnove_racunarske_grafike">
	<img src="./slike/slika_01.jpg"/>
</a>
		
	

Ukratko: slika je "ono što će se videti", a link se podešava isto kao kada bi umesto slike trebalo da se pojavi tekst.

Rezultat možemo videti ispod. *

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.

Pogledajmo primer:

		
<!-- "Linijski" komentar -->

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

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>
		
	

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

Tag <link>

Tag <link> je jednodelni 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), 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 (tj. definisanje prostorne podele), i sve se podešava na prilično jednostavan način, preko koncizne i vrlo razumljive sintakse. *

U pitanju je svojevrsna kombinacija tipografije i grafičkog dizajna u opštem smislu, a prisutne su i jednostavne animacije, kao i "tehnikalije" opšteg tipa.

Pre nego što počnemo da prikazujemo CSS kodove, zarad "opšte kulture" ćemo pomenuti 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>
		
	

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

Preko sintakse koja je elegantnija i preglednija (od 'navođenja HTML atributa u tagovima') ....

		
body {
	background: purple;
	margin:     0;
}

p {
	font-family: Arial;
	font-size:   1rem;
	line-height: 1.6;
}
		
	

.... CSS omogućava: bojenje elemenata, skupljanje i razvlačenje elemenata, približavanje i udaljavanje elemenata jednih od drugih .... i mnogo šta još.

Pojam selektora (i definisanje atributa)

U jeziku CSS termin "selektor" označava odeljak programskog koda koji sadrži pravila za definisanje stila određenog elementa stranice ili grupe elemenata.

Ukoliko za primer uzmemo da je potrebno definisati zajednička svojstva svih paragrafa na stranici (tag <p>), zadatak se rešava korišćenjem CSS bloka koji sadrži oznaku "p", i (između vitičastih zagrada), proizvoljan broj redova koji su formirani po obrascu atribut: vrednost;.

		
p {
	atribut_1: vrednost_1;
	atribut_2: vrednost_2;
	....
	atribut_n: vrednost_n;
}
		
	

Atributi se navode u skladu sa zahtevima i potrebama, ali, kao što smo ranije nagovestili, atribute i vrednosti atributa ne možemo "izmišljati" i pisati ih "kako nam je volja", već je samo moguće koristiti unapred definisane atribute (sa odgovarajućim vrednostima).

Za sajt koji koristimo kao primer u članku, definisaćemo selektore za sledeće elemente: <p>, <h1>, <h2>, <img> i <a>.

		
/*
	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;
}
		
	

Iako atributi i vrednosti iz gornjeg bloka skoro doslovno 'opisuju sami sebe', svejedno ćemo dodatno pojasniti kod koji smo videli.

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

- Atribut font-weight definiše debljinu slova (tačnije, debljinu linija na slovima), preko poznatih vrednosti "normal" i "bold" (pri čemu 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 je slika označena kao blok element, * a koristili smo i atribut margin-top, preko koga je zadata gornja margina slike, čime se slika pomera nadole u odnosu na link.

- Što se tiče komentara u kodu, možete primetiti da se u CSS-u koriste "C-ovski" blok-komentari, koji počinju sa /* i završavaju se sa */ (moguće je koristiti i linijske komentare, koji počinju sa //, 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), i stoga, za kraj uvodnog članka, osvrnućemo se 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), pristupa se alatima koji omogućavaju (zmeđu ostalog):

• 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

Pogledajmo i nekoliko primera na sledećim slikama (po potrebi, kliknite na sliku za prikaz u punoj rezoluciji):

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

  

• prikaz HTML koda (otvorene stranice)

  

• 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) *

  

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

.... a svakako su prisutne i druge opcije, kojima se nećemo previše baviti za sam početak (pustićemo vas da druge jednostavne 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' (tj. da se pravilno upoznate sa svim osnovnim tagovima i ostalim pojedinostima koje smo naveli), pre nego što nastavimo.

Na sledećoj adresi ....

.... 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).