Download - 3. Osnove HTML-a – 2.dio
![Page 1: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/1.jpg)
M. Zekić-Sušac
3. Osnove HTML-a – 2.dio
Upotreba obrazaca (formi) na web stranici, meta tagovi, validacija
![Page 2: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/2.jpg)
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
![Page 3: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/3.jpg)
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.
![Page 4: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/4.jpg)
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
![Page 5: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/5.jpg)
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'.
![Page 6: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/6.jpg)
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:
![Page 7: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/7.jpg)
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>
![Page 8: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/8.jpg)
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>
![Page 9: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/9.jpg)
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”
![Page 10: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/10.jpg)
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.
![Page 11: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/11.jpg)
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:
![Page 12: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/12.jpg)
M. Zekić-Sušac
Primjer forme
Za primjer upotrebe svih ovih elemenata na formi pogledajte primjer1...primjer10 u vježbi1:
P2_primjer_forme.html
![Page 13: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/13.jpg)
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">
![Page 14: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/14.jpg)
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">
![Page 15: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/15.jpg)
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
![Page 16: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/16.jpg)
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
![Page 17: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/17.jpg)
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
![Page 18: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/18.jpg)
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.
![Page 19: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/19.jpg)
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
![Page 20: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/20.jpg)
Rezultat validacije
Ukoliko je HTML kod na stranici usklađen sa W3C standardima, pojavit će ovaj rezultat validacije:
M. Zekić-Sušac
![Page 21: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/21.jpg)
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
![Page 22: 3. Osnove HTML-a – 2.dio](https://reader033.vdocuments.site/reader033/viewer/2022061614/56814670550346895db393c0/html5/thumbnails/22.jpg)
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