CSS (skraćenica od Cascading Style Sheets) je stilski jezik u kojim se određuje izgled i predstava nekog elementa, a time i cjelokupne web stranice napisane u opisnom jeziku HTML.

Ovim jezikom možemo lakše oblikovati, pozicionirati (postaviti) i urediti veću količinu sadržaja po želji, vršiti formatiranje pojedinih dijelova teksta ili nekih određenih elemenata (npr. navigaijska traka).

Upotrebom CSS-a moguće je:

• uštediti na vremenu tokom izrade stranice grupisanjem stilskih osobina pod jedno ime
• isti kod ne pišemo dva puta, a to znači lakše održavanje stranice
• prikaz istog sadržaja, ali u različitim stilovima (dizajnima)

Dakle, zajedničke osobine elemenata se grupišu pod imenom (najčešće neka klasa ili id), a zatim se koriste pod tim imenom tamo gdje su potrebne.

CSS možemo dodati u HTML dokument na jedan od sljedeća 3 načina:

1 - inline

<div style="color: red; background-color: lime">
	Tekst u elementu div
</div>
		

2 - style tag
Ovaj tag se najčešće stavlja unutar head dijela dokumenta.

<style type="text/css">
.imeklase {
	color: red;
	background-color: lime
}
</style>

<div class="imeklase">
	Tekst u elementu div
</div>
		

3 - vanjski fajl i link tag
Link tag se također koristi u head-u dokumenta.

<link rel="stylesheet" href="style.css" />

<div class="imeklase">
	Tekst u elementu div
</div>
		

Pri korištenju bilo koja od 3 načina, element izgleda isto:

Selektore koristimo da odredimo na koje dijelove stranice se stil primjenjuje.

CSS pravila se mogu primjenjivati na osnovu sljedećih kriterija:

• Po nazivu HTML elementa (taga), npr: body, p, h1, td
• Po vrijednosti HTML atributa, najčeše su to id (za jedinstvene elemente unutar stranice) i class
• Po položaju elementa u odnosu na druge susjedne elemente (npr. link unutar naslova)

Primjeri upotrebe selektora:
1 - selektor za elemente p (paragraf)

p {
	background-color: yellow
}
		

2 - selektor za element koji je označen sa atributom id a vrijednosti "crveni"

#crveni {
	background-color: red
}
		

Znak koji se koristi za selektovanje po vrijednosti po id atributa je # (rešetka).

3 - selektor za sve elemente sa atributom class, vrijednosti "selektiran"

.selektiran {
	background-color: limegreen;
	color: black
}
		

Znak za označavanje klase u CSS-u je . (tačka).

#3 - Pozicioniranje

Pozicioniranje je postupak postavljanja HTML elementa u odnosu na neki drugi element, ili u odnosu na nulu. Nula je najčešće gornji lijevi ugao stranice, ili nadređenog element u kojem se naš element nalazi.

Vršimo ga pomoću CSS svojstva position.

Razlikujemo sljedeće vrste pozicioniranja:

• apsolutno (absolute)
• relativno (relative)
• fiksno (fixed)

1. Apsolutno:
Element se pozicioniše van normalnog toka stranice, ovo nam dozvoljava fino podešavanje položaja elementa u odnosu na nadređeni element. Ovom vrstom pozicioniranja se također postiže preklapanje elemnata (npr. tekst ili dugme preko slike)

#topleft {
	top: 0;
	left: 0
}
#topright {
	top: 0;
	right: 0
}
#bottomleft {
	bottom: 0;
	left: 0
}
#bottomright {
	bottom: 0;
	right: 0
}
#dodatni {
	position: absolute;
	top: 50px;
	left: 150px;
	background-color: red;
	color: white;
	width: 75px;
	height: 60px;
}
#topleft, #topright, #bottomleft, #bottomright {
	position: absolute;
	background-color: yellow;
	color: black;
	width: 75px;
	height: 60px;
}
		

2. Relativno: Imamo 4 relativno postavljena div elementa, što znači da prate tok stranice kad je u pitanju njihova pozicija. Elemente je moguće udaljiti od ivica elementa u kojem se nalaze, te u odnosu na obližnje elemente koristeći svojstvo margin.
Drugi kvadrat je pomaknut 20px u odnosu na gornju ivicu, a četvrti pomjeren 50px sa lijeve strane u odnosu na prethodni element.

.rel {
	position: relative
}
#drugi {
	margin-top: 20px
}
#cetvrti {
	margin-left: 50px
}
		

3. Fiksno:
Fiksno pozicioniranje znači da će se element uvijek nalaziti u istom dijelu stranice.

JavaScript je skriptni jezik koji dozvoljava kreiranje i promjenu ponašanja Web stranice. To je client-sided jezik što znači da se sav kod izvršava na strani korisnika.

Najčešće se često koristi kada želimo korisniku olakšati neki posao, dodati padajući meni ili prikazati animaciju i slično kada korisnik klikne na dugme ili link.
Poput CSS-a, u HTML dokumentu može se definisati na više načina:

1 - inline

<button onclick="alert('Zdravo svijete!');">
Klikni ovdje
</button>

2 - funkcija u script tagu

<button id="dugme">Klikni ovdje</button>

<script type="text/javascript">
function poruka() {
	alert('Zdravo svijete!');
}
document.getElementById('dugme').onclick = poruka;
</script>

3 - skripta u eksternom fajlu

<script type="text/javascript" src="script.js"></script>

<button onclick="poruka();">Klikni ovdje</button>

Klikni ovdje

Osim funkcije alert iz prošlog primjera, također imamo i funkciju confirm koja traži potvrdu od korisnika.

function potvrda(msg) {
	if(confirm("Jeste li sigurni?") == true)
		alert('Uprli ste OK!');
	else
		alert('Uprli ste Cancel!');
}

Potvrda

Pomoću JavaScript-a možemo upravljati strukturom HTML dokumenta, tj. dodavati ili brisati elemente i njihov sadržaj u postojećem prikazu web stranice, ili mijenjati izgled elementa.

function promjena1(dugme, element_id) {
	document.getElementById(element_id).innerHTML =
	'Uspješno si promjenio poruku!';
	dugme.parentElement.removeChild(dugme);
}

Također se može mijenjati i CSS stil unutar tog elementa.

function promjena2(element_id) {
	var e = document.getElementById(element_id);
	e.style.fontWeight = 'bold';
	e.style.color = 'blue';
}

Mouseover event koristimo kada želimo da pomjeranje kursora iznad nekog elementa izazove promjenu.

function prikazi(el) {
	document.getElementById(el).style.display = 'block';
}

Pomjeri kursor ovdje! Sakrivena poruka: 42

Vrlo lako se može vršiti i manipulacija velicine slika. Ovdje koristimo mouseover i mouseout event da bi vratili staru velicinu.

function povecaj(el) {
	el.style.width = '200px';
}

function smanji(el) {
	el.style.width = '100px';
}

HTML

HTML (Hypertext Markup Language) je opisni jezik koji služi za izradu Web stranica.

Elementi stranice se označavaju tagovima (oznakama), koji su najčešće skraćenice punog naziva (engl.) za pojedinu oznaku.
Tag daje naredbu pregledniku da kreira određeni element.

Tagovi u HTML-u nisu case-sensitive, što znači da se mogu pisati velikim i malim slovima.

Struktura HTML dokumenta

Svaki HTML dokument počinje sa tagom <html>, a završava sa zatvaranjem taga preko naredbe </html>

Osnovni HTML dokument se sastoji od zaglavlja (<head>) i tijela (<body>).

Primjer koda:

<html>

<head>
<title>Naslov dokumenta</title>
</head>

<body>
Tijelo (sadržaj) dokumenta
</body>

</html>

Zaglavlje (head) najčešće sadrži naslov (tag title), te naredbe koje učitavaju CSS stilove i JavaScript kod.
Više o CSS-u i JS-u možete pročitati u nekom od druga dva tutorijala.

Tijelo (body) sadrži sav onaj sadržaj koji je vidljiv korisniku pri učitavanju stranice.
Drugim riječima, u tijelu se definiše koji elementi postoje na stranici, te njihov međusobni raspored.
To može biti kombinacija teksta, slika, te ostalih tagova koji iscrtavaju različite elemente koji čine jedan dizajn.

Tagovi za oblikovanje teksta - 1

Osnovni tag za oblikovanje teksta u HTML-u je <font>.

Uz taj tag trebaju stajati jedan ili više atributa ili argumenata, koji isti pobliže opisuju.
Mogu se koristiti sljedeći atributi:

• color - služi za odabir boje teksta, boju unosimo engleskim nazivom (red, yellow) ili heksadecimalnim RGB kodom (#aa33dd)
• face - određuje koji se font koristi za prikaz teksta (Arial, Verdana, Lucida Console)
• size - određuje veličinu slova u tekstu

Također se koriste i sljedeći tagovi za formatiranje teksta:

• <b> - bold (podebljani tekst)
• <u> - underline (podvučeni tekst)
• <i> - italic (kosi tekst)
• <s> - strikeout (precrtani tekst)

Primjer koda:

<font face="Verdana" size="5">
Verdana, size 5
</font>

<font face="Cambria" color="blue">
Cambria, blue
</font>

<font face="Consolas" size="3" color="red">
Consolas, red, size 3
</font>

<b>bold</b>
<u>underline</u>
<i>italic</i>
<s>strikeout</s>

Prikaz:

Tagovi za oblikovanje teksta - 2

Veličinu teksta možemo odrediti i tagovima za podnaslov, a to su <h1> (najveći podnaslov) sve do <h6> (najmanji podnaslov).

U novi red prelazimo pomoću taga <br>, koji stavljamo na kraj reda gdje želimo da se tekst prelomi ili da imamo razmak između redova.

Odlomak teksta (paragraf) označavamo tagom <p>, ovaj tag ima jedan atribut pod nazivom align (poravnanje) koji može imati jednu od sljedećih vrijednosti:

• left - tekst poravnan ulijevo (po default-u)
• center - tekst centriran unutar paragrafa
• right - tekst poravnan udesno
• justify - tekst ispunjava paragraf cijelom dužinom (kao kod novinskih članaka)

Primjer koda:

<h2>Veći podnaslov</h2>
<h4>Manji podnaslov</h4>

Prvi red teksta.<br>
<br>
Drugi red je razmaknut od prve sa 2 br taga.

<p>Lijevo poravnan odlomak</p>
<p align="center">Centriran odlomak</p>
<p align="right">Desno poravnan odlomak</p>
<p align="justify">Ujednačen tekst u odlomku</p>

Prikaz:

Liste

Liste koristimo kada trebati nabrojati neke stavke ili osobine.
Imamo 2 tipa lista:

• Brojne liste (ordered list, <ol>) - ispred stavki se nalaze redni brojevi ili slova
• Nebrojne liste (unordered list, <ul>) - ispred stavki se nalaze određeni simboli

Za nabrajanje stavki koristimo tag <li> (list item).

Kod oba tipa listi može se koristiti atribut type, a može imati različite vrijednosti za pojedini tip liste:

• Kod brojnih lista (ol): A, a, I, i
• Kod nebrojnih lista (ul): disc, square, circle

Primjer koda za brojne liste:

		<ol>
		<li>Arapski brojevi</li>
		<li>Arapski brojevi</li>
		</ol>

		<ol type="A">
		<li>Velika latinična slova</li>
		<li>Velika latinična slova</li>
		</ol>

		<ol type="i">
		<li>Mali rimski brojevi</li>
		<li>Mali rimski brojevi</li>
		</ol>
		

Prikaz koda:
Primjer koda za nebrojne liste:

<ul>
<li>Ispunjeni krug kao simbol nabrajanja</li>
</ul>

<ul type="square">
<li>Kvadrat kao simbol nabrajanja</li>
</ul>

<ul type="disc">
<li>Kvadrat kao simbol nabrajanja</li>
</ul>

Tabele

Tabele koristimo za grupisani prikaz podataka određenog tipa.
Presjek reda i kolone naziva se ćelija.

Za prikaz tabela koriste se sljedeći tagovi i atributi:

• <table> - osnovni tag za tabele
  • cellpadding - rastojanje teksta u ćelijama i okvira ćelije
  • cellspacing - razmak između svake ćelije
  • align [left, right, center] - poravnanje tabele u tekstu
• <tr> - red u tabeli
  • align [left, right, center, justify] - poravnanje teksta unutar reda
  • valign [top, bottom, middle] - vertikalno poravnanje teksta
  • rowspan - visina ćelije u redovima tabele
• <td> - ćelija u tabeli
  • align [left, right, center, justify] - poravnanje teksta unutar ćelija
  • colspan - širina ćelije u kolonama
• <th> - zaglavlje tabele, tekst u zaglavlju je boldiran i centriran
• Zajednički atributi za sve elemente tabele:
  • width - širina tabele, reda ili ćelije u pikselima ili procentima
  • border - debljina okvira tabele, reda ili ćelije
  • bordercolor - boja okvira
  • background - slika u pozadini
  • bgcolor - boja pozadine

Primjer jednostavne tabele:

<table border="1" cellspacing="2" width="300">
<tr>
	<th>Naslov 1</th>
	<th>Naslov 2</th>
	<th>Naslov 3</th>
</tr>
<tr>
	<td>Ćelija 1</td>
	<td>Ćelija 2</td>
	<td>Ćelija 3</td>
</tr>
</table>
		

Izgled tabele:

Naslov 1	Naslov 2	Naslov 3
Ćelija 1	Ćelija 2	Ćelija 3

Primjer koda sa upotrebom colspan:

<table border="1" cellspacing="2" width="300" align="center">
<tr>
	<td colspan="2" align="center">
		<b>Zajednička kolona</b>
	</td>
</tr>
<tr>
	<td>Ćelija 1</td>
	<td>Ćelija 2</td>
</tr>
</table>

Izgled tabele:

Zajednička kolona
Ćelija 1	Ćelija 2

Primjer koda sa upotrebom rowspan:

<table border="1" cellspacing="2" width="300" align="right">
<tr>
	<td rowspan="2" align="center">
		<b>Zajednički red</b>
	</td>
	<td>Ćelija 1</td>
</tr>
<tr>
	<td>Ćelija 2</td>
</tr>
</table>

Izgled tabele:

Linkovi i slike

Linkove koristimo da povežemo dokument sa nekom drugom stranicom ili dokumentom.
Kao link može poslužit tekst, slika te neki drugi multimedijski elementi.

Osnovni tag za linkove je <a> (engl. anchor).
Može imati sljedeće atribute:

• href, može imati sljedeće vrijednosti:
  • dokument.html - povezuje korisnika sa stranicom "dokument.html"
  • http://www.ms-skola.ba - povezuje korisnika na Web stranicu
  • mailto:oadnan11@hotmail.com - klikom na link otvara se Mail client sa ciljem slanja e-maila na određenu adresu
  • #ime_oznake - prebacuje korisnika na dio stranice gdje se nalazi određena oznaka
• title - koristi se za prikazivanje teksta pri dolasku kursora na link
• name - koristi se za određivanje oznake
• target - ime elementa u kojem će se link otvoriti, ukoliko je vrijednost "_blank", stranice će se otvoriti u novom tabu ili prozoru

Nakon otvorenog taga za link možemo odrediti šta želimo koristiti kao poveznicu (upisati tekst, ili dodati sliku).

Tag za dodavanje slike je <img>. Može imati sljedeće atribute:

• src (engl. source) - određuje izvor slike, tj. ime fajla slike koju želimo prikazati (slika.jpg, kuća.png)
• alt - alternativni tekst, prikazuje se ukoliko slika nije dostupna
• width - širina slike
• height - visina slike
• align [left, right, center] - poravnanje slike u odnosu na tekst

Primjer za linkove:

<a href="#0" title="Nazad">Povratak na naslovnu stranicu</a>
<a href="http://google.com">Google Pretraga</a>
<a href="#top">Povratak na vrh stranice</a>
		

Prikaz linkova: Primjer za slike:

<img src="smiley.jpg" width="64" align="center"> Obična slika
<br><br>
<a href="#0" title="Nazad">
<img src="smiley.jpg" width="96" align="right"> Link sa slikom
</a>
		

Forme

Forme (obrasce) koristimo za unos podataka i slanje istih serveru koju vrši obradu ili određenu radnju na osnovu unosa (npr. registracija, slanje poruke, pretraga na forumu i sl.).

Za kreiranje formi koristi se osnovni tag <form>, uz pojedine atribute:

• name - sadrži ime forme
• action - određuje adresu skripte (URL) koja vrši obradu forme nakon slanja
• method - određuje tip HTTP zahtjeva, najčešće GET ili POST ovisno o vrsti forme

Kako bi omogućili unos podataka koristimo sljedeće elemente unutar formi:

• <input> - osnovno polje za unos, atributi su sljedeći:
  • type, određuje vrstu polja, neke od vrijednosti su:
    - text (polje za unos manje količine teksta, 1 linija)
    - checkbox (opcijsko dugme, može biti označeno u startu preko atributa checked)
    - radio (opcijsko dugme, samo jedna vrijednost može biti označena)
    - reset (dugme koje vraća formu na prvobitnu vrijednost)
    - submit (dugme za slanje forme)
• <select> - padajuća lista u kojoj odabiramo jednu vrijednost, za nabrajanje stavki koristi se tag <option> sa atributima:
  • value kojim određujeo vrijednost koja se šalje serveru za obradu
  • neobavezni atribut selected kojim označavmo početnu vrijednost

<form name="mojaforma" method="POST">
<label>Ime:</label>
<input type="text" maxlength="25" name="ime"><br>
<label>Prezime:</label>
<input type="text" maxlength="25" name="prezime"><br>
<br>
Označite jednu ili više vrijednosti:<br>
<input type="checkbox" name="check1"> Checkbox 1<br>
<input type="checkbox" name="check2"> Checkbox 2<br>
<br>
Označite jednu vrijednost:<br>
<input type="radio" name="radio"> Radio 1<br>
<input type="radio" name="radio"> Radio 2<br>
<br>
Odaberite jednu vrijednost:<br>
<select name="odabir">
<option value="1">Vrijednost 1</option>
<option value="2">Vrijednost 2</option>
</select>
<br><br>
<input type="submit" name="submit" value="Slanje">
<input type="reset" name="reset" value="Brisanje">
<input type="button" name="button" value="Dugme">
</form>
		

Izgled forme: