HTML/CSS za početnike #3 - Planiranje web sajta

     U prethodnoj lekciji videli smo kako izgleda osnova HTML dokumenta. U ovoj lekciji krenućemo sa popunjavanjem “tela” HTML dokumenta, odnosno “vidljive” web stranice. Međutim, pre nego što se krene sa samom izradom stranice, uvek je poželjno da se napravi osnovni plan izgleda web sajta.

Planiranje web sajta

     Planiranje web sajta treba da obuhvati planiranje samog izgleda stranice i planiranja broja stranica koje će sajt da sadrži kao i sadržaje tih stranica. Za sada ćemo napraviti sajt sa tri stranice, a kasnije ćemo možda dadati još koju stranicu:

1) Početna stranica - Svaki sajt mora da ima početnu stranicu, sadržaj ove stranice može da bude različit, npr. blogovi na ovoj stranici imaju same članke, statične web prezentacije imaju neki kratak opis onoga što prezentuju itd. Pošto mi sada radimo sajt isljučivo zbog učenja, sam sadržaj nije toliko bitan. Recimo da na početnoj stranici bude poruka dobrodošlice.

2) Kontakt stranica - Kao što i sami zaključujete, na ovoj stranici se nalaze kontakt podaci vlasnika sajta.

3) Stranica “Linkovi” - Stranica koja će da sadrži linkove ka nekim drugim sajtovima

     Pošto smo isplanirali stranice koje će sajt da sadrži, treba da isplaniramo izgled stranice i da ga skiciramo na papiru ili u nekom programu za crtanje kao što sam ja uradio.

     Kao što vidite stranica će da se sastoji iz nekoliko delova - sekcija. Zaglavlje (header) je deo koji na kome će biti naziv sajta i eventualno neki slogan i on će biti isti na sve tri stranice našeg sajta. Podnožje (footer) obično sadrži “copyright” informacije i takođe je isti na sve tri stranice. Navigacioni meni sadrži linkove ka ostalim stranicama sajta i biće malo drugačiji na svakoj stranici. Srednji deo stranice biće podeljen na dva dela: glavni deo stranice predstavlja unikatni deo svake stranice i u njemu će se prikazivati sam sadržaj date stranice, dok bočni deo može da sadrži različite stvari kao što je neki sporedni meni, reklama itd. Ovaj srednji deo nećemo moći da podelimo u dve kolone korišćenjem samo HTML-a. Za taj posao je zadužen jedan drugi jezik koji se zove CSS, i koji uvek ide zajedno sa HTML-om. Mi ćemo doći do CSS-a doći u nekoj u narednih lekcija, i ono što sada možemo da uradimo je da podelimo web stranicu u date sekcije samo vertikalno - jedna sekcija ispod druge.

Deljenje web stranice na sekcije - <div> i <span> elementi

     <div> i <span> elementi u HTML-u nemaju neko posebno značenje. Oni uglavnom služe za grupisanje većeg broja HTML elemenata u jednu celinu - sekciju. Razlika izmedju <div> i <span> elemenata je u njihovom raspoređivanju na web stranici. <div> elementi spadaju u “block” elemente, što znači da se <div> elementi raspoređuju u blokovima jedan ispod drugog, i svaki <div> elemenat zauzima celokupnu širinu dokumenta (ukoliko nije drugačije definisano u CSS-u, ali o tome ćemo kasnije). Za razliku od njih <span> element spada u “inline” elemente. Ovi elementi se ponašaju kao tekst - ređaju se jedan pored drugog bez novih redova. Na primer ukoliko u HTML dokument stavimo tri <div>, odnosno tri <span> elementa, jedan ispod drugog dobiće se ovakvi rezultati:

     Pošto mi želimo da podelimo našu web stranicu u blokove kao na skici koristićemo div elemente. Sada u telo dokumenta unesite sledeće elemente:

<div id=”header”>
</div>

<div id=”nav”>
</div>

<div id=”main”>
</div>

<div id=”footer”>
</div>

     Prvo što ste primetili je da unutar otvarajućeg <div> taga stoji nešto kao id=”header”. Ovo se naziva HTML atribut koji dodatno definiše neki HTML element i uvek se piše unutar otvarajućeg taga. Kao što se vidi iz prethodnog primera atributi se pišu prema sledećoj sintaksi:

<tag atribut="vrednost atributa">

     Atribut “id” ima funkciju da imenuje određeni element, tako da možemo da menjamo stajling tog elementa u CSS-u bez da narušavamo izgled ostalih elemenata. Atribut “id” može da ima bilo koju vrednost (možete da imenujete elemente kako god želite) samo je poželjno da to ime bude unikatno, odnosno da ne postoje elementi sa istim imenom na stranici. Ja sam dao engleske nazive za zaglavlje, podnožje, navigaciju, itd. jer su oni nekako odomaćeni kod web programera i dizajnera širom sveta. Vi možete da imenujete elemente kako god vi želite. Postoje i neki atributi koji mogu da imaju samo nekoliko određenih vrednost ali se ja neću zadržavati oko toga jer ćemo se sa njima upoznavati u hodu.
     Druga stvar koju vidite je da smo podelili telo stranice na četiri sekcije, i to zaglavlje (header), navigacioni meni (nav), glavni deo stranice (main) i podnožje (footer).
     Sada ćemo sekciju “main” podeliti na dve podsekcije, jednu za sam sadržaj sajta i drugu za bočni meni. Unutar <div id=”main”> unesite sledeće elemente:

<div id=”content”>
</div>
<div id=”sidebar”>
</div>

HTML komentari

     Još jedna bitna stvar kod izrade HTML dokumenta je ostavljanje komentara. Komentari nisu HTML elementi i ne prikazuju se na stranici ali čine HTML dokument preglednijim što je jako bitno kada se rade veliki dokumenti sa složenijom strukturom. Komentari se pišu sintaksom:

<!-- Tekst komentara -->

     Za primer možete da pogledate kako sam ja obeležio našu stranicu komentarima i ujedno uporedite vaš dokument sa mojim da vidite da li ste sve odradili kako treba.

     Da rezimiramo, u ovoj lekciji krenuli smo sa popunjavanjem tela HTML dokumenta, odnosno krenuli smo sa deljenjem naše stranice na sekcije. Zatim smo se susreli sa našim prvim HTML atributom i upoznali se sa komentarima. Na web stranici još uvek nema nikakvih vidljivih promena, ali već u narednoj lekciji ćemo odraditi nešto konkretno što će se videti i kroz internet pretraživač.