Internet Programiranje

Sadržaj predmeta Cilj predmeta jeste dizajn dinamičkih

veb strana koje uključuju interakciju korisnika.

Alati koji će se koristiti: (X)HTML i CSS JavaScript PHP i MySQL

Raspored predmeta Prve dve nedelje predavanja – XHTML i CSS Druge dve nedelje vežbe na računarima u

laboratoriji paviljona II – XHTML i CSS Naredne tri nedelje predavanja – PHP i MySQL Naredne tri nedelje vežbi u labu paviljona II –

PHP i MySQL Naredne dve nedelje predavanja – JavaScript Poslednje dve nedelje vežbe u labu paviljona II –

JavaScript

Polaganje predmeta Iz pojedinih modula, XHTML, JavaScript i

PHP, se dobija 15, 30 i 15 poena. Na samim vežbama se dobija 6, 12 i 6 poena.

Lab 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 koga vodi Tim Berners-Lee

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 izdvaja iz teksta.

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

HTML vs. XHTML HTML 4.0 ≈ XHTML 1.0 (usvojen 2000-te) 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.

HTML vs. XHTML XHTML 1.1 se razvio od striktne verzije

XHTML 1.0, ali nije zaživeo. Slična je bila i sudbina standarda XHTML

2.0, koji je prekinuo kompatibilnost unazad sa HTML standardom.

Softverski vendori su uporedo razvijali HTML5, za koga tvrde da je kompatibilan unazad, i posebna pažnja je posvećena kompatibilnosti sa aplikacijama.

HTML5 je usvojen oktobra 2014. godine, i već ima široku primenu na Internetu

CSS CSS 1 je usvojen davne 1996-te godine. Danas je aktuelan CSS 2.1 koji je usvojen

2011. Pojedini moduli standarda CSS 3 su

usvojeni, i oni uvode dodatne mogućnosti u odnosu na važeći CSS 2.1 standard.

Takođe se radi na CSS 4 modulima.

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/attributes.ht

ml http://www.w3.org/TR/CSS2/propidx.html http://www.webstandards.org/learn/reference/charts/

entities/ http://www.w3schools.com

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

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

U MS Word-u, koristiti Save As Plain Text, a potom se bira UTF-8 kodovanje.

Ekstenzija mora biti html. Mogu se koristiti i specijalni alati, na primer

WYSIWYG editori: MS Expression Web, Adobe DreamWeaver, WordPress.

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

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

koje veb strane, i CSS kod, pomoću brauzera.

Mozilla Firefox: Developer -> Page Source (ili Style Editor)

Internet Explorer: View -> Source, ili Tools -> Developer Tools

Google Chrome: Tools -> View Source (ili Developer Tools)

XHTML 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"?>

HTML5 DOCTYPE komanda DOCTYPE komanda je kod HTML5 jezika

uprošćena <!DOCTYPE html >

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 brauzeru 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 može da 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:

Jedinice veličina Jedinice za veličinu slova, ili elemenata

su: %, in, cm, mm, em (odnos prema osnovnom fontu), pt (=1/72in), pc (=12pt), px (tačka na ekranu)

% se računa u odnosu na osnovni font, ako se radi o znakovima, i u odnosu na veličinu roditeljskog elementa ako se radi o elementima. Pri tome veličina roditeljskog elementa mora biti definisana, osim za html element.

Jedinice veličina Da bi body imao veličinu 100%,

odnosno istu kao html element, veličina html elementa mora biti definisana, apsolutno, ili kao 100%.

Jedinice vh i vw označavaju 1/100 visine i širine ekrana, respektivno (CSS3).

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. Korisni atributi ovog taga (kao i drugih) 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 class=“EngleskiParagrafi”><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>

HTML4 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 HTML4 (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.

Nije potisnut u XHTML-u. 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 HTML4 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 HTML4 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 HTML4 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="50px">

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="5px">

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. Nije potisnut u XHTML-u.<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 se nalazi se na

istom serveru gde i stranica sa polaznom pozicijom, krajnja pozicija se nalazi na stranici 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, 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.html i 2.html, Y

stranicu 3.html, a Z stranicu 4.html Za stranicu 1.html,

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

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

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

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

relativna adresa stranice 2.html je “../../2.html”; relativna adresa stranice 3.html 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

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

Elektrotehničkom fakultetu </a><a href="http://www.etf.rs/~aleksandra/IP.html">

Link ka stranici za Internet programiranje </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 id u <a> tagu.

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

Na krajnjoj poziciji se navodi tag koji definiše ime krajnje pozicije:

<a id=“idKrajnjePozicije”> 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"> Java </a></p> <p> <a href="#uvodc"> Uvod u C</a></p>

<h3> <a id="html"> Web i jezik HTML</a> </h3><p>................</p><p>................</p>

</body></html>

Link na istu (X)HTML stranicuProgramiranja

Web i jezik HTML Java Uvod u C

Web i jezik HTML ................................

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

Uvod u C

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

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>

<a href="http://www.etf.rs/~aleksandra/ IP.html#domaci"> Domaći iz IP programiranja </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;}div.engleski p.citati {color:blue;}.citati {color:red;} Primer stila svih potomaka:div#gaudi p {color:red;} Primer stila dece:div#gaudi > p {color:red;}

Pseudoklase (pseudo-classes) Pseudo klasa zavisi od korisničkih aktivnosti:imeGrupe: 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;} – link u momentu kad je

kliknut

Pseudoelementi (pseudo-elements) Pseudo element opisuje delove elementa:imeGrupe: pseudoElement {a1:b1; a2:b2;…} Primeri pseudo-elemenata:

h1::before {content:url(smiley.gif);}

p::first-letter{color:#ff0000;font-size:xx-large;}

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.

Primer određivanja stila p.citati {color:red; font-size:small;}abcd=0011 div.engleski p.citati {color:blue;}abcd=0022 .citati {color:red;} abcd=0010 #engleski .citati {color:yellow;}abcd=0110

Formatiranje teksta Sintaksa za formatiranje teksta se

razlikuje u HTML4 i XHTML jezicima. Brauzeri podržavaju oba formata, ali

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

Tag <font> iz HTML4 je potisnut

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

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

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

Ovde ide vaš tekst.

Fontovi u HTML4

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 HTML4 Boja pozadine se određuje atributom

bgcolor u okviru <body> taga, ili tagova za tabele.

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 HTML4 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 HTML4 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 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 inline objekata

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

</style> … <div class="centeredImage" > <img

src="imgName.gif" alt="image description" height="100" width="100"> </div>

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.

Pozicioniranje XHTML elemenata Pozicioniranje elemenata se može vršiti

na više načina, ili kombinacijom ovih načina: Pomoću osobine elemenata display Pomoću osobine koja definiše lebdenje

elementa float, i njegovu zabranu clear Pomoću osobine position

Pozicioniranje pomoću display osobine Celine se prikazuju pomoću osobine

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

Inline element se nastavlja u istom redu kao i prethodni

Block počinje u narednom redu, gura naredni element u naredni red, i ima definisane dimenzije

Inline-block se nastavlja u istom redu i ima dimenzije

Pozicioniranje pomoću display osobine Primeri inline elemenata po difoltu: a,

img, b, i, object, span, sub, sup, input, button, label, select, textarea, ...

Primeri block elemenata po difoltu: p, ol, ul, pre, div, form, table, h1, h2, ...

Lista svih block i inline elemenata http://www.w3.org/TR/1999/xhtml-

modularization-19990406/module_defs.html#a_dtdblock

Primeri pozicioniranja pomoću display osobine

<div id="div_levi"> Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba </div>

<div id="div_desni"> Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba <img src=slika.jpg width=200px;> Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba </div>

</body></html>

Primeri pozicioniranja pomoću display osobine stil1.css

#div_levi {display:inline;width:200px;}

#div_desni {display:inline;vertical-align:top;width:300px;}

Primeri pozicioniranja pomoću display osobine stil2.css

#div_levi {display:inline-block;width:200px;}

#div_desni {display:inline-block;vertical-align:top;width:300px;}

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; width: 150px; float: right;}

Pomoću osobine clear koji ima vrednosti left, right, both, i none, može se zabraniti prolaz kroz dati element sa njegove odgovarajuće strane.

#tekst {color: white; width: 150px; clear: left;}

XHMTL elementi koji lebde Elementi koji lebde narušavaju normalan tok

teksta, odnosno block i inline elemenata. Dva ili više elemenata sa istom vrednošću atributa

float se naslanjaju jedan na drugi prema redosledu pojavljivanja na odgovarajućoj strani.

Da bi se povratio normalan tok dokumenta posle elemenata koji lebde potrebno je uvesti element, makar i fiktivni, koji će da zabrani prolaz prethodnih elemenata kroz njega koristeći osobinu clear, npr:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

<div style="float: left;" class="clearfix">Tekst</div>

Primeri pozicioniranja pomoću float osobine

<div id="div_levi"> Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba </div>

<div id="div_desni"> <img src=img/slika.jpg width=200px;> <p> Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba </p> </div>

</body></html>

Primeri pozicioniranja pomoću float osobine stil3.css

#div_levi {width:35%;float:left;}

img{float:right;}

#div_desni {float:right;width:45%;}

Primeri pozicioniranja pomoću float i clear osobine

Primeri pozicioniranja pomoću float osobine stil4.css

#div_levi {width:35%;float:left;}

img{float:right;}

p{clear:right;}

#div_desni {float:right;width:45%;}

Primeri pozicioniranja pomoću float osobine

Pozicioniranje pomoću position osobine

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

Kada se koristi position osobina za pozicioniranje, onda se naruši normalan tok elemenata.

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

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

left: 25%;}#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">

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

</head><body>

Primer pozicioniranja u XHTML fajlu<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>

<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.

Primer pozicioniranja u XHTML fajlu<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>

Primer pozicioniranja u XHTML fajlu

<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 - 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: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: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 se aplicira se na inline objekte.

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.

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.

Veličina XHTML elemenata

Primer dimenzija XHTML elemenata i odnosa sa susednim elementima

padding-left

padding-top

margin-bottomborder-bottom-width

margin-right

Osobina margin i centriranje Osobina margin, je jednaka

maksimumu osobina margin dva susedna elementa. Osobina margin se dodaje na udaljenost definisanu osobinama top, left, bottom, right

Centriranje kad je position relative#element{position:relative; margin:0

auto;}

Centriranje pomoću atributa display U roditeljskom elementu elementa

koji centriramo koristimotext-align: center; Element koji centriramo treba da

bude inline, odnosno najčešće display: inline-block;

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.

html i body elementi

html element ima veličinu ekrana, a body element ima veličinu dokumenta

Ukoliko je tekst manji od ekrana, boja body elementa će biti samo oko teksta, a boja html elementa po celom ekranu.

Primeri centriranja dokumenta pomoću body taga

Centriranje dokumenta fiksne širinebody {width: 800px;margin: 0 auto;} Centriranje dokumenta fleksibilne

širinebody {width: 80%;margin: 0 auto;}

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 HTML4

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, HTML4

Za primer sa kružnim dugmićima: • proleće • leto • jesen • zima odgovarajući HTML4 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<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></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 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= iso-8859-1 " />

<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. Opštine koje suodgovorile:

Primer liste sa stilom

<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> 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></ol></li>

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

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

Primer liste sa stilom

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;}

Rezultat stila liste

Formulari za popis osnovnih škola je poslat svim opštinama. Opštine koje su podnele prijave:

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

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

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

1. Aranđelovac • Borski okrug

1. Bor

Opštine koje nisu odgovorile:

• Bačka Topola• Lapovo

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;}

Rezultat stila liste

Formulari za popis osnovnih škola je poslat svim opštinama. Opštine koje su podnele prijave:

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

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

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

1. Aranđelovac • Borski okrug

1. Bor

Opštine koje nisu odgovorile:

• Bačka Topola• Lapovo

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 HTML4 i XHTML-u, samo se border u HTML4 odnosi na celu tabelu a u XHTML-u samo na okvir tabele (ne nasleđuje se).

Atributima cellpadding i cellspacing u HTML4 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, td.osnovni {border:2px solid red; padding:3px; border-spacing:0;}

table {width:100%;}

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 HTML4 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, jer je tabela block element.

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

Tabele redovi u HTML4

<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 HTML4 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 HTML4 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=iso-8859-1"> <style type="text/css"> table,td,th {font-family: "Verdana"; font-size: 12px> </style> </head> <body> <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> </table> </body>

Primer HTML4 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<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> table { font-family: "Verdana"; font-size: 12px; width: 100%; border: 1px solid; border- spacing: 0px;}

td, th {border: 1px solid;} </style></head>

<body> <table> <tr> <th style=“25%”>Ime:</th> <th style=“25%”>Prezime:</th> <th style=“50%”>Zvanje:</th> </tr>

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

Primer XHTML tabele<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <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)HTML4-dokumentu. Nije podržan u HTML5.

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

Frejmovi Početna komanda<!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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, HTML4 Atributi <frameset> taga u HTML4:

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. Nije potisnuta osobina.

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 vašeg č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 HTML4 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.rs" 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>

Element iframe Element iframe služi za ubacivanje

druge veb strane u određeni deo date strane.

Podržan je u HTML4, XHTML Transitional, i HTML5

Atributi su mu src, name, width, height

Primer elementa iframe-a<!DOCTYPE html><html><body><iframe src=“zaglavlje.htm"

width="200" height="200"></iframe><h1> Naslov </h1><p> Tekst </p></body></html>

Multimedija u HTML4 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 elementa <embed> u HTML4 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 elementa <embed> u HTM4

loop: defolt vrednost ovog atributa je FALSE: dokument se izvršava samo jednom. Ako je TRUE, dokument će ponavljati neograničen broj puta, a inače ako je broj, taj 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>

Atributi elementa <object> u XHTML-u classid: lokacija (url) implementacije

datog objekta, njen relativni deo codebase: apsolutna adresa

implementacije datog objekta codetype: tip implementiranog objekta

specificiranog sa classid data: lokacija konkretnog fajla koji

treba da se prikaže type: tip objekta specificiran sa data

Atributi elementa <object> u XHTML-u archive: lokacija modula potrebnih

za obradu objekta koji su arhivirani declare: ovaj objekat je pomoćni za

obradu pravog objekta koji se instancira kasnijom naredbom

standby: poruka koja se prikazuje dok se objekat obrađuje

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>

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>

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><meta http-equiv="content-type" content="text/html; charset= iso-8859-1 " /></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><meta http-equiv="content-type" content="text/html; charset= iso-8859-1 " /></head><body><h1> Restoran italijanske hrane </h1><form action=“naruci.php" method="post"><h2>Pice</h2>Veličina pice? <input type=“radio” name=“velicina" value=“velika" checked=“checked”> Velika

<br/><input type=“radio name=“velicina" value=“srednja"> Srednja <br/> <input type=“radio” name=“velicina" value=“mala"> Mala <br /><h3>Dodaci</h3><input type=“checkbox” name=“dodaci[]" value=“ljutapaprika"> Ljuta paprika <br /> <input type=“checkbox” name=“dodaci[]" value=“luk"> Luk <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

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>

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 value=“ana1”> Analiza 1</option> <option value=“ana2”> Analiza 2</option> <option value=“ort”> 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 grupe opcija se definiše atributom label taga čija vrednost prethodi grupi ali nije klikabilna <optgroup>.

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>

Korisni atributi: disabled Atribut disable je koristan da spreči slanje formulara koji nije

popunjen.<html><header><meta http-equiv="content-type" content="text/html; charset= iso-8859-1 " /></header><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 />

</form></body></html>

Korisni atributi: disabled

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” accesskey=“n”> Ne <br />

Internet Programiranje

Documents

WEB programiranje - fsb.unizg.hr · PDF fileWEB programiranje HTML5 semanticki ... JavaScript "zakrpa" za Internet Explorer Drugi nacin je korištenje boilerplate templata koji u sebi

Uvod u Web programiranje - Mikro knjiga: Vaa Internet

Univerzitet Singidunum - Internet Programiranje Pomoću Programskog Jezika JAVA

JAVA PROGRAMIRANJE - Pokusna GeneracijaJava: Programiranje za Internet i World Wide Web , Dario Sušanj, Znak, Zagreb, 1997. Ako dosad niste programirali bit e potrebno uložiti zna

03 HTML - Programiranje Internet aplikacija...Internet programiranje Čas 3 - HTML forme, frejmovi i layout DraženDrašković, Sanja Delčev, Jelica Cincović FORME HTML forme, frejmovi

Programiranje Za Internet 2

Uvod u programiranje Programiranje 1 Programiranje 1 (550 .... semestar/Programiranje 1/Predavanja... · Uvod u programiranje Programiranje 1 Programiranje 1 (550(550)) Poglavlje

JavaScript Internet programiranje

Seminarski rad Internet programiranje

Programiranje Internet aplikacija (IR4PIA)rti.etf.bg.ac.rs/rti/ir4pia/materijali/vezbe/1_HTML/arhiva/PIA_Vezbe2_HTML.pdf · Programiranje Internet aplikacija (IR4PIA) Čas 2 - HTML

PHP Internet programiranje

Us internet programiranje pomoću programskog jezika java

Programiranje Programiranje Internet Internet aplikacija aplikacija

PROGRAMIRANJE ZA INTERNET - fpmoz.ba · PDF . 2015/2016. PROGRAMIRANJE ZA INTERNET 7 • Princip rada PHP-a Na temelju zahtjeva korisnika izvršava se PHP kod, te se kreira HTML stranica

Internet aplikacije i mrežno programiranje

Boško Nikolić - Internet Programiranje Na Jeziku Java

2. Programiranje (rad) u mreži 2.1 Adresa računara 2.1.1 ...silab.fon.bg.ac.rs/wp-content/uploads/2016/05/RadUMrezi2017.pdf · 2. Programiranje (rad) u mreži Internet adresa 147.91.128.47

PROGRAMIRANJE GRAFIČKIH APLIKACIJAsalapura.com/www/PROGRAMIRANJE GRAFIČKIH aplikacija... · 2019. 4. 8. · 1. HTML UVOD Internet i HTML HTML (HyperText Markup Language) je veoma

Programiranje Internet apikacija...Programiranje Internet apikacija Čas 3 - HTML forme, frejmovi i layout Prof. dr Nikola Žarić HTML forme, frejmovi i layout FORME Uvod u forme

Programiranje za Internet - download.tutoriali.orgdownload.tutoriali.org/Tutorials/Internet/Programiranje_za... · Programiranje za Internet 1 1. Uvod 1.1. Internet i njegova organizacija