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, pa ćemo, u članku koji je pred nama i kroz nekoliko narednih članaka, pokušati 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.

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 stranice koje kreirate).

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

Naravno, 'glavna stvar' 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. ***

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 se moraju nalaziti na javno dostupnom serveru, 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ć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 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 izvesna ograničenja: bilo da je u pitanju 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
		
	

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 se mogu neposredno otvarati u browserima, a za dinamičke sajtove prilično lako možete pokrenuti lokalni server.

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, moramo naučiti kako se kreiraju sajtovi ....

HTML, CSS i JavaScript - osnovni internet jezici

Sam početak bavljenja izradom sajtova (kao što smo nagovestili), 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 omogućava interakciju 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 običnog 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 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.

Na primer, ne možemo samo napisati: (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 da bude 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>
		
	

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

Kao rezultat, dobićemo ispis: Tekst koji treba podebljati.

Tag koji smo videli u primeru - <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 se sastoji iz dva dela: "otvarajućeg" i "zatvarajućeg" (gde 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 u ispisu teksta navodi browser da 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>

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 je u zaseban folder i unesite sledeći kod:

		
<!DOCTYPE html>

<html>
	<head>
	</head>

	<body>

	</body>
</html>
		
	

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 je i dalje 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>
		
	

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

Međutim, napomenimo da nije u pitanju naslov koji će se videti u telu stranice (tome služe tagovi <h1>-<h6>, o kojima ćemo pisati u nastavku).

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.

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

Upotrebom atributa charset (kome smo pripisali vrednost 'UTF-8'), browseru smo sugerisali da je, pri pregledu stranice, potrebno da bude uključena podrška 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>
		
	

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

Razlika 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), 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>
		
	

Atribut href (hyperlink reference) je najvažnija odrednica bilo kog <a> taga i predstavlja 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 je svakako 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 codeblog, na kome se trenutno nalazite, a usput smo videli kako sve izgleda i funkcioniše u praksi (tekst linka je prikazan u istoj liniji sa okolnim tekstom i formatiran tako da bude jasno da 'ipak nije u pitanju običan tekst').

Preko atributa target kome je pripisana vrednost '_blank' (umesto apostrofa, mogu se koristiti i znaci navoda, naravno, pod uslovom da ih ne mešamo), sugerisali smo browseru 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>
		
	

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

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

Naslov koji smo definisali preko taga <title> (unutar <head> tagova), nije previše uočljiv (niti je, kao što smo već naveli, deo tekstualnog sadržaja stranice), pa su za definisanje "vidljivih" naslova koji se pojavljuju na odgovarajućim mestima u samom tekstu, predviđeni 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).

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

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

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 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 želimo da navedemo 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 navedene odrednice (na primer: src='slike/slika_01.png'), što je takođe 'legitiman' način za zadavanje putanja.

Ukoliko želimo da navedemo 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 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 će pružiti 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 se, onda kada zaustavimo kursor iznad slike (a slično važi i za druge elemente koji mogu imati definisan atribut title), pojaviti u malom prozorčiću * (i nestati čim uklonimo kursor).

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 HTML dokumenta), 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 moramo poštovati istu sintaksu).

Pogledajmo primer:

		
<!-- Linijski komentar -->

<!--
	Blok komentare možemo koristiti za opis
	važnijih delova koda (na isti način kako
	komentare koristimo 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 tag preko koga se HTML datoteka povezuje sa drugim datotekama (na istom serveru), ali ne u smislu direktnog otvaranja sadržaja takvih datoteka (kao što je slučaj kada koristimo <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).

Ovoga puta, tag <link> smo iskoristili da HTML datoteku povežemo sa datotekom stil.css, u koju ćemo upisivati CSS kod koji ćemo prikazati u nastavku.

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 (podešavanje oblika i osobina slova), 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>
		
	

.... 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;
}
		
	

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

Ukoliko su vrednosti niske znakova, pišu se unutar apostrofa ili navodnika, a ukoliko nisu, pišu se bez navodnika i naravno - atribute ne možemo (kao što smo ranije nagovestili), "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;
}
		
	

Atributi i vrednosti, iz gornjeg bloka CSS koda, krajnje su deskriptivni (skoro da doslovno opisuju sami sebe), ali ćemo svejedno 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 ni drugi navedeni font ne bude pronađen, ali, u prethodnom primeru nije naveden konkretan font, već zapravo familija (kategorija) fontova, tako da ć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" (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), kojim smo sliku označili kao blok element * 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 (u velikoj većini browsera), možemo pristupiti alatima koji omogućavaju:

• sagledavanje HTML strukture stranice
• pregled CSS selektora koji se tiču elementa koji trenutno posmatramo (ili CSS datoteka u izvornom obliku)
• 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:

  

• prikaz HTML koda 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, možemo lako sagledati i kako će stranica izgledati na ekranima mobilnih uređaja (pri čemu sami biramo rezoluciju) ....

.... 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 opširan 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 ....

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