Sunday, January 23, 2011

Dasar HTML : Form

OBJEKTIF:

Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan form.


MATERI:

Element FORM, Element INPUT, Element SELECT, Element OPTION, Element TEXTAREA





ELEMENT FORM

Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST).




Sintaks:

<form action="action" method="GET"|"POST">

...........................

</form>







ELEMENT INPUT

Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Element ini mempunyai attribute yaitu name, size, type, value, checked.


Attribute name mendefinisikan nama dari input kontrol form, attribute size mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.



Sintaks:

<input

name="name"

size="number"

type="text"|"checkbox"|"radio"|"submit"|"reset"

value="value"

checked >






ELEMENT SELECT

Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini mempunyai attribute yaitu name, size, multiple(diizinkan banyak pilihan). Element ini harus berada di dalam element FORM.



Sintaks:


<select

name="name"

size="number"

multiple >

.....................

</select>





ELEMENT OPTION

Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION.




Sintaks:

<option

selected

value="number" >

.....................

</option>







ELEMENT TEXTAREA


Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM



Sintaks:

<textarea

name="name"

cols="number"


rows="number" >

.....................

</textarea>









LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.






Latihan 1:

Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit, seperti tampilan di bawah ini:



form1

                         






Nama file: latihan7_1.html



<html>

<head>

<title>Latihan7-1</title>

</head>

<body>


<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">

   <H4>FORM</H4>

   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">

   <BR><BR>

   <B>Are you a student?</B>


   <INPUT TYPE="checkbox" NAME="var2">

   <BR><BR>

   <B>How old are you?</B>

   <BR>

   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15


   <BR>

   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20

   <BR>

   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25

   <BR><BR>


   <INPUT TYPE="submit" NAME="var4" VALUE="Send">

   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">

</FORM>

</body>

</html>
Jika diisi namanya adalah Rahmat ; student di check ; umur 21-25 ; maka jika form ini di submit data form yang terkirim adalah var1="Rahmat"&var2="1"&var3="r3"



Latihan 2:

Dari latihan 1 tambahkan menu select seperti gambar di bawah ini:



form2





   

Nama file: latihan7_2.html


<html>


<head>

<title>Latihan7-2</title>

</head>

<body>

<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">

   <H4>FORM</H4>

   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">


   <BR><BR>

   <B>Are you a student?</B>

   <INPUT TYPE="checkbox" NAME="var2">

   <BR><BR>

   <B>How old are you?</B>

   <BR>


   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15

   <BR>

   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20

   <BR>

   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25

   <BR><BR>

   <B>Where are you from?</B>


   <BR>

   <SELECT NAME="var6" SIZE="1">

      <OPTION VALUE="BG">Bulgaria

      <OPTION VALUE="UK">United Kingdom

      <OPTION VALUE="USA" SELECTED>USA

   </SELECT>

   <BR><BR>


   <INPUT TYPE="submit" NAME="var4" VALUE="Send">

   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">

</FORM>

</body>

</html>




Latihan 3:


Dari latihan 2 tambahkan textarea seperti gambar di bawah ini:



form3





   

Nama file: latihan7_2.html


<html>

<head>


<title>Latihan7-2</title>

</head>

<body>

<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">

   <H4>FORM</H4>

   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">

   <BR><BR>


   <B>Are you a student?</B>

   <INPUT TYPE="checkbox" NAME="var2">

   <BR><BR>

   <B>How old are you?</B>

   <BR>

   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15


   <BR>

   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20

   <BR>

   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25

   <BR><BR>

   <B>Where are you from?</B>


   <BR>

   <SELECT NAME="var6" SIZE="1">

      <OPTION VALUE="BG">Bulgaria

      <OPTION VALUE="UK">United Kingdom

      <OPTION VALUE="USA" SELECTED>USA

   </SELECT>

   <BR><BR>


   <B>Your comment:</B>

   <BR>

   <TEXTAREA NAME="var7" COLS="30" ROWS="6">

   </TEXTAREA>

   <BR><BR>

   <INPUT TYPE="submit" NAME="var4" VALUE="Send">

   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">


</FORM>

</body>

</html>
Catatan:

Pemberian nilai attribute action pada element FORM dengan menuju ke alamat email adalah untuk memperlihatkan nilai-nilai data form yang dikirimkan.


sumber :http://ramazotob.blogspot.com
Read more ...
at 11:28 PM 0 comments

Monday, February 15, 2010

dasar-dasar HTML

Hari ini saya akan memberikan informasi kepada Anda semua, informasi yang saya berikan ini cukup menarik bagi saya dan mungkin bagi Anda juga hehehe……!!!

Yah .. Saya malah ketawa . . gak papa sekali-sekali ketawa biar gak cepet tua.
Nah sekarang saya akan memulai memberikaninformasi yang telah saya peroleh dari sekolah saya yaitu tentang “HTML”.

HTML yang disingkat dari Hyper Text Mark up Language.

Web-web tersusun dari beberapa HTML dan sifat HTML itu sendiri adalah berupa kode-kode. Dan setiap html didahului dengan tulisan “< HTML >” tanpa tanda petik. Dan diakhiri dengan “< /HTML >” tanpa tanda petik.

Dan susunan standart yang masih blank/ masih kosong dari HTML itu sendiri ter diri dari :
< HTML >
< HEAD >
< BODY >

Dan setiap kode harus ditutup kodenya adalah dengan menambahkan slash “/” tanpa tanda petik.

Contoh : < /HTML > ; < /HEAD > ; < /BODY >.

Dalam HTML tidak mengenal “enter” dan “space” karena pada HTML hanya mengenal kode-kode saja. Dan pada HTML juga tidak terpengaruh dengan huruf besar maupun huruf kecil, jadi tulisan < HTML > ; < HEAD > ; < BODY > dapat diganti dengan huruf kecil seperti : < html > ; < head > ; < body >.

Kode-kode tambahan yang saya ketahui adalah :

>> kode untuk membuat halaman baru atau kode untuk pengganti “enter” pada keyboard adalah “< BR >” tanpa tanda petik.

>>kode untuk merubah ukuran font ada 2 jenis yaitu :
< H… >
< FONT SIZE=… >

Pada < H… > isilah “…” dengan angka mulai dari 1-6, contoh < H1 > ; < H2 > ; dan seterusnya sampai < H6 >. Semakin kecil angkanya maka semakin besar ukuran fontnya, jadi < h1 > lebih besar dari pada < h2 > dan seterusnya. Pada kode ini jika dipakai lebih dari satu maka secara otomatis tulisan yang di tulis di kode yang kedua akan terletak pada baris yang baru.


Pada < FONT SIZE=… > isilah “…” dengan angka mulai dari 1-7, contoh
< FONT SIZE=1 > ; dan seterusnya sampai dengan < FONT SIZE=7 >. Pada < font size > beekebalikan dengan < h >. jadi pada < font size=1 > lebih kecil daripada < font size=2 > dan seterusnya. Pada kode ini jika di tulis lebih dari satu tidak akan menjadi halaman baru.

>>untuk mengatur posisi huruf pada < h1 > adalah dengan menambahkan kode :
ALIGN=CENTER (unutk posisi di tengah)
ALIGN=RIGHT (untuk posisi sebelah kanan)
ALIGN=LEFT (untuk posisi sebelah kiri)
Contoh : < H1 ALIGN=CENTER >

>>kode untuk mengubah jenis font adalah < FONT FACE=… > pada “…” isilah dengan nama jenis. Contoh : arial ; Times New Roman ; vineta bt; dll.*)

*)pada jenis font ini tidak semua jenis font bias diproses, jadi hanya jenis font-font tertentu saja.

>>kode untuk mengubah warna font adalah < FONT COLOR=… > pada ”…” isilah kode warna. Saya akan memberikan salah satu kode warna :

Dalam bentuk standart :
Red
Blue
Black
White
green
Dalam bentuk heksa :
#FFFFFF >> untuk putih
#000000 >> untuk hitam
#FF0000 >> untuk merah
#00FF00 >> untuk hijau
#0000FF *) >> untuk biru
*) dapat divariasikan dengan beberapa angka heksa hingga 6 digit sehingga akan menjadi berbagai variasi warna, angka heksa ada 16 yaitu : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

>>kode untuk mencetak huruf menjadi tebal adalah < B >

>>kode untuk mencetak huruf menjadi miring adalah < i >

>>kode untuk mencetak huruf dengan garis dibawahnya adalah < U >

>>kode untuk menjadikan huruf atau angka berada di atas contoh 42 adalah < SUP >.

>>kode untuk menjadikan huruf atau amgka berada di bawah contoh 02 adalah < SUB >.

>>kode untuk membuat tulisan menjadi running atau berjalan adalah < marquee >. Dalam kode standart ini tulisan akan bergerak dari kanan ke kiri. Untuk mengubah arah geraknya Anda bias menambahkan kode < marquee direction=… > pada “…” ditulis:
Up (dari atas ke bawah)
Down (dari bawah ke atas)
Left (dari kiri ke kanan)
Right (dari kanan ke kiri)

Contoh penulisannya : < marquee direction=up >

>>untuk mengubah warna background tambahkan kode pada kode “< BODY >” dengan kode : BGCOLOR. Penulisannya < BODY BGCOLOR=… > pada “…”isilah dengan kode warna yang sama seperti kode warna yang digunakan pada kode < FONT SIZE >.

Penulis masih belajar masalah HTML ini, karena penulis masih hanya dapat ilmu sampai itu maka hari ini saya masih membuat postingan sampai itu saja. Dan penulis akan melanjutkan penjelasannya jika mendapatkan ilmu baru lagi tentang HTML ini.
Read more ...
at 9:18 PM 0 comments
 
Indonesia dulu dikenal sebagai bangsa yang toleran dan penuh sikap tenggang rasa. Namun, kini penilaian tersebut tidak dapat diamini begitu saja, karena semakin besarnya keragu-raguan dalam hal ini. Kenyataan yang ada menunjukkan, hak-hak kaum minoritas tidak dipertahankan pemerintah, bahkan hingga terjadi proses salah paham yang sangat jauh.
free counters

Blog Archive

Seseorang yang mandiri adalah seseorang yang berhasil membangun nilai dirinya sedemikian sehingga mampu menempatkan perannya dalam alam kehidupan kemanusiaannya dengan penuh manfaat. Kemandirian seseorang dapat terukur misalnya dengan sejauh mana kehadiran dirinya memberikan manfaat kearah kesempurnaan dalam sistemnya yang lebih luas. Salam Kenal Dari Miztalie Buat Shobat Semua.
The Republic of Indonesian Blogger | Garuda di DadakuTopOfBlogs Internet Users Handbook, 2012, 2nd Ed. Avoid the scams while doing business online

Kolom blog tutorial Back Link PickMe Back Link review http://miztalie-poke.blogspot.com on alexa.comblog-indonesia.com

You need install flash player to listen us, click here to download
My Popularity (by popuri.us)

friends

Meta Tag Vs miztalie Poke | Template Ireng Manis © 2010 Free Template Ajah. Distribution by Automotive Cars. Supported by google and Mozila