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!

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 e-mail-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

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• Email adresa može biti definirana ovdje

– ACTION=”MAILTO:email@address.com”

–METHOD= get / post – Specificira korištenje POST ili GET metoda HTML-a

–NAME= Imenovanje forme

<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

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

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

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

TYPE=TEXTAREA• Omogućava unos teksta veće duljine (više

redaka)• <TEXTAREA NAME="Komentar"

ROWS=3 COLS=30 WRAP=PHYSICAL>• </TEXTAREA>

TYPE=TEXTAREA

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

TYPE=PASSWORD• Slova su prikazana sa “*”

Lozinka <INPUT TYPE="password" NAME=“lozinka" SIZE="40" MAXLENGTH="80">

TYPE=PASSWORD

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?

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

vrijednost spremljena pod 'VALUE'

SELECT• <SELECT NAME="Najbolji prijatelj?">• <OPTION VALUE=“Ivo">Ivo Ivić• <OPTION VALUE=“Mate">Mate Matić• <OPTION VALUE=“Jure"

SELECTED>Jure Jurić• </SELECT>

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 1row 1, cell 1 row 1, cell row 1, cell 22

row row 22, cell 1, cell 1 row row 22, cell , cell 22

Tablice

<TABLE>

<TR>

<TD>...</TD>

...

</TR>

...

</TABLE>

Ćelija

Redak

Tablica

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>

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>

HeadingAnother Heading

row 1, cell 1

row 1, cell 2

row 2, cell 1

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 &nbsp;

• Colspan - polje koje prekriva više stupaca• Rowspan – polje koje prekriva više redaka

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>

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>

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 Description

<table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

<caption> Defines a table caption

<colgroup> Defines groups of table columns

<col>Defines the attribute values for one or more columns in a table

<thead> Defines a table head

<tbody> Defines a table body

<tfoot> Defines a table footer

<table>Attribute Value Description

align leftcenterright

Aligns the table. Deprecated. Use styles instead.

bgcolor rgb(x,x,x)#xxxxxxcolorname

Specifies the background color of the table. Deprecated. Use styles instead.

border pixels Specifies the border width.Tip: Set border="0" to display tables with no borders!

cellpadding

pixels% Specifies the space between the cell walls and contents

cellspacing

pixels% Specifies the space between cells

<table>

Attribut

eValue Description

frame voidabovebelowhsideslhsrhsvsidesboxborder

Specifies how the outer borders should be displayed.Note: Must be used in conjunction with the "border" attribute!

rules nonegroupsrowscolsall

Specifies the horizontal/vertical divider lines.Note: Must be used in conjunction with the "border" attribute!

summary

text Specifies a summary of the table for speech-synthesizing/non-visual browsers

width %pixels Specifies the width of the table

<tr>

Attribu

teValue Description

align rightleftcenterjustifychar

Defines the text alignment in cells

bgcolor rgb(x,x,x)#xxxxxxcolorname

Specifies the background color of the table cell. Deprecated. Use styles instead.

char character

Specifies which character to align text on.Note: Only used if align="char"!

charoff pixels%

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

<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

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

HTML5• HTML 4.01 - donesen 24.12.1999• 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

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

• http://html5readiness.com/

Novi strukturalni elementi• <header>• <nav>• <section>• <article>• <aside>• <footer>

Datum i vrijeme• Time element

–<time datetime="2007-08-02T23:30Z">Fri, Aug 03 2007 at 09:30

</time>

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 valuevaluevaluevalue="0.6">Medium</meter>

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 valuevaluevaluevalue="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

M

� <p>The highlighted part below iswhere 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

Video i audio� Popularnost videa na

webu

� Komplicirano dodavanje (trenutno)

� Flash postao de factostandard

� “native support” u HTML5

Video i audio

� <video srcsrcsrcsrc="movie.ogg"idididid="video">...</video>

� <button onclickonclickonclickonclick="video.play();">Play

</button>

HTML5 forme

� <input typetypetypetype="datetime">

� <input typetypetypetype="date">

� <input typetypetypetype="time“>

� <input typetypetypetype="number">

� <input typetypetypetype="range">

Ostali primjeri

� <input typetypetypetype="email">

� <input typetypetypetype="url">

� <input listlistlistlist="title-list"><datalist idididid="title-list"><option valuevaluevaluevalue="...">

</datalist>