* * * Opala !!! Vidis li ?! Ovo je "Tagovi" lekcija. * * *

Sve sto napisete izmedju tog gore <title> tag para, pojavit ce se kao naslov u naslovnoj (najgornjoj, plavoj) liniji browsera. Pogledajte odmah gore, sta sam tu svasta nesto nasvrljao, pa to sada i stoji tako gore u vasoj naslovnoj liniji. Tako se radi i sa svim ostalim tekstom koji se prikazuje u prezentaciji web-a. Uvek je samo ubacen izmedju neka dva vrha od tag zagrada. Znaci, ono sto je van zagrada, to browser prikazuje, a ono sto je unutar zagrada tretira kao svoja privatna uputstva, pa to onda ljubomorno skriva od tudjih pogleda. I, to vam je sav sistem funkcionisanja teksta u HTML-u. Samo da jos sada naucite i neke, bar najosnovnije, tagove...
I, vec smo kod <body></body> tag para. Ako ga preskocimo, dosli smo do </html> opoziva da je web gotov, zavrsen, i nema vise. I zaista, ako to uradite, imat cete svoj prvi web spreman za instalaciju na neki server i gledanje, samo sto, osim naslova u naslovnoj liniji browsera, nece imati vise nista. Svi ce moci da bulje u praznu belu povrsinu koliko im volja. To znaci da u <body> (engl. body = telo) tag nismo upisali, ili stavili nista. Time bi vam i uloga body taga u HTML-u, trebala biti jasna. Izmedju tog tag para idu sve one lepote i grozote koje vidjamo na web-ovima po Internetu. Zato, idemo odmah neke osnovne primere toga:

     U tabelama iznad je naznacen kao "ZA SADA MANJE BITNO" izvestan broj tagova za koje nisu data nikakva objasnjenja. Neka vas to ne brine, jer je malo verovatno da ce vam ikada i zatrebati, osim ako ne odlucite da se web dizajnu posvetite i krajnje profesionalno. No, u tom slucaju cete svakako sebi onda nabaviti i neku daleko podrobniju literauru od ove. Za sada, ova skolica ce od vas napraviti odlichnog HTML programera, a sve detalje ionako ne mozete nikada imati uvek na pameti, nego se morate sluziti kojekavim podsetnicima koje sami napravite, ili ih prikupite kao svoju struchnu literaturu.
     Sa do sada navedenim, savladali ste sve osnove u vezi ispisivanja texta, pa ako tome jos dodate i cinjenicu da vam cak ni ne treba neki uvodni tag za text, nego ga mozete slobodno odmah ispisati izmedju body tagova i browser che ga onda prikazati u svome default (standardno podesenom) izboru i velicini, onda je jasno da je unoshenje texta u sadrzaj web prezentacije za vas vec machiji kashalj.
      I, posto nemate vishe tajni o osnovama HTML rada s tekstom, upoznajte se i sa majstorijama za iznenadjivanje dušmana i onda idemo na sledecu lekciju. Majstorije koje slede su zasnovane na cinjenici da svaka Windows platforma ima svoje sistemske fontove koji se ne mogu brisati ma koliko se nekom klijentu ne svidjali, pa tako i svaki PC pod Windows operativnim sistemom omogucava browseru obavezno izvrsenje poneceg zadatog u HTML-u. Druga pogodnost je ISO Latin standard kojim je definisan obavezan skup i raspored slova i ostalih znakova pisma za bilo koji latinicni font, tako da zadatak koji odredimo mora biti realizovan na strani klijenta, bez obzira kojom arhivom fontova raspolaze. No, najbolje da se odmah suocite s prakticnim. Dakle, ovo ispod morate upisivati "rucno" u HTML sadrzaj na zeljeno mesto u nekoj reci ili izmedju reci, bas kako je i napisano, i nema da fali...

Upisete:

©

½
¿

Dobijate:
Š
�
†
�
�

Upisete:

®
»
¼
÷

Dobijate:
š
�
�
�
�

Upisete:
Ð
ð
«
¾
º

Dobijate:
�
�
�
�
�

  A sada i jedan mali lepi tag, a to je postavljanje neke boje za naglasavanje delova teksta. Time se upoznajete i sa jednom od uloga <span></span> taga, iako smo ovim primerom zagazili cak u rubriku sa stilovima. To se dobilo u tekstu na ovaj nacin:
      <span style="background-color: rgb(255,0,255)">naglasavanje delova teksta</span>
Ako vam se ova odvratna boja svidja, slobodno je koristite, a ako ne, onda cete morati malo savladati i rad s nekim od grafickih programa za crtanje, pa da tamo izaberete i neku RGB varijantu za oznacavanje boja i nijansi. Inace, umesto RGB brojeva za odredjivanje boje, mozete koristiti i hexadecimalne. Ako kojim slucajem vec imate osecaj ushicenja novim spoznajama, pa bi da se chika Draganu i zahvalite (a to sam licno ja), ili nesto priupitate, onda cete morati kliknuti i na ovo dragan@avala.de koje je kojekuda ovuda. Medjutim, taj gest vam nece biti uvazen ako ne zapamtite i tag sa kojim se tekst odmice od leve ivice za jedan tabulatorski razmak, a to je <blockquote></blockquote>. Verujem da znate da je tabulatorski razmak onaj koji se pravi pri zapocinjanju nekog novog dela pisanja, kao sto ni ja nisam pojma imao do nedavno. Znate ono, estetski uvucen prvi red novog pasusa, malo u desno.
No, ovom mojom E-mail adresom smo se upravo dotakli i pitanja "aktivnih" delova teksta, koji reaguju na dodir kursora i klik misha, a u HTML terminologiji se zovu linkovi.
   Time dolazimo do onoga sto bi se moglo nazvati dusom Interneta. Vec znate da su linkovi oni delovi web prezentacije koji su u aktivnom stanju, tako da kada kliknete kursorom na njih, oni vas "odvedu" u pregled nekog novog web-a, ili neceg unutar onog kojeg vec gledate. Isto tako, ta aktivna link mesta aktiviraju i stosta drugo, poput email obrasca, download funkcije itd. I, ne treba gubiti vreme, nego odmah zapamtiti da se sve to odredjuje <a></a> (engl. anchor = sidro) tagom. Svako to sidro je zapravo najobicnija internet adresa poput ove http://www.serbian.de s tim sto ona ne mora biti i ovako kompletna. Ovakav oblik adrese se zove apsolutni URL, ali kada zelimo pregledati nesto unutar web-a kojeg vec osmatramo, onda nas vode tzv. relativni URL-ovi, to jeste, malo krace adrese od ovako apsolutne. No, o tom, po tom...
     Sada je najbolje da prilikom izrade svojih prvih linkova ispisete izmedju <a> ??? </a> tagova neku apsolutnu adresu, tacno kakva i jeste. Znaci i ona tada mora zapoceti sa http:// i tako redom. Istu tu adresu cete pre toga u baciti i u <a> tag kao parametar kljuchnog href= atributa, da bi je browseri automatski tretirali kao aktivnu cilj-adresu, bez obzira dali ona negde zaista postoji ili ne. No, kao vidljivi link-text, koji ide izmedju <a> tagova mozete slobodno napisati i http://www.nepostojeca.com ili Ova adresa je lazna i kao sto vidite browser ih je jednako obojio i podvukao da vam skrene paznju na njihov aktivitet koji vas u ovom primeru nece nigde odvesti, iako ce na klik browser krenuti u potragu po mrezi, jer je unutar samog taga naveden URL nepostojece, izmishljene adrese. Naravno, nakon kraceg vremena, browser ce vas obavestiti kako to ne moze pronaci i stvar je zavrsena. Svaku od tih vasih link adresa pakujete u <a></a> tag na ovaj nacin:
          <a href="http://www.adresa.com">Link text koji se vidi i na koji se klika</a>
     Dakle unutar <a> taga ide njegov href= atribut, kojem kao parametar upisujemo zeljenu adresu (svi parametri u klasicnom HTML-u uvek idu pod navodnicima, ali i ne moraju). A onda, dolazi i vidljivi text na koji se klika, kao aktivni link na web-u. Dakle, cak ako kao link-text upisete i Kukuriku, onda cete dobiti ovakvo Kukuriku stanje, dok ce stvarna adresa, gde ce vas to Kukuriku odvesti klikom biti nevidljiva, jer je upakovana unutar tag elementa, a ono sto je izmedju vrhova tog <a>...????...</a> pakovanja bit ce prikazano kao vidljivi link. A taj link, moze biti i samo jedno slovo, kao i neka rec ili pasus, a takodje i neka slika, slicica ili bilo kakva grafika. Verovatno vam se sada mnogo toga razjasnilo u tim cudesima od klikova po web-ovima.
    A sada bi konacno mogli da se malo vratimo unazad do <body> taga i navedemo njegove atribute koji su vrlo korisni i efektni kada u telu web dokumenta imamo dosta tekst linkova. Zato evo i jedan glomazan primer gde su svi atributi i parametri za vidljivi link strpani u <body> tag. Naime, tu stavljate i odredbe po kojima linkovi menjaju boju pri upotrebi itd.

bgcolor=Odredjuje hexa-brojem boju pozadine celog web-a (znaci, to se ne odnosi na linkove)
background=Odredjuje uzimanje neke slike za pozadinu celog web-a
text=Odredjuje boju teksta za uobicajeno pisanje
link=Odredjuje boju linka koji jos nije kliknut
vlink=Odredjuje boju linka koji je bio kliknut
alink=Odredjuje boju linka za dodir kursorom misha

  U slucaju nenavodjenja atributa u nekom tagu, browser koristi tzv. podrazumevane (standard) parametre, pa bi u slucaju <body> taga boja pozadine tada bila bela, obican tekst crn, linkovi plave boje i podvuceni itd. U gornjem primeru su hexa brojevi za boje dati proizvoljno, tek da se necim naznace ta mesta upisa, a inace je to stvar vaseg izbora. Sadrzajem u <body> tagu parametri odredjuju neke osobine za celi vidljivi sadrzaj, pa se ti atributi tu ubacuju samo onda ako nece narusiti i neke drugacije zamisljene delove dokumenta. I naravno, upste ne moraju biti ovako svi ubaceni, kao u gornjem primeru. Moze i samo jedan ili nijedan, jer browseri onda koriste svoje programirane standarde (default).
     A sada da nastavimo sa <a></a> linkovanjem. Unutar ovog taga mogu ici atributi:
href= | accesskey= | charset= | coords= | name= | rel= | rev= | shape= | rect | circle | poly | default | tabindex= | i | target= |
Verovatno ste opet u stanju obeshrabrenosti kolicinom atributa, ali ovo nebi mogla biti Draganova skolica ako nebi imala i po koju radosnu vest, a to je, da cemo se opet igrati ignorisanja i pozabaviti se samo prvim i zadnjim atributom iz ovoga spiska. Jos lepsa i radosnija vest je da smo sa prvim href= atributom malopre gore uglavnom i zavrsili, pa da jos poklonimo paznju ovom zadnjem target=(meta, cilj) i onda bi mogla i jedna kafe ili coca-cola pauzica. Naime, sa svakim HTML editorom cete skoro svako linkovanje sasvim jednostavno obavljati, tako sto prevucete pritisnutim tasterom preko reci ili pasusa, da to markirate, pa onda samo kliknete gore u menu ponudu na znak komada lanca ili spajalice (koji su kod mnogih editora ispred ikonice globusa) i u dobijenu rubriku upisete adresu (URL), potvrdite na OK i stvar je gotova. Ako je slika ili neki drugi netekstualni objekat u pitanju, onda markiranje vrsite sa klikom na njega, pa opet ista procedura, gore sa ikonom lanca, kao i sa tekstom. Medjutim, kod svakog uspostavljanja aktivnog linka kao automatski HTML surogat se kod teksta javlja podvucena linija, a kod grafika plavi okvir, sto se ponekad zeli izbeci. U slucaju teksta to se postize dodatnim uvodjenjem i style= atributa u <a> tag, kao:
   <a href="adresa koja se aktivira" style="text-decoration:none">Vidljivi tekst link</a>
Na ovaj nacin linija podcrtavanja nestaje iz prikaza aktivnog tekst-linka, ne menjajuci nicim namenu aktiviteta. Kod slika i grafickih objekata okvir se eliminise tako sto se u njihov <img> tag unese atribut s parametrom border="0", ali o tome ce biti reci i u rubrici Slike koja je namenjena toj tematici.
     I, kako je vec navedeno, na redu je target= atribut koji je cesto bitan unutar <a> taga za linkovanje. Naime, pored toga sto je uspesno resen nacin adresiranja, pronalazenja i onda otvaranja adresiranog na pregled sa samo href= atributom, svemu tome su pridodate i vrlo efektne mogucnosti za odredjivanje nacina za pregled izabrane adrese, a pomocu dodavanja i target= atributa. Verovatno ste zapazili tokom surfanja kako vam se neke prezentacije otvaraju u jos jednom browser prozoru, a ne u onom gde ste kliknuli na link itd. To se radi target= atributom i njegovi parametri su sledeci:
target="_blank" Otvara jos jedan, novi browser prozor, za prikaz sadrzaja kliknutog linka.
target="_self" Prikazuje odabrano u istom prostoru gde se nalazi i link (Web moze biti izdeljen i na vise prostora >lekcija Frames<, a najcesce je sve samo jedan te isti prostor.)
target="_parent" Prikazuje linkovano u prostoru koji je predhodio mestu pozivanja. Vrlo redak nacin koristenja i malo teze razumljiv, a radi se o tome da ako ste iz neke izdeljene (frames) povrsine weba otvorili linkom neki "_top" prikaz, onda u tom prikazu sa ovim "_parent" atributom mozete linkovati da se sledeci izbor ponovo prikaze u onom izparcelisanom delu, odakle se tu i stiglo.
target="_top" Prikazuje odabrano u kompletnom prozoru browsera (ako je web izdeljen, ponistava podelu i sve prikazuje u celoj povrsini).
target="imeFrejma" Ovo >imeFrejma< je sada samo prigodno ubaceno, a umesto toga se upisuje ime koje ste dali nekom svom frejmu. To je obradjeno u lekciji Frames.

     Naime, kako se moze videti u Frames lekcijama ovde, jedan web prikaz na monitoru moze biti kreiran i od nekoliko HTML dokumenata (tzv. frame HTML tehnika), a sto mozete upravo posmatrati i na ovoj prezentaciji, gde su pojedini delovi prikazanog nezavisni jedan od drugog, tako da se mogu koristiti i kao odvojena mesta za prikaz necega novog, dok ostalo ostaje nepromenjeno, a to se postize upravo target= atributom i njegovim navedenim parametrima koji idu unutar <a> taga. U webu koji upravo gledate, svi linkovi u levom frejmu su sa target= atributima usmereni da se pozvani (kliknuti) linkovi prikazuju u ovom frejmu gde ih i citate. Kao parametar je tu naveden neki "imeFrejma" koji sam ja kao naziv dao ovom frejmu. Dakle, taj gore poslednji parametar "imeFrejma", je tu prigodan, a umesto toga se upisuje stvarni naslov frejma u okviru kojeg se zeli izvrsiti prikaz web sadrzaja nekog linka. Tu ima jedno pravilo, a to je da taj naslov mora odmah pocinjati sa alfanumerickim znakom (slovo ili broj), a ne sa interpuktivnim kao kod ostalih navedenih parametara kao target=_parametar (ova crtica podvlacenja).
     Posto smo jos u okviru body taga, treba se upoznati i sa nacinom za ubacivanje MUZIKE kao dodatnog ugodjaja u pozadini web prezentacije. Dakle, negde izmedju <body></body> taga ubacite:
      <embed src="nekapesma.mid" loop="0" height="0" width="0" autostart="true">
i stvar je resena. Atribut loop= (kovrdja, petlja) odredjuje ponavljanja, pa ako bas hocete da vam se muzika neprestano ponavlja u pozadini, onda umesto nule upisite parametar "true", iako je praksa pokazala da takvo sta nakon drugog ponavljanja pocne smetati nervnom sistemu klijenta. Neko u ovaj tag stavlja nepotrebno i jos neke atribute, ali samo ovi su neophodni. Atributi za duzinu i visinu se odnose na mogucnost za prikazivanje mediaplayer konsole, kako bi se ponavljana reprodukcija mogla iskljuciti ili ponovo ukljuciti, ali kako svaki PC sa aktivnom sound kartom ima i kontrolnu ikonu zvucnika (dole u task liniji) sa kojom se to isto obavlja, onda je takva dodatna ponuda pomalo i besmislena, pa su zato i parametri tih atributa ovde postavljeni takodje na nulu. I sada, ovde se mogu navesti i neke link majstorije. Naime, gore navedena tag linija ce sasvim normalno funkcionisati u telu nekog *.htm dokumenta bez frejmova. No, ako se ta <embed> tag linija nalazi u sastavu dokumenta koji je sacinjen od frejmova, onda se adresiranje na melodiju mora izvesti sa adresnim uvodom ../ pa stvar izgleda ovako <embed src="../pesma.mid"> itd. Inace, u istu svrhu, na isti nacin, mozete koristiti i wave muzicke zapise. Vezano uz ovaj muzicki dodatak, dobro je da malo pogledate i u rubriku MIDI koja je u ponudi na www.serbian.de u rubrici Znanje-Imanje .

Medjutim, kako ste vech mogli primetiti, linkovanje ne sluzi samo da bi se klikom otishlo na neku drugu web-adresu, tachnije, uvukao neki web sadrzaj (dokument) u browser na pregled, nego se linkovanje koristi i za uvlachenje nekog objekta (slike ili muzike) i u sastav sadrzaja neke web prezentacije. Linkovanjem mozete i da ustedite na svom memorijskom prostoru, koji vam je na serveru odobren za postavljanje web-a. Linkovanjem pravite i download ponudu za programske pakete, a koje takodje ne morate posedovati na svome serveru, jer se linkovima mogu uvlaciti u vasoj ponudi i objekti koji su bilo gde u mrezi. Sve shto treba, to je da znate tachnu URL (adresnu putanju) do njih. Time, sa jednim relativno malim web sadrzajem na svome serveru, odajete dojam izuzetno bogate prezentacije. Naravno, pod uslovom da ste za te "pozajmice" izabrali adrese koje su pouzdane i ne traju od danas do sutra. Za takve stvari upisujete apsolutne URL-ove (adrese), dakle od pocetnog http:// pa do zadnje stavke koja je vas krajnji cilj i koji se time i "uzima".
No, link-adresiranja na nesto iz ukupnog sadrzaja na svome serveru, gde su bash vashi web dokumenti i objekti, mozete da linkujete i u tzv. relativnom obliku, to jeste samo naslov ciljnog fajla sa njegovom ekstenzijom, poput "kolce.mid" ili "slikica.gif" itd. i browseru je taj nedostatak http:// ili www u adresiranju, znak da tu stvar onda potrazi unutar paketa vase web adrese. Medjutim, posto pri kreiranju vi svoj sadrzaj mozete raspodeliti u nekoliko raznih fascikli (direktorija i subdirektorija) potrebno je onda navesti i fasciklu, pa bi adresiranje tada izgledalo "muzika/kolce.mid" ili "image/slikica.gif". No da nebi mnogo razmisljali o tome onda imate "majstoriju" da relativna adresiranja pravite sa uvodnikom ../ pa browser onda tu stvar trazi u svakoj fascikli, dok je ne nadje. Dakle "../slikica gif" ili ako vam je trenutni link unutar vise subdirektorija onda i "../../../slikica.gif" i nema da fali. Iz koliko facikli trebate izaci, toliko puta i ../../ naznake i to je to. No, dok se ne izvestite, najbolje je da do tada stavljate pune http:// adrese za svaku linkovanu stvar. O linkovanjima za uvlachenje slika imate sve objashnjeno ovde u rubrici Slike.

Kako cete vec videti, browseri su "izdresirani" za prepoznavanje ekstenzija (dodatci iza tacke naslova dokumenta, poput gif, html, jpg, class itd:) pa po tome ukljucuju i svoje pojedine radne funkcije, poput download-a kada im je kao krajnji cilj adresiran dokument sa zip ili exe ekstenzijom. Znaci, cim neki paket postavite na server u ZIP ili EXE formatu, browser ce na takav link automatski izbaciti formu za download tog cilja. Zato, da bi i sami imali uvid u extenzije svih mogucih fajlova, morate u svome Windows Explorer-u (ne Internet Explorer) podesiti opcije (View\Options) za prikaz svih fajlova i punih DOS extenzija. Mnogo od toga cete otkrivati kroz rad i sami, pa je ovome svemu jos samo potrebno dodati da aktiviranje email obrasca sa vasom adresom browser obavlja po kliku na link Pisite mi:
<a href="mailto: dragan@avala.de">Pisite mi</a>

Verovatno vec mozete i sami analizirati nacin ovog adresiranja, cime bi se moglo smatrati da ste tajne rada s tekstom i linkovima uspesno "sazvakali". No, da bi ste na kraju svega ovoga malo i prakticno videli kako rade HTML editori, kliknite na ovaj deo teksta i eksperimentisite malo sa jednim koji mozete odmah koristiti u istom browseru kojim sve ovo i citate. Tu ce vam se mnogo toga o ovim tagovima i razjasniti.

Radovanovic Dragan

Komentar	HTML pisanje	Rezultat u browseru
Ovde, izmedju <body> tag para ide <p> (pasus) tag par, izmedju cijih zagradnih vrhova se upisuje tekst koji ce biti prikazan.	<html> <head></head> <body> <p>Tekst primer</p> </body> </html>	Tekst primer
Isti taj primer, ali sada sa ubacenim atributom align= unutar <p> taga i njegovim parametrom "center", cime browser tekst ispisuje u sredini prostora	<html> <head></head> <body> <p align="center">Tekst primer</p> </body> </html>	Tekst primer
Parametri atributa align= koji ide unutar <p> taga su: (bez ovog atributa browser podrazumeva "left" parametar)	align="left" align="center" align="right" align="justify"	Tekst ide i ravna levo Tekst ide i ravna sredinu Tekst ide i ravna desno Tekst se ravna s obe strane
ZA SADA MANJE BITNOTag <p> se moze umetati izmedju tagova: <body> <adress> <blockquote> <button> <center><dd><div><fieldset><form><iframe><li><noframes><noscript><object><td><th>
Izmedju tag <p> para mogu ici tagovi: <a><abbr><applet><b><basefont><bdo><big><br> <button><cite><code><dfn><em><font><i><iframe><img><input><kbd><label><map> <object><q><s><samp><script><select><small><span><strike><strong><sub><sup> <textarea> <tt> <u> <var> Opozivni </p> tag nije obavezan. Browser ga podrazumeva, posto <p> tag mozete koristiti i kao samostalan tag za odredjivanje pocetka novog reda ispisivanja ubacivanjem istog izmedju neke dve reci vec napisanog teksta. Medjutim, za razliku od <br> taga iste namene, sa <p> tagom se tada dobija veci razmak izmedju novog i starog reda. A ONDA - VRLO BITNO
Sledeci kljucni tag za tekst je <font></font> par, koji sa parametrima svojih atributa odredjuje sve osobine slova.Ovde face= atribut odredjuje vrstu fonta, size= odredjuje velicinu istog, a color= boju	<html> <head> <title></title> </head> <body> <p><font face="Arial" size="2" color="#0000FF">Text primer</font></p> </body> </html>	Text primer
Kao parametar face= atrubuta moze se upisati i niz fontova, poput "Arial,Tahoma,Vedrana" kako bi browser u slucaju da klijent nema instalisan prvi font upotrebio drugi, ili tako redom. U slucaju da klijent nema instalisan ni jedan od navedenih fontova u svojoj font memoriji, browser onda podrazumeva koristenje fonta odredjenog kao klijentov standard font. Parametri atributa size= su brojevi od 1 do 7 kojima se odredjuje velicina slova. Parametri atributa color= su hexadecimalni brojevi od nijanse neke boje koju izaberete pomocu color-pickera kojeg ovde mozete uzeti u rubrici Grafika. Pri upisivanju hexa broja ispred njega je obavezan i upis znaka # . Bez primene <font></font> taga browser onda koristi podrazumevani font sa velicinom 3.
Ovi tagovi se mogu umetati ispred ili unutar teksta radi dobijanja desno navedenih efekata. Svaka od tih umetnuti odredbi vazi kroz tekst sve do mesta svoga opoziva.	<b></b> <i></i> <u></u> <center></center>	Podebljan tekst Ukosen tekst Podvucen tekst Centriran tekst