Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Breaking

Friday 3 March 2017

Belajar HTML Part 5 Menambahkan Iframe & Form

Belajar HTML Part 5 Menambahkan Iframe & Form



Assalamualaikum Wr. Wb
Bertemu lagi dengan saya, sebelumnya kita belajar tentang penggunaan selector class & id. Nah dipertemuan kal ini, kita akan melanjutkan dengan belajar Iframe dan Form. Sobat pasti bertanya-tanya apa itu Iframe dan From dan apa fungsinya ? Langsung aja in dia penjelasannya.

PENGERTIAN
  • Iframe adalah sebuah tag yang ada pada HTML yang berfungsi untuk menampilkan sebuah webpage ke dalam website yang kita buat. Maksudnya kita dapat menampilkan web orang misal youtube ke dalam web kita tanpa harus membuka web tersebut di tab baru.
  • Form  adalah sebuah tag yang ada di dalam HTML yang berfungsi untuk mengumpulkan data dari pengunjung sebuah website. Karena di dalam tag <form> ini memiliki beberapa element seperti textarea, button, input (nama,password,email), dll.


LATAR BELAKANG

Menginginkan sebuah website yang dapat menerima dan mengetahui data-data dari seorang penjunjung dari web tersebut. Dan juga dapat memberikan layanan lebih kepada pengunjung.

MAKSUD & TUJUAN

Dapat memberikan layanan lebih kepada pengunjung, seperti : tampilan youtube dalam web kita. 
Mempermudah dalam mengetahui data data dari seorang pengunjung.

ALAT & BAHAN
  • Lapot/PC
  • Koneksi Internet
  • Text Editor
  • Browser

LANGKAH KERJA

  • Iframe
Di dalam HTML pembuatan iframe diawali dengan tag <iframe>. Berikut adalah syntax dari iframe.

<iframe src="URL"></iframe>

Keterangan : "src" digunakan untuk menambahkan alamat tujuan yang ingin ditambahkan.

Kemudian untuk menambahkan sebuah link ke dalam tag <iframe> dengan syntax berikut.


Dan berikut adalah hasilnya.



Itu adalah hasil dari iframe yang kita buat. Selanjutnya kita lanjut menuju ke Form.

  • Form
Di dalam HTML penggunaan form diawali dengan tag pembuka <form> kemudian ditutup dengan tag </form>. Dan di dalam tag <form> terdapat beberapa <tag> yaitu berikut.

Tag input <input> . Tag ini berfungsi untuk menambahkan type  seperti nama(text), password, checkbox, radio, submit, dan masih banyak lagi. Contoh penggunaanya sebagai berikut.


Coba kita jalankan browser kita. Dan lihat hasilnya.


Contoh di atas merupakan bagian dari tag <input> dan masih ada tag <input> yang lainnya.
Selain tag <input> ada juga tag yang lainnya. Seperti tag <textarea>, <button>, <select>, dll.

Selanjutnya kita mencoba tag <texarea>. Tag area ini berfungsi untuk menambahkan sebuah kolom yang biasanya digunakan untuk komentar bagi pengunjung blog. Berikut contoh penggunaanya.


Nb : rows digunakan untuk mengatur tingginya, dan cols digunakan untuk mengatur lebarnya.

Jalankan browser anda kemudian lihat hasilnya. Dan berikut adalah hasilnya.



Selanjutnya kita mencoba ke tag <button>. Tag <button> berfungsi untuk menampilkan button atau tombol dari HTML. Contohnya sebagai berikut.


Nb : syntax onclick="alert(Hello World!") anak menampilkan sebuah pesan yang berisi Hello World! jika di klik tombolnya. 

Berikut adalah hasil dari tag <button>.




Selanjutnya kita coba tag <select>. Tag select ini berfungsi untuk menampilkan dropdown atau juga bisa disebut dengan menu kebawah (bingung gak tau namanya). Langsung saja berikut cara penggunaanya.


Nb : syntax option berfungsi untuk memberikan opsi pada button atau tombol tersebut.

Dan berikut adalah hasilnya.


Itu dulu dari saya, Selamat Mencoba dan Berkarya.
Sekian dan Terima kasih

Syurkron

Wassalamualaikum Wr. Wb.



Referensi


No comments:

Post a Comment

Adbox