|
Poslao: 06 Nov 2012 21:50
|
offline
- Fil
- Legendarni građanin
- Pridružio: 11 Jun 2009
- Poruke: 16586
|
Blog je prva liga.Svaka cast na inicijativi i lepo strukturiranom tekstu 
|
|
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
|
Poslao: 07 Nov 2012 15:37
|
offline
- Pridružio: 13 Sep 2012
- Poruke: 2138
|
Forme i dugmad
Title je oznaka koje se stavlja u head oznaku I služi za postavljanje naslova na web stranu koji će se prikazivati u brauzeru I na rezultatima pretrage pretraživača.
Naziv se dodaje pomoću sledećeg koda:
Citat: <title>Ovde ide naziv sajta</title>
Heading tagovi
Ovo su oznake koje se koriste za oznaku važnosti teksta na sajtu. Jako je važno da se pravilni koriste jer pomažu SEO optimizaciju sajta.
Imamo sledeće heading tagove:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
H1 tag se obižno koristi za glavni naziv ili naslov sajta.
H2 se najčešće koristi kao podnaslov na sajtu.
H3 se koristi kao podnaslov podnaslova.
Ostali tagovi se koriste prema potrebi web sajta. Ali prva tri se najčešće koriste.
Div oznaka
Div oznaka se koristi za grupaciju ostalih oznaka i primenjivanjem css-a na njih.
Znači kada napraviti jedan div element i u njega postavite slike i tekst i zatvorite taj div, pa nakon toga u css primenite nešto na taj div (npr na poziciju) automatski će se to odraziti i na sve ostalo što se nalazi u tom div-u.
Div se dodaje pomoću koda:
Citat:<div>
I zatvara se sa: </div>
Div-u mogu da se dodaju posebne vrednosti (atributi) kao što su izgled u css. One se dodaju pomoću div id ili div class koda koji se smešta u sam div kod. Primer:
Citat:<div id="divnaziv">
U css se dodaje:
Citat:#divnaziv { }
I između zagrada se dodaje css koji se primenjuje na taj div.
Primer jednog div-a:
Citat:<div id="divnaziv">
<p>Tekst</p>
</div>
Primer jednostavnog sajta u kojem se nalazi title (naslov), head tagovi i div:
Citat:
<html>
<head>
<title>Naslov sajta</title>
</head>
<body>
<div id="divnaziv">
<h1>Naslov</h1>
<h2>Podnaslov</h2>
<p>Tekst</p>
</div>
</body>
</html>
Do sledećeg posta!
|
|
|
|
|
|
|
Poslao: 10 Nov 2012 10:57
|
offline
- Pridružio: 13 Sep 2012
- Poruke: 2138
|
Pozicija elemenata, float, marigine i padding
Pomoću CSS možete da pozicionirate elemente u HTML. To znači da svaki element možete da postavite tamo gde želite da se nalazi.
Postoji četiri vrste pozicije elemenata:
-Preklop (može da postavlja elemente jedne preko drugih)
-Relativni (prikazuj element u odnosu na svoju normalnu poziciju)
-Fiksiran (element stoji uvek na jednoj poziciji čak i kada se skorulje stranica)
-Apsolutni (ovaj element zauzima poziciju u odnosu na element u kojem se nalazi)
Hajde da vidimo kako ovo izgleda na primerima:
Preklop
Citat:divnaziv
{
position:absolute;
left:5px;
top:2px;
z-index:-3;
}
Relativni
Citat:
divnaziv
{
position:relative;
left:-40px;
}
Fiksiran
Citat:divnaziv
{
position:fixed;
top:5px;
right:10px;
}
Apsolutni
Citat:
divnaziv
{
position:absolute;
left:75px;
top:55px;
}
Možete bilo koji element da pozicionirate sa ovim kodovima. U ovom slučaju mi smo promenili poziciju div-a (koji se ovde naziv nazivdiv, naravno pre svakog definisanja potrebno je da uneste naziv elementa)
Top definiše koliko elemnt treba da se nalazi pri vrhu stranice.
Left definiše koliko element treba da se nalazi u odnosu na levu stranu stranice (isto važi i za right-desno).
Sa z-index možete da definišete poziciju elementa u odnosu na drugi element
Float
Sa float opcijom možete da definišete prikaz elemenata na sajtu. Koristi se sledeći kod koji se isto unosi u css i koji utiče na html:
Citat:divnaziv
{
float:right;
}
Ovde smo isto definisali div i posle float: smo dodali right što znači da će element da se prikazuje na desnoj strani. Umesto right možete dodati i ostalo:
-left
-right
-none
Margine
Margine su prazna mesta oko stranice, možete da ih definišete sa sledećim css kodom:
Citat:margin
{
margin-top:150px;
margin-bottom:150px;
margin-right:80px;
margin-left:80px;
}
Isto se u prvom delu (pre koda) definiše element za koji postavljamo marginu. Margin top označava gornju marginu, margin bottom označavanja donju, margin-right desnu i margin-left levu marginu na veb sajtu.
Padding
Padding definiše prostor oko elementa (ali samo u granicama elementa- Ne važi za Internet Explorer).
U CSS se postavlja pomoću sledećeg koda:
Citat:padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
Isto padding top označava gornji prostor oko elementa, padding-bottom donji, padding-right desni i padding-left levi prostor od elementa na veb strani.
Ovo je bio poslednji post o osnovama html i css-a. Već od sledećeg posta krećemo sa izradom menija i pravih veb stranica. Do sledećeg posta!
|
|
|
|
|
|
|
Poslao: 11 Nov 2012 19:07
|
offline
- Pridružio: 13 Sep 2012
- Poruke: 2138
|
Samo da Vas obavestim da je u izradi tema, čiju ćemo detaljnu izradu korak po korak objasniti u sledećem postu 
|
|
|
|
|
|
|
Poslao: 12 Nov 2012 13:52
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- Gde živiš: 127.0.0.1
|
ilovephp ::Svaka oznaka mora da ima i kraj (tj da bude zatvorena). Oznake se zatvaraju kosom crtom /. Hajde da pogledamo kako to izgleda na ovim osnovim oznakama:
</html>
</head>
</body>
Svaka, osim "self-closing" tagova:
<br />
<img />
<hr />
<link />
ilovephp ::Padding definiše prostor oko elementa (ali samo u granicama elementa).
Po W3C Standardu. IE (naravno) ne postoje taj standard.
ilovephp ::-ili jednostavnim ukucavanjem reči (npr. Blue, green i slično)
Nikad ne ostavljaj browseru mogucnost da sam razmislja koju si boju hteo. Jer - npr FF moze "blue" da interpretira kao "#0000FF", dok je npr IE interpretira kao "#0000EE" i eto belaja. Lepo zakucas hex (#0000EE, ili skraceno #00E), ili rgb(0,0,255) i miran si.
ilovephp ::Div se dodaje pomoću koda:
Citat:<div id="divnaziv">
Jok. Div se dodaje pomocu:
<div></div>
a atribut id nema veze sa tim. Kad smo vec kod njega, ID bi trebalo da bude jedinstven na celoj stranici, odnosno da nema vise elemenata sa istim ID-em.
|
|
|
|
|
|
|
Poslao: 12 Nov 2012 14:23
|
offline
- Pridružio: 13 Sep 2012
- Poruke: 2138
|
Rastafarii ::ilovephp ::Svaka oznaka mora da ima i kraj (tj da bude zatvorena). Oznake se zatvaraju kosom crtom /. Hajde da pogledamo kako to izgleda na ovim osnovim oznakama:
</html>
</head>
</body>
Svaka, osim "self-closing" tagova:
<br />
<img />
<hr />
<link />
 Ispravljeno
ilovephp ::
Citat:Padding definiše prostor oko elementa (ali samo u granicama elementa).
Po W3C Standardu. IE (naravno) ne postoje taj standard.
Ispravljeno
ilovephp ::
Citat:-ili jednostavnim ukucavanjem reči (npr. Blue, green i slično)
Nikad ne ostavljaj browseru mogucnost da sam razmislja koju si boju hteo. Jer - npr FF moze "blue" da interpretira kao "#0000FF", dok je npr IE interpretira kao "#0000EE" i eto belaja. Lepo zakucas hex (#0000EE, ili skraceno #00E), ili rgb(0,0,255) i miran si.
Slažem se, nisam preporučio da se tako radi (mislim da sam napisao) ali sam samo rekao da može.
ilovephp ::Div se dodaje pomoću koda:
Citat:<div id="divnaziv">
Jok. Div se dodaje pomocu:
<div></div>
a atribut id nema veze sa tim. Kad smo vec kod njega, ID bi trebalo da bude jedinstven na celoj stranici, odnosno da nema vise elemenata sa istim ID-em.
Ispravljno, mislio sam na jednistven div a divnaziv je bio samo primer.
Hvala na poboljšanju bloga i ukazivanju grešaka. Ako nađeš još nešto slobono kaži- da ispravim. Ko radi taj i greši  . Pozz!
|
|
|
|
|
|
|
Poslao: 13 Nov 2012 14:50
|
offline
- Pridružio: 13 Sep 2012
- Poruke: 2138
|
Kako napraviti jednostavan sajt?
U prethodnih nekoliko postova naučili smo neke osnove što se tiče html i css:
1. Osnove HTML
2. Dodavanje teksta
3. Dodavanje slika
4. Kako promeniti pozadinu?
5. Linkovi
6. Forme i dugmad
7. Title, heading I div
8. Pozicija elemenata, float, marigine i padding
U ovom postu napravićemo jedan jednostavan veb sajt sa jednom slikom i nešto teksta na početnoj strani. Hajde da pogledamo kako se to radi:
1. Korak
Napravite novi css dokument i povežite ga sa html-om.
2. Korak
U body oznaci dodajte h1 tag i unesite naziv sajta.
Citat:<h1>Naziv sajta</h1>
Sada ćemo otvoriti jedan glavni div koji će formirati stranicu (okvir stranice-označeno crvenom bojom) i u kojem će se nalaziti ostali div-ovi za sliku i tekst na stranici.
3. Korak
Napravite glavni div za okvir stranice
Citat:<div id="glavnideo">
I ostavite ga otvorenog dok ne dodamo sve što će se nalaziti u tom div-u, na kraju ćemo ga zatvoriti.
4. Korak
Dodajte novi div u kojem će se nalazi slika i opis sajta:
Citat:<div id="glavnaslika">
<img src="slika.jpg" alt="Opis slike" height="50%" width="100%">
<center><h2>Opis vašeg sajta.....<h2></center>
</div>
5. Korak
Dodajte sledeća tri div-a jedan ispod drugog:
Citat:<div id="opis1">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nulla at magna venenatis non viverra ante elementum.</p>
</div>
<div id="opis2">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nulla at magna venenatis non viverra ante elementum.</p>
</div>
<div id="opis3">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nulla at magna venenatis non viverra ante elementum.</p>
</div>
Oni služe kako bi smo prikazali tri pasusa na početnoj stranici.
Na kraju kada smo sve dodali u glavni deo sajta (u glavni div) zatvorite taj div.
Znači sve spojeno (head i body oznaka) izgleda ovako:
Citat:<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Naziv sajta</h1>
<div id="glavnideo">
<div id="glavnaslika">
<img src="slika.jpg" alt="Opis slike" height="50%" width="100%">
<center><h2>Opis vašeg sajta.....</h2></center>
</div>
<div id="opis1">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nulla at magna venenatis non viverra ante elementum.</p>
</div>
<div id="opis2">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nulla at magna venenatis non viverra ante elementum.</p>
</div>
<div id="opis3">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nulla at magna venenatis non viverra ante elementum.</p>
</div>
</body>
</html>
Kada smo sve završili sa HTML-om vreme je da pređemo na css deo sajta. Otvorite css koji ste na početku napravili i unesite sledeće:
Citat:#glavnideo {
box-shadow: 0 0 5px #888;
width:60%;
position:absolute;
left:20%;
height:100%;
background-color:#ffffff;
}
body {background-image:url('index.png');}
h1
{
position:relative;
left:20%;
width:80%;
}
h2{
color: #989898 ;
font-style:italic
}
#opis1
{
position:relative;
left:10%;
width:20%;
}
#opis2
{
position:relative;
left:43%;
width:20%;
top:-21%;
}
#opis3
{
position:relative;
left:75%;
width:20%;
top:-42%;
}
U oznaci glavni deo imamo opcije:
Box shadow koja definiše boju oko okvira glavnog dela sajta
Width širinu
Poziciju (u ovom slučaju absolute)
Height visinu
I boju pozadine
U oznaci body imamo kod koji definiše pozadinu sajta (u ovom slučaju koristimo sliku kao pozadinu, što se i vidi iz priloženog koda).
Od ostalog imamo poziciju h1 i h2 teksta kao i poziciju 3 elemenata (pasusa) koji prikazuju tekst jedan pored drugog na početnoj stranici sajta.
Kada smo sve završili, sajt bi trebalo da izgleda ovako:
Ovo je bio jedan jednostavan tutorijale za izradu jednostavnog veb sajta. Kompletan veb sajt možete da preuzmete ispod. U sledećem postu naučićemo kako dodati vertikalni i horizontalni meni na istom primeru. Do sledećeg posta!
Preuzmite index.html
https://www.mycity.rs/must-login.png
Preuzmite style.css
https://www.mycity.rs/must-login.png
Preuzmite sliku koja se prikazuje na sajtu:
|
|
|
|
|
|
|
Poslao: 17 Nov 2012 15:23
|
offline
- Pridružio: 13 Sep 2012
- Poruke: 2138
|
Samo da Vas obavestim da uskoro stižu novi tutorijali, kao i da iste možete pratiti na novom veb sajtu koji stiže ovih dana:
Sajt je takođe optimizovan za mobilne uređaje:
Vidimo se!
|
|
|
|
|
|
|
|
|
|
Ali ima tu još dosta toga da se doda ovo je najviše za početnike 
