Uvod
U različitim oblastima industrije, postoje poduhvati koje u delo mogu sprovesti samo velike organizacije koje na raspolaganju imaju timove stručnjaka i znatna materijalna sredstva, 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 vama 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 ovaj lep i koristan poduhvat (bar na početku) neće koštati novca, svakako 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 da se posvetite zadatku koji ste postavili pred sebe)
- dobro savladate osnovne internet jezike: prvo HTML i CSS, a posle nekog vremena i JavaScript (koji je svakako malo teži od prva dva)
- izaberite jedan dobar editor teksta i (polako, kroz praksu) detaljno se upoznate sa opcijama za efikasnu obradu teksta
- uvek budete spremni da učite i vežbate
Ako svemu pristupite na konstruktivan način - zaista nije teško i rezultati neće izostati.
Softver za kreiranje web sajtova
U tehničkom smislu (pored računara sa instaliranim web browserom u kome možete direktno otvarati statičke sajtove koje kreirate), za izradu sajtova biće vam potrebno i nekoliko jednostavnih, besplatnih programa koje lako možete preuzeti i instalirati.
Pre svega mislimo na editor, program za unos i uređivanje teksta (većina zadataka u izradi sajtova svodi se na obradu teksta), a dobro će doći i program za osnovnu obradu fotografija (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 fotografija
.... koje odlikuje optimalan spoj jednostavnog korisničkog interfejsa i dobrih tehničkih mogućnosti.
Postavljanje sajta online
Tematika postavljanja sajtova iz 'domaće radinosti' na javno dostupne servere nije nešto čime se pojedinci zainteresovani za web dizajn moraju baviti na početku, ali, svakako jeste nešto što privači pažnju većine početnika (rekli bismo da je želja mnogih da što pre vide svoj sajt online sasvim prirodna i opravdana).
Stoga ćemo napraviti malu digresiju i posvetiti se ukratko navedenim temama, pre nego što se vratimo na glavnu temu izrade web stranica.
Komercijalna rešenja za objavljivanje sajtova
Da bi drugi korisnici mogli da pristupe sajtu koji smo kreirali, sajt se mora nalaziti na javno dostupnom serveru i takođe, mora biti vezan za javno dostupnu (i jedinstvenu) web adresu.
Pod komercijalnim uslovima (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, a domen je zvaničan naziv za web adresu sajta ("www.sajt.com").
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 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 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), localhost
Pored mogućnosti zakupa domena i hostinga (što objektivno jeste najprivlačnija opcija), 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šavanja, vreme tokom kojeg će sajt biti isključen i sl.
Naravno, osnovno ograničenje je adresa sajta, koja neće biti jedinstvena i prepoznatljiva (sajt neće imati sopstveni domen), već formirana po obrascu nalik na:
www.besplatnihosting.com/vas_sajt
Pored besplatnog hostinga, 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), čime (razume se) nećete postići da sajt bude viđen, ali možete mnogo toga naučiti - i pri tom se lepo zabaviti.
Međutim, da bismo uopšte imali šta da postavimo na server, 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)
- JavaScript je jezik koji omogućava interakciju korisnika sa stranicom
HTML - Hypertext Markup Language (struktura web stranica)
HTML (Hypertext Markup Language) je osnovni jezik koji se koristi u izradi web prezentacija.
Ideja koja stoji iza ovog jezika je da se za definisanje strukture i sadržaja stranica koristi običan tekst, tako da se pri učitavanju stranice, sa servera preuzima izvorni HTML kod i potom interpretira u browseru.
HTML kod je kombinacija običnog teksta i tagova (posebno formatiranih niski sa unapred definisanim značenjem).
Šta su tagovi
HTML tag je (da preciziramo maločas započetu definiciju), deo teksta koji počinje znakom <, završava se znakom > i ima specifičnu namenu u interpretaciji HTML koda.
Da bi stranica bila pravilno definisana, tagovi moraju biti korektno zapisani i pravilno raspoređeni.
Kako to funkcionišu u praksi?
Ako u HTML kodu napišemo: (ovde početi sa podebljavanjem)Tekst koji treba podebljati(ovde prestati sa podebljavanjem) (što je, samo po sebi, razumno uputstvo na prirodnom jeziku) - bojimo se da nećemo mnogo postići (osim što će doslovno biti ispisan navedeni tekst, onako kako smo videli).
Međutim, ako (umesto toga) zapišemo:
<b>Tekst koji treba podebljati</b>
.... browser će ovoga puta znati da pojava odrednice <b> ne znači da treba (doslovno) ispisati tekst "<b>", već da u nastavku treba ispisivati podebljana ("boldovana") slova, sve dok ne naiđe na odgovarajući "zatvarajući" tag - </b> i dobićemo ispis: Tekst koji treba podebljati.
Tag koji smo videli u primeru <b> (preko koga se uključuje podebljavanje teksta), nije proizvoljno izabrana niska znakova, već (kao što i sami pretpostavljate), deo HTML koda sa unapred određenim 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.
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 uvrstitili i "bold" tagove koje smo maločas videli.
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 <meta> tag sa kojim ćemo se sresti 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.
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 tome 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.
Ukoliko želite da samostalno pratite primere, 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, tako da <head> tagovi prethode <body> tagovima, pa će ovakvu strukturu browser pravilno protumačiti.
Međutim (u praktičnom smislu), stranica je (i dalje) prazna.
Tagovi <meta> (dodatne informacije o stranici), <title> (naslov) i <p> (pasus)
Gore navedena struktura (iako je u osnovnom smislu korektna), nije potpuna čak ni u smislu "nevidljive" strukture koja je svojstvena većini dobro dizajniranih sajtova (a pogotovo ne u smislu vidljivog sadržaja), pa ćemo je postepeno dopunjavati.
Za početak, dodaćemo dva nova taga unutar <head> tagova - <meta> i <title>:
<head>
<meta charset='UTF-8'/>
<title>Naša prva stranica</title>
</head>
.... a unutar <body> tagova, dodaćemo sledeći sadržaj:
<p>
Dobar dan!
</p>
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.
(Ono što smo napravili je ekvivalent "hello world" programa u drugim programskim jezicima.)
Tag <title> (kao što smo već pomenuli) definiše naslov stranice koji će biti vidljiv na naslvnoj 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.
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š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).
Osnovna razlika između inline i blok elemenata
Tag <p> koji smo koristili unutar odeljka <body> koristi se za definiciju pasusa (paragrafa), odnosno, izdvojenih odeljaka teksta.
Paragrafi su u HTML-u takozvani blok elementi, to jest, elementi koji se, za razliku od linijskih (engl. - inline) elemenata, sa gornje i donje strane automatski odvajaju od okolnog sadržaja (onako kako očekujemo da pasusi budu prikazani i u literaturi).
Pogledajmo i jedan (verovatno najznačajniji) linijski tag.
Linkovi ka spoljnim stranicama - <a> (anchor)
Ispod paragrafa koji smo definisali u prethodnom koraku, dodaćemo sledeći kod:
<a href='https://www.codeblog.rs'>Link ka drugoj stranici</a>
.... čime smo kreirali tekstualni link ka početnoj stranici sajta codeblog, na kome se trenutno nalazite (slobodno dodajte još koji link).
Kada kažemo da je <a> tag linijski (inline) element, mislimo na to da se spoljni link koji je preko njega definisan pojavljuje u istoj liniji sa okolnim tekstom (baš kao što smo videli u prethodnom pasusu).
Atribut href (hyperlink reference) - predstavlja adresu na koju link upućuje, a preko atributa target kome je pripisana vrednost '_blank' (umesto apostrofa, možmo koristiti i znake navoda, naravno, pod uslovom da ih ne mešamo), moguće je browseru sugerisati da linkovanu stranicu treba otvoriti u zasebnom prozoru.
Naslovi stranica i podnaslovi - <h1>-<h6>
Naslov koji smo definisali upotrebom 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>
Kao što smo već pominjali, <img> je jednodelni tag koji označava pojavu slika (između delova teksta, ili na drugim mestima).
U pitanju je inline tag i tipično se zapisuje uz korišćenje sledećih atributa:
<img src='slika_01.png' alt='Pejzaž 1' title='Pejzaž 1'/>
Atribut src (source) upućuje na adresu datoteke koja sadrži sliku koju želimo da prikažemo.
Apsolutne i relativne putanje
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 "index.html")
Ukoliko navedemo putanju (recimo: "slike/slika_01.png"), program će ovoga puta sliku tražiti unutar foldera "slike" (koji mora biti u istom folderu kao i sam html dokument).
Ukoliko navedemo putanju prema nekoj slici na udaljenom serveru (recimo: "https://www.nekiserver.com/
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 "zašto slike 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).
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 neophodnim za funkcionisanje stranice (kao što su CSS datoteke, ikone i sl).
Mi smo tag <link> 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 (a obradovaćemo vas i reći da je u pitanju prilično jednostavan jezik sa veoma razumljivom sintaksom).
Zarad "opšte kulture", pomenućemo da se podešavanje stila HTML elemenata može obaviti i direktnim zadavanjem vrednosti atributa na samim elementma ....
<body background-color='purple'>
</body>
<p font-family='Arial'>
</p>
.... ali, to je poprilič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 navedene - elemente bojimo, skupljamo i razvlačimo, približavamo ih i udaljavamo jedne od drugih i mnogo šta još.
Selektori
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 atribut: vrednost;.
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 za <h1>, <img> i <a> tagove.
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 su krajnje deskriptivni, ali ćemo svejedno dodatno pojasniti kod koji smo videli.
Preko atributa font-family biramo font, pri čemu smo naveli dve stavke: 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 program (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 ćemo više govoriti u narednim člancima).
Atributi color i font-size definišu boju i veličinu slova, a atribut text-decoration (verovatno najomiljeniji atribut većine početnika) , kada mu se zada vrednost none, uklanja podvučenu crtu sa linkova.
Što se tiče atributa koje smo koristili za img selektor, pored prepoznatljivih atributa width i height (kojima se zadaju širina i visina), koristili smo i atribut display (sa vrednošću block), kojim smo sliku označili kao blok element i margin-top, kojim smo slici zadali gornju marginu i time je pomerili na dole u odnosu na link.
Sledeći koraci ....
Ovaj članak (iako relativno opširan sam po sebi), predstavlja samo mali uvod u HTML i CSS.
Na sledećoj adresi ....
Web dizajn 01 - primer.... možete pogledati gotov primer iz ovog članka, a u sledećem nastavku serijala o web dizajnu (Web dizajn - 2. deo), nastavićemo da se upoznajemo sa osnovama HTML-a i CSS-a, a pažnju ćemo posvetiti klasama, id-ovima, kao i internom i linijskom CSS-u.