Kako napraviti web sajt - 1. deo - Početni koraci

Uvod

Već neko vreme razmišljate o tome da kreirate svoj web sajt, imate želju da se tome ozbiljnije posvetite, pitate se šta vam je od sredstava potrebno za taj poduhvat i koliki su izdaci (da li i koliko, sve to košta)?

U sledećim redovima (i narednim člancima koje ćemo posvetiti web dizajnu), pokušaćemo da odgovorimo na ova, kao i mnoga druga pitanja i - što je važnije - naučimo vas kako da kreirate svoje sajtove.

Kako započeti?

Bez prevelikog uvoda, ukratko ćemo Vam opisati šta je to što (iz iskustva) smatramo najboljim početnim koracima u oblasti web dizajna:

Rasporedite slobodno vreme tako da možete efikasno da se posvetite zadatku koji ste postavili pred sebe.
Savladajte osnove jezika HTML, CSS i JavaScript (ovaj poslednji ostavite za kraj, malo je teži od prva dva, ali, samo hrabro)
Izaberite jedan dobar editor teksta, nemojte ga menjati (bar) neko vreme i detaljno se upoznajte sa njegovim mogućnostima

Ne deluje teško i zapravo - nije teško.

Pored navedenog, smatramo da je jako korisno (ali ne baš skroz neophodno za sam početak), da naučite uređivanje tekst bez miša, korišćenjem tastaturnih prečica (izboru editora i efikasnoj upotrebi prečica ćemo, kao što smo već nagovestili, posvetiti zaseban članak), ali, to, za sam početak, može i da pričeka ....

Programi koje ćemo koristiti

Za samu izradu sajtova, od "tehnikalija" nije potrebno mnogo, a dodatih izdataka nema. Treba vam računar (koji najverovatnije već imate), program za unos i uređivanje teksta (u daljem tekstu - editor), a dobro će doći i neki program za "seckanje" sličica. Na internetu je moguće pronaći više dobrih besplatnih editora i programa za osnovnu obradu fotografija, tako da - lako ćete se opremiti.

Mi Vam za početak preporučujemo: Notepad++ - kao program za rad sa tekstom i FastStone Image Viewer - kao program za osnovnu obradu fotografija (o izboru i podešavanju editora, pisaćemo u poslednjem nastavku ovog serijala, ali, nemojte se time opterećivati za početak, pogotovo ako ste već navikli na neke druge programe koji Vas dobro služe).

Stranice koje budemo pravili možete direktno otvarati u vašem omiljenom browser-u: Mozilla Firefox (naš izbor), Google Chrome, Opera, ili nekom drugom i - to je sve od alata.

Postavljanje sajta online

Sa druge strane, postavljanje sajta online, odnosno, zakup domena (internet adrese Vašeg sajta) i hostinga (servera na kome će se nalaziti Vaša prezentacija), podrazumeva izvesne izdatke koji, iako nisu preveliki, nisu ni skroz neznatni.

O postavljanju sajta online pišemo ovde isključivo iz razloga što znamo da većina (pogotovo mlađih) programera ima veliku želju da što pre "okači" neki svoj sajt online, a ne zato što smatramo da je to prvo čime se treba baviti na početku bavljenja web dizajnom.

Možete se dugo baviti izradom sajtova "u lokalu", mnogo toga naučiti (i lepo se zabaviti), a, ako baš zatreba, recimo da postoje sajtovi koji nude (zapravo poprilično dobar i funkcionalan) besplatan hosting.

Temi postavljanja sajtova na servere, podešavanju domena i servera, posvetićemo više prostora u nastavku serijala o web dizajnu, međutim, da bismo uopšte imali šta da postavimo na server, moramo naučiti kako se kreiraju sajtovi ....

HTML, CSS i JavaScript - "Sveto trojstvo" internet jezika

Sada kada znamo šta je potrebno od alata i kako da se organizujemo, potrebno je još "samo" da se (za početak okvirno, a kasnije sve više i više) upoznamo sa tri osnovna internet jezika (ili, kako mnogi danas više vole da kažu - tri internet tehnologije).

U pitanju su jezici HTML (Hypertext Markup Language) - koji služi za definisanje strukture sajta, CSS (Cascading Style Sheets) - koji služi za stilizaciju i JavaScript - čija je namena da omogući interakciju korisnika sa stranicom, odnosno da omogući korisnicima da utiču na sadržaj stranice (nedostatak te mogućnosti je razlog zašto se HTML i CSS tehnički ne mogu svrstati u programske jezike).

Sa učenjem JavaScript-a slobodno malo sačekajte (koju nedelju, možda i koji mesec, dok ne budete spremni), a sa preostala dva navedena jezika upoznaćemo se u ovom članku.

HTML - Struktura stranice

Osnovni jezik koji se koristi u izradi web prezentacija je HTML (Hypertext Markup Language). Njegova svrha je (kao što smo već naveli), da definiše oblik i strukturu stranice, raspored elemenata i njihovu međusobnu povezanost, a osnovna ideja ovog jezika je da se se taj zadatak obavi upotrebom običnog teksta.

Dobro, ne baš skroz običnog teksta već, kako su to tvorci ovog jezika nazvali - "hiperteksta" - teksta u kome neki delovi, iako sami po sebi zapisani običnim znakovima, imaju specijalnu namenu.

Šta su tagovi

Delovi teksta koji koji su zapisani između znakova "<" i ">" i imaju specijalnu namenu u HTML-u, nose naziv tag i svojom pojavom i međusobnom povezanošću, definišu strukturu stranice.

Kako to funkcioniše u praksi?

Ako u HTML-u napišete: "Ovde početi sa podebljavanjem: Tekst koji treba podebljati - Ovde prestati sa podebljavanjem", bojimo se da nećete mnogo postići (osim što će doslovno biti ispisan navedeni tekst).

Međutim, ako zapišemo:

									
<b>Tekst koji treba podebljati</b>

Slika 1. - Tagovi stoje na početku i na kraju dela teksta na koji utiču. Tag (bold), sugeriše browser-u da započne ispis podebljanih slova, dok komplementarni tag sugeriše programu da isključi ispis podebljanih slova.

.... program koji prikazuje internet stranicu (Firefox, Chrome, Opera ....) će ovoga puta znati da, kada u HTML kodu naiđe na odrednicu , ne treba da ispiše tekst "", već da treba da u nastavku ispisuje podebljana ("boldovana") slova - sve dok ne naiđe na odgovarajući, "zatvarajući" tag - .

U primeru smo videli "b" tag, koji služi podebljavanju teksta, a pored njega, postoje i drugi tagovi koji definišu: slike, linkove, tabele, odeljke stranica i mnogo šta još.

Većina tagova se sastoji iz dva dela (drugi, "zatvarajući" deo se, u odnosu na prvi, otvarajući tag, prepoznaje po znaku "/"), mada ima i tagova koji drugi deo uopšte nemaju.

Zašto je to tako?

Neki tagovi određuju gde je početak i gde je kraj, nekog pasusa, nekog većeg dela stranice, nekog oblika formatiranja teksta i slično. Tag  koji ste videli malopre, govori browser-u da je potrebno slova u nastavku ispisivati podebljano, dok odgovarajući "zatvarajući" tag , saopštava programu da, od tog mesta, prestaje ispisivanje podebljanih slova.

Neki drugi tagovi ne određuje "početak i kraj", već samo pojavu određenih elemenata (koji nemaju "početak i kraj"), ili su u pitanju sasvim drugačiji tagovi specijalne namene, koji određuju svojstva same stranice (o "meta" tagu i drugim "nevidljivim" tagovima, govorićemo kasnije ). Tag <img/> (primera radi) definiše pojavu slike na stranici, dok recimo, tag   (break) navodi browser da pređe u novi red pri ispisu teksta.

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

<br/>

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

Sada kada razumemo pojam tagova, red je da se vratimo skroz unazad i krenemo (baš) od početka ....

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

Osnovni tagovi koji "nose" strukturu HTML stranice su: html, head i body. Tag <html> (koji za početnike nije previše zanimljiv, ali, samo zapamtite da ga morate koristiti), sugeriše browser-u da sledi html kod, sve dok ne naiđe na zatvarajući html tag (ne web stranicama možemo koristiti i druge jezike, kao što je recimo PHP, ali, neka i to bude jedna od stvari kojoj, iz vrlo praktičnih razloga, nećete pridavati preveliki značaj, sve dok dobro ne savladate osnove).

Unutar <head> tagova smeštaju se informacije koje su bitne za funkcionisanje stranice, ali se (izuzev naslova) ne vide, dok se celokupan vidlji6. deo stranice smešta unutar <body> tagova.

Za mlađe i manje iskusne čitaoce, navešćemo da je izrazito bitno gde ćemo i kako pisati otvarajuće i zatvarajuće tagove. Ukoliko body tag otvorimo unutar html tagova, moramo ga unutar body tagova i zatvoriti (ili recimo, otvarajući i zatvarajući "title" tagovi, unutar head tagova).

Da se priča ne bi previše odužila, počnimo polako sa izradom. Otvorite datoteku sa nazivom "index.html" u editoru teksta, smestite je u zaseban folder i unesite sledeći kod:

									
<!DOCTYPE html>

<html>
	<head>
	</head>

	<body>
	</body>
</html>

Slika 3. - Najosnovnija struktura (praznog) HTML dokumenta. Mala napomena: ukoliko vaš editor ne boji tekst onako kako vidite na našoj stranici, ili sav tekst prikazuje jednom bojom, ne bojte se, sve je u redu.

Ovakvu strukturu, browser će pravilno protumačiti: celokupan dokument napisan je unutar html tagova,a head tagovi prethode body tagovima (dilema mnogih početnika: "šta ide prvo, head ili body?" - odgovor: isto kao što, posmatrano odozgo nadole, glava anatomski prethodi telu, tako se i head tagovi zapisuju iznad body tagova).

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

Iako gore navedena struktura, sa jedne strane, jeste korektna, sa druge strane, nije ni iz daleka previše zanimljiva, pa ćemo je polako dopunjavati. Za početak, dodaćemo dva nova taga unutar head tagova:

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

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

.... a unutar body tagova, dodaćemo sledeći sadržaj:

									
<p>
	Dobar dan!
</p>

Slika 5. - Pasus je blok element, odvojen od ostatka sadržaja sa gornje i donje strane, definisan upotrebom "p" tagova.

Celokupna stranica u HTML jeziku sada ima sledeći oblik:

									
<!DOCTYPE html>

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

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

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

.... i sada već možemo otvoriti stranicu u browser-u i pogledati kako izgleda.

Da pojasnimo, tag <title> definiše naslov stranice (koji će biti vidljiv na naslvnoj liniji browser-a, ili na jezičcima (tabovima), dok <meta> tag, sa odrednicom (atributom) "charset='UTF-8'" sugeriše programu za pregled stranice da je neophodno da uključi podršku za UNICODE znake (slova sa kvačicama i naravno, znake azbuke).

Pored ovoga, unutar body tagova koristili smo  tagove. Ovi tagovi definišu pasuse (paragrafe), odnosno, odeljke teksta. Paragrafi su u HTML-u takozvani blok elementi, to jest, elementi koji se, za raliku od takozvanih linijskih elemenata (engl. - inline), sa gornje i donje strane automatski odvajaju od okolnog sadržaja (tačno onako kako smo i očekivali od pasusa).

Linkovi ka drugim stranicama - <a> (anchor) i definicija atributa

Sledeće što ćemo dodati našoj (sve lepšoj i boljoj) prvoj stranici je link ka nekoj drugoj stranici. Ispod paragrafa, dodajte sledeći kod:

									
<a href='https://www.codeblog.rs'>Link ka drugoj stranici</a>

Slika 7. - Za linkove ka drugim stranicama koristimo anchor ("a") tagove, čiji je glavni atribu href, adresa na koju link upućuje.

Ovim smo dodali tekstualni link ka sajtu koji trenutno čitate. Vi slobodno linkujte neki drugi sajt, međutim, ono što je bitnije, to je da se osvrnemo na atribute, delove koda koji se nalaze unutar tagova i dodatno ih određuju.

Za primer ćemo uzeti href (hyperlink reference - adresa na koju upućuje naš link), atribut koji se koristi u <a> tagovima. Vrednost (ovog, ali i drugih) atributa navodi se između znakova navoda kojima prethodi znak "=" (umesto znakova navoda, možemo korisiti i parove apostrofa, ali, bitno je da ih ne mešamo).

Tagovi sa kojima ćemo se nadalje upoznavati će, u većini slučajeva, takođe imati atribute.

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

Naslov koji smo definisali upotrebom taga title (unutar head tagova) nije previše uočljiv, pa je za definisanje "vidljivog" naslova (ne kažemo da je prethodno navedeni naslov bukvalno nevidljiv) predviđen tag h1.

Slovo "h" je skraćenica reči "heading" (u prevodu sa engleskog - naslov) dok broj (u slučaju h1 taga, broj 1), upućuje na hijerarhijski smisao naslova koji se nalazi unutar taga.

Tag h1 definiše glavni naslov stranice i po pravilu (koje zaista 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>

Podsetimo se, img je tag koji se sastoji iz jednog dela (nema zatvarajući tag) i zapisuje se na sledeći način:

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

Slika 8. - Slika je definisana upotrebom img taga. Atribut source upućuje browser na lokaciju slike, dok atribut alt definiše tekst koji će biti ispisan ukoliko slika nije pronađen..

Atribut src (source) definiše lokaciju slike koju želimo da prikažemo. Ukoliko navedemo samo naziv slike (bez putanje), browser će sliku tražiti u istom direktorijumu (folderu) u kome se nalazi i dokument u kome se img tag pojavljuje. 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/slike/nekaslika.png") i ukoliko je putanja ispravna, ne moramo voditi računa o folderima (jer smo zadali apsolutnu putanju do datoteke), ali, budući da je u pitanju udaljeni računar koji (najverovatnije) nije pod našim nadzorom, lako se može deseiti da, ukoliko neko datu sliku ukloni ili premesti - ostanemo bez slike.

Šta ako se to desi? Na scenu stupa atribut "alt" (naravno, on neće u potpunosti sanirati situaciju i nadomestit nedostatak slike, ali će makar pružiti neku informaciju). Atribut alt (skraćeno od "alternative") definiše tekst koji će se pojaviti na mestu nedostajuće slike.

Atribut title definiše naslov slike (slike, ali i mnogi drugi HTML elementi, takođe mogu imati naslove). Naravno, ti naslovi se neće videti neposredno, ali, kada zaustavimo kursor iznad slike, ili drugog elementa (koji ima definisan title atribut), pojaviće se (u malom prozorčiću) tekst koji smo naveli.

Da bi naš primer funkcionisao, skinite sa interneta sliku po svom izboru i smestite je pod nazivom "slika_01.png" u isti folder sa html datotekom.

Finalna HTML struktura našeg primera

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

									
<!DOCTYPE html>

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

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

		<h2>Podnaslov 2</h2>

		<p>
			Tekst drugog pasusa.
		</p>

		<p>
			Dobar dan!
		</p>

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

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

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

Slobodno proširite pasuse nekim obimnijim tekstom, a novost je tag "link" preko koga se html datoteka povezuje sa drugim datotekama koje čine strukturu sajta (da, znamo da Vam je malo čudno što tag se tag "link" - koji očigledno postoji - ne koristi za linkove ka spoljnim stranicama, ali .... tako je kako je).

Mi ćemo tag "link" iskoristiti da našu HTML datoteku povežemo sa CSS datotekom koja će nam pomoći da "stilizujemo" dokument.

CSS - Estetika stranice

Jezik CSS je, otkada je ušao u uporebu, umnogome pomogao programerima u poslovima definisanja stila straničnih elemenata.

Iako smo mi taj deo priče "elegantno" preskočili, osećamo obavezu da Vam ipak spomenemo da HTML elementi sadrže atribute preko čijih vrednosti je moguće definisati estetski oblik stranice, ali .... recimo da Vas, u praktičnom smislu, nismo uskratili ni za šta, jer se taj posao mnogo (mnogo!) lakše obavlja upotrebom CSS-a.

CSS (Cascading Style Sheets) je, dakle, jezik preko koga ćemo elemente bojiti, skupljati, razvlačiti, približavati i udaljavati i mnogo šta još.

Kako ćemo to izvesti?

Selektori

Sada kad naša HTML datoteka (budući da smo to opisali preko link taga), "zna" da opis stila određenih elemenata treba da traži u datoteci sa nazivom "stil.css", potrebno je da otvorimo tu novu datoteku i u nju unesemo odgovarajući sadržaj.

Obradovaćemo Vas: CSS je prilično jednostavan jezik (ali, učinite sebi jednu veliku uslugu i nemojte misliti da je banalan). Sve što treba da uradite je da za svaki element (koji želite da stilizujete) navedete oznaku elementa (p, h1, img, a i slično) i da između vitičastih zagrada zadate opis (naravno, ne na proizvoljan način, već preko postojećih atributa sa kojima ćete se polako upoznavati). Ovakav blok (oznaka elementa + opis unutar zagrada), u CSS-u se naziva selektor.

U našem primeru, "gađaćemo" sve elemente:

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

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

p {
	font-size: 13pt;
}

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

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

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

Preko atributa font-family, biramo font i verovatno primećujete da smo naveli dva fonta? Ukoliko prvi navedeni font ne bude pronađen, biće iskorišćen drugi navedeni 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

Zapitaćete se verovatno još i sledeće: šta ako ni taj drugi navedeni font ne bude pronađen? Ne brinite. U našem slučaju navedena je familija (kategorija) fontova, tako da će program za prikaz iskoristiti podrazumevani (default) font iz te kategorije (inače, sans-sefif je kategorija fontova koju odlikuje odsustvo poprečnih crtica na krajevima glavnih linija slova - reč "sans" na francuskom znači "bez").

Atribut font-weight definiše debljinu slova, koja može biti "normal" ili "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 najomiljeniji atribut većine početnika - text-decoration, kada mu se zada vrednost none, uklanja podvučenu crtu sa linkova (autor ovih redova je više desetina puta ugledao izraz čiste sreće na licima polaznika kojima je po prvi put uspelo da skinu "omrženu" donju 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 atribut display (sa vrednošću block), kojim smo sliku označili kao "blok" element (element koji automatski prelazi u novi red) i margin-top, kojim smo slici zadali gornju marginu i time je pomerili na dole u odnosu na link.

Zaključak

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