Izrada WEB Sajtova - Tutorial za pocetnike - ( 72 str. ).pdf

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

User Name Password Log in RegisterHelp

Forum Diskusije - Web Hosting Webhosting i ForumIzrada WEB Sajtova - Tutorial za pocetnike + Vezbe

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to registerbefore you can post: click the register link above to proceed. To start viewing messages, select theforum that you want to visit from the selection below.

Thread: Izrada WEB Sajtova - Tutorial za pocetnike + Vezbe

Game Panel GameTracker.rs KGB @ Facebook Game Store What's New?

Today's Posts FAQ Calendar Community Forum Actions Quick Links Advanced Search

Results 1 to 50 of 74 Page 1 of 2 1 2 Last

Thread Tools Search Thread Display

01-01-2012 22:06

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 sposobnida napravite jednu lepo web stranicu. U ovom tutorialu cu vas ukratko voditi kroz CSS (Cascading StyleSheets) i HTML (HyperText Markup Language)

#1

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Forum


Bilo da je ovaj tutorial pocetak vase profesionalne buducnosti WebDizajna ili samo kao vas hobi, ako ste pocetnik dosta mozete nauciti.

Osnove,

HTML - (HyperText Markup Language) - Jezik koji je posebnonamenjen izradi Web Sajtova. Najnovija verzija je XHTML (eXtensibleHTML), u sustini je jezik samo sa strozijim pravilima. HTML i XHTMLzajednickim imenom nazivamo (X)HTML. (X)HTML nije programerskijezik to je jezik za oznacavanje tj. opisivanje.

CSS - (Cascading Style Sheets) - Jezik pomocu kog se definise izgledWeb Stranice. HTML i CSS uvek idu zajedno. Tj. ne mogu jedno bezdrugog. Neki jezici kao sto su JavaScript, PHP nisu obavezni ali akozelite da se bavite profesionalnim web dizajniranjem moracete i tojednom 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 trebanapraviti skicu sajta. Kako najlakse napraviti skicu sajta ? Uzmete papir i olovku u ruku inacrtate kako u vasoj glavi izgleda sajt koji bi ste vi zeleli danapravite. Profesionalni Web Dizajneri za to koriste PhotoShop (Okome cu pricati neki drugi put, ali u ovom tutorialu cu ga samospomenuti.) ... Pocetnici ! Nemojte da mislite da je smesno i neobracajte paznju sta ce drugi clanovi ovog foruma da pisu ali zapocetak papir i olovka u ruke i tu pravite skice sajta. PhotoShop cetemorati da naucite. Ali ne odma.

Da li ste zakasnili sa ucenjem ?Odgovor je lak. Naravno da niste. To da li imate 20 godina ili 10godina za Web Dizajn nije bitno. Znaci ako imate volje, mozga i

Karma: 31


zelju... Mozete da pocnete i sa 10 godina da ucite Web Dizajn. Uveksam govorio (Sto ranije to bolje) zato sto cete brze postati ono stozelite

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

Kako snimiti (X)HTML dokument ? U notepadu to radite veoma lako. Znaci kada napisete vas dokumentkliknete 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 napamet. Znaci idite u My documents i napravite folder: Web Design itu zapisujte sve atribute i njihove opise. I onda kad pravite web sajtsamo se odatle sluzite. Znaci ovo netreba da se uci napamet.. Zapocetak radite ovako pa cete videti kako ce vam koamnde same uciu glavu vremenom.

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

Svaki sajt pocinje sa i zavrsava se sa Evo vam malaskica kako izgleda pocetak svakog sajta:

Code:


Element je u prevodu glava sajta. Tu ubacujemo CSSdokument (objasnicu kasnije), JavaScript dokument i sve ostalo. Uelement head nedodje sadrzaj sajta. Elemnt Je naslov sajta. Primer kako se pise: KGBHosintg .

U element dodje sav sadrzaj sajta. Znaci tu se nalazi savtekst koji ce pisati na vasem sajtu kad ga otvorite i webpretrazivacu. Morate da zapamtite da vas sajt nece izgledati isto usvakom pretrazivacu.

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

- pasus (ili prelazak u novi red) - Podebljana slova - Podebljana slova. Isto ko i za b. , , - Velicina slova (h1 je najvecapa onda ide nanize) - Tacka ispred teksta - Malo veci tekst od uobicajenog (Ova komanda je izaslaiz upotrebe) - Pise tekst na centru ekrana - Precrtani tekst. - Cini tekst malo manjim od obicne velicine (Ovakomanda je izasla iz upotrebe)


- Krivi *istice* neki teskt - Stavlja tekst u navodnike

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

Code: KGB Hosting

KGB Hosting Ovo je sajt KGB Hostinga i mi se bavimo prodajom Game Servera. Jedna igrica sa najprodavanijim serverima je Counter Strike

Uskoro otvaramo i Game Store

Sada cu vam pokazati nekoliko elemenata za oznacavanje teksta. Tosu: , i . Ovako ih zapisujemo.

Code: Neki tekst Neki tekst

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



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


Onda ce krenuti brojanje od 15.


Ako otvorite ovaj tekst u Web Pretrazivacu videcete da imamo jedannaslov 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: KGB Hosting

KGB Hosting Ovo je sajt KGB Hostinga i mi se bavimo prodajom Game Servera. Jedna igrica sa najprodavanijim serverima je Counter Strike

Uskoro otvaramo i Game StoreU ponudi imamo: Counter Strike 1.6 servere Call Of Duty servere SAMP servere

Neki nasi serveri su:

KGB Alfa KGB DeathMatch

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

To postizemo ovako:

Code:


Idi na facebook

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

Dodavanje slika.

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

Code: ili

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

Code:

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


Vezbanje.

Otvorite sledeci kod u web pretrazivacu:

Code: Slike

Ovde kupujete najkvalitetnije servere

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

Evo primer:

Code: DIV I CLASS


CS Forever Zombie Plague


Evo primer kako se on pise:

Code: Naslov

Kad ovako napisete onda sve opise stilova pisete u styles.css i takovam 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 nacinjako cesto koristi. Ja cesto koristim ovaj nacin zato sto mi je laksekad mi je sve na jednom mestu. I ovaj nacin se dodaje izmedjuelementa head.Znaci ovako:

/* Ovde dodje opis stila */

Vas opis stila dolazi izmedju i


I to izgleda ovako:

Code: Naslov

/* Ovde dodje opis stila */

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

Code:

body { background-color: red; }

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


Code:

Naslov body { background-color: red; }

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 manjekoristi.) 2. Nacin je da koristite RGB boje. R - Red, G - Green, B - Blue i toovako 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 sepise: background-color: #xxxxxx; evo i primer: background-color:#000000;

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

Vezbanje:

otvorite ovaj kod u web pretrazivacu:


Code:

Naslov body { background-color: red; } b { color: blue; background-color: yellow; }

Zdravo, ja sam Miljan svi me znate ;)

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

width: 100px; - Sirina elementaheight: 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 ujednom 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 natom delu ne moze da se pronadje nikakav tekst. Tj. pravi razmak odkrajeva stranicemargin-right: 10px; - Margina se postavlja sa desne strane stranice ina tom delu ne moze da se pronadje nikakav tekst. Tj. pravi razmakod krajeva stranicemargin-top: 10px; - Margina se postavlja na vrh stranice i na tomdelu ne moze da se pronadje nikakav tekst. Tj. pravi razmak odkrajeva stranicemargin-bottom: 10px; - Margina se postavlja na dno stranice i natom delu ne moze da se pronadje nikakav tekst. Tj. pravi razmak odkrajeva straniceVAZNO: U body { stvljate uvek margin: 0; posto postoje neki pretrazivaci kojiautomatski stavljaju marginu sa svih strana stranica na nekoliko px.

font-size - Velicina teksta. Koristimo ga da promenimo velicinuteksta. Vrednost najcesce zadajemo u pikselima (font-size: 15px; ) -Primer. h1 { font-size: xx-small; } - Jako mala slovah1 { font-size: x-small; } - Malo vece od xx-smallh1 { font-size: small; } - Malo veca slova od x-smallh1 { font-size: medium; } - Malo veca slova od smallh1 { font-size: large; } - Malo veca slova od mediumh1 { font-size: x-large; } - Malo veca slova od large


h1 { font-size: xx-large; } - Malo veca slova od x-largeh1 { font-size: 150%; } - Oznacavanje teksta u procentimah1 { font-size: 1.5em; } - Isto jedan dobar nacin za menjanje

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

text-decoration: none; - Koristimo da sklonimu svu default dekoracijusa teksta. text-decoration: underline; - Linija ispod tekstatext-decoration: overline; - Linija iznad tekstatext-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 alisada u vezbanju koje sledi razumecete sve i u ovom vezbanju ceteshvatiti div i class elemente Ali prvo moram nesto da napisem onjima.. Znaci, svaki element koji pocinje sa i zavrsava sa se u opisu stila pise kao: nesto { opis stila; }, a sa div iclass je malo drugacije. Posto dvi elemnt oznacavamo ovako: i zavrsvamo ga sa . Njega u opisu stilaovako oznacavamo: #imeelementa { opis stila } znaci umestoelementa div dodje # (taraba) a posle tarabe se pise ono sto dolazi uid="". Kod class je veoma slicno. Ako je naprimer elenet: i zavrsava se sa . Onda ce u Opisu stilasamo umesto tarabe doci tacka.Znaci ovako bi se to opisalo: .imeelmenta { opis stila; } . Znaci kodclass umesto div-a ide tacka.

I jos jednu stvar da napomenem. Ako se npr. neki drugi elemnt kaosto je 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 kojasada sledi.

Da predjemo na vezbu. Otvorite ovo u web pretrazivacu:

Code: Naslov

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;}


Polako gledajte kod i shvaticete mnogo stvari.

nastavak u sledecem postu.

Last edited by MiljanX; 01-01-2012 at 22:14.

Moje tutoriale i plugine mozete pronaci OVDE.

DeviantART



Reply With Quote

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 cuda navedem opise stilova stvorene za to.

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

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

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

#4

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray


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 slikase spusta zajedno sa stranicom. (na tockic )

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

Efekti LinkaSada cu vas nauciti kako da napravite da kada predjete misem preko teksta, da se tekst oboji, da se promeni pozadina ili nestodrugo (Ovo se najcesce koristi za navigacije..

Znaci kada predjete misem preko teksta da bi se nesto desilotrebamo da dodamo opis stila po imenom hover. Objasnicu vam kakose on dodaje. Znaci za njega nista ne pisete u HTML dokumentu negosamo u CSS dokumentu. Ako npr. zelite da promenite da kad sepredje misem preko Facebook da se pozadina


oboji u crvenu i da tekst promeni boju u crnu iz bele. Ovako toodazovemo u CSS dokumentu. Znaci da kazemo da se Facebook nalazi u divheader. I onda cemo to ovako da namestimo: #header a:hover {background-color: red;color: black;}

Vezbanje

Code: Naslov

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

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


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 danapravite Tj. dacu vam neke kodove.

Sneg na sajtu

Code:

Dodje u element

Muzika na sajtu

Code:

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 vamje sve u jednom redu ili sa razmacima uopste nije bitno


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

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

Edit tutorial.

Poziciranje

Relativno poziciranjeOvim elementom pomeramo u tekst u odnosu na njegovo prvobntnostanjePrimer koda:

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

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

Apsolutno poziciranjePrimer koda:

Code:em {position: absolute;


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

Sada primecujemo da za razliku od relativnog poziciranja. Tekst sebaca 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 okvirasolid - samo ravna crta kao u gore primerimadouble - dupla linijadotted - Isprekidana linija (Tackice)dashed - Isprekidana linija (Linije -)groove - Sivi okvir (Manje vidljiv)ridge - Sa jedne strane okvira je do kraja ivice linija, a sa drugestrane okvira je malo dalje od ivice linijainset - 3D okvir 1outset - 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 ondanabrajati sve sto nam treba... Isto ovo vazi i za border.



DeviantART



Code:

Web Development

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;

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 mozeteda raditi tj. da vezbate ali ne i da objavljujete na internet, tj. ovajbody 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 viditekako to od prilike izgleda

Zatim, kada sam rekao da slike crtate u paintu ili na papiru ? Evokako 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.jpgTo 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.



DeviantART



Karma: 12

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

Reply With Quote

01-01-2012 22:28

Hmm Hvala Doradicu tut

#7

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by zzzzz

K+ :d


@tema

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


DeviantART



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

Reply With Quote

01-01-2012 22:32

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

#9

Join Date:

Location:

Age:

Jan 2011

-

17

Karma: 24

^Mr. Luxy Shmuxy ^

Senior MemberArray

Originally Posted by CounterStrikeTuTeR

Hmm Hvala Doradicu tut

@tema

Nemojte da mislite da sad ako ovo procitate vi mozeteda znate sve.. Morate mesecima da vezbate da bipostali dizajner


zajedno

Ali lepo sto si se trudio i kuckarao ovoliko k+

Reply With Quote

01-01-2012 22:36

Hvala, hvala. Ali ipak postoji neke razlike Kada se govori o programiranju, koder je covek koji pravi programe,adizajner covek koji dizajnira

#10

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by ^ Mr. Luxy Shmuxy ^

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

Ali lepo sto si se trudio i kuckarao ovoliko k+


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


DeviantART



Reply With Quote

01-01-2012 22:47

Evo doradio sam jos malo

EVO OVO SAM SADA NAPISAO XD

Code:Poziciranje

Relativno poziciranjeOvim elementom pomeramo u tekst u odnosu na njegovo prvobntno stanje

#12

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by Nikola Nik

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


tno stanjePrimer 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 poziciranjePrimer 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.


DeviantART



Reply With Quote

01-01-2012 22:54

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

K+

#13

Join Date:

Location:

Age:

Dec 2011

Podgorica

17

Karma: 0

MrCrusheer

MemberArray

Podgorica GamingForum

Ljubomorne duse mogu samo da mi puse!

Reply With Quote

02-01-2012 00:33 #14

MiljanX


Hvala, hvala. Nastavicu Doradjivacu ovaj tut

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

Senior MemberArray

Originally Posted by MrCrusheer

Svaka cast , treba da bude jos ovakvih tutoriala , samonastavi!

K+


DeviantART



Karma: 11

Reply With Quote

02-01-2012 13:57

Hvala

#16

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by k@lu^

svaka cast , k+ od mene


DeviantART



02-01-2012 14:09

de bre, pa ne valja ovo nista!

#17

Join Date:

Location:

Age:

Feb 2011

Montenegro

19

Karma: 23

LeadeR

Senior MemberArray

Originally Posted by k@lu^

svaka cast , k+ od mene

Reply With Quote

02-01-2012 14:49 #18

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by LeadeR

de bre, pa ne valja ovo nista!


Mozda si upravu xD Doradicu malo tut Karma: 31


DeviantART



Code:

Web Development

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;

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


DeviantART



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:

Dodate slike i ostalo nadam se da shvatate tehnike rada

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

Senior MemberArray


DeviantART



Reply With Quote

15-01-2012 04:11

+K za ovo

#21

Join Date:

Location:

May 2011

'$unknown error:unexpected with Location'

Karma: 0

riste5

Banovani spamerArray

Reply With Quote

15-01-2012 08:57

Hvala

#22

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by riste5

+K za ovo



DeviantART



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

Karma: 31


DeviantART



Reply With Quote

24-01-2012 16:44

Da pises u slici, nece moci.

#26

Join Date:

Location:

Aug 2010

Banovo Brdo

Karma: 21

Nikola Nik

Senior MemberArray

Originally Posted by l0gic0. #

a kako unutra u sliku da pisem stavio sam sliku ovako

Code: Your Text Here

slika radi al nemogu u nje da pisem kako to?

Reply With Quote


24-01-2012 17:20

e jbg moze neko da mi pokaze kako se pravi template prvo saphotoshop 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 almnogo za citanje i ne shvatam pola od toga

#27

Join Date: Mar 2011

Karma: 4

l0gic0. #

Senior MemberArray

Reply With Quote

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 pojavitina slici. ili jednostavno da zadas position: relative; i onda da je podesis satop: Xpx; i ostalo

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

#28

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray



DeviantART



HTML

Copyright 2012 Miljan Peles - MC

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

Reply With Quote

25-01-2012 15:46 #31

killer98

Senior MemberArray


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

evo kako bi izgledalo

lalalalalalal

e sad ovde pozivamo ili pisemo neke druge slike/tekstove..

css #aaa {maring-top: 20px; //margin-top 20px znaci da ce tu sliku ili tekst daodgurne od pocetka za 20px ili od predxodnog opisa . a sada ako

Join Date:

Location:

Jun 2011

KOTEZ


nestavite tacku zarez nema nista od toga jel to je ko da napravisvrata a ne znas da ih stavis.}

Kontakt steam/pm:

Teach Community

Teach Alfa [p48] by kgb-hosting.com - 78.46.94.162:27072Teach Surf [p48+FastD] by kgb-hosting.com - 88.198.26.205:27068

Teach ClanWar by kgb-hosting.com - 78.46.94.162:27073Na ALFI se uci,na BETI se muci,a na Gama-i se KURI!:)

Originally Posted by igor_HeftAlicA

ja sam boostovao jedan server preko sms-a da li cu jadobiti admina ?

Reply With Quote

25-01-2012 15:49

nikola i killer hvala vam

#32

Join Date: Mar 2011

Karma: 4

l0gic0. #

Senior MemberArray


Reply With Quote

25-01-2012 22:59

Lepo su ti rekli killer i nik.

Sve ti je logicno Samo vezbaj i za mozda manje od mesec danaces biti u mogucnosti da napravis svaki rad iz ps-a

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

To bi mogao ovako u HTMLu da oznacis:

Copytight bla bla bla

Tekst

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

#33

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by l0gic0. #

nikola i killer hvala vam


opis stila2....}


DeviantART



Svaka cast!K+Join Date: Jan 2012

Karma: 0

MemberArray

Reply With Quote

26-01-2012 00:12

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

#36

Join Date:

Location:

Apr 2011

Pancevo

Karma: 3

Matrix1389

Senior MemberArray

Reply With Quote

26-01-2012 00:58 #37

MiljanX


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

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by Matrix1389

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


DeviantART



Ipak ne. You must spread some Reputation around before giving it to MiljanXagain.

Karma: 6

Originally Posted by DRAGANA.ba

eo sredjeno mi je napokon lock ide pupolja je odgovoriona tiket zahvaljujem mu se

Originally Posted by b2k5

Za uplatu na kgb racun preko 10000 dinara mora se datiemail i sifra kao osiguranje!

Originally Posted by Dane

Koja je razlika izmedju "upload via iOS" ili"upload via mobile" -:) ?

Originally Posted by lich.kgb

Pa sto sam kupio ajfon da bi mi pisalo uploadvia mobile :D


Reply With Quote

26-01-2012 11:52

Nema veze Gledacu da napravim TuT za PhotoShop

#39

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by Bojan BoKi

Hocemo jos, jos!! K+

Ipak ne. You must spread some Reputation around before givingit to MiljanX again.


DeviantART



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 toMiljanX again.Ne secam se da sam ti dao K+ :S

#40

Join Date:

Location:

Age:

Dec 2011

Belgrade

18

Karma: 4

AlerteR

Senior MemberArray

Reply With Quote

30-01-2012 23:03

Hvala Kada naucim PHP napravicu tut i za to xD

#41

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by AlerteR

svaka cast,ovo ce pomoci pocetnicima



DeviantART



hehe ok je

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by HsS*BliZarD_OwN

svaka cast za ovo dao bi ti k+ da mi nije protok 2kbpstrenutno i nmgu nista da radim,nesto se bode net takoda bice sutra nadam se


DeviantART



Ajde, nemoj da te cekamo. :P

Originally Posted by DRAGANA.ba

eo sredjeno mi je napokon lock ide pupolja je odgovoriona tiket zahvaljujem mu se

Originally Posted by b2k5

Za uplatu na kgb racun preko 10000 dinara mora se datiemail i sifra kao osiguranje!

Originally Posted by Dane

Koja je razlika izmedju "upload via iOS" ili"upload via mobile" -:) ?

Originally Posted by lich.kgb

Pa sto sam kupio ajfon da bi mi pisalo uploadvia mobile :D


Reply With Quote

05-02-2012 20:26 #45

Join Date:

Location:

Feb 2012

Arandjelovac

Karma: 0

Tomi95

MemberArray

Originally Posted by MiljanX

Lepo su ti rekli killer i nik.

Sve ti je logicno Samo vezbaj i za mozda manje odmesec dana ces biti u mogucnosti da napravis svaki radiz ps-a

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

To bi mogao ovako u HTMLu da oznacis:

Copytight bla bla bla

Tekst

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


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

}

Reply With Quote

05-02-2012 21:27

Pa opis stila dodje izmedju

ili u stylename.css

A div id footer stavis na kraj html dokumenta.

#46

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray


DeviantART



Reply With Quote

08-02-2012 19:45

Ej moze pitanje:

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

#47

Join Date: Feb 2012

Karma: 0

mAsLa

Junior MemberArray

Reply With Quote

08-02-2012 21:32

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

A na to: Kako postaviti stranicu na web.

#48

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray

Originally Posted by mAsLa

Ej moze pitanje:

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


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


DeviantART



Fanta Gaming|193.192.58.116:27020

Reply With Quote

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:

Sacuvate kao .html. Sada oberatite paznju na kod

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

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

#50

Join Date:

Location:

Apr 2011

Banjica

Karma: 31

MiljanX

Senior MemberArray


Previous Thread | Next Thread


DeviantART


Documents

Izrada WEB Sajtova - Tutorial za pocetnike - ( 72 str. ).pdf