HTML/CSS za početnike #4 - Početak izrade stranice

     Da se podsetimo, u prethodnoj lekciji smo isplanirali naš budući sajt i počeli sa popunjavanjem “tela” HTML dokumenta, tj. podelili smo stranicu na sekcije prema osmišljenom planu. Od ove lekcije počećemo sa ubacivanjem nekih elemenata koji će biti vidljivi preko pretraživača.
     Kada se radi sajt koji ima više od jedne stranice najbolje je da se prvo odrade delovi na početnoj stranici koji su isti na svim drugim stranicama, pa da se onda ceo HTML početne stranice kopira u HTML dokumente ostalih stranica, i na kraju se na svakoj stranici posebno rade unikatni delovi.Mi ćemo u ovoj lekciji odraditi zaglavlje, podnožje i navigacioni meni.

Zaglavlje


     U zaglavlju stranice mogu se nalaziti različiti elementi. Nešto osnovno što bi svako zaglavlje trebalo da ima jeste naziv sajta i eventualno neki slogan ili kratki opis. To je upravo ono što ćemo i mi postaviti na naš sajt.
     Naslovi se u HTML-u unose pomoću “heading” tagova. Postoje šest heading tagova i pišu se <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. pri čemu je h1 najveći naslov a h6 najmanji naslov. Na primer sledeći kod na stranici:

<h1>Ovo je h1 naslov</h1>
<h2>Ovo je h2 naslov</h2>
<h3>Ovo je h3 naslov</h3>
<h4>Ovo je h4 naslov</h4>
<h5>Ovo je h5 naslov</h5>
<h6>Ovo je h6 naslov</h6>


     Biće prikazan na sledeći način:


     Mi ćemo na naš sajt staviti naslov sajta u recimo h2 tag i ispod njega neki slogan u h5 tag (možete menjati tagove po želji, veličina nije toliko bitna jer se detaljnija podešavanja veličine vrše kasnije u CSS-u). U zaglavlje (header) stranice unesite sledeći kod:

<h2>Moj prvi sajt</h2>
<h5>Uskoro ću biti pravi web dizajner.</h5>


     I time smo završili zaglavlje stranice.

Podnožje


     U podnožju stranice obično se stavljaju informacije o autorskim pravima vlasnika sajta itd. Da ne dužimo priču oko ovoga samo unesite sledeći tekst u “footer” sekciju dokumenta. Tekst možete da stavite u <p> tagove ali i ne mora jer sami <div> tagovi mogu da sadrže tekst.

&copy; 2014 Web Škola | wskola.blogspot.com

     Ovo je samo primer jednog podnožja. Vi promenite tekst tako da u podnožju stoji vaše ime ili ime vašeg sajta. &copy; je HTML šifra za “copyright” simbol ©.
     Sada proverite da li ste sve odradili kako treba. Vaš dokument treba da izgleda ovako:


     Ako je sve u redu napravićete još dva nova dokumenta u istom folderu i nazvati ih kontakt.html i linkovi.html. Sad ceo index.html dokument iskopirajte u ova dva nova dokumenta i jedino promenite naziv dokumenta tako da na kontakt stranici bude <title>Kontakt</title> a na stranici “linkovi” <title>Linkovi</title>.
     Naš sajt sada ima tri stranice pa možemo da krenemo sa navigacijom.

Navigacioni meni


     Navigacioni meni predstavlja skup linkova koji vode ka stranicama unutar sajta. Linkovi u HTML-u se unose pomoću <a> taga. Obavezan atribut unutar <a> taga je “href” atribut koji sadrži adresu stranice ka kojoj vodi link (ciljna stranica). Ako se ciljna stranica nalazi u istom folderu kao i stranica na kojoj se nalazi link dovoljno je da se u “href” atribut unese samo pun naziv dokumenta.

<a href="stranica.html">Stranica</a>

     Ako se ciljna stranica nalazi u nekom folderu treba se navesti puna “staza” do stranice

<a href="folder/stranica.html">Stranica</a>

     I na kraju link može voditi i ka nekom drugom sajtu pri čemu se piše puna adresa sajta.

<a href="http://wskola.blogspot.com">Web Skola</a>

     U našem navigacionom meniju dodaćemo tri linka koja vode ka tri naše stranice. Unesite sledeći kod u “nav” sekciju sva tri HTML dokumenta.

<a class="nav" href="index.html">Početna</a>
<a class="nav" href="kontakt.html">Kontakt</a>
<a class="nav" href="linkovi.html">Linkovi</a>


     Primetili ste da sam stavio još jedan atribut, “class” atribut ima istu funkciju kao i “id” atribut - da imenuje elemente. Razlika je samo u tome što se “id” upotrebljava kada se imenuje jedan jedinstveni element, a kada imamo više istih elemenata koji se ponavljaju (kao naši navigacioni linkovi) daje im se “class” atribut. Sa još nekim atributima linkova ćemo se upoznati u nekim narednim lekcijama.
     U ovoj lekciji počeli smo sa konkretnom izradom stranice pa su sada rezultati vidljivi i putem web pretraživača. Otvorite početnu stranicu u vašem web pretraživaču i ako ste sve odradili kako treba rezultat treba da bude sledeći:


     Možete da proverite da li rade linkovi ka drugim stranicama. Druge stranice biće identične samo će biti drugačiji nazivi stranica. U sledećoj lekciji ćemo nastaviti sa daljom izradom.

6 comments:

  1. Kao totalnog početnika u učenju HTML-a, interesuje me zbog čega se uopšte u zagradi u koraku u kom se dodaju podstranice, stavlja i - class="nav", kad se podrazumeva da je sve to već smešteno pod odeljak < div id="nav" > ... < /div >

    Hvala! :)

    ReplyDelete
    Replies
    1. class="nav" se odnosi na linkove, ovo nije obavezan atribut, ali sam ga ja stavio da bi se navigacioni linkovi razlikovali od ostalih linkova na stranici. Naravno ovo moze da se resi i tako sto u css-u definisemo samo
      #nav a {...}
      ali sam ja namerno stavio klase kao primer za njihovo koriscenje.

      Delete
  2. Kao prvo, blog je fantastican i totalno eazumljiv. Hvala!
    Kao drugo, meni se ne vidi podnozje, odnosno text podnozja i ne mogu da kucam latinicna slova.
    Kako resiti problem?
    Unapred zahvalna

    ReplyDelete
  3. Ispravka, * razumljiv :)

    ReplyDelete
  4. Jedno pitanje,
    ukucani tekst u notepad-u nece da mi se otvoti u internet pretrazivacu kao sto treba?
    sta raditi? Hvala

    ReplyDelete
    Replies
    1. Promenite samo ekstenziju na dokumetima umesto txt, upisite html i trebalo bi da radi. to uradite na sva tri dokumenta index, kontakt, linkovi.

      Delete