HTML - PODSEĆANJE
■ HyperText Markup Language
■ HTML predstavlja jezik za označavanje hiperteksta i hipermedija (teksta, slike, zvuka, videa i drugih međusobno povezanih objekata pomoću linkova)
■ HTML predstavlja tekstualnu datoteku
■ Bilo koji tekst editor je prihvatljiv za izradu HTML dokumenata
■ Namenjen je browser-ima koji ga dobijaju od web servera i grafički prikazuju sadržaj sajta
Gradivne komponente jezika
■ Osnovni gradivni element u HTML-u je tag. Tagovi mogu
biti “upareni” ili “neupareni” tj. “zatvarajući” i
“samozatvarajući”. Ova podela je izvršena u odnosu na
oznake kojima se tagovi otvaraju odnosno zatvaraju.
Upareni tagovi imaju oznaku za otvaranje i oznaku za
zatvaranje taga:
otvaranje taga: <ime_taga>
zatvaranje taga: </ime_taga >
Na primer <p> i </p>.
■ Neupareni tagovi imaju samo jednu oznaku, kojom se
tag istovremeno otvara I zatvara:
<ime_taga />
Na primer <br/> ili <img />.
HTML element
■HTML element je kombinacija tagova i njegovog
sadržaja
■Tako je npr. p element sada dobijen pomoću otvarajućeg taga, sadržaja taga i zatvarajućeg taga:
<p> sadrzaj </p>
■Dok je u slučaju samozatvarajućih tagova, tag ujedno i
element npr.
<img />.
Gradivne komponente jezika
■ HTML se strukturno opisuje i atributima. Atribut se piše unutar
imena taga, i služi da bliže definiše način delovanja taga ili opiše
tag. U jednom tagu može biti više atributa. Sintaksa zahteva da
nakon definisanja imena atributa, postoji operator dodele =, i unutar
znakova navoda vrednost atributa. Tako na primer, atribut class, sa
vrednošću proba, u tagu i, piše se kao
<i class=”proba”>Pera</i>.
■ Element govori browser-u šta da uradi, a atribut kako da to uradi
■ HTML jezik nije case sensitive, što znači da se imena tagova mogu
pisati I velikim i malim i kombinovanim veličinama slova (title = Title
= tiTLe), ali je preporuka da se koriste mala slova.
■ Pri prikazivanju stranica browser-i se oslanjaju na informacije date u
tagovima
■ HTML kod se realizuje redosledom kojim je i pisan
Tagovi
■ Upareni tagovi su oznake kojima se u HTML stranu postavlja tekst ili neki drugi objekat
■ Upareni tagovi imaju početak i i kraj ■ Ove oznake moraju da imaju simbol kojim se neki tag
počinje i simbol kojim se završava (<tag></tag>)
■ Ceo tekst ili skup tagova unutar ove dve oznake se prevodi samo u svojstvu značenja tih oznaka
■ Izvan taga, efekat taga ne postoji ■ Svaki tag ima tačno definisan grafički izgled
■ Uparene oznake su uvedene radi lakšeg praćenja i čitanja koda
Osnovni HTML tagovi
Tagovi koji opisuju osnovnu strukturu HTML dokumenta:
■ HTML
■ HEAD
■ BODY
• Tag <HTML> je okvir u kome se nalaze svi ostali tagovi; HTML
dokument uvek počinje tagom <HTML>, a završava se tagom
</HTML>
• Tag <HEAD> uokviruje zaglavlje u kome se nalaze informacije o
samom dokumentu (naslov, opis, ključne reči, ime autora, itd.) i gde
se pišu svi viši programski script jezici (npr. Java Script)
• Sve ono što vidimo u prozoru browser-a, tj. sadržina stranice, nalazi
se u telu dokumenta koje uokviruje element <BODY>; u dokumentu
sme da postoji samo jedan par tagova <BODY> </BODY>
Naslov web strane
■ Skoro svi tagovi koji su namenjeni korisniku nalaze se u
body tagu
■ Jedan od retkih izutetaka je regularni tag TITLE
■ On se piše u head tagu, i definiše naslov strane
■ Ovaj naslov je vidljiv za korisniika i nalazi se u zaglavlju
browsera
■ Obzirom da nije u telu sajta, piše se kroz tag head, a ne
body
Sintaksa - primer
■ Početak i kraj HTML odeljka
<html> Ovde je cela strana </html>
■ Početak i kraj zaglavlja (odmah iza html-a)
<head> Ovde je zaglavlje (ne vidi) </head>
■ Početak i kraj tela stranice
<body> Ovde je telo stranice </body>
■ Početak i kraj naslova strane, unutar head dela
<title> Ovde je tekst naslova (vrh) </title>
Primer web stranice
<HTML>
<HEAD>
<TITLE> Moja prva Web stranica </TITLE>
</HEAD>
<BODY>
Dobar dan!
</BODY>
</HTML>
Snimanje koda
■ Kod se može pisati u bilo kom text editoru
■ Preporuka je da to bude Notepad++ (http://notepad-plus-
plus.org/)
■ Nakon pisanja koda, treba izabrati File/SaveAs i podesiti
da tip bude HTML
Tekst sa srpskim slovima
■ Obzirom da je podrazumevani kodni raspored engleski,
prikaz drugih karaktera, koji su van engleskog pisma,
mora se urediti na drugi način
■ Ovo se realizuje pomoću meta taga
■ Kao i drugi meta podaci, i ovaj se definiše u head tagu, i
omogućava da se u browseru, ispravno prikazuju
posebni karakteri
■ U našem slučaju to je srpska ćirilica i latinica
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8“/>
<meta charset=“utf-8“/>
Komentari
■ Komentari postoje u svakom programskom jeziku, i služe da
pomognu programerima sa napomenama i opisima koji su
ostavljeni.
■ Komentari su delovi web stranice koji se ne interpretiraju, a samim
tim i ne prikazuju korisniku.
■ Uloga komentara je lakše snalaženje i navođenje unutar
prezentacije.
■ Kometari su skoro obavezni kada više ljudi uređuje sajt, ili kada se
koristi PHP pristup.
■ Sintaksa komentara je
<! -- tekst komentara -->
Neupareni tagovi
■ Prazni (neupareni) tagovi nemaju svoj početak, nego se
realizuju na mestu na kome se na njih naiđe
■ Obzirom da nemaju početak i kraj, deluju samo za sebe, a ne
na neke druge tagove ili sadržaje
■ Sintaksa ovih tagova je <ime/>
■ Najčešće korišćenu su: <br/>, <hr/>, <input/>, <img/>, …
■ Tag <br/> tumači se kao “skoči” na sledeći red (u grafičkom
okruženju)
■ Ova naredba je u nekim slučajevima isto što i Enter
■ Horizontalne linije, za razdvajanje delova sadržaja, definišu
se tagom <hr/>
Primer
<html>
<head>
<title>Definisanje tipa html-a i prikaza nacionalnih karaktera</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8“/>
</head>
<body>
Tekst sa srpskim slovima. <br/><br/><! - - Ovo je komentar - - >
Sada se vide i slova Č, Š, Đ ,Ć i Ž<br/>
и и ица а ође: , , Ђ, , , , Џ и о а а.
</body>
</html>
Atributi
■ Pored tagova, drugi gradivni elementi u HTML-u su atributi
■ Atributi pripadaju tagu, i ne mogu se pisati samostalno
■ Atribut preciznije definiše način kako se tag prikazuje u browser-u
■ Atributi nisu obavezni, ali su nekada vrlo bitni i poželjni ■ Različiti tagovi imaju dozvoljene različite atribute
■ Imena atributa su unapred definisana jezikom, kao i njihove
vrednosti, tip i intervali, sem u slučaju stringa
■ Atributi se pišu pod znacima navoda
■ Jedan tag može imati više atributa
<tag atribut1=“12px” atribut2=“red” atribut3=“center”> ABC </trag>
Tag <hr/>
■ On dodaje jednu horizontalnu liniju visine 1 do 2 mm, ispred i
iza koje postoji prazan red
■ Moguće je podesiti visinu korišćenjem atributa SIZE="n" (n je
broj piksela), širinu pomoću atributa WIDTH="n" i poravnanje
pomoću atributa ALIGN (moguće vrednosti su LEFT, RIGHT i
CENTER)
■ Dužina linije je apsolutna dužina ili procenat dužine
celog ekrana
■ Primer
<hr width=“100px”/>
<hr width=“75%”/>
<hr width=“25%”/>
Atributi taga <hr/>
■ Align – poravnanje linije uz levu ili desnu stranu
■ Noshade – puna linija (bez senčenja)
■ Size – debljina linije
■ Width – dužina linije
■ Primer
<hr align="center" noshade size="5" width="150px“ />
Tagovi H1-H6
■ Upareni tagovi <h1> do <h6> se koriste za definisanje
veličine teskta
■ Iako je definisanje veličine teksta mnogo preciznije CSS-om,
skoro svi web pretraživači očekuju H tagove
■ Primarna uloga H tagova je da se istaknu naslovi i podnaslovi
■ Postoje tagovi H1, H2, H3, H4, H5 i H6
■ Element H1 daje najveću veličinu slova, a H6 najmanju
■ Svaki od ovih elemenata počinje u novom redu, a browser-i
dodaju još malo praznog mesta pre njihovog prikaza
■ U okviru taga se može navesti atribut ALIGN, koji određuje
horizontalno poravnanje prikaza teksta; vrednost ovog
atributa može biti jedna od sledećih: LEFT, CENTER, RIGHT
Primer
<html>
<head>
<title>Velicina slova</title>
</head>
<body>
<h1>Ovo je velicina slova u zaglavlju H1</h1>
<h2>Ovo je velicina slova u zaglavlju H2</h2>
<h3>Ovo je velicina slova u zaglavlju H3</h3>
<h4>Ovo je velicina slova u zaglavlju H4</h4>
<h5>Ovo je velicina slova u zaglavlju H5</h5>
<h6>Ovo je velicina slova u zaglavlju H6</h6>
</body>
</html>
Kreiranje pasusa
■ Tag <p> definiše kreiranje pasusa, koji počinje u novom
redu
■ U okviru taga <p> (za kreiranje pasusa) može se navesti
atribut ALIGN, koji određuje horizontalno poravnanje
paragrafa; vrednost ovog atributa može biti jedna od
sledećih: LEFT, CENTER, RIGHT
■ <p align="center">Ovo je pasus koji je centriran.</p>
Primer
<html>
<head>
<title>Pasusi</title>
</head>
<body>
<p>Ovo je prvi pasus.</p>
<p>Ovo je drugi pasus.</p>
<br/>
<p>Ovo je treci pasus ispred kojeg je bio jedan prazan red.</p>
<br/>
<p align="right">Ovo je pasus koji je desno poravnat.</p>
<p align="center">Ovo je pasus koji je centriran.</p>
</body>
</html>
Entiteti
■ Entiteti su specijalno definisane grupe karaktera, koje se
kucaju u HTML kodu, i imaju unapred definisan način
interpretacije u browser-u
■ Koriste se da bi se prikazali neki karakteristični simboli
■ Obzirom da se ne prikazuju kao običan tekst, počinju
simbolom & a završavaju se sa ; pa ih tako browser
prepoznaje
■ space
■ < <
■ > >
■ € €
■ © ©
■ ® ®
■ & &
■ @ @
■ . .
■ Ukoliko je dužina nekog tekst velika, bez posebnog formatiranja (upotrebom taga za novi red <br/>, ili pasusa <p>) u zavisnosti od širine browser-a, tekst će se različito lomiti.
■ Ukoliko su neke reči bitne da ostanu u grupi koristi se entitet između tih reči
Npr: <p> ……… Kojic Nenad …..</p>
■ Sa druge strane, jedino entitetom se može postići više od jednog space-a.
■ Kucanjem više space-a sa tastature, unutar teksta, browser uvek prikazuje samo jedan.
Boja
■ Boja se definiše kroz atribut color, ili bgcolor
■ Može biti definisana kao engleska reč (blue, yellow, green, red) ili kao broj
■ Preciznija definicija je brojna vrednost (heksadecimalna
predstava boje)
Boja
■ Preciznija definicija je oznaka (heksadecimalna predstava
boje), koja po pravilu počinje simolom # i ima kombinaciju
šest slova tj. cifara.
■ Ovih šest karaktera jednoznačno opisuju svaku boju na
bazi RGB modela boje. Svaka od tri boje može biti
zastupljena u konačnoj boji sa vrednošću koja je u
intervalu [0-255].
■ Ako se vrednosti [0-255], iz decimalnog sistema, zapišu u
heksadecimalnom brojnom sistemu, tada su krajnje
vrednosti ovog intervala: [00-FF].
■ RGB zapis: (0,0,0) – odsustvo svih boja, (255,255,255) –
maksimalna zastupljenost svih boja.
■ Tako je npr.
crvena boja #FF0000, plava #0000FF, crna #000000 ili #000
a bela #FFFFFF ili #FFF
Liste
■ Postoje dva tipa listi (oblika nabrajanja): sa numeracijom i bez
(neuređene)
■ Tag za definisanje liste sa numeracijom je <ol></ol>
■ Unutar ovog taga nabrajaju se konkretne stavke, koje se zovu elementi liste
■ Tag za svaki od elemenata liste je <li></li>
■ Inicijalna numeracija je po pravilu arapskim brojevima
■ U slučaju da se želi drugačiji način numeracije, koristi se tag <ol> sa atributom type
■ Primer: <ol type=”a”>, <ol type=”A”>, <ol type=”i”>, <ol type=”I”>, ...
■ Definisanjem prvog slova ili broja, ostali se automatski dodaju
■ Za počinjanje liste drugim brojem od 1 treba koristiti atribut start, npr. <ol start=“5”>
Primer
<ol>
<li>Mleko</li>
<li>Šećer</li>
<li>Keks</li>
<li>Sapun</li>
</ol>
<ol start="7">
<li> pesma 1</li>
<li> pesma 2</li>
<li> pesma 3</li>
<li> pesma 4</li>
</ol>
Neuređene liste
■ Za označavanje elemenata neuređene liste koristi se simbol <ul>
■ Ovaj tip označavanja se može urediti posebnim grafičkim elementima primenom atributa type
■ Primer:
<ul type=“disc”> za crnu tačku
<ul type=“square”> crni kvadrat <ul type=“circle”> crna kružnica
■ Ugneždene liste se definišu na isti način kao i liste, ali unutar njih
Primer
<ul type="disc">
<li>Lala</li>
<li>Ruža</li>
<li>Karanfil</li>
</ul>
<ul type="circle">
<li>Supa</li>
<li>Glavno jelo</li>
<li>Dezert</li>
</ul>
<ul type="square">
<li>Mercedes</li>
<li>Audi</li>
<li>Reno</li>
</ul>
Primer ugnježdenih listi <ol start="1">
<li>Bezalkoholna:
<ol>
<li>Čaj</li>
<li>Kafa</li>
<li>Sok</li>
</ol>
</li>
<li>Alkoholna:
<ol start="4">
<li>Votka</li>
<li>Vinjak</li>
<li>Pivo</li>
</ol>
</li>
</ol>
<ul>
<li>Stan
<ul>
<li>Jednosoban</li>
<li>Dvosoban</li>
</ul>
</li>
<li>Kuća
<ul>
<li>Prizemna</li>
<li>Jednospratna</li>
<li>Višespratna</li>
</ul>
</li>
</ul>
Definicione liste
■ Ove liste se koriste kod posebne vrste prikaza teksta
■ Definišu se pomoću tagova <dl>, <dt> i <dd>
■ Tag <dl></dl> se koristi za otvaranje i zatvaranje definicione
liste
■ Tag <dt></dt> se koristi za kreiranje naslova za stavke koje
se navode u listi
■ Tag <dd></dd> se koristi za definisanje sadržaja svake od
navedenih stavki
■ Ove liste mogu da se kreiraju i ako se tagovi <dt> i <dd> ne
upare
Primer
<DL>
<DT> Prvi trimestar <DD> Traje od xxx do xxx</DD> </DT>
<DT> Drugi trimestar <DD> Traje od xxx do xxx </DD> </DT>
<DT> Treći trimestar <DD> Traje od xxx do xxx </DD> </DT>
</DL>
Referenciranje objekata
■ Prostor na web serveru podeljen je kao i hard disk u
direktorijume i foldere.
■ Da bi se održao sadržaj web strane napravljene na personalnom računaru, koja u sebi sadrži i objekte (npr.slike) svi objekti se moraju definisati relativnim ili apsolutnim
putanjama.
■ Relativna putanja se koristi kada se pozivaju objekti koji su
sastavni deo posmatranog sajta (npr. slika A koja je deo
sadržaja strane nesto.html). Putanja se bazira u odnosu na
folder gde se nalazi html stranica.
■ Apsolutna putanja se koristi kada se pozivaju objekti koji su van
sajta ili na fiksnoj lokaciji (npr. slika B, koja se nalazi na
drugom sajtu)
Primer
■ Primer za sliku – pera.jpg, koja je u folderu A, unutar
direktorijuma B (gde je i kod stranice html stranice), a sve ovo
je na C disku
■ Relativna putanja (fajl koji poziva je u istoj ravni gde i folder A) B/pera.jpg
■ Apsolutna putanja (fajl koji poziva je bilo gde, pa se daje puna putanja - izbegavati)
C:A/B/pera.jpg www.sajt.com/slike/pera.jpg
C particija
Folder A
index.html
pera.jpg
Folder B
Primer
■ U slučaju da je struktura foldera kompleksnija za apsolutnu putanju mora da se piše svaki delić putanje, dok se relativna ne menja
■ Problem apsolutne putanje je promena lokacije i
uređenja sajta
Primer
■U slučaju da se u putanji navodi podređeni folder, onda se navodi njegovo ime u putanji, dok se za nadređeni folder koristi simbol ../.
■Ukoliko se sa stranice index.html, koja se nalazi u
folderu A2, želi stići do slike h.png, prvo se mora izaći u podređeni folder A1 i relativna putanja bi bila sledeća:
../h.png
h.png
Folder A1
Folder A2
index.html
Primer
■Ubacivanje slike koja se nalazi u folderu B unutar
stranice index.html, koja se nalazi u folderu A realizuje
se sledećom linijom koda:
../B/slika1.jpg
Folder A
index.html
slika1.jpg
Folder B
Slike
■ Slika se definiše tagom <img />
■ Ključni atribut taga <img /> je src
■ Atribut src definiše putanju (source) i ime slike koja se želi prikazati
■ Putanja može biti ili relativna ili apsolutna
<img src=“A/pera.jpg” />
<img src=“sajt.com/pera.jpg” />
■ Veličina slike koja se prikazuje u browser-u je originalna veličina slike
■ Promena prikaza veličine u browser-u, realizuje se atributima
width i height
■ Na ovaj način smanjuje se samo dimenzija ali ne i “težina” slike
<img src=“pera.jpg” width=“400px” height=“200px” />
Atributi slike
■ Veličina slike, definisana atributima width i height, može biti apsoluta (u pikselima) ili relativna (definisana u % u odnosu na
originalnu veličinu slike)
■ Često korišćen atribut je i alt. Ovaj atribut se koristi da bi se
umesto slike (kada postoji problem sa učitavanjem) na mestu slike prikaže tekst definisan atributom alt.
■ Atribut alt je vrlo bitan i za web pretraživače, obzirom da oni ne razumeju sastav slike, nego sliku vide kroz tekst (definisan u alt
atributu)
■ Slika može imati i atribut border, koji definiše okvir oko slike i atribut name, koji se ne vidi, ali se koristi da viši programski jezici mogu da prozovu sliku i izvrše neku akciju nad njom
■ Atribut align se može koristiti za pozicioniranje slike
Primer
<body>
Slika 1 – Originalna slika sa atributom alt koji ispisuje tekst ako nema slike<br>
<img src="slike/slika1.jpeg" alt="predeli Srbije"> <br/>
Slika 2 – Definisanje atributa za apsolutnu visinu i dužinu slike <br/>
<img src=" slike/slika1.jpeg" height=327 width=291 alt="predeli Srbije“><br/>
Slika 3– Definisanje atributa za relativnu visinu i dužinu slike <br/>
<img src=" slike/slika1.jpeg" height=25% width=105% alt="predeli Srbije"> <br/>
Slika 4 – Definisanje atributa za poravnanje slike align <br>
<img src=" slike/slika1.jpeg" height=150 width=180 alt="predeli Srbije“ align=”right”> <br/><br/>
Slika 5 – Definisanje atributa za poravnanje slike align i imena slike<br>
<img src=" slike/slika1.jpeg" height=15% width=15% alt="predeli Srbije“ align=”center” name="eksterijer" border=”10”> <br/><br/>
</body>
Problemi sa width i heigth
■ Ukoliko se skaliranje dimenzija ne uradi proporcionalno za
obe dimenzije, dobija se deformisana slika
Slika kao pozadina
■ Definisanjem direktno u HTML kodu, pomoću atributa background, dobija se efekat slike kao pozadine dela ili celog
sajta
<body background=“slika.gif">
■ Definisanjem direktno u HTML kodu sa alternativom boje
<body background=" slika.gif“ bgcolor="#333333">
■ Definisanje u CSS stilu (poželjno) body {
background-image: url(“slika.gif"); background-position: 50% 50%;
background-repeat: no-repeat; }
Hiperveze
■ Hyper linkovi predstavljaju vrlo bitan segment rada HTML-a, ali i
konkretne primene obzirom na potrebu navigacije među različitim web stranicama sajta.
■ Tag za link je <a>
■ Između <a> i </a> nalazi se tekst ili slika koja se prikazuje
korisniku kao vidljiv deo linka
■ Klikom na taj tekst ili sliku, treba da se ukaže na neki fajl ili
objekat (web stranu, sliku, video fajl, zip fajl, word dokument, ...)
■ Atribut taga <a> kojim se definiše putanja i fajl na koji će se
klikom na link ukazati definisan je atributom href
■ Primer 1: Link ka web strani istog sajta
<a href=“home.html”>Ovde pritisnuti da bi videli našu home stranu.</a>
Primer
■ Primer 2: Link ka web strani druge web lokacije
<a href=“http://nesto.com/index.html”>Ovde pritisnuti da bi videli sajt
nesto.com .</a>
■ Primer 3: Tekstualni link ka nekom fajlu
<a href=“http://www.nesto.com/web/mika.zip”> Ovde pritisnuti da bi
skinuli mika.zip sa sajta www.nesto.com </a>
■ Primer 4: Link (slika) ka web strani istog sajta
<a href=“home.html”> <img src="slike/slika1.jpeg“/> </a>
Interno referenciranje
<ul id="meni1">
<li><a href="#">Početna strana</a></li>
<li><a href="#">O nama</a></li>
<li><a href="#">Galerija</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
■ Za vrednost atributa href iskorišćena je vrednost # koja omogućava
da link postoji ali da u ovom slučaju klik na neki od linkova ne vodi
nigde.
Primer navigacije pomoću liste
<ul>
<li><a href=“index.html”>Početna</a></li>
<li><a href=“products.html”>Proizvodi</a></li>
<li><a href=“about.html”>O nama</a></li>
</ul>
Primer navigacije sa podmenijem
<ul>
<li><a href=“index.html”>Početna</a></li>
<li>Proizvodi
<ul>
<li><a href=“proizvod1.html”>Proizvod
1</a></li>
<li><a href=“proizvod2.html”>Proizvod
2</a></li>
<li><a href=“proizvod3.html”>Proizvod
3</a></li>
</ul>
</li>
<li><a href=“about.html”>O nama</a></li>
</ul>
Interno referenciranje (anchor)
<html>
<body>
<ol> <li> <a href="#1">HTML</a></li>
<li> <a href="#2">JavaScript</a></li>
<li> <a href="#3">PHP</a></li>
</ol>
<h3> <a name="1"> HTML</a> </h3>
<p>Ovde ubaciti malo<br/> više teksta.</p>
<h3> <a name="2"> JavaScript </a> </h3>
<p>Ovde ubaciti malo više teksta.</p>
<h3> <a name="3"> PHP</A> </h3>
<p>Ovde ubaciti malo više<br/> teksta.</p>
</body>
</html>
Prikaz linkovanih dokumenata
■ Primenom atributa target sadržaj linkovane web stranice prikazuje
se u novom prozoru browser-a.
<a href="www.nekisajt.com" target="_blank"/> Klik </a>
■Otvara linkovani document u novom prozoru ili tab-u
<a href="www.nekisajt.com" target="_self"/> Klik </a>
■Otvara linkovani document u istom prozoru (default)
<a href="www.nekisajt.com" target="_parent"/> Klik </a>
■Otvara linkovani document u roditeljskom (nadređeom) frame-u
<a href="www.nekisajt.com" target="_top"/> Klik </a>
■Otvara linkovani document u celom body-ju prozoru
<a href="www.nekisajt.com" target="framename"/> Klik </a>
■Otvara linkovani document u posebnom frame-u sa definisanim
imenom
Formatiranje teksta linka
■ Link ima tri faze koje se detektuju (inicijalna boja, boja u
trenutku klika, i boja nakon klika na link)
■ Ove tri faze se mogu pojedinačno definisati bojom
■ To se realizuje kroz tri atributa LINK, ALINK i VLINK
■ Ovi atributi se mogu definisati u tagu body i tada pravilo važi za sve linkove u strani. Takođe, definišu se i u CSS-u
Atribut Opis
Link Boja linka pre nego što se aktivira
Alink Boja linka u trenutku aktiviranja
Vlink Boja linka nakon aktiviranja
Primer
<html>
<head>
<title>Ovo je strana o linkovima</title>
</head>
<body BGCOLOR="#CCFFAA" TEXT="blue" LINK="red"
VLINK="green" ALINK="red">
<a href=“http://www.nesto.com/web/mika.zip”> Ovde pritisnuti da bi skinuli mika.zip sa sajta www.nesto.com </a>
<br>Neki tekst
</body>
</html>
Link za mail
■ Pravljenje linka kojim se automatski otvara Outlook Express
je istog formata kao i klasičan link, ali je u atributu href
definisana adresa primaoca sa
mailto:[email protected]
<a href="mailto:[email protected]">Kontakt</a>
■ Pored osnovne adrese mogu se dodati i ostali atributi.
Odvajaju se znakom ?, i & i nose fiksna imena promenljivih
<a href="mailto: [email protected]?subject=Mail sa
sajta&body=Dobar dan">Kontakt</a>
Dodavanje slike u URL adresu
<abbr title="Visoka skola strukovnih studija za
informacione i komunikacione tehnologije">Visokoj ICT Skoli</abbr>
■ Ovaj tag svoju interpretaciju u browser-u ostvaruje kada se mišem pređe preko dela teksta koji pripada sadržaju ovog elementa, kada
se u posebnom pop-up prozoru prikazuje sadržaj atributa title.
■ Linkovanje unutar delova jedne slike omogućena je primenom
tagova <map> i <area>
■ Učitavanjem originalne slike, moguće je na njoj definisati oblasti i
svakoj od njih dodeliti drugu linkovanu stranu.
■ Povezivanje slike sa oblastima se realizuje pomoću atributa
usemap, unutar taga <map> definiše se proizvoljno mnogo oblasti
tagom <area>.
■ Svaka oblast je definisana oblikom (atribut shape) i koordinatama
koje opisuju tu oblast (atribut coords)
Primer
<img src="svi_artikli.jpg" usemap="#svi">
<map name="svi">
<area shape="rect" coords="0,0,80,150" alt="Bokal"
href="bokal.html">
<area shape="circle" coords="80,70,5" alt="Tanjir"
href="tanjir.html">
<area shape="circle" coords="90,30,3" alt="Sat"
href="sat.html">
</map>