Contoh Dokumen HTML lengkap

Berikutnya adalah mempelajari struktur sebuah dokumen HTML. Sebuah dokumen HTML yang lengkap minimal terdiri dari beberapa Tag utama. ...

Berikutnya adalah mempelajari struktur sebuah dokumen HTML.
Sebuah dokumen HTML yang lengkap minimal terdiri dari beberapa Tag utama.

hasil html

Perhatikan kode berikut :
<html>
<head>
<title>Judul</title>
</head>

<body>
Tempat menuliskan isi utama dokumen HTML.
</body>
</html>
 Secara umum struktur penulisan dokumen HTML yang sederhana adalah seperti kode kode diatas. kita akan menggunakan semua tag tersebut pada setiap dokumen HTML yang kita buat.
Saya akan jelaskan lebih lanjut masing2 baris :
<html>
Menginformasikan browser bahwa ini adalah sebuah dokumen HTML.
<Head>
Awal bagian header. bagian header berisi berbagai pilhan konfigurasi untuk halaman kita (contoh judul halaman)
<title>Judul</title>
Baris ini membuat browser menapilkan judul halaman. judul ini akan muncul di bagian paling atas sebelah kiri browser.
</head>
Akhir bagian dari header
<body>
Disini tempat menuliskan isi utama dokumen HTML
</body>
Semua yang berada diantara kedua tag ini adalah isi utama dari halaman kita. disinilah tempat semua teks, gambar , tabel dan lain lain akan kita tuliskan. Bagian ini merupakan bagian yang paling penting dari halaman HTML kita.
</html>
Akhir html kita.

 Form HTML

form mungkin merupakan materi yang paling penting dari HTML. Mengapa? Karena dengan form, maka website kita bisa menerima informasi dari pengunjung, seperti nama, alamat email, komentar, dll.
Sebuah form akan menerima input dari para pengunjung agar kita bisa memproses lebih lanjut.
Kita bisa menyimpan data tersebut, membuat pesanan, mengumpulkan statistik, mendaftarkan seseorang ke forum web anda atau mungkin mendaftarkan mereka menjadi pelanggan kita.

'Mari kita mulai dengan dasar dasar pembuatan form, untuk membuat sebuah form, kita memerlukan minimal 2 jenis tag yaitu tag <form> dan tag <field>.

Kita akan mulai dengan membahas tag <form>.

Tag Form 

Tag form ini akan menentukan awal dan akhir kode form kita. Atribut yang biasanya digunakan pada tag ini adalah action dan method. Berikut penjelasan nya
  • Action - menentukan file yang akan dieksekusi setelah kita mengirimkan form (misalnya dengan sumbit button) File tersebut juga merupakan file yang bertugas untuk memproses input yang sudah dimasukkan pengunjung melaui form ini. Dalam materi kita ini kita akan mengunakan file php untuk memproses inputan pengunjung lebih lanjut.
  • Menthod - atribut ini menetukan cara html untuk mengirimkan isi input dari pengunjung dan bisa berisi get/postkita akan fokus di method post dalam materi ini karena method ini paling sering digunakan menurut saya lebih aman.
Berikut contohnya kodenya :
<form method="post" action="nama_file.php">
Isi form : nanti disini kita tulis isi form berupa field field tempat pengunjung bisa mengisi.
</form>
Sebagai tambahan, kita juga mendefinisikan agar form mengeksekusi file form itu sendiri.
Berikut contoh kodenya
<form method="post" action=>.
Isi form : nanti disini kita tulis isi form berupa field field tempat pengunjung bisa mengisi.
 </form>
 Nah, setelah membuat formnya, sekarang kita akan mempelajari cara membuat field isian bagi pengunjung.

Tag field

Tag field tempat kita mengisi data seperti nama, alamat email itu kita sebut dengan field
Kita akan mengunakan 3 jenis field yaitu field teks, area teks dan submit button.
Tentu saja masih banyak input lain seperti radio button, password, dll namun kita akan mengunakan 3 jenis input saja
kita akan membahas atribut dari input field ini. untuk membuat field inputan dalam form kita menggunakan tag<input> yang memiliki beberapa atribut penting berikut.
  • type- yangmenentukan jenis input field anda. disinilaj anada mendifinisikan jenis field menjadi text, text area atau password.
  • name- merupakan nama field. nama field ini sangat bermanfaat bagi php untuk melakukan proses selanjutnya pada input yang diberikan pengunjung.
  • size - menetukan ukutran horisontal field. satuanya adalah jumlah spasi
  • maxleght - menetukan jumlah karakter maksimum yang bisa diinput.
Berikut contoh kodenya :
<form method="post" action="">
nama anda: <input type="text" size="10"
komentar anda : <text area rows="5" cols="20"
name="komentar"></textarea><br>
<inputtype='submit'value="kirim">
</form>

Praktek

Saya sudah siapkan kode HTML kita terakhir lengkap dengan baris judul di area kode. Silahkan copykan contoh kode dibawah ini ke dalam file baru berjudul form html dan lihat hasilnya pada browser.
<html>
<head>
<title>homepage pribadi saya</title>
</head>
<body>
<center><b>selamat datang<br>dihalaman guest book</b></center>
<form method="post'action="">
nama anda : <input type+"text" size="10" maxleght="40" name="nama"><br>
Komentar anda : <textarea rows ="5" cols ="20"
name="komentar"></textarea><br>
<input type="submit" value="kirim">
</form>
</body>
</html> 
Seharusnua anda akan mendapatkan hasil seperti ini :

hasil html

Judul dan form sudah siap dan pengunjung sudah bisa mengisikan nama dan komentar mereka di form ini.

Postingan Terkait

0 komentar