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.
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. ***
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
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)
Š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>
.... 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/>
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>
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>
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>
.... 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 (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>
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>
.... 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>
.... 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):
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).
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 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").
Ukoliko navedemo putanju prema slici na udaljenom serveru (recimo: https://www.nekiserver.com/
) 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)
-->
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 (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>
.... 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;
.
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;
}
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) ....

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