Izrada WEB Sajtova - Tutorial za pocetnike + Vezbe

**MiljanX** · 01-01-2012 22:06

Ako znate da pravite Web sajtove, nemojte da citate ovaj tutorial. Za pocetnike, kada sve ovo naucite i provezbate, bice te sposobni da napravite jednu lepo web stranicu.
U ovom tutorialu cu vas ukratko voditi kroz CSS (Cascading Style Sheets) i HTML (HyperText Markup Language)
Bilo da je ovaj tutorial pocetak vase profesionalne buducnosti Web Dizajna ili samo kao vas hobi, ako ste pocetnik dosta mozete nauciti.

Osnove,

HTML - (HyperText Markup Language) - Jezik koji je posebno namenjen izradi Web Sajtova. Najnovija verzija je XHTML (eXtensible HTML), u sustini je jezik samo sa strozijim pravilima. HTML i XHTML zajednickim imenom nazivamo (X)HTML. (X)HTML nije programerski jezik to je jezik za oznacavanje tj. opisivanje.

CSS - (Cascading Style Sheets) - Jezik pomocu kog se definise izgled Web Stranice. HTML i CSS uvek idu zajedno. Tj. ne mogu jedno bez drugog. Neki jezici kao sto su JavaScript, PHP nisu obavezni ali ako zelite da se bavite profesionalnim web dizajniranjem moracete i to jednom da naucite.

(X)HTML i CSS su laki za ucenje. Ali ima jedna sveta stvar - Ideja . Za svaki dobar sajt je potrebna dobra ideja. Tako da prvo treba napraviti skicu sajta.
Kako najlakse napraviti skicu sajta ? Uzmete papir i olovku u ruku i nacrtate kako u vasoj glavi izgleda sajt koji bi ste vi zeleli da napravite. Profesionalni Web Dizajneri za to koriste PhotoShop (O kome cu pricati neki drugi put, ali u ovom tutorialu cu ga samo spomenuti.) ... Pocetnici ! Nemojte da mislite da je smesno i ne obracajte paznju sta ce drugi clanovi ovog foruma da pisu ali za pocetak papir i olovka u ruke i tu pravite skice sajta. PhotoShop cete morati da naucite. Ali ne odma.

Da li ste zakasnili sa ucenjem ?
Odgovor je lak. Naravno da niste. To da li imate 20 godina ili 10 godina za Web Dizajn nije bitno. Znaci ako imate volje, mozga i zelju... Mozete da pocnete i sa 10 godina da ucite Web Dizajn. Uvek sam govorio (Sto ranije to bolje) zato sto cete brze postati ono sto zelite

Gde pisete vas (X)HTML sajt ?
Za pocetak vam ne treba nista vise od Notepada. Znaci idete na Start -> All Programs -> Accessories -> Notepad . Ja iskreno pisem sajt u notepadu...

Kako snimiti (X)HTML dokument ?
U notepadu to radite veoma lako. Znaci kada napisete vas dokument kliknete na: File - > Save as i samo sacuvate sa nastavkom .html. Znaci stavite npr. naziv: sajt.html.

Osnovno - Nemojte da mislite da vi sve ovo morate da ucite na pamet. Znaci idite u My documents i napravite folder: Web Design i tu zapisujte sve atribute i njihove opise. I onda kad pravite web sajt samo se odatle sluzite. Znaci ovo netreba da se uci napamet.. Za pocetak radite ovako pa cete videti kako ce vam koamnde same uci u glavu vremenom.

(X)HTML Osnove. Da napomenem, sve sto ovde procitate uradite i vi na vasem racunaru. Znaci sve stavite na test.

Svaki sajt pocinje sa <html> i zavrsava se sa </html> Evo vam mala skica kako izgleda pocetak svakog sajta:

Code:

<html>  
    <head>
          <title></title>
     </head>
<body>

</body>
</html>

Element <head> je u prevodu glava sajta. Tu ubacujemo CSS dokument (objasnicu kasnije), JavaScript dokument i sve ostalo. U element head nedodje sadrzaj sajta.
Elemnt <title> Je naslov sajta. Primer kako se pise: <title>KGB Hosintg</title> .

U element <body> dodje sav sadrzaj sajta. Znaci tu se nalazi sav tekst koji ce pisati na vasem sajtu kad ga otvorite i web pretrazivacu. Morate da zapamtite da vas sajt nece izgledati isto u svakom pretrazivacu.

Oznacavanje teksta
- U ovom poglavlju naucicu vas kako da oznacite velicine teksta i ostalo. Necu dugovlaciti kao na pocetku vec cu samo da dam primer i da dam opis elementa.

<p> </p> - pasus (ili prelazak u novi red)
<b> </b> - Podebljana slova
<strong> </strong> - Podebljana slova. Isto ko i za b.
<h1> </h1>,<h2> </h2>, <h3> </h3> - Velicina slova (h1 je najveca pa onda ide nanize)
<li></li> - Tacka ispred teksta
<big></big> - Malo veci tekst od uobicajenog (Ova komanda je izasla iz upotrebe)
<center></center> - Pise tekst na centru ekrana
<s></s> - Precrtani tekst.
<small></small> - Cini tekst malo manjim od obicne velicine (Ova komanda je izasla iz upotrebe)
<em> - Krivi *istice* neki teskt
<q> - Stavlja tekst u navodnike

Evo jednog primera sa gore navedenim atributima koji cete vi na vasem PCu sada probati u notepadu:

Code:

<html> 
      <head>
               <title>KGB Hosting</title>
      </head>
<body>

   <center><h1>KGB Hosting</h1></center> 
<p> Ovo je sajt <b>KGB Hostinga</b> i mi se bavimo prodajom <em>Game Servera</em>. Jedna igrica sa najprodavanijim serverima je <strong>Counter Strike</strong></p>

<p>Uskoro otvaramo i <s>Game Store</s></p>

</body>

</html>

Sada cu vam pokazati nekoliko elemenata za oznacavanje teksta. To su: <ul> , <ol> i <dl>. Ovako ih zapisujemo.

Code:

<ul>                                            
     <li>Neki tekst</li>                 
     <li>Neki tekst</li>                            
</ul>

Otvorite ovo u Web pretrazivacu i videte da ima tacke ispred teksta.

Code:

<ol>                                            
     <li>Neki tekst</li>             
     <li>Neki tekst</li>                              
</ol>

Otvorite u web pretrazivacu i videte da se brojevi redjaju od 1 pa na gore. To naravno moze da se promeni ako stavite npr:

Code:

<ol start="15"> 
     <li>Neki tekst</li>             
     <li>Neki tekst</li>                              
</ol>

Onda ce krenuti brojanje od 15.

Code:

<dl>                                          
     <dt>Neki tekst</dt>               
     <dd>Neki tekst</dd>             
</dl>

Ako otvorite ovaj tekst u Web Pretrazivacu videcete da imamo jedan naslov i onda tekst unutar naslova.

Ajde sada da provezbamo ovo sto smo sada naucili:

Otvorite sledeci kod u web pretrazivacu i pogledajte sta ste dobili:

Code:

<html> 
      <head>
               <title>KGB Hosting</title>
      </head>
<body>

   <center><h1>KGB Hosting</h1></center> 
<p> Ovo je sajt <b>KGB Hostinga</b> i mi se bavimo prodajom <em>Game Servera</em>. Jedna igrica sa najprodavanijim serverima je <strong>Counter Strike</strong></p>

<p>Uskoro otvaramo i <s>Game Store</s></p>
<p>U ponudi imamo:</p>
<ul> 
     <li>Counter Strike 1.6 servere</li> 
     <li>Call Of Duty servere</li> 
     <li>SAMP servere</li> 
</ul>

<p>Neki nasi serveri su:</p> 

<ol start="3"> 
     <li>KGB Alfa</li>             
     <li>KGB DeathMatch </li>                              
</ol>

</body>

</html>

To je to sto se tice teksta. Sada prelazimo na dodavanje veza. Zasta ovo ustvari sluzi ? Ovo sluzi da kada kliknete na neki tekst/sliku/ili nesto drugo da vas prebaci na neki drugi sajt ili neki drugi deo strane ili nesto drugo.

To postizemo ovako:

Code:

<a href="http://www.facebook.com/">Idi na facebook</a>

Sa ovom komandom smo postigli da kada kliknemo na tekst Idi na facebook da smo skocili na www.facebook.com

Dodavanje slika.

Sigurno ne zelite da vasa web strana bude samo sa tekstom vec i sa slikama ? Pa evo kako da dodate te slike. Prvo sto cu da napomenem da slike za pocetak stavljate u isti fajl gde se nalazi i .html dokument
Sliku dodajte ovako:

Code:

<img src="slika.png" alt="" /> 
ili
<img src="link_slike" alt="" />

Znaci ako zelite da koristite ovaj drugi nacin (Sto je los nacin) onda odete na slike.milf-cs.info i lepo uplodujete sliku i samo postavite link slike. Kako da postavite da se slika nalazi u folderu images ? Lako. Napravite folder images u istom folderu gde se nalazi vas .html dokument i onda ovako postavite sliku:

Code:

<img src="images/slika.png" alt="" />

Zasta sluzi alt="" ?
Ja tu nisam stavio trenutno nista. Ali alt sluzi da ako se slika ne ucita da se pojavi tekst koji se nalazi izmedju navodnika ("")

Vezbanje.

Otvorite sledeci kod u web pretrazivacu:

Code:

<html> 
      <head>
               <title>Slike</title>
      </head>
<body>

<a href="http://www.kgb-hosting.com/">Ovde kupujete najkvalitetnije servere</a>
<a href="http://www.kgb-hosting.com/"><img src="nekaslika.png" alt="stavite neku vasu sliku" /></a>

</body>

</html>

Za (X)HTML cu objasniti jos jednu stvar da bi smo sto brze presli na CSS. Ova jedna stvar je najvaznije. To su genericki elementi DIV I CLASS !
Za ova dva elemnta cemo vise nauciti kad budem pisao o CSS-u ali evo sacu ukratko da stavim.
Da bi ste neki deo mogli da pozovete u CSS dokumentu treba ga staviti u neki div.

Evo primer:

Code:

<html> 
      <head>
               <title>DIV I CLASS</title>
      </head>
<body>

<div id="header">
         <div class="slikahedera>
         </div> 
   <div id="navigacija">
   </div> 
</div> 

</div> 

</body>

</html>

Nema potrebe da otvarate ovo u web pretrazivacu zato sto nista necete dobiti. Znam da je malo teze da se shvati div i class. I meni je trebalo vise vremena ali shvaticete ga. Ja cu probati najbolje da ga objasnim sto mogu. Znaci, elemnt class je kao dete od elemnta div. Ovo sve stavljamo u divove i classove da bi smo ih lakse opisali u CSS-u. Znaci mi smo mogli da napisemo to i bez divova i classova ali onda neb smo mogli u cssu lako. A bez css-a nema ni dobre stranice.

Znaci za pocetak je dovoljno da znate samo ovo, a kad budem pisao o opisima stilova shvaticete div i class.

**MiljanX** · 01-01-2012 22:07

Sada napokon da predjemo na CSS. Necu se vise zadrzavati na HTML-u zato sto ono sto znate je dovoljno... Mozda malo kasnije dodam i tabele. Ali tabele vam i nisu toliko potrebne. Ja iskreno nikad do sad nisam tabele koristio u HTML-u.

Znaci, na pocetku sam napisao sta je to CSS,a ovde cu reci jos samo jednu stvar. TO su Opisi stilova. Sa CSS-om mi opisujemo ono sto napisemo u HTML-u.

Kako da povezem HTML fajl i CSS fajl?
Za ovo pitanje postoji nekoliko odgovora

1. Odgovor:

Izmedju elemnta <head> napisete sledece:

Code:

<link rel="stylesheet" href="styles.css" type="text/css" />

I onda napravite novi fajl koji mora da ima nastavak .css i mora da se zove onako kako vi napisete u href="", u ovom slucaju to je styles.css i obicno se tako i zove.

Evo primer kako se on pise:

Code:

<html> 
       <head> 
                <title>Naslov</title>
        <link rel="stylesheet" href="styles.css" type="text/css" />
       </head>
<body>

</body>

</html>

Kad ovako napisete onda sve opise stilova pisete u styles.css i tako vam je i HTML fajl prazniji.. (Ovaj nacin se najvise i koristi).

2. Odgovor

Vi mozete vas opis stila da pisete i direktno u HTML dokumentu. Znaci ovim ce vam i HTML dokument biti dosta duzi ali se i ovaj nacin jako cesto koristi. Ja cesto koristim ovaj nacin zato sto mi je lakse kad mi je sve na jednom mestu. I ovaj nacin se dodaje izmedju elementa head.
Znaci ovako:
<style type="text/css">

/* Ovde dodje opis stila */

</style>

Vas opis stila dolazi izmedju <style> i </style>

I to izgleda ovako:

Code:

<html> 
       <head> 
                <title>Naslov</title>
        <style type="text/css">

                 /* Ovde dodje opis stila */ 

        </style>
       </head>
<body>

</body>

</html>

Postoji i 3. nacin ali on se ne koristi i veoma je los. Znaci samo jedan od ova dva koristite.
Sada da predjemo na osnove. Prvo cu vam objasniti kako da obojite pozadinu. Posto je body ceo sadrzaj naseg sajta. Ovako cemo napisati u CSS dokumentu.

Code:

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

Sto bi izgledalo ovako: - Otcorite ovaj tekst u web pretrazivacu i videcete da je cela pozadina crvene boje.

Code:

<html>
                <head> 
                          <title>Naslov</title>
       <style type="text/css">
      body { 
        background-color:  red;
      }
       </style>
               </head>
<body>

</body>
</html>

Boje mozemo da menjamo na tri nacina. Boje birate ovde: http://www.os-klinca-sela.skole.hr/kodoviboja.htm
1. Nacin je nacin koji sam gore prikazao (Taj nacin se malo manje koristi.)
2. Nacin je da koristite RGB boje. R - Red, G - Green, B - Blue i to ovako piste u opisu stila: background-color: rgb(boja,boja,boja); npr. background-color: rgb(255;64;64); i onda ce boja sajta biti crvena (Ovaj nacin se isto malo manje koristi.
3. Nacin se najvise koristi. To je tz. RGB Hex ili #xxxxxx ovako se pise: background-color: #xxxxxx; evo i primer: background-color: #000000;

Na gore navedenom sajtu imate sva tri nacina za koriscenje. Ali boje se najcesce uzimaju iz PhotoShopa.

Vezbanje:

otvorite ovaj kod u web pretrazivacu:

Code:

<html>
                <head> 
                          <title>Naslov</title>
       <style type="text/css">
      body { 
        background-color:  red;
      }
       b {
       color: blue; 
       background-color: yellow;
       } 
       </style>
               </head>
<body>

<b>Zdravo, ja sam Miljan svi me znate ;)</b> 

</body>
</html>

Sada cu da navedem sve komande za boje i pozadine, a onda cemo imati malu vezbu

width: 100px; - Sirina elementa
height: 100px; - Visina elementa

color: ime boje; - Bojimo tekst.

Nekoliko korisnih izgleda teksta: (Ja sam sve stavio u jedan red, inace to nema veze

Tj. nema veze da li se u Html-u pisati u jednom redu ili preskakati i to

T0 se radi samo radi preglednosti.)
body { font-family: Verdana, sans-serif }
body { font-family: Snell, cursive }
body { font-family: Mojo, fantasy }
body { font-family: Impact, fantasy }
body { font-family: Stencil, fantasy }
body { font-family: Apple Chancery, cursive }
body { font-family: Comic Sans, cursive }
body { font-family: Arial Black, sans-serif }
body { font-family: Georgia, serif }
Izgled teksta uvek dolazi u body { }

margin-left: 10px; - Margina se postavlja sa leve strane stranice i na tom delu ne moze da se pronadje nikakav tekst. Tj. pravi razmak od krajeva stranice
margin-right: 10px; - Margina se postavlja sa desne strane stranice i na tom delu ne moze da se pronadje nikakav tekst. Tj. pravi razmak od krajeva stranice
margin-top: 10px; - Margina se postavlja na vrh stranice i na tom delu ne moze da se pronadje nikakav tekst. Tj. pravi razmak od krajeva stranice
margin-bottom: 10px; - Margina se postavlja na dno stranice i na tom delu ne moze da se pronadje nikakav tekst. Tj. pravi razmak od krajeva stranice
VAZNO:
U body { stvljate uvek margin: 0; posto postoje neki pretrazivaci koji automatski stavljaju marginu sa svih strana stranica na nekoliko px.

font-size - Velicina teksta. Koristimo ga da promenimo velicinu teksta. Vrednost najcesce zadajemo u pikselima (font-size: 15px; ) - Primer.
h1 { font-size: xx-small; } - Jako mala slova
h1 { font-size: x-small; } - Malo vece od xx-small
h1 { font-size: small; } - Malo veca slova od x-small
h1 { font-size: medium; } - Malo veca slova od small
h1 { font-size: large; } - Malo veca slova od medium
h1 { font-size: x-large; } - Malo veca slova od large
h1 { font-size: xx-large; } - Malo veca slova od x-large
h1 { font-size: 150%; } - Oznacavanje teksta u procentima
h1 { font-size: 1.5em; } - Isto jedan dobar nacin za menjanje

line-height: 2; - Ova komanda pravi razmak izmedju teksta. Koristi se najcesce kada pravimo navigacije. (Meni sajta)

text-decoration: none; - Koristimo da sklonimu svu default dekoraciju sa teksta.
text-decoration: underline; - Linija ispod teksta
text-decoration: overline; - Linija iznad teksta
text-decoration: line-through; - Linija preko teksta

text-align: center; - Ispisuje tekst u sredini ekrana.

Vecinu ovih ovde komandi niste razumeli ovako kad vam ih napisem ali sada u vezbanju koje sledi razumecete sve i u ovom vezbanju cete shvatiti div i class elemente

Ali prvo moram nesto da napisem o njima.. Znaci, svaki element koji pocinje sa <nesto> i zavrsava sa </nesto> se u opisu stila pise kao: nesto { opis stila; }, a sa div i class je malo drugacije. Posto dvi elemnt oznacavamo ovako: <div id="imeelementa"> i zavrsvamo ga sa </div> . Njega u opisu stila ovako oznacavamo: #imeelementa { opis stila } znaci umesto elementa div dodje # (taraba) a posle tarabe se pise ono sto dolazi u id="".
Kod class je veoma slicno. Ako je naprimer elenet: <div class="imeelmenta"> i zavrsava se sa </div> . Onda ce u Opisu stila samo umesto tarabe doci tacka.
Znaci ovako bi se to opisalo: .imeelmenta { opis stila; } . Znaci kod class umesto div-a ide tacka.

I jos jednu stvar da napomenem. Ako se npr. neki drugi elemnt kao sto je <h1> nalazi u div elementu sa nazivom: trta. Onda da bi smo menjali npr boju h1 elemnta mi moramo da dodjemo do tog elemnta. Onda cemo ovako da pisemo u CSS-u: #trta h1 { color: blue; } . Znaci kao da je h1 dete od diva trte.. Shvativete isto u vezbi koja sada sledi.

Da predjemo na vezbu. Otvorite ovo u web pretrazivacu:

Code:

<html> 
       <head>
               <title>Naslov</title>
<style type="text/css">

body { 
    background-color:yellow;
    margin: 0;
    padding: 0;
}

#header {
    width: auto;
    height: 70px; 
    background-color: red; 
}

#navigacija {
margin-left: 100px;
} 


#navigacija a {
    color: white;
    text-decoration: none;
    line-height: 5; 
    padding: 27px; 
    font-size: 17px; 
    text-align: center;
} 

</style
       </head>
<body>

<div id="header">
  <div id="navigacija">
     <a href="#">Home</a> 
     <a href="#">About</a> 
     <a href="#">Forum</a> 
     <a href="#">Contact</a> 
  </div>
</div>

</body>

</html>

Polako gledajte kod i shvaticete mnogo stvari.

nastavak u sledecem postu.

**LeadeR** · 01-01-2012 22:13

To je taj momak koji uvek pomaze

Bravo....

**MiljanX** · 01-01-2012 22:14

Sada da predjemo pozadine u slikama:

Znaci pozadina se moze zadati ne samo u boji vec i u slici. Sada cu da navedem opise stilova stvorene za to.

body { background-image: url(slika.jpg); } - Ovom komandom ce cela pozadina biti u nekoj slici. Kao sto vidite, slika se ponavlja.. Sada cete nauciti kako to da popravite.
Sliku mozete da stavljate i preko background-color pa cak i u neki odeljak gde je obojena pozadina teksta.

Ovako dodajemo da se slika pojavi samo jednom, a ne da se baca po celoj stranici

Code:

body {
background-image: url(slika.jpg);
background-repeat: no-repeat; - Komanda da se slika pojavi samo jednom na stranici
}

Ovako dodajemo da se slika prostire duz cele leve strane stranice

Code:

body {
background-image: url(slika.jpg);
background-repeat: repeat-y; - Komanda da slika stoji samo vertikalno
}

Ovako dodajemo da se slika prostire na vrhu stranice

Code:

body {
background-image: url(slika.jpg);
background-repeat: repeat-x; - Komanda da slika stoji samo horizontalno
}

Pomeranje slika:

Code:

body {
background-image: url(slika.jpg);  
background-position: left bottom; - Ovom komandom ce slika stajati u donjem levom cosku. (bottom - dno, left -levo)
}

Code:

body {
background-image: url(slika.jpg);  
background-position: right center; - Ovom komandom ce slika stajati desno u centru (center - centar, right - desno)
}

Code:

body {
background-image: url(slika.jpg);  
background-position: 200px 50px; - Ovom komandom pomeramo sliku u pikselima
}

body { background-attachment: fixed; } - Sa ovom komandom slika se spusta zajedno sa stranicom. (na tockic

)

Znaci sta smo ovde naucili ?
background-image: - Dodajte sliku
background-repeat - Namesta kako ce se slika pojavljivati na stranici
background-position: - Pozicija slike.

Efekti Linka
Sada cu vas nauciti kako da napravite da kada predjete misem preko <a href> teksta, da se tekst oboji, da se promeni pozadina ili nesto drugo (Ovo se najcesce koristi za navigacije..

Znaci kada predjete misem preko teksta da bi se nesto desilo trebamo da dodamo opis stila po imenom hover. Objasnicu vam kako se on dodaje. Znaci za njega nista ne pisete u HTML dokumentu nego samo u CSS dokumentu. Ako npr. zelite da promenite da kad se predje misem preko <a href="http://www.facebook.com/">Facebook</a> da se pozadina oboji u crvenu i da tekst promeni boju u crnu iz bele. Ovako to odazovemo u CSS dokumentu. Znaci da kazemo da se <a href="http://www.facebook.com/">Facebook</a> nalazi u div header. I onda cemo to ovako da namestimo:
#header a:hover {
background-color: red;
color: black;
}

Vezbanje

Code:

<html> 
       <head>
               <title>Naslov</title>
<style type="text/css">

body { 
    background-image: url(slika.png); 
    background-repeat: no-repeat;
    background-position: center; 
    background-attachment: fixed;
}

#header img {
      background-repeat: no-repeat;  
}

</style
       </head>
<body>

<div id="header">
     <img src="slika.png" alt="" /> 
     <h1>Boris tadic</h1> 
</div>

</body>

</html>

Za ovu vezbu pronadjite neku sliku i dajte joj ime slika i format .png.

I za kraj cu da vam dam neke trikove koje nebiste umeli sami da napravite

Tj. dacu vam neke kodove.

Sneg na sajtu

Code:

<script src=http://astuforum.free.fr/js/neige_lettre.js></script>

Dodje u element <head>

Muzika na sajtu

Code:

<object width="0" height="0"><param name="movie" value="http://www.youtube.com/v/XbQGcshrAfI&hl=en_US&fs=1&&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XbQGcshrAfI&hl=en_US&fs=1&&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="0" height="0"></embed></object>

Obratite paznju na link Video klipa u codu

Ovo dolazi iznad pocetne oznake za oznacavanje css dokumenta.

I da napomenem.
- nemorate da pazite na razmake dok pisete sajt. Znaci to da li vam je sve u jednom redu ili sa razmacima uopste nije bitno

Tutorial sam ja pravio i pisao sam ga 4 sata i nemojte da mi govorite kako sam ga kopirao ! ! ! ! ! !

Kada sve ovo naucite i procitate i provezbate (nekoliko meseci potrebno) bicete sposobni da napravite vasu web stranicu

Edit tutorial.

Poziciranje

Relativno poziciranje
Ovim elementom pomeramo u tekst u odnosu na njegovo prvobntno stanje
Primer koda:

Code:

em {
position: relative;
top: 30px;
left: 60px;
background-color: blue;
}

Ovim poziciranjem ce ostati praznina na mestu sa kojeg smo pomerili neki tekst
(Nekoristi se vise toliko relativno poziciranje)

Apsolutno poziciranje
Primer koda:

Code:

em {
position: absolute;
top: 30px;
left: 60px;
background-color: blue;
}

Sada primecujemo da za razliku od relativnog poziciranja. Tekst se baca i preko ostalih sadrzaja stranice

BORDER - Ivice.

Ivice okvira:
Ivice okvira zadajemo sledecim komandama:

Code:

border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

A ovo su vrednosti:
none - nema okvira
solid - samo ravna crta kao u gore primerima
double - dupla linija
dotted - Isprekidana linija (Tackice)
dashed - Isprekidana linija (Linije -)
groove - Sivi okvir (Manje vidljiv)
ridge - Sa jedne strane okvira je do kraja ivice linija, a sa druge strane okvira je malo dalje od ivice linija
inset - 3D okvir 1
outset - 3D okvir 2

Sledeci elementi sluze za debljinu ivice:

Code:

border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 12px;

Elementi za ivicu

Code:

border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

Sledeci elementi sluze za menjanje boje ivica

Code:

border-top-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-left-color: blue;

Naravno sve mozemo napisati skraceno.
border: 1px dashed #F26521;

Skraceno pisanje.
Sve u CSS-u moze da se napise skraceno... Primer: background. Imamo ih nekoliko: background-position, background-color, background-image, bakcground-attachment. Sve mozemo da ih napisemo skraceno tako sto cemo staviti samo: background: i onda nabrajati sve sto nam treba... Isto ovo vazi i za border.

**MiljanX** · 01-01-2012 22:16

Nadam se da ce svim pocetnicima pomoci ovaj tutorial. Ali sada posto sam objasnio mnogo toga. Dolazi finalna vezba i nju cu u ovom postu sada da postavim.. Ovo sam prvo stavio na MILF. A sad i na KGB

Znaci, uzmite ovaj kod i kopirajte ga u notepad, zatim ga sacuvajte kao .html i o tvorite ga u web pretrazivacu. Pogledajte sta ste dobili. Sada uzmite i svaku komandu lepo pogledajte i protumacite sta za sta sluzi. A onda vi sedite na stolicu i krenite nesto da pravite

Ovo je kod vezbe:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Web Development</title> 
<style type="text/css">

body {
background: #8a8a8a url(pozadina_body-ja.png) no-repeat;
background-attachment: fixed;
background-position: top center; 
margin: 0;
padding: 0; 
}

#container {
width: fixed;
}


#header .nav {
width: auto; 
height: 60px;  
top: 1%; 
overflow: hidden;
text-align: center; 
background: #000 url(nav.png) no-repeat;
background-position: center;  
border-bottom-width: 1%;    
border-bottom-style: solid;    
border-bottom-color: #666; 
border-radius: 10px 10px 8px 8px;     
-moz-border-radius: 10px 10px 8px 8px;     
-webkit-border-radius: 20px 20px 8px 8px;   
}    

#header .nav a {
text-decoration: none;
color: #FFF;
line-height: 60px;
padding: 17px; 
font-size: 16px; 

}

#header .nav a:hover {
color: yellow; 
}

#dnosajta {
position: relative; 
margin-top: 70%; 
width: auto;
height: 60px;
background: #000 url(nav.png) no-repeat;
background-position: center;  
border-bottom-color: #666; 
border-radius: 10px 10px 8px 8px;     
-moz-border-radius: 10px 10px 8px 8px;     
-webkit-border-radius: 20px 20px 8px 8px; 
} 

#dnosajta .tekst {
position: relative;
text-align: center; 
color: white; 
padding: 15px; 
}

</style>
</head>
<body>

<div id="container">
 <div id="header">
   <div class="nav">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
   </div>
  </div> 

</div> 


<div id="dnosajta">
   <div class="tekst">
     Copyright © 2012 Miljan Peles - <a href="#">MC</a> 
   </div> 
</div>

</body>
</html>

Download link slika: http://www.2shared.com/file/_wUo017C/KGB_or_MILF.html

- Ovo je samo nesto sto sam ja poceo da radim. Na ovome mozete da raditi tj. da vezbate ali ne i da objavljujete na internet, tj. ovaj body i ovaj header ja pravim za neke svoje gluposti

Sto se tice teksta u ovoj vezbi. Propustio sam ga. A kad budem imao vremena napravicu novu vezbu gde cete imati ceo sajt

Da vidite kako to od prilike izgleda

Zatim, kada sam rekao da slike crtate u paintu ili na papiru ? Evo kako to izgleda.
Ja sam ovaj svoj rad prvo nacrtao u Paintu i evo slike:

http://slike.milf-hosting.info/images/1325525476.jpg
To je najgori korak i najgora slika.

A zatim u PhotoShopu:

http://slike.milf-hosting.info/images/1325525255.jpg
To je vec mnogo bolja slika.

A zatim sam iskodirao u HTML i CSS i onda je izgledalo najbolje

Nadam se da shvatate tehnike rada Web dizajna.

**zzzzz** · 01-01-2012 22:18

K+ :d

**MiljanX** · 01-01-2012 22:28

Originally Posted by zzzzz

K+ :d

Hmm

Hvala

Doradicu tut

@tema

Nemojte da mislite da sad ako ovo procitate vi mozete da znate sve.. Morate mesecima da vezbate da bi postali dizajner

**LeadeR** · 01-01-2012 22:29

Originally Posted by CounterStrikeTuTeR

Znao sam da si corav

Pa napisao sam da nista nepisete dok ne zavrsim i stavio font 7

I ti si morao

Al nema veze

Hvala

Sada mozete da komentarisete

ma sto da citam kad znam da si ti to lepo objasnio a ja igrao cw

**^ Mr. Luxy Shmuxy ^** · 01-01-2012 22:32

Originally Posted by CounterStrikeTuTeR

Hmm

Hvala

Doradicu tut

@tema

Nemojte da mislite da sad ako ovo procitate vi mozete da znate sve.. Morate mesecima da vezbate da bi postali dizajner

Koleza, da bi postali KODER, ne dizajner, ne mora niko ni znati sta je HTML, CSS, ... a moze dizajnirati bolje od bilo kog kodera i dizajnera zajedno

Ali lepo sto si se trudio i kuckarao ovoliko k+

**MiljanX** · 01-01-2012 22:36

Originally Posted by ^ Mr. Luxy Shmuxy ^

Koleza, da bi postali KODER, ne dizajner, ne mora niko ni znati sta je HTML, CSS, ... a moze dizajnirati bolje od bilo kog kodera i dizajnera zajedno

Ali lepo sto si se trudio i kuckarao ovoliko k+

Hvala, hvala. Ali ipak postoji neke razlike

Kada se govori o programiranju, koder je covek koji pravi programe,a dizajner covek koji dizajnira

Zaboravio sam tut za border lol jesam bot. Sad radim na tome

**Nikola Nik** · 01-01-2012 22:38

Lepo lepo, inace, ako si poceo da pises, glupo je da se zaustavis na pozadini, nego objasnjavaj i ostalo. Sve pohvale za trud, inace karmu dobijas cim spead-am.

**MiljanX** · 01-01-2012 22:47

Originally Posted by Nikola Nik

Lepo lepo, inace, ako si poceo da pises, glupo je da se zaustavis na pozadini, nego objasnjavaj i ostalo. Sve pohvale za trud, inace karmu dobijas cim spead-am.

Evo doradio sam jos malo

EVO OVO SAM SADA NAPISAO XD

Code:

Poziciranje 

Relativno poziciranje
Ovim elementom pomeramo u tekst u odnosu na njegovo prvobntno stanje
Primer koda:

	Code:
	em {
position: relative;
top: 30px;
left: 60px;
background-color: blue;
}
Ovim poziciranjem ce ostati praznina na mestu sa kojeg smo pomerili neki tekst 
(Nekoristi se vise toliko relativno poziciranje)

Apsolutno poziciranje
Primer koda:

	Code:
	em {
position: absolute;
top: 30px;
left: 60px;
background-color: blue;
}
Sada primecujemo da za razliku od relativnog poziciranja. Tekst se baca i preko ostalih sadrzaja stranice

BORDER - Ivice.

Ivice okvira:
Ivice okvira zadajemo sledecim komandama:

	Code:
	border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
A ovo su vrednosti:
none - nema okvira
solid - samo ravna crta kao u gore primerima
double - dupla linija
dotted - Isprekidana linija (Tackice)
dashed - Isprekidana linija (Linije -)
groove - Sivi okvir (Manje vidljiv)
ridge - Sa jedne strane okvira je do kraja ivice linija, a sa druge strane okvira je malo dalje od ivice linija
inset - 3D okvir 1
outset - 3D okvir 2 


Sledeci elementi sluze za debljinu ivice:

	Code:
	border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 12px;
Elementi za ivicu 

	Code:
	border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
Sledeci elementi sluze za menjanje boje ivica

	Code:
	border-top-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-left-color: blue;
Naravno sve mozemo napisati skraceno. 
border: 1px dashed #F26521;

Skraceno pisanje. 
Sve u CSS-u moze da se napise skraceno... Primer: background. Imamo ih nekoliko: background-position, background-color, background-image, bakcground-attachment. Sve mozemo da ih napisemo skraceno tako sto cemo staviti samo: background: i onda nabrajati sve sto nam treba... Isto ovo vazi i za border.

**MrCrusheer** · 01-01-2012 22:54

Svaka cast , treba da bude jos ovakvih tutoriala , samo nastavi!

K+

**MiljanX** · 02-01-2012 00:33

Originally Posted by MrCrusheer

Svaka cast , treba da bude jos ovakvih tutoriala , samo nastavi!

K+

Hvala, hvala. Nastavicu

Doradjivacu ovaj tut

**k@lu^** · 02-01-2012 01:21

svaka cast , k+ od mene

**MiljanX** · 02-01-2012 13:57

Originally Posted by k@lu^

svaka cast , k+ od mene

Hvala

**LeadeR** · 02-01-2012 14:09

Originally Posted by k@lu^

svaka cast , k+ od mene

de bre, pa ne valja ovo nista!

**MiljanX** · 02-01-2012 14:49

Originally Posted by LeadeR

de bre, pa ne valja ovo nista!

Mozda si upravu xD Doradicu malo tut

**MiljanX** · 02-01-2012 15:29

Evo napravio sam jos jednu vezbu koja je finalna vezba:

Code:

Nadam se da ce svim pocetnicima pomoci ovaj tutorial. Ali sada posto sam objasnio mnogo toga. Dolazi finalna vezba i nju cu u ovom postu sada da postavim.. Ovo sam prvo stavio na MILF. A sad i na KGB :) 

Znaci, uzmite ovaj kod i kopirajte ga u notepad, zatim ga sacuvajte kao .html i o tvorite ga u web pretrazivacu. Pogledajte sta ste dobili. Sada uzmite i svaku komandu lepo pogledajte i protumacite sta za sta sluzi. A onda vi sedite na stolicu i krenite nesto da pravite :)

Ovo je kod vezbe:


	Code:
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Web Development</title> 
<style type="text/css">

body {
background: #8a8a8a url(pozadina_body-ja.png) no-repeat;
background-attachment: fixed;
background-position: top center; 
margin: 0;
padding: 0; 
}

#container {
width: fixed;
}


#header .nav {
width: auto; 
height: 60px;  
top: 1%; 
overflow: hidden;
text-align: center; 
background: #000 url(nav.png) no-repeat;
background-position: center;  
border-bottom-width: 1%;    
border-bottom-style: solid;    
border-bottom-color: #666; 
border-radius: 10px 10px 8px 8px;     
-moz-border-radius: 10px 10px 8px 8px;     
-webkit-border-radius: 20px 20px 8px 8px;   
}    

#header .nav a {
text-decoration: none;
color: #FFF;
line-height: 60px;
padding: 17px; 
font-size: 16px; 

}

#header .nav a:hover {
color: yellow; 
}

#dnosajta {
position: relative; 
margin-top: 70%; 
width: auto;
height: 60px;
background: #000 url(nav.png) no-repeat;
background-position: center;  
border-bottom-color: #666; 
border-radius: 10px 10px 8px 8px;     
-moz-border-radius: 10px 10px 8px 8px;     
-webkit-border-radius: 20px 20px 8px 8px; 
} 

#dnosajta .tekst {
position: relative;
text-align: center; 
color: white; 
padding: 15px; 
}

</style>
</head>
<body>

<div id="container">
 <div id="header">
   <div class="nav">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
   </div>
  </div> 

</div> 


<div id="dnosajta">
   <div class="tekst">
     Copyright © 2012 Miljan Peles - <a href="#">MC</a> 
   </div> 
</div>

</body>
</html>
Download link slika: http://www.2shared.com/file/_wUo017C/KGB_or_MILF.html

- Ovo je samo nesto sto sam ja poceo da radim. Na ovome mozete da raditi tj. da vezbate ali ne i da objavljujete na internet, tj. ovaj body i ovaj header ja pravim za neke svoje gluposti :) 
Sto se tice teksta u ovoj vezbi. Propustio sam ga. A kad budem imao vremena napravicu novu vezbu gde cete imati ceo sajt :) Da vidite kako to od prilike izgleda :) 

Uzivajte :)

**MiljanX** · 02-01-2012 19:43

Evo jos malo sam update post

Code:

Zatim, kada sam rekao da slike crtate u paintu ili na papiru ? Evo kako to izgleda.
Ja sam ovaj svoj rad prvo nacrtao u Paintu i evo slike:


http://slike.milf-hosting.info/images/1325525476.jpg 
To je najgori korak i najgora slika.

A zatim u PhotoShopu:

http://slike.milf-hosting.info/images/1325525255.jpg
To je vec mnogo bolja slika. 

A zatim sam iskodirao u HTML i CSS i onda je izgledalo najbolje ;)
Nadam se da shvatate tehnike rada Web dizajna. :)

Dodate slike i ostalo

nadam se da shvatate tehnike rada

**riste5** · 15-01-2012 04:11

+K za ovo

**MiljanX** · 15-01-2012 08:57

Originally Posted by riste5

+K za ovo

Hvala

**Virtual.kgb** · 15-01-2012 23:04

moze Contact html

**MiljanX** · 15-01-2012 23:24

Originally Posted by Virtual.kgb

moze Contact html

Za contact skriptu ti treba i PHP o kome nismo pricali u ovom tutorialu

**l0gic0. #** · 24-01-2012 16:09

a kako unutra u sliku da pisem stavio sam sliku ovako

Code:

<h2> Your Text Here</h2>
<img src="h2.png" alt="Your Text Here" />
</body>

slika radi al nemogu u nje da pisem kako to?

**Nikola Nik** · 24-01-2012 16:44

Originally Posted by l0gic0. #

a kako unutra u sliku da pisem stavio sam sliku ovako

Code:

<h2> Your Text Here</h2>
<img src="h2.png" alt="Your Text Here" />
</body>

slika radi al nemogu u nje da pisem kako to?

Da pises u slici, nece moci.

**l0gic0. #** · 24-01-2012 17:20

e jbg moze neko da mi pokaze kako se pravi template prvo sa photoshop pa onda html znam njega malo css nije mi jasan i ove dr ? moze neko to da mi pokaze ovaj milanjx dobro objasnio covjek sve al mnogo za citanje i ne shvatam pola od toga

**MiljanX** · 24-01-2012 20:12

@l0gic0. #

Kako bi ubacio tekst u sliku. Moras da das slici position: absolute;
ono cini da tekst pluta na stranici i onda ce se automatski i pojaviti na slici.
ili jednostavno da zadas position: relative; i onda da je podesis sa top: Xpx; i ostalo

Sto se tice tutoriala. Mislim da je dovoljno jasan.. CSS ti se u pocetku cini teskim. Inace je veoma lak.
Ja kad sam ucio CSS nisam shvatao "porodice divova i classova" ali to sam vremenom naucio

**l0gic0. #** · 25-01-2012 14:07

**Nikola Nik** · 25-01-2012 15:36

Originally Posted by l0gic0. #

HTML
<div id="footer">
Copyright © 2012 Miljan Peles - MC
</div>

CSS:
#footer {
background-image:url(..images/footer.png)
width:xxxpx;
height:xxxpx;
margin-left:auto;
margin-right:auto;
text-align:centar;

**killer98** · 25-01-2012 15:46

Originally Posted by MiljanX

Sto se tice tutoriala. Mislim da je dovoljno jasan.. CSS ti se u pocetku cini teskim. Inace je veoma lak.
Ja kad sam ucio CSS nisam shvatao "porodice divova i classova" ali to sam vremenom naucio

to je sve logicki samo treba da znas kako da opozoves koi deo i naravno ako znas engleski ovo nije problem ......

evo kako bi izgledalo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lalalalalalal</title>
</head>

<body>
<div id="aaa" >
e sad ovde pozivamo ili pisemo neke druge slike/tekstove..
</div>
</body>
</html>

css
#aaa {
maring-top: 20px; //margin-top 20px znaci da ce tu sliku ili tekst da odgurne od pocetka za 20px ili od predxodnog opisa . a sada ako nestavite tacku zarez nema nista od toga jel to je ko da napravis vrata a ne znas da ih stavis.
}

**l0gic0. #** · 25-01-2012 15:49

nikola i killer hvala vam

**MiljanX** · 25-01-2012 22:59

Originally Posted by l0gic0. #

nikola i killer hvala vam

Lepo su ti rekli killer i nik.

Sve ti je logicno

Samo vezbaj i za mozda manje od mesec dana ces biti u mogucnosti da napravis svaki rad iz ps-a

Evo ako sam ja tebe dobro shvatio ti zelis da pored copyright informacija stavis crni kvadrat.

To bi mogao ovako u HTMLu da oznacis:

<div id="footer">
Copytight bla bla bla
<div class="crnikvadrat">
Tekst
</div>
</div>

I onda u CSSu oznacis:
#footer .crnikvadrat {
opis stila1
opis stila2
....
}

**l0gic0. #** · 25-01-2012 23:37

pa i to pokusavam racunam da kupim masinu za hosting al nz odakle
i miljanx poslo sam ti poruku na email vidi

**Grindelvald** · 26-01-2012 00:08

Svaka cast!
K+

**Matrix1389** · 26-01-2012 00:12

Jel si siguran da HTML i CSS uvek idu jedan uz drugog?
Inace GJ za tut

**MiljanX** · 26-01-2012 00:58

Originally Posted by Matrix1389

Jel si siguran da HTML i CSS uvek idu jedan uz drugog?
Inace GJ za tut

Da. HTML i CSS ne mogu jedan bez drugog..

Ti mozes da radis neka sranja samo u HTMlu ali od toga nemas nista..

A css ne moze bez HTML-a

**Bojan BoKi** · 26-01-2012 02:38

Hocemo jos, jos!!

K+

Ipak ne.

You must spread some Reputation around before giving it to MiljanX again.

**MiljanX** · 26-01-2012 11:52

Originally Posted by Bojan BoKi

Hocemo jos, jos!!

K+

Ipak ne.

You must spread some Reputation around before giving it to MiljanX again.

Nema veze

Gledacu da napravim TuT za PhotoShop

**AlerteR** · 26-01-2012 11:54

Karma + i od mene,svaka cast,ovo ce pomoci pocetnicima

EDIT : You must spread some Reputation around before giving it to MiljanX again.
Ne secam se da sam ti dao K+ :S

**MiljanX** · 30-01-2012 23:03

Originally Posted by AlerteR

svaka cast,ovo ce pomoci pocetnicima

Hvala

Kada naucim PHP napravicu tut i za to xD

**HsS*BliZarD_OwN** · 30-01-2012 23:11

svaka cast za ovo dao bi ti k+ da mi nije protok 2kbps trenutno i nmgu nista da radim,nesto se bode net tako da

bice sutra nadam se

Originally Posted by MiljanX

Hvala

Kada naucim PHP napravicu tut i za to xD

**MiljanX** · 30-01-2012 23:17

Originally Posted by HsS*BliZarD_OwN

svaka cast za ovo dao bi ti k+ da mi nije protok 2kbps trenutno i nmgu nista da radim,nesto se bode net tako da

bice sutra nadam se

hehe ok je

**Bojan BoKi** · 01-02-2012 20:51

Originally Posted by MiljanX

Nema veze

Gledacu da napravim TuT za PhotoShop

Ajde, nemoj da te cekamo. :P

**Tomi95** · 05-02-2012 20:26

Originally Posted by MiljanX

Lepo su ti rekli killer i nik.

Sve ti je logicno

Samo vezbaj i za mozda manje od mesec dana ces biti u mogucnosti da napravis svaki rad iz ps-a

Evo ako sam ja tebe dobro shvatio ti zelis da pored copyright informacija stavis crni kvadrat.

To bi mogao ovako u HTMLu da oznacis:

<div id="footer">
Copytight bla bla bla
<div class="crnikvadrat">
Tekst
</div>
</div>

I onda u CSSu oznacis:
#footer .crnikvadrat {
opis stila1
opis stila2
....
}

je mozes to malo detaljnije gde da se doda i sta?

**MiljanX** · 05-02-2012 21:27

Pa opis stila dodje izmedju

<style type="text/css">

</style>

ili u stylename.css

A div id footer stavis na kraj html dokumenta.

**mAsLa** · 08-02-2012 19:45

Ej moze pitanje:

Kako da svoj HTML koji sam uradio msm kako sad da od njega kreiram web forum?
Kako da ga postavim na net adresu, to me zanima

**MiljanX** · 08-02-2012 21:32

Originally Posted by mAsLa

Ej moze pitanje:

Kako da svoj HTML koji sam uradio msm kako sad da od njega kreiram web forum?
Kako da ga postavim na net adresu, to me zanima

Da bi napravio svoj forum potrebno ti je znanje u PHP-u i MySQL-u.

A na to: Kako postaviti stranicu na web.

Odes na www.mikro-hosting.com i uzmes web prostor i domen.

Zatim uplodujes tu.

Sve o tome imas ovde: http://bubaj.com/index.php?domen-i-vrsta-sajtova

**milkagaming** · 18-02-2012 10:15

Svaki ti cast !

Imao si jos ranije da napravis ovo.
Ja sam trazio po netu celi mesec

**MiljanX** · 21-02-2012 13:21

Evo jos malo update tutorial:

Kako da stavite neku muziku na sajt koja moze da se pusti.

Udjete u notepad i ukucate

Code:

<audio id="beep-three" controls preload="auto">
	<source src="audio/Oh, camper camper.mp3" controls></source>
</audio>

Sacuvate kao .html.
Sada oberatite paznju na kod

<source src="audio/Oh, camper camper.mp3" controls></source>

audio je folder koji trebate da napravite i u njega ide pesma.. naravno ime foldera mozete da menjate.. A ovo Oh, camper camper.mp3 je pesma koja se nalazi u tom folderu

Ime pesme mora da ima svoj tim ili nastavak.. *.mp3, .waw, .mp4 ...*

Thread: Izrada WEB Sajtova - Tutorial za pocetnike + Vezbe

Thread Tools

Search Thread

Display

Izrada WEB Sajtova - Tutorial za pocetnike + Vezbe

Thread Information

Users Browsing this Thread

Posting Permissions