3. osnove html-a – 2.dio
Post on 13-Jan-2016
64 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related