Ponovimo. HTML drugi dio

Transcription

1 HTML drugi dio Ponovimo Struktura HTML dokumenta Tagovi za formatiranje teksta (podebljano, paragraf, prelazak u novi red..) Entiteti (prazno mjesto, znakovi < i >) Linkovi i sidra Slike Liste (pobrojane, nepobrojane, liste definicija) Moraju biti ispravno ugnježdene!

2 Forme Obrasci ili forme predstavljaju načine interakcije s korisnikom unos podataka od strane korisnika kod web aplikacija. HTML tagovi omogućuju prikaz obrazaca da bi se podaci koje korisnik unese obradili (memorirali u datoteku ili bazu podataka ili poslali putem -a, ili obradili), potrebne su dodatne skripte CGI, JavaScript, VBScript, ASP, PHP... Opći oblik forme <FORM> -početak forme <INPUT> -traži informaciju na različite načine <SELECT> -izabire informaciju na različite načine </FORM> -završetak forme Postoji i <TEXTAREA> element koji omogućuje unos cijelog teksta

3 Form tagovi Tag Description <form> Defines a form for user input <input> Defines an input field <textarea> Defines a text-area (a multi-line text input control) <label> Defines a label to a control <fieldset> Defines a fieldset <legend> Defines a caption for a fieldset <select> Defines a selectable list (a drop-down box) <optgroup> Defines an option group <option> Defines an option in the drop-down box <button> Defines a push button <isindex> Deprecated. Use <input> instead Atributi <FORM> sadrži sljedeće atribute: ACTION = Specificira lokaciju programa koji će obraditi podatke unešene u formu adresa može biti definirana ovdje ACTION= MAILTO: @address.com METHOD= get / post Specificira korištenje POST ili GET metoda HTML-a NAME= Imenovanje forme

4 <Input> ALIGN = pozicioniranje CHECKED = Za checkbox i radio input tipove MAXLENGTH = Maksimalan broj slova dozvoljen za upis NAME = Imenovanje polja u formi radi identificiranja SIZE = Širina polja (mjereno u broju slova) SRC = Ako je input slika isto kao src kod <img> taga TYPE =... (!!!) TYPE atribut Element <INPUT> kao osnovni atribut ima tip 'TYPE' koji može biti: TEXT - za upis informacije PASSWORD - za upis lozinke (umjesto utipkanih znakova pojavljuju se '*'). RADIO - okrugli gumb za izbor jednog od ponuđenih CHECKBOX - kvadratni gumb za izbor više (ili nijednog) od ponuđenih FILE - za slanje (engl. upload) datoteke preko WEB-a SUBMIT - za tvorbu gumba na čiji pritisak (klik mišem) se podaci uneseni preko forme daju skriptama na obradu IMAGE - umjesto gumba za 'SUBMIT' koristi se izabrana slika RESET - poništavanje informacije upisane u obrasce HIDDEN - za prijenos nevidljive informacije u skipta za obradu

5 TYPE=TEXT <INPUT TYPE=TEXT NAME= ADDRESS SIZE=30 MAXLENGTH=10> prikazat će na stranici polje duljine 30 znakova, u koji možemo upisati maksimalno 10 znakova, koji se spremaju pod imenom 'ADRESA'. TYPE=TEXT

6 TYPE=RADIO Omogućava izbor samo jedne od ponuđenih opcija: Tko je tvoj najbolji prijatelj?<br> <INPUT TYPE=RADIO NAME="NP" VALUE= Ivo" CHECKED> Ivo Ivić<BR> <INPUT TYPE=RADIO NAME="NP" VALUE= Mate"> Mate Matić <BR> <INPUT TYPE=RADIO NAME="NP" VALUE= Jure"> Jure Jurić<P> TYPE=RADIO

7 TYPE=CHECKBOX Omogućava izbor više ponuđenih opcija Tko su tvoji prijatelji?<br> <INPUT TYPE=CHECKBOX NAME= Ivo VALUE="YES" CHECKED> Ivo Ivić<BR> <INPUT TYPE=CHECKBOX NAME= Mate VALUE="YES"> Mate Matić <BR> <INPUT TYPE=CHECKBOX NAME= Jure VALUE="YES" CHECKED> Jure Jurić<BR> TYPE=CHECKBOX

8 TYPE=TEXTAREA Omogućava unos teksta veće duljine (više redaka) <TEXTAREA NAME="Komentar" ROWS=3 COLS=30 WRAP=PHYSICAL> </TEXTAREA> TYPE=TEXTAREA

9 TYPE=SUBMIT Gumbi na formi omogućuju korisniku pokretanje neke akcije (klikom na dugme nešto će se dogoditi) neki skriptni jezik, tj. web aplikacija <INPUT TYPE=SUBMIT VALUE="Šalji obrazac!"><br> TYPE=SUBMIT

10 TYPE=PASSWORD Slova su prikazana sa * Lozinka <INPUT TYPE="password" NAME= lozinka" SIZE="40" MAXLENGTH="80"> TYPE=PASSWORD

11 TYPE=IMAGE <INPUT TYPE="image" NAME="Submit" SRC="submit.gif" WIDTH="70" HEIGHT="20"> TYPE=... FILE <INPUT TYPE="file" NAME="file" SIZE="40"> Kasnije potrebno posebnim jezicima obraditi zahtjev HIDDEN <INPUT TYPE= hidden NAME= subject VALUE= feedback > Skriveno polje. Kad se koristi?

12 SELECT Element <SELECT> brine se za popis (preko podelementa <OPTION>) i izbor ponuđenih podataka u obliku padajuće izborne liste <SELECT> 'NAME' gdje se upisuje ime liste (potrebno za obradu) <OPTION> 'VALUE' kojem se pridjeljuje vrijednost Izborom jedne od ponuđenih vrijednosti, te klikom na 'SUBMIT' gumb, šalje se pripadna ' SELECT <SELECT NAME="Najbolji prijatelj?"> <OPTION VALUE= Ivo">Ivo Ivić <OPTION VALUE= Mate">Mate Matić <OPTION VALUE= Jure" SELECTED>Jure Jurić </SELECT>

13 SELECT Tablice U izradi web stranice, tablice se osim standardnog ispisa podataka koriste se i za pravilno i precizno pozicioniranje različitih elemenata stranice. Tablica se definira s tagom <table> Tablica se dijeli na retke s <tr> tagom, a svaki redak se dijeli na polja podataka s <td> tagom. td - "table data" sadržaj polja podatka Polje podataka može sadržati text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> row 1, cell 1 row 1, cell 2 row 2,, cell 1 row 2,, cell 2

14 Tablice <TABLE> <TR> <TD>...</TD>... </TR>... </TABLE> Redak Tablica Ćelija Tablice Ako ne specificiramo border atribut tablica će biti ispisana bez rubova ako želimo prikazati rub, moramo koristiti border atribut <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table>

15 Tablice Naslovi u tablicama definiraju se pomoću <th> taga. Naslovi polja mogu predstavljati naslove stupaca ili naslove redaka <table border="1"> <tr> <th>heading</th> <th>another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Heading row 1, cell 1 row 2, cell 1 Another Heading row 1, cell 2 row 2, cell 2 Prazna polja Ukoliko je neko polje prazno, većina preglednika neće ispravno prikazati tablicu Preporuka: ako morate imati prazno polje upišite Colspan - polje koje prekriva više stupaca Rowspan polje koje prekriva više redaka

16 Primjeri tablica Tablica s 2 retka i 2 stupca: <table border="0"> <tr> <td>cell 1</td><td>Cell 2</td> </tr> <tr> <td>cell 3</td><td>Cell 4</td> </tr> </table> Primjeri tablica Prethodni primjer sa rubom ( border) <table border="1"> <tr> <td>cell 1</td><td>Cell 2</td> </tr> <tr> <td>cell 3</td><td>Cell 4</td> </tr> </table>

17 Primjeri tablica Korištenje atributa border, cellspacing, i cellpadding <table border="10" cellspacing="20" cellpadding="5"> <tr> <td>cell 1</td><td>Cell 2</td> </tr> <tr> <td>cell 3</td><td>Cell 4</td> </tr> </table> Primjeri tablica Korištenje atributa colspan <table border="1"> <tr> <td colspan="2">cell 1 and Cell 2</td> </tr> <tr> <td>cell 3</td><td>Cell 4</td> </tr> </table>

18 Primjeri tablica Korištenje atributa rowspan <table border="1"> <tr> <td rowspan="2">cell 1 and Cell 3</td> <td>cell 2</td> </tr> <tr> <td>cell 4</td> </tr> </table> Tagovi tablica Tag <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer

19 <table> Attribute Value align bgcolor border cellpaddi ng cellspacin g left center right rgb(x,x,x) #xxxxxx colorname pixels pixels % pixels % Description Aligns the table. Deprecated. Use styles instead. Specifies the background color of the table. Deprecated. Use styles instead. Specifies the border width. Tip: Set border="0" to display tables with no borders! Specifies the space between the cell walls and contents Specifies the space between cells <table> Attribut e frame rules summar y width Value Description void above below hsides lhs rhs vsides box border none groups rows cols all text % pixels Specifies how the outer borders should be displayed. Note: Must be used in conjunction with the "border" attribute! Specifies the horizontal/vertical divider lines. Note: Must be used in conjunction with the "border" attribute! Specifies a summary of the table for speechsynthesizing/non-visual browsers Specifies the width of the table

20 <tr> Attribu te align bgcolor char charoff Value right left center justify char rgb(x,x,x ) #xxxxxx colorna me characte r pixels % Description Defines the text alignment in cells Specifies the background color of the table cell. Deprecated. Use styles instead. Specifies which character to align text on. Note: Only used if align="char"! Specifies the alignment offset to the first character to align on. Note: Only used if align="char"! valign top Specifies the vertical text alignment in cells Tablice Ako koristite elemente thead, tfoot i tbody elemente, morate koristiti sva tri elementa upravo ovim redoslijedom <thead>, <tfoot> te <tbody>, tako da browser primi podnožje prije sadržaja tablice. Ovi se elementi koriste unutar table elementa

21 <div> div tag definira odjeljak (division) u dokumentu Grupiranje blok elemenata kako bi se kasnije mogao promijeniti dizajn (CSS) <div style="color:#ff0000;"> <h4>this is a header in a div section</h4> <p>this is a paragraph in a div section</p> <div> div tag može sadržavati gotovo bilo koji drugi tag Razlikovati <div> i <p> tagove Često se <div> mora identificirati (id atribut) kako bi se mogao pronaću u npr. CSS-u PREPORUČENO: Za dizajn stranice (pozicioniranje elemenata) radije koristiti <div> nego tablice

22 <span> Kao i div, logicki grupira elemente Često se koristi da bi se dio teksta mogao identificirati i time promijeniti njegov izgled Npr: <p>moja majka ima<span class="blue">plave</span> oči.</p> Semantički uredan meni <div id= menu > <ul> <li><a href= index.php >Home</a></li> <li><a href= about.php >About</a></li> <li><a href= contact.php >Contact</a></li> <ul> </div>

23 HTML5 HTML donesen HTML5 je još u razvoju W3C + WHATWG (Web Hypertext Application Technology Working Group ) Usvojena pravila Nove značajke temeljene na HTML, CSS, DOM i JavaScript Smanjiti potrebu za vanjskim pluginovima Bolje manipuliranje greškama Više markupa manje skripti Neovisan o sklopovlju (mobilni uređaji) Javnosti vidljiv proces razvoja

24 Svojstva Canvas element za crtanje Video i audio elementi za medije Bolje podržano lokano offline pohranjivanje Novi elementi temeljeni na sadržaju (article, header, nav, section) Novi elementi forme (calendar, date, time, search..) Podrška preglednika

25 Novi strukturalni elementi <header> <nav> <section> <article> <aside> <footer> Datum i vrijeme Time element <time datetime=" t23:30z"> Fri, Aug at 09:30 </time>

26 Meter Mjerenje vrijednosti i prikaz Korisno za: User rating (npr. Youtube video) Kod pretraživača podudarnost rezultata sa traženim pojmom Iskorištenost memorijeskog prostora Meter <meter>60%</meter> <meter>3/5</meter> <meter>6 blocks used (out of 10 total)</meter> <meter value="0.6">medium</meter>

27 Progress Prikaz napretka nekog posla Masovno korišten u desktop aplikacijama Radi u kombinaciji sa skriptnim jezicima <progress>step 3 of 6</progress> <progress>50% Complete</progress> <progress value="0.5"> Half way! </progress> M Označen (Marked ili Highlighted) tekst Ne miješati sa<em> Točka interesa Korisno za: Označavanje važnog dijela programskog koda Označavanje teksta koji je pojam pretraživanja

28 M <p>the highlighted part below is where the error lies:</p> <pre><code>var i: Integer; begin i := <m>1.1</m>; end.</code></pre> Canvas Dinamička i interaktivna grafika Crtanje slika korištenjem API-ja Linije, zakrivljene linije, likovi, popunjavanja,... Korisno za: Grafove Igre

29 Video i audio Popularnost videa na webu Komplicirano dodavanje (trenutno) Flash postao de facto standard native support u HTML5 Video i audio <video src="movie.ogg" id="video">...</video> <button onclick="video.play();"> Play </button>

30 HTML5 forme <input type="datetime"> <input type="date"> <input type="time > <input type="number"> <input type="range"> Ostali primjeri <input type=" "> <input type="url"> <input list="title-list"> <datalist id="title-list"> <option value="..."> </datalist>