Izrada WEB Sajtova - Tutorial za pocetnike + Vezbe
Page 1 of 2 12 LastLast
Results 1 to 50 of 80
  1. #1
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default Izrada WEB Sajtova - Tutorial za pocetnike + Vezbe

    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.
    Last edited by MiljanX; 02-01-2012 at 10:41.

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  2. #2
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    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.
    Last edited by MiljanX; 01-01-2012 at 21:14.

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  3. #3
    Banovani spamer Array
    Join Date
    Feb 2011
    Location
    Montenegro
    Age
    24
    Karma
    0

    Default

    To je taj momak koji uvek pomaze

    Bravo....

  4. #4
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    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.
    Last edited by MiljanX; 01-01-2012 at 21:46.

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  5. #5
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    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.
    Last edited by MiljanX; 02-01-2012 at 18:42.

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  6. #6
    Senior Member Array
    Join Date
    Oct 2011
    Location
    Srbija, Beograd
    Karma
    18

    Default

    K+ :d

    For more motivation like https://www.facebook.com/swonly

  7. #7
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by zzzzz View Post
    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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  8. #8
    Banovani spamer Array
    Join Date
    Feb 2011
    Location
    Montenegro
    Age
    24
    Karma
    0

    Default

    Quote Originally Posted by CounterStrikeTuTeR View Post
    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

  9. #9
    Senior Member Array
    Join Date
    Jan 2011
    Location
    ЛА-ВА
    Age
    21
    Karma
    29

    Default

    Quote Originally Posted by CounterStrikeTuTeR View Post
    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+

  10. #10
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by ^ Mr. Luxy Shmuxy ^ View Post
    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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  11. #11
    Senior Member Array
    Join Date
    Aug 2010
    Location
    BGD
    Karma
    26

    Default

    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.

  12. #12
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by Nikola Nik View Post
    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.

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  13. #13
    Member Array
    Join Date
    Dec 2011
    Location
    Podgorica
    Age
    22
    Karma
    0

    Default

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

    K+
    Podgorica Gaming

    Ljubomorne duse mogu samo da mi puse!

  14. #14
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by MrCrusheer View Post
    Svaka cast , treba da bude jos ovakvih tutoriala , samo nastavi!

    K+

    Hvala, hvala. Nastavicu Doradjivacu ovaj tut

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  15. #15
    Senior Member Array
    Join Date
    Mar 2011
    Location
    Banja Luka
    Karma
    16

    Default

    svaka cast , k+ od mene

  16. #16
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by k@lu^ View Post
    svaka cast , k+ od mene

    Hvala

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  17. #17
    Banovani spamer Array
    Join Date
    Feb 2011
    Location
    Montenegro
    Age
    24
    Karma
    0

    Default

    Quote Originally Posted by k@lu^ View Post
    svaka cast , k+ od mene
    de bre, pa ne valja ovo nista!

  18. #18
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by LeadeR View Post
    de bre, pa ne valja ovo nista!
    Mozda si upravu xD Doradicu malo tut

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  19. #19
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    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 :)

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  20. #20
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  21. #21
    Banovani spamer Array
    Join Date
    May 2011
    Location
    '$unknown error: unexpected with Location'
    Karma
    0

    Default

    +K za ovo

  22. #22
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by riste5 View Post
    +K za ovo
    Hvala

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  23. #23
    Banovani spamer Array
    Join Date
    Dec 2011
    Location
    ▂ ▃ ▅ ▆ █
    Karma
    0

    Default

    moze Contact html

  24. #24
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by Virtual.kgb View Post
    moze Contact html


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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  25. #25
    Senior Member Array
    Join Date
    Mar 2011
    Karma
    9

    Default

    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?

  26. #26
    Senior Member Array
    Join Date
    Aug 2010
    Location
    BGD
    Karma
    26

    Default

    Quote Originally Posted by l0gic0. # View Post
    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.

  27. #27
    Senior Member Array
    Join Date
    Mar 2011
    Karma
    9

    Default

    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

  28. #28
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    @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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  29. #29
    Senior Member Array
    Join Date
    Mar 2011
    Karma
    9

    Default

    miljanx mozes ti staviti na ovaj html Copyright 2012 Miljan Peles - MC
    da stavis jedan crn [black] kvadrat i u njemu da pise your text here pa da vidim kako je to moze?

  30. #30
    Senior Member Array
    Join Date
    Aug 2010
    Location
    BGD
    Karma
    26

    Default

    Quote Originally Posted by l0gic0. # View Post
    miljanx mozes ti staviti na ovaj html Copyright 2012 Miljan Peles - MC
    da stavis jedan crn [black] kvadrat i u njemu da pise your text here pa da vidim kako je to moze?
    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;

  31. #31
    Senior Member Array
    Join Date
    Jun 2011
    Location
    KOTEZ<3!
    Karma
    11

    Default

    Quote Originally Posted by MiljanX View Post
    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.
    }
    Kontakt steam/pm:

    Teach Community

    Teach Alfa [p48] by kgb-hosting.com - 78.46.94.162:27072
    Teach Surf [p48+FastD] by kgb-hosting.com - 88.198.26.205:27068
    Teach ClanWar by kgb-hosting.com - 78.46.94.162:27073
    Na ALFI se uci,na BETI se muci,a na Gama-i se KURЧI!:)
    Quote Originally Posted by igor_HeftAlicA View Post
    ja sam boostovao jedan server preko sms-a da li cu ja dobiti admina ?

  32. #32
    Senior Member Array
    Join Date
    Mar 2011
    Karma
    9

    Default

    nikola i killer hvala vam

  33. #33
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by l0gic0. # View Post
    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
    ....
    }

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  34. #34
    Senior Member Array
    Join Date
    Mar 2011
    Karma
    9

    Default

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

  35. #35

    Default

    Svaka cast!
    K+

  36. #36
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Pancevo
    Karma
    8

    Default

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

  37. #37
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by Matrix1389 View Post
    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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  38. #38
    Senior Member Array
    Join Date
    Dec 2010
    Location
    Doboj, BA
    Karma
    12

    Default

    Hocemo jos, jos!!
    K+

    Ipak ne.
    You must spread some Reputation around before giving it to MiljanX again.
    Quote Originally Posted by b2k5 View Post
    Za uplatu na kgb racun preko 10000 dinara mora se dati email i sifra kao osiguranje!
    Quote Originally Posted by Dane View Post
    Koja je razlika izmedju "upload via iOS" ili "upload via mobile" -:) ?
    Quote Originally Posted by lich.kgb View Post
    Pa sto sam kupio ajfon da bi mi pisalo upload via mobile :D

  39. #39
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by Bojan BoKi View Post
    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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  40. #40
    Senior Member Array
    Join Date
    Dec 2011
    Location
    Belgrade
    Age
    23
    Karma
    9

    Default

    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

  41. #41
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by AlerteR View Post
    svaka cast,ovo ce pomoci pocetnicima

    Hvala
    Kada naucim PHP napravicu tut i za to xD

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  42. #42
    Senior Member Array
    Join Date
    Jun 2011
    Location
    localhost
    Karma
    18

    Default

    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
    Quote Originally Posted by MiljanX View Post
    Hvala
    Kada naucim PHP napravicu tut i za to xD

  43. #43
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by HsS*BliZarD_OwN View Post
    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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  44. #44
    Senior Member Array
    Join Date
    Dec 2010
    Location
    Doboj, BA
    Karma
    12

    Default

    Quote Originally Posted by MiljanX View Post
    Nema veze Gledacu da napravim TuT za PhotoShop
    Ajde, nemoj da te cekamo. :P
    Quote Originally Posted by b2k5 View Post
    Za uplatu na kgb racun preko 10000 dinara mora se dati email i sifra kao osiguranje!
    Quote Originally Posted by Dane View Post
    Koja je razlika izmedju "upload via iOS" ili "upload via mobile" -:) ?
    Quote Originally Posted by lich.kgb View Post
    Pa sto sam kupio ajfon da bi mi pisalo upload via mobile :D

  45. #45
    Member Array
    Join Date
    Feb 2012
    Location
    Arandjelovac
    Karma
    0

    Default

    Quote Originally Posted by MiljanX View Post
    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?

  46. #46
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Pa opis stila dodje izmedju

    <style type="text/css">

    </style>

    ili u stylename.css

    A div id footer stavis na kraj html dokumenta.

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  47. #47
    Junior Member Array
    Join Date
    Feb 2012
    Karma
    0

    Default

    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

  48. #48
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

    Quote Originally Posted by mAsLa View Post
    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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


  49. #49

    Default

    Svaki ti cast !
    Imao si jos ranije da napravis ovo.
    Ja sam trazio po netu celi mesec
    Fanta Gaming|193.192.58.116:27020

  50. #50
    Senior Member Array
    Join Date
    Apr 2011
    Location
    Banjica
    Karma
    36

    Default

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

    Moje tutoriale i plugine mozete pronaci OVDE.
    Sredjivanje Zombie Plague servera, javite se ovde

    === Zombie Plague 4.3 PREMIUM ADDONS ===



    <3 CS Forever Zombie Plague <3 - 193.192.59.62:27015


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •