Stilovi fontova

Pomoću CSS-a možemo relativno lako izmijeniti naèin na koji se naš tekst prikazuje u web pretraživaču. Za razliku od standardnog HTML-a CSS nam omogućava puno veću fleksibilnost i kontrolu nad tekstom.


Šta sve možemo urediti sa CSS-om?


Možemo uređivati sljedeće atribute:


1. color
2. font-weight
3. font-family
4. font-size
5. font-variant
6. font-style
7. text-decoration
8. text-transform



Smatramo da je ovaj dio CSS-a koji uređuje font najvažniji pa ćemo u kratkim crtama proći svaki atribut teksta. Kombiniranjem ovih atributa možete postići veoma dobar efekt, pogotovo ako napravite klase koje ćete koristiti u dijelovima vaše web stranice (opisi, reklame, naslovi, linkovi itd.).


Color


Pomoću ovog atributa podešavamo boju teksta kojeg ispisujemo. Predefinirana boja teksta ovisi o web pregledniku zato je preporučljivo istaknuti boju teksta ako nam je važno u kojoj će se boji ispisati.


Font-weight


Font-weight određuje koliko tekst treba biti podebljan tj. "težak" pri prikazu. Za vrijednosti možemo zadati numeričke vrijednosti ili ključne riječi. Ključne rije#269;i mogu biti normal, bold, bolder, lighter. Bolder i lighter kažu pretraživaču da tekst mora biti tamniji odnosno svjetliji za nijansu od teksa u parent elementu.
Numeričke vrijednosti mogu biti 100, 200, 300 .... 900 s tim da je normalna vrijednost 400, a bold ima vrijednost 700.


Font-family


Ovaj element predstavlja listu fontova koje preglednik mora ispisati. Preglednik najprije traži prvi font iz liste i pokušava ga postaviti za ispis, a onda hijararhijski ostale u listi.
Kao vrijednost atribut uzima ime fonta koje mora koristiti. Svako ime u listi se odvaja zarezom.
Predefinirana vrijednost fonta također zavisi od preglednika do preglednika i ne postoji standardni font za sve preglednike.


Font-size


Font-size određuje koliku veličinu fonta preglednik mora prikazati. U HTML-u smo ograničeni samo na 7 predefiniranih vrijednosti, ali nam zato CSS dopušta puno ve#263;u fleksibilnost. Ne samo da možemo određivati veličinu numerički nego još možemo odrediti i mjerne jedinice. Mjerne jedinice koje možemo koristiti su sljedeće:


1. point
2. ems
3. exs
4. picas
5. pixels
6. inches
7. millimeters
8. centimeters



Također možemo koristiti i relativne ključne riječi za podešavanje fonta - larger i smaller, kao i apsolutne ključne riječi:


1. xx-small
2. x-small
3. medium
4. large
5. x-large
6. xx-large



Zapamtimo da predefinirana vrijednost zavisi od preglednika do preglednika.


Font-variant


Ovdje možemo birati dva načina prikaza teksta, a to su normal ili small-caps. Normal će prikazati tekst onakav kakav je u originalu dok small-caps prikazuje tekst ispisan malim slovima kao umanjena velika slova.


Font-style


Tradicionalno imamo nekoliko stilova koje možemo primijeniti na tekst. CSS nam upravo to omogućava sa ovom opcijom. Možemo koristiti tri stila: normal, italic i oblique. Koristeći italic i oblique vizualno dobijemo isti stil.


Font-decoration


U ovom dijelu možemo primijeniti efekte na tekst koji prikazujemo. Ti efekti mogu biti: none, underline, overline, line-through, blink. Efekte možemo zapisati kao listu ako koristimo više od jednoga i tada ih odvajamo zarezom.


Text-transform


Text-transform omogućava transformaciju cijelog teksta u velika, mala slova ili da prvo slovo svake riječi bude veliko. Vrijednosti koje se mogu staviti su:


1. capitalize
2. uppercase
3. lowercase



Osim ovih opcija možete text-transform postaviti na none da se osigurate da tekst neće imati nikakve efekte.


Primjeri korištenja


Idemo vidjeti kako u praksi rade svi ovi tekstualni efekti kroz nekoliko primjera.



<font style="color: #ff0000; font-weight: 900;
font-family: Arial"> Kako koristiti CSS na tekstu!</font>
Kako koristiti CSS na tekstu!

<a href=# style="text-decoration: overline; font-size:10px">
Ovo je link
</a>
Ovo je link

<font style="text-transform:capitalize">
Ovo je primjer upotrebe capitalize text-transform</font>
Ovo je primjer upotrebe capitalize text-transform

Korištenje stilova u tablicama

Tablice su neizbježan dio HTML-a i stalno su nam potrebne. Koriste se i u dizajnerske svrhe kao i za tablični prikaz podataka što je i njihova osnovna namjena. Bilo kako bilo ne moramo koristiti predefinirani izgled tablica i zašto ih ne urediti kada već imamo tu mogućnost. Atributi koji nam stoje na raspolaganju, između ostalih, su:


1. border-width
2. border-style
3. border-color
4. border
5. height
6. width
7. float
8. clear


Border-width određuje debljinu ruba tablice. Moguće ključne riječi su thin, medium thick i none. Naravno ako izaberemo none u tablici nećemo vidjeti nikakav rub.

Border-style određuje stil prikaza ruba tablice. Ovdje imamo puno više opcija i ključnih riječi pa ćemo ih samo nabrojati, a u primjeru kasnije vidjeti njihovu upotrebu. Stil može biti none, dotted, dashed, solid, double, groove, ridge, inset, outset.


Border-color određuje boju ruba tablice. Možemo definirati i boju za svaku pojedinu stranu tablice upotrebljavajući elemente border-top-color, border-left-color, border-bottom-color, border-right-color.


Height i width određuju širinu i visinu tablice.

Atribut float smješta element lijevo ili desno i oko njega stavlja tekst. Za razliku od float, clear atribut ne dopušta da se tekst smjesti oko elementa u tablici. I jedan i drugi mogu imati vrijednost left, right i none.


Sada ćemo napraviti primjer korištenja stilova opisanih iznad. U ovom primjeru su stilovi pisani za svaki tag tablice. Puno jednostavnije i vizualno pregledniji način zapisa ovih stilova je ako napravimo klase za tagove table, tr i td. Nakon definiranja klasa, tagove tablice samo referiramo prema tim klasama što je puno zgodnije i preporučljivije.




<table style="color:505050;width:400px;border: 1px
solid #6699cc;border-collapse:collapse">
<tr style="height:20px">
<td style="border-bottom:2px solid;background-color:
#a8a8a8;font-size: 11px;
text-align: center;color: #404040;" colspan="2">
Stiliziranu tablicu je mnogo ljepše vidjeti
</td>
</tr>
<tr style="height:20px">
<td style="font-size: 11px;text-align: center;
color: #404040;border-bottom: 1px dotted #6699CC;border-right:
1px dotted #6699cc;">
Vrijednost:
</td>
<td style="font-size: 11px;text-align: center;color: #404040;
border-bottom: 1px dotted #6699CC;">
10000$
</td>
</tr>
<tr style="height:20px">
<td style="font-size: 11px;text-align: center;color: #404040;
border-bottom: 1px
dotted #6699CC;border-right:
1px solid #6699cc;">
Uplata:
</td>
<td style="font-size: 11px;
text-align: center;color: #404040;border-bottom: 1px dotted #6699CC;">
2000$
</td>
</tr>
<tr style="height:20px">
<td style="font-size: 11px;text-align: center;color: #404040;
border-bottom: 1px dotted #6699CC;border-right:
1px dotted #6699cc;">
Ukupno:
</td>
<td style="font-size: 11px;text-align: center;color: #404040;
border-bottom: 1px dotted #6699CC;">
2000$
</td>
</tr>

</table>

CSS-om do balona za komentare

Ovo je jedna od brzih tehnika koje se već duže vrijeme primjenjuju na Internetu - kako od jednostavnog div elementa dobiti lijepo sređen tekstualni okvir. Ovakav okvir možemo koristiti za komentare čitatelja na našim stranicama. Ovaj kod pravimo u tri koraka. Prvo napravimo dodatnu sličicu koju ćemo koristiti. Mi smo se odlučili za ovu:





Nakon ovoga napišimo CSS kod i stavimo ga unutar head taga. CSS treba izgledati ovako:



<style type="text/css">

.komentar{
background-color:#D3D2D1;
width: 400px;
padding: 10px;
}

.podnozje{
background: url(strelica.gif) 15px 0 no-repeat;
padding-left: 60px;
padding-top: 6px;
font-size: smaller;
}
</style>




Sada moramo samo upotrijebiti ove klase.



<div class="komentar">
Ovo je tijelo komentara i ono dolazi u ovom div elementu.

A najbolje je to što se ne trebamo brinuti koliko teksta se
nalazi unutar
ovog div elementa jer &#263;e sli&#269;ica uvijek biti
dobro pozicionirana.
</div>

<div class="podnozje">
Napisano 27.rujna.2007 od Admin
</div>

Dodatno uredite HTML liste

Liste možemo dodatno urediti koristeći CSS. Možemo mijenjati sliku, boju, izgled, itd. Ovaj CSS kod podržavaju svi preglednici tako da ne bismo trebali imati problema sa implementacijom. Atributi koje možemo koristiti su sljedeći:
list-style-image
list-style-position
list-style-type
marker-offset

Svi atributi mijenjaju izgled markera u listama. Marker je znak koji se pojavljuje prije svakog zapisa u listi. Možemo postaviti vlastito dizajnirani marker, možemo mijenjati nekoliko markera koji su već predefinirani te možemo mijenjati tip markera.


Prvi atribut, list-style-image, prima vrijednost u obliku putanje do slike koju treba staviti kao marker.



<ul style="list-style-image: url('slike/marker.gif');">

<li> HTML </li>
<li> CSS </li>
<li> PHP </li>

</ul>
HTML
CSS
PHP



Različite markere koji su definirani i koji se koriste u uređenim listama koristimo na sljedeći način:



<ol style="list-style-type: decimal;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: lower-roman;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: upper-roman;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: lower-alpha;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: upper-alpha;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS



Za neuređene liste imamo četiri predefinirana izgleda lista. Evo kako oni izgledaju:



<ul style="list-style-type: disc">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: circle">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: square">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: none">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS



I za kraj da vidimo kako se koristi atribut marker-offset.



<ul style="list-style-position: inside">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-position: outside">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

Zaobljeni rubovi sa CSS-om

Danas je nemoguće napraviti tekstualni okvir sa zaobljenim rubovima upotrebljavajući samo HTML. Ovdje ćemo vidjeti upotrebu CSS-a i nekoliko slika da bismo dobili tekstualne okvire sa zaobljenim rubovima. Prednost je ta što se ovako dizajniran okvir sam prilagođava količini teksta te rubovi uvijek ostaju zaobljeni. Pa krenimo redom.


Prvo napravimo tekstualni okvir pomoću div elementa:

<div class="gl">
Proba tekst okvira i zapisa.
</div>

Proba tekst okvira i zapisa.



Sada napravimo četiri slike. Slike ustvari predstavljaju četvrtine punog kruga. Isjecimo ih i sačuvajmo:

Sada imamo slike i samo ih trebamo rasporediti na četiri kuta našeg tekstualnog okvira:




<style type="text/css">
.gl {background: url(gl.gif) 0 0 no-repeat; width: 200px}
.gd {background: url(gd.gif) 100% 0% no-repeat; width: 200px}
.dl {background: url(dl.gif) 0 100% no-repeat; width: 200px}
.dd {background: url(dd.gif) 100% 100% no-repeat; width: 200px;}
</style>

<div class="gl"><div class="gd"><div class="dl"><div class="dd">
<div style="padding:10px">
Proba tekst okvira i zapisa.
</div>
</div></div></div></div>

Ovako smo dodijelili rubove našem tekst okviru. U zadnjem div elementu, dd, smo dodijelili padding vrijednost koja je malo veća od dužine i širine slika kutova. Tako se neće dogoditi da se tekst ispisuje preko ovih slika, a i ljepše će izgledati. Još moramo dodijeliti background-color vrijednost. Ovu vrijednost dodjeljujemo prvom elementu. Na kraju imamo ovaj kod:




<style type="text/css">
.gl {background: url(gl.gif) 0 0 #9ac80d no-repeat; width: 200px;}
.gd {background: url(gd.gif) 100% 0% no-repeat; width: 200px}
.dl {background: url(dl.gif) 0 100% no-repeat; width: 200px}
.dd {background: url(dd.gif) 100% 100% no-repeat; width: 200px}
</style>

<div class="gl"><div class="gd"><div class="dl"><div class="dd">
<div style="padding:20px">
Proba tekst okvira i zapisa.
</div>
</div></div></div></div>

Zaobljeni rubovi bez slika

bljeni rubovi bez slika


U prošlom tutorijalu napravili smo CSS okvire sa zaobljenim rubovima, ali smo koristili slike. Slike smo prije nacrtali te ih posložili unutar okvira tako da dobijemo željeni efekt. Sada ćemo napraviti istu stvar, ali na drugi način. Nećemo koristiti slike nego samo div i b elemente. Na njih ćemo primijeniti CSS kojim ćemo oblikovati naše zaobljene rubove. Prvo napravimo CSS i kopirajmo ga u head dio.


<style type="text/css">
div#okvir{ margin: 0;background: #9bd1fa; width:300px}
b.rubgornji, b.rubdonji{display:block;background: #ffffff}
b.rubgornji b, b.rubdonji b{display:block;height: 1px;
overflow: hidden; background: #9bd1fa }
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rubgornji b.r4, b.rubdonji b.r4{margin: 0 1px;height: 2px}
div.sadrzaj{padding-left:10px}
</style>


Prvo smo definirali div element okvir u kojem ćemo "crtati" rubove. Elementi sa kojima ćemo crtati rubove su <b> elementi. Razlog zašto baš njih koristimo je jednostavan. Zauzima samo jedan znak te samim tim i cijeli dokument zauzima manje prostora i pregledniji je. Ovo je sve što trebamo napraviti sa CSS-om. Sada trebamo iskoristiti gore napisani kod za našu stranicu. Kod za prikaz okvira bi izgledao ovako:


<div id="okvir">
<b class="rubgornji"><b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b></b>
<div class="sadrzaj">
Ovdje upisite sadrzaj vaseg okvira<br>
Ovaj okvir ne koristi slike za rubove
</div>
<b class="rubdonji"><b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b></b>
</div>


CSS-om smo definirali izgled okvira i rubova, a sada samo te definicije iskoristili da bi prikazali okvir. Elementima <b> smo nacrtali rubove. Naša boja okvira je #9bd1fa koju vi naravno prilagodite svojoj web lokaciji. Osim toga možete promijeniti i stil klase sadrzaj. Tu definirajte način prikazivanja, font, boju teksta, margine, itd. Unutar div elementa sa klasom sadrzaj ide sadržaj našeg okvira. Ovo je veoma jednostavan kod i lako se koristi te je puno lakši za korištenje nego okviri koji koriste slike. Prednost okvira sa slikama je ta što slika može biti mnogo ljepše zaobljena (rubovi su manje zupčasti) pa je i sam okvir mnogo ljepši i oku ugodniji

CSS stranica fiksne širine

U ovom tutorijalu napravit ćemo CSS za HTML stranicu fiksne širine. Ovo je ujedno i najčešći oblik web stranice koja se samo visinom prilagođava sadržaju, a širinu uvijek zadržava. Ovdje ćete vidjeti i veliku prednost korištenja CSS-a za izradu layouta stranice nad tablicama. CSS kod je puno pregledniji i jednostavniji za izmjenu i ispravke kao i za samu promjenu izgleda cijele web stranice. Za početak uzet ćemo "standardni" izgled koji sačinjava:
Naslov/baner stranice
Tijelo stranice sa tri stupca
Podnožje stranice

Body dio

Za početak napišimo body dio HTML stranice.



<div id="okvir">
<div id="zaglavlje">
Baner
</div>
<div id="izbornik">
Izbornik
</div>
<div id="glavnisadrzaj">
Glavni sadrzaj
</div>
<div id="reklame">
Reklame
</div>
<div id="podnozje">
Podnozje
</div>
</div>



Veoma jednostavan i pregledan dio koda. Ovaj kod ujedno predstavlja i sve dijelove naše stranice koje ćemo naknadno nadopuniti sadržajem tako da naša stranice dobije krajnji izgled.

Head dio

Body dio koda koji smo gore napisali sada zahtijeva CSS koji će posložiti DIV elemente na njihove pozicije.


#okvir {
margin:10px;
width: 800px;
background: #ffffff;
}

#zaglavlje {
background: #dddddd;
}

#izbornik {
float: left;
width: 200px;
background: #ebebeb;
}

#glavnisadrzaj {
float:left;
width:450px;
background-color: #cdcde6;
}

#reklama{
float:right;
width: 150px;
background: #ebebeb;
}

#podnozje {
clear:both;
background:#dddddd;
}



Pogledajmo gornji CSS kod. Klasom okvir definirali smo marginu od 10px i ukupnu dužinu stranice od 800px. Svi drugi elementi će se posložiti unutar ovog div elementa i unutar ovih 800px. Zaglavlju smo samo promijenili boju u #dddddd.

Sljedeće tri klase moramo posložiti jednu do druge. U tu svrhu koristit ćemo atribut float. DIV izbornik i glavnisadrzaj će imati vrijednost float-a left, a div reklama će imati vrijednost right. Vrijednost width ovih div elemenata možete postaviti na bilo koju vrijednost, ali pripazite da njihov zbroj iznosi 800px koje smo postavili kao maksimalnu širinu stranice.

Upravo smo završili cjelokupan kostur stranice. Ako ste sve dobro napravili trebali bi u web pregledniku vidjeti sljedeće:

Ostaje nam samo da ubacimo sadržaj u stranicu. Stranica bi se sama trebala prilagoditi sadržaju. Ovaj sadržaj jednostavno ćemo postaviti unutar odgovarajućeg div elementa.

Gornja stranica će se prilagođavati sadržaju bez obzira koliki tekst postavite u Glavni sadržaj. Zaglavlje i podnožje će uvijek biti na svome mjestu. Cjelokupan kod stranice se nalazi ispod. Jednostavno sve kopirajte i napravite novi HTML dokument. U ovom kodu je, radi jednostavnosti, u jedan dokument postavljen cjelokupan CSS za stranicu. Preporuka je da se CSS odvoji u poseban dokument te tako omogući jednostavnije i robusnije uređivanje i mijenjanje stranice.



<html>
<head>

<style>
#okvir {
margin:10px;
width: 800px;
background: #ffffff;
}
#z
aglavlje {
background: #dddddd;
padding:10px
}

#izbornik {
float: left;
width: 150px;
background: #ebebeb;
padding:10px;
}

#glavnisadrzaj {
float:left;
width:450px;
background-color: #cdcde6;
padding:10px;
}

#reklama{
float:right;
width: 160px;
background: #ebebeb;
padding:10px;
}

#podnozje {
clear:both;
background:#dddddd;
text-align: center;
}

</style>

</head>
<body>

<div id="okvir">
<div id="zaglavlje">
<font style="font-face:arial; font-size:80px; color:#FF0000">
<b>@</b>
</font>
<font style="font-face:arial; font-size:30px; color:#FF0000">
CSS fiksna širina
</font>
</div>
<div id="izbornik">
Po&#232;etna<br>
O nama<br>
Kontakt<br>
Proizvodi<br>
Download<br>
</div>
<div id="glavnisadrzaj">
Glavni sadrzaj<br><br>

Lorem ipsum at doctus postulant consetetur usu, duo solum equidem
detracto ex. Choro legendos facilisis vis ut, in eum alii noster
graeco. Invenire cotidieque appellantur vis at, zzril primis
habemus nam te, ad choro iudico virtute nec. Quo invidunt incorrupte
no, nulla doming rationibus ut eam. Aliquando urbanitas
conclusionemque ea nec, ex duo munere legere, per tota apeirian eu.
Duo no gloriatur intellegam, quo an quodsi epicuri sapientem. Nec ne
dico fabellas detraxit, solum clita reformidans pri te, est an
vitae disputando consequuntur. Has elit prompta conclusionemque ei,
porro meliore nec ad. Duis tempor commodo qui ad, eligendi
sententiae philosophia et sea. Virtute takimata argumentum

id nec, ex eum vitae partem convenire, quem detracto mandamus
vim ex. Deleniti expetenda salutatus cu nec, alii veniam
persequeris has id. Nibh phaedrum laboramus has at, has odio omnesque
ut. His no oratio vivendum definitiones, brute nostrud theophrastus
an mel. Nam possit sadipscing ei. An tamquam invenire complectitur
vim, an sea assum recusabo scribentur.
Sonet exerci offendit et sea, per accommodare ullamcorper
consequuntur eu, has no harum decore. Pri in timeam nonummy, in
falli doming persecuti vis, pro id meis ubique epicuri. An vim
scripta efficiantur, ut sed nostro efficiendi scriptorem, vel
habeo sanctus mediocritatem id.
Nostro aliquam ancillae ex vis, in solum facer accusamus eam.
</div>
<div id="reklame">

<font style="font-face:arial; font-size:20px; color:#FF0000">
Reklamni prostor
<br>
za Vas
</font>

</div>
<div id="podnozje">
Copyright: osvemu.com
</div>
</div>


</body>
</html>

Formatiranje teksta

Formatiranje teksta u HTML-u je osnova koju svatko mora znati. Već smo upoznati sa tagovima <i> i <b> za stvaranje nakrivljenih i podebljanih slova. Sada imamo novi tag kojim ćemo se "poigrati". Tag <font> nam omogućava daljnje formatiranje teksta. Pogledajmo i objasnimo prvi primjer.



<font face="arial" color="#0000FF" size="2">Pozdrav svima!</font>
Pozdrav svima!



Atributom face biramo vrstu slova (font), atributom color određujemo boju, a atributom size veličinu slova. Jednostavno! Postoje još tagovi koji imaju predefiniran izgled slova. Takve atribute smo već koristili, a oni su <h1> pa do <h6> koji definiraju naslove. Pogledajmo neke od tih tagova:



<address>koriste ga za zapis e-mail adrese</address>

<big>Veliki tekst</big> u odnosu na mali.

<a href="#fusnota">¹</a>
-- ovo ce stvoriti link na fusnotu<br><br>
<p><fn id="fusnota">¹
Fusnota koja ce se prikazati kad kliknemo na gornji link
</fn>


<kbd>Keyboard Font</kbd>, kao ono tipkani tekst.

<pre>
Kako napisete tako ostane
ukljucujuci i prazna mjesta
</pre>

<SMALL>Small<SMALL>Tekst</SMALL>tag</SMALL>

<BIG> Big<BIG>Tekst</BIG>tag</BIG>

<code> Tag za pisanje koda </code>




koriste ga za zapis e-mail adrese


Veliki tekst u odnosu na mali.

1 -- ovo ce stvoriti link na fusnotu


1Fusnota koja ce se prikazati kad kliknemo na gornji link


Keyboard Font, kao ono tipkani tekst.

Kako napisete tako ostane ukljucujuci i prazna mjesta
Small Tekst tag Big Tekst tag


Tag za pisanje koda

Meta tagovi

Što su to meta tagovi?

Kako ih koristiti?


Na ova pitanja odgovor ćete naći u ovom tutorijalu. Meta tagovi su informacije koje umećemo unutar head taga. Ove informacije se ne prikazuju korisniku nego služe za neke posebne namjene koje nisu važne korisniku. Na primjer, jedni meta tagovi govore pregledniku koji će skup znakova koristiti, a drugi sadržavaju ključne riječi koje opisuju web stranicu. Neki meta tagovi također mogu spriječiti crawlers web pretraživače da indexiraju neke stranice itd.




<head>

<title>O svemu</title>
<meta name="description" content="Naucite jednostavno HTML,
PHP, JavaScript, CSS kroz nase tutoriale.">
<meta name="keywords" content="HTML, PHP, tutorial, CSS, Java Script">
<meta name="robots" content="noindex">

</head>




Tag title nije meta tag u pravom smislu, ali ćemo ga pogledati u ovom primjeru. Tekst koji se nalazi između njega će biti prikazan u traci naslova vašeg web preglednika. Koriste ga i web pretraživači za rangiranje te stranice. Mnogi web pretraživači koriste ovaj naslov pri izlistavanju vaše stranice. Ovaj tag se također koristi kao predefinirano ime kada stavljate stranicu u Favorites.

Meta tag description koristi se da web crawlers pobliže objasni svrhu naše stranice. Rečenice koje to opisuju stavljaju se u atribut content. Obično cijeli atribut content se ograničava od 200 do 250 znakova. Moguće je da se znakovi nakon toga broja ne indeksiraju.

Meta tag keywords daje još teksta web crawlers koji se koristi pri rangiranju i pretraživanju naših stranica od strane web pretraživača.


Pripazite jednu stvar!


Ako imate stranicu sa Freeware programima onda se "isplati" staviti Freeware kao ključnu riječ unutar keywords taga. To će reći pretraživaču da vaša stranica stvarno ima sadržaj vezan uz Freeware programe. Ako stavite Freeware kao ključnu riječ i više je nigdje ne spomenete onda je moguće da će pretraživač jednostavno zanemariti tu riječ kao ključnu za vašu stranicu. Ovo naravno sve vrijedi za web crawlers koji podržavaju ove meta tagove, a samo neki ih podržavaju.


Sljedeći tag, robots, specificira kako će i hoće li web pretraživač indeksirat web stranicu. Preporučuje se da se ovaj tag koristi samo ako želimo spriječiti web crawlers da indeksiraju. Sve ostale verzije ovoga taga će crawlers zanemariti i indeksirati sve stranice. Ali neki koriste i te varijante pa evo i primjera:



<head>

<title>O svemu</title>
<meta name="description" content="Naucite jednostavno HTML,
PHP, JavaScript, CSS kroz nase tutoriale.">
<meta name="keywords" content="HTML, PHP, tutorial, CSS, Java Script">
<meta name="robots" content="index,follow">

</head>




Još jedan tag koji će nam puno koristiti govori web pregledniku koji skup znakova da koristi. Tako da web preglednik prikaže "naše" znakove moramo dodati sljedeće:




<head>

<title>O svemu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="description" content="Naucite jednostavno HTML, PHP,
JavaScript, CSS kroz nase tutoriale.">
<meta name="keywords" content="HTML, PHP, tutorial, CSS, Java Script">

</head>




Neke stranice koriste još puno različitih meta tagova, ali oni imaju specifičnu namjenu i ne koriste nam kod web pretraživača. I za kraj zapamtimo da je preporučljivo/obavezno staviti sljedeće meta tagove:


1. title
2. description
3. keywords
4. Content-Type

Kako postaviti favicon

Kako prikazati ikonu u adresnom baru web preglednika?


Ta ikonica se naziva favicon. Koriste je web pretraživači kao logo stranice u adresnom baru kao i kada se stranica spremi u Favorites. Ova opcija je podržana od strane svih novijih pretraživača pa budite bez brige. Ikonu prvo moramo napraviti i dati joj ime favicon.ico. Preporučljivo je da ikona bude dimenzija 16x16, ali neki preglednici mogu prikazati i veće rezolucije. Ikonu možete napraviti na lokalnom računalu ako posjedujete uređivač ikona ali postoje i on-line servisi koji to rade. Jedan od takvih je i Chami.com. Na ovoj stranici jednostavno uploadirate bilo koju sliku i od nje napravite ikonu.

Sada moramo postaviti ikonu na našu stranicu. To se radi tagom <link> koji ćemo postaviti u head dio.




<head>

<link rel="shortcut icon" href="favicon.ico">

</head>





I to je to. Napravili smo mali prepoznatljivi znak za našu web stranicu. Osim toga korisnici će nas puno lakše naći u Favorites-ima preko ikone nego tražeći naslov stranice.

HTML entiteti

Neki znakovi u HTML-u imaju specijalnu namjenu i ne možemo ih koristiti za prikaz. Na primjer, znak < označava početak taga pa ga ne koristimo u sadržaju stranice kao takvoga.


Ali ja moram prikazati taj znak!?


Onda morate posegnuti za HTML znakovnim entitetima. Znakovni entitet za < je &lt;. Iz primjera vidimo da se sastoji od tri dijela, tj. znaka & pa imena entiteta ili znaka # i na kraju dolazi ;. Imena entiteta se koriste za neke znakove umjesto broja jer ih je lakše zapamtiti tako. Ali svako ime entiteta ima svoj broj kojim se također može prikazati. Pomoću entiteta možemo napraviti razmak između riječi koliki želimo. Koristit ćemo entitet &#160; ili ime entiteta .


Primjer 1:

Stavit &#263;u &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 5 razmaka.
Stavit ću 5 razmaka.



Evo i kodova za neke "naše" znakove:

Znak Kod entiteta
č &#269;
ć &#263;
š &#353;
đ &#273;
ž &#382;
Č &#x10c;
Ć &#262;
Š &#x160;
Đ &#x110;
Ž &#381;




Osim naših znakova možda vam zatrebaju i neki posebni znakovi, pogotovo ako budete pisali tutorial o HTML-u.

Znak Kod entiteta
© &#169;
® &#174;
× &#215;
< &#60;
> &#62;
& &#38;
" &#34;
&#160;
¢ &#162;

Vrste lista u HTML-u

Liste nam služe za pregledniji prikaz podataka. HTML nam nudi nekoliko vrsta lista:


Unordered list - neuređene liste
Ordered list - uređene liste
Definitions list - neke liste definirane HTML-om
Pošto ne moramo puno objašnjavati i raspravljati o listama pogledajmo primjere i način upotrebe.


Ordered list - uređene liste

Raspored
<ol>
<li> Definirajte izgled </li>
<li> Definirajte funkcionalnost </li>
<li> Kodirajte </li>
</ol>

Potrebno znanje
Definirajte izgled
Definirajte funkcionalnost
Kodirajte



Za uređene liste možemo koristiti i atribut type. Vrijednosti atributa type za <ol> element mogu biti 1, a, A, i, I. Svaka vrijednost atributa nosi i drugačije numeriranje.


Korištenje atributa type

Raspored
<ol type="A">
<li> Definirajte izgled </li>
<li> Definirajte funkcionalnost </li>
<li> Kodirajte </li>
</ol>

Potrebno znanje
Definirajte izgled
Definirajte funkcionalnost
Kodirajte



Unordered list - neuređene liste

Potrebno znanje
<ul>
<li> HTML </li>
<li> PHP </li>
<li> CSS </li>
</ul>

Potrebno znanje
HTML
PHP
CSS



Atributi se mogu koristiti i za <ul> liste. Vrijednost atributa type za ove liste mogu biti disc, circle, square.


Unordered list - neuređene liste

Potrebno znanje
<ul type="square">
<li> HTML </li>
<li> PHP </li>
<li> CSS </li>
</ul>

Potrebno znanje
HTML
PHP
CSS



Definitions list - neke liste definirane HTML-om

Putanja
<dir>
<li> Sourcecode </li>
<li> Executable </li>
</dir>

Download
Sourcecode
Executable



Definitions list - neke liste definirane HTML-om

Putanja
<menu>
<li> Pocetna </li>
<li> O nama </li>
<li> Kontakt </li>
</menu>

Putanja
Pocetna
O nama
Kontakt



Namijenjen pisanju definicija

Definicije
<dl>
<dt> HTML </dt>
<dd> Hyper Text Markup Language </dd>
<dt> CSS </dt>
<dd> Cascade Style Sheet </dd>
</dl>

Definicije
HTML
Hyper Text Markup Language
CSS
Cascade Style Sheet

Kako postaviti dio slike kao link

Slikovna mapa (Image map) je tehnika u HTML-u kojom se na slici određuju područja koja će biti linkovi. Na jednoj slici možemo odrediti proizvoljan broj linkova. Jedino ograničenje je sama površina tj. veličina slike. Za određivanje linkova upotrijebit ćemo tagove <img>, <map> i <area>. Pogledajmo sada kako izgleda jedan jednostavan kod koji ćemo kasnije objasniti:


<MAP NAME="map1">
<AREA
HREF="index.php" ALT="Dizajn proizvoda" TITLE="Dizajn"
SHAPE=RECT COORDS="10,20,140,60">
<AREA
HREF="index.php" ALT="Testiranje je veoma vazno"
TITLE="Testiranje" SHAPE=CIRCLE COORDS="220,60,60">
<AREA
HREF="index.php" ALT="Razvoj proizvoda" TITLE="Razvoj"
SHAPE=RECT COORDS="10,120,140,160">
<AREA
HREF="index.php" ALT="Testiranje je veoma vazno"
TITLE="Testiranje" SHAPE=CIRCLE COORDS="220,200,60">
<AREA
HREF="new.html" ALT="Krajnji proizvod" TITLE="Proizvod"
SHAPE=POLY COORDS="70,193, 135,277, 112,281, 31,281, 6,277">

</MAP>

<IMG SRC="dijagram.gif"
ALT="Nasa slika" BORDER=0 WIDTH=300 HEIGHT=300
USEMAP="#map1">


Najprije smo definirali mapu koju primjenjujemo na našu GIF sliku. Unutar taga <map> definiramo područja mape pomoću taga <area>. Ova područja su ustvari naši linkovi. Tag <area> uzima atribut HREF u kojem definiramo link, atribute ALT i TITLE kao opis linka te još jedan atribut SHAPE. Ovo je atribut koji definira područje unutar kojeg ''vrijedi'' link, odnosno unutar kojega možemo kliknuti. To područje, SHAPE, može imati tri vrijednosti:

Default – određuje cijelo područje
Rect – određuje pravokutnik koji je definiran gornjom lijevom koordinatom i donjom desnom koordinatom
Circle – određuje krug koji je definiran koordinatama središta i samim polumjerom kruga
Poly – određuje proizvoljni poligon upisujući jednu koordinatu za drugom


Nakon određivanja mape preostaje nam još samo jedna stvar – dodavanje slike pomoću taga <img> u kojem koristimo atribut USEMAP. Ovaj atribut nosi vrijednost imena naše mape koju smo upravo definirali. Ime mape se dodaje na samom početku atributom NAME = "map1".
Elementi mape AREA se mogu i preklapati. U tom slučaju prednost ima onaj AREA element kojeg smo prvog upisali. Naravno, za linkove možete koristiti interne i vanjske linkove kao i mailto linkove. Na kraju nam ostaje još da vidimo kako gore napisani kod radi:

Kako napraviti email link

Email link se često koristi na web stranicama da se omogući korisnicima da vas jednostavno i brzo mogu kontaktirati. Kod je veoma jednostavan i lako ga je implementirati. Klikom na ovaj link korisniku se otvara predefinirani email klijent za slanje mail-a. Ovim linkom neke stvari predefiniramo da korisnik mora što manje pisati. Najjednostavniji kod je ovaj:



<a href="mailto:netko@negdje.com">Pisite nam</a>


Pišite nam


Vidimo da smo koristili <a> tag kao da radimo običan link. Izmjena je samo u href atributu. Tu definiramo mailto:email_adresa, tj. adresu na koju ide mail. Klikom na ovaj link korisniku će se otvoriti email klijent i u njemu će se automatski upisati adresa koju smo mi definirali. On mora samo napisati subject i poruku. Osim same adrese možemo definirati i druge predefinirane vrijednosti:
Cc = email_adresa@adresa.com – email adresa na koju se šalje kopija poruke
Bcc = email_adresa@adresa.com – email adresa na koju se šalje kopija poruke, ali adresa primatelja ostaje skrivena svim ostalim primateljima
Subject = Naslov poruke – Naslov email poruke koju šaljemo
Body = Pozdrav od nas – predefinirani tekst poruke

Možemo definirati sve podatke da korisnik ima što manje upisa. Pogledajmo kako ćemo napisati link ako koristimo sve predefinirane podatke.



<a href="mailto:netko@negdje.com?cc=email_adresa@adresa.com&
bcc=email_adresa@adresa.com&
subject=Jedan savjet za vas&body=Pozdravljam vas sve!">
Pisite nam
</a>


Pišite nam



Ovdje imamo par stvari za objasniti. Nakon definiranja mailto vrijednosti dolazi znak ?. Nakon toga jednostavno redamo elemente koji su međusobno odvojeni znakom &. Sa ovim linkom smo predefinirali sve vrijednosti email poruke.

U zadnje vrijeme ove linkove slabo možete vidjeti na web stranicama. Razlog su spam roboti. Ovi roboti pregledavaju stranice i traže upravo ove linkove. Kada ih nađu skidaju email adrese i šalju spam poruke na njih. Zbog toga ako već koristite ove linkove kodirajte link. (Jedan od takvih kodera je i E-mail koder, kojeg možete naći na ovim stranicama) Koderi koriste kombinacije znakova i JavaScript funkcije koje roboti, bar za sada, ne mogu otkriti. Osim kodiranja na stranicama možete naći i web forme za kontakt. Te forme je praktički nemoguće otkriti jer imaju dosta dobru slikovnu zaštitu slanja poruka. Još jedna od prednosti web formi je ta što one ne izlažu samu mail adresu na vidno mjesto. Sve ovo smanjuje neželjenu poštu u vašem inbox-u.

HTML Fieldset

HTML fieldset definira, grupira elemente koji su logički povezani u jednu cjelinu. Web preglednik pravi okvir oko elemenata te ih na taj način grupira. Tag koji koristimo za to je <fieldset>. Pogledajmo kako se koristi.

1.
<fieldset>
Ime: <input type="text" name="ime">
<br>
Prezime: <input type="text" name="prezime">
</fieldset>
<br>
<fieldset>
<input type="checkbox" name="auto"> Posjedujem auto
<br>
<input type="checkbox" name="kuca"> Posjedujem ku&#230;u
<br>
<input type="checkbox" name="kucniljubimac"> Posjedujem ku&#230;nog
ljubimca
<br>
</fieldset>

2.
<fieldset>
<legend>Osobni podaci</legend>
Ime: <input type="text" name="ime">
<br>
Prezime: <input type="text" name="prezime">
</fieldset>
<br>
<fieldset>
<input type="checkbox" name="auto"> Posjedujem auto
<br>
<input type="checkbox" name="kuca"> Posjedujem ku&#230;u
<br>
<input type="checkbox" name="kucniljubimac"> Posjedujem ku&#230;nog
ljubimca
<br>
</fieldset>

3.
<fieldset>
<legend align="center">Osobni podaci</legend>
Ime: <input type="text" name="ime">
<br>
Prezime: <input type="text" name="prezime">
</fieldset>
<br>
<fieldset>
<legend align="right">Dodatni podaci</legend>
<input type="checkbox" name="auto"> Posjedujem auto
<br>
<input type="checkbox" name="kuca"> Posjedujem ku&#230;u
<br>
<input type="checkbox" name="kucniljubimac"> Posjedujem ku&#230;nog
ljubimca
<br>

</fieldset>


Gornji primjer prikazuje korištenje align atributa. Sa align atributom koji koristimo u legend tagu možemo definirati gdje ćemo smjestiti naslov. Vrijednosti mogu biti:
Left – lijevo, koja je i predefinirana vrijednost
Center – sredina
Right – desno

Prečaci u HTML stranicama

Prečaci ili shortcut key daju mogućnost korisniku da selektira i aktivira link pomoću tastature, tj. bez korištenja miša. Za ovu mogućnost naučit ćemo HTML atribut accesskey. Kao kraticu možemo postaviti bilo koje slovo ili broj.

Da bi koristili ovu kraticu u Windows okruženju korisnik će pritisnuti tipku Alt + Znak npr. Alt + C. Macintosh korisnici će koristiti Ctrl + Znak, a Unix korisnici će pristupati pomoću Meta + Znak.

Jedna mala digresija. Kada korisnik otvori stranicu sa ovim prečacima, svi prečaci u pregledniku će biti prenamijenjeni i novi prečaci će biti u upotrebi.

Kao i sve što se tiče web preglednika, ni kratice se kod svih preglednika ne pozivaju isto. Ako koristite Internet Explorer onda će pritisak na Alt + Znak samo označiti link te je potrebno dodatno kliknuti Enter da bi aktivirali link. U Firefox-u je drugačija situacija. Potrebno je stisnuti Alt + Shift + Znak. U Operi kombinacija je Shift + Esc + Znak.

Kratice su case sensitive, tj. nije isto da li je znak prečice veliko A ili malo a.

Pogledajmo kako izgleda kod. Isprobajte ga ali obratite pažnju koji je preglednik kod vas i kako se pristupa prečacima.

<html>
<head>
</head>

<body>

Pre&#269;ac za textbox je: <b>t</b> <br><p>
<input type="text" accesskey="t"></input>
<br><br>
Pre&#269;ac za link je: <b>o</b>
<a href="http://www.osvemu.com" accesskey="o">O Svemu</a>


</body>
</html>

Marquee tag

Marquee tag je nestandardni tag koji je prvi put podržan u Internet Explorer-u. Ovaj tag danas podržavaju i drugi preglednici, ali ne kao standard nego više kao podršku stranicama koje ga koriste da bi se prikazale kako treba. Koristimo ga samo onda kada nam je potrebno scrool-ati neki tekst na web stranici. Odmah da upozorim da ovaj tag treba izbjegavati jer nije uključen u W3C standard. Najjednostavniji oblik korištenja ovog taga je:

1.
<marquee>Neki tekst na stranici</marquee>


Gornji kod će vrtjeti tekst „predefinirano“ sa desna na lijevo i tako u beskonačnost. Ovo ponašanje možemo promijeniti korištenjem nekih od atributa.

Align – koristi se isto kao i img tag
Behavior – definira „ponašanje“ taga, a vrijednosti mogu biti sljedeće:
Scroll – ovo je predefinirana opcija, tj. vrti sadržaj sa desna na lijevo;
Slide – pomiče sadržaj sa desna na lijevo i stane kada dosegne krajnju lijevu stranu;
Alternate – sadržaj se „odbija“ od strane marquee elementa lijevo-desno i nikad ne izlazi van samih granica elementa.
Bgcolor – Definira boju pozadine
Direction – definira smjer kretanja sadržaja, a vrijednosti mogu biti left, right, up, down
Width – definira širinu tag-a
Loop – definira koliko puta će tag vrtjeti svoj sadržaj
Scrollamount – definira za koliko će se piksela pomjerati sadržaj
Scrooldelay – definira vrijeme u milisekundama između dvije sličice animacije.


Na kraju nam preostaje još da vidimo kroz nekoliko primjera kako se mijenjaju osobine taga promjenom atributa.

2.
<marquee direction="up" bgcolor="#cccccc"
Scroolamount="10" width="200px" height="300px">
Neki tekst na stranici
</marquee>

Sada malo kompliciraniji primjer

<div class="code">
<marquee direction="down" Scrolldelay = "100"
width="10px" height="300px">
O
</marquee>

<marquee direction="down" Scrolldelay = "180"
width="10px" height="300px">
S
</marquee>


<marquee direction="down" Scrolldelay = "80"
width="10px" height="300px">
V
</marquee>


<marquee direction="down" Scrolldelay = "160"
width="10px" height="300px">
E
</marquee>


<marquee direction="down" SCROLLDELAY = "130"
width="10px" height="300px">
M
</marquee>

<marquee direction="down" SCROLLDELAY = "90"
width="10px" height="300px">
U
</marquee>

SetTimeout Funkcija

Ako želimo da se neki dio koda izvrši nakon što protekne određeno vrijeme možemo koristiti upravo ovu funkciju. Puno je lakše osloniti se na nju nego čekati događaje kao što su klik ša ili tastaturu. Pozivanje funkcije je dosta jednostavno i izgleda ovako:

SetTimeout (''MojaFunkcija()'',1000);
Kao prvi parametar funkcija SetTimeout prima izraz koji predstavlja funkciju koju treba izvršiti. Drugi parametar je vrijeme u milisekundama koje označava nakon koliko će preglednik izvršiti ovu funkciju. U ovom slučaju funkcija ''MojaFunkcija()'' će se izvršiti za jednu sekundu. Pogledajmo sada jednostavan primjer koda upotrebom ove funkcije.



<head>
<script language="JavaScript">
function tik()
{
document.forma.tekst.value="tik";
document.forma.sekunda.value=parseInt(document.forma.sekunda.value)+1;
setTimeout("tak()",1000);
}
function tak()
{
document.forma.tekst.value="tak";
document.forma.sekunda.value=parseInt(document.forma.sekunda.value)+1;
setTimeout("tik()",1000);
}

</script>
</head>

<body>
<form name="forma">
<input type="text" name="tekst" value="tak"><br>
<input type="text" name="sekunda" value="1">
&nbsp;&nbsp;
<input type="button" name="dugme" value="Klikni me" onClick="tik()">
</form>
<body>




U head dijelu smo definirali dvije funkcije tik() i tak(). U body dijelu smo definirali jednu formu sa dva textbox-a i jednim dugmetom. Kada kliknemo na dugme pozivamo funkciju tik(). U funkciji se onda prepravlja vrijednost polja tekst na ''tak'' te se uzima brojčana vrijednost polja sekunda te se povećava za jedan. Nakon toga se poziva funkcija tak() koja će biti izvršena za jednu sekundu. U funkciji tak() se prepravlja vrijednost polja tekst na ''tik'' te se povećava brojčana vrijednost polja sekunda za jedan. Nakon toga se ponovo poziva funkcija tik(). Ovdje smo napravili jednu petlju koja se vrti beskonačno i broji sekunde nakon klika na dugme. Ako želimo da se funkcije automatski počnu izvršavat onda bi kod izgledao ovako:



<head>
<script language="JavaScript">
function tik()
{
document.forma.tekst.value="tik";
document.forma.sekunda.value=parseInt(document.forma.sekunda.value)+1;
setTimeout("tak()",1000);
}
function tak()
{
document.forma.tekst.value="tak";
document.forma.sekunda.value=parseInt(document.forma.sekunda.value)+1;
setTimeout("tik()",1000);
}

</script>
</head>

<body>
<form name="forma">
<input type="text" name="tekst" value="tak"><br>
<input type="text" name="sekunda" value="1">

<script language="JavaScript">
tik();
</script>

</form>
</body>




Razlika u kodu je samo ta što smo izbacili dugme na koje treba kliknuti te funkciju pozvali da je preglednik izvrši odmah. Upotrebom ove funkcije možemo napisati dosta zanimljive i veoma korisne skripte.

Pop-up prozori

U današnje vrijeme mnogi ljudi mrze pop-up prozore jednako kao i spam poruke. Pop-up prozori se ranije nisu koristili u svrhu reklamiranja i dosađivanja ljudima. Oni su imali svoju namjenu koja je danas izgubila smisao. Kako god gledali na njih, nekada su nam potrebni za upotpunjavanje sadržaja web stranica, za prikaz brze pomoći, definicija, opisa, pratećih slika, dodatnih informacija o nekom proizvodu, itd. Postoji nekoliko pravila koja bi bilo poželjno poštovati ako smo se već odlučili na korištenje pop-up prozora:
Trebate ih praviti malih dimenzija, a ne kao jumbo-plakate preko cijelog ekrana
Posjetitelji trebaju imati kontrolu nad njima, a ne da se sami pokreću pri učitavanju stranice
Njihov sadržaj neka bude kratak i jasan – bez suvišnih opisa
Stvaranje pop-up prozora je prilično jednostavno. Sadržaj prozora je obična HTML stranica koja se samo prikazuje u tom prozoru, a sam prozor pozivamo pomoću jednostavne JavaScript funkcije. Prozor će se otvoriti klikom na link koji će sada pozvati upravo tu funkciju.


<a href="JavaScript:Popup('mojpopup.html');">Otvori Pop-up prozor</a>


Funkcija Popup() prima kao argument samo putanju do stranice koju treba prikazati. Evo i koda za ovu funkciju:


<script language="JavaScript">

function Popup(popuphtml)
{
window.open(popuphtml, 'Naslov', 'width= 400, height= 200,
scroolbars = YES, menubar = NO, resizable = NO, status = NO,
toolbar = NO, location = NO');
}

</script>



To je cijela funkcija. Ovaj kod stavimo u HEAD dio HTML stranice, a link stavljamo u BODY dio gdje nam je potreban. Window.open će otvoriti upravo onu HTML stranicu koju smo specificirali kao argument funkcije Popup. Atributi koji se nalaze dalje određuju što će se prikazati u novootvorenom prozoru. Evo i pojašnjenja za atribute koje smo koristili u windows.open funkciji:
Width – određuje širinu prozora
Height – određuje visinu prozora
Menubar – određuje da li će traka izbornika biti vidljiva
Scroolbar – određuje da li će scroolbar biti vidljiv
Resizable – određuje da li će prozor biti fiksne veličine ili ćemo moći mijenjati dužinu i širinu
Status – određuje da li će traka statusa biti vidljiva
Toolbar – određuje da li će traka sa alatima biti vidljiva
Location – određuje da li će traka koja prikazuje trenutnu lokaciju biti vidljiva

Prema nekim ljudima, dobra praksa bi bila unutar HTML stranice koja se otvara u pop-up prozoru postaviti i link za zatvaranje pop-up prozora. Taj link bi sada izgledao ovako:



<a href="JavaScript:window.close();">Zatvori prozor</a>

 

Izbornik sa padajućim popisom

Mnogi veliki portali imaju padajući izbornik sa popisom najvažnijih stranica i usluga na portalu. Ovaj popis najčešće radi na način da vi odaberete naziv stranice i jednostavna JavaScript funkcija vas odvede na odabranu stranicu. Postoji i drugi način, a taj je da vi najprije odaberete željenu stranicu te kliknete na dugme koje se nalazi pokraj popisa. Vi odaberite onu koju najviše želite ili koja vam se slaže sa stranicom. Kao i svaki odabir i jedan i drugi imaju svoje prednosti i mane i ako se ne možete odlučiti koji odabrati mi vam preporučujemo rješenje sa dodatnim dugmetom.

Izbornik bez dodatnog dugmeta

Najprije trebamo napraviti HTML kod sa popisom stranica koristeći <select> tag. Ovaj kod stavite unutar body dijela HTML stranice.


<form name="navigacija">

<select name="stranice" onChange="OtvoriStranicu();">
<option selected>Odaberite stranicu</option>
<option value="http://www.osvemu.com/index.php?str=pocetna">
Pocetna
</option>
<option value="http://www.osvemu.com/index.php?str=kontakt">
Kontakt
</option>

<!--Dodajte jos stranica koliko vam treba -->
</select>
</form>





Vidimo sada da select poziva funkciju OtvoriStranicu() čim se promijeni vrijednost polja odnosno čim kliknemo na neku vrijednost. Sada ide kod za ovu funkciju i ovaj kod naravno ide u head dio HTML stranice.


<script language="JavaScript">

function OtvoriStranicu()
{
vrijednost = document.navigacija.stranice.value;

if (vrijednost != null)
{
window.location.href = vrijednost;
}

}

</script>




Izbornik sa dodatnim dugmetom

Sada moramo napraviti takvu formu da omogući odabir lokacije i onda sačeka klik na dugme da bi odvela korisnika na odabranu lokaciju. Za ovo ćemo koristiti istu funkciju u JavaScript-u, samo će forma imati dodatno dugme.


<form name="navigacija">

<select name="stranice">
<option selected>Odaberite stranicu</option>
<option value="http://www.osvemu.com/index.php?str=pocetna">
Pocetna
</option>
<option value="http://www.osvemu.com/index.php?str=kontakt">
Kontakt
</option>

<!--Dodajte jos stranica koliko vam treba -->
</select>

<input type="button" name="Otvori" value ="Otvori"
onclick="OtvoriStranicu();">

</form>

Kako napraviti rotirajući baner

U ovom jednostavnom, ali uvijek korisnom kodu, iskoristit ćemo funkciju setTimeout() koju smo upoznali u prethodnim tutorijalima. Napravit ćemo baner koji sam mijenja slike bez potrebe da korisnik osvježi prozor. Ovaj kod se koristi kada želite prikazati više reklamnih oglasa u jednom okviru. Pa krenimo sa JavaScript kodom kojeg ćemo naknadno objasniti. Donji kod stavite u <head> dio HTML stranice.



<script language="Javascript" type="text/javascript">


PoljeSlika = new Array
("slike/baner1.jpg","slike/baner2.jpg","slike/baner3.jpg");

TrenutnaSlika = 0;

BrojSlika = PoljeSlika.length;


function Izmjena()
{


if (BrojSlika > 1)
{
TrenutnaSlika = TrenutnaSlika + 1;

if (TrenutnaSlika == BrojSlika)
{
TrenutnaSlika = 0;
}

document.getElementById("baner").src=
PoljeSlika[TrenutnaSlika];

setTimeout("Izmjena()", 5000);

}
}

</script>





Na samom početku koda smo definirali polje PoljeSlika u koje zapisujemo sliku po sliku. Ovdje možete zapisati bilo koji broj slika unutar navodnika te svaku sliku odvojiti zarezom. Nakon toga definiramo varijablu TrenutnaSlika i postavljamo u početnu vrijednost nula. Postavljamo je na nula jer prvoj slici u polju pristupamo sa PoljeSlika[0]. Od početnih varijabli moramo postaviti i varijablu koja će pokazivati koliko ima slika u polju. Za to smo definirali varijablu BrojSlika u koju smo sa funkcijom PoljeSlika.length pridodali broj slika u polju. Do sada imamo postavljene samo početne vrijednosti. Sada idemo na JavaScript funkciju Izmjena() koja će mijenjati slike u baneru.

Da bi ova funkcija mogla mijenjati slike moramo imati više od jedne slike u polju. To provjerava prvi if() uvijet. Ako Ima više od jedne slike onda povećaj TrenutnaSlika za jedan te provjeri da li smo došli do kraja polja slika (drugi if() uvijet). Ako smo došli do zadnje slike vrati TrenutnaSlika na 0 tj. na prvu sliku u polju. Red koda koji kaže pregledniku koju sliku da prikaže je:



document.getElementById("baner").src = PoljeSlika[TrenutnaSlika];



Ovdje vidimo kako se pristupa slici i njezinom atributu src. Taj atribut jednostavno promijenimo i preglednik će prikazati tu sliku. Nakon što smo promijenili sliku ovu potrebno je pozvati ponovno ovu funkciju nakon nekog vremena. Ovdje koristimo kod:


setTimeout("Izmjena()", 5000);


Ova funkcija će pozvati Izmjena() nakon 5 sekundi tj. 5000 mili sekundi. I sa ovim kodom se stalno vrtimo u krug po polju i prikazujemo slike iz polja.

Na kraju nam ostaje još da napravimo kod koji ide u <body> dio HTML stranice i koji prikazuje sliku.



<img src="10.png" id="baner" name="baner" alt="Rotacijski baner" />

<script language="Javascript" type="text/javascript">
Izmjena();
</script>

Prvi red koda je ustvari naš baner u kojem mijenjamo slike iz polja. Ispod njega se nalazi kod koji pri učitavanju stranice prvi put pozove Izmijeni() funkciju. Nakon prvog poziva ove funkcije ona nastavlja samu sebe pozivati svako 5 sekundi. Pogledajmo kako ovaj cijeli kod funkcionira:

Dinamički promijenite veličinu slova

Skoro svi webmaster-i pokušavaju što više udovoljiti svojim čitateljima i napraviti web lokaciju koja svima odgovara. Naravno da je nemoguće svima udovoljiti, a da se ne odreknete nekih principa. Jedna od stvari koje lako možemo prilagoditi je veličina slova. Na ovaj način će svaki korisnik moći sam podesiti odgovarajuću veličinu koja upravo njemu odgovara. U ovom tutorijalu iskoristit ćemo JavuScript.

Odmah na početku vidimo da će biti potrebne dvije funkcije. Jedna za povećavanje, a druga za smanjivanje veličine slova. Ove dvije funkcije ćemo staviti u head dio HTML dokumenta.



<script type="text/javascript">

var minvalue = 6;
var maxvalue = 20;
var changeby = 2;

function povecajfont()
{


var i = parseInt(document.getElementById('div_clanak').style.fontSize);

i = i + changeby;

if (i <= maxvalue)
{
document.getElementById('div_clanak').style.fontSize = i;
}

}

function smanjifont()
{

var i = parseInt(document.getElementById('div_clanak').style.fontSize);

i = i - changeby;

if (i >= minvalue)
{
document.getElementById('div_clanak').style.fontSize = i;
}

}


</script>





Na početku skripte definirali smo varijable koje trebate podesiti po vlastitoj želji. Odnose se na minimalnu i maksimalnu veličinu te na promjenu vrijednosti po kliku. I jedna i druga funkcija imaju ovaj dio koda:



document.getElementById('div_clanak').style.fontSize


Pomoću njega pristupamo veličini slova u elementu div_clanak. Nakon toga koristimo funkciju parseInt(). Vrijednost fontSize iznosi npr. "14px". Nama je potreban samo broj bez zadnjeg dijela "px". Ova funkcija nam jednostavno izvuče broj iz ovoga niza znakova. Nakon što imamo broj jednostavno povećamo ili smanjimo tu vrijednost u ovisnosti koju smo funkciju pozvali.

Pogledajmo i dio koji ide u body dio:



<a href="javascript:povecajfont();">
<img src="add.gif" border="0">
</a>

<a href="javascript:smanjifont()">
<img src="subtract.gif" border="0">
</a>

<div id="div_clanak" style="background-color: #bbbbbb; font-size: 14px">
Ovo je probni tekst
</div>

Tabovi na web stranicama

Sve više stranica danas koristi okvire sa tabovima. Ovo je posebno popularno na stranicama koje imaju veliki broj informacija na jednoj stranici. U ovom tutorijalu ćemo i vama pokazati kako napraviti okvir sa tabovima. Za ovaj kod potrebno je znati osnove CSS-a te JavaScript jezik. Pošto svi znamo što su tab-ovi nemamo mnogo teorije za objašnjavati pa krenimo sa kodom. Najprije napišimo JavaScript funkcije koje ćemo koristiti. Ovaj kod stavljamo u head dio.



<script type="text/javascript">

var tabs=3;//Postavite broj tabova


function mouseOverTab(i){
var n=i.substring(i.length-1,i.length);
var tab_body_display=document.getElementById("tab"+n).style.display;
if(tab_body_display=="none"){
document.getElementById(i).style.borderBottomColor="white";
}
}

function mouseOutTab(i){
var n=i.substring(i.length-1,i.length);
var tab_body_display=document.getElementById("tab"+n).style.display;
if(tab_body_display=="none"){
document.getElementById(i).style.borderBottomColor="gray";
}
}

function tabClick(i){

var n=i.substring(i.length-1,i.length);
n *=1;
for(var j=1;j<=tabs;j++){
if(n!=j){
document.getElementById("tab_head"+j).style.backgroundColor="lightgrey";
document.getElementById("tab_head"+j).style.borderBottomColor="gray";
document.getElementById("tab_head"+j).style.cursor="hand";
document.getElementById("tab"+j).style.display="none";
}else{
document.getElementById("tab_head"+j).style.backgroundColor="white";
document.getElementById("tab_head"+j).style.borderBottomColor="white";
document.getElementById("tab_head"+j).style.cursor="default";
document.getElementById("tab"+j).style.display="inline";
}
}

}


</script>


Objasnimo malo gornji kod. Postoje tri stanja tab-ova koja moramo posebno procesirati. Kada miš tek dođe iznad taba poziva se funkcija mouseOverTab(i). Ona jednostavno promijeni boju donjeg ruba taba iznad kojeg se nalazi miš. Tako korisnik zna da može kliknuti na ovaj tab. Ako je miš iznad aktivnog taba onda se neće ništa dogoditi jer je tab već aktivan i klikom na njega se neće ništa promijeniti u prikazu.

Kada maknemo miš izvan taba potrebno je vratiti sve na prijašnje stanje. Tada pozivamo funkciju mouseOutTab(i). Ona promijeni boju donje linije u sivu, tj. vrati sve na početno stanje.

Kada korisnik klikne na određeni tab u tom trenutku poziva funkciju tabClick(i). Ova funkcija mora proći kroz sve tabove te ih bojom označiti kao neaktivne, a onaj tab na koji smo kliknuli obojiti bijelom bojom i promijeniti mu donji rub u bijelu boju. Zbog ove funkcije je važno na početku definirati broj tabova u redu var tabs=3;. Tako će ova funkcija znati koliko tabova treba procesirati.

Sada pogledajmo potreban CSS kod koji također ide u head dio naše stranice.


<style>

.tab_head{
position:absolute;
cursor:hand;
top:5px;
height:25px;
width:90px;
text-align:center;
border:2px solid gray;
background-color:LightGrey;
}

.tab_body{
display:inline;
padding:5px;
position:absolute;
top:28px;
left:10px;
width:100%;
border: 2px solid Gray;
}

</style>



Ovim kodom smo definirali izgled tabova (tab_head) te izgled dijela u kojem ispisujemo sadržaj tabova (tab_body).

Ostaje nam još da u body dijelu napravimo same tabove pomoću div elemenata.




<div style="width:400px;position:relative">



<div id="tab1" class="tab_body" style="display:inline;">
Ovo je tab 1 <br>
</div>

<div id="tab2" class="tab_body" style="display:none;">
Ovo je tab 2 <br>
Ovo je tab 2 <br>
</div>

<div id="tab3" class="tab_body" style="display:none;">
Ovo je tab 3 <br>
Ovo je tab 3 <br>
Ovo je tab 3 <br>
</div>


<div id="tab_head1" class='tab_head'
style="left:10px;border-bottom-color:White;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab1
</div>

<div id="tab_head2" class='tab_head'
style="left:98px;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab2
</div>

<div id="tab_head3" class='tab_head'
style="left:186px;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab3
</div>

<script language="JavaScript">
tabClick('tab_head1');
</script>

</div>




Najprije smo definirali zajednički okvir u kojem ćemo definirati tabove i nazvali ga okvir_tabova. Zatim smo definirali sadržaj tabova. Svaki sadržaj taba ima svoj div i mora imati id tab1, tab2, tab3, tab4 itd.

Na kraju definiramo i same tabove na koje će korisnik kliknuti. Ovdje također morate pripaziti da id div elementa ima vrijednost tab_head1, tab_head2, tab_head3, tab_head4 itd. Osim toga, ovi div elementi nose i akcije koje će pozvati naše funkcije u JavaScript-u. Iz koda vidimo da, kada korisnik dođe mišom iznad div elementa, onmouseover poziva funkciju mouseOverTab(this.id). Kada smo maknuli pokazivač miša izvan div elementa onmouseover poziva funkciju mouseOutTab(this.id) te kada klinemo na div element poziva se funkcija tabClick(this.id). Sam sadržaj div elemenata predstavlja naslov taba.

Dinamičko generiranje izbornika

Da ilustriramo snagu dinamičkih promjena na web stranicama pogledajmo kako napraviti izbornik koji se dinamički mijenja ovisno o korisnikovom izboru. Izbornik će prikazati korisnikov odabir tako što će promijeniti izgled odabranog linka.

Skripta će prikazati izbornik sa pet mogućih odabira. Podatak ćemo prenijeti preko URL adrese te ga pročitati i napraviti odgovarajuću akciju.



<script language="JavaScript">

var choice = 0;
var urlParts = document.URL.split("?");

if (urlParts.length > 1)
{
var parameterParts = urlParts[1].split("&");

for (i = 0; i < parameterParts.length; i++)
{

var pairParts = parameterParts[i].split("=");
var pairName = pairParts[0];
var pairValue = pairParts[1];

if (pairName == "choice")
{
choice = pairValue;
}
}
}

</script>



Gornji kod stavite u body dio web stranice. Pogledajmo detaljnije gornju funkciju.


var urlParts = document.URL.split(“?”);


U ovo polje smještamo dio URL adrese u kojem su zapisani podaci koje ćemo koristiti.


if (urlParts.length > 1)


Sa prvim IF provjeravamo da li stvarno postoje podaci koje treba pročitati.


var parameterParts = urlParts[1].split("&");


U polje parameterParts smještamo sve podatke koji se nalaze u adresi.


for (i = 0; i < parameterParts.length; i++)


Sa FOR petljom prolazimo kroz sve podatke i tražimo onaj koji nas zanima, a to je choice. Kada njega pronađemo, vrijednost smjestimo u JavaScript varijablu choice.

Na kraju još ostaje da napravimo izbornik koji će se dinamički mijenjati ovisno o upravo dobivenoj varijabli choice. Taj dio ćemo jednostavno napraviti preko IF funkcije.



<script>

if (choice == 1)
{
document.write("<strong>Izbornik 1</strong><br>");
}
else
{
document.write("<a href='index.php?choice=1'>Izbornik 1</a><br>");
}

if (choice == 2)
{
document.write("<strong>Izbornik 2</strong><br>");
}
else
{
document.write("<a href='index.php?choice=2'>Izbornik 2</a><br>");
}


if (choice == 3)
{
document.write("<strong>Izbornik 3</strong><br>");
}
else
{
document.write("<a href='index.php?choice=3'>Izbornik 3</a><br>");
}

if (choice == 4)
{
document.write("<strong>Izbornik 4</strong><br>");
}
else
{
document.write("<a href='index.php?choice=4'>Izbornik 4</a><br>");
}

if (choice == 5)
{
document.write("<strong>Izbornik 5</strong><br>");
}
else
{
document.write("<a href='index.php?choice=5'>Izbornik 5</a><br>");
}


</script>



Gornji kod postavite u body dio web stranice na poziciju gdje će se izbornik prikazivati. Pogledajmo pobliže gornji kod. Za svaki link postoji jedna if-else petlja. Ako je choice varijabla postavljena baš na taj broj linka onda će se naziv linka podebljati i više neće biti link nego obični tekst. Ako varijabla nije od toga broja onda će prikazati link izbornika. I tako ide za svaku stavku izbornika. U ovom slučaju promjena je samo podebljanje slova. Vi možete napraviti bilo kakvu promjenu koristeći HTML tagove. Pogledajmo na kraju cjelokupan kod koji ćete staviti u body dio HTML-a.

Resize slike prema veličini preglednika - JavaScript

Prilagođavanje slike veličini internetskog preglednika ne koristimo baš svaki dan, ali postoje situacije kada nam je to baš potrebno. U ovom tutorijalu vam donosimo JavaScript rješenje koje će uvijek držati sliku 100% raširenu u prozoru preglednika. Kod stranice je jako jednostavan:


<html>
<head>
<script language="javascript">
function ScaleSize()
{
document.getElementById("slika").style.width=document.body.clientWidth;
document.getElementById("slika").style.height=document.body.clientHeight;
}
</script>
</head>
<body onload="javascript:ScaleSize();"
onresize="javascript:ScaleSize();">
<img id="slika" src="Test.jpg" />
</body>
</html>


Za početak nam je potrebno da znamo kolika je veličina samog prozora preglednika. Tu informaciju ćemo dobiti preko document.body.clientWidth i document.body.clientHeight. Kada imamo ove informacije potrebno ih je dodijeliti slici koja se prikazuje u prozoru. Upravo zato imamo ova dva reda koda:


document.getElementById("slika").style.width=document.body.clientWidth;
document.getElementById("slika").style.height=document.body.clientHeight;


To je sve što radi ova funkcija koja se nalazi u head dijelu HTML dokumenta. Slici pristupamo preko njenog id-a. Moramo se upoznati sa još jednom mogućnošću, a to je stavljanje onresize eventa u body tag. Na taj način će se ova funkcija pozivati kada se god promijeni veličina prozora. Da bi isprobali gornji kod kliknite na link i probajte mijenjati veličinu prozora.

Jednostavni Tooltip box - JavaScript

Ovo je jedna od onih stvari koje se uvelike koriste na današnjim Internet stranicama. U malom tekstualnom okviru prikazati važne podatke, naslove, upute našim korisnicima. Naše rješenje je jednostavno i učinkovito te ga možete lako unaprijediti i prilagoditi vlastitim potrebama. Prvo napišimo JavaScript kod koji ćemo staviti u head dio.

Kod:

<script language="javascript">

var Tips = new Array();

Tips[0] = "Prvi tooltip na vašoj stranici";
Tips[1] = "Kako je lako napraviti ovaj box!";
Tips[2] = "Jednostavno kao Copy/Paste!";

var trenutnitooltip = Math.ceil(Math.random() * Tips.length) - 1;

function next_tooltip()
{

trenutnitooltip = trenutnitooltip + 1;

if (trenutnitooltip > (Tips.length - 1))
{
trenutnitooltip = 0;
}

document.getElementById('text_tooltip').innerHTML = Tips[trenutnitooltip];
}

</script>

Pogledajmo detaljnije gornji kod. Prvo definiramo novo polje Tips u koje ćemo upisivati poruke. Ovo polje ćemo napraviti kao dinamičko tako da možemo dodati poruka koliko god želimo. Odmah ispod definicije polja upisujemo poruke u polje. Poruke upisujemo jednu ispod druge radi preglednosti te povećavamo broj koji definira mjesto poruke u polju počevši od 0 pa naviše.

Za naš primjer potrebno je da znamo na kojoj smo poruci i zbog toga definiramo varijablu trenutnitooltip i u nju smještamo slučajno odabrani broj poruke koju ćemo prvu prikazati. Za dobivanje slučajnog broja između 0 i 1 koristimo funkciju Math.random te je množimo sa dužinom polja da dobijemo brojeve između 1 i maksimalnog broja u polju.

Sada dolazi jednostavna funkcija koja u će u div element ispisivati odabranu poruku te će nakon svakog poziva prikazati sljedeću poruku u redu. Kada dođemo do kraja ova će funkcija resetirati brojač te ga vratiti na nulu i tako početi prikazivati poruke ispočetka. Sada pogledajmo body dio stranice.

Kod:

<div id="naslov_tooltip"
style="width:200px; background-color: #e36731;padding:5px;
border: solid 1px #e36731;">
Tips & Tricks
</div>

<div id="tooltips" style="width:200px; background-color: #dadada;
padding:5px;border: solid 1px #e36731;">

<div id="text_tooltip">
<script>document.write(Tips[trenutnitooltip]);</script>
</div>

<p align="right">
<a href="javascript:next_tooltip();">
Sljede&#263;i
</a>
</p>
</div>

Ovdje radimo samo dvije stvari. Prva je da se pri otvaranju stranice odmah ispiše početni sadržaj u naš box. A druga je link koji prikazuje sljedeću poruku. Sa funkcijom document.write ispisujemo početnu poruku. Klikom na link Sljedeći poziva se naša funkcija next_tooltip() te se u naš okvir ispisuje sljedeća poruka prema već definiranom pravilu u funkciji. Ovaj box naravno prilagodite vašoj stranici, promijenite boje, promijenite vrstu i veličinu slova, itd., ali osnovu imate.