Izrada web stranice - kontakt e-mailom ili obrascem

Slanje email poruke pomoću poveznice

Iako ovaj dio pripada u poveznice, izdvojili smo ga radi lakšeg snalaženja.

Želimo li dopustiti osobama da nas kontaktiraju preko web stranice to možemo napraviti na više načina.
Najjednostavniji način je pomoću poveznice:

Za definiranje hiperveze na adresu elektroničke pošte koristimo atribut href, u kojem, umjesto oznake protokola koristimo oznaku "mailto:" Nakon oznake "mailto", zapisujemo adresu elektroničke pošte na koju želimo da se poruka pošalje.
Klikom na danu hipervezu korisniku će se otvoriti prozor za pisanje poruke zadanog programa za slanje i primanje elektroničke pošte.

Primjer:

<a href="mailto:kontakt@proba.hr">Kontakt</a>

Rezultat

Kontakt

Dodavanje opisa poveznice i predmeta poruke

Ako želimo možemo definirati opis poveznice, dodavanjem atributa title. Također možemo definirati predmet (naslov) poruke, kako bi odmah znali da je to poruka koja nam stiže sa stranice. Naslov definiramo tako da iza adrese e-pošte dodamo ?subject=Predmet poruke.

Primjer:

<a href="mailto:kontakt@proba.hr ?subject=Pitanje">Kontakt</a>

Zadatak

Svom web sjedištu dodajte još jednu stranicu: kontakt.htm.

Stranica treba biti istog dizajna kao i ostale stranice, a tekst u središnjem dijelu je:

Ukoliko imate dodatnih pitanja možete nam se obratiti porukom elektroničke pošte. Za slanje poruke kliknite ovdje.

Tekst ovdje neka bude link na vašu e-mail adresu.

Izgled stranice:

Slanje email poruke pomoću obrasca

Za definiranje obrazaca koristi se oznaka <form>, a unutar njenog početnog i završnog dijela dodaju se tekst obrasca i polja za unos podataka.

Polja za unos podataka

Razlikujemo nekoliko vrsta polja za unos podataka:

• Tekstualno polje
• Polje lozinke
• Potvrdni okvir
• Opcijski gumbi
• Izbornik
• Tekstualno područje

Polja za unos podataka definiraju se oznakom <input>. Tip oznake određuje se vrijednošću atributa type. Svako polje ima i svoje ime određeno atributom name

Vrijednost atributa type za tekstualno polje je "text", za polje lozinke "password", za potvrdni okvir "checkbox", a za opcijske gumbe "radio".

Osim atributa type, unutar oznake <input> možemo koristiti sljedeće atribute:

• size - određuje širinu polja iskazanu brojem znakova
• value - zadaje vrijednost polja (može se i izostaviti, želimo li prazno tekstualno polje, dok je )

Primjere za navedena polja podataka pogledajte na Portalu za udaljeno učenje "Nikola Tesla"

Tekstualno područje

Za unos teksta poruke umjesto tekstualnog polja koristit ćemo tekstualno područje.

Za definiranje tekstualnog područja koristimo oznaku <textarea>. Atributom rows određuje se broj redaka, a atributom cols širina (broj znakova). Želimo li unaprijed zadati vrijednost ovog elementa, upisujemo je između početne i završne oznake.

Primjer:

<textarea rows="5" name="poruka" cols="30"> </textarea>

Rezultat:

Zadatak

Iz primjera koji se nalazi na sljedećoj stranici proučite na koji način se na web stranicu umeću padajući izbornici, te kako se šalje poruka "klikom" na gumb.

Nakon toga, na stranicu kontakt.htm dodajte jedan obrazac za kontakt.

Primjer obrasca

HTML kod

Rezultat