Baik teman-teman saya akan menjelaskan apa itu HTML yang sudah pernah saya pelajari selama di POS METRO JAMBI semoga akan ada manfaatnya untuk teman-teman sekalian.
1.Pengenalan HTML
HTML(Hyper Text Markup Langguage) merupakan bahasa tingkat tinggi . Bahkan cukup tinggi sehongga mudah dipelajari. 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, link maupun audio dan vidio.
HTML mempunyai file perluasan (extention) htm/html. Dimana kedua perluasan itu sama, jadi anda boleh menyimpan file dokumen HTML dengan extention "html" atau "html".
untuk mulai belajar HTML kita akan menggunakan Notepad caranya tekan menu windows pada keyboard lalu tekan huruf R, lalu ketikkan Notepad lalu klik OK atau ENTER
* Nested HTML Element
Dalam penulisan dokumen HTML pastikan banyak menggunakan banyak elemen.
Inilah elemen pembuka pada HTML
1.<html>
2.<head>
3.<title>judul</title>
4.<body>
Dan di akhiri dengan elemen penutup
1.</html>
2.</head>
3.</body>
2.Macam-Macam Tag
Sekarang mari kita coba menuliskan kode HTML dan bagaimana cara memanipulasi tampilan yang keren seperti di Website pada umumnya. Maka disinilah kita mulai belajar HTML. Kita akan melakukan Markup tulisan sehingga bisa muncul sesuai keinginan.
Manipulasi yang pertama adalah Text Formating. Ini adalah manipulasi bagaimana menampilkan text yang sesuai keinginan. Seperti penebalan pada huruf, memiringkan, memberi garis bawahi, dll. Silakan lihat tabel berikut.
<strong> Menebalkan Huruf
<em> Memiringkan Huruf
<ins> Menggarisbawahi Huruf
<del> Mencoret Huruf
<sub> Membuat huruf Subscripted
<sup> Membuat Huruf Superscripted
Tag HTML memiliki sepasang tanda yaitu pembuka dan penutup. Misalnya tag strong, dia memiliki dua tag untuk pembuka yaitu <strong> dan penutup </strong>. Untuk menggunakannya, anda tinggal memasang text diantara dua tag tersebut. Contohnya jika ingin memiringkan huruf maka kita memakai tag
<em>Bagaimana Kabarmu??</em>
Maka akan jadi seperti ini
dan cobalah tag-tag yang lain.
<strong>kakak</srong>
<del>Nangis,Pingsan,Marah</del>
<ins>kami</ins>
<sub>sekali</sub>
<sup>5</sup>
Maka akan jadi seperti ini
Nah,,,,itulah macam-macam text formating dan kita akan melanjutk ke tahap berikutnya.
3 Memasukkan Gambar
Kita akan memasukkan style CSS di kode HTML kedalam kode gambar sehingga bisa melakukan aneka macam modifikasi.
Untuk menambah CSS dikode HTML kita cukup menambahkan atribut style saja.
Lokasi gambar adalah folder dimana gambar itu diletakkan berdasarkan letak file HTML yang mengaksesnya . Misalnya file-html nya ada difolder "gambar dengan nama shake.jpg" maka lokasi gambarnya adalah
gambar/shake.jpg
Kemudian untuk memunculkan gambar kita letakkan kode ini di file HTML
<img class="caption" src="gambar/shake.jpg" border="4" alt="gambar pecah"title="alarm"style=float:left" width="200" height="200"/>
Ada tambahan,style=float:left" pada atribut image nya. Pada contoh diatas, saya buat gambar ada disebelah kiri, anda bisa mengubahnya menjadi disebelah kanan.
Maka akan muncul gambar seperti ini
4 Macam-Macam Heading
HTML juga mempunyai heading. Ada 1 hingga 6 heading. Bagi yang belum paham apa itu heading, silakan coba buka buku apa saja kususnya buku-buku non fiksi .
Didalam pembuatan web,anda harus meletakkan heading dalam halaman web anda agar search engine mampu mengenali tema dan materi yang sedang anda sampaikan dihalaman web tersebut. Dengan begitu,mereka tidak akan salah persepsi.
Untuk membuatnya cukup sederhana, kita tinggal memakai kode heading<hn> dan kode penutup</hn>
n=menunjukkan itu heading level berapa.
Jadi kalau kita mau makai heading 2 maka kodenya
<h2>kata yang dimunculkan</h2>
kita tinggal masukkan heading berapa yang mau kita pakai.
Misalnya:
<h1>Investasi Properti Diplomasikan </h1>
<h2>Terkendala Sertivikasi Vendor</h2>
<h3>Lelang SUN Topang Rupiah</h3>
<h4>Bursa Dipengaruhi Rapat The Fed</h4>
<h5>Bank Permata Siap Terjun Ke Maritim</h5>
<h6>Mentri Indroyono Puji BPPT</h5>
Maka hasilnya akan seperti ini
Nah,,,, Mudah Sekali Bukan ???
5.Fungsi Dan Penggunaan Atribut Href Pada Tag HTML
Attribut href pada html biasanya digunakan untuk membuat link namun fungsinya tidak hanya itu. Kali ini kita akan membahas apa saja yang bisa kita buat menggunakan attribut href ini.
Membuat Link Menuju Ke Halaman Lain.
Untuk fungsi ini tentunya kita memakai kode html ini
<a href="masukkan link disini">tulisan</a>
supaya lebih jelasnya saya akan membuat contohnya.
Misal:
<a href="tebal.html">contoh pembuatan huruf tebal</a>
Jika kita luncurkan maka akan keluar tampilan seperti ini.
Nah jika sudah kita luncurkan kta bisa mengkliknya maka akan keluar isi sebuah teks dari contoh diatas.
Gimana,,,????mudah juga bukan untuk mempelajari kode ini.
6.Membuat Formulir Isian
Sekarang kita akan belajar membuat formulir isian. Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi, dan lain sebagainya.Tag form memiliki 2 atribut Yaitu:
1. action
yaitu menunjukkan file untuk memproses formulir
2. method
ada 2 macam method
a.method "POST" dipakai untuk pengiriman data formulir yang cukup besar. Misalnya buku tamu, input artikel baru dll.
b.method "GET" dipakai untuk pengiriman data yang sangat kecil.
Misalnya form untuk search engine dimana yang dikirim hanya beberapa kata pencarian saja.
Dan kali ini saya akan coba menjelaskan Form "method"
semua input data harus diletakkan diantara tag
<form action="" method="post"> dan </form>. Jika anda meletakkan diluar tag tersebut, maka data itu tidak akan dikirimkan ke file pemroses.Inilah Contohnya
<form action="" method="post"/form>
<input type="text" name="NAMA_FIELD" size="60"/></p>
<form action="" method="post"/form>
<input type="button" name="NAMA_FIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="checkbox" name="NAMA_FIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="file" name="NAMA_FIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="hidden" name="NAMA_FFIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="image" name="NAMA_FIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="password" name="NAMA_FIELD" size"30"/></p>
<form action="" method="post"/form>
<input type="radio" name="NAMA_FIELD" size"30"/></p>
<form action="" method="post"/form>
<input type="reset" name="NAMA_FIELD" size"30"/></p>
<form action="" method="post"/form>
<input type="submit" name="NAMA_FIELD" size"30"/></p>
Maka Inilah hasilnya.
7.Form Input Data
Sekarang kita akan bahas elemen-elemen form yang bisa kita masukkan
TAG INPUT
Tag pertama untuk memasukkan data adalah INPUT. Tag ini sudah sering kita jumpai di search engine, form opt-in subscriber atau formulir-formulir online. Biasanya digunakan untuk memasukkan data yang hanya satu baris saja seperti nama, email, alamat rumah dsb.
Kode HTML nya seperti ini
<input type="text" name="NAMA_FIELD" size="30"/>
karena tag ini tidak memiliki tutup maka kita tutup dibagian akhirnya tanda />
Atribut type dipakai untuk menentukan jenis input-nya. Ada beberapa macam type yaitu:
- button = input berbentuk tombol
- checkbox = input berbentuk tanda centang, dipakai untuk memilih lebih dari 1 opsi
- file = input file utk diupload
- hidden = input data tersembunyi, biasanya data default
- image = input berbentuk gambar, biasanya dipakai menggantikan tombol submit dengan gambar
- password = input untuk password. Kalau diketik, tulisannya berubah jadi *****
- radio = input bulatan, dipakai untuk memilih satu dari beberapa opsi
- reset = tombol reset untuk menghapus semua isian form
- submit = tombol untuk mengirimkan data
- text = input berbentuk kotak untuk mengisikan data
ini adalah salah satu contoh dari atribut diatas yang sudah saya buat, dengan kode sbb:
<form action="" method="post"/form>
<input type="text" name="NAMA_FIELD" size="50"/></p>
Untuk size, berisi angka yang menunjukkan berapa karakter lebar kotak input-nya. Semakin besar tentunya semakin lebar kotaknya.
8.Membuat Optional
Ada kalanya kita ingin memberikan beberapa opsi bagi pengunjung saat mereka mengisikan formulir. Di HTML, ada beberapa macam cara untuk menampilkan optional. Dan kita akan membahasnya disini.
Oh iya, sebelum diteruskan, artikel ini masih satu rangkaian dengan artikel tentang cara membuat form HTML ya. Jadi, kode-kode ini harus diletakkan di dalam blok form yang sudah kita bahas di artikel sebelumnya.
Dan inilah beberapa cara untuk menampilkan opsi kepada pengunjung.
Radio Button
Radio button adalah opsi berbentuk bulatan dimana pengunjung harus memilih salah satu dari beberapa opsi yang ada. Misalnya untuk toko garmen, opsi ini bisa dipakai untuk memilih ukuran pakaian yang diinginkan. Dan saya akan memberikan 3 contoh untuk kalian dari hasil yang sudah saya buat, seperti ini:
1. <p>blog merupakan singkatan dari ?<br/>
<input type="radio" name="singkatan" value="baju longgar"/> baju longgar<br/>
<input type="radio" name="singkatan" value="web log"/> web log<br/>
<input type="radio" name="singkatan" value="bintang logo"/> bintang logo<br/>
<input type="radio" name="singkatan" value="budi logis"/> budi logis<br/>
<input type="radio" name="singkatan" value="burung terbang"/> burung terbang<br/>
2. <p>kumpulan web blog biasanya disebut....kecuali<br/>
<input type="radio" name="biasanya" value="blogosphere"/> blogosphere<br/>
<input type="radio" name="biasanya" value="blogstorm"/> blogstorm<br/>
<input type="radio" name="biasanya" value="badai blog"/> badai blog<br/>
<input type="radio" name="biasanya" value="perkemahan"/> perkemahan<br/>
3. <p>menurut istilah bahasa indonesia "blogging" adalah ?<br/>
<input type="radio" name="bahasa" value="ngeblog"/> ngeblog<br/>
<input type="radio" name="bahasa" value="ngetwitt"/> ngetwitt<br/>
<input type="radio" name="bahasa" value="ngerock"/> ngerock<br/>
<input type="radio" name="bahasa" value="ngeri"/> ngeri<br/>
<input type="radio" name="bahasa" value="ngepir"/> ngepir<br/>
Dari contoh kode diatas, maka akan menghasilkan seperti ini:
Mudah sekali bukan? Nah, kita coba lagi optional yang lain yaitu:
Checkbox
Prinsipnya hampir sama dengan radio button, hanya saja di opsi ini, pengunjung bisa memilih lebih dari 1 pilihan. Biasanya dipakai di form subscribe yang memiliki lebih dari 1 berita.
Dan saya juga akan memberikan 3 contoh yang telah saya buat.
1.<p>langkah awal sebelum membuat blog ialah....<br/>
<input type="checkbox" name="sebelum" value="memacul"/> memacul<br/>
<input type="checkbox" name="sebelum" value="menari"/> menari<br/>
<input type="checkbox" name="sebelum" value="bernyanyi"/> bernyanyi<br/>
<input type="checkbox" name="sebelum" value="membuat email"/> membuat email<br/>
<input type="checkbox" name="sebelum" value="merokok"/> merokok<br/>
2.<p>salah satu fungsi blog adalah ?<br/>
<input type="checkbox" name="fungsi" value="sebagai bahan pupuk"/> sebagai bahan pupuk<br/>
<input type="checkbox" name="fungsi" value="sebagai bahan pangan"/> sebagai bahan pangan<br/>
<input type="checkbox" name="fungsi" value="sebagai lahan pertanian"/> sebagai lahan pertanian<br/>
<input type="checkbox" name="fungsi" value="sebagailahan peternakan"/> sebagai lahan peternakan<br/>
<input type="checkbox" name="fungsi" value="sebagai bahan pupuk"/> sebagai program-program media dan perusahaan-perusahaan<br/>
3.<p>blog virus biasanya digunakan untuk ?</br>
<input type="checkbox" name="digunakan" value="merusak"/> merusak<br/>
<input type="checkbox" name="digunakan" value="merawat"/> merawat<br/>
<input type="checkbox" name="digunakan" value="memperbaiki"/> memperbaiki<br/>
<input type="checkbox" name="digunakan" value="memotong"/> memotong<br/>
<input type="checkbox" name="digunakan" value="mencabut"/> mencabut<br/>
Kode diatas, akan menghasilkan optional seperti ini:
Nah itu lah hasilnya,,,gimana mudah bukan ???
9.Membuat Optional,Heading dan Memasukkan Gambar
Jika tadi kita sudah belajar mengenai pembuatan optional,,maka kali ini kita akan belajar membuat optional disertai dengan heading gambar. caranya hampir sama dengan yang diatas namun disini ada perbedaan sedikit yaitu penambahan kode-kode nya.
Kali ini kita akan memakai kode ini.
<h1>pihak yang memiliki blog disebut....</h1>
<img class="caption"src="gambar/orang.jpg"border="3" alt="gambar pecah"title="gambar 1.7"style="float:center"width="600"height="200"/>
<form method="post" action="#">
<input type="radio" name="memiliki" value="bos"/> bos<br/>
<input type="radio" name="memiliki" value="karyawan"/> karyawan<br/>
<input type="radio" name="memiliki" value="siswa"/> siswa<br/>
<input type="radio" name="memiliki" value="blogger"/> blogger<br/>
<input type="radio" name="memiliki" value="supir"/> supir<br/>
<input type="submit" name="submit" value="tinggal kirim saja"/>
Kode yang sudah saya buat diatas jika kita diluncurkan maka akan munculnya seperti ini..
Itu hasilnya ,,,,tidak sulit bukan??
10.Membuat Optional Data Dari Banyak Data.
Kali ini saya akan membahas tentang membuat optional data dari banyak data, pada artikel optional kita hanya bisa menggunakan sedikit data saja. paling 3-4 data aja sudah tergolong banyak nantinya.
Nah, bagaimana kalau pilihannya ada banyak, misalnya propinsi atau nama negara gitu, maka kita memerlukan optional dalam bentuk drop down. HTML menyediakan tag untuk menampilkan optional dalam bentuk dropdown dengan format seperti ini:
<select name="NAMA_FIELD"> <option value="VALUE-1">LABEL-1</option> <option value="VALUE-2">LABEL-2</option> <option value="VALUE-3">LABEL-3</option> <option value="VALUE-4">LABEL-4</option> ...... </select>Kita menggunakan tag select untuk membuat dropdown option. Dan untuk menampilkan opsi-opsinya, kita menggunakan tag option. NAMA_FIELD sebagaimana telah dijelaskan dalam membuat input data berguna untuk mengidentifikasi nama data yang dikirimkan.
VALUE-1 sampai VALUE-4 dan seterusnya kita pakai untuk memberi isi datanya jika pengguna memilih label tersebut. Misalnya pengguna memilih LABEL-4, maka data yang dikirimkan adalah VALUE-4. VALUE dan LABEL bisa dibuat sama atau berbeda-beda terserah anda.
Dan dibawah ini adalah contoh kode yang sudah pernah saya buat,namun contoh yang sudah saya buat memakai heading.
<h3>berikut nama dan kerabat dekat saya</h3>
<select name="NAMA_FIELD">
<option value="value-1">Abdul Hanan</option>
<option value="value-2">Adel</option>
<option value="value-3">Adi Santoso</option>
<option value="value-4">Andik Ardiansyah</option>
<option value="value-5">Anita Zerli</option>
<option value="value-6">Dwi Sulis</option>
<option value="value-7">Doni Triadi</option>
<option value="value-8">Eko Rasta</option>
<option value="value-9">Ibnu Robbi'</option>
<option value="value-10">Ike Nurfatimah</option>
<option value="value-11">Lestari Wahyuni</option>
<option value="value-12">Laras</option>
<option value="value-13">Miftahhun Na'im</option>
<option value="value-14">Mujib</option>
<option value="value-15">Muna Waroh</option>
<option value="value-16">Rahmad Wahyudi</option>
<option value="value-17">Riski Alviansyah</option>
<option value="value-18">Rofi'i Rutab</option>
<option value="value-19">Vinka</option>
<option value="value-20">Yuli</option>
</select>
Jika kita luncurkan maka inilah hasilnya,,
Multiple Option
Selanjutnya bagaimana kalau kita ingin pengunjung bisa memilih lebih dari satu option, maka tag select ini kita tambahkan atribut multiple. Contohnya seperti ini:<select name="NAMA_FIELD" multiple="multiple" size="2"> <option value="VALUE-1">LABEL-1</option> <option value="VALUE-2">LABEL-2</option> <option value="VALUE-3">LABEL-3</option> <option value="VALUE-4">LABEL-4</option> ...... </select>Pada kode diatas, saya tambahkan dua atribut baru yaitu
multiple="multiple" size="2".
Multiple dipakai untuk menunjukkan bahwa opsi ini bisa dipilih lebih
dari satu. Untuk memilih lebih dari satu, user cukup menekan tombol Ctrl
dan klik opsi yang diinginkan. Bagi pengguna Machintos, klik Command
Button-nya.Atribut size adalah jumlah opsi yang dimunculkan. Defaultnya kan cuma 1 aja. Nah, biar pengguna tahu kalau ini multiple option, maka kita tampilkan lebih dari 1, misalnya 2. Tapi kalau opsinya banyak saya sarankan lebih dari 2 yang dimunculkan.
<h3>Berikut Nama Provinsi dan Alamat Kantornya</h3>
<select name="NAMA_FIELD" multiple="multiple" size="3">
<option value="value-1">Nanggreo Aceh Darussalam - Jl. T. Nyak Arief No.219, Banda Aceh</option>
<option value="value-2">Sumatra Utara - Jl. P.Diponegoro No.30,Medan</option>
<option value="value-3">Sumatra Barat - Jl.Jend Sudirman No 51, Padang</option>
<option value="value-4">Riau - Jl.Jen.Sudirman No. 460,Pekan Baru</option>
<option value="value-5">Kepulauan Riau - Jl.Basuki Rahmat Tanjung Pinang</option>
<option value="value-6">Jambi - Jl.A Yani No.1 Telanai Pura,Jambi 36128</option>
<option value="value-7">Sumatra Selatan - Jl.Kapten A.Riai No.1, Palembang</option>
<option value="value-8">Bangka Belitung - Komplek Perkantoran dan Pemukiman Terpadu</option>
<option value="value-9">Bengkulu - Jl.Pembangunan No.1 Padang Harapan, Bengkulu 38225</option>
<option value="value-10">Lampung - Jl.Wr.Monginsidi 69 Teluk Betung</option>
<option value="value-11">Banten - Jl.Brigjen K.HSyam'un NO.5,Serang</option>
<option value="value-12">Jawa Barat - Jl.Taman Sari No.55,Bandung</option>
<option value="value-13">DKI Jakarta - Jl.Merdeka Selatan Blog.8-9, Jakarta Pusat</option>
<option value="value-14">Jawa Tengah - Jl,Pahlawan No.9Lt.11/12,Serang</option>
<option value="value-15">D.I Yogyakarta - Komp.Kepatihan Danurejan,Yogyakarta 55213</option>
<option value="value-16">Jawa Timur - Jl Ahmad Yani242-244,Surabaya</option>
<option value="value-17">Bali - JlKapten Cok Agung Tresna,Renon</option>
<option value="value-18">Kalimantan Barat - JlA,Yani,Pontianak</option>
<option value="value-19">Kalimantan Selatan - Jl.Jend.Sudirman No.14,Banjarmasin 70114</option>
<option value="value-20">Kalimantan Timur - Jl Gadjah Mada 2,Samarinda</option>
<option value="value-21">Sulawesi Barat - Jl.Ahmad Yani No.1Mamuju 91511</option>
<option value="value-22">Sulawesi Selatan - Jl.Urip Sumoharjo 269,Makassar 90245</option>
<option value="value-23">Sulawesi Tengah - Jl.UProf.Dr.Moh.Yamin,SH No.7,Palu 94112</option>
<option value="value-24">Sulawesi Tenggara - Kompleks Bumi Pradja Anduonouhu,Kendari93232</option>
<option value="value-25">Sulawesi Utara - Jl.17 Agustus No. 69,Manado</option>
<option value="value-26">Gorontalo - Jl.Sapta Marga Gorontalo</option>
<option value="value-27">Maluku - Jl.Dr.Latumeten No.12,Ambon</option>
<option value="value-28">Maluku Utara - Jl.Pahlawan Revolusi No 1 Ternate</option>
<option value="value-29">Nusa Tenggara Barat - Jl.Udayana No.14,Mataram</option>
<option value="value-30">Nusa Tenggara Timur - Jl.Raya El Tari No.52 Kupang</option>
<option value="value-32">Papua - Jl.Soa Siu Dok,Jayapura</option>
<option value="value-33">Papua Barat - Jl.Siliwangi No.1,Manokwari</option>
</select>jika diluncurkan maka akan muncul seperti ini.
Terlihatkan perubahanya,,,???
11.Membuat Text Area
Cara Mudah Membuat Textarea - Pada kesempatan kali ini saya akan share cara mudah membuat textarea, apa itu textarea? Textarea adalah sebuah elemen untuk menaplkan sebaris/lebih tulisan dalam blok tersendiri. Dalam membuat textarea kita bisa memodifikasi kodenya misal dengan menambahkan selector CSS agar tampilan yang dihasilkan kelihatan lebih bagus dan menarik perhatian.
Berikut script kode untuk membuat textarea dengan berbagai variasi tampilan :
Script Pertama
<textarea align="center">
Silahkan Berikan Komentar Anda Yang Sopan Dan Berbobot
</textarea>
Previw :
Script Kedua
<textarea align="center" style="background-color: #6699cc; height:50px; width:50px;">
Kalimat Komentar Ini Biasa Saja Namun Mengandung Warna Kebiruan
</textarea>
Previw:
Script Ketiga
<textarea align="center" style="border-radius: 6px 6px 6px 6px; border: 2px solid rgb(204, 204, 204); height: 100px; width:100px;">
textarea dengan style garis tepi rounded corner
</textarea>
Previw:
Script Keempat
<textarea align="center" style="background-color: #ff6633; border-radius: 8px 8px 8px 8px; border: 1px solid rgb(204, 204, 204); height:200px; width:200px">
Kolom Komentar Ini Dibuat Dengan Style Garis Bersudut Tumpul Dengan Warna Orange
</textarea>
Previw:
Note :
#6699cc dan #ff6633 adalah kode warna, ganti sesuai dengan keinginan anda, sedangan height dan width adalah kode untuk mengatur tinggi dan lebar textarea yang akan dibuat, sesuaikan dengan selera anda.
12.Membuat Tombol Submit Dan Reset
Sampailah kita pada bagian akhir pembuatan form dengan HTML. Apalagi kalau bukan tombol submit dan reset. Sebenarnya, saya sudah menjelaskan tentang tombol submit ini di pelajaran tentang input data, hanya saja mungkin anda belum terfokus kesana sehingga saya perlu untuk menjelaskan lebih lanjut disini.
Untuk membuat tombol submit, kita menggunakan kode seperti ini:
<input type="submit" value="kirimkan"/>
maka inilah hasilnya.
Sedangkan untuk tombol reset, kita menggunakan kode:
<input type="reset" value="Hapus Form"/>
maka inilah hasilnya.
Submit Menggunakan Gambar
Sekarang kita akan mencoba membuat tombol submit menggunakan gambar. Caranya hampir sama, hanya saja kita sekarang menggunakan type=”image”. Contohnya seperti ini:<input type="image" src="file-gambar.jpg" width="55" height="22"/>
file-gambar.jpg harus anda ganti dengan gambar anda sendiri. width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel.
Inilah contoh yang sudah saya buat dengan kode:
<input type="image" src="gambar/penemu.jpg" width="20" height="20"/>
Maka tampilanya seperti ini.
Nah, dengan berakhirnya artikel tentang tombol submit ini, maka berakhir jugalah rangkaian pelajaran tentang membuat form ini. Insya Allah nanti kita akan bahas elemen-elemen HTML yang lain.
Tidak ada komentar:
Posting Komentar