Pages

Selasa, 28 Mei 2013

Belajar HTML - HTML Form




HTML FORM
html form mempunyai tag <form>

contoh
<form>
.
masukan element tag
.
</form>
ELEMEN INPUT

Unsur bentuk yang paling penting dari form adalah elemen input.

Elemen input digunakan untuk memilih informasi pengguna.

Sebuah elemen input dapat bervariasi dalam banyak cara,tergantung pada jenis atribut. Sebuah elemen input dapat di gunakan dengan jenis teks, kotak centang, sandi, tombol radio, tombol submit, dan banyak lagi.

Jenis input yang paling digunakan akan di jelaskan di bawah ini :

TEXT FIELDS

Dalam pengimputan data dengan metode tag text, metode teg input yang di gunakan akan terlihat seperti ini <input type ="text"/>

contoh:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br/>
Pasword : <input type="text" name="Pasword" />
</form>
Maka akan terlihat seperti di bawah ini :
catatan: - input type jenis ini hanya dapat memasukan 20 karakter .
-          semua karakter yang di input ke field password akan tidak terlihat atau hanya berbentuk ( hitam bulat)









Membuat FORM radio button SEPERTI GAMBAR
RUMUS DIBAWAH INI
<form>
warna kesukaan<br></p>
<p><input type=radio value=”M″ name=jur>MERAH<br><br />
<input type=radio value=”K″ name=jur>KUNING<br><br />
<input type=radio value=”H″ name=jur>HIJAU<br><br />
<input type=radio value=”B″ name=jur>BIRU<br><br />
</form>

CHECK BOX
tag pada check box ini terlihat seperti ini <input type="checkbox"/>

contoh :

<form>
<input type="checkbox" name="vehicle" value="Bike" /> saya manusia<br />
<input type="checkbox" name="vehicle" value="Car" /> saya laki-laki
</form>

maka akan terlihat seperti di bawah ini :
SUBMIT BUTTON

tag submit akan terlihat seperti ini <input type="submit"/>

Sebuah tombol submit digunakan untuk mengirim data formulir ke server. Data dikirim ke halaman tertentu dalam atribut action form.File didefinisikan dalam atribut action, biasanya akan melakukan sesuatu dengan input yang diterima.

(kita akan belajar submit fungsi submit button dalam bab-bab selanjutnya)

contoh:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

maka akan terlihat seperti di bawah ini:



TUGAS
buatlah seperti gambar dibawah ini :

1. gambar 1

2. gambar 2


Pengenalan HTML



Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Elemen dasar HTML
 
Jenis Dokumen
<HTML></HTML>
(terdapat pada awal dan akhir dari file HTML)
 
Judul
<TITLE></TITLE>
(harus selalu terdapat pada mukadimah)
 
Mukadimah (Header)
<HEAD></HEAD>
(keterangan umum, seperti judul dsb.)
 
Batang Tubuh
<BODY></BODY>
(isi dari halaman HTML)

Contoh
<html>
<head>
<title>Disini titel websiteku</title>
</head>
<body>
Disini adalah konten yang tampil di browser
</body>
</html>

Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.
Kemudian tag " <head>…</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.
Tag berikutnya adalah " <title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai
Tag "<body>…</body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Tag <font> termasuk salah satu (Deprecated tags) dimana saat ini sudah jarang digunakan karena sudah ada alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag <font> sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat tentang CSS ini bisa di baca di Belajar CSS.
Untuk mengganti jenis font digunakan properti font-family:
<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>
Hasil:
Tulisan dengan font-family Georgia
Untuk melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS
Untuk membuat tulisan miring digunakan properti font-style:
<p style="font-style:italic">Membuat tulisan miring</p>
Hasil:
Membuat tulisan miring
Untuk membuat tulisan tebal digunakan properti font-weight:
<p style="font-weight:bold">Membuat tulisan tebal</p>
Hasil:
Membuat tulisan tebal
Untuk mengatur ukuran font digunakan properti font-size:
<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>
Hasil:
Tulisan dengan ukuran font 16px
Untuk pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan ukuran font yang sama.
<p style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan dengan ukuran 100%</p>
<p style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>
Hasil:
Tulisan dengan ukuran 16px
Tulisan dengan ukuran 100%
Tulisan dengan ukuran 1em
Tulisan dengan ukuran 12pt
Untuk membuat warna font digunakan properti color:
<p style="color:blue">Tulisan ini akan berwarna biru</p>
Hasil:
Tulisan ini akan berwarna biru
Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.
<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p>
<p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p>
<p style="color:green">Membuat warna tulisan dengan Nama Warna</p>
Hasil:
Membuat warna tulisan dengan Nilai RGB
Membuat warna tulisan dengan Kode Hexadecimal
Membuat warna tulisan dengan Nama Warna
Ikuti link berikut untuk melihat Kode Hexadecimal dan Nama Warna atau gunakan tool kode warna untuk melihat nilai RGB.
Atribut style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.
<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh tulisan dengan font-family, font-size dan font-weight</p>
Hasil:
Contoh tulisan dengan font-family, font-size dan font-weight.
Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.
<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>
Hasil:
Contoh tulisan dengan properti font.

ini yang komplit

<p style="font-style:italic; font-size:30px; verdana; color:red">Contoh tulisan dengan properti font.</p>

Hasilnya



Contoh tulisan dengan properti font.


silahkan klik download jika ingin modul HTML
 Download
 

 

Blogger news

Blogroll

About