1 / 20

Web dizajn

Web dizajn. 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 )

emera
Download Presentation

Web dizajn

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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>

More Related