Web dizajn

1. Web dizajn IV godina Informatički smer

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

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

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

5. 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, imeboje) • 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)

6. 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, imeboje) • 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, imeboje) • COLSPAN – broj kolona koje ćelija hedera spaja u jednu (broj) • ROWSPAN – broj redova koje ćelija hedera spaja u jedan (broj)

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

8. HTML – tabele • Primer tabele: <TABLE BORDER=3> <CAPTION> Raspored casova </CAPTION> <TR> <TH ROWSPAN=2>Rednibrojcasa</TH> <TH COLSPAN=5ALIGN=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>

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

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

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

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

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

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

15. 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-form-urlencoded, 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

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

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

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

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

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