Hipertekst

WEB DizajnOsnove HTML-a Web HTML-, .

Web MS Office. , As WebPage. HTML .

Web . Web . MS Office Web , , .

Web Web . WYSIWYG Web , , .

HTML .

Hipertekst ... ili web-dokument je, pojednostavljeno, tekst koji sadre veze ili uputnice (engl. link) ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica (engl. page), u obliku datoteka, meusobno povezanih uputnicama koje su umetnute u stranice. Ove uputnice se obino vide kao veze (hiperveze) na koje se moe kliknuti (od engl. to click). Za razliku od obinog teksta, koji se ita linearno (sleva na desno, odozgo nanie), hipertekst se ita pratei hiper-veze u tekstu, dakle, ne nuno na linearan nain.

Jezici za opisivanje hiperteksta... su jezici koji omoguavaju da se precizno opie hipertekstuelna struktura jednog teksta (uputnice na druge tekstove, itd). Ovi jezici doputaju da se eksplicitno opie logika struktura teksta i razliiti tipovi veza u tekstu. Veze mogu biti unutranje (kada veza upuuje na drugi deo istog teksta), spoljanje (kada veza upuuje na neki drugi teksta) i izvrne (kada se unutar teksta aktivira veza na neku izvrnu proceduru). Jezik ove vrste je HTML (skr. od HyperText Markup Language).

Jezik HTML se zasniva na eksplicitnom obeleavanju logike strukture dokumenta. Obeleavanje se vri pomou etiketa (engl. tag) koje opisuju elemente logike strukture teksta. Tekst dobija svoj grafiki izgled u zavisnosti od navigatora koji je upotrebljen za njegovu vizuelizaciju. U zavisnosti od svojstava navigatora i njegove konfiguracije, jedan dokument obeleen u HTML-u moe imati razliite grafike izglede.

Tagovi ... se navode izmeu uglastih zagrada < i >. U ovim zagradama se navode opisi pojedinih elemenata strukture teksta. Tagovi se u HTML-u mogu razvrstati na

proste tagove ili markere za opisivanje jednostavnih elemenata logike strukture. Oblika su:

sloene tagov ili ograivai su zagrade oblika y kojima je opisan izgled dela teksta y.

atributi sloenih obeleja oblika: y koji pruaju dodatne informacije, obino o grafikom izgledu, dela teksta y;

Tagovi su neosteljive na razliku izmeu malih i velikih slova (engl. case-insensitive).HTML elementi

HTML element poinje tagom i zavrava se tagom . Sadraj elementa je sve izmedju ovih tagova. Neki HTML elementi imaju prazan sadrzaj.
(novi red) je prazan element i nema odgovarajucu zatvorenu etiketu. U XHTML-u i XML-u i buducim verzijama HTML-a svi elementi moraju biti zatvoreni. Nacin za zatvaranje praznih elemenata prihvacen u XHTML-u, XML-u i HTML-u, jeste dodavanje '/' otvorenoj etiketi, npr.
.

Napomene! HTML etikete nisu case sensitive: znaci isto sto i .World Wide Web Consortium (W3C) preporucuje upotrebu malih slova za predstavljanje etiketa u HTML 4, dok ce se u buducim verzijama to zahtevati.

HTML atributi

HTML elementi mogu imati atribute koji daju dodatne informacije o elementu. Atributi se uvek zadaju u otvorenom tagu u obliku ime="vrednost"Vrednosti atributa uvek treba da budu izmedju navodnika (jednostrukih ili dvostrukih). ee se koriste dvostruki navodnici, mada u nekim situacijama, kao to je sluaj kada vrednost atributa sadri dvostruke navodnike, moraju se koristiti jednostruki navodnici. Napomena! W3C preporuka je da se koriste mala slova u nazivima atributa i njihovim vrednostima.

HTML komentari

Komentari se mogu dodati u HTML kod da bi bio itljiviji i razumljiviji. Prikaziva ih ignorie i ne prikazuje. HTML komentar ima oblik:

Napomena!Prikaziva ne uzima u obzir postojanje viestrukih praznih redova i viestrukih belina - blanko, tabulator. Efekat je samo jedan blanko karakter.

Osnovna struktura html dokumenta:

- poetak html dokumenta - zagrade zaglavlja, sadri meta-definicije HTML-dokumenta;- zagrade za naziv HTML-dokumenta i

- zagrade teksta obeleenog dokumenta.

- kraj html dokumenta

Struktuiranje teksta

prazno mesto-> Odeljak (engl. division) se opsuje zagradama ... . Ovaj tag moe imati atribut za pozicioniranje ALIGN sa vrednostima CENTER, RIGHT ili LEFT. metafiziko-

Pasus (engl. paragraph) se obeleava zagradama ... . Ukoliko u ravnom tekstu sledi pasus za pasusom, etiketa se moe izostaviti. I ova etiketa moe imati atribut za pozicioniranje ALIGN sa istim vrednostima kao etiketa .

Novi red (engl. break) se obeleava etiketom
. Ovo je prosto obeleje: ne postoji etiketa .

Podvlaka (engl. rule) se obeleava etiketom sa opcionim atributima NOSHADE, ALIGNE, SIZE (debljina linije u pikselima), i WIDTH (duina linije u pikselima ili procentualno).

Unapred formatiran tekst (engl. preformatted) se obeleava etiketom ..., a na izlazu se dobija tekst u fontu fiksne irine. Unutar ovog elementa karakteri za blanko, novi red i tabulator postaju znaajni, vie se ne ignoriu. Ovaj element korist atribut WIDTH (maksimalan broj karaktera u redu). U okviru ovog elementa mogu se koristiti hipertekstualne veze, ostale elemente treba izbegavati.

Dui navodi se obeleavaju etiketom ..., a na izlazu se se prikazuju u zasebnom bloku na ekranu.

Ili

charset=windows-1250Za naa latinina slova, za irilina iso-8859-5, ili windows-1251

i :bold

i : kurziv

i : podcrtano

i : precrtano

i : treperavo

i : Veliko

i : Malo

i : Gore i : Dole

Karakteristike fonta

Karakteristike fonta se mogu birati pomou etikete ... koja ima tri atributa:

SIZE kojim se zadaje veliina fonta, relativno na skali od 1 do 7

FACE kojim se zadaje familija fonta

COLOR kojom se zadaje boja font. Boja fonta se moe zadati u RGB formatu (engl. Red-Green-Blue) kao heksadecimalni broj ili imenom jedne od osnovnih boja. Imena osnovnih 16 boja i njihove RGB vrednosti su:bojavrednostbojavrednost

black (crna)

#000000

green (zelena)

#008000

silver (srebrna)

#C0C0C0

lime (utozelena)

#00FF00

gray (siva)

#808080

olive (maslinastozelena)

#808000

white (bela)

#FFFFFF

yellow (uta)

#FFFF00

maroon (kestenjasta)#800000

navy (marinskoplava)

#000080

red (crvena)

#FF0000

blue (plava)

#0000FF

purple (purpurna)

#800080

teal (tamnozelena)

#008080

fuchsia (ljubiasta)

#FF00FF

aqua (zelenoplava)

#00FFFF

tekst ili tekst

tekst

Volim

Promena boje pozadine:

nnjkmkl

Postavljanje slike za pozadinu: neki kratak tekst

Da bi se slika prikazala, browser mora da bude u mogunosti da je nae. Za gornji primer slika treba da bude u istom folderu u kome se nalazi i Va HTML dokumentBrowser ima podrazumevana podeavanja za boju teksta, linkova, aktivnih linkova, poseenih linkova, kao i za boju pozadine. Te podrazumevane vrednosti su:Tekst je crnLinkovi su plaviAktivni linkovi su crveniPoseeni linkovi su ljubiasti

Ukoliko elite, ove podrazumevane vrednosti mogu se lako menjati. Kao prvo, mogue je uneti promenu za ceo HTML dokument. Evo kako...

neki kratak tekst

Boja linka (link), aktivnog linka (alink), poseenog linka (vlink)

Hiperlinkovi

Hiper-veza (engl. hyperlink) uspostavlja hipertekstuelnu strukturu dokumenta zapisanog u HTML-u tako to omoguava da se povee neki fragment tekueg teksta sa nekim drugim delom tog ili, pak, nekog drugog teksta. Tekstovi koji se povezuju hipertekstuelnim vezma se mogu nalaziti na istom ili na razliitim raunarima. Hiper-veza se moe zamisliti kao luk koji povezuje neka dva vora obeleena, na primer, sa 1 i 2 u jednom grafu:

Hiper-veza predstavlja mogunost da se itanje teksta iz vora 1 nastavi u voru 2. Ovakva hiper-veza se enkodira pomou sidra (engl. anchor) koje povezuje fragment teksta u voru 1 sa adresom vora 2. Opta etiketa za sidro je oblika ... . Enkodiranje ovakve informacije 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, polazno i dolazno sidro. Polazno sidro oznaava u tekstu onu 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 polazno sidro u HTML-dokumentu kao fragment teksta na koji se moe "kliknuti", grafiki istaknut podvlaenjem i drugom bojom slova od boje slova samog teksta.

Dolazno sidro je ili adresa neke datoteke ili etiketa koja obeleava deo teksta. Enkodira se pomou atributa NAME:

tekst u voru 2 na koji se prelazi iz vora 1

Atribut NAME nije obavezan. Ukoliko se on izostavi, navigator se pozicionira na poetak dokumenta u voru 2, a inae na naznaenu poziciju.

AdresiranjeAdresiranje se temelji na pojmu uniformnog lokatora resursa (skr. URL, od engl. Uniform Resource Locator), koji omoguava da se precizno imenuje adresa vora 2, ma gde on bio fiziki lociran. U opisivanju adrese koja upuuje na vor 2 razlikujemo vie sluajeva u zavisnosti od toga koliki je deo URL-a poznat u tom trenutku.

1. Ako se pozicija vora 2 nalazi u okviru istog dokumenta kao i vor 1 (tj. ako se vor 1 i vor 2 nalaze u istoj datoteci), tada se adresiranje vri na sledei nain:

u polaznom tekstu se navodi tag (polazno sidro): tekst na koji se moe "kliknuti"

u dolaznom tekstu se navodi tag (dolazno sidro): dolazni tekst

2. Ako je pozicija vora 2 u nekom dokumentu (datoteci) izvan onog dokumenta koji sadri vor 1, ali se obe nalaze na istom serveru, onda se adresiranje vri navoenjem relevantnog dela puta koji je potreban da bi se iz vora 1 definisao put do vora 2.

u polaznom tekstu se navodi tag (polazno sidro): tekst na koji se moe "kliknuti" (ili samo naziv fajla)

3. Ako je pozicija vora 2 dokument (datoteka) koja se nalazi na drugom serveru (raunaru), tada se kao vrednost atributa HREF navodi puni izraz URL-a datoteke koja predstavlja vor 2. U optem sluaju tada:

u polaznom tekstu se navodi tag (polazno sidro): tekst na koji se moe "kliknuti"

Adresiranje

4. Sadraj atributa HREF moe da bude i elektronska adresa koja se specifikuje na sledei nain: HREF="mailto:ime@domain". Izborom ove veze polaska otvara se prozor za pisanje poruke elektronske pote u kome je destinaciona adresa ve postavljena na ime@domain. Da bi ovo funkcionisalo, potrebno je da budu postavljeni odgovarajui parametri navigatora (prelistaa).

prodekanu za nastavu

Slike

Primer ako je slika u istom direktorijumu: (ako se slika iz bilo kog razloga ne vidi na browseru prikazuje se tekst iza ALT)

SRC="chef.gif" znai da se slika nalazi u istom folderu u kome je i HTML dokument, koji je poziva.

SRC="../chef.gif" znai da je slika u folderu iznad HTML dokumenta koji je poziva.SRC="images/chef.gif" znai da se slika nalazi u folderu ispod HTML dokumenta koji je poziva. Pitanje je: koliko nivoa ispod? Onoliko koliko je potrebno (a u naem sluaju - jedan)!

SRC="../images/chef.gif" znai da je slika jedan folder gore, pa jedan dole u odnosu na HTML dokument.Atributi slike

Atribut za poravnavanje slike u odnosu na margine ALIGN ... moe imati vrednosti

za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM 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

Slike-vezeSlika u dokumentu moe predstavljati i polazno sidro u hiper-vezi. Kaemo da je takva slika slika-veza. Dolazna adresa se tada navodi kao kod hiper-veze, a umesto teksta na koji se moe "kliknuti" navodi se tag IMG.

tag IMG slike na koju se moe "kliknuti"

Zar nije ovo

nas omiljeni junak?

Crte kralja Ibija se moe dobiti bilo

"klikom" ovde,

bilo ovde "klikom" na ovu sliicu --->

Tabele

Tabela je i u HTML-u dvodimenziona matrica iji se elementi nazivaju elije (engl. cell). elija moe sadravati raznovrsne informacije: brojeve, tekst, boje, liste, hiper-veze, slike, itd. Tabela se sastavlja tako to se opisuju redom njene vrste (redovi, engl. row) i sadraj svake elije u redu.

Tabela se opisuje uz pomo sloene etikete TABLE koja moe sadravati vie atributa:

BORDER (ili okvir, ram) koji opisuje irinu spolanjeg okvira tabele;

CELLSPACING koji opisuje irinu linije koja razdvaja dve elije;

CELLPADDING koji opisuje prostor oko sadraja elije;

WIDTH koji opisuje ukupnu irinu tabele.

Nadnaslov tabele se moe zadati etiketom CAPTION koja se ispisuje iznad tabele i moe imati atribut ALIGN:

za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM za horizontalno poravnavanje: LEFT, CENTER, RIGHT Svaka vrsta u tabeli se opisuje izmeu zagrada i (engl. table row). I etiketa TR moe imati atribute:

za horizontalno poravnjavanje, atribut ALIGN sa vrednostima: LEFT, CENTER, RIGHT za vertikalno poravnavanje, atribut VALIGN sa vrednostima: TOP, MIDDLE, BOTTOM Pojedinana elija se opisuje izmeu zagrada i . Etiketa TD, pored atributa ALIGN i VALIGN moe imati i atribute:

za promenu boje pozadine elije: BGCOLOR;

za horizontalno spajanje elija: ROWSPAN (spaja elije iste vrste) i

za vertikalno spajanje elija: COLSPAN (spaja elije iste kolone);

za spreavanje automatskog prelamanja teksta u eliji: NOWRAP. Prelamanje teksta moe eksplicitno da se sahteva etiketom
().

Etiketa ima ista svojstva kao etiketa s tom razlikom to obezbeuje da sadraj elije bude automatski centriran i u crnom slogu (bold).1