1 / 22

3. Osnove HTML-a – 2.dio

3. Osnove HTML-a – 2.dio. Upotreba obrazaca (formi) na web stranici, meta tagovi, validacija. 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.

keiji
Download Presentation

3. Osnove HTML-a – 2.dio

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 3. Osnove HTML-a – 2.dio Upotreba obrazaca (formi) na web stranici, meta tagovi, validacija M. Zekić-Sušac

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

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

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

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

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

  7. Checkbox • Omogućava izbor više ponuđenih opcija Tko 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

  8. Textarea – područje za upis teksta • Omogućava unos teksta veće duljine (više redaka) <TEXTAREA NAME="Komentar" ROWS=3 COLS=30 WRAP=PHYSICAL> </TEXTAREA> M. Zekić-Sušac

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

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

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

  12. Primjer forme • Za primjer upotrebe svih ovih elemenata na formi pogledajte primjer1...primjer10 u vježbi1: P2_primjer_forme.html M. Zekić-Sušac

  13. Meta tagovi u HTML-u U 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

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

  15. Postupak publiciranja stranice • stranicu treba najprije pohraniti na lokalni disk u .html ili .htm formatu • početnu stranicu treba nazvati “index.html”, radi lakšeg automatskog pozivanja s pomoću preglednika, a za ostale su nazivi proizvoljni • pregledati izgled stranice s pomoću preglednika (browser-a, npr. IE), te popraviti izgled ukoliko je potrebno M. Zekić-Sušac

  16. Postupak publiciranja stranice • 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 • osobna stranica se pohranjuje u direktorij: /public_html u osobnom direktoriju na serveru, nakon čega je javno dostupna svima M. Zekić-Sušac

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

  18. W3C Validator 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. M. Zekić-Sušac

  19. 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> Umetanje poveznice na validator Umetanje slike koja će biti poveznica M. Zekić-Sušac

  20. Rezultat validacije • Ukoliko je HTML kod na stranici usklađen sa W3C standardima, pojavit će ovaj rezultat validacije: M. Zekić-Sušac

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

  22. 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 M. Zekić-Sušac

More Related