Berbagai Tag Dalam HTML

          Pada artikel ini saya tidak akan banyak berbasa-basi mengenai apa itu HTML karena saya yakin anda yang rela membaca artikel Saya yang sederhana ini lebih paham betul tentang apa itu HTML. Berikut saya akan  Memberikan contoh beberapa tag yang biasa di gunakan dalam membuat website!

1. Tag <select>

         Tag <select> berfungsi untuk membuat menu Drop Down, seperti ketika Anda memilih jenis huruf yang ada pada Microsoft Office. Namun anda membutuhkan sebuah tag lagi untuk memasukan nilai yang di inginkan kedalam nya yaitu dengan menggunakan tag <option>, untuk parameter value dari tag <option> sebaiknya di isi sesuai dengan pilihan yang akan di tampilkan. Misal anda akan menampilkan pilihan 'Merah' pada halaman Web anda, maka nilai valuenya juga di isi dengan merah.

Code:

==================================================================

<select>
<option value="hitam"> Hitam </option>
<option value="biru"> Biru  </option>
<option value="merah"> Merah </option>
<option value="hijau"> Hijau </option>
</select>

==================================================================


Hasil:

2. Tag <hr>

          Tag <hr> berfungsi untuk memberikan garis horizontal pada tampilan web, ukuran lebar garis bisa anda tentukan sendiri. Sedangkan ukuran panjannya secara default akan mengikuti lebar Web Browser Anda, selain itu garis horizontal ini juga bisa Anda atur warnanya sehingga tampilannya akan lebih bervariasi.

Code:

==================================================================

<hr color=#000000>
<hr size=10 color=#000000><br>
<hr size=15 color=#000000><br>
<hr size=25 color=#000000><br>
<hr size=30 color=#000000><br>

==================================================================













3. Tab <table>

          Tag <table> sesuai namanya akan membuat sebuah table pada badan web site milih anda, tag ini juga membutuhkan beberapa tag lagi untuk membantunya yaitu tag <tr>,<th> dan <td>. Berikut keterangan singkatnya!

<tr> = "Table Row" atau baris Tabel.
<th> = "Table Header" atau Kepala Tabel.
<td> = "Table Data" atau Data Tabel

Code:

==================================================================

<table border=1px>
<tr> <th>No</th> <th>Warna</th> </tr>

<tr> <td>1</td>  <td>Merah</td> </tr>
<tr> <td>2</td>  <td>Biru</td>  </tr>
</table>

==================================================================

          Sebelum saya mengakhiri materi tentang tabel ini, coba anda perhatikan bahwa penggunaan <th> dengan <td> tidak jauh berbeda. Hanya saja jika di teliti akan nampak bahwa penggunaan tag <th> akan membuat Teks berwarna hitam(Bold). Dan sebagai bonus saya akan memperlihatkan penggunaan parameter "colspan" yang berfungsi seperti Merge Cell pada Excel, yang akan menggabungkan lebih dari satu cell.

Code:

==================================================================

<table border=1px>
<tr> <th>No</th> <th>Warna</th> </tr>

<tr> <td>1</td>  <td>Merah</td> </tr>
<tr> <td>2</td>  <td>Biru</td>  </tr>

<tr> <th colspan=2>Magic</th>   </tr>
</table>

==================================================================

Hasil:














4. Tag <input>

          Tag <input> memiliki kemampuan untuk menyisipkan berbagai object-object umum yang kita ketahui seperti checkbox, radio, textbox, button dan sebagainya. Penentuan object yang ingin di di gunakan bisa menggunakan operator "type"

Code:

==================================================================

<input type="checkbox"> Sundul </input><br>
<input type="radio"> Eksekusi </input><br>
<input type="textbox"><br>
<input type="password"><br>
<input type="button" value="Bersin">

==================================================================

Hasil:

          Berbagai object tersebut akan memudahkan pembuatan system pada website anda nantinya, tapi maaf saya tidak akan menjelaskan secara detail penggunaannya. Saat ini saya akan berfokus pada tag <input> dengan parameter type yang berisi nilai "password". Terlihat pada gambar Object textbox dan password tidak jauh berbeda, namun jika anda mengetikan karakter di dalamnya maka perbedaannya akan anda ketahui. So, tunggu apalagi ayo ketikan beberapa karakter di dalamnya.



5. Tag <font>

          Tag ini akan sangat membantu anda dalam memformat teks pada website yang di buat, anda dapat menentukan ukuran, warna, bahkn jenis huruf yang di inginkan dengan menggunakan attribute SIZE,COLOR,FACE.

Code:
=================================================================

<font size="6" color="blue">Ini contoh Lho !!</font><br>
<font size="12" color="red" face="verdana">Ini contoh juga !!</font><br>
<font size="20" color="#b1cce1" face="times-new-roman">Dan ini contoh terakhir</font><br>

=================================================================

Hasil:





6. Tag <br>

          Penggunaan tag <br> sudah sangat sering saya gunakan pada contoh sebelumnya dan saya yakin kebanyakan para pembaca sudah mengetahui kegunaannya. Jadi saya tidak akan membahasnya kali ini. Lalu buat apa paragraf ini buat??

7. Tag <a>

          Tag yang juga di sebut sebagai tag anchor dapat mempermudah anda dalam membuat sebuah link yang dapat mengarah ke halaman web site lainnya. Biasanya teks, kalimat atau apapun itu yang menggunakan tag ini jika di klik maka kita akan di bawa menuju halaman web site yang di maksud.

Code:
==================================================================

<a href="http://www.google.co.id">Google</a><br>
<a href="http://www.facebook.com">Facebook</a><br>
<a href="http://www.komikfox.blogspot.com">Komikfox</a><br>

==================================================================

Hasil:





8. Tag <fieldset>

          Tag ini biasa saya sebut sebagai tag pembungkus, karena di akan membungkus beberapa object yang umumnya di gunakan untuk membangun form menjadi beberapa kelompok.

Code:
==================================================================

<fieldset>
<table>
  <tr><td>Nama</td> <td>: <input type="textbox"></td></tr>
  <tr><td>Email</td> <td>: <input type="textbox"></td></tr>
</table>
<br>
<input type="submit" value="Login">
</fieldset>

==================================================================

Hasil:




9. Tag <b>,<u>,<i>

          Ke-3 tag ini berguna untuk memberi efek tebal,garis bawah serta efek penulisan miring pada teks,itu saja penjelasannnya!

10. Tag <abbr>

          Informasi penjelas terkadang akan sangat membantu dalam pembuatan artikel web site anda, nah dengan tag ini anda bisa menambahkan informasi singkat pada artikel yang di buat. Informasi tambahan nantinya hanya akan muncul jika pointer berada pada teks yand di tandai!

Code:
==================================================================

<abbr title="Persamaan Makna Kata">Sinonim</abbr> dan
<abbr title="Lawan Kata">Antonim</abbr>

==================================================================

Hasil:




11. Tag <acronym>

          Tidak jauh berbeda dengan tag <abbr> bahkan cara menggunakannya juga sama. Langsung saja contoh penggunaan tag <acronym>.

Code:
===================================================================

<acronym title="Persamanan Makna Kata">Sinonim</acronym> dan
<acronym title="Lawan Kata">Antonim</acronym>

===================================================================

Hasil:



12. Tag <button>

          Selain dengan menggunakan tag <input>, pemanggilan object tombol juga bis dilkukan dengan menggunaka tag <button>.


Code:
===================================================================

Apa anda ingin mengulanginy lagi?
<button type="reset">Reset</button>

===================================================================

Hasil:




13. Tag <sub> & <sup>

          Bagi anda yang ingin menuliskan rumus matematik atau fisika mungkin agak kesulitan ketika ingin menggunakan pangkat atau ketika menulis Sysmbol-sysmbol kimia. Subcript dan Superscript memang di hadirkan pada HTML 5 untuk menjawab kegusaran itu.

Code:

==================================================================

Air         : H₂O<br>
Asam Sulfat : H₂SO₄<br>
<br>
<br>
5² x 4³ = .......<br>
3⁴ x 7² = .......

==================================================================

Hasil:



14. Tag <img>

Singkatan dari image atau gambar, tentu saja berfungsi untuk menampilkan gambar pada halaman website anda! Tapi ingat file gambar harus di letakan pada lokasi yang sama dengan file HTML yang anda buat, bisa juga di letakan di directory tertenu tapi anda harus menuliskan juga alamatnya. Berikut saya akan contohkan pemanggiln gambar yang di letakan pada folder tertentu dan yang tidak!

Code:
==================================================================

<img src="sonny_vaio.jpg">
<img src="gambar/kamera_nikon_d300.jpg">

==================================================================

Hasil:




15 Tag <audio>

Untuk anda yang menyukai music, fitur ini tentu akan sangat menarik, tag <audio> akan membuat web site anda mampu menyanyikan berbagai lagu yang di suka dalam format .mp3!

Code:
==================================================================

<audio controls="controls">
<source src="Flower Power.mp3" type="audio/mp3"/>
</audio>

==================================================================

  Sayangnya tidak semua web browser mendukungnya, karena tag ini merupakan tag baru yang ada pada HTML 5. Coba gunakan web browser seperti Mozilla versi 3.5 ke atas!