WEB Dizajn Tutorijali

2

WEB Dizajn Tutorijali

offline
  • Fil  Male
  • Legendarni građanin
  • Pridružio: 11 Jun 2009
  • Poruke: 16434

Blog je prva liga.Svaka cast na inicijativi i lepo strukturiranom tekstu Ziveli



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
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! Ziveli



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! Ziveli

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 Smile

offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3667
  • 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.

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 />


Arrow Ispravljeno

ilovephp ::
Citat:Padding definiše prostor oko elementa (ali samo u granicama elementa).
Po W3C Standardu. IE (naravno) ne postoje taj standard.




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

Arrow Slažem se, nisam preporučio da se tako radi (mislim da sam napisao) ali sam samo rekao da može. Smile

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.

Arrow 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 Mr. Green . Pozz! Ziveli

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! Ziveli

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:

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! Ziveli

offline
  • Research Engineer @MalwareBytes
  • Pridružio: 09 Avg 2011
  • Poruke: 15877
  • Gde živiš: Beograd

Svaka ti cast na volji da otvoris ovu temu Smile. Sa HTML-om se poprilicno dobro snalazim, ovo ce mi dobro doci kao neki podsetnik/mesto da se podsetim Smile

offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4534

Lepo je što si našao vremena da objasniš sve pojedinosti HTML-a Very Happy Ali ima tu još dosta toga da se doda ovo je najviše za početnike Ziveli

Ko je trenutno na forumu
 

Ukupno su 662 korisnika na forumu :: 9 registrovanih, 4 sakrivenih i 649 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: alkatraz080, Bane san, dragoljub11987, ILGromovnik, mane123, Misirac, oddsock, repac, Snorks