HTML programiranje.pdf

7/29/2019 HTML programiranje.pdf

1/63

Boko Nikoli

HTML PROGRAMIRANJE

Beograd 2004

1


2/63

HTML - UVOD

ta je HTML?

HTML (HyperText Markup Language) je veoma jednostavan jezik koji slui za izvravanje

programa na daljinu. Ovaj jezik predstavlja standard za Internet dokumente.Sa razvojem Interneta dolo je do pojave nove vrste dokumenata - hiperteksta. To je tekst kojisadri veze ili linkove ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst jeskup stranica u obliku datoteka, meusobno povezanih linkovima koje su umetnute u stranice.

Na ove linkove se moe kliknuti. Za razliku od obinog teksta, koji se ita linearno (sleva nadesno, odozgo nanie), hipertekst se ita pratei hiper-veze u tekstu, dakle, ne nuno nalinearan nain.

HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u odreenom direktorijumu serveravezanog na Internet, to ih ini dostupnim na web-u.Hipertekst je, tekst koji sadre veze ili linkove ka drugim dokumentima ili na samog sebe.Preciznije, hipertekst je skup stranica, u obliku datoteka, meusobno povezanih linkovimakoje su umetnute u stranice. Na ove linkove se moe kliknuti. Za razliku od obinog teksta,koji se ita linearno (sleva na desno, odozgo nanie), hipertekst se ita pratei hiper-veze utekstu, dakle, ne nuno na linearan nain.Postoji vei broj jezika koji omoguavaju da se precizno opie izgled i sadraj jednog teksta.Od posebnog su znaaja:

SGML (skr. od Standard General Markup Language), TeX i LaTeX (za matematike tekstove), PostScript (jezik laserskih tampaa), RTF (skr. odRich Text Format), ...

Najznaajniji jezici za opis hiperteksta su: SGML, HTML (skr. odHyperText Markup Language), pojednostavljena verzija SGML-a, XHTML (skr. odExpandable HTML) i XML (skr. od Extensible Markup Language, "kompromis" izmeu preterane

sloenosti SGML-a i jednostavnosti HTML-a; njegova standardizacija je u toku)

Za generisanje HTML stranice potreban je najobiniji tekst editor, na primer Notepad.Nalazi se u Start meniju pod Programs->Accessories.

Pisanje programa pomou tekst editora NotepadPrvo je potrebno startovati Notepad program. U okviru Windows operativnog sistema, nastatusnoj liniji treba pronai dugme Start i pritisnuti ga. Od ponuenih opcija treba pronaiopcijuRun i treba aktivirati ovu opciju. Na prozoru koji se pojavio postoji tekst polje. U njegatreba upisati notepad(slika 1).

2


3/63

Slika 1 Aktivirana opcijaRun

Nakon aktiviranja dugmeta OK, dobija se prozor tekst editora Notepad (slika 2).

Slika 2 Aktiviran prozor tekst editora Notepad

Na beloj povrini pie se kod za HTML stranicu. Stranica se u svakom trenutku moe snimitiaktiviranjem na meniju opcijaFile, pa opcije Save. Sauvati stranicu pod nazivom proba.htmKod snimanja stranice treba obratiti panju da dokumenat koji u ovom sluaju treba da

predstavlja HTML stranicu mora imati ekstenziju htmlili htm.

Testiranje HTML stranice u Internet browseru

Prvo je potrebno startovati Internet Explorer program. U okviru Windows operativnog

sistema, na statusnoj liniji treba pronai dugme Starti pritisnuti ga. Od ponu

enih opcija trebapronai opcijuPrograms>>Internet Exploreri treba aktivirati ovu opciju.

U meniju izabrati opcijuFile>>Openpri emu se otvara dijalog prozorOpen kao na slici 3. ipritiskom na dugmeBrowsepronai html stranicu proba.htm .

Slika3. Dijalog prozorOpen

3


4/63

Nakon aktiviranja dugmeta OK, dobija se prozor koji predstavlja izgled HTML stranice uInternet Exploreru.

Za pisanje HTML programa mogu se koristiti i specijalni alati, na primer Front Page. Stranica

se moe videti u okviru Web browser-a, Netscape Navigator ili Internet Explorer

HTML komande se piu u vidu tzv. TAG-ova. Jedan tag je ustvari komanda koja govoribrowseru sta i kako da uradi tj. na koji nacin da prikaze sadrzaj vase stranice.HTML tagovi su "case insensitive" tj. svejedno je da li ih pisete malim ili velikim slovima.Tagovi se piu unutar oznaka "" (bez znakova navoda) npr: .Ovaj tag se nalazi na poetku svakog HTML dokumenta govori browseru da je fajl koji je upravo poeo da uitava HTML dokument i da kaotakvog treba i da ga prikae.

Na kraj HTML dokumenta se stavlja zavrni HTML tag:.Ovaj tag govori browseru da je to kraj HTML dokumenta. Veina tagova ima i poetni i

zavrni tag. Zavrni tag se dobija dodavanjem znaka "/" i oznaava mesto na kom prestajedejstvo poetnog taga.Vrste tagova

prosti tagovi za opisivanje jednostavnih elemenata logike strukture. Oblika su: sloeni tagovi su zagrade oblika y kojima je opisan izgled dela tekstay. atributi sloenih obeleja oblika: y koji pruaju dodatne

informacije, obino o grafikom izgledu, dela tekstay

Struktura HTML straniceMinimalna struktura HTML-dokumenta obuhvata tagove:, - zagrade HTML-teksta;, - zagrade zaglavlja, sadri meta-definicije HTML-dokumenta;, - zagrade za naziv HTML-dokumenta i, - zagrade teksta obeleenog dokumenta.

Head deoSvaki HTML dokument se sastoji od dva dela: zaglavlja (engl. head) i tela (engl. body).Zaglavlje se odvaja tagovima i a telo dokumenta tagovima: i.Sve ono sto se napie u zaglavlju dokumenta nee se prikazati u prozoru browsera vec obicno

slui samo da prui neke informacije o stranici.

BODY deoSve ono to je napisano izmedju tagova i predstavlja telo dokumenta

pojavie se kao sadraj prezentacije u prozoru browsera.Izgled stranice:ovde je naziv prezentacije

ovde se unosi sve ono sto zelite da se vidi u prezentaciji

4


5/63

KomentarDodatna opcija omoguava da se obelei komentar u HTML-obeleenom tekstu koji se nee

videti u vizuelizaciji dokumenta.Na primer:

HeaderiNaslovi (engl. headers) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag za naslovima opti oblik: Naslov nivoa n

gde n uzima vrednosti od 1 do 6.

OdeljakOdeljak (engl. division) se opisuje zagradama ... .Ovaj tag moe imati atribut za pozicioniranje ALIGN sa vrednostima CENTER, RIGHT iliLEFT.

ParagrafPasus (engl.paragraph) se obeleava zagradama

...
.Ukoliko u ravnom tekstu sledi pasus za pasusom, tag se moe izostaviti.Ovaj tag moe imati atribut za pozicioniranje ALIGN sa istim vrednostima kao tag .
Novi redNovi red (engl. break) se obeleava etiketom
.Ovo je prosti tag: ne postoji kraj taga .

Razdvojna linijaRazdvojna linija (engl. rule) se obeleava etiketom sa opcionim atributom NOSHADEOvo je prosti tag: ne postoji kraj taga .PrimerSIZE debljina linije

Primeri za rad u laboratoriji

Primer 1. Prvi program u HTMLu.

Ovo je naslovTEKST KOJI SE PRIKAZUJE

Primer 2. Ispisivanje naslova razliitih veliina.

5


6/63

Naslovi Naslov H1

Naslov H2 Naslov H3 Naslov H4 Naslov H5 Naslov H6

Primer 3. Primeri osnovnih tagova unutar HTML stranice.

Primeri osnovnih tagova

HTML

HTML (HyperText Markup Language) je veoma jednostavan

jezik cije osnove svako moze da se brzo savlada. U okviru ovog kursa proucavaju se osnoveHTML-a koje su dovoljne da se naprave jednostavne ali sasvim zadovoljavajuce prezentacije.

Svaki put kada krstareci internetom naletite na neku zanimljivu

stranicu , a ne znate kako je napravljena, njen izvorni HTML kod mozete pogledati ako uliniji menija odaberete: View -> Source (ili View -> Page Source u Netscape

Navigatoru).

HTML se koristi i u okviru
ASP stranica
JSP stranica,
Zajednosa JavaScriptom
ili PHP jezikom
ili nekim drugim script jezikom

HTMLje

hiper-tekst-Markup jezik.Kad savladate osnove HTML-a mozete preci na upoznavanje JavaScripta

Primer 4. Primer paragrafa.

HTML Primer

6


7/63

HTML Uvod

Ovo je primer prvog paragrafa.

Koji se radi na prvom casu.

Drugi paragraf.

Ovo je centrirani paragraf

7


8/63

LISTE

Pojam listiListe u jeziku HTML su navoenje, popisivanje onih delova teksta, koji se ne mogu svesti na

prethodno opisane elemente logike strukture (pasus, odeljak, i sl).

Razlikuju se tri vrste lista: nenumerisane, numerisane i neureene liste.

Kod lista, grafiki izgled se ne odreuje automatski kao to se, na primer, automatski odreujegrafika interpretacija obeleenih karakterskih niski.

Numerisane i nenumerisane listeNumerisane liste se ubacuju pomou taga, a nenumerisane liste pomocu taga.Pojedine stavke liste se definisu pomou taga (ovaj tag ne zahteva zavrni tag).Osnovna razlika izmeu ove dve vrste listi je ta to e u numerisanim listama ispred pojedinihstavki liste stajati redni brojevi, a u nenumerisanoj listi e stajati dugmad.

Nenumerisane liste su liste sa kojima se nabrajaju stavke, bez navoenja rednog broja.Na primer:

apples bananas grapefruit

Kod za prethodni primer je: apples

bananas grapefruit

Opta struktura za ovu vrstu lista je (UL unordered list):

Element 1 liste

Element 2 liste

. . . . .

Da se promeni okruglo dugme moe se regulisati odgovarajuim atributom. Atribut je typekoji moe uzimati vrednosti:

circle - okruglo dugme disc - ispunjeno okruglo dugme

square - kvadratno dugme

8


9/63

Primer sa kvadratima: prolece leto jesen zima

a odgovarajui HTML kod je:

proleceletojesenzima

Numerisane liste

To su liste sa navoenjem rednog broja.Opta struktura je (OL - ordered list):

Element 1 liste Element 2 liste

. . . . .

Primer numerisanih lista:

Godisnja doba su:1. prolece2. leto3. jesen4. zima

koja se dobija sledeim HTML kodom:

Godisnja doba su:


Ako niste zadovoljni arapskim brojevima koje ovaj tag koristi po default-u, moete upotrebitiatribut type. Ovaj atribut moe imati sledee vrednosti:

A - velika slova a - mala slova I - rimski brojevi i - mali rimski brojevi

9


10/63

Kako izgleda gornja lista sa velikim rimskim brojevima:I. proleceII. letoIII. jesenIV. zima

a odgovarajui HTML kod:


Neureene liste

Ovaj oblik liste dobijamo pomocu taga. Svaka stavka ovakve liste se sastoji iz dva dela:termina koji hoemo da definisemo i njegove definicije.Termini zapocinju tagom, a njihove definicije tagom.Termini se poravnavaju uz levu marginu, a njihove definicije se pojavljuju u novom redu iuvuene su za odreen broj mesta.

Opta stuktura je:

odrednica 1 opis odrednice 1 odrednica 2 opis odrednice 2

. . . . .

Primer za ovu vrstu listi je:

Prolece:traje od 21. marta do 21. juna.

Leto:traje od 21. juna do 21. septembra.

Jesen:traje od 21. septembra do 21. decembra.

Zima: traje od 21. decembra do 21. marta.

HTML kod za prethodni primer je:

Prolece:traje od 21. marta do 21. juna.

Leto:

traje od 21. juna do 21. septembra.

10


11/63

Jesen:traje od 21. septembra do 21. decembra.

Zima:traje od 21. decembra do 21. marta.

Jo jedan primer:

-iinvokes NCSA Mosaic for Microsoft Windows using the

initialization file defined in the path -k

invokes NCSA Mosaic for Microsoft Windows in kiosk mode

Rezultat koji se dobija izvravanjem prethodnog primera:-i

invokes NCSA Mosaic for Microsoft Windows using the initialization file defined inthe path.-k

invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

Lista unutar listeUnutar neke liste moe se definisati nova lista. Na primer:

A few New England states:

Vermont New Hampshire Maine

Two Midwestern states:

Michigan

Indiana

Rezultat prethodnog primera:

A few New England states:o Vermonto New Hampshireo Maine

Two Midwestern states:

o Michigano Indiana

11


12/63


Primer 1. Primer opisne liste

Opisne liste

piko- prefiks nekoj jedinici koji pokazuje milioniti deomilionitog dela te jedinice;

nano- prefiks nekoj jedinici koji pokazuje milijarditideo te jedinice;

mikro-prefiks nekoj jedinici koji pokazuje milioniti deote jedinice;

Primer 2. Primer opisne liste sa formatiranom odrednicom

Formatirane opisne liste

piko-

prefiks nekoj jedinici koji pokazuje milioniti deomilionitog dela te jedinice;

nano- prefiks nekoj jedinici koji pokazuje milijarditideo te jedinice;

mikro-prefiks nekoj jedinici koji pokazuje milioniti deote jedinice;

Primer 3. Primer numerisane liste

Numerisane liste

12


13/63

Predmeti na 1. godini Matematike

Analiza 1Linearna algebraOsnovi programiranja

Analiticka geometrija

Primer 4. Primer nenumerisane liste

Nenumerisane liste

Tokom zime ima

jabukalimunagrejpa ibanana.

Primer 5. Primer numerisane liste

Numbered list:ApplesBananasLemons

Oranges

Letters list:ApplesBananasLemonsOranges

Lowercase letters list:

13


14/63

ApplesBananasLemonsOranges

Roman numbers list:ApplesBananasLemonsOranges

Lowercase Roman numbers list:

ApplesBananasLemonsOranges

Primer 6. Primer nenumerisane liste

Disc bullets list:ApplesBananasLemonsOranges

Circle bullets list:ApplesBananasLemonsOranges

Square bullets list:

Apples

14


15/63

BananasLemonsOranges

Primer 7. Primer liste unutar liste

A nested List:

CoffeeTea

Black teaGreen tea

Milk

Primer 8. Primer neureene liste

A Definition List:Coffee

Black hot drinkMilkWhite cold drink

15


16/63

FORMATIRANJE TEKSTA

Ako se drugaije ne naglasi tekst unutar HTML stranice je poravnat uz levu stranu. Ako seeli da naslov, ili bilo koji drugi element stranice, bude centriran, treba ga staviti izmedju

tagova i to e dati sledei rezultat:

OVO JE CENTRIRAN TEKST

izvravanjem sledeeg koda

OVO JE CENTRIRAN TEKST

Ukoliko se posebno ne naglasi kojim fontom se eli da bude ispisan tekst na stranici, browsere koristiti default font (a to je obino Times New Roman). Rad sa fontovima u okviru HTMLstranice se obavlja pomou taga. Ovaj tag moe imati sledee atribute: face, size i

color.Atributom face definiemo tip fonta kojim se eli da tekst bude ispisan. Na jednoj stranici semoe koristiti i vie razliitih fontova. Mora se vodititi rauna da korisnik koji uitavastranicu mora imati instaliran font koji je naveden na svom racunaru. U suprotnom njegov

browsere prikazati tekst u default fontu. Zato ne treba koristiti neke egzotine fontove, vetreba upotrebljavati samo iroko rasprostranjene fontove.

Ako se eli da stranica bude ispisana na primer "Comic Sans MS" fontom onda treba navestisledei kod:

Ovde dodje vas tekst.

i dobija se rezultatOvde dodje vas tekst.

Ako se koriste neki fontovi koji se retko koriste onda bi bilo dobro navesti i nekolikoalternativnih fontova, jedan za drugim, odvojenih zarezom. Ako posetilac stranice na svomraunaru nema instaliran prvi font sa liste, on e ga prikazati u sledeem sa liste, i tako dalje.

Evo primera nekoliko popularnih fontova koji se mogu koristiti na svojim stranicama:

VerdanaArial

Cour i er Bedrock

Times New RomanComic Sans MS

Kod je sledei:

Verdana

Arial

Courier

Bedrock

16


17/63

Times New Roman

Comic Sans MS

Pored naina ispisivanja teksta, u okviru stranice moe se upravljati i veliinom slova. Za ovepotrebe koristi se size atribut unutar font taga. HTML razlikuje 7 veliina slova koje nosevrednosti od 1 do 7. Podrazumevana veliina je 3. Razmera slova je data:

size 1, size 2, size 3, size 4, size 5, size 6, size 7.Primer HTML stranice:

Poslednja osobina koja se moe menjati je boja slova u okviru HTML stranice. Za te potrebekoristi se atribut color font taga. Za ovaj atribut vai isto pravilo kao i kod definisanja boja tagom. Dakle, ako se eli dobiti sledei tekst ispisan crvenom bojom:

Ovde ide vas tekst.

Pomou sledeeg dela koda:

Ovde ide vas tekst.

Pored taga HTML poseduje jo mogunosti za obradu teksta. U HTML dokumentimapostoji mogunost pisanja podebljanim (bold ili strong) slovima i kurzivom (italic), kao imogunost podvlaenja (underline) i precrtavanja (strike) teksta. Sledea tabela prikazujeodgovarajue tagove kao i rezultate njihove primene:

bold bold

strong strong

italic italic

underline underline

17


18/63

strike strike

Osim toga mogu se pisati i slova u indeksu ili eksponentu. Indeks se dodaje pomou taga

a eksponent pomou taga . Sledea tabela prikazuje primer njihove primene:

H2O H2O

22=4 22=4

Tekst se u browseru automatski lomi na kraju reda. Da bi se postiglo da neki deo teksta budeu jednom redu. Ovo se moe postii umetanjem tog dela teksta izmeu tagova:

ovde ide vas tekst koji se nece prelomiti na kraju redadobija se pomou sledeeg dela koda

ovde ide vas tekst koji se nece prelomiti na kraju reda

Ukoliko je tekst prevelik da stane u jedan red u okviru ekrana, na dnu prozora e se pojavitihorizontalni "scrollbar" i korisnik e morati da skroluje da bi ga proitao. Zato treba bitiobazriv sa korienjem ovog taga. Ukoliko se eli da se red prelomi, ali na tano odreenommestu, to se moe postii korienjem taga. Ovaj tag ne zahteva zavrni tag. Zarazliku od
taga koji e obavezno prelomiti red, ovaj tag e prelomiti red samo ako je to

neophodno tj. ako je tekst pre njega predugaak da bi stao u jedan red. Ovaj tag tako

eomoguava da se prelomi neka dugaka re na kraju reda.

Kada se koristi bilo koji tekst editor prelazak u novi red se postie pritiskom na taster ENTER(ili RETURN). Ali ako se isti princip koristi i pri pisanju HTML stranice ne e se dobiti istirezultat. Naime, da bi browser prikazao novi red, to se mora eksplicitno navestiodgovarajuim tagom. Tag za prelazak u novi red je
tag. On ne zahteva odgovarajuizavrni tag.

Prelazak u novi pasus se postie

tagom. On ima isto dejstvo kao i prethodni tag s tomrazlikom to e napraviti mali razmak izmeu redova. Na kraju pasusa se moe staviti injegov zavrni tag, ali veina browsera ga ne zahteva, tako da se slobodno moe i izostaviti.

Tekst se, ako se nita ne navede, poravnava uz levu marginu. Centriranje pasusa iliporavnanje pasusa uz desnu marginu se postie align atributom. Align atribut moe imati trivrednosti:

left

center

right

Kod koji prikazuje gornji primer je:

left

center

right

Dakle, Odgovarajui tagovi za svako od navedenih poravnanja treba da izgledaju ovako:

18


19/63

Ako se eli da se prelazak na neku novu celinu jo vie naglasi koristi se horizontalna linijapomou sledeeg taga:

Dobija se sledei rezultat

Liniju se povlai pomou taga. Ovaj tag crta tanku sivu liniju preko cele stranice. I ovajtag moe sadrati odgovarajue atribute kojima moete regulisati izgled linije.Ako se ne eli da linija bude zasenena, ve potpuno crna potrebno je koristiti atributnoshade. Ako se eli promeniti dimenzije linije, koriste se sledea dva atributa: size i width.Atributom size odredjuje se debljina linije u pikselima, a atributom width odredjuje se duinalinije ili u pikselima ili u procentima irine stranice. Ovaj tag takoe moe sadrati alignatribut kome se moe dodeliti ista vrednosti kao i za pasus. Boja linije se moe regulisati

pomou color atributa na ve opisani nain.

Na primer, ako se eli da se nacrta nezasenena crvena linija koja e biti centrirana i ija edebljina iznositi 6 piksela a protezae se preko 50% irine stranice, potrebno je izvriti sledeikod:

Tako e se dobiti sledea linija:

Treba naglasiti da Netscape Navigator ne podrava atribut color za horizontalne linije, takoda e u Navigatoru ova linija biti siva.

U tekst editorima dugme "TAB" slui za (engl. indent) prikazivanje odredjenog broja praznihmesta. Ali pri pisanju HTML koda iako se u samopm kodu prikazuje dejstvo taba, pri

prikazivanju stranice to e biti bez ikakvog efekta.

I u HTML dokumentu se moe napraviti prazno mesto pomou oznake &nbsp. Ova oznakaostavlja jedno prazno mesto. Ako se eli pet praznih mesta jednostavno se napie pet ovakvihoznaka jednu za drugom odvojenih takom-zarezom:

Odgovarajui HTML kod izgleda ovako:

xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx

xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxx

xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx

xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx.

Rezultat se dobija:

xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxxxxx xxxx xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxxxxxxxx xxxxxxxxxxxxx xxx xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx.

Pored ove oznake mogu se koristiti i sledee (u tabeli prva kolona oznaava HTML oznaku, adruga rezultat koji se dobija u okviru HTML strane):

19


20/63

&l t ; & &&ouml ; &nt i l de;


Primer 1. Rad sa fontovima.

Rad sa fontovima

The libraryhas an arrangement with thecafeteriato provide refreshments during the weeklycoffeehouse lectures.

Primer 2. Rad sa prelomom linije.

Rad sa prelomom linije

Come Scroll with me, away to the right, as I listout all of the long answers to themeaning of life accessible only to those that can scroll,scroll, scroll...

20


21/63

BOJE I HTML

Na HTML stranicama se pozadina i tekst mogu pojaviti u itavom spektru boja. To se postiepomou atributa u okviru taga. Atributi se ubacuju u poetni tag i slue da detaljnijeopiu dati tag.

Boja pozadine se odreuje atributom bgcolor koji je deo taga. Posle svakog atributase stavlja znak jednakosti koji slui za dodelu vrednosti datom atributu, a vrednost atributa seobavezno stavlja izmeu znakova navoda.Boje se mogu definisati na dva naina: ili preko predefinisanog engleskog naziva boje (npr."yellow" za utu boju), ili preko heksadecimalne RGB vrednosti ispred koje obavezno trebastaviti simbol # (npr. #ffff00).Znai, boje se mogu odrediti sa RGB-palete. Vrednost atributa boje ima opti oblik "#cczzpp"gde su cc, zz i pp redom heksadecimalne vrednosti za intenzitet crvene, zelene i plave boje.Svaka od ovih vrednosti moe biti broj izmeu 0 i 255 (u dekadnom brojnom sistemu) iliizmeu 0 i FF (u heksadecimalnom brojnom sistemu). Boje se mogu odrediti navoenjemnaziva boje na engleskom umesto kombinacijom heksadecimalnih cifara prema tabeli koju je

data na strani SGIR (skr.od Service Gnral Informatique et rseaux, Universit RenDescartes, Paris).U sluaju da se prilikom navoenja taga BODY izostave opisani atributi, navigator imdodeljuje predefinisane vrednosti.

Na primer, ako se eli da se promeni boja pozadine u utu tada tag treba da glasi:

ili:

Oba primera koda e dati isti rezultat.Pored pozadine, moe se menjati i boja teksta, pomou text atributa. Na primer, ako se na

prethodno definisanoj stranici dodaju zelena slova treba napisati sledei kod:

Takoe, tokom izvravanja stranice osnovna boja slova, opisana atributom TEXT se moepromeniti pomou atributa COLOR taga .

Pozadina ne mora da bude samo u jednoj boji. Vrlo esto se mogu sresti efektne prezentacijekoje u pozadini imaju razliite slike. Ove slike su elektronskom obliku u JPEG ili GIF

formatu.eljenu sliku treba prvo smesti na odreeno mesto u okviru prezentacije. Najjednostavnijereenje je da se nalazi u istom direktorijumu gde se nalazi i prezentacija. Pozadina u oblikuslike se definie pomou odgovarajueg atributa u body tagu. Atribut se u ovom sluaju zove

background i nema nikakve slinosti sa atributom bgcolor koji definie samo boju pozadine.Na primer, ako se eli da se kao pozadina stavi slika "pozadina1.jpg" tada e body tagizgledati:

Moete primetiti da postoje i background i bgcolor tag, i to ne sluajno. Mnogi ljudi sa

sporijim modemima prilikom surfovanja internetom iskljuuju u svojim browserimaautomatsko uitavanje garfike. To znai da se nee uitati ni pozadina koja je definisana u toj

21


22/63

stranici. Problem nastaje u sluajevima kada je tekstu dodeljena neka svetla boja, a browserne uita pozadinu, vec i pozadina ostane bela. Bleda (ili bela) slova na beloj pozadini se

jednostavno nee videti. Zbog toga uvek dodelite i neku boju vaoj pozadini tako da u goreopisanoj situaciji vaa slova i dalje budu itljiva.

U prethodnom delu teksta je naglaeno da je HTML nastao zbog potrebe da se opiedokument u formi hiperteksta. Ono to je uslovilo njegovu veliku popularnost jesu linkovi.Linkovi u HTML dokumentu omoguavaju da se jednim klikom mia promeni navigacija iotvori neka druga stranica. Kad dovedete kurzor mia iznad linka desie se dve stvari:

pokaziva mia e se pretvoriti u ruku sa ispruzenim prstom (to simbolino govori da tumoete da kliknete), a sam link e promeniti boju, obino u crvenu, ako se drugaije nedefinie. Osim toga boja linkova koji su ve poseeni bie drugaija od ostalih linkova. Na tajnain korisnik jednostavno prepoznaje koje stranice je ve posetio, akoje nije.Boje linkova se mogu definisati pomocu tri atributa: link, vlinki alink.Linkdefinie poetnu

boju linka u okviru stranice, vlinkdefinie boju linka u okviru stranice koji je poseen, a alinkdefinie boju aktivnog linka u okviru stranice.

Na primer, definisanje boje linkova u plavo, poseenih linkova u ljubiasto, a aktivnih linkovau crveno se obavlja na sledei nain:

Ako navedeni atributi nisu korieni stranica prikazuje default vrednosti. U Internet Explorerupozadina je po defaultu bela, tekst crn, linkovi plavi, poseeni linkovi maslinasto-zeleni, aaktivni linkovi crveni.


Primer 1. Boje pozadine i slova

Boje pozadine i slovaOvaj naslov je crven zbog atributa TEXT

a ovaj naslov je plav zbog etikete FONT

Primer 2. Boje atributa u tagu BODY

Atributi u etiketi BODY

22


23/63

Iz teksta na beloj pozadini sa crnim slovima
poziva se ovde tekst
iz prethodnog primera.

Boja za atribut LINK Boja za atribut VLINK Boja za atribut ALINK

Primer 3. Definisanje pozadine slikom.

Slika kao pozadina

Ovaj naslov je crven zbog atributa TEXT

a ovaj naslov je plav zbog etikete FONT

23


24/63

LINKOVI

Pojam linka je povezan sa pojmom hiper-veze.Hiper-veza predstavlja mogunost da se itanje teksta iz vora 1 nastavi u voru 2. Ovakvahiper-veza se enkodira pomou posebnog taga anchor koji povezuje fragment teksta u voru 1

sa adresom vora 2. Opti izgled taga za anchor je oblika

... .

Sintaksa ovog taga podrazumeva da se u voru 1 opiu: fizika pozicija u tom voru sa koje se prelazi na tekst u voru 2 i fizika lokacija na kojoj se nalazi tekst u voru 2.Ove dve pozicije se nazivaju, redom, polazni i dolazni vor. Polazni vor oznaava u tekstuonu poziciju sa koje se prelazi na neki drugi tekst i kodira se pomou atributa HREF:

pozicija u voru 1 sa koje se prelazi na vor 2

Navigator obino interpretira polazni vor u HTML-dokumentu kao fragment teksta na koji semoe "kliknuti", grafiki istaknut podvlaenjem i drugom bojom slova od boje slova samogteksta.Dolazni vor je ili adresa neke datoteke ili tag koja obeleava deo teksta. Definie se pomo uatributa NAME:

tekst u voru 2 na koji se prelazi iz vora 1

Atribut NAME nije obavezan. Ukoliko se on izostavi, navigator se pozicionira na poetakdokumenta u voru 2, a inae na naznaenu poziciju.Adresiranje se temelji na pojmu uniformnog lokatora resursa (skr. URL, od engl. UniformResource Locator), koji omoguava da se precizno imenuje adresa vora 2, ma gde on biofiziki lociran. U opisivanju adrese koja upuuje na vor 2 razlikujemo vie sluajeva uzavisnosti od toga koliki je deo URL-a poznat u tom trenutku.Linkovi koji se mogu definisati u okviru jednog HTML dokumenta mogu se podeliti na trivrste.Prvu vrstu bi inili linkovi sa kojima se moe pristupiti nekom drugom delu iste te stranice ukojoj se link i nalazi. Primer moe biti da se na kraju stranice napravi link koji kosrinika kojiga aktivira vraa na vrh stranice:

o u polaznom tekstu se navodi tag (polazni vor):

tekst na koji se moe "kliknuti"

o u dolaznom tekstu se navodi tag (dolazni vor):

dolazni tekst

Za definisanje svih ovih linkova zajedniko je da se dobijaju istim parom tagova: i .Za prvu vrstu linkova moramo prvo da napravimo oznaku na nekom mestu u dokumentu nakoje elimo da preemo kad kliknemo na odgovarajui link. Oznaka se dobija stavljanjem

atributa name u tag. Primer:

24


25/63

Izmedju poetnog i zavrnog taga moe stajati bilo koji elementprezentacije (tekst, slika), a ne mora stajati nijedan element, kao to je sluaj u prethodnomprimeru. Ovaj tag ne proizvodi nikakav vidljiv efekat u HTML dokumentu - on deluje u

pozadini dokumenta i slui browseru da se lake orijentie.Da bi se definisalo mesto odakle se eli nastaviti sa pregledom mora se navesti atribut href u tagu. Neka se prethodni primer nalazi u okviru stranice PrimerLinka.html tada trebanavesti:

Odavde se odlazi na kraj stranice

Sada kada korisnik klikne miem na link " Odavde se odlazi na kraj stranice" odlazi se na destranice koji je definisan imenom kraj.Drugu vrstu bi inili linkovi do neke druge stranice u okviru iste te prezentacije. Primer mogu

biti linkovi za kretanje napred i nazad kroz prezentaciju.

Aktiviranjem druge vrste linkova naputa se tekua stranica i dalje izvravanje se nastavlja nanekoj drugoj stranici tekue prezentacije. To se postie definisanjem taga sa atributomhref i nazivom HTML fajla do kojeg se eli da se napravi veza.

Na priemr ako se eli da se napravi veza do Prosla.html treba napisati:

Veza do stranice Prosla.html

Kada se miem klikne na tekst "Veza do stranice Prosla.html" u browseru e se prikazatistranica Prosla.html.

Link odvodi na vrh stranice ija se adresa nalazi u okviru href atributa. Ako bi smo eleli danas link odvede do nekog odreenog mesta u toj stranici onda bismo na to mesto prvo morali

postaviti oznaku sa name atributom kao to je uraeno u prethodnom sluaju.Ukoliko se fajl do kojeg vodi link nalazi u nekom drugom folderu, tada kao vrednost hrefatributa mora se postaviti celokupna putanja koji vodi do tog fajla (npr.c:\Prezentacija\Primer\Prosla.html).

Znai ako je pozicija vora 2 u nekom dokumentu izvan onog dokumenta koji sadri vor 1,ali se obe nalaze na istom serveru, onda se adresiranje vri navoenjem relevantnog dela putakoji je potreban da bi se iz vora 1 definisao put do vora 2. Neka je, na primer,www.fakultet.bg.ac.yu ime servera na kome se nalaze oba hipertekstuelna vora. Neka su

direktorijumi organizovani kao na donjoj slici i neka X sadri datoteke a i b, Y datoteku c, a Zdatoteku d.

Tada pod apsolutnom adresom datoteke c podrazumevamo adresuhttp://www.fakultet.bg.ac.yu/X/Y/c. Apsolutnom adresom je odreen jednoznano URLdatoteke c. Ali unutar jednog servera se mogu definisati i relativne adrese datoteka. Na

primer,

o Za tekst u datoteci a, adresa datoteke b je b;

25


26/63

adresa datoteke c je Y/c; adresa datoteke d je Y/Z/d;

o Za tekst u datoteci c, adresa datoteke a je ../a (simbol .. oznaava neposredno nadreeni direktorijum); adresa datoteke d je Z/d;

o Za tekst u datoteci d, adresa datoteke a je ../../a; adresa datoteke c je ../c;

Treu vrstu bi inili linkovi do stranice u nekoj sasvim drugoj prezentaciji koja moe bitipostavljena na raunaru koji se nalazi na nekom sasvim drugom serveru. Da bi se pristupilotoj prezentaciji potrebno je navesti celu web adresu te prezentacije. Opti oblik adrese koja se

pojavljuje kao vrednost HREF atributa je

scheme: / / server.domen[ : port] / putanja/ imeDokumenta

Na primer ako se u okviru prezentacije eli uspostaviti veza sa Elektrotehnikim fakultetom uBeogradu, ija adresa je www.etf.bg.ac.yu, tada se navodi kod:

Elektrotehnicki fakultet

Na stranici e se prikazati tekst "Elektrotehnicki fakultet" i ako se miem klikne na njega ubrowseru e se pojaviti poetna stranica prezentacije Elektrotehnikog fakulteta.

Pored odlaska na neku drugu stranicu linkovi se mogu iskoristiti i za pisanje nove mail porukepomou default programa za elektronsku potu - najvie korieni su Outlook Express ili

Netscape Messenger. Pri generisanju nove poruke, vee biti upisana eljena adresa, akorisniku preostaje samo da otkuca tekst poruke i da je poalje.

Da bi se poslala poruka na mail adresu [email protected] potrebno je u okviru stranicenavesti sledei tekst:

Posaljite e-mail poruku!


Primer 1. Referisanje unutar jedne datoteke

Primer unutrasnjeg referisanjaOsnovi programiranja

Web i jezik HTML ; Osnovni algoritmi Uvod u C

Web i jezik HTML

................
................

................
................

26


27/63

................
................

Osnovni algoritmi

................
................

................
................

................
................

Uvod u C

................
................

................
................

................
................

Primer 2. Referisanje izmeu datoteka na istom serveru

Dokument A

Ovo je datoteka ex0702-a.html iz koje se pozivadatoteka ex0702-b.html u istom direktorijumu.

Poziv datoteke ex0702-b.html

Dokument B

Ovo je datoteka ex0702-b.html iz koje se pozivadatoteka ex0702-a.html u istom direktorijumu.

Poziv datoteke ex0702-a.html

27


28/63

Primer 3. Referisanje dokumenta na drugom serveru ...U ovom primeru, adresa servera jewww.w3.org, a putanja do dokumenta Addressing.html je hypertext/WWW/Addressing/:

Spoljne reference

Poziv strane o HTML-adresiranju:
Adresiranje
28


29/63

SLIKE U OKVIRU HTML-A

Slika koja se prikazuje u okviru HTML stranice moe da se prikae pomou proizvoljnoggrafikog formata. Ipak najee se koriste formati JPEG (ili JPG) i GIF . Razlog je veliinaslike kao dokumenta i tekoe pri uitavanju. Ova dva formata koriste efikasne metode

kompresije i n ataj nain se poveavaju perfomanse aplikacije.U JPEG formatu se uvaju kvalitetnije slike, jer ovaj format podrava 16 miliona boja, afajlovi su efikasno komprimovani, tako da se slike relativno brzo uitavaju. Sa druge straneGIF format ima samo 256 boja, ali on ima tu prednost da mu se moe zadati transparentnost ida se moze animirati.U okviru HTML stranice slika se prikazuje pomou taga. Ovaj tag mora imati bar

jedan atribut. To je src atribut koji definie naziv, i eventualno lokaciju, grafikog fajla kojielimo da prikaemo u okviru svoje prezentacije. Pri opisu lokacije dokumentanajjednostavniji sluaj je da se dokument slike nalazi u istom direktorijumu gde i HTMLstranica. Tada je dovoljno da kao vrednost src atributa postaviti samo naziv odgovarajuegdokumenta.

Na primer da bi se prikazla slika sa imenom "osam.gif" na HTML stranici tada eodgovarajui tag glasiti:

na stranici se prikazuje:

Tag IMG moe imati razliite atribute koji omoguavaju da se precizno opiu poloaj,

dimenzije i odnos slike prema drugim delovima stranice. Ti atributi su: Atribut za poravnavanje slike u odnosu na margine ALIGN ... moe imati vrednosti

o za vertikalno poravnavanje: TOP, MIDDLE, BOTTOMo za horizontalno poravnjavanje: LEFT, CENTER, RIGHT

Atributi za dimenzionisanje slike su WIDTH (irina) i HEIGHT (visina). Atributi koji opisuju poloaj slike su HSPACE i VSPACE Atribut koji opisuje irinu okvira slike BORDER Atribut koji umesto slike daje naziv slike ALT

Ako se nijedan od atributa ne navede slike su poravnate sa tekstom na donju ivicu.Poloaj slike u odnosu na tekst stranice se moe definisati ubacivanjem align atributa u tagu. Vrednosti ovog atributa i odgovarajue efekte mogu se videti iz sledeih primera:

left - postavlja sliku uz levu marginu:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxxxxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx

xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxxxxxxxx x xxxxx

29


30/63

Odgovarajui tag glasi:

right - postavlja sliku uz desnu marginu:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxxxxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxxxxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxxxxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx


top - poravnava sliku sa vrhom slova u tekuoj liniji:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx

xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxxxxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx

xxxxxx x xxxxx


bottom - poravnava sliku sa donjom ivicom slova:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx

xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxxxxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxxxxxxxx x xxxxx


middle - postavlja sliku tako je donja ivica slova na sredini slike:

30


31/63

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx

xxx


img src="osam.gif" align="middle">

bsmiddle - postavlja sliku tako da se sredina slike i sredina slova poklapaju:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx

xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx


img src="osam.gif" align="absmiddle">

a bi se slika prikazala na sredini stranice potrebno je koristiti tag center.

xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx

xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxxxxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx

xxxxxx x xxxxx

lika koja e se prikazati na stranici je:

xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxxxxxxxx xxxx xxxxx xxxx x

G

srazmerno sa definisam tako da e proprocije slika ostati iste.Prazan prostor izmeu slike i okolnog teksta, ili nekih drugidefinisati pomou dva atributa: hspace i vspace. Vrednost ova dva atributa se zadaje u

pikselima.Deo stranice

xxxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xxxxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxxxxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxxxxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxxxxxx

s

& ampersand &

" quotation mark "

HTML programiranje.pdf

Documents

Transcript of HTML programiranje.pdf