03. HTML formatiranje slike, tabele, forme
Download
Report
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>