Web Tehnologije PHP & MySQL - Elektrotehnički fakultet Podgorica

Web Tehnologije
PHP & MySQL
II Nedjelja
HTML – Linkovi, Grafika i Tabele
LINKOVI - HIPER VEZE

Hiper-veza (engl. hyperlink) uspostavlja hipertekstuelnu strukturu
dokumenta zapisanog u HTML-u tako što omogućava da se poveže
neki fragment tekućeg teksta sa nekim drugim dijelom tog ili, pak,
nekog drugog teksta.

Tekstovi koji se povezuju hipertekstuelnim vezma se mogu nalaziti na
istom ili na različitim računarima.
Hiper-veza se može zamisliti kao luk koji povezuje neka dva čvora
obilježena, na primer, sa 1 i 2 u jednom grafu:
Hiper-veza predstavlja mogućnost da se čitanje teksta iz čvora 1 nastavi
u čvoru 2.
Ovakva hiper-veza se enkodira pomoću sidra (engl. anchor) koje
povezuje fragment teksta u čvoru 1 sa adresom čvora 2.
Za sve linkove definicija početne pozicije se dobija korišćenjem taga
<A>. Opšti izgled ovog taga za sidro je oblika:
<A atribut> ... </A>.
Linkovi

Sintaksa ovog taga podrazumijeva da se u čvoru 1 opišu:

fizička pozicija u tom čvoru sa koje se prelazi na tekst u čvoru 2 i
fizička lokacija na kojoj se nalazi tekst u čvoru 2.
Ove dvije pozicije se nazivaju, redom, polazni i dolazni čvor. Polazni čvor
označava u tekstu onu poziciju sa koje se prelazi na neki drugi tekst i kodira
se pomoću atributa HREF:
<A HREF= adresa čvora 2> pozicija u čvoru 1 sa koje se prelazi na čvor 2 </A>

Browser obično interpretira polazni čvor u HTML-dokumentu kao fragment
teksta na koji se može "kliknuti"
Dolazni čvor je ili adresa neke datoteke ili tag koja obilježava dio teksta.
Definiše se pomoću atributa NAME:
<A NAME= pozicija u čvoru 2> tekst u čvoru 2 na koji se prelazi iz čvora 1 </A>
Atribut NAME nije obavezan.
Adresiranje se temelji na pojmu uniformnog lokatora resursa (skr. URL, od
engl. Uniform Resource Locator), koji omogućava da se precizno imenuje
adresa čvora 2, ma gdje on bio fizički lociran.
U opisivanju adrese koja upućuje na čvor 2 razlikujemo više slučajeva u
zavisnosti od toga koliki je deo URL-a poznat u tom trenutku.
Linkovi

Linkovi koji se mogu definisati u okviru jednog HTML dokumenta
mogu se podijeliti na tri vrste.
Prvu vrstu bi činili linkovi sa kojima se može pristupiti nekom
drugom dijelu iste te stranice u kojoj se link i nalazi (npr., na
kraju stranice napravi se link koji korisnika koji ga aktivira vraća
na vrh stranice).
u polaznom tekstu se navodi tag (polazni čvor):
<A HREF="#adresa"> tekst na koji se može "kliknuti" </A>

u dolaznom tekstu se navodi tag (dolazni čvor):
<A NAME= "adresa"> dolazni tekst </A>
Za prvu vrstu linkova moramo prvo da napravimo oznaku na
nekom mjestu u dokumentu na koje želimo da pređemo kada
kliknemo na odgovarajući link. Oznaka se dobija stavljanjem
atributa name u <a> tag. Primjer:
<a name="kraj"></a>
Prva vrsta Linkova

Izmedju početnog <a name="kraj"> i završnog </a> taga može
stajati bilo koji element naše prezentacije (tekst, slika), a ne mora
stajati ništa (kao što je ovdje slučaj). Ovaj tag ne proizvodi nikakav
vidljiv efekat u HTML dokumentu - on deluje u pozadini vašeg
dokumenta i služi vašem browseru da se lakše orjentiše.
“Pravi" link (tj. onaj link kojeg vi vidite u HTML dokumentu) i koji vas
jednim klikom miša dovodi do željenog mjesta (tj. do onog mesta na
koje smo postavili gore pomenutu oznaku) se dobija dodavanjem
atributa href u <a> tag. Ako se data oznaka nalazi unutar fajla sa
nazivom stranica.html, a ime oznake je kraj stavićemo:
<a href name=“stranica.html#kraj”>Klikni ovdje da skočišna kraj</a>

klikni ovde da skocis na kraj
Sada kada korisnik klikne mišem na link "Odavde se odlazi na kraj
stranice" odlazi se na dio stranice koji je definisan imenom kraj.
Druga i treća vrsta

Drugu vrstu bi činili linkovi do neke druge stranice u okviru iste te prezentacije :
<a href name=“stranica1.html”>Skok na sledeću stranicu </a>

Primjer mogu biti linkovi za kretanje napred i nazad kroz prezentaciju.
Aktiviranjem druge vrste linkova napušta se tekuća stranica i dalje izvršavanje
se nastavlja na nekoj drugoj stranici tekuće prezentacije.
Treću vrstu bi činili linkovi do stranice u nekoj sasvim drugoj prezentaciji koja
može biti postavljena na računaru koji se nalazi na nekom sasvim drugom
serveru.
Opšti oblik adrese koja se pojavljuje kao vrijednost HREF atributa je:
scheme://server.domen [:port]/putanja/ imeDokumenta

Na primjer, ako se u okviru prezentacije želi uspostaviti veza sa
Elektrotehničkim fakultetom, čija adresa je www.etf,ac,me, tada se navodi kod:
<a href="http://www.etf.ac.me/">Elektrotehnicki fakultet </a>

Pored odlaska na neku drugu stranicu linkovi se mogu iskoristiti i za pisanje
nove mail poruke pomoću default programa za elektronsku poštu - najviše
korišćeni su Outlook Express.
<a href="mailto: [email protected]"> Posaljite e-mail poruku! </a>
WEB GRAFIKA

Njčešći formati u kojima se čuvaju slike su GIF i JPEG.
Slike se u tekstu navode koristeći tag IMG (skr. od image) koja ima
obavezni atribut SRC (skr. od source). Oblik u kome se navodi ovaj
tag je:
<IMG SRC="URL datoteke u kojoj je slika">
Prikaz slike koja se čuva u datoteci znak.gif u tekućem dir.
<IMG SRC="znak.gif">
<HTML>
PrimjerPII1.html
<HEAD>
<TITLE> Slika unutar reda</TITLE>
</HEAD>
<BODY>
<H2>Znak fakulteta</H2>
<H4> Proslava
<IMG SRC="znak.gif" ALT="Elektrotehnički fakultet">
povodom 40 godina postojanja studija elektrotehnike
</H4>
</BODY>
</HTML>
ATRIBUTI TAGA IMG

Tag IMG može imati različite atribute koji omogućavaju da se
precizno opišu položaj, dimenzije i odnos slike prema drugim
djelovima teksta.
Atribut za poravnavanje slike u odnosu na margine ALIGN može
imati vrijednosti:
za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM
za horizontalno poravnjavanje: LEFT, CENTER, RIGHT
PrimjerPII2.html Poravnavanje slike sa linijom reda

<HTML>
<HEAD>
<TITLE> Atribut ALIGN</TITLE>
</HEAD>
<BODY>
<H3> Tri
<IMG SRC="znak.gif" ALIGN=TOP> tipa
<IMG SRC="znak.gif" ALIGN=MIDDLE> poravnavanja
<IMG SRC="znak.gif" ALIGN=BOTTOM> slike.
</H3>
</BODY>
</HTML>

Atributi za dimenzionisanje slike su WIDTH (širina) i HEIGHT
(visina).
Atributi koji opisuju položaj slike su HSPACE i VSPACE
Atribut koji opisuje širinu okvira slike BORDER
Atribut koji umjesto slike daje naziv slike ALT
PrimjerPII3.html Pozicioniranje slike
<HTML>
<HEAD>
<TITLE> Slika u pasusu</TITLE>
</HEAD>
<BODY>
<H3> Umanjena, poravnata i uokvirena slika</H3>
<IMG SRC="znak.gif" ALIGN=RIGHT
HSPACE=20 VSPACE=0 WIDTH=80 HEIGHT=90 BORDER=10
ALT="Znak ETF-a">
<p>Ova slika je preuzeta sa <I>zvaničnog
sajta</I>
Elektrotehničkog fakulteta...................<BR>
.............................................<BR>
.............................................<BR>
.............................................</p>
</BODY>
</HTML>
SLIKE - VEZE

Slika u dokumentu može predstavljati i polazno sidro u hiper-vezi.
Kažemo da je takva slika slika-veza. Dolazna adresa se tada navodi
kao kod hiper-veze, a umjesto teksta na koji se može "kliknuti" navodi
se tag IMG.
<A HREF= URL dolazne datoteke > tag IMG slike na koju se može "kliknuti" </A>
PrimjerPII4.html Slika-veza
<HTML>
<HEAD>
<TITLE> Slika kao hiper-veza</TITLE>
</HEAD>
<H2>Znak fakulteta</H2><BR><BR>
<H4> Znak Elektrotehničkog fakulteta može dobiti bilo
<a href="znak1.gif">"klikom" ovdje</a>,<BR><BR><BR>
bilo ovdje "klikom" na ovu sličicu --->
<a href="znak1.gif">
<IMG SRC="znak.gif" ALIGN=CENTER
HSPACE=20 VSPACE=0 WIDTH=80 HEIGHT=90 BORDER=10>
</a>
</H4>
</BODY>
</HTML>
BOJE I POZADINE

Upotreba boja je prvenstveno vezana za atribute taga BODY.
Prilikom navođenja ovog taga mogu se definisati boje sledećih
elemenata u tekstu:
Boja pozadine (engl. background), koja predstavlja boju "papira". Boju pozadine
određuje vrijednost atributa BGCOLOR.
Osnovna boja slova upotrijebljenih u dokumentu opisuje se vrijednostima
atributa TEXT. Tokom sastavljanja dokumenta osnovna boja slova, opisana
atributom TEXT se može promijeniti pomoću atributa COLOR taga <FONT>.

PrimjerPII6.html Boje pozadine i slova
<HTML>
<HEAD>
<TITLE> Boje pozadine i slova</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
<H1>Ovaj naslov je crven zbog atributa TEXT</H1>
<BR><BR>
<H1><FONT COLOR="#0000FF">
a ovaj naslov je plav zbog taga FONT
</FONT>
</H1>
</BODY>
</HTML>
BOJE HIPERTEKSTUALNIH VEZA

Boja hipertekstuelnih veza se određuje na osnovu donja tri atributa
prema statusu veze:
Boja neposjećene hipertekstuelne veze (prije nego što se na nju "klikne") je
određena atributom LINK;
Boja već posjećene hipertekstuelne veze (poslije povratka u dokument iz koga
se "kliknulo") je određena atributom VLINK;
Boja hipertekstuelne veze u trenutku kada se na nju "klikne" je određena
atributom ALINK.

PrimjerPII7.html Boje atributa u tagu BODY
<HEAD>
<TITLE> Atributi u tagu BODY</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#990000" VLINK="#660000"
ALINK="#ff0000">
<H1>Iz teksta na bijeloj pozadini sa crnim slovima<BR>
poziva se <a href="PrimjerPII6.html">ovde</a> tekst<BR>
iz prethodnog primjera. <BR><BR>
<UL>
<LI><Font COLOR="#990000"> Boja za atribut LINK</FONT>
<LI><Font COLOR="#660000"> Boja za atribut VLINK</FONT>
<LI><Font COLOR="#FF0000"> Boja za atribut ALINK</FONT>
</UL>
</H1>
</BODY>
</HTML>
•
Postavljanje slike u pozadinu dokumenta (slike preko koje može da
se piše) se ostvaruje dodjelom adrese slike preko atributa
BACKGROUND.
PrimjerPII8.html "Popločavanje" pozadine slikom ... je isti
primer kao predhodni primjer, ali je dodat atribut BACKGROUND.
<HTML>
<HEAD>
<TITLE> Slika kao pozadina</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000"
BACKGROUND="znak.gif">
<H1>Ovaj naslov je crven zbog atributa TEXT</H1>
<BR><BR>
<H1><FONT COLOR="#0000FF">
a ovaj naslov je plav zbog taga FONT
</FONT>
</H1>
</BODY>
</HTML>
TABELE

Tabela je i u HTML-u dvodimenziona matrica čiji se elementi nazivaju ćelije
(engl. cell).
Ćelija može sadržavati raznovrsne informacije: brojeve, tekst, boje, liste,
hiper-veze, slike, itd. Tabela se sastavlja tako što se opisuju redom njene
vrste (redovi, engl. row) i sadržaj svake ćelije u redu.
Tabela se opisuje uz pomoć složenog taga TABLE koja može
sadržavati više atributa:
BORDER (ili okvir, ram) koji opisuje širinu spolašnjeg okvira tabele;
CELLSPACING koji opisuje širinu linije koja razdvaja dve ćelije;
CELLPADDING koji opisuje prostor oko sadržaja ćelije;
WIDTH koji opisuje ukupnu širinu tabele.

Nadnaslov tabele se može zadati tagom CAPTION koja se ispisuje iznad
tabele i može imati atribut ALIGN:
za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM
za horizontalno poravnavanje: LEFT, CENTER, RIGHT

Svaka vrsta u tabeli se opisuje između zagrada <TR> i </TR>
(engl. table row). I tag TR može imati atribute:

Pojedinačna ćelija se opisuje između zagrada <TD> i </TD>. Tag
TD, pored atributa ALIGN i VALIGN, može imati i atribute:

za horizontalno poravnjavanje, atribut ALIGN sa vrijednostima: LEFT,
CENTER, RIGHT
za vertikalno poravnavanje, atribut VALIGN sa vrijednostima: TOP,
MIDDLE, BOTTOM
za horizontalno spajanje ćelija: ROWSPAN (spaja ćelije iste vrste) i
za vertikalno spajanje ćelija: COLSPAN (spaja ćelije iste kolone).
Tag <TH> ima ista svojstva kao etiketa <TD> s tom razlikom što
obezbjeđuje da sadržaj ćelije bude automatski centriran i u crnom
slogu (bold).
PrimjerPII9.html Tabela kodova.
PrimjerPII10.html Boje u tabeli.
OKVIRI I ZONE

Okviri ili zone (engl. frame) omogućavaju da se formira dokument
koji će se sastojati od adresa bar dva različita dokumenta.
Browser, ukoliko je sposoban za to, interpretira okvire kao podjelu
tekućeg prozora na više nezavisnih podprozora od koji svaki sadrži
adresirani dokumenat. Osnovni tag je složeni tag <FRAMESET>.
Ovaj tag zamjenjuje tag BODY u HTML-dokumentu.
Tag <FRAMESET> ima atribute:
COLS za vertikalnu podjelu prozora i
ROWS za horizontalnu podjelu prozora navigatora.
Adresa dokumenta se navodi u okviru taga FRAME čiji su atributi
SRC, preko koje se zadaje adresa dokumenta koji će biti
prikazan u zoni tog taga i MARGINWIDTH i MARGINHEIGHT

Tag NOFRAME sadrži poruku za navigator koji nije u
stanju da interpretira okvire.
PrimjerPII11.html Dokument sadrži adrese dokumenata
iz odjeljka o slikama i odjeljka o tabelama.
<HTML>
<HEAD>
<TITLE> Okviri </TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC="PrimjerPII8.html">
<FRAME SRC="PrimjerPII9.html">
<NOFRAMES>
nemoguc prikaz sa ovim navigatorom
</NOFRAMES>
</FRAMESET>
</HTML>
PrimjerPII12.html Tri okvira: prozor podeljen u
odnosu 30% za levi podprozor, od desnog
podprozora, 20% je za gornji podprozor.
<HTML>
<HEAD>
<TITLE>Tri okviri</TITLE>
</HEAD>
<FRAMESET COLS="30%, *">
<FRAME SRC="PrimjerPII9.html">
<FRAMESET ROWS="20%,*">
<FRAME SRC="PrimjerPII10.html">
<FRAME SRC="PrimjerPII8.html">
</FRAMESET>
</FRAMESET>
</HTML>

Download Report