M. Zekić-Sušac

3. Osnove HTML-a – 2.dio

Upotreba obrazaca (formi) na web stranici, meta tagovi, validacija

M. Zekić-Sušac

Upotreba formi za unos podataka

Obrasci ili forme predstavljaju načine interakcije s korisnikom (odnosno unos podataka od strane korisnika), a koriste se kod web aplikacija.

HTML tagovi omogućuju prikaz obrazaca, ali 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 u nekom od skriptnih jezika: CGI, JavaScript, VBScript, ASP, PHP ili programske jezike

Korisnik može podatke unijeti na više načina: slobodnim upisom teksta, ili putem ponuđenih opcija

Glavni tag za prikaz forme je <FORM> Unutar njega dolazi jedan ili više <INPUT> i/ili <SELECT>

elemenata

M. Zekić-Sušac

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 Osim INPUT elementa postoji i

<TEXTAREA> element koji omogućuje unos puno više informacije nego se to preko jednoredčanog obrasca može unijeti.

M. Zekić-Sušac

Element INPUT

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

Najčešće ćemo koristiti tipove: TEXT, RADIO, CHECKBOX i SUBMIT

M. Zekić-Sušac

Unos teksta u polje za tekst

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

M. Zekić-Sušac

Radio-button

Omogućava izbor samo jedne od ponuđenih opcija:Tko je tvoj najbolji prijatelj?<BR><INPUT TYPE=RADIO NAME="NP"VALUE="Pajo" CHECKED> Pajo Patak<BR><INPUT TYPE=RADIO NAME="NP"VALUE="Šiljo"> Šiljo <BR><INPUT TYPE=RADIO NAME="NP"VALUE="Miki"> Miki Maus<P>Izgledat će ovako:

M. Zekić-Sušac

Checkbox

Omogućava izbor više ponuđenih opcijaTko su tvoji prijatelji?<BR><INPUT TYPE=CHECKBOX NAME="Pajo“ VALUE="YES" CHECKED>

Pajo Patak<BR><INPUT TYPE=CHECKBOX NAME="Šiljo“ VALUE="YES"> Šiljo <BR><INPUT TYPE=CHECKBOX NAME="Miki“ VALUE="YES" CHECKED>

Miki Maus<BR><INPUT TYPE=CHECKBOX NAME="Daba“ VALUE="YES"> Hromi

Daba<P>

M. Zekić-Sušac

Textarea – područje za upis teksta

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

M. Zekić-Sušac

Gumbi na formi

Gumbi na formi omogućuju korisniku pokretanje neke akcije (klikom na dugme nešto će se dogoditi) – za akciju je potreban neki skriptni jezik, tj. web aplikacija<INPUT TYPE=SUBMIT VALUE="Šalji

obrazac!"><BR>

<INPUT TYPE=RESET VALUE="Briši"><P>

- Prikazat će se dva gumba: jedan na kojem piše “Šalji” i drugi na kojem piše “Briši”

M. Zekić-Sušac

Element SELECT

Element <SELECT> brine se za popis (preko podelementa <OPTION>) i izbor ponuđenih podataka u obliku padajuće izborne ponude (menu-a).

<SELECT> ima argument 'NAME' gdje se upisuje ime menu-a (potrebno za obradu), a <OPTION> argument 'VALUE' kojoj se pridjeljuje vrijednost, obično povezana s onom koja se prijavljuje. Izborom jedne od ponuđenih vrijednosti, te klikom na 'SUBMIT' gumb, šalje se pripadna vrijednost spremljena pod 'VALUE'. Program za obradu će to adekvatno protumačiti i obraditi.

M. Zekić-Sušac

Primjer SELECT

<SELECT NAME="Najbolji prijatelj?"><OPTION VALUE="Pajo">Pajo Patak<OPTION VALUE="Šiljo">Šiljo<OPTION VALUE="Miki" SELECTED>Miki<OPTION VALUE="Daba">Daba</SELECT>- Prikazat će listu opcija za izbor gdje će korisnik

klikom na strelicu za izbor izabrati željenu opciju- Izgledat će ovako:

M. Zekić-Sušac

Primjer forme

Za primjer upotrebe svih ovih elemenata na formi pogledajte primjer1...primjer10 u vježbi1:

P2_primjer_forme.html

M. Zekić-Sušac

Meta tagovi u HTML-uU zaglavlju HTML dokumenta (<head>...</head>) koriste se <meta> tagovi za

definiranje ključnih riječi, opisa stranice, ime autora, programa koji je generirao stranicu, skupa znakova koji se koristi za posebne (hrv) znakove, i dr.

Primjer nekih meta tagova: naredba za skup znakova za hrvatske dijakritičke znakove: Najčešće su u upotrebi ova dva skupa znakova:

<meta http-equiv="Content-Type“ content="text/html; charset=windows-1250">

ili<meta http-equiv="Content-Type“ content="text/html; charset=iso-8852">

(Ukoliko se na Vašoj stranici ne prikazuju hrv. znakovi č,ž,š,đ na web poslužitelju, ovu gore naredbu treba kopirati u zaglavlje svake html stranice.)

naredba za naziv programa koji je generirao stranicu:<meta name="GENERATOR" content="Microsoft FrontPage Express

2.0">

M. Zekić-Sušac

Meta tagovi - nastavak

naredba za opis stranice:<meta name="description" content=" Pero

Peric – home page"> naredba za ključne riječi u stranici:

<meta name="keywords" content=" Pero, Perić,

contact, address, interests, biography"> naredba za ime autora:

<META NAME="author" content=Pero Peric">

M. Zekić-Sušac

Postupak publiciranja stranice

1. stranicu treba najprije pohraniti na lokalni disk u .html ili .htm formatu

2. početnu stranicu treba nazvati “index.html”, radi lakšeg automatskog pozivanja s pomoću preglednika, a za ostale su nazivi proizvoljni

3. pregledati izgled stranice s pomoću preglednika (browser-a, npr. IE), te popraviti izgled ukoliko je potrebno

M. Zekić-Sušac

Postupak publiciranja stranice

4. s pomoću nekog od programa koji podržavaju FTP (File Transfer Protokol) za prijenos datoteka, npr. FTP Explorer, CuteFTP, WSFTP, FTP, ili s pomoću CARNet-ovog Self-care alata

5. osobna stranica se pohranjuje u direktorij: /public_html u osobnom direktoriju na serveru, nakon čega je javno dostupna svima

Validacija HTML-a na stranici W3C organizacija nudi uslugu validiranja odnosno

provjere ispravnosti upisanih naredbi HTML-a, XHTML-a, CSS-a, MathML i dr. jezika, te njihovu usklađenost sa standardima propisanim od strane W3C .

Usluga je dostupna putem: Polazne stranice www.w3c.org, desni izbornik,

„Validators, Unicord and other software”, ili direktno na stranici: http://validator.w3.org

M. Zekić-Sušac

W3C Validator

M. Zekić-Sušac

Na web mjestu http://validator.w3.org moguće je validirati web stranicu koja je na nekom web poslužitelju (upisom URI adrese), uploadirati lokalnu datoteku, ili direktno upisati naredbe.

Naredba za pozivanje validacije

Ukoliko želimo validirati stranicu koja će biti na nekom web poslužitelju, za validaciju da li je stranica usklađena s XHTML 1.0 standardom potrebno je u stranicu umetnuti ovu naredbu:

<a href="http://validator.w3.org/check?uri=referer">

<img src=http://www.w3.org/Icons/valid-xhtml10 alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0"/>

</a>

M. Zekić-Sušac

Umetanje poveznice na validator

Umetanje slike koja će biti poveznica

Rezultat validacije

Ukoliko je HTML kod na stranici usklađen sa W3C standardima, pojavit će ovaj rezultat validacije:

M. Zekić-Sušac

Vježba

Umetnite naredbu za validator u posljednji primjer koji smo obradili na satu i pokrenite validaciju.

U svoju osobnu web stranicu (polaznu) umetnite naredbu za validaciju XHTML-a i pokrenite validaciju, te ispravite greške ukoliko ih program pronađe.

M. Zekić-Sušac

M. Zekić-Sušac

Literatura

• Essert, M., Web programiranje, materijali s predavanja, http://www.mathos.hr/wp, 20.02.2008.)

• Wikipedia, www.wikipedia.org, 28.02.08.• W3C Consortium, www.w3c.org, 28.02.08.• M. Zekić-Sušac, Računarski praktikum 3, materijali s

predavanja, http://www.mathos.hr/rp3, 28.02.08.• http://archive.ncsa.uiuc.edu/General/Internet/WWW/

HTMLPrimer.html - NCSA html beginner’s guide