Osnove HTML-AHTML - 32'6(û$1-(v HyperText Markup Language v HTML predstavlja jezik za R]QDþDYDQMH hiperteksta i hipermedija (teksta, slike, zvuka, videa i drugih PHÿXVREQR povezanih

Osnove HTML-A

Web dizajn

Dr Nenad Kojić

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

http://notepad-plus-plus.org/





Rad sa tekstom u HTML-u

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>






</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

Rad sa listama u HTML-u

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>

Rad sa slikama u HTML-u

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; }

Hiper veze - linkovi

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>


2</a></li>


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 ispred URL adrese

<head>

<link rel="shortcut icon" href="ime.ico" />

</head>

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>

Nastaviće se...

Web dizajn

Dr Nenad Kojić

Documents

Osnove HTML-AHTML - 32'6(û$1-(v HyperText Markup Language v HTML predstavlja jezik za R]QDþDYDQMH hiperteksta i hipermedija (teksta, slike, zvuka, videa i drugih PHÿXVREQR povezanih