Transcript 03. HTML formatiranje slike, tabele, forme

IV godina
Informatički smer
HTML – slike
 <IMG>
 Definiše sliku. Nema zatvarajući element.
 Atributi:
 SRC – obavezan atribut; definiše link do slike. Slika mora biti u
istom direktorijumu kao HTML strana ili se navodi put do nje.
Obavezno je navesti i ekstenziju slike (URL)
<IMG SRC=“slika.jpg”>








ALIGN – zastareo; poravnanje (top, bottom, middle, left, right)
ALT – alternativni tekst ukoliko slika ne može da se prikaže (tekst)
BORDER – zastareo; širina okvira (broj u pikselima)
HEIGHT – visina slike u pikselima ili drugoj veličini (broj)
WIDTH – širina slike u pikselima ili drugoj veličini (broj)
HSPACE – zastarelo; leva i desna margina oko slike (broj)
VSPACE – zastareo; gornja i donja margina oko slike (broj)
USEMAP – definiše sliku kao mapiranu (#ime_mape)
HTML – slike
 <MAP> ... </MAP> je poseban element kojim se koordinatama
opisuju različita područja slike
 Atributi:
 NAME – naziv mape koji se obavezno mora navesti u tagu
<IMG> (ime)
 <AREA> poseban tag u okviru <MAP> taga kojim se navodi
oblast u okviru slike.
 Atributi:
 COORDS – koordinate oblasti (za kvadrat tačke gornjeg levog i
donjeg desnog ugla x1,y2,x2,y2; za krug tačka centra i poluprečnik
x,y,r; za poligon sve tačke x1,y1,x2,y2,...,xn,yn)
 SHAPE – oblik oblasti (default, rect, circle, poly)
 HREF – hiperlink koji oblast otvara (URL)
 ALT – alternativni tekst (tekst)
HTML – slike
 TARGET – metu gde se otvara link (_blank, _parent, _self, _top)
 Sintaksa za mapiranje slike je sledeća: (prvo se deviniše mapa a
potom se ta mapa poziva na sliku)
<MAP NAME=“mapa">
<AREA COORDS="10,10,49,49“ SHAPE=“rect”
HREF="http://www.google.com/">
<AREA COORDS="60,10,99,49” SHAPE=“rect”
HREF="http://www.facebook.com">
<AREA COORDS="0,0,159,59" SHAPE=“rect”
HREF=“slika2.jpg">
</MAP>
<IMG SRC=“slika1.jpg" USEMAP=“#mapa”>
 Ukoliko je potrebno da cela slika bude link ka nekoj strani,
onda se slika ugnjezdi u tag <A>
<A HREF="http://www.google.rs/"><IMG SRC=“slika.jpg"> </A>
HTML – tabele
 <TABLE> … </TABLE>
 Definisanje tabele. Tabele se mogu koristiti i za organizovanje
strane (zastareo način pravljenja strane).
 Atributi:
 ALIGN – zastareo; poravnanje (left, center, right)
 BGCOLOR – zastareo; boja pozadine (#rrggbb, ime boje)
 BORDER – debljina okvira u pikselima (broj)
 CELLPADDING – zastareo; margina između okvira i sadržaja (broj)
 FRAME – zastareo; koje linije spoljnog okvira će biti vidljive (void,
above, below, hsides, lhs, rhs, vsides, box, border)
 RULES – zastareo; koje linije unutrašnjeg okvira će biti vidljive
(none, groups, rows, cols, all)
 WIDTH – zastareo; širina tabele u pikelima ili procentima (broj)
HTML – tabele
 U okviru taga <TABLE> moraju se naći još neki tagovi:
 <TR> … </TR>
 Definiše početak i kraj reda u tabeli.
 Atributi:
 ALIGN – zastareo; poravnanje (right, left, center, justify)
 BGCOLOR – zastareo; boja pozadine (#rrggbb, ime boje)
 VALIGN – zastareo; vertikalno poravnanje (top, middle, bottom)
 <TH> … </TH>
 Ćelije zaglavlja (obično boldiran i centriran tekst).
 Atributi:
 ALIGN – zastareo; poravnanje (left, right, center, justify)
 BGCOLOR – zastareo; boja pozadine (#rrggbb, ime boje)
 COLSPAN – broj kolona koje ćelija hedera spaja u jednu (broj)
 ROWSPAN – broj redova koje ćelija hedera spaja u jedan (broj)
HTML – tabele
 HEIGHT – zastareo; visina u pikselima ili procentima (broj)
 WIDTH – zastareo; širina u pikselima ili procentima (broj)
 VALIGN – zastareo; vertikalno poravnanje (top, middle, bottom)
 <TD> … </TD>
 Standardna ćelija tabele.
 Atributi isti kao kod <TH> taga.
 <CAPTION> … </CAPTION>
 Naslov tabele, piše se odmah nakon otvorenog <TABLE> taga.
 Atributi:
 ALIGN – zastareo; poravnanje (left, right, top, bottom)
 Postoji još nekoliko tagova vezanih za tabele, ali nisu neophodni
te neće biti navedeni.
HTML – tabele
 Primer tabele:
<TABLE BORDER=3>
<CAPTION> Raspored casova </CAPTION>
<TR>
<TH ROWSPAN=2> Redni broj casa </TH>
<TH COLSPAN=5 ALIGN=CENTER>Dani u nedelji</TH>
</TR>
<TR>
<TH> Ponedeljak </TH></TH> Utorak </TH><TH> Sreda </TH>
<TH> Cetvrtak </TH><TH> Petak</TH>
</TR>
<TR> <TH> 1</TH> <TD> Mat</TD> <TD> Srp </TD> <TD> Hem </TD> <TD> ...
</TD> <TD> ... </TD></TR>
…
</TABLE>
HTML – forme
 <FORM> … </FORM>
 Pravljenje formi koje korisnik može da popunjava (za unos
podataka ili pokretanje akcije od strane čitaoca HTML strane).
 Atriburi:
 ACCEPT-CHARSET: set karaktera koji su dozvoljeni u formi (ime






seta, npr. UTF-8)
ACTION: gde se šalju podaci iz forme kada je popunjena, na koji
server (URL)
AUTOCOMPLETE: novi atribut; da li će forma imati automatsko
popunjavanje (on, off )
METHOD: HTTP metoda koja se koristi pri slanju forme (get, post)
NAME: ime forme (ime)
NOVALIDATE: novi atribut; da formane mora biti verifikovana pri
prijemu
TARGET: gde će biti otvoren odgovor (_blank, _self, _parent, _top)
HTML – forme
 Forma može imati jedan ili više od sledećih elemenata:
 <INPUT>
 Polje u koje korisnik unosi podatke.
 Atributi:
 TYPE:najbitniji atribut; tip <INPUT> elementa (button,
checkbox, color, date, datetime, datetime-local, email, file,
hidden, image, month, number, password, radio, range, reset,
search, submit, tel, text, time, url, week)
 ACCEPT: tipovi fajlova koje server podržava (audio/*, video/*,
image/*, MIME tip – spisak definisanih tipova na strani
http://www.iana.org/assignments/media-types)
 ALIGN: zastareo; poravnanje (left, right, top, middle, bottom)
 ALT: alternativni tekst ako je u pitanju slika (tekst)
 AUTOCOMPLETE: novo; automatsko popunjavanje (on, off )
HTML – forme
 AUTOFOCUS: novo; pri otvaranju strane automatski se fokusira







taj element
CHECKED: da je polje automatski čekirano ako je izabran tip
checkbox ili radio
DISABLED: da je element onemogućen
FORM: novo; jedna ili više formi kojima element pripada (id
forme)
FORMACTION: novo; URL fajla koji će obraditi input kontrolu
nakon prijavljivanja za tipove submit i image (URL)
FORMENCTYPE: novo; kako če forma biti dekodirana za tipove
submit i image (application/x-www-form-urlencoded,
multipart/form-data, text/plain)
FORMMETHOD: novo; metoda slanja podataka za submit i
image (get, post)
FORMNOVALIDATE: novo; da se element ne mora verifikovati
HTML – forme
 FORMTARGET: novo; gde da se prikaže odgovor sa servera








(_blank, _self, _top, _parent, ime rama)
HEIGHT: novo; visina u pikselima samo za image (broj)
LIST: novo; odnosi se na tag <DATALIST> koji sadrži opcije za
<INPUT> (id dataliste)
MAX: novo; najveća vrednost za element (broj, datum)
MAXLENGTH: najveći broj karaktera koji se može uneti (broj)
MIN: novo; najmanja vrednost elementa (broj)
MULTIPLE: novo; da korisnik može uneti više od jedne vrednosti
NAME: ime <INPUT> elementa (ime)
PATTERN: novo; standardna vrednost koja mora biti uneta, npr.
[A-Za-z]{3} je da je moguće 3 slova uneti
 PLACEHOLDER: novo; hint šta treba biti napisano, siva
slova (tekst)
HTML – forme
 READONLY: da je element samo za čitanje
 REQUIRED: novo; da polje mora biti popunjeno pre prijavljivanja





forme
SIZE: širina elementa u karakterima (broj)
SRC: URL slike koja se koristi za prijavu, samo za tip IMAGE
(URL)
STEP: novo; korak za koliko se brojevi povećavaju, npr. (broj)
VALUE: vrednost elementa (tekst)
WIDTH: novo; širina elementa u pikselima za tip IMAGE (broj)
 <DATALIST> … </DATALIST>
 Novi tag koji definiše listu opcija za <INPUT> element.
<input list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
</datalist>
HTML – forme
 <TEXTAREA> … <TEXTAREA>
 Oblast u kojoj je napisan tekst u više redova u formi.
 Atributi:
 AUTOFOCUS: novo; da li je automatski fokusirana oblast po
učitavanju strane
 COLS: vidljiva širina polja (broj)
 DISABLED: da oblast bude isključena
 FORM: novo; jedna ili više formi kojima pripada oblast (id forme)
 MAXLENGTH: novo; maksimalni broj karaktera dozvoljen (broj)
 NAME: ime oblasti (tekst)
 PLACEHOLDER: novo; hint kao opis oblasti (tekst)
 READONLY: da je oblast samo za čitanje
 REQUIRED: novo; da mora biti popunjena
 ROWS: vidljiv broj linija oblasti (broj)
 WRAP: novo; kako će se tekst širiti (hard, soft)
HTML – forme
 <BUTTON>
 Definiše dugme.
 Atributi:
 AUTOFOCUS: novo; fokus na dugme
 DISABLED: da li je onemogućeno
 FORM: novo; jedna ili više formi kojima pripada (id forme)
 FORMACTION: novo; gde se šalju podaci za tip submit (URL)
 FORMENCTYPE: novo; način dekodiranja od strane forme pre
slanja na server za tip submit (application/x-www-formurlencoded, multipart/form-data, text/plain)
 FORMMETHOD: novo; koji HTTP metod slanja se koristi samo
za submit (get, post)
 FORMNOVALIDATE: novo; da se podaci iz forme ne verifikuju,
za submit
HTML – forme
 FORMTARGET: novo; gde se otvara odgovor, za submit (_blank,
_self, _parent, _top, ime okvira)
 NAME: ime dugmeta (tekst)
 TYPE: tip dugmeta (button, submit, reset)
 VALUE: tekst koji će biti ispisan na dugmetu (tekst)
 <SELECT> … </SELECT>
 Padajuća lista.
 Atributi:
 AUTOFOCUS: novo; fokus na opcije
 DISABLED: da je onemogućena padajuča lista
 FORM: novo; kojim formama pripada (id forme)
 MULTIPLE: da je moguće od jednom izabrati više opcija
 NAME: ime liste (tekst)
 REQUIRED: novo; da je obavezno biranje vrednosti
 SIZE: broj vidljivih opcija (broj)
HTML – forme
 <OPTION> … </OPTION>
 Tag koji definiše opciju i piše se u okviru <SELECT> ili
<DATALIST> taga.
 Atributi:
 DISABLED: da je onemogućena opcija
 LABEL: opis opcije (tekst)
 SELECTED: standardno selektovana opcija
 VALUE: vrednost koja se šalje serveru (tekst)
<select>
<option value="volvo">Volvo</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
HTML – forme
 <OPTGROUP> … </OPTGROUP>
 Za grupisanje opcija koje imaju neku vezu.
 Atributi:
 DISABLED: onemoogućena grupa
 LABEL: opis (tekst)
<select>
<optgroup label=„Švedski automobili">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label=„Nemački automobili">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
HTML – forme
 <FIELDSET> … </FIELDSET>
 Da se grupišu slični elementi u okviru forme. Crta okvir oko
odvojenih elemenata.
 Atributi:
 DISABLED: novo; da je grupa isključena
 FORM: novo; forme kojima pripada (id forme)
 NAME: novo; ime grupe (tekst)
 <LEGEND> … </LEGEND>
 Naslov <FIELDSET> elementa
 Atributi:
 ALIGN: zastareo; poravnanje (_top, _bottom, _left, _right)
<form> <fieldset>
<legend>Podaci:</legend>
Ime: <input type="text"><br>
Email: <input type="text">
</fieldset> </form>
HTML – forme
 <LABEL> … </LABEL>
 Labela za <INPUT> tag. Nema posebnu funkciju, samo vezuje
element za opciju koja je odabrana kada se mišem klikne.
 Atributi:
 FOR: za koji element forme se labela vezuje (id elementa)
 FORM: novo; kojim formama pripada (id forme)
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>