internet programiranje, xhtml i css

Internet Programiranje

Sadržaj predmeta Cilj predmeta jeste dizajn dinamičkih

veb strana koje uključuju interakciju korisnika.

Alati koji će se koristiti: XHTML i CSS JavaScript PHP i MySQL

Raspored predmeta Prve dve nedelje po 4 časa predavanja – XHTML i

CSS Druge dve nedelje po 3 sata vežbi u tri grupe na

računarima u laboratoriji paviljona II – XHTML i CSS

Treće dve nedelje predavanja – JavaScript Četvrte dve nedelje po 3 sata vežbi u tri grupe u

labu paviljona II – Javascript Naredne tri nedelje po 4 časa predavanja – PHP i

MySQL Poslednje tri nedelje po 3 sata vežbi u labu

paviljona II – PHP i MySQL

Polaganje predmeta Iz svakog modula, XHTML, JavaScript i

PHP, se dobija po 20 poena na vežbama. Za XHTML i JavaScript obavezan je jedan

blok od 3 sata vežbi, a za PHP su obavezna dva bloka od 3 sata, samo ako su u okviru ovih blokova završeni zadati projekti, uz potvrdu asistenta.

Vežbe se mogu odrađivati samo uz lekarsko opravdanje.

Ostalih 40 poena dobija se na ispitu koji se polaže uz dozvoljenu literaturu.

HTML, XHTML & CSS

Šta je HTML? HTML (HyperText Markup Language) je

veoma jednostavan jezik koji služi za prikazivanje veb strana.

HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u određenom direktorijumu servera vezanog na Internet, što ih čini dostupnim na vebu.

Pomoću HTML jezika se generišu dokumenti tipa hipertekst.

Hipertekst ... je tekst koji sadrži veze ili linkove ka

drugim dokumentima ili na samog sebe. Hipertekst je skup stranica, međusobno

povezanih linkovima koje su umetnute u stranice. Na ove linkove se može kliknuti.

Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način.

Jezici za opis hiperteksta Najznačajniji jezici koji opisuju vrste

hipertekst: SGML (Standard Generalized Markup

Language) XML (Extensible Markup Language) HTML (HyperText Markup Language) XHTML (Expandable HTML) CSS (Cascading Style Sheets)

Standardizacija U prvo vreme HTML se razvijao na adhok način i

bio je interpretiran od strane raznih brauzera na različite načine.

Standardizacijom se bavi W3C (WWW Consortium), www.w3c.org.

Standardizacija je počela sa HTML 3.2 HTML je modifikovan tako da odgovara sintaksi

XML-a -> XHTML. Prema standardu XHTML se koristi zajedno sa

CSS čime se formatiranje maksimalno izdavaja iz teksta.

Odnos brauzera i standarda se može naći na www.webstandards.org.

HTML vs. XHTML HTML 4.0 = XHTML 1.0 XHTML je standard koga brauzeri po

dogovoru moraju da primenjuju. XHTML je striktniji u pogledu sintakse što

malo otežava programiranje. XHTML sa CSS jezikom olakšavaju dizajn i

ažuriranje velikih veb strana. XHTML i CSS bolje podržavaju fleksibilni

prikaz veb strana. Stari brauzeri ne podržavaju uvek XHTML.

HTML vs. XHTML XHTML je osetljiv na veličinu slova. Elementi,

atributi i njihove vrednosti su pisane malim slovima.

XHTML zahteva završetak komandi. XHTML zahteva da atributi uvek budu pod

navodnicima, a HTML samo kada sadrže specijalne znake.

XHTML zahteva naredbu DOCTYPE u kojoj se specificira varijanta standarda.

Elementi u HTML-a se opisuju atributima (eng. attributes), a u XHTML-u (properties) osobinama. Neki atributi su potisnuti u XHTML-u.

Reference E. Castro, HTML for the World Wide Web with

XHTML and CSS, Fifth Edition, Peachpit Press, 2003.

http://www.w3.org/TR/1999/REC-html401-19991224/

http://www.w3.org/TR/xhtml1/ http://www.w3.org/TR/html4/index/elements.html http://www.w3.org/TR/REC-html40/index/attribute

s.html http://www.w3.org/TR/CSS2/propidx.html http://www.webstandards.org/learn/reference/cha

rts/entities/

Alati i (X)HTML Za generisanje (X)HTML stranice potreban

je najobičniji tekst editor, na primer Notepad. Nalazi se u Start meniju pod Programs -> Accessories.

U MS Word-u, koristiti Save As Plain Text. Ekstenzija mora biti html Mogu se koristiti i specijalni alati, na primer

WYSIWYG editori: MS Expression Web, Adobe DreamWeaver.

Stranica se može videti u okviru veb brouzera: Mozilla Firefox, Netscape Navigator ili Internet Explorer.

Važan štos Lako se može videti (X)HTML fajl bilo

koje veb strane pomoću brauzera. Mozilla Firefox: View -> Page Source Internet Explorer: View -> Source

DOCTYPE komanda DOCTYPE komanda određuje verziju jezika i

njegovu varijantu i prva je. Varijante su:

Strict Transitional Frameset

Primer:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Pre DOCTYPE komande često ide i XML komanda:<?xml version="1.0"?>

Pojam Taga (X)HTML komande se pišu u vidu tzv.

tagova. Jedan tag je ustvari komanda koja

govori brauzeru šta i kako da uradi tj. na koji način da prikaže sadržaj vaše stranice.

Tagovi Tagovi se pišu unutar oznaka "<" i ">" (bez

znakova navoda) npr: <html>. Ovaj tag se nalazi na početku svakog HTML

dokumenta i govori brouzeru da je fajl koji je upravo počeo da učitava HTML dokument i da kao takvog treba i da ga prikaže.

Većina tagova ima i početni i završni tag. Završni tag se dobija dodavanjem znaka "/" i označava mesto na kom prestaje dejstvo početnog taga, npr: </html>.

Ovaj tag govori browseru da je to kraj (X)HTML dokumenta.

Tagovi Prosti tagovi za opisivanje jednostavnih

elemenata logičke strukture. Oblika su: <x>. U XHTML-u je obavezno da se završe kosom crtom: <x />.

Složeni tagovi su zagrade oblika <x> y </x> kojima je opisan izgled dela teksta y.

Moguće je koristiti atribute u okviru taga kojima se dodeljuju određene vrednosti:

<x a1=v1 a2=v2 ...> y </x>. U XHTML-u elementi (x), atributi (a1,a2), i

njihove predefinisane vrednosti (v1,v2) su malim slovima. Vrednosti atributa su uvek pod navodnicima.

Struktura (X)HTML stranice Minimalna struktura (X)HTML-dokumenta

obuhvata tagove: <html>, </html> - zagrade (X)HTML teksta; <head>, </head> - zagrade zaglavlja, sadrži

meta-definicije (X)HTML dokumenta; <title>, </title> - zagrade za naziv (X)HTML dokumenta i <body>, </body> - zagrade teksta (X)HTML

dokumenta.

Jezik veb strane U html tagu se specificira Namespace i

jezik: <html

xmlns='http://www.w3.org/1999/xhtml' xml:lang='sr' lang='sr'>

Zaglavlje (X)HTML dokumenta Sve ono što se napiše u zaglavlju dokumenta

neće se prikazati u prozoru brauzera već obično služi samo da pruži neke informacije o stranici.

U zaglavlju se specificira azbuka a takođe i naslov veb strane koji gledaju pretraživači:

<head><meta http-equiv="content-type" content="text/html; charset=UTF-8“/><title>Google</title></head>

Pri čuvanju dokumenta treba izabrati Encoding UTF-8

Telo (X)HTML dokumenta Sve ono što je napisano između

tagova <body> i </body> predstavlja telo dokumenta

Telo dokumenta pojaviće se kao sadržaj prezentacije u prozoru brauzera.

Izgled straniceDOCTYPE…<html><head><title> Ovde je naziv prezentacije </title></head><body> Ovde se unosi sve ono sto želite da se vidi u

prezentaciji </body></html>

Komentar Dodatna opcija omogućava da se

obeleži komentar u (X)HTML obeleženom tekstu koji se neće videti u vizuelizaciji dokumenta.

Na primer:

Naslovi Naslovi (engl. headers) se kodiraju

prema relativnoj dubini ciframa od 1 do 6. Tag za naslov ima opšti oblik:

<hn> naslovNivoa_n </hn> gde n uzima vrednosti od 1 do 6.

Naslovi <h1> Naslov H1 </h1> <h2> Naslov H2 </h2> <h3> Naslov H3 </h3>

Navedeni kod se na (X)HTML stranici prikazuje na sledeći način:

Naslov H1 Naslov H2Naslov H3

Tagovi za formatiranje

Bold <b>Bold</b>

Strong <strong>Strong</strong>

Italic <i>Italic</i>

Underline <u>Underline</u> (potisnut)

Strike <strike>Strike</strike> (potisnut)

H2O H<sub>2</sub>O

23=8 2<sup>3</sup>=8

Paragraf Tag paragrafa je <p>. Paragraf počinje u

novom redu. levo

centrirano desno

HTML kod koji prikazuje gornji primer je:<p align="left"> levo </p><p align="center"> centrirano </p><p align="right"> desno </p> Inače atribut align je kod XHTML-a potisnut

Parcijalizacija teksta Tekst se može podeliti na blokove pomoću taga

<div>. Blok počinje u novom redu, kao i tekst posle

bloka. Atributi ovog taga su class i id, i označavaju

klasu određenog bloka, i partikularni blok da bi se na njega mogao aplicirati određeni stil.

<div><p> Paragraf 1 </p><p> Paragraf 2 </p></div>

Izdvajanje teksta Izdvajanje teksta koji ne počinje u novom

redu, se vrši pomoću taga <span>. Tab span ima iste atribute kao tag div, tj.

class i id. Tekst na srpskom <span class=engl> text

in English </span> nastavak teksta na srpskom.

XHTML Razmak: &#160 xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx

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

Paragraf se može uvući pomoću sledećeg koda:<p> xxxx xxxx xxxx xxxx xxxx

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

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

xxxxxxxxxxxxx xxxxxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. </p>

HTML Razmak: &nbsp xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx

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

Paragraf se može uvući pomoću sledećeg koda:<p> xxxx xxxx xxxx xxxx xxxx xxxx

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

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

xxxxxxxxxxxxx xxxxxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. </p>

Automatski prelom linije <html><head><title> Rad sa prelomom linije </title></head><body><h1>Come Scroll with me, away to the right, as I

list out all of the long answers to the meaning of life accessible only to those that can scroll,scroll, scroll...</h1>

</body></html>

Prelom linije u (X)HTML-u

<html><head><title> Rad sa prelomom linije </title></head><body><h1>Come Scroll with me, away to the right, as I

list out all of the long <br /> answers to the meaning of life accessible only to those that can scroll,scroll, scroll...</h1>

</body></html>

Nema preloma linije u HTML-u (potisnut) <html><head><title> Rad sa prelomom linije </title></head><body><nobr><h1>Come Scroll with me, away to the

right, as I list out all of the long answers to the meaning of life accessible only to those that can scroll,scroll, scroll...</h1></nobr>

</body></html>

Atribut title Atribut title se može dodeliti bilo kom delu

veb strane, i njegova vrednost se pojavljuje iznad kursora kada korisnik pređe preko tog dela strane mišem.

Primer: <div id=“sad” title=“Sadržaj”> Uvod

<br /> Razrada <br /> Zaključak </div>

Ubacivanje slika U okviru (X)HTML stranice slika se

prikazuje pomoću <img> taga. Ovaj tag mora imati bar jedan atribut - src

atribut koji definiše naziv, i eventualno lokaciju, grafičkog fajla.

Da bi se promenila originalna veličina slike, željena veličina se može definisati pomoću dva atributa: height i width.<img src="osam.gif" height="50%” width="50%” />

Pozicioniranje slike u HTML-u Pozicioniranje se vršilo u HTML-u pomoću

atributa align, koji je potisnut u XHTML-u. Vrednosti atributa align mogu biti:

left - postavlja sliku uz levu marginu:

<img src="osam.gif" align="left” /> right - postavlja sliku uz desnu marginu:

<img src="osam.gif" align="right“ /> top - poravnava vrh slike sa vrhom teksta u paragrafu u

kome se nalazi:

<img src="osam.gif" align="top” /> bottom - poravnava donjom ivicom sa donjom ivicom

teksta:

Pozicioniranje slike u HTML-u Vrednosti atributa align mogu biti:

middle - postavlja sliku tako je na donjoj ivici slova na sredini teksta:

<img src="osam.gif" align="middle"> absmiddle - postavlja sliku tako da se sredina slike i

sredina teksta poklapaju:<img src="osam.gif" align="absmiddle">

Izgled slike u HTML-u Prazan prostor između slike i okolnog teksta, ili nekih

drugih elemenata stranice, može se definisati pomoću dva atributa: hspace i vspace. Vrednost ova dva atributa se zadaje u pikselima. Ovo su potisnuti atributi.<img src="osam.gif" hspace="50px" vspace="50">

U okviru stranice može se definisati i debljina granice pomoću atributa border čija se vrednost zadaje u pikselima. Ovo je potisnut atribut.<img src="osam.gif" border="5">

alt atribut će u slučaju da čitač korisnika stranice iz bilo kog razloga ne učita sliku, na onom mestu gde bi trebalo da bude slika prikazati tekst koji predstavlja vrednost ovog atributa.<img src="osam.gif" alt="Broj osam">

Linkovi Veze između različitih stranica se nazivaju linkovi

ili hiperveze. One omogućavaju jednostavan prelazak sa jednog mesta na stranici na drugo mesto unutar same stranice ili na sasvim novoj stranici.

Linkovi koji se mogu definisati u okviru jedne HTML stranice mogu se podeliti na tri grupe: krajnja pozicija se nalazi na stranici koja je u okviru iste

aplikacije i nalazi se na istom serveru gde i stranica sa polaznom pozicijom,

krajnja pozicija se nalazi na stranici koja ne pripada istoj aplikaciji, već se nalazi na drugom serveru,

krajnja pozicija pripada istoj stranici kao i polazna pozicija.

Linkovi Za sve linkove definicija početne pozicije se

dobija korišćenjem taga <a>. Ovo je složeni tag. Sintaksa ovog taga podrazumeva da se u okviru

polazne pozicije opišu: fizička pozicija polazne pozicije i fizička lokacija krajnje pozicije.

Polazna pozicija označava na stranici mesto sa koga se prelazi na neki drugi deo te ili druge stranice i definiše se pomoću atributa href:

<a href=“imeKrajnjePozicije”> polaznaPozicija </a>

Link na stranicu u okviru istog servera Najjednostavniji slučaj rada sa linkovima

je prelazak na stranicu u okviru istog servera.

Kod ove vrste linkova koristi se tag <a> sa atributom href i nazivom stranice do koje se želi da se napravi veza.<a href="Prva.html"> Veza do stranice Prva.html </a>

Link na stranicu u okviru istog servera Stranica sa krajnjom pozicijom osim što pripada istoj

aplikaciji, odnosno serveru, u opštem slučaju ne mora da se i fizički nalazi u istom direktorijumu gde i stranica sa polaznom pozicijom.

Postoje dva rešenja ovog problema, a to je rad sa apsolutnim i relativnim putanjama

Korišćenje apsolutnih putanja podrazumeva u okviru href atributa navođenje pune putanje do stranice sa krajnjom pozicijom, na primer href=”c:\Aplikacije\Poslovanje\Klijent\Prva.html”

Korišćenje relativnih putanja je mnogo podesnije, jer se zasniva na kretanju u odnosu na direktorijum stranice sa polaznom pozicijom.

Link na stranicu u okviru istog servera Neka direktorijum X sadrži stranice 1 i 2, Y stranicu 3, a Z

stranicu 4 Za stranicu 1,

relativna adresa stranice 2 je “2.html”; relativna adresa stranice 3 je “Y/3.html”; relativna adresa stranice 4 je “Y/Z/4.html”;

Za stranicu 3, relativna adresa stranice 2 je “../2.html” (simbol .. označava

direktorijum iznad direktorijuma gde se nalazi stranica sa polaznom pozicijom);

relativna adresa stranice 4 je “Z/4.html”; Za stranicu 4,

relativna adresa stranice 2 je “../../2.html”; relativna adresa stranice 3 je “../3.html”.

Link na stranicu izvan servera Da bi se pristupilo stranici izvan servera

potrebno je navesti celu veb adresu te stranice. Opšti oblik adrese koja se pojavljuje kao vrednost href atributa jesema://domenServera [:port]/putanja/ imeDokumenta

Primer:<a href="http://www.etf.rs/"> Link ka

Elektrotehničkom fakultetu </a>

Link na istu stranicu Za ovu vrstu linkova prvo se napravi oznaka na

mestu na stranici gde se nalazi krajnja pozicijia. Oznaka se dobija pomoću atributa name u <a> tagu.

Na polaznoj poziciji navodi se tag sa imenom krajnje pozicije:<a href=“#imeKrajnjePozicije"> polaznaPozicija </a>

Na krajnjoj poziciji se navodi tag koji definiše ime krajnje pozicije: <a id="imeKrajnjePozicije"> krajnjaPozicija </a>

Link na istu (X)HTML stranicu<html> <head><title> Link u okviru iste stranice</title></head> <h2>Programiranja </h2> <p> <a href="#html"> Web i jezik HTML </a> </p> <p> <a href="#java"> Programski jezik Java </a></p> <p> <a href="#uvodc"> Uvod u C</a></p><h3> <a id="html"> Web i jezik HTML</a> </h3>

<H3> <A id="java"> Programski jezik Java </A> </H3><p>................<br />................</p><p>................<br />................</p><p>................<br />................</p>

</body></html>

Link na određenu poziciju Ako se želi da se uspostavi veza sa nekom dugom

stranicom, ali ne sa početkom te stranice, već nekim drugim delom, potrebno je koristiti i prvu i drugu vrstu linkova.

Opet se definiše mesto odakle se želi nastaviti sa pregledom pomoću atributa href u <a> tagu sa navođenjem imena stranice, ali se dodaje deo #imeKrajnjePozicije, da bi se pozicioniralo na krajnju poziciju.

<a href=“imeStranice#imeKrajnjePozicije"> polaznaPozicija </a>

Slika kao link Slika u (X)HTML dokumentu može

predstavljati i polazni čvor u hipervezi. Krajnja adresa se tada navodi kao kod običnog linka, a umesto teksta koji se može aktivirati navodi se tag img.

<a href=“imeKrajnjePozicije"> tagSaSlikom </a>

Primer:<a href="Primer.html"><img

src=“slike/osam.gif"></a>

Link za elektronsku poštu Linkovi se mogu iskoristiti i za pisanje nove mail

poruke pomoću default programa za elektronsku poštu

<a href="mailto:aleksandra@etf.rs"> Pošaljite e-mail poruku! </a>

Pored adrese na koju se želi poslati poruka mogu se podesiti još neki parametri, kao što su naslov ili tekst poruke.

<a href="mailto:aleksandra@etf.rs?subject=Primer poruke&body=Napišite vaš komentar"> Pošaljite e-mail poruku! </a>

Povezivanje CSS stilova i delova XHTML dokumenta XHTML tekst ima hijerarhijsku strukturu. Pomoću imena elemenata, klasa

elemenata ili ID-ova elemenata se mogu definisati grupe elemenata ili pojedinačni elementi.

Pomoću klasa se mogu definisati grupe elemenata.

Grupama elemenata se može pridružiti određeni stil.

Neke osobine stilova se nasleđuju sa elementa roditelja na element dete.

Pridruživanje stila Opšta sintaksa:imeGrupe {a1:v1;a2:v2;…} imeGrupe je CSS selektor koji određuje grupu ili

pojedinačni element, koji se gradi na različite načine:

imeElementa imeElementaDetetaimeElementa#IDElementaimeElementa.klasaElementaimeElemenata[imeAtributa=“vrednostAtributa”] Ovi načini se mogu na različite načine

kombinovati. Kao i ranije a1,a2,... su atributi ili osobine, a

v1,v2,... Njihove vrednosti.

Pridruživanje stila: Primeri Primeri:h2 {color:red;}p.citati {color:red; font-size:small;}.citati {color:red;} Primer stila svih potomaka:div#gaudi p {color:red;} Primer stila dece:div#gaudi > p {color:red;}

Koristan primer Pseudo klasa zavisi od korisničkih aktivnosti:imeElementa: pseudoKlasa {a1:b1; a2:b2;…} Stanje linka koje zavisi od aktivnosti korisnika se

može opisati pomoću pseudo-klase:a:link{color:red;} a:visited{color:yellow;}a:hover{color:green;} – prešli mišema:active{color:blue;} itd.

Apliciranje stilova Stilovi mogu biti definisani u eksternim

fajlovima koji se pozivaju u okviru zaglavlja pomoću taga <link>, ili interno u okviru zaglavlja pomoću taga <style>.

Atributi taga <link> su rel koji određuje da li je u pitanju glavni ili alternativni stil, type koji ima vrednost text/css, i href koji ima vrednost fajla sa stilom uključujući i njegovu lokaciju.

Atribut taga <style> je type. Fajl sa stilom se može u okviru ovog taga ubaciti pomoću naredbe @import koju ne prepoznaju stariji brauzeri.

Stilovi se mogu aplicirati i u okviru tagova.

Apliciranje stilova: primeri Primer apliciranja eksternog fajla sa

stilom:<head>

</head>

Apliciranje stilova: primeri Naredbu @import ne razumeju stariji

brauzeri, i može se koristiti da se koriste dva fajla sa stilom. Mogu se koristiti i u okviru fajlova sa stilom:

<head><meta http-equiv=“content-type” content=“text/html;charset=utf-8”/><title> Primer stranice sa internim stilom </title>

Apliciranje stilova: primeri Primer internog apliciranja stila:<head>

Apliciranje stilova: primeri Primer internog apliciranja stila u

mešanoj HTML&XHTML varijanti: <img src="http://www.etf.rs/images/

ETF_Images/naslovna.jpg" alt=“ETF Beograd” width=“250px” height=“160px” style=“border: solid;” align=“left” />

Prioriteti stilova Prioriteti stilova, od najvišeg ka

najnižem: stavka korisničkog stila koja se

završava sa !important stavka autorovog stila koja se završava

sa !important stavka autorovog stila stavka korisničkog stila stavka defolt stila

Određivanje stila kada dve stavke imaju isti prioritet Bira se stavka prema nivou specifičnosti koji je

predstavljen kao abcd. Bira se stil sa većim nivoom. a=1 ako stavka potiče iz atributa style u okviru taga,

inače je 0. b je broj id-ova u specifikaciji. c je broj atributa u specifikaciji. d je broj elemenata u specifikaciji.

Ako dve stavke imaju isti prioritet i nivo specifičnosti bira se ona koja se kasnije pojavljuje.

Izuzetaka ima kod brauzera, pri prikazivanju: hiperveza kada su setovane korisničke preference, lista itd.

Formatiranje teksta Sintaksa za formatiranje teksta se

razlikuje u HTML-u i XHTML-u. Brauzeri podržavaju oba formata, ali

je preporučivo da se pređe na XHTML jer je on standard.

Tag <font> iz HTML-a je potisnut

Fontovi u HTML-u Primeri: <font face="Comic Sans MS"> Ovde

dodje vaš tekst. </font><font size=“5” color="#ff0000” face

=“Arial”> Ovde ide vaš tekst. </font>

Fontovi u HTML-u

Fontovi u XHTML-u Podsobine osobine font su: font-style, font-

weight, font-variant, font-size, line-height, font-family.

Ako se koristi osobina font, sve vrednosti mogu da se nabroje bez partikalrnih atributa, pri čemu su veličina fonta i visina linije razdvojeni /.

Vrednosti font-style podosobina su italic, oblique, normal; vrednosti font-weight su bold, bolder, lighter ili broj 100-900; vrednosti font-variant su smallcaps, normal; vrednosti font-size su u pikselima, relativne, ili opisne: small, medium, large; vrednosti line-height su relativne u odnosu na tekst ili apsolutne; font-family može imati više vrednosti …

Fontovi u XHTML-u: Primeri Primeri:h1, h2 {font-size: 20px;}p {font: 12px/150% “Verdana”

“Helvetica”;}.citati {font-style: italic;font-

weight:bold;}

Ugrađivanje fontova u XHTML Mogu se koristiti novi fontovi pomoću komande

@font-face čija će specifikacija, uključujući i njenu lokaciju, biti uključena u definiciju fonta.

Primer (radi na Mozili):<style type=“text/css” media=“screen, print”> @font-face { font-family: "Vera Serif Bold"; src:

url(“http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf”); }

body { font-family: “Vera Serif Bold”, serif; } </style>

Boje u (X)HTML-u Svi elementi stranice rad sa bojama

organizuju identično Preko predefinisanog engleskog

naziva boje (npr. "yellow" za žutu boju)

Ili preko heksadecimalne RGB vrednosti ispred koje obavezno treba staviti simbol # (npr. #ffff00)

Boja elementa u HTML-u Boja npr. pozadine se određuje atributom

bgcolor u okviru <body> taga. U slučaju da se prilikom navođenja taga

body izostave opisani atributi, čitač im dodeljuje predefinisane vrednosti.

Primeri:<body bgcolor="#ffff00“ > <body bgcolor="yellow“ >

Boja teksta u HTML-u Pored pozadine, može se menjati i boja teksta,

pomoću atributa text. Primeri:<body bgcolor="#ffff00" text="#008000">

ili <body bgcolor="#ffff00" text="green">

ili<body bgcolor="yellow" text="#008000">

ili<body bgcolor="yellow" text="green">

Slika pozadine u HTML-u Kao i promena boje, pozadina u obliku slike se

definiše pomoću odgovarajućeg atributa u body tagu. Atribut je u ovom slučaju background.

Na primer, ako se želi da se kao pozadina stavi slika "pozadina1.jpg" tada će odgovarajući tag izgledati: <body background="pozadina1.jpg">

Pri definisanju pozadine u obliku slike, dobra praksa je da se definiše i bgcolor atribut.<body background="pozadina1.jpg" bgcolor="#0000ff">

Boja i slika pozadine u XHTML-u Boja i slika pozadine u XHTML-u se postižu

pomoću osobine background u okviru body taga. Ista osobina se može koristiti za bilo koji deo teksta.

On ima sledeće podosobine: background-color sa vrednostima transparent, ili ime boje; background-image je ime slike uključujući i URL slike i njen folder; background-repeat može biti repeat, repeat-x, repeat-y, no-repeat; background-attachment može biti scroll i fixed; background-position je apsolutna ili relativna vrednost početne pozicije slike.

Podosobine se mogu izostaviti i njihove vrednosti dodeliti osobine background prema gornjem redosledu, a podosobine čijih vrednosti nema će dobiti defolt vrednost.

Druge osobine teksta u XHTML-u Drugi osobine teksta su color za njegovu

boju; word-spacing za razmak između reči; letter-spacing za razmak između slova; text-ident za uvlačenje teksta;

Osobina white-space određuje da li se razmaci prelamaju ili ne, može biti nowrap, normal, pre...

Osobina text-align služi za pozicioniranje teksta ili dela teksta i može biti left, center, justify, right.

Druge osobine teksta u XHTML-u Transformisanje teksta se vrši

pomoću osobina text-transform, a text-decoration služi za ukrašavanje teksta.

Text-transform ima vrednosti capitalize, uppercase, lowercase, none, a text-decoration vrednosti underline, overline, line-through, blink.

Poravnjavanje objekata

Poravnjavanje slike ili drugog objekta se može vršiti pomoću osobine text-align, kao u primeru:

display:block; } </style> … <img src="imgName.gif"

class="centeredImage" alt="image description" height="100" width="100">

Organizacija veb strane Organizacija i izgled veb strane se na

različite načine postižu u HTML-u i XHTML-u.

XHTML pruža mogućnosti za fleksibilan raspored delova stranice na ekranu, dok se u HTML za tu svrhu najčešće koriste tabele.

I druge komande se razlikuju. Brauzeri obično imaju podršku i za stari HTML, ali jeste preporučivo da se XHTML koristi što je više moguće.

Atributi HTML elemenata Postoje zajednički atributi HTML

elemenata koji su bili pominjani u primerima, ali se uglavnom definišu za svaki element posebno. Najvažniji su: align, valign width, height border, bordercolor bgcolor, background

Pozicioniranje XHTML elemenata Celine se prikazuju pomoću osobine

display koji može biti block, inline, none ili list-item.

Poziciju određuju zatim osobine top, bottom, left, right koji određuju rastojanje početka bloka od odgovarajuće ivice roditeljskog elementa, ekrana ili svoje prirodne pozicije, kada je osobina position absolute, fixed i relative, respektivno.

Pozicioniranje XHTML elemenata Primer:#pozadina {position: absolute; top:

250px; left: 2%;}#sadržaj {position: absolute; top: 0px;

left: 2%;}#navigacija {position: absolute; top:

10px; left: 2%}h2, h3 {position: relative; left:-25px}

Primer pozicioniranja u XHTML fajlu<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Catalonia : Castle Makers : Castellers</title> <link rel="stylesheet" type="text/css" href="text.css" />

</style></head><body><div id="navigation"><h1>Catalonia</h1>

<a href="index.html">Home</a> <a href="barcelona.html">Barcelona</a>

<a href="buildings.html">Famous Buildings</a><a href="festivals.html">Festivals</a>

</div><div id="bg">

Primer pozicioniranja u XHTML fajlu<div id="content"><h2>Castle Makers</h2><p>If you've ever marveled at the amazing community effort of the Amish <a

href="http://www.discovery.com/area/exploration/amish/barnraising/day1.html" target="_blank">barn raising</a> parties, where young and old, male and female, strong and weak all come together with a common purpose, Catalonia's Castle Makers <em>(Castellers)</em> will also attract your attention.

</p><h3>Cummerbunds and Bare Feet</h3><p>Brightly colored clothes (unique to each club or <em>colla</em>), bare feet, and wide

cummerbunds distinguish climbers from the public that surrounds them on castle-building day. </p>

<h3>Fent Pinya (Making the Foundation)</h3><p>As a tower begins to form, supporters surround the foundation, placing hands one on top of the

next to make a solid base (the <em>pinya</em> or pineapple, so called because the rows of hands spiraling out from the center resemble that fruit). </p>

<h3>Castles in the Air</h3><p>Watching this diverse group of people join together fills me with envy and anxiety. </p><p><img alt="Waiting" class="line" src="img/waiting_s.jpg" width="154" height="106" /> <img

alt="Tall Tower" class="line" src="img/tall-tower_s.jpg" width="100" height="153" /> </p><h3>The Competition</h3><div id="calendar"><h3>Calendar</h3><p class="calendar">July 1 - Roses <br />June 30 - Girona <br />June 26 - Tarragona </p></div></div></body></html>

Stil za tekst: text.cssbody {

font-family: "Trebuchet MS", Verdana, Sans-serif;}

h2, h3 {color:#339}

a, a:link {color: #339;font-weight: bold;text-decoration: none;}

a:visited {color: #669;}

a:hover {background-color: #fff;color: #339;}

Stil za apsolutno pozicioniranje: absolute.css#bg {

position: absolute;top: 250px;left: 2%;}

#content {position:absolute;top: 0px;left: 30%;}

#navigation {position: absolute;top: 10px;left: 2%;}

#navigation a {display:block}

Primer apsolutnog pozicioniranja

Primer absolutnog pozicioniranja - skrolovanje

Primena osobine display#bg {

/* #navigation a {display:block} */

Primena osobine display

Primer nasleđivanja: Autor nije definisao stil linkovabody {

font-family: "Trebuchet MS", Verdana, Sans-serif;color:black; text-decoration: none;}

h2, h3 {color:#339}

/* a , a:link {color: red;font-family: Arial;font-weight: bold;text-decoration: none;} */

Primer nasleđivanja: Autor nije definisao stil linkova

Primer nasleđivanja: Linkovi isti i predefinisanibody {

h2, h3 {color:#339}

a , a:link {color: red;font-family: Arial;font-weight: bold;text-decoration: none;}

Primer nasleđivanja: Linkovi isti i nedefinisani

Primer nasleđivanja: Neki linkovi definisani, neki nebody {

h2, h3 {color:#339}

#navigation a , #navigation a:link {color: red;font-family: Arial;font-weight: bold;text-decoration: none;}

Primer nasleđivanja: Neki linkovi definisani, neki ne

Stil za fiksno pozicioniranje: fixed.css#bg {

position: fixed;top: 250px;left: 2%;}

#navigation {position: fixed;top: 10px;left: 2%;}

Stil za fiksno pozicioniranje

Stil za relativno pozicioniranje: relative.css#bg {

h2, h3 {position:relative; left:-25px}

Stil za relativno pozicioniranje

XHTML vertikalno pozicioniranje Vertikalno pozicioniranje se vrši

pomoću osobine vertical-align koji može imati vrednosti middle, sub, super, text-top, text-bottom, top, bottom, itd.

Osobina vertical-align odgovara atributu align kod HTML-a, i aplicira se na objekte u liniji.

XTML pozicioniranje u 3D Koji će element biti iznad koga

određuje osobina z-index, koji uzima vrednosti celih brojeva.

Element sa većim indeksom z-index će biti iznad elementa sa manjim indeksom.

XHMTL elementi koji lebde Elementi se omogućavaju da lebde, tj. prolaze

kroz tekst i druge elemente pomoću osobine float koji ima vrednosti left i right, u zavisnosti od strane na kojoj element lebdi.

#kalendar {background:#339; color: white; padding: 5x; margin-left: 5px; margin-top: 7px; font-size:0.8em; width: 150px; float: right;}

Pomoću osobine clear koji ima vrednosti left, right, both, i none, može se zabraniti prolaz kroz dati element:

#kalendar {background:#339; color: white; padding: 5x; margin-left: 5px; margin-top: 7px; font-size:0.8em; width: 150px; clear: right;}

Veličina XHTML elemenata Se određuje pomoću osobine width, height,

padding, border, i margin. Padding je rastojanje između sadržaja i granice, border je granica, a margin rastojanje između dva susedna elementa. Osobina border ima podosobine border-style (dotted, dashed, solid,…), border-width, i border-color.

Sve ove osobine mogu imati apsolutnu ili relativnu vrednost. Relativna vrednost je uvek u procentima i računa se u odnosu na roditeljski element.

Sve ove osobine imaju podosobine koji specificiraju stranu elementa, npr. border-left, margin-bottom, padding-right ..., pa se tako formiraju i podosobine kao border-left-color itd.

Gde XHTML elementi pretiču Osobina overflow određuje šta se dešava

kada je tekst, i drugi materijal, veći od mesta koji mu je na raspolaganju.

Vrednosti su: visible - za koju se prostor širi da primi tekst; hidden - za koju se tekst koji ne staje skriva; scroll - za koji se dodaju skrol-barovi; i auto - za koji se automatski dodaju skrol-barovi.

Pojam listi Liste u jeziku (X)HTML se koriste za

navođenje, popisivanje određenih delova teksta.

Postoje: nenumerisane, numerisane, neuređene liste.

Numerisane i nenumerisane liste u (X)HTML-u Numerisane liste koriste <ol> tag (engl.

ordered list), a nenumerisane liste <ul> tag (engl. unordered list).

Pojedine stavke liste se definišu pomoću <li> taga.

Nenumerisane liste To su liste sa kojima se nabrajaju

stavke, bez navođenja rednog broja. Na primer: Fruits:

apples bananas grapefruit

Nenumerisane liste Opšta struktura je (ul - unordered

list): <ul>

<li> element1Liste </li> <li> element2Liste </li>. . . . .

Nenumerisane liste u HTML-u

Oznaka stavke može se regulisati atributom type (potisnut u XHTML-u) koji može uzimati vrednosti: circle - okruglo dugme disc - ispunjeno okruglo dugme square - kvadratno dugme

Nenumerisane liste

Za primer sa kružnim dugmićima: • proleće • leto • jesen • zima odgovarajući HTML kod je:

<ul type=“disc"><li>proleće </li><li>leto </li><li>jesen </li><li>zima </li></ul>

Numerisane liste To su liste sa rednim brojevima

stavki. Primer:Godišnja doba su: 1. proleće 2. leto 3. jesen 4. zima

Numerisane liste Opšta struktura je (ol - ordered list): <ol>

<li> element1Liste </li> <li> element2Liste </li>. . . . .

Numerisane liste u HTML-u Atribut type:

A - velika slovaa - mala slovaI - rimski brojevii - mali rimski brojevi

Numerisane liste I. proleće II. leto III. jesen IV. zima Odgovarajući HTML kod:<ol type="I"><li>proleće </li><li>leto </li><li>jesen </li><li>zima </li></ol>

Definicione liste Ovaj oblik liste se dobija sa <dl> tagom.

Svaka stavka ovakve liste se sastoji iz dva dela: termina koji se definiše, i njegove definicije.

Termini zapocinju <dt> tagom, a njihove definicije <dd> tagom.

Termini se poravnavaju uz levu marginu a njihove definicije se pojavljuju u novom redu i pomerene su za određen broj mesta.

Definicione liste

Opšta stuktura je: <dl>

<dt> odrednica1 <dt> <dd> opisOdrednice1 </dd>

<dt> odrednica2 </dt> <dd> opisOdrednice2 </dd> . . . . . </dl>

Definicione liste Primer za ovu vrstu listi je:Proleće: traje od 21. marta do 21. juna. Leto: traje od 21. juna do 21. septembra. Jesen: traje od 21. septembra do 21. decembra. Zima: traje od 21. decembra do 21. marta.

Definicione liste (X)HTML kod za prethodni primer je:

<dl><dt>Proleće: </dt><dd>traje od 21. marta do 21. juna. </dd>

<dt>Leto:</dt><dd>traje od 21. juna do 21. septembra. </dd>

<dt>Jesen:</dt><dd>traje od 21. septembra do 21. decembra. </dd>

<dt>Zima:</dt><dd>traje od 21. decembra do 21. marta. </dd></dl>

Definicione listeJoš jedan primer, (X)HTML kod:<dl>

<dt> -i </dt> <dd> invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path </dd> <dt> -k </dt> <dd>invokes NCSA Mosaic for Microsoft Windows in kiosk mode </dd>

Definicione liste

Rezultat:-i invokes NCSA Mosaic for Microsoft

Windows using the initialization file defined in the path.

-k invokes NCSA Mosaic for Microsoft

Windows in kiosk mode.

Lista unutar liste Unutar neke liste može se definisati nova lista. Na primer:<ul>

<li> Opštine u Vojvodini koje su podnele prijave: <ul>

<li> Severnobački okrug <ol> <li> Bačka Topola </li> <li> Subotica </li> </ol></li>

<li> Južnobanatski okrug <ol> <li> Alibunar </li>

<li> Bela Crkva </li> </ol></li> </ul> </li>

<li> Opštine u užoj Srbiji koje su podnele prijave: <ul>

<li> Šumadijski okrug <ol> <li> Aranđelovac </li> <li> Lapovo </li> </ol></li>

<li> Borski okrug <ol> <li> Bor </li> </ol></li>

</ul> </li></ul>

Lista unutar liste

Rezultat prethodnog primera:

• Opštine u Vojvodini koje su podnele prijave: o Severnobački okrug

1. Bačka Topola 2. Subotica

o Južnobanatski okrug 1. Alibunar 2. Bela Crkva

• Opštine u užoj Srbiji koje su podnele prijave: o Šumadijski okrug

1. Aranđelovac 2. Lapovo

o Borski okrug 1. Bor

Stilovi lista u XHTML-u Za stilove listi ili njihovih delova se koristi

osobina list-style i njene podosobine list-style-image, list-style-position (inside,outside), i list-style-type (circle,disc,decimal, ...). Slika ima prednost nad tipom. Podosobine se mogu izostaviti.

Stilovi se mogu pridružiti elementima listi, ili elementima određene klase:

li {list-style-type: upper-roman}ol.new {list-style-image: url(

http://www.cookwood.com/html5ed/examples/lists/rightarrow.gif)}

ol li {list-style-type: circle; font-size: 75%}

Primer liste sa stilom<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Prijave po opštinama </title><link rel="stylesheet" type="text/css" href="lista.css" /></head>

<body><div>Formulari za popis osnovnih škola je poslat svim opštinama. Neke opštine su

podnele potpune prijave, dok neki okruzi nisu uopšte odgovorili. Opštine koje su

odgovorile: <ul>

Primer liste sa stilom <li> Opštine u Vojvodini koje su podnele prijave: <ul>

<li> Severnobački okrug <ol> <li> Bačka Topola </li> <li> Subotica </li> </ol></li>

<li> Južnobanatski okrug <ol> <li> Bačka Topola </li>

<li> Subotica </li> </ol> </ li> </ul> </li>

<li> Opštine u užoj Srbiji koje su podnele prijave: <ul>

<li> Šumadijski okrug <ol> <li> Aranđelovac </li> <li> Lapovo </li> </ol></li>

<li> Borski okrug <ol> <li> Bor </li> </ol></ li>

</ul> </li></ul> Iz gornje liste vidimo da je broj opština koje su odgovorile dosta mali. </div>Okruzi koji nisu odgovorili:<ul>

<li> Severnobački okrug </li> <li> Bačka Topola </li> <li> Subotica </li>

</ul></body></html>

Stil liste

body {font-size: 14px; color: blue;}ul {list-style-type: disc; font-size: 90%;

font-style: italic;}ul ul {font-style: normal; color:red;}

Primer liste sa stilom

Drugi stil liste

body {font-size: 14px; color: blue;}div ul {list-style-type: disc; font-size:

90%; font-style: italic;}div ul ul {font-style: normal;

color:red;}

Lista sa drugim stilom

Tabele Tabela se definiše pomoću taga

<table>. Pojedinačna ćelija se definiše u

okviru <td> </td>. Novi red se definiše sa <tr> </tr>. Ćelije prvog reda se definišu sa

tagovima <th> </th>.

Tabele <table><caption> Naslov tabele </caption> <tr> <th> Sadržaj prve ćelija zaglavlja </th> <th> Sadržaj poslednje ćelije headera </th> </tr> <tr> <td> Sadržaj prve ćelije prvog reda </td> <td> Sadržaj poslednje ćelije prvog reda </td> </tr> <tr> <td> sadržaj prve ćelije poslednjeg reda </td> <td> sadržaj poslednje ćelije poslednjeg reda </td> </tr> </table>

Atributi i osobine veličine tabele

Atributi, tj. osobine border i width su isti u HTML-u i XHTML-u, samo se border u HTML-u odnosi na celu tabelu a u XHTML-u samo na okvir tabele (ne nasleđuje se).

Atributima cellpadding i cellspacing u HTML-u odgovaraju osobine padding i border-spacing u XHTML-u.

Pomoću padding osobine definiše se rastojanje između sadržaja ćelije i njene granice.

Pomoću border-spacing osobine se može odrediti rastojanje između pojedinih ćelija tabele.

Primeri:<table border="2" width=“100%” cellpadding="30"

cellspacing="10">table, td.osnovni {border:2px solid red; width: 100%;

padding:3px; border-spacing:0;>

Atributi za spajanje ćelija (X)HTML dopušta mogućnost da se

pojedine ćelije tabele protežu duž više redova ili kolona tabele.

Ovakav efekat se može postići pomoću atributa colspan i rowspan, koji se ubacuju u <td> ili <th> tag one ćelije koja se želi posebno da formatira.

Vrednost ovih atributa se zadaje brojem kolona ili redova tabele duž kojih treba da se prostire data ćelija.

Ostali atributi i osobine U HTML-u atributi align i valign se mogu

aplicirati na celu tabelu ili ćelije tabele čiji se sadržaj pozicionira. U XHTML-u samo se tekst u ćelijama može pozicionirati pomoću osobina text-align i vertical-align.

Pozadina tabele ili ćelije se u HTML-u specificiraju atributima bgcolor i background, a u XTHML-u osobinom background.

Tabele redovi u HTML-u

<td>hello</td> <td>hello3</td> <td>hello5</td>

</tr></table> U datom primeru "hello“, “hello3” i

“hello5” su ćelije u okviru istog reda

Tabele – kolone u HTML-u Da bi se napravila nova kolona

potrebno je koristiti tag <tr><table border="3" cellpadding="5"

cellspacing="5"><tr><td>hello</td></tr><tr><td>hello3</td></tr><tr><td>hello5</td></tr></table>

Primer HTML tabele <table border="2"><tr> <th><font face="Verdana" size=“12">Ime:</font></th> <th><font face="Verdana" size=“12">Prezime:</font></th> <th><font face="Verdana" size=“12">Zvanje:</font></th></tr><tr> <td><font face="Verdana" size=“12">Aleksandra

</font></td> <td><font face="Verdana" size=“12">Smiljanić</font></td> <td><font face="Verdana" size=“12">Predavač</font></td></tr></table>

Primer XHTML tabele <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> table,td,th {border: 2px solid; font-family: "Verdana"; font-size: 12px>

</style> </head> <body> <table> <tr><th>Ime:</th><th>Prezime:</th> <th>Zvanje:</th> </tr>

<tr><td>Aleksandra</td><td>Smiljanić</td><td>Predavač</td> </tr> </table> </body>

Primer HTML tabele<table border="2" width="100%"><tr> <th width=“25%"><font face="Verdana" size=“12">Ime :</font></th> <th width=“25%"><font face="Verdana" size=“12">Prezime :</font></th> <th width=“50%"><font face="Verdana" size=“12">Zvanje :</font></th></tr><tr> <td><font face="Verdana" size=“12">Aleksandra</font></td> <td><font face="Verdana" size=“12">Smiljanić</font></td> <td align=center><font face="Verdana" size=“12">Predavač</font></td></tr></table>

Primer XHTML tabele

Primer XHTML tabele<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body { font-family: "Verdana"; font-size: 14px/180%;} td {font-family: "Comic Sans MS"; font-size: 12px; color: blue;} table {margin:5px;} </style> </head> <body> <p> Tabela predavača Internet programiranja: <table border="2px"> <tr><th>Ime:</th><th>Prezime:</th> <th>Zvanje:</th> </tr>

<tr><td>Aleksandra</td><td>Smiljanić</td><td>Predavač</td> <tr /> <tr><td>Boško</td><td>Nikolić</td><td>Predavač</td></tr> </table> Aleksandra predaje na smeru za telekomunikacije, a Boško za automatiku. </p> </body></html>

Primer XHTML tabele

Frejmovi Frejmovi omogućavaju da se formira

dokument koji će se sastojati od adresa bar dva različita dokumenta.

Frejmovi su dozvoljeni samo u XHTML Frameset varijanti

Osnovni tag je složeni tag <frameset>. Ovaj tag zamenjuje body tag u (X)HTML-dokumentu.

Tag <frameset> ima atribute: cols za vertikalnu podelu prozora i rows za horizontalnu podelu prozora navigatora.

Frejmovi Adresa dokumenta se navodi u

okviru taga <frame> preko atributa src.

Tag <noframes> sadrži poruku za browser koji nije u stanju da interpretira frejmove.

Frejmovi Opšta struktura (X)HTML stranice sa

frejmovima je:<html><head></head><frameset>…</frameset></html>

Primer HTML stranice sa frejmovima

Atributi stranice sa frejmovima Atributi <frameset> taga u HTML-u:

border: debljina granice između frejmova izrađena u pikselima,

bordercolor: definiše boju granice između frejmova. Ovaj atribut se primenjuje jedino pod uslovom da je atribut frameborder postavljen na aktivnu vrednost.

frameborder: vrednost '1' ili 'yes' ovog atributa prikazuje granicu između dva frejma, dok vrednost '0' ili 'no' ne prikazuje.

framespacing: definiše razmak između granica frejma i njegovog sadržaja izraženog u pikselima.

Ovi atributi su zamenjeni osobinom border i njenim podosobinama u XHTML-u

Primer stranice sa frejmovima<html><head><title>Nova stranica sa frejmovima</title></head><frameset rows="20%, 80%" frameborder=”no" > <frame src="menu.html"> <frame src="main.html"></frameset><noframes>U okviru vaseg čitača nije moguće prikazati ovu stranicu.</noframes></html>

Atributi frejmova (X)HTML atributi <frame> taga:

src: definiše adresu dokumenta koji će se učitati u okviru frejma,

name: specificira ime frejma koje se može koristiti u okviru drugih programskih modula, kao što su JavaScript ili VBScipt,

noresize: ovaj atribut se samo navodi bez ikakve vrednosti, i sprečava korisnika da menja veličinu frejma,

scrolling: može bit yes, no i auto. XHTML osobine border i margin su zamenili HTML atribute:

bordercolor: definiše boju ivice frejma, frameborder: vrednost '1' ili 'yes' ovog atributa prikazuje

granicu frejma, dok vrednost '0' ili 'no' ne prikazuje, marginwidth: definiše veličinu praznog prostora između leve i

desne strane frejma i njegovog sadržaja izražen u pikselima, marginheight: definiše veličinu praznog prostora između vrha

i dna frejma i njegovog sadržaja izražen u pikselima.

Hiperlinkovi u frejmovima Korišćenjem frejmova i linkova može se

omogućiti promena jednog dela stranice, dok bi preostali deo stranice ostao nepromenjen.<frame src="Primer.html" name=“MenjaSe”>

Kod definicije linka (koji se nalazi na drugom frejmu) se navede atribut target sa vrednošću koja predstavlja ime frejma čiji se sadržaj menja.

<a href="http://www.google.com" target=“MenjaSe”> Promena frejma </a>

Hiperlinkovi u frejmovima Stranica Glavna.html<html><frameset cols="25%,75%"> <frame src="meni.html"> < frame src ="PocetniSadrzaj.html"

name=”MenjaSe”></frameset></html>

Hiperlinkovi u frejmovima Stranica meni.html<html><body><table><tr><td><a href ="http://www.yahoo.com" target ="

MenjaSe">Yahoo</a> </td></tr><tr><td><a href ="http://www.etf.bg.ac.yu" target="MenjaSe">ETF</a> </td></tr><td><a href ="http://www.google.com" target

="MenjaSe">Google</a> </td></tr></table></body></html>

Frejmovi Stranica PocetniSadrzaj.html<html><body>Ovo je stranica ciji ce se sadržaj

promeniti ako se aktiviraju linkovi s desne strane!

</body></html>

Multimedija u HTML-u Koristi se <embed> tag. Ovaj tag podržava uobičajene formate kao

što su .wav, .mid, .mp3, i .au. Osnovna struktura taga je sledeća:<embed src="filename.ext" width="x"

height="x" autoplay="x" hidden="x" loop="x" volume="x"></embed>

Atributi multimedije u HTML-u src: njegova vrednost je URL (relativna ili

apsolutna putanja) do multimedijalnog dokumenta.

controls: moguće vrednosti ovog atributa su console i smallconsole.

height and width: Za neke čitače ovo su obavezni atributi <embed> taga. Na primer njihovo izostavljanje u Netscape čitaču prouzrokuje nepredviđen rad. Ako se za ove atribute definišu veće vrednosti od dimenzija konzole, sivi prostor se dodaje u dodatom prostoru.

volume: Vrednost ovog atributa je broj između 0 i 100. Manji broj definiše tiši zvuk.

Atributi multimedije u HTML-u

loop: defolt vrednost ovog atributa je false, što prouzrokuje da se audio dokument izvršava samo jednom. Ako se vrednost postavi na true, dokument će ponavljati specificirani broj puta.

autostart: defolt vrednost true ovog atributa aktivira fajl čim je daunloudovan.

hidden: defolt vrednost ovog atributa je true i tada je konzola sakrivena.

align: Moguće vrednosti ovog atributa su left i right.

hspace i vspace: Slično kao kod <img> taga ovi atributi se koriste da bi se definisao u pikselima horizontalni odnosno vertikalni prostor oko konzole.

Multimedija u XHTML-u <object width="160" height="144"

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B“ codebase="http://www.apple.com/qtactivex/qtplugin.cab">

height="144" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed>

</object>

Unos podataka preko veb strane XHTML ne obezbeđuje punu

interaktivnost, ali određuje izgled formulara i uopšte elemenata za unos podataka.

Programski jezici kao što su Javascript i PHP obrađuju unete podatke i korisniku šalju XHTML fajl sa rezultatom obrade.

Tagovi za unos podataka su <form>, <input>, <select>, <textarea>.

Ovi tagovi imaju i atribute čije su vrednosti imena programa.

Forme Za implementaciju formi koristi se osnovni tag

<form>. Opšti oblik ovog taga je:<form>  ... </form> Najvažnija tri atributa taga <form> su:

action koji sadrži adresu (URL) programa na serveru kome se predaju podaci;

method kojim je opisana metoda prenosa argumenata programa. Ovaj atribut može imati vrednosti get ili post.

enctype koji opisuje mime tip podataka koji se šalju.

Tekst polje Koristi se tag <input> tag sa atributom type=“text”. Pomoću atributa value definiše se početni tekst koji će se

pojaviti u tekst polju Pomoću atributa size se zadaje veličina tekst polja u

znakovima, a maxlength je maksimalan broj karaktera koji se mogu uneti u okviru ovog elementa od strane korisnika.

Vrednost atributa name definiše samo ime elementa pomoću koga drugi elementi aplikacije (JavaScript, serverski deo aplikacije) mogu čitati ili menjati unetu vrednost u okviru tekst polja.

Ako se želi da se zamaskira tekst koji korisnik unosi u tekst polje umesto vrednosti text, treba koristiti vrednost type=“password”.

Ime: <input type="text" name="ime" value="Unesite ime" size="30“ />

Tekst polje za slanje i brisanje formulara Tag <input> u obliku dugmeta pomoću

koga se podaci šalju na server ima atribut type=“submit”. Vrednost atributa value je ispisana na dugmetu.

<input type=“submit" value="Pošalji“ /> Tag <input>, dugme, koje postavlja

vrednosti elemenata forme na predefinisane vrednosti ima atribut type= “reset”. Vrednost atributa value je ispisana na dugmetu.

Dugme Dugme se može da se definiše i

posebnim tagom <button>. Ovaj tag je složen i može da uključi i sliku dugmeta.

Funkcija dugmeta opšte namene se određuje pomoću nekog programa koji se aktivira na određenu akciju

Dugmići submit i reset Vrednost atributa dugmeta može biti i

submit i reset. Kada je atribut type=“submit” pomoću

dugmeta se podaci šalju na server.<button type=“submit" value="Pošalji">… Kada je atribut type=“reset” pomoću

dugmeta se podaci resetuju na predefinisanu vrednost.

<button type=“reset" value="Poništi">…

Formular za izbor opcija Polje za izbor opcija se definiše korišćenjem taga

<input> i njegovog atributa type sa vrednošću “checkbox”. Pomoću atributa checked=“checked” data stavka će biti unapred izabrana, ali se može izbrisati. Atribut name definiše elemente liste, a atribut value vrednost koja je poslata serveru. Svi elementi mogu imati istu vrednost atributa name, ali je u tom slučaju ta vrednost niz.

<i>Koje programske jezike poznajete?</i><br /><ul><li> <input type=”checkbox” name=“jezici[]” value=”pas”> Paskal</li>

Formular za izbor jedne opcije “Radio” formular se definišu korišćenjem taga

<input> i njegovog atributa type=“radio”. Ima iste atribute kao i formular za izbor više opcija type=“checkbox”.

<i>Imate li vlastiti računar?</i><br /><ul>

Padajući meni Opadajuća lista se definiše pomoću tagova <select> i

<option>. Polje <select> opisuje izbor između mogućih vrednosti navedenih u okviru tagova <option>.

Atributi uz tag <select> su name koji se šalje serveru kao ime liste, size koji specificira broj opcija, i multiple=‘multiple’ kojim se omogućava izbor više opcija. U tom slučaju je ime padajućeg menija niz.

Atributi taga <option> su value koji specificira podatke koji se šalju serveru kao izabrani, a atribut selected=“selected” za biranje unapred datog atributa.

<b><i> Moj omiljeni predmet na 1. godini je: </i></b><select name="predmeti"> <option> Analiza 1</option> <option> Analiza 2</option> <option> ORT</option> </select>

Padajući meni Za hijerarhijske padajuće menije se

koristi tag <optgroup> koji predstavlja grupu opcija iz kojih se bira opcija.

Ime grupa opcija se definiše atributom label taga čija vrednost prethodi grupi ali nije klikabilna <optgroup>.

Višelinijsko tekst polje Tag <textarea> prikazuje tekst u

odvojenom tekst prozoru sa skrol-barovima.

Dimenzije prozora su određene atributima rows (broj redova teksta) i cols (broj kolona, u znakovima).

Atribut name dodeljuje simboličko ime području u kome se nalazi tekst. <textarea name=“imeTeksta” rows=“4” cols=“10”> ... neki tekst ... </textarea>

Skriveno tekst polje Često je potrebno u okviru stranice

zapamtiti određene vrednosti koje ne bi trebalo prikazivati korisniku.

Ova mogućnost se izvršava pomoću taga <input> i njegovog atributa type=“hidden”. Na primer:

Fiksno polje formulara Nekad tekst polja imaju fiksnu vrednost

koju korisnik ne može promeniti. Primer je kada se određena tekst polja

popunjavaju iz nekog drugog formulara. Za fiksno tekst polje koristi se atribut

readonly kome se dodeljuje vrednost “readonly”.

<textarea name=“glasanje” cols=“40” rows=“3” readonly=“readonly”> Glasali ste za Sony u ponedeljak </textarea>

Slanje formulara e-meilom Koristi se tag <form> u kome je atribut action=

mailto:e-meil. Primer:<form method=“post” action=“mailto:

naruci@prodavnica.co.rs”>Ime i prezime: <input type="text" name="ime_prez"

value="Unesite ime i prezime" size="30” /> <br />Proizvod: <input type="text" name=“proizvod"

value="Unesite proizvod" size="30” /> <br />Adresa: <br /><textarea name=“adresa" rows=“6”

cols="30“> </ textarea><input type=“submit" value="Pošalji"></form>

Aploudovanje fajlova Fajlovi se aplouduju pomoću tagova

<form> i <input>. U tagu form je specificiran program

pomoću koga se aplouduje fajl i atribut enctype=“multipart/form-data”.

U tagu input da je u pitanju type=“file”.

Aploudovanje fajlova: Primer

Choose a file to upload: <input name="uploadedfile"

type="file" /><br /> <input type="submit" value="Upload

File" /> </form>

Korisni atributi: disable Atribut disable je koristan da spreči slanje formulara koji nije popunjen.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><body><form method="post" action="processform.php" name="upitnik"><i>Imate li vlastiti računar?</i><br /><input type="radio" name="racunar"

onclick="document.upitnik.posalji.disabled=false"> &nbsp Da <br /> <input type="radio" name="racunar"

onclick="document.upitnik.posalji.disabled=false"> &nbsp Ne <br /><input type="submit" name="posalji" value="Pošalji" disabled="disabled"></form></body></html>

Korisni atributi: disable

Korisni atributi: accesskey Atribut accesskey je koristan za tagove za

izbor opcije u listama pomoću slova dodeljenog ovom atributu koje prati alt ili ctr dugmiće.

<i>Imate li vlastiti računar (kucaj ^d za da, ^n za ne)?</i><br /><input type=”radio” name=”racunar” accesskey=“d”> Da <br /><input type=”radio” name=”racunar” onclick=“document.posalji.disable=false” accesskey=“n”> Ne <br />

Primer formulara <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html> <head><title>Forma za komentare</title></head><body><h1>Pošaljite svoje komentare</h1><form action="comments.php" method="post”><p>Email adresa: <input type=“text” name="email" size=“50”> </p><p>Komentar:</p><textarea name=“komentari" rows=“15” cols=“70”></textarea> <p><input type="submit" value="Pošaljite komentar"> <input type="reset" value="Obrišite unete podatke"> </p></form></body></html>

Primer formulara

Primer formulara <html> <head><title>Restoran italijanske hrane</title></head><body><h1> Restoran italijanske hrane </h1><form action="order.php" method="post"><h2>Pice</h2>Koliko pica želite? <input name="numpizzas" value=“1" size=“3” maxlength=“3”> <br /><input type=“radio” name="size" value="large" checked=“checked”> Velika <br/><input type=“radio name="size" value="medium"> Srednja <br/> <input type=“radio” name="size" value="small"> Mala <br /><h3>Dodaci</h3><input type=“checkbox” name="topping[]" value="pepperoni"> Ljuta paprika <br /> <input type=“checkbox” name="topping[]" value="mushroom"> Pečurke <br /> <input type=“checkbox” name="topping[]" value="peppers"> Kečap <br /> <input type=“checkbox” name="topping[]" value="onion"> Luk <br /> <input type=“checkbox” name="topping[]" value="olives"> Masline <br />Ime: <input type="text" name="name"> </br> Broj telefona: <input type="text" name="phone"> <br />Adresa: <br /><textarea name="address" rows=“6” cols=“50”></textarea><p>Broj kreditne kartice: <input type=“password” name="creditcard" size=“20”></p><input type=“submit” value="Pošaljite narudžbinu"></form></body> </html>

Primer formulara

internet programiranje, xhtml i css

Documents

xhtml+css de una maldita vez!

웹표준 (xhtml + css)

05 xhtml css

xhtml e css

desenvolvimento de sites com xhtml e css nos

xhtml-print/css print profile guidelines for...

barcampcologne 2 - xhtml/css formatvorlagen und bausteine

532594.skripta - uvod u xhtml html i css

buenas prácticas en xhtml, css y accesibilidad

apostila html,xhtml e css

html, xhtml e css

cours xhtml/css

xhtml css tutorial

html, xhtml i css. nowoczesne tworzenie stron www

2 html,xhtml e css

information und ihre darstellung: xhtml & css · 2013. 6....

tutorial xhtml y css

html xhtml e css

standardeid järgiv veebidisain: xhtml ja css algajale

class: xhtml & css, for beginners