Sebelum nya kita akan pengenalan HTML terlebih dahulu, Udah pada tahu belum HTML itu apa,,??
1. Pengenalan HTML
HTML(Hyper Text Markup Language) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelasan web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASC11 normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).Keunggulan nya HTML adalah mengintergrasikan gambar dengan tulisan, membuat pranala, mengintergrasikan berkas suara dan rekaman gambar hidup,dan membuat form iteraktif. Untuk membuat file HTML sangat mudah, Anda cukup menuliskan beberapa baris kata yang ingin anda tampilkan dan simpan file nya dengan ekstensi html.
Dan untuk penyimpan html kita menggunakan dot html atau misal gambar.html dan save as type kita ganti menjadi ALL FILES.
2. HTML Pertamaku
Sekarang mari kita coba menulis kode HTML pertama kita, untuk mengedit file kita menggunakan notepad.disini saya menyarankan anda untuk menggunakan notepad. Cara untuk memanggil notepad adalah tekan windows+R.
Sebelumnya HTML menggunakan tag pembuka dan tag penutub. Diantara lain adalah:
* Tag pembuka diantara lain yaitu: <html>
<head>
<title></title>
<body>
* Dan untuk Tag penutup diantara nya yaitu: </body>
</head>
</html>
Disini kita bisa memanipulasi tampilan tulisan teks sehingga tulisan nya tampak keren dan cantik cantik seperti di website website pada umumnya. Kita akan memenipulasi teks sesuai keinginan, seperti menebalkan huruf, memiringkan, memberi garis bawah, mencoret huruf, membuat huruf keyboard, membuat huruf subscripted, dan membuat huruf superscripted. Dan rumus rumus nya yaitu antaralain seperti dibawah ini:
<strong> menebalkan huruf
<em> memiringkan huruf
<ins> menggarisbawahi huruf
<del> mencoret huur
<kbd> membuat huruf keyboard
<sub> membuat huruf subscripted
<sup> membuat huruf superscripted.
* Sekarang kita coba memanggil notepad, untuk membuat huruf huruf seperti diatas:
Disini misal nya kita menggunakan kalimat seperti dibawah, dan kemudian kita ketikkan rumus nya:
<html>
<head>
<title>saya</title>
<body>
<strong>mos</strong>
<em>saya</em>
<ins>pos</ins>
<del>dibentak </ins>
<sub>setalah pos pertama</sub>
<sup>orang</sup>
</body>
</head>
</html>
Dan Hasil nya akan seperti dibawah ini:
* Dan untuk membuat paragraf kita bisa menggunakan rumus:<P ALIGN="LEFT"> dan ditutup oleh paragraf penutup </P>
contoh nya seperti ini:
<html>
<head>
<title>pengalaman ku</title>
</head>
<body>
<P ALIGN="LEFT">Baik lah teman – teman saya Cahyu Astuti dari SMKN 5 Tanjung Jabung Timur, ingin menceritakan pengalam saya waktu Masa Orientasi Siswa (MOS).Walau pun kurang menyenangkan waktu MOS nya tapi berkesan banget bagi saya , dan tak kan pernah terlupakan. Pada Tahun 2013 saya mendaftarkan diri di Sekolah Menegah Kejuruan (SMK), yang bertempat di Jalan Sultan Thaha </P>
</body>
</head>
</html>
Dan hasil nya akan seperti di bawah ini:
Untuk memasukkan lokasi gambar adalah folder dimana gambar itu diletakkan berdasarkan letak file html.Misal nya file html nya diletak kan di folder z dan nama folder untuk mengisi gambar nya harus jelas, dan mudah diingat. Dan nama gambar yang akan kita masukkan harus jelas juga, misal nya nama fordernya gambar dan nama gambar yang akan kita masukkan nama nya huawei.
* Kode kode untuk memasukkan gambar yaitu:
<img src="gambar/huawei.jpg" alt="gambar pecah"/>
*Dan kode kode untuk memasukkan dan memberi bingkai yaitu:
<img class="caption"src="gambar/huawei.jpg"border="4" alt="gambar pecah"title="huawei"style="float:left"widht="200"height"200"/>
Seperti contoh contoh di atas,jika kita ingin memasukkan gambar pada html kita harus menggunakan tag pembuka dan tag penutup.Kata HAWEI diatas adalah nama gambar yang akan masukkan. Dan disini saya membuat gambar berada di sebelah kiri, jika anda ingin mengubahnya menjadi sebelah kanana atau berada ditengah anda tinggal mengganti Left nya.
Dan contoh gambar nya seperti dibawah ini:
 | ||||
| gambar 1.1 |
4.Macam Macam Heading
HTML juga mempunyai heading, ada heading 1 hingga heading 6. Bagi anda yang belum paham apa itu heading silah kan baca baca buku apa saja khususnya buku non fiksi. Di dalam pembuatan web, anda harus meletakkan heading dalam halaman web anda. Gunanya agar Search engine mampu mengenali tema dan materi yang sedang anda sampaikan di halaman web tersebut..Dengan begitu,mereka tidak akan salah persepsi, misalnya:
*Ini lah kode untuk membuat heading:
<h1>300 kelompok arisan emas </h1>
<h2>yamaha perkenalkan New Mio M3 Blue Core</h2>
<h3>Awalnya Sulit Pasarkan versa Board</h3>
<h4>Tendangan Alvin Terbaca kiper</h4>
<h5>Giliran Koran Jerman Diserang</h5>
<h6>Walikota Jambi Hadiri Maulid Nabi di Lapas</h6>
<h7>Hayat Boumeddiene Diduga di Suriah</h7>
Dan hasih heading nya akan menjadi seperti di bawah ini:
5. 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. Dibanding skill pelajaran html lainnya seperti membuat paragraf atau memasukkan gambar, membuat form relatif lebih sulit.Tag form memiliki setidaknya 2 atribut.Yaitu
1. action: yaitu yang menunjukkan file untuk memproses formulir. Biasanya sebuah file php.
2.
Method.Ada 2 macam method yaitu
POST dan GET. *Method POST dipakai untuk pengiriman data formulir yang cukup besar. Misalnya buku tamu, threat forum, input artikel baru.
* Method GET dipakai untuk pengiriman data yang sangat kecil. Misalnya form untuk search engine dimana yang dikirim hanya beberapa kata pencarian saja.
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. Contohnya seperti ini:
form action="" method="post">
<!-- Isi formulir disini -->
</form>
6. Form Input Data
Kita lanjutkan pembahasan soal form. Tag pertama untuk memasukkan data adalah INPUT. Tag ini sudah sering kita jumpai di search engine, form opt-in subscriber atau formulir-formulir online lainnya. Biasanya dipakai untuk memasukkan data yang hanya 1 baris saja seperti nama, email, alamat rumah, dll.
Karena tag ini tidak memiliki tutup, maka kita tutup di bagian akhirnya dengan tanda
/>. Atribut berikutnya adalah name. Atribut ini dipakai untuk mengenali data apa yang sedang dimasukkan.Cara membuat input ini pun gampang.
*Kode HTML-nya seperti ini:
<input type="text" name="NAMA_FIELD" size="30" />
Atribut type dipakai untuk menentukan jenis input-nya. Ada beberapa macam type yaitu:
Dalam pembuatan input data kita masih menggunakan tag pembuka dan tag penutup html, Dan itu jangan jangan lupa .
- 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
<form action="" method="post">
<input type="button" name="NAMA_FIELD" size="30"/></p>
<input type="checkbox" name="NAMA_FIELD" size="30"/></p>
<input type="file" name="NAMA_FIELD" size="30"/></p>
<input type="hidden" name="NAMA_FIELD" size="30"/></p>
<input type="image" name="NAMA_FIELD" size="30"/></p>
<input type="password" name="NAMA_FIELD" size="30"/></p>
<input type="radio" name="NAMA_FIELD" size="30"/></p>
<input type="reset" name="NAMA_FIELD" size="30"/></p>
<input type="submit" name="NAMA_FIELD" size="30"/></p>
Dan hasilnya akan menjadi seperti ini:
7. 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 halaman lain
Untuk fungsi yang ini tentu sudah banyak yang tahu.
kode html:
<a href="Masukan link disini">tulisan</a>Pengertian Link - Definisi Link (atau di sebut juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertex) ke dokumen yang lain atau sumber lain. seperti hal nya suatu kutipan di dalam literatur. dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan. Pengertian link atau dalam bahasa Indonesia disebut dengan tautan adalah tulisan atau gambar yang apabila di klik akan menuju halaman tertentu sesuai dengan yang di tentukan oleh pembuat link. Dalam pembuatan link tag pembuka di awali dengan <A HREF Dan ditutup oleh tad </a>. Misal nya seperti ini, <a href="tebal.html">contoh pembuatan huruf tebal pada html</a
<a href="tebal.html">contoh pembuatan huruf tebal pada html</a>.
Dan seterusnya akan seperti itu, setelah selesai kita gabungkan menjadi satu nama folder. Hasilnya akan seperti ini:
<p><a href="tebal.html">contoh pembuatan huruf tebal pada html</a></p>
<p><a href="miring.html">contoh pembuatan huruf miring pada html</a></p>
<p><a href="garis bawah.html">contoh pembuatan huruf bergaris bawah pada html</a></p>
<p><a href="sub.html">contoh pembuatan huruf subscripted pada html</a></p>
<p><a href="mencoret.html">contoh pembuatan huruf mencoret pada html</a></p>
<p><a href="sup.html">contoh pembuatan huruf superscrited</a></p>
Dan hasil nya akan menjadi seperti ini:
Dan jika kita klik salah satu contoh diatas, maka akan keluar kata kata yang kita ketik kan tadi,
mudah bukan cara membuat nya,,!!!
8. Mebuat Optional
Sekarang kita masuk dalam pembelajaran membuat optional. Di HTML, ada beberapa macam cara untuk menampilkan optional.Dan inilah beberapa cara untuk menampilkan opsi kepada pengunjung.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. Disini saya akan memberi tiga contoh dalam pembuatan nya>
* 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. Contohnya seperti ini:
1. <p>apa lambang hewan pada twitter?<br/>
<input type="radio" name="hewan" value="burung"/> burung<br/>
<input type="radio" name="hewan" value="kambing"/> kambing<br/>
<input type="radio" name="hewan" value="kelinci"/> kelinci<br/>
<input type="radio" name="hewan" value="kucing"/> kucing<br/>
<input type="radio" name="hewan" value="cicak"/> cicak<br/>
2. <p>siapa saja yang mendirikan twitter?<br/>
<input type="radio" name="orang" value="johan arifin, cristoper colombus"/> Johan Arifin,Cristoper Colombus<br/>
<input type="radio" name="orang" value="Muhammad Ahsan, Taufiq Hidayat"/> Muhammad Ahsan, Taufiq Hidayat<br/>
<input type="radio" name="orang" value="Jack Dorsey, BizStone, Evan Williams"/> Jack Dorsey, BizStone, Evan Williams<br/>
<input type="radio" name="orang" value="Johan Arifin, Taufiq Hidayat"/> Johan Arifin, Taufiq Hidayat<br/>
<input type="radio" name="orang" value="Jack Dorsey, Muhammad Ahsan"/> Jack Dorsey, Muhammad Ahsan<br/>
3.<p> twitter didirikan pada tahun dan bulan berapa?<br/>
<input type="radio" name="tahun" value="bulan Maret tahun 2006"/> bulan Maret tahun 2006<br/>
<input type="radio" name="tahun" value="bulan Agustus tahun 2010"/> bulan Agustus tahun 2010<br/>
<input type="radio" name="tahun" value="bulan Januari tahun 2002"/> bulan Januari tahun 2002<br/>
<input type="radio" name="tahun" value="bulan Oktober tahun 1997"/> bulan Oktober 1997<br/>
<input type="radio" name="tahun" value="bulan Maret tahun 2002"/> bulan Maret 2002<br/>
Kode kode di atas akan menghasilkan seperti ini.:
 |
| gambar 1.1 |
 |
| gambar 1.2 |
 |
| gambar 1.3 |
Sangat mudah bukan, sekarang kita akan melanjutkan membuat optional yang lain nya,, ???
* 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.
Contoh nya seprti ini:
1. <h1>apa lambang hewan pada twitter?</h1>
<form method="post" action="#">
<input type="checkbox" name="hewan" value="burung"/>burung<br/>
<input type="checkbox" name="hewan" value="kambing"/>kambing<br/>
<input type="checkbox" name="hewan" value="kelinci"/>kelinci<br/>
<input type="checkbox" name="hewan" value="kucing"/>kucing<br/>
<input type="checkbox" name="hewan" value="cicak"/>cicak<br/>
<input type="submit" name="submit" value="tiggal kirim saja"/>
2. <h1>siapa saja yang mendirikan twitter?</h1>
<form method="post" action="#">
<input type="checkbox" name="orang" value="johan arifin, cristoper colombus"/>johan arifin, cristoper colombus<br/>
<input type="checkbox" name="orang" value="muhammad ahsan, taufiq hidayat"/>muhammad ahsan, taufiq hidayat<br/>
<input type="checkbox" name="orang" value="jack dorsey, bizstone, evan williams"/>jack dorsey, bizstone, evan williams<br/>
<input type="checkbox" name="orang" value="johan arifin, taufiq hidayat"/>johan arifin, taufiq hidayat<br/>
<input type="checkbox" name="orang" value="jack dorsey, muhammad ahsan"/>jack dorsey, muhammad ahsan<br/>
<input type="submit" name="submit" value="tinggal kirim saja"/>
3. <h1>twitter didirikan pada tahun berapa?</h1>
<form method="post" action="#">
<input type="checkbox" name="tahun" value="bulan Maret tahun 2006"/> bulan Maret tahun 2006<br/>
<input type="checkbox" name="tahun" value="bulan Agustus tahun 2010"/> bulan Agustus tahun 2010<br/>
<input type="checkbox" name="tahun" value="bulan Januari tahun 2002"/> bulan Januari tahun 2002<br/>
<input type="checkbox" name="tahun" value="bulan Oktober tahun 1997"/> bulan Oktober 1997<br/>
<input type="checkbox" name="tahun" value="bulan Maret tahun 2002"/> bulan Maret 2002<br/>
<input type="submit" name="submit" value="tinngal kirim saja"/>
Kode kode diatas akan menghasilkan seperti dibawah ini:
 |
| gambar 1.1 |
 |
| gambar 1.2 |
 |
| gambar 1.3 |
Nahh,,!! Sangat mudah bukan membuat nya...???
9. Menyisipkan Gambar Pada Pembuatan Optional Data
Gambar sangat penting dalam sebuah penjelasan. Gambar mempunyai tugas meneruskan maksud dari perancang dengan tepat kepada orang-orang yang bersangkutan, kepada perencanaan proses, pembuatan, pemeriksaan, perakitan, dan penyimpanan dan penggunaan keterangan. Disini saya akan menjelaskan bagai mana cara menyisipkan gambar pada tag html. Contoh nya dalah sebagai berikut. Disini kita menggunakan kode kode yang hampir sama dengan membuat optional, disini kita menambah kan kode untuk menyisipkan gambar, yaitu:
Contohnya yaitu sebagai berikut ini:
1. <h1>lihat lah gambar dibawah ini, apa lambang hewan pada twitter?</h1>
<img class="caption"src="gambar/satu.jpg"border="3" alt="gambar pecah"title="burung"style="float:center"width="600"height="200"/>
<form method="post" action="#">
<input type="radio" name="hewan" value="burung"/> burung<br/>
<input type="radio" name="hewan" value="kambing"/> kambing<br/>
<input type="radio" name="hewan" value="kelinci"/> kelinci<br/>
<input type="radio" name="hewan" value="kucing"/> kucing<br/>
<input type="radio" name="hewan" value="cicak"/> cicak<br/>
<input type="submit" name="submit" value="tinggal kirim saja"/>
2. <h1>lihat lah gambar di bawah ini, twitter dikenal juga dengan sebutan?</h1>
<img class="caption"src="gambar/tiga.jpg"border="3" alt="gambar pecah"title="kicauan"style="float:center"width="600"height="200"/>
<form method="post" action="#">
<input type="radio" name="juga" value="ocehan"/> ocehan<br/>
<input type="radio" name="juga" value="kicauan"/> kicauan<br/>
<input type="radio" name="juga" value="cerita"/> cerita<br/>
<input type="radio" name="juga" value="kumupulan"/> kumpulan<br/>
<input type="radio" name="juga" value="layanan"/> layanan<br/>
<input type="submit" name="submit" value="tinggal kirim saja"/>
Dan hasil kode kode diatas adalah seperti dibawah ini:
 |
| gambar 1.1 |
 |
| gambar 1.2 |
10.Membuat Optional Data Dari Banyak Pilihan
Pada artikel sebelumnya tentang membuat optional kita hanya bisa menggunakan sedikit data saja. Paling 3-4 data aja sudah tergolong banyak nantinya. Bagaimana kalau pilihannya ada banyak, misalnya propinsi atau nama negara .Maka kita memerlukan optional dalam bentuk drop down.Kita menggunakan tag select untuk membuat dropdown option. Dan untuk menampilkan opsi-opsinya, kita menggunakan tag option.VALUE-1 sampai VALUE-4dan 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. HTML menyediakan tag untuk menampilkan optional dalam bentuk dropdown dengan format 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 di atas saya menambahkan dua atribut baru yaitu multiple="multiple"
size="2" .Multipe dipakai untuk menunjukkan bahwa opsi ini bisa dipilih lebih dari
satu. Atribut size adalah jumlah opsi yang dimunculkan
Nahh,, disini saya akan memberikian contoh nya bagaimana membuat optional dari
banyak data :
* Multiple Banyak Data
1. <h3>berikut nama dan kerabat dekat saya</h3> <select name="NAMA_FIELD"> <option value="VALUE-1">deviorina aqilla raisya</option> <option value="VALUE-2">diana mafnawati</option> <option value="VALUE-3">fatma dwi santika</option> <option value="VALUE-4">kuslan</option> <option value="VALUE-5">maisaroh</option> <option value="VALUE-6">naura yasmin</option> <option value="VALUE-7">ria surtiasih</option> <option value="VALUE-8">sabil wirayuda</option> <option value="VALUE-9">samiran</option> <option value="VALUE-10">siti syarifah</option> <option value="VALUE-11">situn</option> <option value="VALUE-12">suci lupita sari</option> <option value="VALUE-13">sugioarto</option> <option value="VALUE-14">suroso</option> <option value="VALUE-15">suryadi</option> <option value="VALUE-16">suryanto</option> <OPTION value="VALUE-17">try nuryani</option> <option value="VALUE-18">udi laksono</option> <option value="VALUE-19">wiwit srirahayu</option> <option value="VALUE-20">yulia ningsih</option>
Dan hasilnya akan menjadi seperti dibawah ini. Jika kita klik maka akan keluar
semua nama nama provinsi di Indonesia.
 |
| gambar 1.1 |
*Multiple Optional
Dan ini lah kode untuk multiple optional:
2. <h3>berikut nama dan kerabat dekat saya</h3> <select name="NAMA_FIELD" multiple="multiple" size="2"> <option value="VALUE-1">deviorina aqilla raisya</option> <option value="VALUE-2">diana mafnawati</option> <option value="VALUE-3">fatma dwi santika</option> <option value="VALUE-4">kuslan</option> <option value="VALUE-5">maisaroh</option> <option value="VALUE-6">naura yasmin</option> <option value="VALUE-7">ria surtiasih</option> <option value="VALUE-8">sabil wirayuda</option> <option value="VALUE-9">samiran</option> <option value="VALUE-10">siti syarifah</option> <option value="VALUE-11">situn</option> <option value="VALUE-12">suci lupita sari</option> <option value="VALUE-13">sugioarto</option> <option value="VALUE-14">suroso</option> <option value="VALUE-15">suryadi</option> <option value="VALUE-16">suryanto</option> <OPTION value="VALUE-17">try nuryani</option> <option value="VALUE-18">udi laksono</option> <option value="VALUE-19">wiwit srirahayu</option> <option value="VALUE-20">yulia ningsih</option>
Hasilnya akan menjadi seperti di bawah ini:
 | ||
| gambar 1.2 |
Gimana tidak susah bukan untuk membuat optional dari banyak data,,,,????
11. Membuat Text area
Kini kita akan memasukkan satu elemen form yang juga sangat sering dipakai yaitu textarea. Textarea ini adalah kotak untuk memasukkan data berupa artikel atau tulisan yang cukup panjang. Biasanya untuk form komentar, iklan baris, pengisian artikel, dll.
* Cara membuat textarea sangat mudah. Berikut ini adalah kodenya:
<textarea name="NAMA_FIELD" cols="LEBAR_KOLOM" rows="TINGGI_KOTAK"></textarea>
NAMA_FIELD = nama data yang dimasukkan
LEBAR_KOLOM = berisi angka yang menunjukkan berapa karakter lebar kotaknya
TINGGI_KOTAK = berisi angka yang menunjukkan berapa karakter tinggi kotaknya
Ada beberapa script untuk membuat textarea menjadi lebih berfariasi, adalah sebagai berikut:
*Script Pertama
<textarea align="center">silahkan beri komentar anda yang sopan dan berbobot</textarea>
Dan hasil akan menjadi seperti ini:
 |
| gambar 1.1 |
*Script Kedua
<textarea align="center" style="background-color: #6699cc; height:50px; width:50px;">komentar ini biasa saja namun mengandung warna kebiruan</textarea>
</body>
Dan hasilnya menjadi seperti ini
 | ||||||
| gambar 1.2 |
*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>
Dan hasilnya akan seperti ini:
 | ||||
| gambar 1.3 |
*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 di buat dengan style garis bersudut tumput dengan warna orange
</textarea>
Dan hasilnya akan seperti ini :
 |
| gambar 1.4 |
Ada catatan kode #ff6633 dan #6699cc dapat diganti dengan selera warna kebutuhan anda.
12.Membuat Tombol Reset Dan Submit
Sampailah kita pada bagian akhir pembuatan form dengan HTML. Apalagi kalau bukan tombol
submit dan reset
*Untuk membuat tombol submit, kita menggunakan kode seperti ini:
<input type="submit" value="Kirimkan"/>.
*Sedangkan untuk tombol reset, kita menggunakan kode:
<input type="reset" value="Hapus Form"/>
Kata-kataKirimkandanHapus Formbisa anda ganti dengan kata-kata yang lainnya
sesuka hatiDan saya akan mencontohkan bagaimana cara membuat nya, dengan menggunakan kode kode berikut ini:
*Contoh submit
<input type="submit" value="Kirimkan"/>
Maka hasilnya akan menjadi seperti ini:
 | |
| gambar 1.1 |
*Contoh Reset
<input type="reset" value="Hapus Form"/>
Maka hasilnya akan seperti ini:
 |
| gambar 1.2 |
*Submit Menggunakan Gambar
<input type="image" src="gambar/EMPAT.jpg" width="20" height="20"/>
Maka hasilnya akan seperti ini:
 |
| gambar 1.3 |
Nah, dengan berakhirnya artikel tentang tombol submit ini, maka berakhir jugalah rangkaian pelajaran tentang membuat form. Semoga pembelajaran ini bermanfaat bagi kita semua.
DAN SELAMAT MENCOBA FRIEND'S
Tidak ada komentar:
Posting Komentar