Belajar HTML

Daftar Isi

  • Membuat / Menampilkan Input Checkbox pada HTML Pendahuluan Checkbox merupakan elemen dari input HTML yang dapat digunakan sebagai input untuk menentukan satu atau beberapa pilihan. Syntax dari elemen checkbox adalah seperti berikut :         <input type="checkbox" name="nama ...
    Posted Jan 2, 2012, 7:45 AM by Editor KursusInternet
  • Apa itu URL Encoding ? Alamat URL (Uniform Resource Locator) pada browser atau protokol HTTP memiliki aturan tidak memperbolehkan penulisan alamat dengan beberapa karakter khusus seperti tanda spasi, tanda kurung, dan sebagainya. Jika terdapat format ...
    Posted Oct 15, 2011, 6:59 AM by Editor KursusInternet
  • Image Map Pendahuluan Image map adalah daftar koordinat yang akan dipetakan pada file gambar tertentu yang mendefinisikan area dengan tautan / link ke situs tertentu. Image map dibuat dengan penggunaan tag map. Artikel ...
    Posted Nov 19, 2011, 9:37 PM by Editor KursusInternet
Showing posts 1 - 3 of 3. View more »

Membuat / Menampilkan Input Checkbox pada HTML

posted Jan 2, 2012, 7:37 AM by Editor KursusInternet   [ updated Jan 2, 2012, 7:45 AM ]

Pendahuluan

Checkbox merupakan elemen dari input HTML yang dapat digunakan sebagai input untuk menentukan satu atau beberapa pilihan.

Syntax dari elemen checkbox adalah seperti berikut :

        <input type="checkbox" name="nama_input" value="nilai_input" />

Berikut adalah contoh penggunaan dalam HTML dengan interaktivitas Javascript.

Contoh Penggunaan Checkbox



Apa itu URL Encoding ?

posted Sep 26, 2011, 4:47 AM by Editor KursusInternet.com   [ updated Oct 15, 2011, 6:59 AM by Editor KursusInternet ]

Alamat URL (Uniform Resource Locator) pada browser atau protokol HTTP memiliki aturan tidak memperbolehkan penulisan alamat dengan beberapa karakter khusus seperti tanda spasi, tanda kurung, dan sebagainya. 

Jika terdapat format teks URL yang memiliki karakter tersebut maka teks tersebut harus dikonversi terlebih dahulu menjadi format yang dikenali. 

Sebagai contoh tanda spasi biasanya diganti dengan tanda plus (+) atau dengan kode %20. 

Proses konversi untuk menghasilkan format teks inilah yang dinamakan dengan URL Encoding. Untuk daftar selengkapnya dari karakter-karakter yang harus di-encoding dapat dibaca pada halaman berikut.

Image Map

posted Jul 22, 2011, 11:16 PM by Editor KursusInternet   [ updated Nov 19, 2011, 9:37 PM ]

Pendahuluan

Image map adalah daftar koordinat yang akan dipetakan pada file gambar tertentu yang mendefinisikan area dengan tautan / link ke situs tertentu.

Image map dibuat dengan penggunaan tag map. Artikel berikut akan rinci membahas penggunaan tag map dan definisi area yang didukung.

Syntax

Image map terdiri dari 2 tag yang saling terkait, yaitu map dan area. Berikut adalah syntax penggunaan tag map.

<map name='nama_map'>
 <area shape='jenis_shape' coords='daftar_koordinat' href='url_link' alt='deskripsi' target='target_link' />
 <area shape='jenis_shape' coords='daftar_koordinat' href='url_link' alt='deskripsi' target='target_link' />
</map>

Untuk jenis_shape ada beberapa value yang bisa digunakan yaitu :
  • rect : mendefinisikan area berbentuk persegi panjang
  • circle : mendefinisikan area berbentuk lingkaran.
  • poly : mendefinisikan area polyline atau area dengan jumlah sisi banyak.
Dan untuk daftar_koordinat, tentunya bergantung juga kepada jenis bentuk (jenis_shape) yang digunakan yaitu :
  • x1, y1, x2, y2 untuk jenis rect.
  • x, y, panjan_radius untuk jenis circle.
  • x1, y1, x2, y2, x3, y3, ... xn, yn untuk jenis poly.
Semua koordinat di atas dimulai dari sudut kiri atas gambar.

Contoh Penggunaan

File gambar contoh.png seperti terlihat pada gambar berikut akan dibuat image mapnya. Sesuai informasi yang ada, maka kita buat 3 area yaitu : rect, circle dan poly dengan koordinat yang tertera.



Image map yang terbentuk kira-kira sebagai berikut :

<map name='kursusinternet1'>
 <area shape='circle' coords='220,110,20' href='http://www.kursusinternet.com' alt='Kursus Internet' title='Kursus Internet' 
      target='_blank' />
 <area shape='rect' coords='20,20,100,60' href='http://www.belajarsql.com' alt='Belajar SQL' title='Belajar SQL' target='_blank' />
 <area shape="poly" coords='22.728,142.421,61.619,152.523,86.873,138.886,93.944,164.14,118.188,185.858,12.122,179.292'
 href='http://www.phi-integration.com' alt='PHI-Integration' title='PHI-Integration' target='_blank' />

dan kemudian kita relasikan ke gambar dengan menggunakan atribut usemap pada tag img.

<img src="contoh.png" usemap="#kursusinternet1" />

Selesai.

Contoh Penggunaan Tingkat Lanjut

Untuk contoh di atas masih tergolong contoh yang sederhana. Bagaimana kalau ada objek gambar yang saling tumpang tindih seperti pada gambar di bawah ini ? Dan masing-masing memiliki tautan / link tersendiri ?

Untuk kasus ini maka urutan peletakan tag area menjadi penting. Aturannya adalah definisi area objek yang terluar diletakkan di bawah objek lainnya.

Sebagai contoh definisi map untuk gambar tersebut adalah sebagai berikut.

<img src="contoh2.png" usemap="#kursusinternet2" />
<map name='kursusinternet2'>
 <area shape="poly" coords='146.725,68.175,183.09,93.853,147.866,109.591,154.552,88.883'
 href='http://www.belajarsql.com' alt='Belajar SQL' title='Belajar SQL' target='_blank' />
 <area shape="poly" coords='116.673,49.487,229.305,96.459,120.208,125.249,140.916,87.368'
 href='http://www.jaringanbisnis.com' alt='Jaringan Bisnis' title='Jaringan Bisnis' target='_blank' />
</map>

Selesai.

Sumber Referensi


Kursus Internet Belajar SQL PHI-Integration Belajar SQL Jaringan Bisnis

1-3 of 3