Scribd Logo
Upload

Welcome to Scribd!

  • Default Izrada WEB Sajtova

    Uploaded by

    Danijela
    20 views8 pages

    Original Title

    Default Izrada WEB Sajtova.docx

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views8 pages

    Default Izrada WEB Sajtova

    Uploaded by

    Danijela

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

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

    You might also like