U prošloj lekciji naučili smo šta su div i span elementi, kako da isplaniramo i započnemo izradu sajta. Pa da nastavimo.

Prvo ćemo početi sa izradom divova koji će nam biti isti na svim stranama.

Header (zaglavlje)

Kao što sam već rekao u predjašnjoj lekciji ovaj deo sajta obično sadrži logo, slogan, naziv firme ili naziv sajta, tako da ćemo i sada ubaciti jedan naslov kako biste videli kako to izgleda.

h1, h2, h3 … h6 heading tagovi

Za naslove koristimo h tagove i oni se pišu ovako:

<h1>Ovo je H1 naslov, najveći mu je font i samo ga jednom upotrebite na stranici</h1>

<h2>Ovo je H2 naslov i manji je fontom od H1 naslova </h2>

<h3>Ovo je H3 naslov i manji je fontom od H2 naslova </h3>

<h6>Ovo je H6 naslov i manji je fontom od H5 naslova</h6>

Kao što vidite, naslovi su rangirani od H1-H6. H1 po prirodi ima najveću veličinu slova, dok svaki naredni ima sve manju i manju (kasnije možemo uticati na veličinu slova naših h tagova korišćenjem CSS-a). Bitnost naslova je takodje rangirana, pa je H1 glavni naslov na stranici, a svi ostali imaju manji uticaj, H2 je bitniji od H3, H3 je bitniji od H4 itd.

Jednostavno težite da naslove upotrebljavate prirodno jer oni pomažu pretraživačima da prepoznaju koji se sadržaj nalazi na stranici. H1 je najbitniji i logično je da postoji samo jedan na stranici (to je i pravilna upotreba H1 taga). H2 je podnaslov H1, H3 je podnaslov H2 itd. i trudite se da ih tako koristite. Naslovi trebaju da sadrže ključne reči jer će to pomoći SEO optimizaciji, ali nemojte preterivati i trudite se da te ključne reči ne budu u istom obliku.

Kako bismo i praktično ubacili H tag u naš sajt prekopirajte kod ispod u Vaš header div:

<h2> Ovde cemo napisati naziv firme ili sajta </h2>

<h4> Ovde cemo napisati slogan firme ili sajta</h4>

Sada smo uneli ono što smo trebali u zaglavlje i za sada je to dovoljno, a Vi će te na kraju tutorijala steći veštine da mnogo atraktinije uradite svoje zaglavlje.

Footer (podnožje)

Ovde uglavnom postavljamo autorska prava, pa ćemo u paragraf tagu u našem footer divu prekopirati sledeći kod:

<p>&copy 2015 Izrada sajtova Beograd, www.izradasajtova-beograd.com</p>

&copy zapravo predstavlja © kada pogledate rezultat koda u browser-u.

Navigation (Navigacija)

Kako bismo napravili navigacioni meni na sajtu potrebne su nam stranice ka kojim ćemo povezati svoju navigaciju, tako da sada u istom folderu u kome su Vam index.html i style.css napravite nove 2 stranice pod nazivom kontakt.html i linkovanje.html (ukoliko ste zaboravili kako to da odradite vratite se na 1. lekciju), pa nakon toga unutar te dve stranice prekopirajte sve kodove iz dokumenta index.html.

Sada unutar sve tri html stranice u navigation divu prekopirajte sledeće kodove pa ćemo ih objasniti:

<a class=“nav“ href=“index.html“>Pocetna</a>

<a class=“nav“ href=“kontakt.html“>Kontakt</a>

<a class=“nav“ href=“linkovanje.html“>Linkovanje</a>

Class, id i href atributi

Po prvi put se susrećemo sa class i href atributima.

Class vrši funkciju davanja naziva elementu, isto kao i id, ali razlika postoji. Kada ima više ponavljajućih istih elemenata (isto ko u linkovima u našoj navigaciji) onda koristimo class, a kada dajemo naziv jednom elementu koji je jedinstven koristimo id.

Href atribut je obavezan u a tagu. On nam govori gde će nas odvesti link klikom na reč unutar a taga.

Da ne bude komfuzno kroz naš primer <a class=“nav“ href=“kontakt.html“>Kontakt</a> objasnićemo. U ovom slučaju klikom na reč Kontakt otićićemo na sadržaj koji se nalazi pod nazivom kontakt.html.

Jedna napomena za href atribut je da kada se dokument nalazi u istom folderu gde i dokument sa kog linkujemo, kao u našem slučaju onda pišemo samo naziv dokumenta, a ukoliko se dokument ka kom linkujemo nalazi izvan onda moramo dati prefiks foldera. Evo i primera kako bi bilo jasnije:

<a class=“nav“ href=“linkovanje.html“>Linkovanje</a> – primer za dokument u istom folderu kao u našem slučaju

<a class=“nav“ href=“nekifolder/linkovanje.html“>Linkovanje</a> – primer kada se dokument nalazi u drugom folderu

Imamo još jednu varijantu koju valja naučiti a nju koristimo kada linkujemo ka drugim sajtovima kao recimo:

<a class=“nav“ href=“http://izradasajtova-beograd.com/“>Izrada sajtova – Beograd</a>

U ovom slučaju klikom na reči Izrada sajtova – Beograd idemo na sajt – http://izradasajtova-beograd.com

Još nešto korisno da naučimo je i target atribut, a evo i primera:

<a class=“nav“ href=“http://izradasajtova-beograd.com/“ target=“_blank“>Izrada sajtova Beograd</a>

Ovaj target atribut nam zapravo govori da klikom na reči Izrada sajtova Beograd želimo da otvorimo adresu http://izradasajtova-beograd.com/ u new tab-u. Isprobajte kroz neki primer korišćenje ovog atributa i sve će Vam biti jasno.

Kada smo sve odradili i naše promene pogledali na browser-u još uvek nemamo sajt koji je estetski lep. Za to nam je potreban CSS. U daljim lekcijama korišćenjem CSS-a daćemo našem sajtu i lep izgled.

Da rezimiramo:

U ovoj lekciji naučili smo kako se pravilno koriste h tagovi, kada koristimo class, a kada id atribute i kako se linkuje na druge stranice.

Idemo na sledeću lekciju.