Nastavni predmet WEB PROJEKTI Nastavni plan i program
Nastavni predmet: WEB PROJEKTI Nastavni plan i program: Web dizajner Trajanje: 4 sata Razred: prvi Pripremila: Renata Šepić, prof. savjetnik, Škola za grafiku, dizajn i medijsku produkciju
Dragi učenici i drage učenice, kako bismo vam olakšali učenje za vas smo pripremili materijale za samostalni rad. U ovoj prezentaciji su sadržaji koji se odnose na nastavni predmet: Web projekti – prva godina. Prezentacija sadrži pitanja za domaću zadaću i zadatak. Na kraju prezentacije nalaze se pitanja za ponavljanje gradiva. Vaši nastavnici će vam također pružati podršku u učenju na daljinu. Želimo vam uspješno učenje.
1. Koji su osnovni elementi za definiranje strukture tablice? 2. Koji su načini izrade složenih tablica? 3. Koji se atributi koriste za spajanje ćelija unutar tablice? 4. Koji se atributi koriste za razmak među ćelijama?
U ovoj ćete prezentaciji naučiti kako stvarati web obrasce koji omogućuju prikupljanje podataka od posjetitelja. § Obrasce koristimo kako bismo dobili povratnu informaciju od korisnika. Puno puta tražimo od korisnika registraciju ili popunjavanje ankete. § Obrasci su građeni pomoću polja (koja popunjava posjetitelj) i gumba, kojima se pokreću određene akcije. § Svako polje (<input type=„vrsta” />) mora imati obilježja name i id. § Svakom polju unaprijed se može dodijeliti određena vrijednost. Mnoga polja mogu ocijeniti unos posjetitelja. § Svaki obrazac mora imati submit gumb kojim se podaci iz obrasca šalju na adresu određenu obilježjem action taga <form>. Gumb se određuje tagom <input />.
Text - unos teksta u jednom redu Textarea – unos teksta u redovima i stupcima Checkbox – stavljamo kvačicu u kvadratić, moguć je višestruki izbor Radio – dodajemo točkicu u kružić, moguć samo jedan izbor Button Submit – potvrda unosa Button Reset – gumb koji čisti obrazac Dropdown – padajući izbornik
§ Svaki obrazac započinje oznakom <form> i završava </form>. § Element <form> ima sljedeće atribute: method – način slanja podataka. Moguće vrijednosti su get – podaci se šalju putem URL -a i post – podaci se šalju u tijelu HTTP zahtjeva action – putanja do stranice (poslužiteljske skripte) koja obrađuje podatke. Putanja može biti apsolutna ili relativna (e-mail adresu osobe kojoj se podaci s obrasca šalju ili Url datoteke koja će ih zaprimiti) enctype – način enkodiranja podataka, opisuje se tip podataka koji se šalje PRIMJER: <form method="post" action="spremi. Podatke. php"> </form> ili <form method=mailto: vašaadresa@gmail. com action=„post”>
§ Pomoću <input> elemenata moguće je, ovisno o vrijednosti atributa type, definirarti nekliko različitih vrsta polja obrazaca. § Ovo su osnovni atributi koji se koriste kod polja za unos teksta: type – postavljen na vrijednost text name – naziv polja koji se šalje zajedno s unesenim podacima value – početni tekst upisan u polju maxlength – maksimalni dozvoljeni broj znakova Primjer: placeholder – tekst koji daje primjer unosa <input type="text" name="ime"> ZADATAK U Notepadu napravi ova dva polja za unos. <input type="text" name="adresa" placeholder="Naziv ulice i kućni broj">
• Ukoliko želimo da odmah na početku polje bude ispunjeno nekim tektom, tad ćemo zadati atribut value: <input type=„text” name=„prezime” value=„unesi prezime”> Atribut value moguće je zadati većini obrazaca • <input type=„password” name=„lozinka”> Ovaj kod kreirat će element za unos lozinki. Posebnost polja za unos lozinke je u tome što, radi sigurnosti, znakovi koje korisnik upisuje nisu vidljivi na ekranu. • <textarea name=„opis” cols=„ 45” rows=„ 6”> </textarea> Ovaj element kreirat će element za unos dužeg teksta. Atributima cols i rows možemo odrediti koliko stupaca i redova teksta je vidljivo, no može se upisati i više teksta – automatski će se uz njega pojaviti klizna traka. rows – visina polja izražena brojem redova, cols – širina polja izražena brojem znakova ZADATAK U Notepadu napravi polje za unos lozinke Napravi polje širine 50 slovnih znakova i visoko 5 redova PRIMJER <p> U donji kvadrat veličine 10 redova i 30 sl. znakova možemo upisati tekst. </p> <textarea rows="10" cols="30"> Ovdje možemo upisivati tekst. </textarea>
• Koriste se kada se želi postići funkcionalnsot da posjetitelj odabere samo jednu vrijednost iz nekog konačnog popisa koji mu je ponuđen. Svaki kružić unutar izbornika predstavljen je jednim <input type=„radio”> elementom. Ovo su osnovni atributi koji se koriste kod ovog elementa: type – postavljen na vrijednost radio name – naziv polja koji se šalje zajedno s unesenim podacima value – vrijednost koja se šalje poslužitelju checked – označavanje polja • Za funkcionalnost je bitno da se svi elementi jednako zovu (isti name) • Kod onog kružića koji se želi odmah prikazati kao odabrana opcija, potrebno je pridijeliti atribut checked. ZADATAK Napravi kružni izbornik u Notepadu Primjer: <input type="radio" name="spol" value="m" checked>muški <input type="radio" name="spol" value=„z">ženski <input type="radio" name="spol" value="n">ne želim odgovoriti
§ Kontrolni kvadratići se koriste kada se poslužitelju želi omogućiti izbor od nijedne, jedne ili više ponuđenih mogučnosti. Svaki kvadratić prikazuje se pomoću jednog <input type=„checkbox”> elementa. § Ovo su osnovni atributi koji se koriste kod ovog elementa: type – postavljen na vrijednost checkbox name – naziv polja koji se šalje zajedno s unesenim podacima value – vrijednost koja se šalje poslužitelju (ne ispisuje se) checked – postavlja se ako kvačica treba biti unaprijed označena PRIMJER <input type="checkbox" name="obavijesti" value="da"> Da, želim primati obavijesti.
§ Popis ponuđenih opcija kod koje je moguće odabrati više od jedne opcije najčešće se ostvaruje pomoću popisa kvačica za označavanje (po jedna za svaku opciju). PRIMJER <input type="checkbox" name="interes" value="sport" checked>sport <input type="checkbox" name="interes" value="politika">politika <input type="checkbox" name="interes" value="kultura">kultura <input name=„slazemse” type=„checkbox” value=„da”> Ovaj element kreira polje u kojem korisnik može staviti kvačicu i tako potvrditi neku opciju. Samo ako korisnik potvrdi opciju šalje se varijabla čije ime ZADATAK odgovara imenu elementa (slazemse), a vrijednost iz Napravi ove kontrolne argumenta value (da). kvadratiće
§ Imamo gumb za prihvati/prosljeđivanje podataka i gumb za čišćenje obrazaca. Tekst koji se ispisuje na gumbu određen je vrijednošću atributa value. § Submit tip gumba će prosljediti sadržaj obrasca na adresu koju smo naveli kao vrijednost atrbita action za element <form>, dok će reset gumb počistiti obrazac i postaviti sve vrijednosti svih polja na početne. § Ovo su osnovni atributi koji se koriste kad se element input koristi kao tipka za slanje obrasca: type – postavljen na vrijednost submit name – naziv polja koji se šalje zajedno s podacima value – vrijednost koja se šalje na obradu ZADATAK Napravi u Notepadu Submit gumb PRIMJER – Submit tip gumba <input type="submit" value="Pošalji"> <button> <strong>Pošalji</strong>podatke </button>
§ Element <input> u kojem je svojstvu type dodijeljena vrijednost reset omogućava vraćanje vrijednosti forme na zadane tj. one koje su bile kada je forma otvorena. <form> <input type="checkbox" name="zanimanje" value="ucenik" checked>Učenik <input type="checkbox" name="zanimanje" value="student">Student <input type="checkbox" name="zanimanje" value="zaposlen">Zaposlen <input type="reset" value="Zadano"> </form> ZADATAK Napravi Reset gumb u Notepadu PRIMJER – Reset tip gumba <input type="reset" value="Očisti"> ili <button type="reset">Očisti</button>
§ HTML element <select> omogućava nam izbor jedne od mogućnosti iz padajućeg popisa. Pomoću vrijednosti svojstva name elementa <form> pristupamo izabranoj vrijednosti iz Java. Scripta. § Svaku od mogućnost umećemo u jedan od elemenata <option>. Između početne i završne oznake upisujemo tekst koji će se vidjeti u padajućem popisu. Ako želimo da neki element bude zadan, kao početna vrijednost html elementu <option> dodajemo svojstvo selected. <html> <head><title>Padajuci izbornik</title></head> <body> <form> <select name="voce" form="nabava"> <option value="jabuke">Jabuke</option> <option value="banane" >Banane</option> <option value="tresnje">Trešnje</option> <option value="jagode" selected>Jagode</option> </select> </form> </body> </html> PRIMJER: ZADATAK Napravite padajuću listu u Notepadu.
§ Pomoću atributa multiple moguće je dobiti listu za odabir u kojoj se može odabrati više od jedne vrijednosti. PRIMJER: <select name="grad" multiple> <option value="zg">Zagreb</option> <option value="st">Split</option> <option value="ri">Rijeka</option> <option value="os">Osijek</option> </select>
§ Kako bi se onemogućilo slanje neispravnih podataka, u preglednik su ugrađene određene mogućnosti provjere, odnosno validacije upisanih podataka. Atribut maxlength ograničava duljinu upisanoga teksta, te je moguća provjera i ograničenje unosa kod specijalnih tipova podataka. § Glavni i najčešći način validacije polja je provjera je li ono popunjeno (ako se radi o obaveznom polju). To se postiže pomoću atributa required koji je moguće postaviti na većini elemenata obrasca. § Polje na kojem je postavljen ovaj atribut mora biti popunjeno kako bi se obrazac mogao poslati poslužitelju. PRIMJER: <input type="text" name="ime" required>
<html> <head><title>Padajuci izbornik</title></head> <body><h 2> Elementi obrasca</h 2> <form name=Obrazac" method="post" action="obrada. asp"> Ime: <input type="text" name="txt. Ime" size="20" /> Lozinka: <input type="password" name="Lozinka" /> Pretplata: <input name="Pretplata" type="checkbox" value="da" checked /> Spol: muški <input name="Spol" type="radio" value="m" /> ženski<input name="Spol" type="radio" value="ž" /> NASTAVAK NA DRUGOJ STRANI
Država: <select name=„Država> <option value="hrv">Hrvatska</option> <option value="ita" selected>Italija</option> <option value="nje">Njemačka</option> <option value="fra">Francuska</option> </select> Komentar: <textarea name="Komentar" cols="20” rows="3"> </textarea> <input type="submit" value="Prihvati" /> <input type="reset" value="Očisti" /> </form> </body> </html>
1. Pomoću čega su građeni obrasci? 2. Kakvi sve obrasci mogu biti? 3. Kako unosimo polja za unos teksa? 4. Za što se upotrebljavaju atributi cols i rows? 5. Što znaš o kružnim izbornicima? 6. Kako se prikazuju kontrolni kvadratići? 7. Objasni Submit i Reset tip gumba. 8. Što je padajuća lista i kako se ona izrađuje?
Vaš zadatak je izraditi obrazac za naručivanje pizza. Pažljivo proučite prezentaciju. Ovaj obrazac sadrži sve elemente obrasca koji se mogu napraviti <input> tagom.
- Slides: 20