Dasar - Dasar Web
Assalamualikum Wr. Wb.
Kali ini saya akan membahas dasar dasar web, saya akan menjelaskan pembuatan form seperti gambar diatas. Mau tau gimana caranya? :D langsung saja intip htmlnya di bawah ini, di htmlnya sudah saya beri penjelasan.
<!DOCTYPE html> <!-- deklarasi html5 -->
<html> <!-- mendefinisikan dokumen sebagai HTML -->
<head> <!-- Judul Yang ada di tab browser -->
<title>TUGAS 1 PBW</title>
</head>
<body bgcolor=#DCDCDC> <!-- mendefinisikan isi web dengan warna background Gainsboro -->
<h1 style="text-align:center;"><font face="Arial Narrow" color="#483D8B">Tugas 1 Pemrograman Berbasis Web</font></h1>
<!-- h1 untuk deklarasi heading atau judul yang ada di body, dengan gaya rata tengah, font Arial narrow, warna Darkslateblue -->
<form method="get"> <!-- mendapatkan atribut beserta nilainya yang sudah user masukkan -->
<table align="center"> <!-- pembuatan tabel dengan rata tengah supaya isi web rapi -->
<!-- isi dari tabel -->
<tr> <!-- baris1 -->
<td>Nama Lengkap</td> <!-- kolom 1 -->
<td>:</td> <!-- kolom 2 -->
<td><input type="text" name="nama" autofocus required placeholder="Masukkan nama anda"></td> <!-- kolom 3 -->
<!-- inputfield dengan tipe data text, atribut nama, autofocus untuk ketika web dibuka maka kursor otomatis berada pd inputfield -->
<!-- required digunakan supaya atribut nama wajib di isi, placeholder untuk keterangan yang berada pada inputfield -->
</tr>
<tr> <!-- baris2 -->
<td>Alamat</td> <!-- kolom 1 -->
<td>:</td> <!-- kolom 2 -->
<td><input type="text" name="alamat" placeholder="Masukkan alamat anda"></td> <!-- kolom 3 -->
<!-- inputfield dengan tipe data text, atribut alamat, placeholder untuk keterangan yang berada pada inputfield -->
</tr>
<tr> <!-- baris3 -->
<td>Jenis Kelamin</td> <!-- kolom 1 -->
<td>:</td> <!-- kolom 2 -->
<td><input type="radio" name="JK" value="cowok">Laki-Laki<br/> <!-- kolom 3, br/ untuk pindah baris -->
<input type="radio" name="JK" value="cewek">Perempuan
<!-- inputfield dengan tipe radio, atribut name harus sama supaya jika salah satu radio diklik, yang lain tidak bisa diklik -->
<!-- value merupakan nilai atribut -->
</tr>
<tr> <!-- baris4 -->
<td>Tanggal Lahir</td> <!-- kolom 1 -->
<td>:</td> <!-- kolom 2 -->
<td><input type="date" name="TanggalLahir"></td> <!-- kolom 3 -->
<!-- inputfield dengan tipe date, atribut TanggalLahir -->
</tr>
<tr> <!-- baris5 -->
<td>Nomor Telp.</td> <!-- kolom 1 -->
<td>:</td> <!-- kolom 2 -->
<td><input type="tel" name="NomorTelp" placeholder="+62XXXXXXXXXXXX"></td> <!-- kolom 3 -->
<!-- inputfield dengan tipe tel, atribut NomorTelp, dengan keterangan +62XXXXXXXXXXXX -->
</tr>
<tr> <!-- baris6 -->
<td>URL</td> <!-- kolom 1 -->
<td>:</td> <!-- kolom 2 -->
<td><input type="url" name="homepage" placeholder="http://Masukkan Website anda"></td> <!-- kolom 3 -->
<!-- inputfield dengan tipe url untuk inputan berupa alamat web, atribut homepage dan keterangan http://Masukkan Website anda -->
</tr>
<tr> <!-- baris7 -->
<td>Email</td> <!-- kolom 1 -->
<td>:</td> <!-- kolom 2 -->
<td><input type="email" name="email" placeholder="Masukkan email anda"></td> <!-- kolom 3 -->
<!-- inputfield dengan tipe email untuk inputan berupa email, atribut email dan keterangan Masukkan email anda -->
</tr>
<tr> <!-- baris8 -->
<td>Kecamatan</td> <!-- kolom 1 -->
<td>:</td> <!-- kolom 2 -->
<td> <!-- kolom 3 -->
<select name="kecamatan"> <!-- select digunakan untuk pembuatan combo box dengan atribut kecamatan-->
<option value="null"> Pilih kecamatan</br> <!-- value merupakan nilai atribut -->
<option value="sumbersari"> Sumbersari</br> <!-- option digunakan untuk menampilkan beberapa data dalam combo box -->
<option value="patrang"> Patrang</br>
<option value="puger"> Puger</br>
</tr>
<tr> <!-- baris9 -->
<td colspan="3" align="center"><input type="submit" value="Sign Up">
<!-- colspan untuk ukuran penempatan button berdasarkan 3 kolom dari tabel -->
<!-- align untuk penempatan button di tengah dari jumlah kolom -->
<!-- inputfield bertype submit -->
<!-- value untuk memberi label pada button -->
</tr>
</table>
</form>
<footer><p>Posted by: Muhammad Lundy Alfandiarto</p></footer>
<!-- pembuatan footer -->
</body>
</html>
Masih bingung? Apa itu head? body? lihat gambar dibawah ini
didalam inputfield "nama" dijelaskan required kan?
biar jelas saya kasih screenshoot jika inputfield tidak diisi, maka yang akan terjadi adalah
keluar perintah untuk mengisi field nama.
kemudian di field URL tipenya url, kenapa url?
agar jika field url di isi selain url, keluar perintah seperti gambar diatas. contoh url yang benar http://www.google.com
untuk inputfield email tipenya email, mengapa demikian?
sama seperti url, jika tidak ada karakter "@" yang mewakili alamat email, keluar perintah seperti gambar diatas.
untuk yang mau download htmlnya di sini :)
cukup sekian untuk pembahasan dasar-dasar pemrograman berbasis web. Saya harap yang membaca tinggalkan komen ya, untuk masukkan ke saya :D :D
Tidak ada komentar :
Posting Komentar