Web dizajn : mala škola HTML-a, CSS-a, javascript-a… – osnovna struktura web stranice

Web dizajn : mala škola HTML-a, CSS-a, javascript-a… – osnovna struktura web stranice

Vratimo se na naš prvi kod:

[sourcecode language=“html“]






[/sourcecode]

Kao što smo napomenuli, većina tagova u HTML-u mora da se „otvori“ i „zatvori“. To vidimo ovde za <html>, <head> i <body> tag. Tagovi se ne smeju ukrštati, tako da sledeća konstrukcija nija validna.

[sourcecode language=“html“]

&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/html&gt;
&lt;/body&gt;

[/sourcecode]

Html tag se ukršta sa body tagom, pa zato ovo ne valja.

Šta je ovde šta? html tag kazuje da se radi o html dokumentu, head sadrži podatke o stranici koje se ne vide na strani, a u body se nalazi sadržaj naše web strane.

Hajmo da stavimo nešto u head i body deo.

[sourcecode language=“html“]



Moja web stranica


moja prva web stranica


[/sourcecode]

Snimite ovaj fajl i prikažite ga u svom browseru (ako ste pratili uvodni čas, imate ga u bookmarks).

Pošto smo nešto stavili unutar body taga, logično je što vidimo na strani ovaj tekst. Ono na šta bih vam skrenuo pažnju je vrh vašeg web browsera (plava linija na vrhu ekrana) gde sada piše Moja web stranica. Očigledno title tag služi da prikaže neki tekst u vrhu browsera, ali pored toga, to je naslov vaše stranice i web pretraživači mnogo vole ovaj tag, jer on treba da pokaže šta se nalazi na toj strani. Nešto kao naslov odeljka u knjizi.

U body delu smo stavili novi tag, tj p. P je skraćeno od paragraf, (tj isto kao pasus u knjizi). Ovde bih skrenuo paćnju da postoji razlika između novog reda i novog paragrafa. Dodajte par linija koda i pogledajte u browseru.
[sourcecode language=“html“]



Moja web stranica


moja prva web stranica

Prvi pasus
Jedan red
Drugi red

Drugi pasus

&nbsp;


[/sourcecode]

Vidimo da imamo 3 paragrafa (sve što se nalazi između <p> i </p>, ali imamo i neke <br>. To je oznaka za novi red. Kad se malo više udubite u prikaz u browseru, videćete da je paragraf u stvari blok teksta koji ima gornju i donju marginu. <br> služi kad želite da dodate novi red unutar paragrafa.

Hajde da počnemo da gradimo malo kompleksniju stranicu. To će biti neka vrsta priče o vama. Počećemo sa osnovnim elementima, pa ćemo vremenom da dodajemo i stilove i nove tagove…

[sourcecode language=“html“]





Dušan Popović – moja priča


Rođenje i detinjstvo

Rodio sam se u Beogradu 1977. u bolnici u Narodnog fronta. Bio sam prosečno teška i prosečno visoka beba. Prvih par godina života se ne sećam uopšte.
Osnovnu školu sam pohađao blizu zgrade u kojom sam živeo, sve do šestog razreda kada sam se preselio malo dalje, pa sam počeo da putujem do škole autobusom.

Srednja škola

Izabrao sam najbližu srednju školu, tako da mi je opet škola bila ispred kuće. Škola, k’o škola, najviše sam voleo fizičko.


[/sourcecode]

Opa, sad već imamo nešto potpuno nerazumljivo u našem kodu.

Prva dva reda su nešto na šta ne treba da se mnogo obazirete. Ta dva reda možete da slobodno kopirate i paste-ujete. Samo ću reći da su to neki web standardi kojih se treba pridržavati. Verujte mi da ne treba sve da znate u ovom trenutku. Ovo je dobro mesto da ipak malo pogledate drugi red. Prepoznajemo html tag i ovde vidimo kako se tag proširuje dodatnim informacijama. To ćemo koristiti za neke tagove i ubuduće.

Sledeći red je takođe malo nerazumljiv na prvi pogled

[sourcecode language=“html“]

[/sourcecode]

U tom redu definišemo tzv charset, tj koja slova ćemo koristi. UTF-8 je najopštiji charset i pokriva i našu latinicu i ćirilicu i sva moguća slova na svetu.

Mislim da su ova tri reda jedina na prvi pogled nerazumljiva stvar u kodu sa kojom ćemo se sretati u ovoj maloj školi.

Kad pogledate ovo u web browseru, videćete početni stadijum vaše web stranice koja će opisati vaš život.

Da biste postali dobri u onome šta radite, treba da malo i eksperimentišete. Pogledajte šta će se desiti ako obrišete meta tag koji definiše charset, tj slova iz head dela vašeg sajta. Tako je to kad imamo slova koja ne postoje u engleskom jeziku. Ipak jezik treba čuvati, pa vas zato ohrabrujem da koristite đ, a ne dj, š, a ne sh i slične gluposti (od kojih je najveća kad neko piše w umsto v).

Rekli smo da se većina tagova sastoje iz dela za otvaranje taga i dela za zatvaranje. Ovde smo sreli meta tag koji nema deo za zatvaranje u obliku </meta>. Isti je slučaj i sa prvi redom našeg koda, tj sa DOCTYPE tagom. Videćete vremenom da je to potpuno logično, jer praktično vi nekim tagovima ne uokvirujete nikakav sadržaj, već samo jedan pojam.

Web dizajn : mala škola HTML-a, CSS-a, javascript-a… – uvodni čas