Hay Assalamualaikum wr.wb teman-teman.
Kali ini saya akan menerangkan dan menjelaskan gimana cara membuat web
dengan menggunakan aplikasi sublime text. Bagi teman-teman yang belum mempunyai
aplikasinya, bisa di download terlebih dahulu aplikasi sublime text.
Soooo.......
Pada
kesempatan ini saya akan membuat sebuah Web yang memiliki form Buku Tamu dengan
ketentuan sebagai berikut:
- memiliki text input untuk memasukkan nama
- memiliki radio button input untuk memilih jenis kelamin (laki-laki / perempuan)
- memiliki drop down list untuk memilih Fakultas dari semua fakultas di UNSRI
- memiliki text area untuk memasukkan Biografi
- memiliki text input untuk memasukkan mata kuliah favorit, yang sudah memiliki beberapa nama mata kuliah yang sudah terdefinisi (gunakan datalist)
- memiliki range input untuk menentukan tinggi badan
- memiliki password input untuk memasukkan kata rahasia
- memiliki checkbox untuk menentukan apakah tamu membawa kado atau tidak
- memiliki number input untuk memasukkan semester yang sedang ditempuh
- memiliki date input untuk memasukkan tanggal lahir
- memiliki color input untuk memasukkan warna favorit
- memiliki email input untuk memasukkan email
- memiliki caption form "Buku Tamu" yang menggabungkan semua isian form
- memiliki tombol "Reset" untuk menghapus semua data form
- memiliki sebuah tombol kirim, yang apabila dipilih, akan menampilkan halaman "Terima kasih"
YANG HASILNYA SEPERTI INI
Berikut Langkah-langkahnya:
- Langkah 1
Buka aplikasi Sublime Text 3. Maka akan muncul
tampilan awal seperti gambar di bawah ini
- Langkah 2
Tuliskan tag html pada kotak isian. Jika ingin lebih cepat
menuliskannya, cukup dengan menulis html dan tekan TAB di
keyboard. Maka secara otomatis tag html akan muncul.
- Langkah 3
Untuk menambahkan title pada web saya,
saya bisa langsung mengetiknya di sebelah tag <title> menambahkan title </title>.
Title ini berfungsi untuk membuat judul untuk dokumen HTML
- Langkah 4
Saya akan membuat
Layoutnya terlebih dahulu, Untuk cara membuat layoutnya bisa anda lihat di
tutorial saya sebelumnya http://keniayas.blogspot.co.id/2017/02/membuat-halamamn-web-menggunakan-html.html
- Langkah 5
Untuk memulai membuat HTML form, masukan tag <form> dan jangan lupa di tutup di akhir </form>. Karena saya ingin membuat caption form seperti yang
terdapat pada point 13, maka saya memasukkan tag <fieldset> tag digunakan untuk elemen kelompok terkait
dalam formulir. tag ini menggambar sebuah kotak di sekitar elemen terkait.dan
pada bagian tag <legend> tag
ini mendefinisikan keterangan untuk <fieldset> elemen.
- Langkah 6
Untuk
membuat text input untuk memasukkan nama. maka tag <input > dengan atribut <type="text" name="nama">
- Langkah 7
Untuk
membuat radio button
input untuk memilih jenis kelamin (laki-laki / perempuan). Maka tag yang digunakan adalah tag <input> dengan atribut <type=” radio ” name= “ gender” value
= “ ” >
type=” ”Mendefinisikan sebuah tombol radio (untuk memilih
salah satu dari banyak pilihan) dan untuk value
nya silahkan diisi sendiri apakah laki-laki/perempuan/male/female.
Contoh : <input type="radio"
name="gender" value="male/female"> Female
- Langkah 8
Untuk
membuat drop down list untuk memilih Fakultas dari semua fakultas di UNSRI. Gunakan
tag <select> dan tag <option> . <select>
elemen
mendefinisikan daftar drop-down, dengan atribut < name=” ” > dan <option>
elemen mendefinisikan opsi yang bisa dipilih dengan atribut < value=" " > isi dari velue .
Contoh : <"select
name="fakultas">
<option
value="fakultas"> nama fakultas</option></select>
- Langkah 9
Lalu membuat text area untuk
memasukkan Biografi. Gunakan tag <textarea>
untuk mendefinisikan field input multi-line.
Dengan atribut name=” ” rows=” untuk menentukan jumlah terlihat dari baris dalam area
teks “ cols=” untuk menentukan lebar terlihat dari area
teks”
Contoh : <textarea
name="Biografi"
rows="10" cols="30" placeholder="Silahkan Tulis Biografi Anda"></textarea>
- Langkah 10
Setelah itu kita akan buat text input untuk memasukkan mata kuliah favorit,
yang sudah memiliki beberapa nama mata kuliah yang sudah terdefinisi (menggunakan
datalist).
Saya menggunakan tag
< input > dengan atribut list.
Kemudian gunakan tag < datalist > dengan
atribut id=” ” .
Contoh : <input
list="matakuliah" name="matakuliah">
<datalist id="matakuliah">
<option value="nama mata
kuliah"></datalist>
- Langkah 11
Lanjut kita akan membuat range input
untuk menentukan tinggi badan. Saya menggunakan tag dan atribut sebagai
berikut:
Contoh : <label for="tb">Tinggi Badan </label>
<input
type="range" name="tinggibadan" min="100" max="200"
value="150" id="tb" oninput="nilai(value)">
<output
for="tb" id="tinggibadan">200</output>
<script>
function nilai (tb){
document.querySelector('#tinggibadan')
.value = tb;
}
</script>
- Langkah 12
Memiliki password dan user name
input untuk memasukkan kata rahasia. Gunakan tag <input> untuk username tambahkan atribut type = “text” name= “ ”, dan password dengan atribut type = “ password ” name = “ ”
Contoh : User Name : <br>
<input
type="text" name="username"><br>
User Password: <br>
<input
type="password" name="password">
</form>
- Langkah 13
Saya akan membuat checkbox untuk
menentukan apakah tamu membawa kado atau tidak.
Gunakan tag < input type = "checkbox" > mendefinisikan
sebuah kotak centang.
Lalu
tambahkan atribut name=” ” value=” ”.
Contoh : Apakah
Tamu Membawa Kado ?<br>
<input type="checkbox"
name="Kado" value="Bawa"> Bawa Kado
<br>
- Langkah 14
Kemudian saya akan membuat number
input untuk memasukkan semester yang sedang ditempuh. Gunakan tag < input > dengan atribut type = “ ” name = “ ” min = “ ” max = “ ” value = “ ”.
Contoh : Semester Yang Sedang
Ditempuh:
<input
type="number" name="Semester" min="1"
max="10" value="1">
- Langkah 15
Kemudian membuat date input untuk
memasukkan tanggal lahir. Gunakan <input type = "date">
yang digunakan untuk field input yang harus berisi tanggal. Dan tambahkan
atribut name
= “ ” placeholder = “ ” . placeholder digunakan untuk efek onfocus
dan onblur di javascript , Jadi ketika
kita klik textfild maka tulisan / value dalam textfiled tersebut akan ilang
saat kita ketikan tulisan.
Contoh : Birthday:
<input
type="date" name="Tanggal Lahir" placeholder="dd/mm/yyyy">
- Langkah 16
Lalu saya akan membuat color input
untuk memasukkan warna favorit .Gunakan <input
type="color" name="nama color" value="warna tampilan
di website">
- Langkah 17
Untuk membuat input email pada HTML
form, gunakan <input
type="email" name="email">
- Langkah 18
Untuk
membuat input button dan dapat menampilkan halaman baru berupa tulisan maka
gunakan <input
type="button" onclick="alert('isi pada halaman baru')
value="nama tampilan di website"> dan untuk membuat input
reset maka gunakan <input
type="reset">
Itulah penjelasan singkat dari saya.jika ada salah kata saya
mohon maaf.
Jangan bosan ya teman-teman untuk membaca blog saya. Mohon maaf apabila terdapat kesalahan dalam kata-kata.
Nantikan tutorial blog saya berikutnya yaa.....see you.
Wassalamualaikum wr.wb
