[HTML/CSS][Tutorijal]Kreiranje navigacije

Avgust 13, 2014, 23:04:11 POSLE PODNE

Tutorijal:Kako kreirati navigaciju na vas web site

Pozdrav svima nisam znao sta da radim pa sam resio da napisem jedan tutorijal da ozivim malo ovaj podforum, vidim da odavno nije napisano nista novo.
Kao sta kaze i sam naslov danas cu vam objasniti kako napraviti navigacija ili meni na web stranu.
Evo kako bi izgledala nasa navigacija:

1.Osnovne stvari u HTML delu
Prvo sto cemo uraditi je da kreiramo jedan file u koj cemo dodavati HTML deo. Prvo kreirajte jedna papka i u nje napravite jedan prazan text file i zacuvajte ga kao Index.html
Nakon sta napravite jedan prazan text file dodajemo neke osnovene elemente HTML dokumenta i njegove deklaracije:
Da postavimo te osnovne elemente:

Kod [Izaberi]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--Ovo pretstavja osnova deklaracija HTML koda, ovo sluzi da bi web pretrazivac uocio za koj programski jezik se radi-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>

Nakon sto dodamo osnovne elemente i deklaracije, u Head tagu dodajemo naslov nase web strane i link za povzrzavanje CSS dela sa HTML dela.
Naslov dodajemo sa <title> tagu.

Kod [Izaberi]

<title>Kako kreirati navigaciju</title>
Nakon sta smo dodali naslov nase strane dodajemo link za povrzavanje CSS i HTML dela.

Kod [Izaberi]

<link rel="stylesheet" href="style.css" />
2.Kreiranje Menija
Nakon sta smo postavili neke osnovne stvari na redu je deo gde kreiramo meni. Taj deo cemo staviti u tag BODY. Jer radimo sa eksteren css deo gde se kreira meni ili navigacija stavicemo u div da bude preglednije i laksije.
U BODY tagu kreiramo jedan DIV on se kreira na sledeci nacin

Kod [Izaberi]

<div id="navigacija"> Dali smo div-u id navigacija sta ni je potrebno za CSS deo.
Nakon sto kreiramo div sledeco za kreiranje su linkove u vidu liste. Linkove i liste kreiramo na sledeci nacin

Kod [Izaberi]

<a href="link do strane"><li>Text</li></a> Ovde koristimo <a> i <li> tagove.
Ja cu sad preskociti da vam objasnavam ceo deo gde stavjamo gde kreiramo liste i dodajemo linkove.
Evo vam deo kako treba da izgleda taj deo, naravno ako vi zelite mozete da dodate vise opcije na listu.

Kod [Izaberi]


<div id="navigacija">
	<a href="www.link.com"><li>Pocetna</li></a>
	<a href="www.link.com"><li>O nama</li></a>
	<a href="www.link.com"><li>Usluge</li></a>
	<a href="www.link.com"><li>Kontakt</li></a>
</div>

Na kraju zatvaramo DIV sa tagom

Kod [Izaberi]

</div>
To bi bilo sve sa HTML deo oko kreiranje navigacije.
Celi HTML del izgleda ovako:

Kod [Izaberi]

<!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>HTML & CSS Navigacija</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="navigacija">
	<a href="www.link.com"><li>Pocetna</li></a>
	<a href="www.link.com"><li>O nama</li></a>
	<a href="www.link.com"><li>Usluge</li></a>
	<a href="www.link.com"><li>Kontakt</li></a>
</div>
</body>
</html>

3.CSS
Da bi navigacija bila ono sto je potreban je CSS i njegova mogucnost stiliziranja.
Da zapocnemo:
Prvo sta treba da uradimo da kreiramo jedan prazan text file u istu papku gde je Index.html style.css
Onda odredujemo neke osnovne stvari kako bi trebala izgledati navigacija.

Kod [Izaberi]

#navigacija {
width: 500px; /* duÅ¾ina menija */
height: 50px; /* visina menija */
background-color: #00FFFF; /* kod za odreÄ'enu nijansu plave boje */
}

Tu odredujemo duzina visina navigacije i pozadinu navigacije.

Kod [Izaberi]

#navigacija a {
font-size: 15px; /* veliÄina teksta */
color: #FF7F50; /* kod za odreÄ'enu nijansu narandzaste boje */
}

U ovaj deo odredujemo velicina teksta i boja teksta sta stoji u navigaciju.

Kod [Izaberi]

#navigacija a li {
float: left; /* svi elementi se reÄ'aju jedan do drugog, po levoj strani */
width: 125px; /* duÅ¾ina elementa */
height: 35px; /* Å¡irina elementa */
list-style: none; /* uklonjene taÄkice */
padding-top: 15px; /* sadrÅ¾aj pomeren 15 piksela od gornje ivice unutar<ul> i <li>taga. */
text-align: center; /* centralno horizontalno poravnanje */

Ovde uredjujemo sve elemente navigacije kao sta su duzina poravnanje i ostalo.
#navigacija a li:hover {
background-color: #002F2F; /* odreÄ'ena nijansa tamno plave boje */
}
Ovaj del je kad prodjes sa mis na neki element iz navigacije da mu postavi naka boja.
To bi bilo sve i CSS del sve to zajedno izgleda ovako.

Kod [Izaberi]

#navigacija {
width: 500px; /* duÅ¾ina menija */
height: 50px; /* visina menija */
background-color: #00FFFF; /* kod za odreÄ'enu nijansu plave boje */
}
#navigacija a {
font-size: 15px; /* veliÄina teksta */
color: #FF7F50; /* kod za odreÄ'enu nijansu narandzaste boje */
}
#navigacija a li {
float: left; /* svi elementi se reÄ'aju jedan do drugog, po levoj strani */
width: 125px; /* duÅ¾ina elementa */
height: 35px; /* Å¡irina elementa */
list-style: none; /* uklonjene taÄkice */
padding-top: 15px; /* sadrÅ¾aj pomeren 15 piksela od gornje ivice unutar<ul> i <li>taga. */
text-align: center; /* centralno horizontalno poravnanje */
}
#navigacija a li:hover {
background-color: #002F2F; /* odreÄ'ena nijansa tamno plave boje */
}

Ukoliko nije vi nesta jasno mozete da skinete ceo paket i pogledate: DOWNLOAD

!!Ovaj tutorijal nije namenjen absolutne pocetnike u HTML/CSS, pre da radite ovo preporucijem vi da pogledate ovaj tutorijal:CLICK
Ukoliko imate neku zabelesku na ovaj tutorijal slobodno recite ja sam pocetnik u ovo pa mozno je da pravim neke greske i vi ste tu da mi pomognete da ih ispravim.

Â©Schwarz

Avgust 14, 2014, 00:47:32 PRE PODNE

Obogati jos malo pa cu je staviti na sticky, inace je dobro napisano. Mozda je trebalo jos malo objasnjenja s obzirom da je za pocetnike. Mnogi delovi koda su ubaceni, a nisu objasnjeni. U sustini videce sve kao graf. prikaz, ali trebalo bi da im se malo objasni.
Sredi to i bice sticky..

Avgust 14, 2014, 06:03:11 PRE PODNE

Ok objasnicu u toku dana malo HTML del, napomenuo sam ja da nije ovo za absolutne pocetnike.

Avgust 14, 2014, 12:26:59 POSLE PODNE

Citat: Schwarz poslato Avgust 14, 2014, 06:03:11 PRE PODNE
Ok objasnicu u toku dana malo HTML del, napomenuo sam ja da nije ovo za absolutne pocetnike.

Sredi jos malo i stavicu sticky. Inace, hteo bih da te pohvalim zbog jezika, s obzirom da si iz Makedonije, koliko se secam (y)

Avgust 17, 2014, 01:41:58 PRE PODNE

BUMP! Autor je editovao temu, doradio je kako bi bila laksa za citanje i ucenje. S toga, ide sticky

[HTML/CSS][Tutorijal]Kreiranje navigacije

Schwarz

Denis_Lapi

Schwarz

Denis_Lapi

Denis_Lapi