Senin, 30 Maret 2015

Membuat Table Pada HTML

* Membuat Table Pada HTML *
1. Membuat Table Sederhana

         Saya akan menjelaskan bagaimana cara membuat table sederhana, sangat mudah bagi yang sudah mengerti. membuat table HTML di perlukan ada 3 dasar, diantaranya yaitu :
   - Penanda table <table>
   - Penanda baris <tr>
   - Penanda kolom <td>
        Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web terbagi pada beberapa kolom atau baris.
     Selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Syarat Dalam membuat tabel di HTML harus memiliki elemen atau kode tertentu akan tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu.
Jangan lupa jika sudah anda masukkan kode awalan maka anda juga harus memakai kode penutupnya juga.
     - </td>
     - </tr>
     - </table>
Di bawah ini adalah salah satu contoh intuk pembuatan table sederhana :

<html>
<Head>
<Title>Tabel saya</title>
</head>
<body>
<p>Ini<strong>tabel saya</strong>yang sudah jadi</p>
<table>
<tr>
<td>kolom pertama baris ke 1</td>
<td>kolom kedua baris ke 1</td>
<td>kolom ketiga baris ke 1</td>
</tr>
<tr>
<td>kolom ke 1 baris kedua</td>
<td>kolom ke 2 baris kedua</td>
<td>kolom ke 3 baris kedua</td>
</tr>
</table>
</body>
</html>

Maka hasil browser akan  jadi seperti ini :

          Bagaimana...?? apa kalian sudah paham tentang table sederhana..!!

2. Membuat Table Kompleks
          Baik lah langkah selanjutnya saya akan menjelaskan apa itu table kompleks.
Kompleks disini adalah sebuah table yang akan menggabungkan beberapa cell sesuai kebutuhan. dan ini Cara pembuatannya adalah sebagai berikut :

<html>
<head>
<title>tabel arisan</title>

<style type="text/CSS">
table {
Border:1px solid #C6C6C6;
}
</style>
</head>
<body>
<p>ini table arisan pengajian ibu-ibu didendang</p>
<table>
<tr>
<td rowspan="2" style="text-align:center; vertical-align:middle;">Nama ibu-ibu</td>
<td colspan="4" style="text-align:center; vertical-align:middle;">Bulan</td>
</tr>
<tr>
<td>Muharam</td>
<td>Safar</td>
<td>Rabiul awal</td>
<td>Rabiul akhir</td>
</tr>
<tr>
<td>Sharie</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
<tr>
<td>Yani</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
<tr>
<td>Cahyu</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
</table>
</body>
</html>

Dan hasilnya akan menjadi seperti ini :

 
3. Membuat Table Dengan Heading 
       Kali ini kita membuat table heading,, bagaimana caranya,, berikut saya jelaskan sedikit tentang table heading.Tag heading adalah sebuah tag/code HTML untuk memperbesar sebuah tulisan. Biasanya heading tag digunakan dalam membuat judul sebuah document atau artikel. Heading tag sendiri memiliki 6 tingkatan yang dimulai dari 1 sampai 6.
Heading 1 atau <h1> merupakan tingkatan paling besar, sementara heading 6 atau <h6> merupakan tingkatan paling kecil.  Heading tag juga berguna untuk Pengoptimalkan SEO secara onpage.

<html>
<head>
<title> MEMBUAT DOKUMEN HTML DENGAN TAG HEADING</title>
</head>
<body>
<h1>Heading dengan ukuran 1</h1>
<h2>Heading dengan ukuran 2</h2>
<h3>Heading dengan ukuran 3</h3>
<h4>Heading dengan ukuran 4</h4>
<h5>Heading dengan ukuran 5</h5>
<h6>Heading dengan ukuran6</h6>
</body>
</html>
Tapi dalam pembuatan ini kita memakai <h2> heading dengan ukuran 2</h2> , berikut langkah membuat heading :
 <html>
<head>
<title>tabel kompleks</title>
</head>
<body>
<h2>ini tabel yang telah menggunakan heading</h2>
<table>
<tr>
<th>Nomor induk siswa</th>
<th>Nama siswa</th>
</tr>
<tr>
<td>249/9971084890</td>
<td>Siti syarifah</td>
</tr>
</table>
</body>
</html>

Hasilnya akan menjadi seperti ini :
       Kalian sudah paham kan apa itu table menggunakan heading

4. Membuat Table Formulir
         Sekarang kita akan belajar bagaimana membuat formulir isian di HTML. Ada macam-macam modul input datanya dan insya Allah akan kita bahas semua. Kita mulai dengan membuat format sebuah formulir. Untuk membangun formulir, anda harus mengawali dan menutupnya dengan tag. contohnya seperti ini :

      - <Form action="" method="post">
      - <!-- Isi formulir disini -->  
      - </form> 
Tag form memiliki setidaknya 2 atribut. Pertama yaitu action yang menunjukkan file untuk memproses formulir. Biasanya sebuah file php. Insya Allah nanti kita bahas di bagian PHP juga. Jadi sementara kita kosongi dulu. Mengkosongi atribut action juga berarti mengirimkan data ke file yang sama. Dan karena file ini tidak ada fungsi untuk memproses data, maka ya tidak akan terjadi apa-apa.
Atribut berikutnya adalah 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 atau apa ajalah. Method GET dipakai untuk pengiriman data yang sangat kecil. Misalnya form untuk search engine dimana yang dikirim hanya beberapa kata pencarian saja.
Nantinya, 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.

* Ini Cara membuat Formulir Isian :


 <html>
<head><title>INPUT DATA</title></head>
<body>
<form>
<table width="55%" height="60%" border="1" align="center">
<tr align ="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="Simpan">
<input type="reset" value="Reset">
<input type="button" value="Keluar">
</td>
</tr>
</table>
</form>
</body>
</html>

Dan hasilnya akan menjadi seperti ini :


      Nah gi mana ... ?? apa kalian sudah paham atas penjelasan formulir isian yang sudah saya jelasin tadi !!

5. Mewarnai Table
        Dan selanjutnya saya akan menjelaskan bagaimana cara mewarnai table. Jika kita ingin mewarnai tabel sesuai yang kita inginkan, seperti ini.

 Untuk kodenya seperti kode html yang sudah saya sampaikan di postingan sebelumnya. Hanya di tambahkan kode bgcolor="warna" di setiap Tag, seperti <table>, <th>, <td>
.
     - Untuk mewarnai seluruh tabel <table></table>, kodenya seperti ini.
       <table border="1px"; bgcolor="warna" > isi </table>
     - Untuk mewarnai kepala tabel <th></th>, kodenya seperti ini.
       <th bgcolor="warna" > isi </th>
     - Untuk mewarnai kolom tabel <td></td>, kodenya seperti ini.
       <td bgcolor="warna" > isi </td>

Jika anda sudah jelas tentang cara mewarnai di setiap element tabel tadi, sekarang ini adalah contoh kode keseluruhan tabel yang berwarna warni.

<html>
<head>
<title>Tabel dengan warna</title>
<body>
<Table width="500" Border="1" CellSpacing="0" Cellpadding="3">
<tr>
<th Width="53" rowspan="3" bgcolor="#00CCCC"> rowspan 3</th>
<th width="74" height="41" bgcolor="#00CCCC" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">colspan 2 </th>
</tr>
<tr>
<td bgcolor="#66CCFF">Siti syarifah</td>
<td align="center" bgcolor="#99CC66">Parit 13</td>
<td bgcolor="#9966FF">085269837667</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>
</table>
</body>
</html>

Maka hasilnya akan seperti ini :

  Nah gi mana ... ?? Kalian sudah mengertikan apa itu mewarnai table...!!

Cukup sampai di sini dulu ea saya menjelaskan  tentang pelajaran yang selama ini saya dapat,  besok saya sambung lagi.. Semoga apa yang saya jelaskan tadi dapat bermanfaat bagi kalian semua , Dan anda bisa mengerti dan memahami isinya...
Diposting oleh di Tidak ada komentar:

Senin, 16 Maret 2015

* Rangkuman Pelajaran HTML *

Rangkuman Pelajaran HTML

                                                 * Assalamu'alaikum Wr.Wb *

           Disini saya akan menjelaskan semua rangkuman yang pernah saya pelajari  di bulan maret ini selama saya magang...

*. saya belajar tentang pengenalan HTML

       HTML bisa disebut bahasa yang digunakan untuk menampilkan dan mengelola hypertext. Hypertext dalam HTML berarti bahwa kita dapat menuju suatu tempat, misalnya website atau halaman homepage lain, dengan cara memilih link yang biasanya digarisbawahi atau diwakili oleh suatu gambar. Selain link ke website atau homepage halaman lain, hypertext ini juga mengizinkan kita untuk menuju ke salah satu bagian dalam satu teks itu sendiri.
HTML terdiri dari sejumlah perintah dimana kita bisa men-set judul, garis, table, gambar dan lain- lain yang disebut tag. Setiap tag masih dapat dilengkapi lagi oleh sejumlah attribute. Dibawah ini sebagian contoh tag dan attributenya.

      Rumus untuk membuat HTML :
                - <html>
                - <head>
                - <title>apa kabar sahabatku</title>
                - <body>
                - setelah itu masukan apa yang anda ingin membuat pada teks itu
                - jangan lupa untuk menutup html dengan cara seperti ini
                           - </body>
                           - </html>

dalam pembuatan rumus HTML masih banyak lagi, ada rumus <strong> rumus strong ini berfungsi untuk menebalin tulisan, contoh,a seperti ini
               -

 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

                                                  <em>apa kabar sobat</em>
                                                     Maka akan jadi seperti ini
Dan anda coba lah tag - tag yang lain ikuti rumus contoh yang di atas....!!!

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

*. belajar tentang cara memasukan gambar

        Caranya sama seperti kode diatas tadi, sebelum memasukan gambar kita harus buka notepad nya terlebih dahulu, setelah itu masukan kode" seperti Rumus membuat html, cuman bedanya kita menambahkan rumus satu lagi untuk menambahkan gambar, rumus itu kita tarok dekat text yang kita buat,,, ini rumus untuk menyisipkan gambar pada html

           - <p align="left"> <img class="captiun" src="gambar/orientasi.jpg" border="4" alt="gambar
              pecah" title="float:right" widht:"100" height:"100"/>

      - Ini contoh rumus soal pembuatan untuk menyisipkan gambar

<HTML>
<HEAD>
<TITLE>latihan5.HTML</TITLE>
</HEAD>
<BODY>
<PALIGN="left"><STRONG>inilah-8-smartphone-mini-android-terbaik-saat-ini...!!</STRONG> </p>
Inilah, 8 Smartphone Mini Android Terbaik Saat Ini!
Saat ini, para produsen berlomba-lomba untuk memproduksi smartphone dengan dimensi yang relatif besar, ukuran layar yang luas, maupun tablet berdimensi jumbo. Disisi lain, beberapa diantaranya juga membuat smartphone dengan versi mini.
Ya, sesuai dengan sebutan "versi mini", kali ini TeknoUp akan sedikit membahas tentang smartphone dengan versi mini terbaik Android saat ini. Berikut 8 smartphone mini terbaik saat ini berdasarkan urutan abjad :
<P ALIGN="left"><Strong>1. Alcatel OneTouch Idol 2 Mini S</strong> </p>
<img class="caption" src="gambar/alcatel.jpg"border="4" alt="gambar pecah" title="alcatel"Style="float:right"width="200"height="200"/>
<palign="left">Smartphone yang telah dirilis pada Februari 2014 ini, menawarkan spesifikasi antara lain menggunakan layar berukuran 4.5" dengan resolusi 540 x 960 pixels, telah didukung 4G LTE, kamera utama berukuran 8 MP, dan kamera depan 2 MP. Menawarkan chipset quad-core 1.2 GHz, RAM berkapasitas 1 GB, serta memori internal 8 GB yang telah didukung microSD up to 32 GB. Smartphone ini dibanderol dengan harga $ 200 (sekitar Rp. 2.6juta). </p>
Dan ini dia hasil menyisipkan gambar




*. belajar tentang heading

        Setelah sebelumnya klinik-it menerangkan tentang cara membuat dokumen html dengan tag heading,Dalam postingan kali ini klinik-it akan menerangkan lebih lanjut tentang pemakaian tag heading tersebut dalam dokumen HTML,Untuk penataan tag heading di butuhkan juga Tag-Tag atribut.Tag atribut tersebut terdiri dari tag <center> Untuk meletakan heading di tengah, tag <right> untuk meletakan heading di sebelah kanan ,dan tag <left> untuk meletakan heading di sebelah kiri .Berikut ini adalah contoh dokumen html dengan pengaturan tata letak Tag heading.

<html>
<head>
<title> CARA MENGATUR TAG HEADING DALAM DOKUMEN HTML</title>
</head>
<body>
<h2 align=”center”>Heading 2 ditengah</h2>
<p>Ini merupakan contoh dokumen dengan penataan heading di tengah .untuk penataan di sebelah kiri atau disebelah kanan silakan rubah tag center menjadi tag “left” atau “right”.
</p>
</body>
</html>




* 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.
   
       - ini adalah salah satu contoh formulir isian :
<html>
<head>
<title>formulir isian</title>
<body>
<form action="" method="post">
<input type="text" name="NAMA_FIELD" size="60" /></p>
<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>
</body>
</head>
</html>

          Setelah itu kita simpan dengan nam file formulir isian, lalu kita luncurkan  Dan seperti ini lah hasil formulir isian nya :



*. kita belajar tentang membuat link, taw gak apa yang di maksud link

       Link merupakan suatu kata, sederetan kata (kalimat) atau gambar dalam suatu web yang tehubung dengan suatu halaman web, baik itu halaman web dari dalam web itu sendiri atau pun halaman web pihak lain.Penggunaan link pada suatu blog atau situs sangat berguna untuk membuat suatu navigasi yang dibutuhkan untuk membuat suatu penjelasan terhadap suatu objek. Karakteristik setiap link selalu mempunyai sumber dan arah, sumber merupakan link itu sendiri, baik berupa halaman teks atau gambar (teks yang dijadikan link biasa disebut dengan anchor teks), sedangkan arah adalah tujuan dari link (anchor teks) baik itu halaman blog atau website dari dalam blog itu sendiri ataupun halaman blog atau website pihak lain.
Cara Membuat Link Teks atau Anchor Teks
Untuk membuat suatu link dalam blogger sekarang ini sangatlah mudah, dalam menu posting kita sorot atau blok kata atau kalimat yang akan dijadikan link (anchor teks) kemudian klik tombol link seperti gambar dibawah ini dan isikan alamat url yang akan dituju dan klik OK.


cara membuat link

kode dasar dalam pembuatan link adalah tag <a> yang dipadukan dengan atribut href yang mengarah kepada halaman situs dalam blog itu sendiri atau halaman situs pihak lain.
Secara dasar kode HTML link adalah sebagai berikut :
<a href="url">anchor teks</a>
Dalam kode tersebut href="url" merupakan alamat yang akan dituju, sedangkan anchor teks yang penempatannya antara tag <a> merupakan kata, kalimat atau gambar yang tampil sebagai objek link, untuk lebih jelasnya perhatikan kode dibawah ini yang mengandung anchor teks :
<a href="http://situseo.blogspot.com/2011/11/bagaimana-memasang-link-terbuka-ke-tab.html">Cara Memasang Link terbuka Ke Tab Baru</a> dari kode tersebut diatas akan menghasilkan tampilan menjadi seperti ini:
Cara Membuat Link Dengan Anchor Gambar
Untuk membuat sebuah link dengan gambar, kita membutuhkan dua alamat url link, yaitu url yang dituju dan url gambar itu sendiri, sehinggga kodenya menjadi seperti ini :
<a href="url yang dituju"><img src="url gambar"/></a>
bagaimana mendapatkan url gambar tersebut? secara default bila kita melakukan upload sebuah gambar pada situs hosting gambar baik pihak luar atau pun pada blogger/blogspot itu sendiri akan secara otomatis mengandung link, link tersebut adalah link yang mengarah kepada gambar yang kita upload tadi, sebagai contoh coba arahkan mouse ke gambar tesebut dan pada bagian bawah browser akan terlihat link dari gambar tesebut.

    ini rumus untuk membuat link :

<p><a href="Tebal.html">contoh pembuatan huruf tebal pada html</p>
<p><a href="Miring.html">contoh pembuatan huruf Miring pada html</p>
<p><a href="mencoret.html">contoh pembuatan huruf mencoret pada html</p>
 <p><a href="subscript.html">contoh pembuatan huruf subscript pada html</p>
 <p><a href="menggaris bawahi.html">contoh pembuatan huruf menggaris bawahi pada html</p>
 <p><a href="superscript.html">contoh pembuatan huruf superscript pada html</p></a>
dan nanti seperti ini lah hasilnya :


Didalam link ini kita akan d pelajari tentang membuat huruf keyboard, mencoret, menggaris bawahi, miring, dan sebagainya, ini contoh :

       - Membuat huruf keyboard ini rumusnya :

 -  <html>
 -  <head>
 -  <title>membuat huruf keyboard</title>
 -  <body>
 -  <kbd> Mendefinisikan teks yang di input dari keyboard</kbd>
 -  </body>
 -  </head>
 -  </html>

Sesudah itu kita simpan save as kasih nama membuat huruf keyboard setelah itu nama type nya kita ganti all files, sesudah itu kita simpan dan kita buka, hasilnya akan jadi seperti ini

     
        - Membuat huruf agar jadi coret ini rumusnya :
- <html>
- <head>
- <title>mencoret</title>
- <body>
- <del>Untuk memberi garis tengah pada teks/mencoret teks</del>
- </body>
- </head>
- </html>
Kita simpan sama halnya seperti menyimpan huruf keyboard, lalu kita luncurkan. dan ini lah hasilnya


dan masih banyak lagi langkah" pembuatan link.

* Form input data

            Form digunakan untuk mengumpulkan data dari pengunjung website. mulai dari form untuk login, form kontak, form untuk pendaftaran  user,  form advertiser, form sitemap, bahkan untuk mengirimkan data antar halaman web. pada tutorial belajar  HTML, cara membuat form di HTML ini kita akan  membahas cara penggunakan tag form di HTML.
            Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. form biasanya hanya berupa interface yang di sediakan untuk mengumpulkan data dari user, dan akan di proses dengan bahasa pemograman web seperti javascrip atau PHP, dan di simpan dalam tabel.
            Sebuah form dalam HTML harus berada dalam tag form yang diawali dengan <form> dan di akhiri dengan </form>, seperti yang sudah di ajarin mengenai penulisan kode pada HTML di awali dengan <nama function tag> ... (isi sebuah tag)... nama </function tag> pada bagian terakhir  kita harus menutup kode dengan menambahkan slash ( / ). Bagian Isi Tag dapat dimasukkan oleh beberapa atribut untuk dapat berfungsi dengan seharusnya.
       Dua buah atribut yang digunakan adalah action dan method. Dianalogikan action adalah sesuatu yang mengoperasikan fungsi dari pada form tersebut. Sedangkan method adalah bagian-bagian cara yang mengumpulkan setiap data yang diperlukan untuk diproses. Action berfungsi menjelaskan lokasi data yang didapat form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang akan memproses isi data form. Sedangkan fungsi dari Method, adalah untuk menjelaskan bagaimana data isian form akan dikirim. Nilai dari atribut method ini bisa berupa get atau post 
        Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya kita tidak menuliskannya) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.
       Bagian script kode diatas yang berwarna biru dan ungu dapat ditambahkan attribut lainnya seperti style, class, dan lain-lain. Karena berhubungan dengan form login maka hanya menambahkan action dan method saja. Sisanya bisa menggunakan kode HTML dngan meletakkannya pada satu baris diatas form : 
<div id='pandauan-belajar-html' class='membuat-form'> dan kita dapat menambahkan kode CSS berdasarkan id dan class tersebut. Jangan lupa penutupnya di bagian bawah form yaitu : </div> .

1. Text box<input type="text">
 Dignakan untuk memasukan input yang berupa teks.
                
Size                    = ukuran dari textbox dalam karakter

Maxsize              = maksimal jumlah karakter yang dapat di input

Nama                  = nama variable yang dikirim ke suatu aplikasi

Value                  = akan menampilkan isinya sebagai nilai default


2.       Password<input type="password">

Di gunakan untuk memasukan password

Size                     = ukuran textbox dalam karakter

Maxsize               = maksimal jumlah karakter yang dapat di input

Name                  = nama variable yang dikirim ke suatu aplikasi


Ada lagi jenis input lainnya yaitu :


<input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
<input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
<input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.


3.       Hidden<input type"hidden">

Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
Name                  = nama dari variable yang dikirim ke suatu aplikasi

Value                  = nilai dari variable


4.       Check Box<input type="checkbox">

Check box digunakan untuk dapat memilih lebih dari satu pilihan.

Name                    = nama dari variable yang dikirim ke suatu aplikasi

Value                    = nilai dari variable

Checked (checkbox yang sudah ditandai)


5.       Radio Button<input type="radio">

Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
Name                    = nama veriabel yang dikirim ke suatu aplikasi

Value                    = nilai dari variable

Checked (radio button yang sudah di tandai)


6.       Push Button<input type="button">

Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.

Name                    = nama dari variable yang dikirim ke suatu aplikasi

Value                    = label teks di atas tombol


7.       Submit<input type="submit">

Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.

Name                    = nama dari variable yang dikirim ke suatu aplikasi

Value                    = label teks di atas tombol


8.       Image Submit Button<input type="image" src="url">

Digunakan untuk menggantikan tombol standar submit dengan image
.
Name                    = nama dari variable ayng dikirim ke suatu aplikasi


9.       Reset<input type="reset">

Digunakan untuk mereset semua masukan dalam form.

Value                    = label teks di button


10.   Text Area<textarea>…</textarea>

Elemen untuk memasukan teks secara leluasa seperti notepad.

Nama                    = nama dari veriabel yang dikirim ke suatu aplikasi

Rows                     = panjang baris dalam karakter

Cols                       = tiggi kotak


11.   Select<select>…</select>

Daftar isi dalam property select menggunakan tag <option>

Size                        = jumlah pilihan yang dapat terlihat

Name                    = nama dari veriabel yang dikirim ke suatu aplikasi

        ini salah satu contoh untuk membuat                                                                                                <html>
<head>
<title>input password</title>
<body>
<from action="" mithoad="post">
<input type="password" name="NAMA_FIELD" size="50"/></p>
<p>Fungsi password adalah melakukan authentikasi terhadap proses sistem yang berisi berbagai informasi. Karena begitu pentingnya informasi tersebut, banyak penyusup mencoba untuk mendapatkan password tersebut</p>
<p>jangan bingung untuk mempelajarinya</p>
</body>
</head>
</html>
Setelah di simpan nanti hasilnya seperti ini

Ketika form dikirim untuk diproses, nilai dari tag option akan dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan tag value. Jika tag value berisi nilai, maka nilai value lah yang akan dikirim.


Sama seperti tag option type checkbox dan type radio, atribut checked dapat ditambahkan agar tag select berisi nilai awal, contoh penggunaanya sebagai berikut:

<select>
    <option>Pilihan 1</option>

    <option>Pilihan 2</option>

    <option value="pilihan ketiga" selected>Pilihan 3</option>

    </select>
Untuk size, berisi angka yang menunjukkan berapa karakter lebar kotak input-nya. Semakin besar tentunya semakin lebar kotaknya.

 
* Membuat Optional Data
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.

<html>
<head>
<title>Spanduk dan iklan</title>
</head>
<h1>Mana yang termasuk contoh spanduk:</h1>
<from method="post" action="#">

<input type="checkbox" name="alat dan bahan" value="spanduk event, spanduk kamapanye, spanduk promosi"/> spanduk event, spanduk kampanye, spanduk promosi<br/>
<input type="checkbox" name="alat dan bahan" value="spanduk baliho"/> spanduk baliho<br/>
<input type="checkbox" name="alat dan bahan" value="spanduk bener"/> spanduk bener<br/>
<input type="checkbox" name="alat dan bahan" value="semua bener"/> semua bener<br/>
<input type="checkbox" name="alat dan bahan" value="semua salah"/> semua salah<br/>

<input type="submit" name="submit" value="tinggal kirim saja"/>
</from>
</html>

Dari contoh kode diatas, maka akan menghasilkan seperti ini:




* Optional banyaknya Data
artikel ini saya akan jelaskan bagaimana membuat optional dengan banyak data. Pada artikel sebelumnya tentang membuat optional kita hanya bisa menggunakan sedikit data saja.
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. 
 

<html>
<head>
<title>Nama provinsi dan alamat kantor gubernur</title>
</head>
<body>
<h3>berikut nama provinsi dan alamat kantor gubernur<h3>
<select name="NAMA_FIELD">
<option value="VALUE-1">Nanggroe 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, Pekanbaru</option>
<option value="VALUE-5">Kepulauan Riau-Jl. Basuki Rahmat Tanjungpinang</option>
<option value="VALUE-6">jambi-Jl. A Yani No.1 Telanaipura, 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. Pembangunan No.1 Padang Harapan, Bengkulu 38225</option>
<option value="VALUE-11">Banten-Jl. Brigjen K.H. Syam'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 Blok.8-9, Jakarta Pusat</option>
<option value="VALUE-14">Jawa Tengah-Jl. Pahlawan No. 9 Lt. 11/12, Semarang</option>
<option value="VALUE-15">D.I Yogyakarta-Komp. Kepatihan Danurejan, Yogjakarta 55213</option>
<option value="VALUE-16">Jawa Timur-Jl. Ahmad Yani 242-244, Surabaya</option>
<option value="VALUE-17">Bali-Jl. Kapten Cok Agung Tresna, Renon</option>
<option value="VALUE-18">Kalimantan Barat-Jl. A. Yani, Pontianak</option>
<option value="VALUE-19">Kalimantan Selatan-Jl.Jend.Sudirman No.14, Banjarmasin 70114</option>
<option value="VALUE-20">Kalimantan Tengah-Jl. RTA Milono No.1, Palangka Raya 73000</option>
<option value="VALUE-21">Kalimantan Timur-JL Gadjah Mada 2, Samarinda</option>
<option value="VALUE-22">Sulawesi Barat-Jl. Ahmad Yani No.1 Mamuju 91511</option>
<option value="VALUE-23">Sulawesi Selatan-JL. Urip Sumoharjo 269, Makassar 90245</option>
<option value="VALUE-24">Sulawesi Tengah-Jln. Prof. Dr. Moh. Yamin, SH No. 7, Palu 94112</option>
<option value="VALUE-25">Sulawesi Tenggara-Kompleks Bumi Pradja Anduonouhu, Kendari 93232</option>
<option value="VALUE-26">Sulawesi Utara-Jl. 17 Agustus No. 69, Manado</option>
<option value="VALUE-27">Gorontalo-Jl. Sapta Marga Gorontalo</option>
<option value="VALUE-28">Maluku-Jl. Dr. Latumeten No. 12, Ambon</option>
<option value="VALUE-29">Maluku Utara-Jl. Pahlawan Revolusi No 1 Ternate</option>
<option value="VALUE-30">Nusa Tenggara Barat-Jl. Udayana No. 14, Mataram</option>
<option value="VALUE-31">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>
</body>
</html>

        Dan setelah di simpan ini la 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>
 
Ini adalah contoh soal banyak nya data :
 
<html>
<head>
<title>Nama provinsi dan alamat kantor gubernur</title>
</head>
<body>
<h3>berikut nama provinsi dan alamat kantor gubernur<h3>
<select name="NAMA_FIELD" multiple="multiple" size="3"
<option value="VALUE-1">Nanggroe 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, Pekanbaru</option>
<option value="VALUE-5">Kepulauan Riau-Jl. Basuki Rahmat Tanjungpinang</option>
<option value="VALUE-6">jambi-Jl. A Yani No.1 Telanaipura, 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. Pembangunan No.1 Padang Harapan, Bengkulu 38225</option>
<option value="VALUE-11">Banten-Jl. Brigjen K.H. Syam'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 Blok.8-9, Jakarta Pusat</option>
<option value="VALUE-14">Jawa Tengah-Jl. Pahlawan No. 9 Lt. 11/12, Semarang</option>
<option value="VALUE-15">D.I Yogyakarta-Komp. Kepatihan Danurejan, Yogjakarta 55213</option>
<option value="VALUE-16">Jawa Timur-Jl. Ahmad Yani 242-244, Surabaya</option>
<option value="VALUE-17">Bali-Jl. Kapten Cok Agung Tresna, Renon</option>
<option value="VALUE-18">Kalimantan Barat-Jl. A. Yani, Pontianak</option>
<option value="VALUE-19">Kalimantan Selatan-Jl.Jend.Sudirman No.14, Banjarmasin 70114</option>
<option value="VALUE-20">Kalimantan Tengah-Jl. RTA Milono No.1, Palangka Raya 73000</option>
<option value="VALUE-21">Kalimantan Timur-JL Gadjah Mada 2, Samarinda</option>
<option value="VALUE-22">Sulawesi Barat-Jl. Ahmad Yani No.1 Mamuju 91511</option>
<option value="VALUE-23">Sulawesi Selatan-JL. Urip Sumoharjo 269, Makassar 90245</option>
<option value="VALUE-24">Sulawesi Tengah-Jln. Prof. Dr. Moh. Yamin, SH No. 7, Palu 94112</option>
<option value="VALUE-25">Sulawesi Tenggara-Kompleks Bumi Pradja Anduonouhu, Kendari 93232</option>
<option value="VALUE-26">Sulawesi Utara-Jl. 17 Agustus No. 69, Manado</option>
<option value="VALUE-27">Gorontalo-Jl. Sapta Marga Gorontalo</option>
<option value="VALUE-28">Maluku-Jl. Dr. Latumeten No. 12, Ambon</option>
<option value="VALUE-29">Maluku Utara-Jl. Pahlawan Revolusi No 1 Ternate</option>
<option value="VALUE-30">Nusa Tenggara Barat-Jl. Udayana No. 14, Mataram</option>
<option value="VALUE-31">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>
</body>
</html>
 
       Dan ini hasilnya :
 
 
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.
 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.
 
* Input Data Artikel

          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: 
1. <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 Berikut ini adalah contoh cara penggunaannya:
1. <textarea name="artikel" cols="20" rows="5"></textarea>  
Mudah sekali bukan?

                             Ditemukan dengan Kata Kunci:

cara membuat inputt artikel di web (3), cara membuat textarea di php untuk pengisian karakter banyak (2), artikel tentang input (2), membuat input data dengan text area (1), memasukkan data ke web (1), makalah entry data (1), input data ke website (1), input artikel dengan php (1), html artikel input (1), artikel input (1), cara membuat input data dengan php (1), cara membuat entri data (1), cara buat input data di web (1), aryikel entri data (1), php input artikel (1) Artikel yg Berhubungan:

ini adalah salah satu contoh soal input data artikel :

 <html>
<head>
<title>Textarea</title>
</head>
<body>
<textarea align="center">silahkan berikan komentar anda yang sopan dan berbobot</textarea>
</body>
</html>
            Dan seperti ini lah hasilnya


* 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:

  1. <input type="submit" value="Kirimkan"/>  
Sedangkan untuk tombol reset, kita menggunakan kode:
  1. <input type="reset" value="Hapus Form"/>  
Kata-kata Kirimkan dan Hapus Form bisa anda ganti dengan kata-kata yang lainnya sesuka hati.
      - ini adalah salah satu contoh Submit rumus untuk membuat submit yaitu :
<html>
<head>
<title>Tombol submit</title>
<body>
<input type="submit" value="kirimkan"/>
</body>
</head>
</html>
             Dan ini hasil gambar submit :

       - ini adalah salah satu contoh Reset rumus untuk membuat reset yaitu :
<html>
<head>
<title>Tombol Reset</title>
<body>
<input type="reset" value="Hapus Form"/>
</body>
</head>
</html>
          Dan ini hasil gambar reset :


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:
  1. <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.
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.

Incoming search terms:

  • bikin tombol reset pada formulir
  • merubah tombol submit dengan gambar
  • membuat tombol summit dan reset
  • membuat tombol submit php
  • membuat tombol submit dengan image
  • membuat tombol submit dan reset
  • membuat tombol reset pada html
  • membuat tombol dengan php
  • membuat tombol cari php
  • membuat tombol

  ini salah satu contoh soal Reset

<html>
<head>
<title>submit gambar</title>
<body>
<input type="image" src="gambar/iklan reminder.jpeg" width="20" height="20"/>
</body>
</head>
</html>
               Dan ini hasil dari rumus di atas , jadinya akan seperti ini

file-gambar.jpg harus anda ganti dengan gambar anda sendiri. width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel.

          Sampai disini lah saya buat rangkuman tentang HTML, saya ucapkan terima kasih
                                                  * Wasalamu'alaikum Wr.Wb *

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)