TAGOVI

Ovde cu navesti neke najcesce koriscene HTML tagove:

Tag Sta radi ?

<html></html> Identifikuje dokument kao HTML dokument da bi nas web browser znao o cemu se radi.

<head></head> Glava HTML dokumenta. U njoj stoji NASLOV dokumenta, keywords, css i java skripte.
<body></body> Tzv. telo dokumenta. Sve sto vidite na ovoj ili nekoj drugoj strani stoji u BODY (telu dokumenta).

<title></title> Stoji u glavi HTML dokumenta i precizira njegov NASLOV.

<h1></h1>...<h6></h6> Sluzi za naslove i podnaslove. Postoji sest unapred definisanih velicina.

<p></p> Oznacava pocetak tj. kraj pasusa.

<b></b> Podebljava tekst.

<i></i> Italic tekst.

<a></a> Tzv. sidro (eng. Anchor) Sidrisna tacka. Postavlja link.

<br> Prelom reda. Automatski spusta tacku ispisa u sledeci red. Ovaj tag ne treba mesati sa tagom za pasus.

Idemo redom. Objasnicemo tagove koji prakticno zapocinju vas HTML kod. Osnovni tag HTML koda jeste <html>. Njegova uloga je da identifikuje dokument kao HTML dokument da bi nas web browser znao o cemu se radi. Sa njim pocinje i zavrsava se svaki HTML dokument. Druga dva bitna taga su <head> (glava) i <body> (telo). Svaki HTML dokument ima podelu na glavu i telo dokumenta.
Glava tj <head> dokumenta sadrzi ime i opste osobine stranice. Pogledajte gornji levi ugao vaseg browsera. Vidite li tekst: Mala skola HTML-a ? To je naslov koji sluzi za identifikaciju celog HTML dokumenta. Glava sadrzi i kljucne reci koje pomazu pretrazivacu da nadje stranicu kao i java skripte, css. Ostanimo za sada na NASLOVU stranice. Naslov se postavlja tagom <title>. Pogledajte trecu liniju koda ove stranice. Verujem da vam je jasno. Da sumiramo. U okviru glave dokumenta postavlja se naslov dokumenta. Primer:

<html>
<head>
<title>NASLOV VASE STRANICE</title>
</head>

Dakle ovde imamo 4 prve linije HTML dokumenta:

<html> - linija koja kaze pocinje HTML dokument.
<head> - linija koja kaze da pocinje glava HTML dokumenta.
<title>NASLOV VASE STRANICE</title> - linija koja kaze da u toj glavi imamo NASLOV dokumenta.
</head> - linija koja kaze da se zavrsava glava HTML dokumenta.

Stigli smo i do tela dokumenta. To je <body>. Sve ono sto vidimo na web stranici, ovoj ili nekoj drugoj, stoji u telu dokumenta. To je deo gde cemo najvise raditi. Gde kreativnost pocinje i ideje postaju realnost. Kako lepo receno. Ipak za to cemo se morati dobro potruditi. Prvo treba da naucimo kako sve te ideje da pretvorimo u realnost. Sada pogledajte prvih pet linija HTML-a ove stranice:

<html>
<head>
<title>Mala skola HTML-a</title>
</head>
<body>

Sad vec ne moram da vam objasnjavam posebno svaku liniju. Naucili ste da zapocnete vas HTML dokument. Treba napomenuti da ove tagove koje smo sada pomenuli necemo puno koristiti. Vec sam rekao da <html> tag ide samo na pocetku i na kraju kompletnog HTML dokumenta s' tim sto se na kraju tom tagu dodaje kosa crta koja oznacava kraj taga i samog dokumenta </html>. Hajde da napravimo jedan kratak HTML dokument da bi sve sumirali sto smo do sada prosli. Otvorite vas Notepad ili WordPad. Ukucajte:

<html>
<head>
<title>NASLOV VASE STRANICE</title>
</head>
<body>
Ovde je sadrzaj vase stranice sa tekstom, slikama, linkovima itd.
</body>
</html>

Cestitam ! Upravo ste napisali svoj prvi HTML dokument. Obratite paznju kako smo zapoceli i zavrsili dokument. Pre svega mislim na tagove HTML i BODY. Tag koji smo poslednji otvorili, prvog cemo i da zatvorimo. Ako to ne postujemo moze se desiti da se web browser zbuni. Da bi smo to izbegli postovacemo to pravilo. To vazi za sve tagove u HTML-u koji se zatvaraju.Kazem "koji se zatvaraju" jel postoje tagovi koje i ne morate da zatvorite ali o tome cemo kasnije. Sada snimite (save as) vas dokument i nazovite ga index.html. Otvorite fajl u vasem web browseru. Vasa stranica je spremna da je postavite na internet.

Hajde sada malo da se pozabavimo tagovima za tekst. Pomenucemo samo one koji su u cescoj upotrebi a vremenom cemo nase znanje prosirivati i dopunjavati.

Krenucemo od jednostavnih tagova kojima mozemo da podebljavamo, podvlacimo, precrtamo ili nakrivimo (italic) tekst. U pitanju su sledeci tagovi:

<b> - podebljava tekst
<strong> - takodje podebljava tekst
<u> - podvlaci tekst
<strike> - precrtava tekst
<i> - italic tekst

Ovih pet tagova je jednostavno primeniti. Potrebno je samo da ispred teksta postavite tag za odredjeni efekat koji zelite. Ne zaboravite da zavrsite tag kada vise ne zelite efekat na tekstu.
Dacemo primere za svih pet efekata:

Ovaj tekst je podvucen. Kada pisemo to izgleda ovako: <u>Ovaj tekst je podvucen</u>
Ovaj tekst je podebljan. Kada pisemo to izgleda ovako: <b>Ovaj tekst je podebljan</b>
Ovaj tekst je italic. Kada pisemo to izgleda ovako: <i>Ovaj tekst je italic</i>
~~Ovaj tekst je precrtan~~. Kada pisemo to izgleda ovako: <strike>Ovaj tekst je precrtan</strike>
Ovaj tekst je podebljan. Kada pisemo to izgleda ovako: <strong>Ovaj tekst je podebljan</strong>

Znaci kada pisete HTML, bilo u Notepad-u, WordPad-u ili u Word-u, naravno da necete odmah videti efekat bilo kog taga sve dok ne pogledate stranicu u web browseru. Rekli smo da su web browseri ti koji citaju HTML. Ne Notepad, WordPad ili Word. Opet ponavljam pazite da ne zaboravite da zatvorite tag inace ce efekat na vas tekst biti drugaciji od zeljenog. Sad smo videli kako je jednostavno uraditi pet razlicitih efekata sa pet razlicitih tagova.

To nije sve. Mozda ste se pitali kako da naglasite naslove stranica ili odeljaka. HTML razlikuje 6 velicina naslova ili Heading-a. Njihove tagove sam vec pomenuo na prvoj strani ali cu ih ponoviti:

<h1></h1> <h2></h2> <h3> </h3> <h4></h4> <h5></h5> <h6></h6>

Kako ovi tagovi menjaju tekst? To cemo videti iz sledeceg primera:

OVO JE VELICINA 1

Kada pisemo to izgleda ovako: <h1>OVO JE VELICINA 1</h1>

OVO JE VELICINA 2

Kada pisemo to izgleda ovako: <h2>OVO JE VELICINA 2</h2>

OVO JE VELICINA 3

Kada pisemo to izgleda ovako: <h3>OVO JE VELICINA 3</h3>

OVO JE VELICINA 4

Kada pisemo to izgleda ovako: <h4>OVO JE VELICINA 4</h4>

OVO JE VELICINA 5

Kada pisemo to izgleda ovako: <h5>OVO JE VELICINA 5</h5>

OVO JE VELICINA 6

Kada pisemo to izgleda ovako: <h6>OVO JE VELICINA 6</h6>

Sad smo upoznali svih sest velicina naslova i kako se upotrebljavaju tagovi.

Jos dva taga se bave velcinom teksta. To su tagovi <big></big> i <small></small>. Upotrebu vec mozete da shvatite medjutim ono sto je interesantno kod ovih tagova je to sto njih mozete da upotrebljavate i vise puta za jedan isti tekst. Tacnije sest puta. Znaci sest puta mozete da povecate ili smanjite tekst. Ja sam ovde samo po jednom upotrebio oba taga a vi malo eksperimentisite. Opet napomena, ne zaboravite da zatvorite tagove onoliko puta koliko ste ih otvorili.

^{Ovo je natpisani tekst}. Dobija se upotrebom taga <sup></sup>
Ovo je neproporcionalni tekst. Dobija se upotrebom taga <tt></tt>

Vrlo interesantan je rad sa spiskovima. Postoje tri vrste spiska. Obelezeni, numerisani i definicioni. Hajde da objasnimo svaki posebno.

Obelezeni tip spiska obelezava stavku grafickim znakom. Tag <ul></ul> obuhvata citav spisak a <li></li> pojedinacne stavke. Da vidimo kao to izgleda:

Prvi red
Drugi red
Treci red

Sada da vidimo ceo kod: <ul>
<li>Prvi red</li>
<li>Drugi red</li>
<li>Treci red</li>
</ul>

Numerisani tip spiska obelezava stavku brojem. Umesto taga <ul></ul> koristi se tag <ol></ol>. Razlika je u jednom slovu u tagu. Tag <li></li> se i u ovom tip koristi za pojedinacne stavke. Da vidimo:

Prvi red
Drugi red
Treci red

Sada da vidimo ceo kod:

<ol>
<li>Prvi red</li>
<li>Drugi red</li>
<li>Treci red</li>
</ol><

Definicioni tip spiska ili definiceje se sastoji od termina i njegove definicije. Termin je obuhvacena tagom <dl></dl> a svaka definicija tagom <dd></dd>. Pogledajmo ovaj tip spiska:

Prva definicija

Tekst prve definicije

Druga definicija

Tekst druge definicije

Treca definicija

Tekst trece definicije

Kako to sve izgleda kad otkrijemo citav kod:

<dl>Prva definicija</dl>
<dd>Tekst prve definicije.</dd>
<dl>Druga definicija</dl>
<dd>Tekst druge definicije.</dd>
<dl>Treca definicija</dl>
<dd>Tekst trece definicije.</dd>

Dakle ovaj tip spiska ima tzv. naslov koji je poravnat uz levu ivicu a ispod njega ide tekst koji je malo odvojen i uvucen. Mozda deluje komplikovano ali zaista nije.

Nikako ne treba zaboraviti jos dva taga. <p></p> i <br>. Tag </p> zapocinje novi pasus i malo ga odvaja od prethodnog a tag <br> prekida trenutnu liniju ispisa i prebacuje je u red ispod.

Secate se kad smo pricali o naslovima na pocetku ove strane ? Primer za njih je bio centriran tj. na sredini stranice. Kako smo to uradili ? Obican tag <center></center> ce to uraditi za vas. Sve sto stoji izmedju pocetka i kraja ovog taga bice centrirano po sredini stranice. Bilo da je jedna rec ili cela strana.

Sto se tice fonta, osnovni tag za menjanje izgleda fonta je <font>. I sa njim takodje mozete menjati velicinu ali i tip i boju fonta. To su atributi SIZE, FACE i COLOR. O atributima tagova jos nisam pisao pa cu za sada <font> tag preskociti jer on ima smisla samo ako se koristi sa svojim atributima.

Ovde smo nabrojali neke najcesce koriscene tagove za tekst. Za kraj mozemo pomenuti tag <hr>. Ovaj tag ubacuje liniju duz cele sirine stranice. Zgodno kad zelimo da odvojimo jedan tekst od drugog ili naglasimo jedan deo na stranici a ne zelimo da koristimo npr. bold ili bilo koji drugi fizicki izgled teksta. Linija se pojavljuje iznad taga:

Dakle ispod linije a iznad ovog teksta se nalazi tag <hr>. Jos cu dodati da tag ne morate zatvarati.

Posle tagova, malo cemo se pozabaviti njihovim atributima tj, svojstvima, vrednostima.

Vec smo pomenuli atribute kada smo pricali o tagu za font. Rekli smo da uz pomoc njih mozemo da menjamo izgled fontova. Atributi, svojstva ili vrednosti doteruju tagove. Sa njima mozemo preciznije da kazemo nasem web browseru kako da prikaze odredjeni element na stranici bilo da je rec o tekstu, slici, tabeli itd.

Dakle tag <font> menja izgled fonta. To radi uz pomoc svojih atributa SIZE,COLOR i FACE i samo sa njima ima svoju primenu. Hocu da kazem da postoje tagovi koji vec unapred imaju svoje definisane vrednosti a da postoje i tagovi kojima moramo zadati vrednost/i da bi on imao svoju primenu:
SIZE - menja velicinu fonta
COLOR - menja boju fonta
FACE - menja sam font u zeljeni

OVAJ TEKST JE VECI,CRVENE JE BOJE I DRUGACIJI JE FONT.<

Kako izgleda ceo kod pogledacemo sada:

<font size="3" color="#ff0033" face="Comic Sans MS">OVAJ TEKST JE VECI,CRVENE JE BOJE I DRUGACIJI JE FONT.</font>

Verovatno vam je vec sve jasno. Atribut se sastoji od imena (size), znaka jednakosti (=) i njegove vrednosti ("3"). Vrednost se UVEK stavlja izmedju navodnika. Ako zaobravimo oba ili samo jedan navodnik, atribut nece uraditi zeljeni efekat.Neki atributi imaju primenu ne samo u jednom vec u vise tagova ali svugde imaju istu ulogu.

Pominjali smo tag <p>. To je tag za novi pasus. Sta cemo da radimo ako novi pasus zelimo da zapocnemo na sredini stranice ? Dodacemo mu atribut ALIGN:

OVAJ PASUS POCINJE NA SREDINI STRANICE

Kako izgleda kod:

<p align="center">OVAJ PASUS POCINJE NA SREDINI STRANICE</p>

Ako zelimo da pasus zapocnemo sa desne strane, umesto CENTER stavicemo RIGHT. Idemo sad malo nazad i vratimo se na primer za tag font. Ako bismo u njegov kod stavili atribut ALIGN on nebi poravnao tekst na sredinu. Zato moramo da iskoristimo tag <p>. U ovom primeru cemo primeniti dva taga <p> i <font>, svaki sa svojim atributima, na tekst:

OVAJ TEKST JE NA SREDINI, VECI JE,CRVENE JE BOJE I DRUGACIJI JE FONT.

Kompletan kod izgleda ovako:

<p align="center"><font size="3" color="#ff0033" face="Comic Sans MS">OVAJ TEKST JE NA SREDINI, VECI JE,CRVENE JE BOJE itd itd...</font></p>

Naslovi i podnaslovi izgledaju lepo samim tim sto su naglaseni ali kako ih staviti na sredinu ? Potpuno isto kao i kad upotrebljavamo tag <p> sa ALIGN atributom samo sto za naslove i podnaslove upotrebljavamo... koji tag ? Tag <h#> (gde je # velicina naslova od 1 do 6)

I tag <body> koji oznacava telo HTML dokumenta ima svoje atribute. To su BGCOLOR i TEXT:
BGCOLOR - menja boju pozadine stranice
TEXT - menja boju fonta na stranici. (Ovde ne koristimo atribut color jer u telu dokumenta menjamo ceo tekst na stranici).

Ja necu menjati boju stranice i boju teksta ali vi otvorite vas Notepad i ukucajte kod. Ne zaboravite kakav je redosled na pocetku HTML dokumenta.

<body bgcolor"#ff0033" text="#ffffff">

Ovim kodom tj. atributima u <body> tagu promenili smo boju pozadine u crvenu a boju slova u belu. Kao sto rekoh probajte.

Prosli smo neke vaznije atribute. Za tekst to su SIZE, COLOR i FACE. Za naslove, podnaslove i pasuse je ALIGN a za telo dokumenta to su BGCOLOR i TEXT. Naucili smo da svaki atribut ima svoje IME, ZNAK JEDNAKOSTI i VREDNOST. Postoji jos atributa za jos neke elemente koje mozemo da prikazemo uz pomoc HTML koda ali njih cemo obraditi kako budemo ucili i te elemente. Sada mozemo preci na slike...

Slike Vrh strane

by FSKPZ