57
Šta je HTML Šta je to HTML? Da biste bili uspešan stvaralac Web stranica morate znati HyperText Markup Language tj. HTML. On je relativno jednostavan jezik za opis dokumenata i njihovih međusobnih veza a koji se prikazuju u browserima. HTML nije zaista programski jezik u onom smislu u kom su to C++ ili Visual Basic, on je više sintaksni jezik za formatiranje dokumenata, nastao je od SGML- a (Standard Generalized Markup Language), koji je daleko kompleksniji "meta jezik" a služi za specifiranje elemenata koje se koriste u dokumentima i značenje tih elemenata. Rast HTML-a je inicirao Netscape, uvođenjem nestandardnih proširenja u jezik, a trenutno se proširenjima i novim verzijama bavi se W3C (www.w3.org ) komitet. Znači HTML je živ jezik koji se intezivno razvija, pa se povremeno se pojavljuju problemi sa novitetima koje pojedini browseri ne podržavaju. Da bi ste izbegli da izgled vaše strane zavisi od browsera u kojem se pregleda, držite se podalje od elemenata koji su specifični za neki od browsera i nisu podržani u ostalima. Elementi Elementi predstvljaju strukturu HTML-a koji opisuju delove HTML dokumenta i mogu da se nalaze bilo gde u HTML dokumentu. Na primer, P element predstvlja paragraf dok EM element proizvodi neglašen sadržaj. Svaki elemnt poseduje tri dela: početni tag, sadržaj i završni tag. Tag je specijalni tekst tkz. "markup" koji je ograđen sa "<" i ">". A završni tag uključuje i "/" posle "<". Znači sve što se nalazi u tagovima HTML dokumenta browser prihvata kao komande a sve ostalo predstvlja klasičan tekst u ekranu browsera. Npr. EM element ima početni tag, <EM>, i završni, </EM>. Početni i završni tag okružuju sadržaj EM elementa: <EM>Ovo je naglešen tekst</EM> U HTML-u nepostoji razlika između malih i velikih slova za elemente u tagovima tako npr. <em>, <eM>, and <EM> predstvljaju iste elemente. Prporučujemo vam da elemente HTML-a pišete malim slovima. Takođe sve suvišne znakove razmaka (space), tabulator i znake za novi red browser ignoriše. Elementi nesmeju da se preklapaju tj. ukoliko se početni tag EM elementa pojavljuje zajedno sa tagom P elementa, tada završni tag EM elemnta mora takođe pojaviti zajedno sa završni tagom P elementa. Neki elementi dopuštaju da se izuzme završni tag. Npr. element LI opciono može da sadrži završni tag pošto se on u stvari završava sa sledećim početni tagom LI elementa: Center for Information Technology strana 2

Šta je to HTML · Web view Ostatak dokumenta nalazi se između ovih tagova. tag može

  • Upload
    doxuyen

  • View
    220

  • Download
    1

Embed Size (px)

Citation preview

Šta je HTML

Šta je to HTML?Da biste bili uspešan stvaralac Web stranica morate znati HyperText Markup Language tj. HTML. On je relativno jednostavan jezik za opis dokumenata i njihovih međusobnih veza a koji se prikazuju u browserima.

HTML nije zaista programski jezik u onom smislu u kom su to C++ ili Visual Basic, on je više sintaksni jezik za formatiranje dokumenata, nastao je od SGML-a (Standard Generalized Markup Language), koji je daleko kompleksniji "meta jezik" a služi za specifiranje elemenata koje se koriste u dokumentima i značenje tih elemenata.

Rast HTML-a je inicirao Netscape, uvođenjem nestandardnih proširenja u jezik, a trenutno se proširenjima i novim verzijama bavi se W3C (www.w3.org) komitet. Znači HTML je živ jezik koji se intezivno razvija, pa se povremeno se pojavljuju problemi sa novitetima koje pojedini browseri ne podržavaju. Da bi ste izbegli da izgled vaše strane zavisi od browsera u kojem se pregleda, držite se podalje od elemenata koji su specifični za neki od browsera i nisu podržani u ostalima.

Elementi

Elementi predstvljaju strukturu HTML-a koji opisuju delove HTML dokumenta i mogu da se nalaze bilo gde u HTML dokumentu. Na primer, P element predstvlja paragraf dok EM element proizvodi neglašen sadržaj.

Svaki elemnt poseduje tri dela: početni tag, sadržaj i završni tag.

Tag je specijalni tekst tkz. "markup" koji je ograđen sa "<" i ">". A završni tag uključuje i "/" posle "<".

Znači sve što se nalazi u tagovima HTML dokumenta browser prihvata kao komande a sve ostalo predstvlja klasičan tekst u ekranu browsera. Npr. EM element ima početni tag, <EM>, i završni, </EM>. Početni i završni tag okružuju sadržaj EM elementa:

<EM>Ovo je naglešen tekst</EM>

U HTML-u nepostoji razlika između malih i velikih slova za elemente u tagovima tako npr. <em>, <eM>, and <EM> predstvljaju iste elemente. Prporučujemo vam da elemente HTML-a pišete malim slovima. Takođe sve suvišne znakove razmaka (space), tabulator i znake za novi red browser ignoriše.

Elementi nesmeju da se preklapaju tj. ukoliko se početni tag EM elementa pojavljuje zajedno sa tagom P elementa, tada završni tag EM elemnta mora takođe pojaviti zajedno sa završni tagom P elementa.

Neki elementi dopuštaju da se izuzme završni tag. Npr. element LI opciono može da sadrži završni tag pošto se on u stvari završava sa sledećim početni tagom LI elementa:

<UL><LI>Prvi; nema završni tag<LI>Drugi; opcioni završni tag je uključen</LI><LI>Treći; nema završni tag</UL>

Neki elementi nemaju završni tag pošto nemaju sadržaj kao npr. BR element za novi red line breaks.

Center for Information Technology strana 2

Šta je HTML

Atributi

Elementi sadrže atribute koji definišu rezličite osobine elementa. Na primer IMG element poseduje SRC atribut koji obezbeđuje loakciju slike i atribut ALT koji obezbeđuje alternativni tekst ukoliko se slika ne učita:

<IMG SRC="slika.gif" ALT="SveZaWeb.com Logo">

Atributi se uvek uključuju u početni tag nikd u završni a sintaksa je sledeća:

Naziv-Atributa="Vrednost-Atributa" Vrednost atributa ukoliko postoji je ograničena jednostrukim ili dvostrukim navodnicima i ona može da bude mogu da bude case-sensitiv tj. nesmeju da se mešaju mala i velika slova.

HTML dokumenti se snimaju sa ekstenzijom .htm ili .html a možete ih pisati u obično tekst editoru, kao što je Notepad ali postoje mnogi programi koji vam olakšavaju izradu HTML dokumenata. Bez obzira na te programe bitno je da poznajete HTML, kako bi u potpunosti vladali WEB dokumentom i proizveli željene efekte. Znanje HTML nije prednost već uslov da bi bili uspešan kretor Web prezentacija.

Upustvo za HTML smo podelili u sledeće delove :

1. ŠTA ČINI STRUKTURU HTML DOKUMENT? 2. KOJI SU TO HEAD ELEMENTI? 3. ŠTA SU TO SPECIJALNI ZNACI? 4. ŠTA SU TO ZAJEDNIČKI ATRIBUTI? 5. KAKO DA MODIFIKUJETE SADRŽAJ HTML DOKUMENTA? 6. KAKO SE POVEZUJU HTML DOKUMENTI? 7. KAKO DODATI MULTIMEDIJALNI SADRŽAJ U HTML DOKUMENT? 8. KAKO NAPRAVITI LISTE U HTML-u? 9. SVE ŠTO TREBA DA ZNATE O HTML TABELAMA? 10. ŠTA SU TO LAYERI? 11. ŠTO SU TO FORMULARI? 12. FAMA O FREJMOVIMA? 13. INDEKS SVIH HTML ELEMENATA

ŠTA ČINI STRUKTURU HTML DOKUMENTA?

Center for Information Technology strana 3

Šta je HTML

Svaki HTML dokument poseduje svoju strukturu koja se sastoji od nosača HTML dokument, a koji sadrži samo zaglvlje i telo HTML dokumenta. U zaglvlju se definišu razni podaci potrebni browseru dok telo sadrži sadržaj i HTML elemenate za formatiranje tog sadržaja.

HTML dokument započinje sa DOCTYPE (Document Type Declaration) deklaracijom koja definiše verziju HTML u kojoj je HTML dokument napisan.

HTML element.

Da bi browser utvrdio da je tekstualni dokument ustvari HTML dokument on mora da započinje uvek tagovima <HTML> a da se završava sa tagom </HTML>. Ovi tagovi predstvljaju elemente najvećeg nivoa i govore browseru da dokument sadrži HTML elemente.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//EN"><HTML>Ostatak dokumenta nalazi se između ovih tagova.</HTML>

<HTML> tag može da sadrži sledeće argumente TITLE i LANG koji služe da se definiše komentar odnosno da se setuje jezik koji će da koristi dati dokument (npr. "en" za Engleski, "de" za Nemački, "sr" za Srpski itd.) Unutar <HTML> tagova definiše se jedino zaglavlje (HEAD) i telo (BODY) HTML dokumenta.

 Tag  Argumenti  Opis<html></html>

langtitle Element najvećeg nivo za sva html dokumenta

<head></head>   Sadrži informacije za browser u kome se prikazuje web

strana<title></title>   Naslov dokumenta, koji se nalazi izemđu head tagova

<body></body>

backgroundbgcolorlinkalinkvlinktopmarginleftmargin marginheightmarginwidth

Atributi se odnose na ceo dokument a unutar ovih tagova postvlja se sadržaj HTML dokumenta

Kompletan HTML dokument:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//EN"><HTML title="Ovo je HTML dokument" lang="sr"> <HEAD>   <TITLE>Naslov dokumenta</TITLE> </HEAD> <BODY>Zdravo, Svete! </BODY></HTML>

Napomena: Otkucajte ovaj kod u običnom tekst editoru npr. notpadu (ili ga prebacite u notepade sa copy/paste) i snimite ga sa ekstenzijom .htm ili .html potom isti dokument otvorite u jednom od najpopularnijih browsera, kako bi videli rezultat.

Center for Information Technology strana 4

Šta je HTML

HEAD element

Zaglavlje služi da prosleđuje razne informacije browseru i ne utiče na prikaz HTML dokumenta. Definiše se pomoću <HEAD> i </HEAD> tagova koji obavezno sadrže naslov koji se nalazi između tagova <TITLE> i </TITLE> a unutar HEAD tagova (naslov se prikazuje na vrhu browsera zajedno sa imenom browsera). Unutar head element mogu da se nalaze i drugi elementi a više o njima na sledećoj strani.

BASE - Osnovna adresa dokumenta ISINDEX - Input prompt LINK - Povezivanje dokumenata META - Meta informacije SCRIPT - Uključivanje i navođenje klijentskog skript STYLE - Uključivanje stila TITLE - Naslov dokumenta

BODY element

Sve što se nalazi unutar HEAD tagova ne prikazuje se u browser-u. Dok unutar BODY tag nalaze se HTML elementi ("inline" elementi i block elementi) i sadržaj HTML dokumenta. Znači prethodni primer na ekranu browsera prikazeće:

Zdravo, Svete!

BODY tag sadrži mnoge argumente za kontrolu i format prikaza neki od njih su:

· BGCOLOR - pomoću koga se navodi boja pozadine· TEXT    - boja teksta· LINK    - boja linka (kojeg nismo dirali)· VLINK   - boja posećenog linka (na koji smo već kliknuli)· ALINK   - boja aktivnog linka (to je boja koja se prikazuje sve vreme dok je link klinknut tj. aktivan). Boja se unosi kao heksadecimalni broj prema RGB kolornoj šemi, kojoj prethodi znak #. Prva dva heksadecimlna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na plavu (npr. Crvena boja je #FF0000 ). Sve boje i njihove heksadecimalne vrednosti.

<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK=#800080 ALINK=#FF0000>

Unapred definisane vrednosti za hiperveze (linkove) su: LINK = plavo, VLINK = ljubicasto, ALINK = crveno.

Unutar BODY taga može se navesti i slika pozadine pomoću atributa BACKGROUND

<BODY BACKGROUND="pozadina.gif" TEXT=#000000 LINK=#0000FF VLINK=#800080 ALINK=#FF0000>

Slika za pozadinu se ponavlja po širini i visini ekrana koliko puta je potrebno. Pri tome treba birati slike koje su specijalno dizajnirane za tu namenu (da se nebi primećivala nadovezivanja). On se nazivaju tile(pločice) - pošto se lepe kao pločice na pozadinu ekrana. Poželjno je da pozadina bude neutralna i da ne umanjuje čitljivost teksta. Interlaced GIF-ove ne treba koristiti za pozadinu. Po nekim autorima, najbolja velicina za pozadinu je 256 bajta. Slike se čuvaju kao posebne datoteka u istom katalogu gde se nalazi i dokument koji ih poziva ili u nekom drugom.

Center for Information Technology strana 5

Šta je HTML

Ukoliko želite da fiksirate pozadinsku sliku tako da se ona ne skrorluje kao normalna pozadinska slika postavite atribut BGPROPERTIES=FIXED u BODY elementu (Ova mogućnost je podržana od strane Microsoft's Internet Explorer 2+):

<BODY BACKGROUND="nazivslike.gif" BGPROPERTIES=FIXED>

U BODY tagu možete navesti i sledeće atribute LEFTMARGIN i TOPMARGIN koje podržava Internet Explorer a koji postvljaju margine dokumenta u pikselima isto to možete učini i pomoću atributa MARGINHEIGHT i MARGINWIDTH koje podržava Netscape Comunicator. Ukoliko želite da HTML dokument na ekranu browsera započinje od gornjeg levog ugla potrebno je da u navedete ove atribute u BODY tagu, kao što je to učinjeno u sledećem primeru:

<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">

Kroz Dinamički HTML Internet Explorera 4.0 <HTML>, <HEAD> i <BODY> tag podržava razne osobine,metode i događaje a nešto je podržano i od strane Comunicatora. Više o tome možete pronaći na strani Dinamički HTML.

Unutar HEAD tagova mogu da se nalaze elementi, koji nisu obeavezni a služe da prosleđuju razne informacije browseru, više o njima na sledećoj strani.

KOJI SU TO HEAD ELEMNTI?U okviru HEAD elementa navode se razne informacije browseru kao što je naslov dokumenta, uključivanje eksternih stilova i script fukcija, meta informacija itd.

BASE element

BASE element navodi osnovnu URL adresu Web prezentacije i pomaže browseru u slučaju određivanja relativnih adresa koje se navode prilikom refernciranja u okviru A elementa.

 Tag  Argumenti  Opis<base> href

target Definiše osnvnu adresu, URL

Osnovna adresa na osnovu koje se određuju relativne adrese navodi se u atributu HREF.

<BASE HREF="svezaweb.dzaba.com"<

Internet Explorer od verizje 3 i Netscape Navigator od verzije 2 dozvoljavaju i atribut TARGET za određivanje osnovnog prozora u kome se dokument prikazuje. Više o ovom atributu naćiče te u okviru opisa A elemnta.

LINK element

LINK element se koristi za povezivanje HTML dokumenta sa nekim drugim objektom. Prima iste atribute kao i A element. Najviše se koristi za povezivanje eksterne stil šeme sa HTML dokumentom.

<LINK REL="stylesheets" HREF="stilovi.css">

Center for Information Technology strana 6

Šta je HTML

Atribut REL se koristi za navođenje odnosa između dokumenta, tj. dokument koj se uvozi je šema stilova stylesheets.

Netscape Navigtor 4.0 koristi ovaj element za koncept "dinmičkih fontova" tj. povezivanje fontova sa HTML dokumentom na sledeći način:

<LINK REL="fontdef" SRC="http://site/path/fontdef.pfr">

Gde je fontdef.pfr fajl koji obezbeđuje fontove. Internet Explorer podržava dinmičke fontove ali kroz W3C standard za stil šeme.

STYLE element

STYLE element se koristi za definisanje stilova u okviru samog HTML dokumenta. Koristi atribute TYPE da se navede MIME tip za stil šeme tj. "text/css" i TITLE u kome može da se naslovi definicija stil šeme.

<HTML><HEAD><TITLE>Introduction to Style Sheets</TITLE><STYLE TYPE="text/css" TITLE="Bright Colours">BODY { color : white}P { color : blue;font-size : 12pt;font-family : Arial}H1 { color : red;font-size : 18pt}</STYLE></HEAD><BODY>...

Po HTML4 specifikaciji ikjučen je i atribut MEDIA u okviru STYLE taga za određivanje medija na koji se stil primenjuje. Atribut MEDIA ima sledeće vrednosti:

sreenIzlazni medij je ekran 

printIzlazni medij je štampač  

projectionIzlazni mediji je projektor  

speechIzlazni medij je uređaj za sintezu govora 

allKoristi sve izlazne medije 

Atribut MEDIA omogućava definisanje različitih stilova za različite medije.

META element

Meta elementi se koriste unutar HEAD elemenata a koriste se za dodavanje informacija koja nije definisana od strane drugih elemenata. Te informacije koriste serverski programi.

Center for Information Technology strana 7

Šta je HTML

Rangiranje sajta na pretraživačima često zavisi baš od ovog taga, a neki pretraživači neće ni uzeti u obzir vaš sajt, ukoliko ih nemate. Često su oni uzrok dolaska novih posetilaca na vaš sajt, zato nepotcenjujte META tagove. Ali, ni ovde ne treba preterivati. Pre njihovog korišćenja treba obratiti pažnju na svrhu svakog od njih i pažljivo odabrati sadržaj.

 Tag  Argumenti  Opis

<meta>http-equivnamecontent

Definiše razne informacije koje HTTP server može da čita

META tagovi služe browseru korisnika da uradi potrebne radnje sa stranom koju učitava, pri čemu se prema strani odnosi kao prema objektu. Ovim tagovima može se postići npr. dužina postojanja strane u kešu (cache) tj. memoriji browsera, automatski redirekt browsera na drugu internet adresu,onemogućavanje pojavljivanja strane u tuđem okviru (frame-u) itd...

HTTP-EQUIV atribut navodi HTTP response zaglavlje koji sadrži informaciju. Za više informacije o HTTP 1.1 specifikaciji pogledajte na http://www.ietf.org/rfc/rfc2616.txt. Atribut NAME koristi se za imenovanje meta informacije i ne koristi se zajedno sa HTTP-EQUIV argumenta. A meta informaciju navodimo u okviru atributa CONTENT.

Pomoću HTTP-EQUIV="Content Type" navodi se karakter set HTML dokumenta. Recimo, kada u HTML dokumentu želite da koristite windows-1250 kodnu stranu koja sadrži i naše letinične znake onda otkucajte sledeći META tag:

<META HTTP-EQUIV="Content Type" content="text/HTML; charset=windows-1250">

Meta tag sa HTTP-EQUIV="Expires" govori browseru od kada da smatra tu stranu "isteklom". Dakle, ako se korisniku strana već nalazi u keš memoriji, i ima ovaj tag, koji je istekao, browser će od servera da zatraži novu stranicu, i neće koristiti onu iz keša.

<META HTTP-EQUIV="expires" CONTENT="Fri, 21 Jan 2000 14:05:00 GMT>

Meta tag sa HTTP-EQUIV="Refresh" ponovo učitava stranu što omogućuje komunikaciju sa serverom tkz. client-pull, ili, ukoliko sadrži URL neke druge strane prosleđuje korisnika na tu stranu. U navedenom primeru, "5" označava vreme u sekundama posle koga reload/redirekt počinje, a www.webautor.8m.com adresa označava adresu na koju bi korisnik bio prosleđen posle 5 sekundi:

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.webautor.8m.com">

Meta tag sa HTTP-EQUIV="Window-target" meta tag određuje ime prozora u kome se pojavljuje stranica. To je korisno kada neko hoće da stavi vašu stranicu u frejm (okvir) na njegovom sajtu, tako da izgleda da je i vaša strana deo sadržaja njegovog sajta.

<META HTTP-EQUIV="Window-target" CONTENT="_top">

Meta tag sa NAME atributom imaju najveću ulogu pri prijavljivanju vaših strana na pretrazivače (search engines), jer upravo oni sadrže podatke koje pretraživači najviše cene (naravno, osim samog sadržaja strane). To su npr. ključne reči (keywords) i opis strane (description)...

Posle prijave vašeg sajta na pretrazivače, "robot" pretrazivača poseti vašu stranu i pokupi potrebne podatke za indeksiranje. Da bi taj proces bio brži, tj. da robot ne bi skupljao sve ključne reči iz teksta strane, potrebno je navesti meta tag sa atributom NAME="Keywords". Dok ključne reči sa HTML dokumenta navodite u okviru atributa CONTENT="rec1, rec2, ... ". Nabacati što više reči (oko 100), tako da se vaš sajt pomene u što većem broju pretraga.

Center for Information Technology strana 8

Šta je HTML

<META NAME="keywords" content="web, design, HTML, html, osnove, elementi, meta, head, body">

Zajedno sa ovim meta tagom koristite i meta tag za opis vaše strane <META NAME="description". Ovaj meta tag takođe koriste roboti za pretraživanje, tj. kada vaš sajt bude pronađen prilikom pretraživanja ispod vaše Web adrese pisaće opis koji se nalazi u ovom tagu.

<META NAME="description" content=" Ova strana sadrzi uputstvo za koriscenje Osnovnih HTML elemenata. Osnovni elementi su: html, head i body. Naucite vise o njima i njihovom koriscenju.">

Još jedan zanimljiv i koristan meta tag je za navođenje autora HTML dokumenta :

<META NAME="author" content="Skoric Milan">

Meta tag sa NAME="ROBOTS" govori robotima pretrazivača šta da rade sa dotičnom stranom, a opcije se navodi u okviru CONTENT:

ALL da indeksira tu stranu, i da indeksira strane koje su povezane linkovima... 

NONE ni jedno ni drugo 

INDEX samo da indeksira 

FOLLOW samo da prati linkove 

NOINDEX da ne indeksira 

NOFOLLOW da ne prati linkove 

<META NAME="robots" CONTENT="all">

BASEFONT:

Ovim elementom možete navesti veličinu, ime i boju fonta koju koristitite u HTML dokumentu. On se nalazi između HEAD tagova ali može biti i u okviru BODY tagova. Veličina fonta ukoliko se nenevede je unapred definisan na velicinu 3.

<BASEFONT SIZE=5><BASEFONTFACE="Times New Roman"><BASEFONTCOLOR="red">

SCRIPT

Ovim elementom možete uključiti klijentski skript a zadaje se tagovima <SCRIPT> </SCRIPT>. Klijentski skript "client-side script" omogućava veću intraktivnost u dokumentu odgovarujući korsniku na određene događaje. Naprimer, skriptovi se koriste da se proveri validnost unešenih informacija u formulare kako bi odmah obavestio korisnika na grešku. Može da se nalazi i u okviru BODY elementa. Prepručujemo da se SCRIPT blokovi nalazi u

Center for Information Technology strana 9

Šta je HTML

okviru HEAD elementa zato što se nalaze iznad elementa koji pozivaju te skriptove u suprotnom browser će izadti grešku.

 Tag  Argumenti  Opis

<javascript> </javascript>typelanguagesrc

Definiše osnvnu adresu, URL

Pomoću atribut LANGUAGE navodimo jezik koji koristimo za klijentski script npr. JavaScript, JavaScript1.0 , JavaScript1.2, JScript, PHP & VBScript i ukoliko se ne navede podrazumevana vrednost je JavaScript1.0. Netscape browser 3.0 prepoznaje samo JavaScript & JavaScript1.0.

<script language=javascript><!-- // ovo je skript blok // --></script>

Za browsere koji ne podržavaju script potrebno je da skript bloka stavite u okvru komentara kao u prethodnom primeru, pri čemu završni tag komentar započinje sa // što predstvlja linijski komentar u JavaScript-u. Korišćenjem atributa SRC možete uključiti eksterni skript.

<script language="javascript" src="szw.js"><!-- // ovo je skript blok // --></script>

Pošto ste upoznali osnovnu strukturu HTML dokumenta, sledi opis unošenja YU karktera i drugih specijalnih znakova, više o tome na sledećoj strani.

ŠTA SU TO SPECIJALNI ZNACI?Specijalni znaci ili entiteti obezbeđuju metod da se unesu karakteri koji nemogu da se unesu sa tastature, ili su zauzeti npr. znak manje < nemože da se koristi pri unosu sadržaja pošto se taj znak koristi za tagove.

Entiteti

Entiteti imaju sledeću sintaksu: &naziv_entiteta; , &#broj_entiteta ili &#xheksadecimalni_broj_entiteta. Samo neki karakteri imaju svoje nazive dok navođenjem broja karaktera tj. njegovog koda možemo ispisati bilo koji znak iz UNICODE kodnog rasporeda. Da bi ispisali znak manje moramo u HTML dokumentu otkucati &lt;

Entitet Decimalna vrednost

Heksadcimalna vrednost U Browseru

 &lt;  &60  &x3C  < &gt;  &62  &x3E  > &amp;  &38  &x26  & &qout;  &34  &x22  " &copy;  &169  &xA9  ©

Center for Information Technology strana 10

Šta je HTML

 &reg;  &174  &xAE  ® &nbsp;  &160  &xA0  Blank na kome se nemože

 preseći red

<p> Ovo je znak manje &lt; a ovo je znak veće &gt; a ovo su &quot; i ovo su &#34;&nbsp;&nbsp;&nbsp;Napravimo još tri razmaka&nbsp;&nbsp;&nbsp;kraj.</p>

Ovo je znak manje < a ovo je znak veće > a ovo su " i ovo su "   Napravimo još tri razmaka   kraj.

Karakteri

HTML 4.0. usvojio je Universal Character Set kao svoj karkter set. Ovaj karkter set je ekvivalent Unicode 2.0 kodnom rasporedu koji sadrži karktere skoro svih svetskih jezike uključujići i naš. Prethodne verzije HTML koristile su ISO-8859-1 kodni raspord koji je podržavao samo karktere nekih Zapadno Evropskh jezika.

Najednostvniji način da koristite naša slova je da HTML dokument sa našim slovima snimite u UTF-8 formatu i da u zaglavlju HTML dokumenta tj. u okviru HEAD tagova unesete sledeće:

<meta content="text/html; charset=utf-8" http-equiv=content-type>

Ubacivanje naših slova pomoću kodnog rasporeda CP1250 je vrlo jednostavno:

1. U HTML kodu svake stranice unutar HEAD tagova ubacite META tag :

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

Napomena:Ovako se unosi LATIN-2 kodni raspored koji omogućuje prikaz naših latiničnih slova u prozoru browsera, a odgovara kodnoj strani 1250 u Windowsu.

2. U vašem HTML kodu na mestu gde treba da stoji neko naše slovo ubacite sledeće ASCII kodove tj. simbole:

 &#268; za naše veliko  Č &#269; za naše malo  č &#262; za naše veliko  Ć &#263; za naše malo  ć &#352 za naše veliko  Š &#353 za naše malo  š &#272; za naše veliko  Đ &#273; za naše malo  đ Ž za naše veliko  Ž ž za naše malo  ž

<FONT SIZE="2" COLOR="purple" FACE="Verdana, Arial, Times New Roman">Ovaj tekst &#263;e biti veli&#269;ine 2, ljubi&#269;aste boje i bi&#263;e prikazan u Verdana fontu ukoliko postoji na ra&#269;unaru, ako ne onda se uzima drugi font Arial itd.. </FONT>

Ovaj tekst će biti veličine 2, ljubičaste boje i biće prikazan u Verdana fontu ukoliko postoji na računaru, ako ne onda se uzima drugi font Arial itd..

Center for Information Technology strana 11

Šta je HTML

Po HTML 4.0 specifikacij svi HTML tagovi poseduju zajedničke atribute, više o njima na sledećoj strani.

ŠTA SU TO ZAJEDNIČKI ATRIBUTI?Po HTML 4.0 specifikaciji skoro svi HTML elementi podržavaju jedan skup zajedničkih atributa ("Common Attributes"). Ovi atributi omogućuju lako povezivanje elemenata sa stilovima i skriptovima, definisanja lokalnog jezika kao i mnoge skript događaje.

Id atribut

Atribut ID postvlja jedinstveni identifikator za element u dokumentu. Nemogu postojati dva elementa sa istom vrednošću ID atributa u jednom dokumentu.

U sledećem primeru ID atribut se koristi da identifikuje koji paragraf je prvi a koji drugi u dokumentu:

<P ID=prvi>Moj prvi paragraf.</P><P ID=drugi>Moj drugi paragraf.</P>

Pragrafi u ovom primeru mogu da korz ID atribut povežu sa stilom definisanom u stil šemi (Cascading Style Sheet):

P#prvi { color: navy; background: transparent}P#drugi { color: black; background: transparent}

Takođe ID atribut koristi se da obezbedi jedinstveno ime za HTML element kako bi mu se moglo pristupiti iz scripta.

Class atribut

Atribut CLASS se koristi za povezivanje elementa sa stlom definisanim u šemi stilova (style sheets). Naprimer:

<DIV CLASS=navbar><P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P><P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="SveZaWeb Logo"></A></P></DIV>

U ovom primeru koristimo CLASS atribut kako bi povezali stil sa elementom::

.navbar { margin-top: 2em; padding-top: 1em; border-top: solid thin navy}

Center for Information Technology strana 12

Šta je HTML

.navbar IMG { float: right }

@media print { .navbar { display: none }}

Style atribut

Atribut STYLE omogućava da se navedi stil u okviru samog elementa tj. van okvira šeme stilova na primer:

<P>Popularni font za čitanje preko ekrana monitora je <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

Kada se STYLE atribut koristi potrebno je da se postvi style sheet language pomoću META taga na sledeći način:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Preporučujemo vam upotrebu CLASS ili ID atributa za postvljanje stilova u odnosu na STYLE pošto ID i CLASS mogu da se primene na različite medije i obezbeđuju odvajanje sadržaja i formatiranja prikaza.

Title atribut

Atribut TITLE obezbeđuje naslov za element i implementiran je kao "tooltip" u brovserima. Primena ovog atributa mnogo koristi kod referenciranja, slika itd.

<A HREF="mailto:[email protected]" TITLE="Pošalji te mail autoru sajta">[email protected]</A>

<A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Biblioteka">CGI.pm</A>

<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">

<OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game"><IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">Yahtzee is my <EM>favorite</EM> game!</OBJECT>

Lang atribut

Atribut LANG definiše jezik za sadržaj elementa uključujiući i ostale HTML elemente koji se nalaze u njemu a nije naveden atribut LANG. Ovaj atribut je veom zanačajan za pretraživače interneta.

Vrednosti atributa su definisani prema specifikaciji :RFC 1766; Evo nekoliko primera: sr za Srpski, en za Engleski, en-US za Američki engleski.

Korišćenjem LANG atributa omogućava vam i lako menjanje stila sadržaja zavisno od jezika.

Center for Information Technology strana 13

Šta je HTML

Osnovni jezik HTML dokumenta se postvlja korišćenjem LANG atributa kod HTML elementa ili korišćenjem Content-Language u HTTP zaglavlju pomoću meta tagova.

<html lang="sr"><head><meta http-equiv="Content-Language" content="sr"></head>

Dir atribut

Atribut DIR definiše smer ispisivanja teksta i može imati vrednosti s leva na desno left-to-right (DIR=ltr koji je unapred već postvljen ili s desno u levo right-to-left (DIR=rtl).

Skript događaji

Broj atributa koji definišu klijentski skript je zajednički za većinu elemenata. Vrednost atributa je ili poziv funkcije ili pet kratkih komandi koji se izvršavaju pošto se događaj desi.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

Kada se koristi atribut za događaj potrebno je da se definiše osnovni script jezik:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

Mogući događaji su sledeći:

ONCLICK, kada je nad elementom pristisnuto dugme na mišu ONDBLCLICK, kada je nad elementom načinjen dvostruki klik na

mišu ONMOUSEDOWN, kada se nad elementom drži pritisnuto dugme na

mišu ONMOUSEUP, kada se nad elementom pusti dugeme na mišu ONMOUSEOVER, kada se pređe mišem preko elementa ONMOUSEMOVE, kada se miš pomeri u okviru elementa ONMOUSEOUT, kada se mišem pomeri sa elementa ONKEYPRESS, kada se pritisne tipka nad elementom ONKEYDOWN, kada se drži pritisnut taster nad elementom ONKEYUP, kada se pusti taster nad elementom

Napomenimo još jednom da su ovi atributi zajednički za skoro sve elemente i da se često koriste. Pošto ste se upoznali sa osnovama HTML slede elementi za formatiranje sadržaja, više o tome na sledećoj strani.

KAKO DA MODIFIKUJETE SADRŽAJ HTML DOKUMENTA?HTML obezbeđuje elemente koje vam omogućuju da modifikujete tekst tj. da definišete naslove, podnaslove, podbljavate i ističete razne delove teksta, postavljate font itd. kako bi sadržaj bio pogodniji za čitanjie i lepši.

Center for Information Technology strana 14

Šta je HTML

Hx elementi - Naslovi

U svakom dokumentu potrebno je prvo da definišemo naslov tj. tekst koji se prikazuje slovima većim od standardnih, kako bi bio upadljiviji. Na raspolaganju je šest nivoa naslova (Headers). Najveća odgovaraju naslovu prvog nivoa <H1>, a najmanja naslovu obeležena kao <H6>. Ustvari H1 treba da predstavlja naslov knjige, H2 kao naslov sekcije a H3 kao naslov poglavlja itd. ali HTML standard to nezahteva.

  Tag   Atributi  Opis  Primer

<h1> </h1>

alignidclassstylelangdir

Naslov 1 Naslov 1

<h2> </h2>

alignidclassstylelangdir

Naslov 2 Naslov 2

<h3> </h3>

alignidclassstylelangdir

Naslov 3 Naslov 3

<h4> </h4>

alignidclassstylelangdir

Naslov 4 Naslov 4

<h5> </h5>

alignidclassstylelangdir

Naslov 5 Naslov 5

<h6> </h6>

alignidclassstylelangdir

Naslov 6Naslov 6

Pored zajedničkih atributa koristi i ALIGN atribut sa vrednostima : left, right, & center

P element

Pasus (pargarf) se definiše tagom <P> a sadrži tekst i ostale HTML elemente osim TABLE i ADRESS elementa. Između pasusa se prikazuje jedna prazna linija. Završni tag je opcioni ali vam preporučujemo da ga koristite pogotova ako povezujete ovaj element sa stil šemom. Pored zajedničkih atributa koristi i ALIGN atribut sa vrednostima : left, right, center & justify

  Tag  Opis  Atributi  Primer

Center for Information Technology strana 15

Šta je HTML

<p> </p>

alignidclassstylelangdir

PasusNovi

pasus

 <p align="right"> Pasus </p> <p> Pasus 2</p> <p alagin="center"> Pasus 3 </p>

Pasus l

Pasus 2

Pasus 3

Kao što se iz primera vidi tekst možemo da poravnjamo sa levom ili desnom ivicom ekrana ili pak da ga centriramo, korišćenjem atributa ALIGN.

BR element

Prelazak u novi red vrši se komndom <BR>, skraćenica od Brek Line (prelomi liniju). <BR> tag nema završni tag pošto nema nikakav sadržaj.

  Tag  Atributi  Opis  Primer

<br>

clearidclassstylelangdir

Novi red Novired

 <p> Prva linija <br> druga linija <br> treca linija....

Prva linija druga linija treca linija....

Pored zajedničkih atributa koristi i CLEAR atribut sa vrednostima : left, right, all & none. Atribut CLEAR se koristi kod slika ili tabela da bi novi red započeo ispod ovih elementa.

Ovde ide neki tekst i ako ovde postavimo tag <br>tekst ide u sledeći red a ukoliko stavimo <br clear="left">

Tekst započinje u novom redu ali ispod slike.

STRONG,EM,CITE,DFN,VAR,B,I & U element

Center for Information Technology strana 16

Šta je HTML

Kada treba nešto isticati a ne predstvlja ni poseban pasus niti naslov koristimo podebljana ili iskošena slova. Za jako isticanje koristimo elementa <STRONG&gr;, browseri ovaj elemnt prikazuju kao "bold" tj. podebljana slova ali preko stilova možemo da regulišemo prikaz ovog elementa.

Za slabije isticanje koristimo element <EM>, browseri ovaj element prikazuju kao "italic" tj. iskošena slova ali preko stilova možemo reglisati i prikaz ovog elementa.

  Tag  Atributi  Opis  Primer

<b> </b><strong> </strong>

idclassstylelangdir

Podebljana slova Baš ovako

<i> </i><em> </em><cite> </cite><dfn> </dfn><var> </var>

idclassstylelangdir

Iskošena slova Baš ovako

<u> </u>

idclassstylelangdir

Podvučena slova Baš ovako

Ovi elemti prihvataju jedino zajedniče atribute.

Element <b> se više koriste kada je potrbno prikazati samo jedan znak kao podebljan u suprotnom koristite element STRONG. Dok umesto elementa <i> preporučujemo više da koristite <em>, <dfn> , <var> ili <cite> jer ističu više smisao teksta kojeg formatiraju.

Navođenje nekog teksta je obično italic pa se koristi element <CITE> koji u brovseru prikazuje sadržaj tog elementa u iskošenim slovima.

Kod definisanja termina u tekstu koriste se iskošena slova pa je pogodnije koristiti <DFN> element umesti elementa <i>.

Takođe prilikom definisanja promenjivih u tekstu koriste se iskošena slova pa se zato umesti <i> elemnta koristi <VAR> element.

NAPOMENA:Podvučen tekst treba izbegavati jer se sa njim označavaju reference ka drugim dokumentima.

Tagovi, kao što smo napomenuli, se ugnježdjavaju a nikad ne ukrštaju:

<STRONG>OVO PREDSTAVLJA <EM>GREŠKU</STRONG></EM>

Ovako treba : <STRONG>OVO NE PREDSTAVLJA <EM>GREŠKU</EM></STRONG>

Center for Information Technology strana 17

Šta je HTML

OVO NE PREDSTAVLJA GREŠKU

FONT element

Element <FONT> vam omogućuje da odredite veličinu, boju i tip (font) teksta. VAŽNO: Koristite stil šeme umesto taga FONT!?!

 Tag  Argumenti  Opis<font></font>

colorsizeface

Odnosi se na tekst unutar tagova fonta

<FONT SIZE=2 COLOR="#000080" FACE="Verdana, Arial" >HELO,WORLD </font>

HELO,WORLD

Iz koda se vidi da se font zadaje tagom <FONT></FONT> između kojih se nalazi tekst koji će biti prikazan datim fontom. Font tag sadrži argumente SIZE koji se odnosi na veličinu fonta, COLOR se odnosi na boju fonta i FACE na tip fonta.

Atrbut SIZE prima vrednosti od 1 do 7 a ukoliko se ne navede njegova vrednost je 3. Vrednost atributa opciona može da sadrži '+' ili '-' karater ispred vrednosti radi definisanja relativne veličine u odnosu na BASEFONT tj. na glavni font HTML dokumenta. BASEFONT je unapred definisan na veličinu 3, i može se promeniti pomoću <BASEFONT SIZE ...> elementa.

Najmanje treba definisati dva fonta, uz to treba imati u vidu koji su fontovi najviše zastupljeni na računarima i dali u našem slučaju podržavaju naša slova. U opštem slučaju to su: Arial, Times New Roman,Verdana, Tahoma i Courier fontove.

Center element

Tag <center> služi nam za centriranje svih elemenata zaključno sa </center>. Preporučujemo vam da umesto ovog taga koristite <DIV ALIGN="CENTER"> .:. </DIV>, pošto će se najverovatnije isključiti u sledećim verzijam HTML specifikacije.

  Tag  Opis  Primer<center> </center> Centriranje Centrirano

Centriranje postoji kao atribut u mnogim elementima npr. za naslov:

<h2 aligin=center> Centrirani naslov </h2>

Centrirani naslovKod HTML-a nije moguće poravnjanje obe ivice teksta, on raspoređuje tekst poravnat sa levom ivicom ekrana.

BLOCKQUOTE element

Center for Information Technology strana 18

Šta je HTML

Ciatiti se navode pomoću taga BLOCKQUOTE on može da sadrži i ostale HTML elemente. Pored zajedničkih atributa koristi i CITE atribut u kome se navodi lokacija citata.

  Tag  Atributi  Opis  Primer

<blockquote></blockquote>

citeidclassstylelangdir

Navođenje citata

Primer teskt koji je uvučen sa blockquote

NAPOMENA: Ne koristite ovaj element da uvalčite sadržaj pošto to možete učiniti pomoću stilova i možda neće biti u sledećim verzijama HTML-a.

 <blockquote>Šta će se desiti ako ovde stavimo novi pasus i novi red pa pogledajmo kako to izgleda: <p align="right"> Pasus </p> <p> Pasus 2</p> <p align="center"> Pasus 3 </p> <p> Prva linija <br> druga linija <br> treca linija ....</blockquote>

HR element

Tekstove možemo razdvajati i horizontalnim linijama tag <hr> (horizontal ruler).

  Tag  Opis  Atributi  Primer

<hr>alignwidthsizecolor

Horizontalna linija

Tekst iznad<hr align="CENTER" size="4" width="75%" color="#ffff00">Tekst ispod

Tekst iznad

Tekst ispod

Debljina linje se postvlja u pikselima pomoću atributa size i ukoliko se ne zada ima vrednost 2, širina se zadaje u procentima ekrana a može i u pikselima atributom width, a boja se zadaje u heksadecimalnom formatu color atributom. Atribut color podržava samo Internet Explorer.

PRE element

  Tag  Opis  Primer<pre> </pre> Zadržavanje postojećeg formatiranja Baš ovako

Evo primera koji zadržava postojeće formatiranje, znači kako je napisano u HTML dokumentu tako će biti i prikazano u browseru:

 Kod:  U Browseru:

Center for Information Technology strana 19

Šta je HTML

<pre> Ovaj tekst bolje nedirati+------+------+* 4567 * 0648 ** 2345 * 5678 *+------+------+</pre>

Ovaj tekst bolje nedirati+------+------+* 4567 * 0648 ** 2345 * 5678 *+------+------+

Ovaj element se primenjuje kod velikih lista i gde ulepšavanja nije ni potrebno.

INS element

Tag <INS> specifira kada je tekst koji sadrži ubačen u dokument od vremena kada je kreiran. Zajedno sa <DEL> elementom predstvaljaju jedine HTML elemente koji markiraju reviziju dokumenta i jedino je podržan od strane Internet Explorer 4.0. Na ekranu brovsera tekst koji se nalazi unutar ovih tagova biće prikazan sa podvučenom crtom ali može se pomoću stila promeniti izgled ovog elementa.

  Tag  Atributi  Opis  Primer

<ins></ins>

citedatetimeidclassstylelangdir

Ubačeni tekst Primer teskt koji je tek ubačen

<INS CITE="http://tvojafirma.com/prodaja/prodato.proc" DATETIME="2001-06-01T17:53:12+0:00">Nova prodaja...</INS>

Nova prodaja...

Pored zajedničkih atributa koristi i CITE atribut u kome se navodi se lokacija koja navodi detalje novog ubačenog teksta i atribut DATETIME koji navodi datum i vreme kada je tekst ubačen u dokument.

Vrednost DATETIME atributa je formata YYYY-MM-DDThh:mm:ssTZD koji navodi godinu,mesec,dan,sat,minut,sekund i vremensku zonu.

DEL element

Tag <DEL> specifira kada je tekst koji dokument sadrži nevažeći od vremena kada je kreiran. Zajedno sa <INS> elementom predstvaljaju jedine HTML elemente koji markiraju reviziju dokumenta i jedino je podržan od strane Internet Explorer 4.0. Na ekranu brovsera tekst koji se nalazi unutar ovih tagova biće precrtan ali može se pomoću stila promeniti izgled ovog elementa.

  Tag  Atributi  Opis  Primer

<del></del>

citedatetimeidclassstylelangdir

Nevažeći tekst

Center for Information Technology strana 20

Šta je HTML

Nema više <del CITE="http://tvojafirma.com/prodaja/povoljno.proc" DATETIME="2001-06-01T17:53:13+0:00">povoljene prodaje...</del>

Nema više

Pored zajedničkih atributa koristi i CITE i DATETIME atribut kao kod INS elementa samo što se ovde navodi lokacija i datum teksta koji je izbrisan.

CODE element

<CODE...> tag potrebno je da se koristi kada se prikazuje primer kod-a na ekranu browsera i on se obično prikazuje pomoću fonta mono spaced.

Formula glasi : <CODE>x=(-b+/-(b2-4ac)½)/2a</CODE>.

Formula glasi : x=(-b+/-(b2-4ac)½)/2a

KBD element

<KBD...> tzv. "Keyboard element" koristi se da naznači tekst koje je uneo korisnik i prikazuje se pomoću fonta mono spaced. Obično se koristi kod upustava za korišćenje sistema itd.

Da bi se logovali, unesite <KBD>"PRIJATELJ"</KBD> u komadnom prozoru.

Da bi se logovali, unesite "PRIJATELJ" u komadnom prozoru.

Komentar

Između ovih tagova <!-- i --> se unosi komenar. Browser ignoriše tekst koji se nalazi unutar ovih tagova. Mogu se nalaziti bilo gde unutar HTML dokumenta, služe za opis složenih stranica. Pazite da nestvarte razmak izemđu <! i -->. Neki browseri podrzumevaju da je > oznaka za kraj komentara.

<!-- komentar -->

Komentar može da se unese i pomoću tagova <COMMENT>

<COMMENT>Tekst između ovih tagova se ne prikazuje u browseru tako da se između njih može napisati svašta</COMMENT>

NAPOMENA: Ovaj element je podržan od strane Internet Explorer i Mosaic-a.

ACRONYM element

Pomoću ovog elementa definišete skraćenicu a zadaje se tagovima <ACRONYM> </ACRONYM>. Ovaj element je podržan samo od strane Internet Explorer-a.

<ACRONYM TITLE="HyperText Markup Language">HTML</ACRONYM>

HTML

BLINK element

Center for Information Technology strana 21

Šta je HTML

Tekst koji se nalazi između tagova <BLINK> </BLINK> u browseru trepti. Ovaj element je podržan samo od strane Netscape Navigatora.

Ostali elementi za formatiranje sadržaj:

  Tag  Opis  Primer<sub> </sub> Subscript Subscript<sup> </sup> Superscript Superscript<strike> </strike> <s> </s> Precrtan tekst Baš ovako<big> </big> Veliki tekst Baš ovako<small> </small> Mali tekst Baš ovako<tt> </tt> Tekst sa pisaće mašine Baš ovako

<address> </address> Tagovi sadrže informaciju o adresi

Milan SkorićDobri Potok b.b.KRUPANj 15314SRBIJA - Jugoslavija

Pošto ste se upoznali sa modifikacijom sadržaja, sledi povezivanje HTML dokumenta više o tome na sledećoj strani.

KAKO SE POVEZUJU HTML DOKUMENTI?Najvažnija osobina HTML dokumenta je ta da se oni mogu međusobno referencirti (povezati tj. da jedan ukazuje na drugi itd.), što je zapravo osobina hiperteksta.

A element

Elemnt HTML koji omogućuje povezivanje HTML dokumenta naziva se Anchor "sidro" i definiše se tagom <A> i </A>. Kako bi se razlikovala od ostatka teksta, veza između dokumenta je obično podvučena i/ili drugoj boji.

 Tag  Argumenti  Opis

<a> </a>

hreftargetidnameclassstyletitle

Generiše link ka drugom dokumentu ili servisu

Veza ka drugom dokumentu ostvaruje se navođenjem mesta gde se nalazi referencirani dokument, pomću atributa href (koji je inače obavezan a ostali atributi su neobavezni) u a tagu. Referencirani dokument može da se nalazi u istom ili drugom katalogu (direktorijumu) ili na drugom računaru koji je pak čak u Africi ili Aziji.

Veza ka <a href="adresa_drugog_dokumenta">drugom</a> dokumentu.

Center for Information Technology strana 22

Šta je HTML

Veza ka drugom dokumentu.

Ako kliknemo na podvučenu reč, automatski se otvara dokument sa zadate adrese. NAPOMENA: U prethodnom primeru ukoliko klknete na dati link neće se otvoriti drugi dokument, jer se samo opisuje postupak.

Adresa je u opštem slučaju u istom katalogu <a href="primer.htm">drugom</a> ili u nekom drugom. Pri tome se koristi UNIX sintaksa sa desnim kosim crtama / i gde treba voditi računa o malim i velikim slovima.

Ukoliko se dokument nalazi u prethodnom direktorijum u odnosu na tekući u kome se nalazi i sam dokument refernca glasi: <a href="../primer.htm">drugom</a>

A ukoliko se dokument nalzi u sledećem podktalogu u odnosu na tekući: <a href="podkatalog/datotekai.htm">drugom</a>

Ako je referncirana datoteka slika, klik na referncu će prikazati tu sliku na praznom ekranu: Pogledajte <a href="slika.gif">sliku</a> veli&#269ine 20kb.

Pri referenciranje dokumenata na drugim računarima, uz korišćenje raznih mrežnih protokola navodi se kompletna URL adresa. Uniform Resurce Locator skraćeno URL predstvalja adresu preko koje se pristupa određenom mrežnom servisu a sadrži naziv protokola, adresu servera i putanju do dokumenta.

<a href="http://zmaj.etf.bg.ac.yu/Etf/Rc/index.html">RC ETF BG</a>

Pomoću ove komande mogu se pozvati i drugi mrežni servisi ( ovi podaci se navode u okvru href atributa ):

gopher://galeb.etf.bg.ac.yu/linux/texts/sendmail ftp://ubbg/net/internet/netscape/n601.exe telenet://afrodita.rcub.bg.ac.yu news:soc.culture.yu

Za Usent News se navodi samo naziv diskusione grupe, jer news serveri medjusobno razemenjuju iste poruke, a pristupa se najbližem.

Ukoliko se nenavde ime datoteke u putanji, učitava se podrazumevana datoteka obično je to index.htm, index.html ili default.htm.

Refernciranje na samom dokumentu se vrši tako što se na mestima koje treba referncirati ostavljaju sidra, na sledeći način :

<a name="pocetak"> ovde je pocetak </a>

a nešto kasnije u istom dokumentu taj deo referencirati kao:

<a href="#pocetak">Povratak na pocetak</a>

Ova refernca se može pozvati iz drugih dokumenata na primer:

<a href="skola09.htm#pocetak">Pocetak necega - naziv cega</a>

Uloga ovog načina označevanja teksta dolazi do izražaja kada je stranica sastavljena od dosta teksta, pa je potrebno mnogo skrolovanja da se pregleda čitav sadržaj. Ako je sadržaj stranice

Center for Information Technology strana 23

Šta je HTML

takav da se može podeliti na više logičkih celina (nekoliko poglavlja u istom tekstu), moguće je na početak teksta postaviti rezime, sa linkovima ka poglavljima u tekstu.

Prozori browser-a mogu imati imena, preko kojih se mogu referncirati dokumenta iz različitih prozora. Kada se klikne na referncu koji referncira ka drugom prozoru, otvoriće se dati prozor ukoliko već prethodno nije otvoren. Ovakve akcije su moguće jedino u browser-ima koji podržavaju frejmove. Označavanje prozora se crši pomoću atributa TARGET:

<A HREF="adresa.html" TARGET="window_name">Link text</A>

Atribut TARGET atribut prima sledeće vrednosti:

window_nameTo može biti bilo koje ime specifirano u okviru <FRAME> ili korišćenjem window.open u JavaScript-u. _selfUpotrebom ove vrednosti otvara se dokument u istom prozoru u kome se nalazi i sam link(referenca). _parentKorišćenjem ove rezervisane vrednosti otvarase dokument u prozoru koji je roditelj(matični) prozoru koji sadrži link.  _topOva vrednost omogućava da se referncirani dokument u okviru frejmova otvori u istom prozori pri tome brišući sve postojeće frejmove (okvire).  _blankKorišćenjem ove vrednosti dokument koji je referenciran se otvara u novom prozoru.

Netscape dozvoljava unošenje teksta u subject liniju poruke pomoću sledeće sintakse:

<A HREF="mailto:[email protected]?subject=komentari i kritike za skolu"> Komentari </A>

Internet Explorer 4.0 i noviji podržava i upisivanje teksta u područje za mail (pismo):

<A HREF="mailto:[email protected]?subject=lista_slanja&[email protected]&body=zeleo bih da se prijavim za dobijanje liste slanja">Lista slanja</A>

Povezivanje scripta i anchor taga vrši se na sledeći način:

<A HREF="javascript:NAZIVFUNKCIJE()">Moja funkcija</A>

<A HREF="javascript:alert('Klikno si me! Šta sad!?!')>Klikni me</A>

Klikni me

HTML dokumenta mogu da sadrže slike kao i drugi multimedijalni sadržaj, više o tome na sledećoj strani.

Center for Information Technology strana 24

Šta je HTML

KAKO DODATI MULTIMEDIJALNI SADRŽAJ U HTML DOKUMENT?

Najnovija HTML specifikacija omogućava da se skoro sve može uključiti u HTML dokument kao npr: Java apleti, ActivX kontrole, muzički fajlovi i drugi objekti. Ubacivanje ne tekstualnih medija u dokument datira još iz HTML 2.0 kada je omogućeno ubacivanje slika pomoću <IMG> elementa.

IMG element

Element <IMG> drugi je po važnosti element (posle anchor elementa) jer WEB nebi bio danas to što jeste da nema slika.

Netscape i Mosaic (i većina drugih browsera) podržaće samo upotrebu .GIF i .JPG slika ( Netscape podržava i upotrebu progresivnih JPEG slika) u HTML dokumentima. Kod Netscape Communicatora lista se može proširiti ugrađivanjem formata slika zajedno sa dokumentom, ali korisnik mora da ima instalirane plag-in module na svom sistemu koji omogućavaju prikaz tih formata.

Internet Explorer podržava korišćenje .GIF, .JPG, progresivnih JPEG slika, .PNG (Portable Network Graphics) slike i .BMP fajlove.

Netscape i Internet Explorer sada u potpunosti podržavaju GIF89a format, koji omogućava korišćenje animiranih GIF slika u HTML dokumentima.

Preporuka je da se .GIF format koristi za ikone a .JPG za skenirane slike u istom ili nekom drugom katalogu. Treba biti umeren oko broja i veličine slika jer znatno utiču na brzinu učitavanja sajta.

 Tag  Argumenti  Opis

<img>

srcaltborderheightwidthvspacehspacelowsrc

Posatvlja sliku u dokumenta

Pored gore navedenih atributa IMG tag podržava i zajedniče atribute.

Obavezno pri unosu slika unesite i njivu širinu (width) i dužinu (height) jer ubrzava učitavanje tako što browser ne mora da troši vreme na izračunavanje tih podataka. Pored toga najvažniji atribut je alt koji ispsuje tekst umesto slike dok se ona ne učita (vrlo korisno ako se slike koriste kao reference ka drugim dokumentima).

 Kod:  U browser-u:

Center for Information Technology strana 25

Šta je HTML

<img src="slika.gif" width=161 height=151 border=1 alt="MS web autor">

Ako se slika nalazi u drugom katalogu treba navesti relativnu putanju:

<img src="../slike/slika.gif" width=161 height=151 border=1 alt="MS web autor">

Refernce ka slikama na drugom računaru izbegavajte zbog brzine i efikasnosti rada. Slike se veoma lepo koriste za referenciranje drugih dokumenata ako se izmedju krajeva referenci na drugom dokumentu stavimo prikaz slike, klikom na sliku dobijamo referencirani dokument.

<a href="../index.htm"><img src="../slike/slika.gif" width=161 height=151 border=0 alt="MS web autor"></a>

Pomoću BORDER atributa zadajemo okvir slike u pikselima, ukoliko je slika referncirana kao u prethodnom primeru poželjno je da border bude postvljan na nulu da se nebi pojavio plavi okvir oko nje koji ukazuje da je slika referncirana na neki dokument.

Atribut LOWSRC služi za unošenje surogat-slike u niskoj rezoluciji, koja će zameniti "pravu" sliku dok traje prenos, doduše malo sajtova se može pohvaliti ovom opcijom.

<img src="velikkvalitet.gif" lowsrc="lošijikvalitet.gif">

Slike se tretiraju kao tekst: sliku možete da ubacite u neki red teksta, pa ako je njena visina veća od visine slova, prored će se povećati pa je na web dizajneru puno posla. Ako se ne naglasi, tekst koji sledi iza slike se prikazuje se ispod slike.

Atributom ALIGN možemo da se tekst pojavljuje sa leve ili desne strane slike. ALIGN ima vrednost left, right, middle, top i bottom. Ako je poravnjavanje ulevo, slika ide na levu stranu a tekst desno od nje. A prilikom poravnjavanja udesno slika se prikazuje na desnoj ivici ekrana a tekst ide u levo. Pomoću Middle centriramo sliku unutar linije sa tekstom.

Atributima VSPACE & HSPACE kontrolišemo vertikalni prostor iznad i ispod slike tj. horizontalni ispred i iza slike. Vrednosti se postvljaju u pikselima.

Ponkad je potrebno stavljanje velike količine slika na web (katalozi proizvoda) koje predstvljaju kvalitetne fotografije pa im je veličina poveća. Pa se vrši pravljenje umanjenih sličica (thumbnail) koje predstavljaju linkove ka orginalima - male slike su obično dovoljne da se sazna o čemu se radi.

Puno malih slika se sporo učitavaju, jer se učitava jedna po jedna slika, naizmenično, dok se sve ne učitaju. Ovo pravilo je naročito korisno za slike u kojima se nalazi samo tekst. Treba naći kompromisno rešenje. Slike nebi trebalo da budu veće od 600x300 piksela jer su to dimenzije web stranice.

Učitavanje slika u pozadini "preloading images"ova thenika omogućava da se slike učitavaju zajedno sa HTML dokumentom. Browser kešira

Center for Information Technology strana 26

Šta je HTML

ove slike (sinima ih na korisnikov kompjuter) i odmah prikaže i kada se koriste na drugim stranama. Ovo se izvodi pomoću JavaScripta-a:

# 1 Prvi korak se sastoji u ubacivanju JavaSkript koda u okvir HEAD elementa (Koristite isprvna imena fajlva kao i putanje!):

<SCRIPT LANGUAGE = JAVASCRIPT>if (document.images) { img1 = new Image(); img2 = new Image(); img1.src = "NazivSlike1.gif"; img2.src = "putanja/NazivSlike2.gif"}</SCRIPT>

# 2 Drugi korak je unos slika u HTML dokument sa istim imenima i putanjama: "NazivSlike1.gif"

Savet: Velike slike najbolje je da je podelite u više segmenta, i da ih ponovo spojite pomoću nevidljivih tabela na web stranici. Njihovo kombinovanje sa tekstom i bojama doneće prave rezultate. Danas postoje mnogi programi koji automatski mapiraju, seku i proizvode potreban HTML kod za ovakav prikaz slika.

Drugi ne tekstualni sadržaji se ubacuju pomoću tagova : <APPLET> element uključuje Java apleta, <OBJECT> uključuje ActiveX kontrole i druge objekte, <BGSOUND> omogućava ubacivanje muzičkih fajlova a <EMBED> ugrađuje skoro sve tipove fajlova kroz Netscape plug-inove.

Kada želite nešto da nabrajate koristite liste, više o njima na sledećoj strani.

KAKO DA NAPRAVIM LISTE U HTML DOKUMENTU?Liste koristimo kada želimo da pokažemo nešto što se sastoji iz više delova a na raspolaganju su nenumerisne liste, nenumerisane liste, definicione liste, meni liste i "directory" liste.

UL, OL i LI elementi

Nenumerisne liste dobijamo pomoću tagova <UL> a numerisnae liste pomoću <OL> tagova pri čemu se elemnti liste navode pomoću taga <LI>.

 Tag  Atributi  Opis  Primer

<ol> </ol>

compacttypestartvalue

Numerisane liste (koristi se sa <li>) 1. Jedan 1

<ul> </ul>compacttype

Nenumerisane liste (koristi se sa <li>) Jedan 1

<li> typevalue Služi za obeležavanje elemenata liste

Center for Information Technology strana 27

Šta je HTML

Ovi elementi pored navedenih atributa koriste i zajedniče atribute.

Liste mogu biti ugnježđene, kada browser automatski prilagođava oblik tačke ili broja ispred svakog elementa liste. Elementi liste se obično prikazuju malo udesno uvučeno.

 Kod:  U Browser-u: <ul> <li>jedan <li>dva <ol> <li>crveno <li>plavo <li>zeleno </ol> <li>tri </ul>

jedna dva

1. crveno 2. zeleno 3. plavo

tri

NUMERISANE LISTE

Numersiane liste uobičajeno počinju sa 1 pa 2, 3, ... itd. to su tkz. markeri liste. Atribut TYPE omogućava da se podesi marker liste i to na sledeći način:

(TYPE=A) - Velika slova A, B, C ...(TYPE=a) - Mala slova a, b, c ...(TYPE=I) - Veliki rimski brojevi I, II, III ...(TYPE=i) - Mali rimski brojevi i, ii, iii ...(TYPE=1) - Brojevi 1, 2, 3 ...

Pomoću atributa START možemo postaviti od kad započinje brojač elemenata liste npr. START=5 započenje zavisno od TYPE atributa od 'E', 'e', 'V', 'v', ili '5'.

<OL TYPE=a START=3><LI>Click on the desired file to download.<LI>In the presented dialog box, enter a name to save the file with.<LI>Click 'OK' to download the file to your local drive.</OL>

c. Click on the desired file to download. d. In the presented dialog box, enter a name to save the file with. e. Click 'OK' to download the file to your local drive.

Numerisna liste mogu da koriste i atribut VALUE kod <LI> da bi postavili brojač elementa liste i podelemenata liste.

Atribut TYPE može da se koristi i kod <LI> taga i koristi iste vrednosti.

Prostor između elementa liste biće smanjen ukoliko se navede atribut COMPACT.

NENUMERISANE LISTE

Dok kod neumersiane liste uobičajeno stoji tačka ispred elemenata liste i nju tagođe možete promeniti primenom TYPE atributa ali samo kod Netscape Comunicatora i atribut prima vrednosti disc, circle & square, međutim izgled tačka može se kontrolisati kroz stilove.

Atribut TYPE kod LI elementa kada se koristi zajedno sa UL, <DIR> i MENU elementom poseduje iste vrednosti kao i TYPE atribut kod <UL> taga.

Center for Information Technology strana 28

Šta je HTML

Prostor između elementa liste biće smanjen ukoliko se navede atribut COMPACT.

DL, DT i DD elementi

Definicione liste se dobijaju pomoću tagova <DL></DL>, gde se obično nabrajaju pojmovi i njihova objašnjenja. Svaki element ovakve liste ima pojam ( definition term) <DT></DT> i odgovarajuće objašnjenje ( definition description) <DD></DD>.

 Tag  Opis  Primer<dd> </dd> Definicione liste Primer teksta<dt> Pojam definicione liste Primer teksta<dd> Objašnjenje Primer tksta

Evo primer upotrebe definicionih lista:

 Kod:  U Browser-u:

 <dl> <dt><h3>SGML</h3></dt> <dd>Standard Generalized Markup Language</dd> <dt><h4>HTML</h4></dt> <dd>HyperText Markup Language</dd> </dl>

SGMLStandard Generalized Markup Language

HTMLHyperText Markup Language

MENU element

Menu liste započinju sa tagom <MENU> a elementi se navode pomoću taga <LI>. Peporučujemo vam da umesto ovog elementa koristite UL elemnt.

<MENU><LI>First item in the list.<LI>Second item in the list.<LI>Third item in the list.</MENU>

Prvi Drugi Treći

DIR element

Directory lista započinje tagom <DIR> a elemnti se navode sa tagom <LI>. Peporučujemo vam da umesto ovog elementa koristite UL elemnt.

<DIR><LI>A-H<LI>I-M<LI>M-R<LI>S-Z</DIR>

Center for Information Technology strana 29

Šta je HTML

A-H I-M M-R S-Z

Table omogućavaju da raspoređujemo elemente i sadržaj na Web strani, više o njima na sledećoj strani.

KAKO DA RASPOREDIM ELEMENTE U HTML DOKUMENTU?

Tabele predstvljaju najmoćnije elemente HTML-a, prvi put su predstvljene u Netscape browser-ima. Pravilnim koršćenjem tabela postižu se nevervatni rezultati. One u najvećoj meri služe za ozbiljnije sređivanje prikaza svih elemenata na stranama Web-a.

TABLE element

Tabela je omeđena tagovima <TABLE> i </TABLE>, a zadaju se tako što se pojedinačno označavaju vrste (rows) i kolone tj. polja (cells). Vrsta se označava sa tagom <TR></TR>, polje zaglavlja sa <TH></TH> a polje podatka sa <TD></TD>. Zaglavlje tabele se označva tagom <CAPTION></CAPTION>

 Tag  Atributi  Opis

<table> </table>

bordercellpaddingcellspacingwidthheightnameidtitlebgcolor backgroundalignvalign

Sadrži elemente tabele

<tr> </tr>

heightbgcolorbackgroundalignvaligntitle

Dodaje novu vrstu u tabeli

<td> </td>

heightwidthbgcolorbackgroundalignvaligntitlecolspanrowspan

Definise se polje (cell) tabele

<th> </th> height Naslov tabele. Automatski se centrira i

Center for Information Technology strana 30

Šta je HTML

widthbgcolorbackgroundalignvaligntitlecolspanrowspan

boldovan je

Ako nam treba okvir tabele unutar taga TABLE stvljamo atribut BORDER=broj, gde broj predstavlja veličinu okvira, ukoliko se broj ne navede podrazmeva se da border ima vrednost 2. Internet Explorer podržava atribut BORDERCOLOR kojim se navodi boja okvira i atribut BORDERCOLORLIGHT & BORDERCOLORDARK kojim se navode boje 3-D okvira.

Atribut FRAME navodi spoljni okvir tabele i podržan samo od strane Internet Explorera. Mora bit zadat BORDER atribut da bi se koristio, a njegove vrednosti su : above,below,box,hsides,lhs,rhs,vodi i vside

 U browser-u:  Kod:

Naslov Tabele

Plata: Radni dani:

Janko 12345 20Markoko 14563 24

<table border> <caption>Naslov Tabele</caption> <tr> <th></th>

<th>Plata:</th><th>Radni dani:</th>

</tr> <tr> <th>Janko</th> <td>12345</td>

<td>20</td> </tr> <tr> <th>Markoko</th>

<td>14563</td><td>24</td>

</tr> </table>

Upotrebom atributa CELLPADING=n zadaje se rastojanje u pikselima između sadržaja tabele i okvira tj. koliko su polja uvučena. Rastojanje između polja može se zadati atributom CELSPACEING=n. Ukoliko se atributi BORDER, CELLPADING & CELLSPACEING postave na nulu dobija se tkz. nevidljiva tabela koja u najvećoj meri služi za raspoređivanje elemenata na web stranama. Nevidljive tabele možete iskoristiti da velike slike kombinuete zajedno sa tekstom delći ih u segmente i pakovanje tih segmenata u nevidljive tabele.

HTML tretira tabelu kao paragraf pa se pomoću atributa ALIGN koji se takođe pojavljuje u svim tagovima tabele može zadati vrednosti left, right & center. Ostatak teksta nalazi se ispred ili iza nje, sem naslova koji služi za njeno objašnjenje. Na ovaj način dobijamo leteće tabele flooating. Naslov može biti i na dnu tabe ako se upotrbi atribut ALIGN=bottom kod CAPTION taga.

Obavezno zadajte širinu tabele momoću WIDTH atributa da se nebi trošilo vreme browsera na njihovo određivanje, pogotovo ako ima dosta tabela. Ona može da ima vrednost u procentima (relativna širnina u odnosu na ekran) ili pikselima. Ako se tabele koriste za precizno podešavanje sadžaja cele stranice, od velike je važnosti da mere budu zadate u procentima. Kada tabela sadrži slike zadajte mere u pikselima.

Center for Information Technology strana 31

Šta je HTML

Boja pozadine tabele se zadaje pomoću atributa BGCOLOR=#rrggbb, slike kao pozadine tabele ne treba koristiti zbog kompatibilnosti raznih browsera koji taj atributa ne podržavaju a zadaju se pomoću atributa BACKGROUND="slika.gif".

 U browser-u:  Kod:<table border width="20%" bgcolor="#ffff00" cellpadding="2" cellspacing="2" align="left"><caption>Ovo je tabela</caption><tr><th></th><th>Plata:</th><th>Radni dani:</th></tr><tr><th>Janko</th><td align="right">12345</td><td align="center">20</td></tr></table>

Za svaku ćeliju može se odrediti različita boja pozadine bezobzira da li je za čitavu tabelu već definisana neka pozadina, pa čak definisati pozadinske slike na nivuo ćelija. Na taj način možemo da preklopimo slike jednu preko druge, što uz upotrebu transparetnih GIF-ova može izazvati zanimljive efekte. Kada je potrebno spojiti dva polja, po vrsti ili koloni koristi se atributi COLSPAN & ROWSPAN :

 U browser-u:  Kod:

    

<table border="1" width="100" bgcolor="white">            <tr>                <td colspan="2" bgcolor="lime"></td>            </tr>            <tr>                <td bgcolor="red"></td>                <td bgcolor="blue"></td>            </tr> </table>

    <table border="1" width="100" bgcolor="white">            <tr>

Center for Information Technology strana 32

Ovo je

tabela

Plata:

Radni dani:

Janko

12345

20

Šta je HTML

 

                <td bgcolor="yellow"></td>                <td rowspan="2" bgcolor="aqua"></td>            </tr>            <tr>                <td bgcolor="lime"></td>            </tr> </table>

Novi table elementi

Novi HTML elementi vam omogućuju lakše formatiranje tabele ali su podržani samo od strane Internet Explorera

 Tag  Atributi  Opis<thead> </thead> align

bgcolor Definiše zaglavlje tabele

<tbody> </tbody>

heightwidthalignvalignbgcolorbackground

Predstvlja telo tabele, kao telo HTML dokumenta

<tfoot> </tfoot> alignbgcolor Definiše se dno tabele

<colgrup> </colgrup>

alignvalignwidthspan

Formatira grupu kolonu

<col> </col>alignvalignwidthspan

Formatira zadato polje

Pomoću tagova <TBODY></TBODY> definišete formatiranje (boju pozadine,viličinu...) za sva polja kao nebi za svako pojedinačno zadavali. Pomoću taga COLGROUP formatirate zadatu kolonu.

Novi TABLE atributi RULE podržan od strane Internet Explorera i koristi se tamo gde su postvljene sekcije THEAD,TBODY i TFOOT a utiče na prikaz unutrašnjih okvira tabeli. Zahteva da se zada atribut BORDER, a njegove vrednosti su : none, basic, cols, rows & all

<TABLE BORDER FRAME=hsides RULES=cols><COL ALIGN=left><COLGROUP SPAN=3 ALIGN=center VALIGN=middle><THEAD><CAPTION ALIGN=center><FONT SIZE=+1><B>A section of the Comparison Table</B></FONT></CAPTION><TR><TD>Element</TD><TD><B>Internet Explorer</B></TD><TD><B>Netscape</B></TD><TD><B>Mosaic</B></TD></TR></THEAD><TBODY><TR>

Center for Information Technology strana 33

Šta je HTML

<TD><B></TD><TD>X</TD><TD>X</TD><TD>X</TD></TR><TR><TD>&lt;BASE ...&gt;</TD><TD>X</TD><TD>X</TD><TD>X</TD></TR><TR><TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD></TR><TR><TD> ...TARGET</TD><TD>X</TD><TD>X</TD><TD></TD></TR><TR><TD>&lt;BASEFONT ...&gt;</TD><TD>X</TD><TD>X</TD><TD></TD></TR><TR><TD VALIGN=top> ...SIZE</TD><TD>X<BR><FONT SIZE=-1>(only visible<BR>when FONT<BR>SIZE= used<BR>as well)</FONT></TD><TD VALIGN=top>X</TD><TD></TD></TR><TR><TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD></TR><TR><TD VALIGN=top>&lt;BGSOUND ...&gt;</TD><TD VALIGN=top>X</TD><TD></TD><TD>X<BR><FONT SIZE=-1>(will spawn<BR>player for<BR>.mid files)</FONT></TD></TR></TBODY><TFOOT></TFOOT></TABLE>

A section of the Comparison Table Element Internet Explorer Netscape Mosaic<B> X X X<BASE ...> X X X...HREF X X X...TARGET X X<BASEFONT ...> X X...SIZE X

(only visiblewhen FONTSIZE= usedas well)

X

...FACE X<BGSOUND ...> X X

(will spawnplayer for.mid files)

Jednostavnst, Jednostavnost, Jednostavnost

Center for Information Technology strana 34

Šta je HTML

Nestavljajte ceo sadržaj u tabele, jer što je veća tabela strana se sporije učitava, i dok se ne učita cela ne prikazuje se njen kompletan sadržaj. Više manjih tabela predstavlja rešenje, jer se učitava jedna po jedna, pa posetilac može postupno da prati pojavljivanje sadržaja. HTML tabele su magične zato što za svaku ćeliju možete zadati boji i proizvesti neverovatne efekte bez korišćenja slika. Međutim pri tome se proizvodi mnogo HTML koda i takve tabele su mnogo kompleksne, pa preporučijumo da tabele budu što jednostavnije.

Polja koja nedostaju

Kod polja u HTML tabeli koja ne sadrže nikakav sadržaj možda se ne prikažu u browsru. Da bi izbegli polja koja nedostaju morate postaviti nekakav sadržaj u njih. Neki postvljaju transparetne GIF-ove u ćelije koji se ne prikazuje već stapaju sa bojom pozadine. Međutim to nije potrebno ukoliko se zada dužina polja. Najjednostavnije je da se koristi jednostavni nonbreaking space karakter: &nbsp;.

Redukujte atribute tabele

Table se korste za raspoređivanje elementa ali znajte da svaku tabelu browser treba da obradi pa tek onda da je prikaže. Obično se koriste ugnježđene tabele tj. tabele koje sadrže tabele tkz. nested tabele. Preporučujemo vam da jedna tabela sadrži najviše dve ugnježđene tabele. Izrada HTML tabele zahteva unošenje dosta koda tj. HTML tagova i da bi proizveli željene efekte koristite mnoge atribute. Međutim mnogi od njih nisu potrebni da bi bolje razumeli pogledajte sledeći primer:

<TABLE WIDTH=300 BORDER=0 CELLSPACING=0 CELLPADDING=0><TR ALIGN=left VALIGN=top><TD WIDTH=200 ALIGN=left VALIGN=top>row 1, column 1</TD><TD WIDTH=100 ALIGN=left VALIGN=top BGCOLOR=lightgrey>row 1, column 2</TD></TR><TR ALIGN=left VALIGN=top><TD WIDTH=200 ALIGN=left VALIGN=top BGCOLOR=yellow>row 2, column 1 <TABLE WIDTH=200 ALIGN=left VALIGN=top BORDER=0 CELLSPACING=0 CELLPADDING=0 BGCOLOR=yellow><TR><TD WIDTH=50 ALIGN=left VALIGN=top BGCOLOR=yellow>cell a</TD><TD WIDTH=150 ALIGN=left VALIGN=top BGCOLOR=yellow>cell b</TD></TR></TABLE> </TD><TD WIDTH=100 ALIGN=left VALIGN=top>row 2, column 2</TD></TR></TABLE>

Evo razultata tog koda:

row 1, column 1 row 1, column 2

row 2, column 1 row 2, column 2

Analizom prethodnog primera možemo da utvrdimo sledeće:

Atribut WIDTH=300 kod TABLE tag nije potreban zato što smo zadali dužine polja i to na 200 i 100 piksela , pa je očigledno da je dužina tabele 300 piksela. Kada definišemo

Center for Information Technology strana 35

cell a cell b

Šta je HTML

dužinu polja nije potrebno da definišemo dužinu tabele. 

Ponavljanje atributa ALIGN=left VALIGN=top kod svakog polja (<TD> taga) nije potrebno pošto je to specifirano kod red tj. taga <TR> i ti atributi se odnose na sve što sadrži taj rad odnosno na svaki <TDR> tag. 

U drugom redu atributi WIDTH=100,WIDTH=200 kod taga <TD> nisu potrebni pošto smo ih definisali u prvom redu. Po defniciji tabela prvo polje drugog reda mora biti isto kao i kod prvog polja prvog reda pa nema potrebe za ponovnim korišćenjem atributi WIDTH. 

Kod ugnjeđene tabele nema potrebe koristi atribut BGCOLOR=yellow zato što polje koje sadrži tu tabelu ima definisanu boju pozadine koja se prenosi na tabelu koju sadrži.

Sada pogledajmo čistiji kod koji proizvodi isto kao i prethodni stim da ste uštedeli 239 bajtova veličine dokumenta.

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR ALIGN=left VALIGN=top><TD WIDTH=200>row 1, column 1</TD><TD WIDTH=100 BGCOLOR=lightgrey>row 1, column 2</TD></TR><TR ALIGN=left VALIGN=top><TD BGCOLOR=yellow>row 2, column 1<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD WIDTH=50>cell a</TD><TD WIDTH=150>cell b</TD></TR></TABLE> </TD><TD>row 2, column 2</TD></TR></TABLE>

Proverite dali ste zatvorili sve TABLE tagove pogotovo TR & TD tagogve zato što tabele neće biti prikazana kako treba kod Netscape Navigator.

Tabele i kompatibilnost browsera

Sve dok svi browseri ne podrže 100% Cascading Style Sheet specifikaciju, tabele će ostati jedino sredstvo za raspoređivanje elemenata kod HTML dokumenta. Najveći problem je nepredvidiva priroda kod dužine polja tabele. Definišete tabelu sa većim brojem polja i postavite WIDTH atribut kod TABLE & TD taga ali pri prikazu tabele kod Netscape Navigator, dužine nisu onakve kakve ste ih zadali.

Da bi bolje razumeli problem pogledajte kod za jednu običnu tabelu:

<table border=1 cellspacing=0 cellpadding=0 width=300> <tr> <td width=100> polje 1</td> <td width=100> polje 2</td> <td> polje 3</td> </tr> </table>

polje 1 poje 2 polje 3

Center for Information Technology strana 36

Šta je HTML

Pošto su dva polja kod prethodne tabel postvljene dužine po 100 piksela sledi da je treće polje takođe dužine 100 piksela pošto je dužina tabele 300 piksela. Ali, to neradi kod Navigator. Netscape browseri tretiraju TD WIDTH atribut kao minimalnu dužinu polja tabele, dok je njena dužina određena koriz kompleksan algoritam. Jednostavno niste u mogućnosti da verujete ovom algoritmu. Da bi razrešli ovaj problem postoje tri mogućnosti:

Postavite dužinu svakog polja ali ne i kod TABLE taga. 

Postavite dužinu unutar TABLE tag, ali ne i kod polja. 

Koristite transparetne slike da forsirate dužinu svakog polja. 

Poslednji pristup zahteva da postavite nevidljive GIF-ove unutar svakog polja, zajedno sa WIDTH atributom slike čija je vrednst postvljena na minimalnu dužinu polja koju želite.

U HTML-u postoje elementi koji predstvljaju kontjner za sadržaj i ostale HTML element , više o njima na sledećoj strani.

ŠTA SU TO LAYERI?Layeri predstvljaju HTML blok elemente koji služe kao kontejneri za sadržaj i ostale HTML elemente. Oni predstvljaju objekte kojima se može manipulistai kroz skript i omogućavaju jednostvno pozicioniranje elemenata kroz Cascade Style Sheets a podržani su od strane Internet Explorera 4 i Netscape Comunicator 4 ali postoje razlike.

LAYER i ILAYER element

Kako bi podržao dinamički HTMl, Netscape je razvio potpuno novi element LAYER, što zanči da nije podržan od strane drugih browsera.

<layer>Text unutar Layer taga</layer>

Layer se zadaje tagom <layer> </layer> i unutar njega može se nalaziti bilo kakav sadržaj i svi HTML elementi tj. tekst, slike, tabele itd.

Tag Argumenti Opis<leyer></layer>   Omogućava pozicioniranje sadržaja i objekata koji se

nalaze unutar ovih tagova na web strani  name Naziv layer-a, koristi se za indentifikaciju unutar scripta  left Pozicija Layer-a u odnosu na X kordinatu  top Pozicija Layer-a u odnosu na Y kordinatu  width Dužina layera u pikselima ili procentima  top Pozicija Layer-a u odnosu na Y kordinatu  src Koristi se za refernciranje HTML stranice koji sadrži

elementi koji će biti unutar Layer-a  z-order Definiše nivoe Layera, tj. koji će koga da preklapa

  aboveArgument govori da je layer iznad u odnosu na drugi layer. Layer koji koristi above tag mora biti prvi definsian u odnosu na onaj koji je ispod njega

  below Slično above samo što se sada postvlja layer ispod

Center for Information Technology strana 37

Šta je HTML

drugog layera

  clipDefiniše region u kome će biti prikazan Layer. Sve izvan regiona neće biti prikazano i prima četri vrdnosti u pikselima x,y,x-dužina,y-dužina

  visibility Može da ima vrednosti : show,hide ili inherit i određuje vidljivost layera.

  bgcolor Definiše pozadinsku boju layera  backgroun

d Postvlja pozadinsku sliku layera

Sadržaj unutar ovog taga može da se nalazi iznad same web stranice i preklapa je. Kao da smo uzeli providnu foliju sa npr. tekstom i preklopili web stranicu. Element layer ima fiksno pozicioniranje dok korišćenjem ilayer elementa dobijamo relativno pozicioniranje. Element ilayer poesduje iste argumnte kao i layer element. Ovi elementi su za sad podržani samo od strane Netscape Comunicatora.

 U browser-u:  Kod:Moj prvi

Layer <layer name="mojlayer" width=100px height=70px bgColor="yellow"><h3>Moj prvi Layer</h3></layer>

Layer-i u skriptu

Skript omogućava dinamičnost Layer-a, da bi pristupili layeru iz scripta potrebno je koristiti sledeću sintaksu:

document.layername

Pošto pristupite layeru možete da manipulišete njegovim atributima kako bi proizveli neki dinamički efekat. Sledeći primer omogućuje menjanje boje pozadine između plave i crvene, primer radi sa NC4+

 U browser-u:  Kod:<layer id="test" width=100px height=80px></layer><script language="JavaScript1.2">var thecolor=truedocument.test1.bgColor="blue"function changecol(){if (thecolor)document.test.bgColor="blue"elsedocument.test.bgColor="red"thecolor=!thecolorsetTimeout("changecol()",1000)}changecol()</script>

Layer poseduje mnoge osobine i metode a pristupa im se preko Layer Object ali podržana je samo od strane Netscape Comunicatora 4+.

DIV i SPAN element

Element DIV predstvlja block element tj. služi kao nosač informacija i ostalih HTML elementa. Pogodan je za pozicioniranje kroz CSS i raspoređivanje elemenata na strani. Pored zajedničkih atributa poseduje i atribut ALIGN sa vrednostima: left, right, center & justufy.

Center for Information Technology strana 38

Šta je HTML

Element SPAN zadje se tagovima <SPAN> </SPAN> tag a koristi se kao i DIV stim što je SPAN inline element tj. može da sadrži tekst i druge inline elemente. Najčešće se koristi pri primeni stila za sadržaj unutar ovog elementa i promene drugih zajedničkih atributa.

Ova dva elementa su veoma pogodna za kreiranje dinamičkog HTML.

Primer:  Pređite mišem preko teksta kako bi mu se promenila boja:

 U browser-u:  Kod:

:> Postavite kursor miša

ovde!?!<span id="sometext" onMouseover="sometext.style.color='red'"onMouseout="sometext.style.color='black'">:> Postavite kursor miša ovde!?!</span>

Interakcija između korisnika i web strane vrši se preko formi više o njima na sledećoj strani

ČEMU SLUŽE FORMULARI U HTML DOKUMENTIMA?Formulari omogćuju veći stepen veze između korisnika i web prezentacije. Ova opcija važi kada komuniciramo sa Web serverom, tako da je nemožemo isprobati poću Web browsera.

FORM element

Formulari se sastoje od definicije i polja. Polja služe za unos vrednosti, koje se prenose Web serveru klikom na dugme (obično se naziva SUBMIT) i tamo se obrađuju. Server zatim kao rezultat generiše novu stranicu koja obaveštava o obavljenoj akciji koja naravno može biti uspešna i neuspešna. Formulari rade preko CGI ( common gateway interface - "zajednićka veza" ) skripta. CGI skript je u suštini program napisan u C-u, Perl-u, VBasic-u itd. koji se nalazi na serveru i koji kada se pozove obavlja neku akciju.

 Tag  Argumenti  Opis

<form> </form>

methodactionnameaccept-charsetenctypeonsubmitonreset

Sadrži polja fromulara

Formular se zadaje tagom <form> </form> i sadrži polja preko kojih se vrši interakcija <INPUT>, <SELECT>, <BUTTON> & <TEXTAREA>.U definiciji formulara zadajemo naziv programa koji se izvršava kada pošaljemo podatke popounjavajući atribut action. On se obično nalazi u direktorijumu cgi-bin.

<form name="MojForm" action="/cgi-bin/prijava" method="post">

Pored POST metoda postoji i metod GET koji definišu kako server preuzima podatke a zadaju se kao vrednosti atributa method. Korišćenjem GET metoda podaci iz formulara se sadrže u adresi (URL) koja je navedena u action atributu. Broj i veličina podataka koji se prenose GET metodom je ograničena na maksimalnu dužinu adrese koju server i brovser podržavaju. Podaci

Center for Information Technology strana 39

Šta je HTML

iz forme se šalju serveru kao dugačka linija teksta url?name=value&name1=value1.., sa poljima i njihovim vrednostima (name i value), a sve zajedno spojeno znacima &. Ukoliko podaci sadrže ne ASCII karktere npr. © i veći su od 100 karaketera treba koristiti metod POST. Ako se koristi POST metod podaci iz formulara se šalju kao HTTP POST zahtev (request) a podaci se nalaze u telu zahteva. Specijalni znaci se u ovom slučaju konvertuju u numerički oblik tako da dobijena linija nije baš previše čitljiva, ali zato za svaki server postoje programi koji olakšavaju prepoznavanje pristiglih formulara. Podaci iz formulara se mogu poslati na e-mail ako se za akciju stavi mailto:mail@dresa.

Atribut ENCTYPE navodi sadržaj formulara koji se prenosi i ukoliko se ne navede vrednost atributa je application/x-www-form-urlencoded. Druge vrednosti se koriste samo kada se uključuje TYPE=file kod INPUT elementa, pri čemu vrednost ENCTYPE treba da bude multipart/form-data i METHOD mora biti post. Format "multipart/form-data requests" zahteva opisan je u RFC 1867.

Atribut ACCEPT-CHARSET navodi koji karkter-set je podržan. Ukoliko se ne navede njegova vrednost je nepoznata (UNKNOWN).

Tag FORM poseduje atribute za akcije u kome se navode klijentski skript. Akcije koje podržava su: ONSUBMIT, kada je formular poslat i ONRESET, kada je formular obrisan.

Pored ovih atributa podržani su i zajednički atributi.

INPUT element

Elemnt INPUT predstvlja polje formulara u kome se unose podaci koji se prenose i zadaje se tagom <INPUT>. Netscape browseri nedozvoljavaju da ovaj element bude izvan forme dok Microsoftovi browseri podržavaju.

 Tag  Tipovi  Opis

<input type=>

textpasswordhiddenradiocheckboxsubmitimageresetfile

Polja formulara

Postoji više tipova polja i oni su prikazani u sledećoj tabeli:

INPUT TIPOVI

 Tip polja  Argumenti  Opis

text

namevaluewidthmaxlengthaccsesskeytabindexdisabledreadonly

password namevalue

Center for Information Technology strana 40

Šta je HTML

widthmaxlengthaccsesskeytabindexdisabledreadonly

hidden namevalue

Koristi se da se postave skriveni od korisnika delovi formulara

radionamevaluedisabledreadonly

Radio 1

Radio 2

checkbox

namevaluecheckedaccsesskeytabindexdisabledreadonly

Check 1

Check 2

submit

valueaccsesskeytabindexdisabled

image

srcheightwidthaltnameborderaccsesskeytabindexdisabled

reset

valueaccsesskeytabindexdisabled

file

acceptaccsesskeytabindexdisabled

Sva polja moraju imati zadat NAME atribut i pored navednih podržavaju i zajedniče atribute.

Primer prenosa fajlova HTTP File UploadPreko forme možete zatražiti fajl koji će se preneti preko formulara. U sledećem primeru je opisan postupak:

<FORM ENCTYPE="multipart/form-data" ACTION="_URL_" METHOD=POST> Pošalji fajl: <INPUT NAME="fajl" TYPE="file"> <INPUT TYPE="submit" VALUE="Pošalji fajl"> </FORM>

Center for Information Technology strana 41

Šta je HTML

Pošalji fajl:

FILE polje podržavaju Netscape and Internet Explorer (od v4.0). FILE polje podržava atribut ACCEPT u kome se navodi tip fajla (MIME tip) koji se prenosi.

SELECT element

Predstvalja elemnt forme tkz. "combobox" a zadaje se tagom SELECT koji omogućava da se izabere opcija koja se zadaj tagom OPTION.

 Tag  Argumenti  Opis

<select> </select>

namesizemultipileaccesskeyaligntabindexdisabled

Kreira padajuće menije. koristi se zajedno sa option

Pored zajedničkih atributa prihvata i atribut MULTIPILE koji omogućava višestruku selekciju i koji nema vrednosti.

OPTION element

Pomoću ovog elementa navodimo opcije koje se biraju iz SELECT elementa.

 Tag  Argumenti  Opis

<option>selectednamevalue

Pored zajedničkih atributa prihvata atribut SELECTED koji navodi koja od opcija se prikazuje u SELECT elementu tj. koji je odamh po učitavanju formulara selektiran, VALUE u kome se navodi vrednost selekcije.

TEXTAREA element

Pomoću ovog elementa možemo da unosimo tekst u više redova. Element se navodi tagovima <TEXTAREA> </TEXTAREA> i nesme da sadrži ostale HTML elemente.

 Tag  Argumenti  Opis

<textarea> </textarea>

namerowscolswrapaccsesskeytabindexreadonlydisabled

Pored zajedničkih atributa prihvata atribut ROW i COLS pomoću kojih se navodi broj redova i kolona.

Center for Information Technology strana 42

Šta je HTML

BUTTON element

Elemnt se zadaje tagom <BUTTON> </BUTTON> i definiše SUBMIT ,RESET ili PUSH dugme. Za razliku od INPUT TYPE=BUTTON može da se nalazi van forme i da sadrži sliku. Ovaj element je podržan samo od strane Internet Explorer-a.

 Tag  Argumenti  Opis

<button> </button>

namevaluetypeaccesskeydisabledtabindex

MOJE DUGE

Pored zajedničkih atributa prihvata atribut DISEBLED koji blokira dugme kao i ACCESSKEY koji omogućava da mu se pristupi i preko tastature komnacijom ALT plus slovo koje se navodi kao vrednost ovog atributa.

<BUTTON ACCESSKEY="P">Pošalji <IMG SRC="_slika_.gif" ALT="&#10004;"></BUTTON>

Pošalji

Od događaja za klijentski-skript podržava ONFOCUS, kada je elemnt primio fokus i ONBLUR kada je element izgubio fokus.

FIELDSET I LEGEND elementi

Novi element u HTML 4.0 specifikaciji je <FIELDSET> a podržan je samo od strane Internet Explorer 4+. On obezbeđuje okvir oko HTML elemenata koji se nalaze između tagova <FIELDSET> i </FIELDSET>. On zahteva da prvi element koji sadrži bude <LEGEND> tag koji obezbeđuje naslov okvira.

<FIELDSET ID="fld1"><LEGEND ALIGN="left">Izaberite boju</LEGEND><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%"><TR><TD><LABEL FOR="radRed">Red : </LABEL></TD><TD><INPUT TYPE="radio" NAME="Colour" VALUE="Red" ID="radRed"></TD><TD><LABEL FOR="radOrange">Orange : </LABEL></TD><TD><INPUT TYPE="radio" NAME="Colour" VALUE="Orange" ID="radOrange"></TD></TR>. . .</TABLE></FIELDSET>

Izaberite boju: Red : Orange : Green : Purple : Blue : Aqua :

Primer upotrebe formi

Center for Information Technology strana 43

Šta je HTML

<form name="pisi" enctype="text/plain" action="mailto:[email protected]?subject=PismoSkola" method="post">Prezime i ime: <input form" name="ime"><br>Tip komentara:<br>Kritika <input checked type="radio" value="kritika" name="tip">Pohvala <input type="radio" value="pohvala" name="tip">Sugestija <input type="radio" value="sugestija" name="tip"><br>Izaberite sajt na koji se odnosi vaš komenatr:<br><select name="sajt" ><option value="skola" selected> Skola </option><option value="radjevina"> Radjevina </option><option value="wa"> Web Autor </option></select><br>Komentar: <br><textarea name="komentar" rows="5" cols="30" wrap="virtual">Unesite vaš komentar</textarea><br>Ukoliko posedujete unesite vaše:<br>Korisničko ime:<input name="korisnik"><br>Lozinka:<input type="password" name="pwd"><br><input type="submit" value="Posalji"><br><input type="reset" value="Obrisi"></form>

 U browser-u:

Prezime i ime: Tip komentara:

Kritika

Pohvala

Sugestija

Izaberite sajt na koji se odnosi vaš komenatr: Komentar:

Ukoliko posedujete unesite vaše:

Korisničko ime:

Lozinka:

Center for Information Technology strana 44

Šta je HTML

Validnost unešenih vrednosti u polja formulara se proveravaju obično JavaScript funkcijama ili programiranjem u Javi i slično.

I na kraju slede frjmovi tj. okviri, više o njima na sledećoj strani.

FAMA O FREJMOVIMAFrejmovi omogućuju deljenje ekrana browsera na više delova - okvira u kojima se prikaziuju različiti dokumenti odjednom. Ekran se može podeliti po vertikali ili po horizontali, i u svaki okvir se prikazuje zasebni HTML dokument.

FRAMESET, FRAME i NOFRAME element

Frejmove je izmislio Netscape podržavši ih u svom brwseru od verzije 2.0 a služe da se definišu elementi stranice koji bi trebalo da su stalno na ekranu (naslovi, sadržaji, navigacije itd.). Frejmove treba koristiti samo kada treba organizovati hijerarhijski veliku količinu podataka i obezbediti laku navigaciju između stranica.

 Tag  Argumenti  Opis

<frameset> </frameset>

rowscolsonloadonunload

Vrši deljenje ekrana. Sadrži FRAME komandu i opciono NOFRAME komadu

<FRAME>

namesrclongdescframebordermarginwidthmarginheightnoresizescroling

Okviri

<NOFRAME> </NOFRAME> Definiše prikaz bez okvira

FRAMESET zamenjuje BODY tag tako da odmah sledi posle HEAD taga.

<HTML><HEAD></HEAD><FRAMESET>...</FRAMESET></HTML>

Unutar FRAMESET elementa možete zadati koliko hoćete redova (ROWS) i/ili kolona (COLS) kao i veličinu okvira:

<FRAMESET ROWS="50,*">

Prethodni kod deli ekran po visini na prvih 50 tačka i ostatak (Zadavanje u pikselima koristite prilikom prikaza slika).

Center for Information Technology strana 45

Šta je HTML

<FRAMESET COLS="30%,70%">

Prethodni kod deli ekran po širini na dva okvira zadatih relativnim širinama ekrana. Frejmovi mogu da se prikazuju i jedan u drugom ali treba biti obazriv. Stranice retko dele u više od 3-4 frejma. U okviru FRAMESET taga definišu se atributi svagog okvira pomoću FRAME elementa :

<FRAMESET COLS="30%,70%"> <FRAME SRC="zaglavlje.htm" NAME=zaglavlje SCROLLING="NO" FRAMEBORDER=0> <FRAME SRC="radni.htm" NAME=radni SCROLLING="AUTO" MARGINWIDTH=0></FRAMESET>

Pomoću SRC atributa u okviru frejma definišete HTML dokument koji će se prikazati u okviru. Linkovanje se vrši na sledeći način, jer je potrebno odrediti u koji okvir se šalje dokument:

<a href="strana.htm" TARGET="radni">

Zato je potrbno definisati ime (NAME) u okviru FRAME taga.

SCROLLING atribut u okviru FRAME definiše skrolvanje datog okvira i ona može imati vrednosti yes, no & auto. Ukoliko želite okvire bez ivica postavite atribut FRAMEBORDER na nulu, ukoliko se ne navede podrazumevana vrdnost je 1.

NORESIZE atribut zabranjuje korisnicima da povećavaju/smanjuju frejm, ali ovaj argument ne treba korsititi.

MARGINWIDTH & MARGINHEIGHT atributi definišu broj piksela koji se koriste za leve i desne margine kao i gornje/donje margine u okviru. Njihova vrednost mora biti veća od jednog piksela.

Pomoću NOFRAMES taga u okviru FRAMESET tagova definišete šta će posetilac da vidi u browserima koji ne podržavaju frejmove. Uvek treba koristi ovaj tag i omogućiti pregled stranica bez frejmova.

<FRAMESET ROWS="*,100"> <FRAMESET COLS="40%,*"> <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu"> <FRAME NAME="Content" SRC="main.html" TITLE="Content"> </FRAMESET> <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement"> <NOFRAMES> <BODY> <H1>Table of Contents</H1> <UL> <LI> <A HREF="reference/html40/">HTML 4.0 Reference</A> </LI> <LI> <A HREF="reference/wilbur/">HTML 3.2 Reference</A> </LI> <LI> <A HREF="reference/css/">CSS Guide</A> </LI> </UL> <P> <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?"> </P>

Center for Information Technology strana 46

Šta je HTML

</BODY> </NOFRAMES></FRAMESET>

IFRAME element

Internet Explorer od verzije 3 omogućava korišćenje lebdećih frejmova. Slični su standarnim frejmovima, stim što mogu da se nalaze bilo gde u HTML dokumentu zajedno sa ostalim HTML elementima. Lebdeći frjmovi zadaju se tagovima <IFRAME> ... </IFRAME>. Svaki HTML element koji se nalazi između ovih frejmova biće prikazn u browserima koji ne podržavaju IFRAME element, dok HTML dokument koji je navedn u okviru <IFRAME> taga biće prikaz ukoliko ga podržava.

<IFRAME NAME="content_frame" width="488" height="244" SRC="welcome.htm">Ovaj sajt koristi lebdeće okvire</IFRAME>

Prethodni HTML kod prikazeće okvir pod imenom "content_frame" i u njemu HTML dokument "content_frame" u Internet Explorer-u, dok tekst 'Ovaj sajt koristi lebdeće okvire' u svakom drugom browseru.

Druga značajna razlika u odnosu na standardne okvire je u tome što lebdeći okviri podržavaju atribute WIDTH, HEIGHT kao i ostale atribute kao kod <IMG> taga kao što su HSPACE, VSPACE i ALIGN atributi, kako bi se postvila veličina i položaj okvira u HTML dokumentu. Što se tiče refernciranje koriste istu tehniku kao i stndrdni okviri korišćenjem atributa TARGET kod A elementa i NAME atributa kod okvira.

Indeks svih HTML elementa nalazi se na sledećoj strani.

INDEKS HTML ELEMENATAA  B  C  D  E  F  H  I  K  L  M  N  O  P  Q  S  T  U  W  X 

<!--<!--#<!DOCTYPE>

A

<A><ACRONYM><ADDRESS><APPLET><AREA>

B

<B><BASE><BASEFONT><BGSOUND><BIG><BLINK>

Center for Information Technology strana 47

Šta je HTML

<BLOCKQUOTE><BODY><BR><BUTTON>

C

<CAPTION><CENTER><CITE><CODE><COL><COLGROUP><COMMENT>

D

<DD><DEL><DFN><DIR><DIV><DL><DT>

E

<EM><EMBED>

F

<FIELDSET><FONT><FORM><FRAME><FRAMESET>

H

<HEAD><HR><HTML><H x >

I

<I><IFRAME><ILAYER><IMG><INPUT><INS><ISINDEX>

Center for Information Technology strana 48