U prošloj lekciji objasnili smo šta nam je potrebno da započnemo sa radom kao i kako se pišu tagovi.

HTML <!DOCTYPE> deklaracija

U ovom tutorijalu trebaće nam deklaracija i za početak prekopirajte kod ispod u Vaš index dokument ( ukoliko Vam je ostao predjašnji kod iz prošlog tutorijala“<p> Ovo je neki paragraf </p>“ izbrišite ga, pa potom prekopirajte kod) :

<!DOCTYPE html>

<html>

         <head>

                    <title> Naslov dokumenta</title>

          </head>

          <body>

              Sadrzaj dokumenta

          </body>

<html>

Imamo nekoliko nejasnoća, a to su:

head – predstavlja glavu dokumenta. Ono što pišemo u ovom delu neće biti vidljivo na sajtu, ali obuhvata jako bitne kodove sa kojima ćemo se kroz lekcije upoznati.

title- predstavlja naslov stranice. Ovaj tag je neizostavan u dokumentu i karakteriše naslov u internet pretraživačima i sadrži do 60 karaktera.

body – predstavlja telo dokumenta. Ovo je sadržaj koji je vidljiv putem internet pretraživača.

Odredjivanje izgleda sajta

Prvo moramo da zamislimo sajt kako će izgledati i koliko će strana imati. Mi ćemo u tutorijalu imati 3 stranice, a to su:

  • Početna (Home) strana – ovo je stranica na koju će se sve ostalo nadovezivati,
  • Kontakt – gde će biti svi kontakt podaci koje želimo da pružimo
  • Linkovanje – gde ćemo linkovati na druge sajtove

A za fizički izgled izabraćemo strukturu sajta koja bi izgledala ovako:

header,navigation,content,sidebar,footer

Ova struktura nam govori da ćemo imati 5 delova stranice i ovo je manje više šablon kada je u pitanju izrada sajtova.

Header ( zaglavlje ) – će nam biti ne promenjivi deo svake stranice i u njega se obično može dodati logo, slogan, naziv sajta, naziv firme itd.

Navigation ( navigacija ) – takodje ćemo ostaviti da bude ista na svim stranama, i ona će posedovati linkove ka drugim stranicama unutar našeg sajta, tj. tu ćemo grupisati naše stranice Početna ( home ), Kontakt i Linkovanje.

Content ( sadržaj ) – predstavlja sadržaj svake stranice, pa će samim tim i ono što je u njemu biti različito.

Sidebar ( bočni meni ) – je zapravo deo sajta u kome možemo da sadržimo neke propratne delove, kao što su reklame, kao i bilo šta što smatrate sporednim delom sajta a opet želite da istaknete.

Footer ( podnožje ) – je isti na svim stranicama i obično sadrži copyright-informacije.

Sada kada znamo kako će nam sajt izgledati idemo da sve to napravimo.

DIV i SPAN elementi

Za razliku od tagova za naslove h1,h2.. ili paragrafe itd. <div></div> i <span></span> elementi nam pomažu da postavimo svoje „blokove“ unutar stranice. U našem slučaju blokovi su: header, navigation, content, sidebar i footer i bukvalno možemo zamisliti da ovaj okvir tih blokova zapravo predstavlja jedan div ili span element. Pitate se sigurno u čemu je onda razlika izmedju ova dva elementa. Div element se „slažu“ jedan ispod drugog, a span jedan pored drugog. U slici ispod to možete i videti.

div span elements

Kako bismo to i praktično uradili prekopirajte kod ispod u body deo ( ukoliko Vam je ostavo tekst „Sadrzaj dokumenta“ obrišite ga pa potom prekopirajte kod ispod):

<div id=“header“>
</div>

<div id=“navigation“>
</div>

<div id=“menu“>
</div>

<div id=“footer“>
</div>

Novina je „id“ unutar svakog otvarajućeg koda, a on definiše naziv elementa, a u daljem tekstu saznaćete zašto je to bitno.

Kao što vidite nemamo content i sidebar divove, ali to je zato što želimo da se unutar menu diva nalaze ova dva, zapravo menu je „roditelj“ content i sidebar divovima u našem slučaju, pa ćemo sada unutar menu diva prekopirati sledeći kod:

<div id=“content“>
</div>

<div id=“sidebar“>
</div>

Komentari unutar HTML dokumenta

Ako Vam je lakše možete koristiti i komentare, dobri su radi lakšeg snalaženja prilikom kodiranja i oni se pišu ovako:

<!– Ovo je neki komentar –>

Mogu se nalaziti bilo gde i nemaju uticaja na sajt, niti se bilo gde vide osim u html kodu. Pošto smo na početku učenja koristiću neke komentare, a Vi ako smatrate da Vam ne trebaju ne morate, jer je izrada ovog sajta jednostavna i lako ćemo se snalaziti u kodu. Ja sam ih dodao u naš sajt i ako ste ispoštovali sve korake to bi trebalo izgledati ovako:

html code, html

Ukoliko to nije baš ovako složeno, radi preglednosti preporučujem Vam HTML formatter, koji će sve srediti i postaviti na svoje mesto.

Da rezimiramo:

U ovom delu tutorijala saznali smo sta je doctype deklaracija, naučili kako da isplaniramo svoj sajt i šta su to div i span elementi.

Idemo na sledeću lekciju.