Upload
sylvie
View
76
Download
0
Embed Size (px)
DESCRIPTION
Internet Programiranje. Sadržaj predmeta. Cilj predmeta jeste d izajn 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 - PowerPoint PPT Presentation
Citation preview
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: <!-- komentar -->
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:   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:   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:
<img src="osam.gif" align="bottom">
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>
<h3> <A id="java"> Java </A> </h3><p>................</p>
<h3> <a id="uvodc"> Uvod u C </a> </h3><p>................</p>
</body></html>
Link na istu (X)HTML stranicuProgramiranja
Web i jezik HTML Java Uvod u C
Web i jezik HTML ................................
Java
................
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:[email protected]"> 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:[email protected]?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>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”/><title> Primer stranice sa eksternim stilom </title><link rel=“stylesheet” type=“text/css” href=“http://www.etf.rs/templates/etf2/css/size1.css”>
</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>
<style type=“text/css”>@import url("../stil.css")</style> </head>
Apliciranje stilova: primeri Primer internog apliciranja stila:<head>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”/><title> Primer stranice sa internim stilom </title>
<style type=“text/css”>img {border: solid;}</style> </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 type="text/css"> .centeredImage { text-align:center;}
</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
<html><head><link rel="stylesheet" type="text/css" href="stil.css"> </head><body>
<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
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;}
Primeri pozicioniranja pomoću display osobine
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
<html><head><link rel="stylesheet" type="text/css" href="stil3.css"> </head><body>
<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">
<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" />
</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 id="bg"><img alt="" src="img/nearthetop_b.jpg" width="100" />
</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.
</p>
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 {
position: absolute;top: 250px;left: 2%;}
#content {position:absolute;top: 0px;left: 30%;}
#navigation {position: absolute;top: 10px;left: 2%;}
/* #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;} */
a:visited {color: #669;}
a:hover {background-color: #fff;color: #339;}
Primer nasleđivanja: Autor nije definisao stil linkova
Primer nasleđivanja: Linkovi isti i predefinisanibody {
font-family: "Trebuchet MS", Verdana, Sans-serif;color:black; text-decoration: none;}
h2, h3 {color:#339}
a:link {color: red;font-family: Arial;font-weight: bold;text-decoration: none;}
a:visited {color: #669;}
a:hover {background-color: #fff;color: #339;}
Primer nasleđivanja: Linkovi isti i nedefinisani
Primer nasleđivanja: Neki linkovi definisani, neki nebody {
font-family: "Trebuchet MS", Verdana, Sans-serif;color:black; text-decoration: none;}
h2, h3 {color:#339}
#navigation a:link {color: red;font-family: Arial;font-weight: bold;text-decoration: none;}
a:visited {color: #669;}
a:hover {background-color: #fff;color: #339;}
Primer nasleđivanja: Neki linkovi definisani, neki ne
Stil za fiksno pozicioniranje: fixed.css#bg {
position: fixed;top: 250px;left: 2%;}
#content {position:absolute;top: 0px;left: 30%;}
#navigation {position: fixed;top: 10px;left: 2%;}
#navigation a {display:block}
Stil za fiksno pozicioniranje
Stil za relativno pozicioniranje: relative.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}
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>. . . . .
</ul>
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>. . . . .
</ol>
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>
</dl>
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
1. Bačka Topola 2. Subotica
• 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
1. Bačka Topola 2. Subotica
• 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 border="2" width=“100%” cellpadding="30" cellspacing="10">
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
<table border="3" cellpadding="5" cellspacing="5"> <tr>
<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">
<param name="src" value="sample.mov"> <param name="autoplay" value="true"> <param name="controller" value="false">
<embed src="sample.mov" width="160"
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> <!------ definicija elemenata forme ------> ... </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.
<input type=“reset" value="Poništi“ />
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
<button type="button” onClick= ”funkcijaZaProveru()”> <img src=slika.jpg /> </button>
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>
<li> <input type=”checkbox” name=“jezici[]” value=”jav”> Java</li></ul>
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>
<li> <input type=“radio” name=“racunar” value=“d”> Da </li><li> <input type=“radio” name=“racunar” value=“n”> Ne </li>
</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:
<input type=”hidden” name=”ident” value="08100-OEM-38069“ />
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
<form enctype="multipart/form-data" action="uploader.php" method=“post">
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:
[email protected]”>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">   Da <br />
<input type="radio" name="racunar" onclick="document.upitnik.posalji.disabled=false">   Ne <br />
<input type="submit" name="posalji" value="Pošalji" disabled="disabled">
</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 />