Materi PWEB 2 : Gambar Map

Sebelumnya, kita pasti sudah tahu cara memasukan gambar kedalam dokumen html. Yaitu menggunakan tag <img src="nama gambar">.
Tetapi, dalam materi ini kita bisa memasukkan link kedalam gambar yg kita masukkan tersebut. Ini sering disebut sebagai image map.

Bagaimana Caranya ?
Disini kita menggunakan tag <map> dan <area>
Tag <map> support untuk semua browser populer seperti Google Chrome, Opera, Internet Explorer, Firefox, dan safari browser. Tampilan gambar dengan map merupakan suatu area pada gambar /image yang dapat diberi hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan lain sebagainya.
Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side. Sebuah gambar map adalah gambar merupakan area yang dapat diklik.

Contoh penulisan tag map di html :

<img src="picture1.jpg" alt="picture1" height="70%" usemap="#picture1">
<map name="#picture1">
<area shape="rect" coords="5,160,207,504" alt="1" href="1.html">
<area shape="rect" coords="214,162,426,503" alt="2" href="2.html">
<area shape="rect" coords="420,159,592,503" alt="3" href="3.html">
<area shape="rect" coords="604,173,750,505" alt="4" href="4.html">
<area shape="rect" coords="756,196,900,505" alt="5" href="5.html">
</map>

Hasil kodingannya, kita bisa mengklik bagian dari gambar tersebut

Bagian tersulit yaitu saat kita sedang menentukan kordinatnya. Tetapi ada cara yang lebih mudah dalam menentukan kordinatnya, yaitu menggunakan aplikasi Microsoft Expression Web. Kita hanya menggunakan cursor kita untuk menentukan kordinatnya. Maka akan lebih cepat.

Sekian, terima kasih...

Materi PWEB : Menyajikan Format Target Link, Email dan Telepon

Sebelumnya, saya sudah menjelaskan bagaimana cara membuat link pada html. Sekarang saya akan menjelaskan bagaimana cara membuat link target, link email, dan link telepon.

Apa itu link target ?

Link target adalah link yang bila kita buka, link tersebut akan terbuka di tab baru di browser kita. Contohnya :

<a href=”link” target=”_blank”>

Apa itu link Email dan link telepon ?

Link email dan telepon biasa digunakan apabila kita akan menghubungi si pembuat web.
Contoh kodingan link Email :

<a href="alamat email"> Kirim Email Pada Saya!</a>

Bila kita klik, otomatis komputer kita akan membuka aplikasi email seperti Microsoft Outlook.

Link Telepon
Link ini hanya berfungsi bila kita mengkliknya lewat hp/smartphone. Lalu otomatis hp kita akan menghubungi nomor telepon pada link tersebut.
Contoh kodingan link telepon :

<a href="tel:08XXXXXXXXXX">Hubungi kami segere!</a>

Cukup sekian materi Link Target, Email dan Link Telepon dari saya...

Materi PWEB : Menyajikan Link Ke HTML

Link dalam arti bahasa adalah hubungan. Link di html adalah sebuah tulisan, tombol atau gambar, yang bila kita klik, browser kita akan otomatis menuju suatu url yang sudah diatur oleh link tersebut.

Bagaimana Cara membuat link di html ?

Disini kita menggunakan tag <a>
Lalu untuk mengatur tujuan link tersebut, kita menambahkan atribut href="url tujuan".

Contoh penulisan tag tersebut :

<a href="http://google.com">Visit Google Site Now!</a>

Dan hasilnya akan seperti ini :

Dari foto diatas, bisa kita lihat teksnya berubah warna menjadi biru dan bisa diklik.
Oh iya, link diatas termasuk kedalam link absolut. Maksudnya, link yang tujuannya menuju halaman pada web lain. Lalu disini juga saya akan jelaskan link relatif, atau link yang tujuannya menuju halaman pada web yang sama.

Contoh penulisan link relatif :

<a href=”#nama id”>

"#nama id" disini maksudnya, link ini akan menuju suatu paragraf yang idnya sudah ditentukan.
Contohnya :

<a href="#pertama">Ke Paragraf Pertama</a>

Link diatas akan menuju paragraf pertama pada halaman web tersebut. Lalu untuk menentukan id pada paragraf, kita bisa menambahkannya dengan cara memasukan tag <a> :

<p><a id="pertama"></a>

Sekian dan terima kasih...

Materi PWEB 1 : Tabel

Tabel

Apa itu tabel?

Tabel adalah daftar yang berisi sejumlah data-data informasi yang biasanya berupa kata-kata maupun bilangan yang tersusun dengan garis pembatas. Tabel terdiri dari kolom dan baris...

Tabel biasa digunakan untuk membuat suatu daftar atau susunan yang akan disimpan dengan mudah. Jadi kita bisa mengingat atau membaca sesuatu dengan mudah.
Bagaimana cara membuat tabel pada dokumen html ?
Disini kita akan menggunakan tag <table> <tr> <td> dan <th>
Apa fungsi dari ketiga tag tersebut?

- <table> : Untuk membuat table pada dokumen html. Elemen pada tag ini berfungsi untuk mengatur tampilan tabel

- <tr>      : (Table Row) untuk mendefinisikan baris pada tabel

- <td>     : (Table Data) untuk mendefinisikan isi dari suatu tabel

- <th>     : (Table Heading) untuk membuat judul pada sebuah tabel seperti No, Nama, Kelas, dll. Biasanya hurufnya menjadi bold.

Contoh penulisan di html :

<table width=80% border=2 cellspacing=0 cellpadding=0>
   <tr>
   <td>Baris 1 Kolom 1</td>
    <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
   <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
            </tr>
    <tr>
   <td rowspan = 2>Baris 3 Kolom 1</td>
    <td>Baris 3 Kolom 2</td>
            </tr>
</table>

Dari kodingan diatas, bisa kita lihat atribut dari tag table. Seperti width, border, cellspacing, dan cellpadding. Contoh dari hasil kodingan diatas :

Contoh Tabel

Macam - macam atribut untuk membuat tabel pada html :

Border	Menentukan ukuran border/pembatas tabel
Width	Menentukan lebar tabel
Height	Menentukan tinggi tabel
Bgcolor	Menentukan warna background pada tabel
Background	Menentukan gambar background suatu sel
Color	Mengatur warna suatu sel dalam tabel
Align	Mengatur bentuk perataan horizontal
Valign	Mengatur bentuk perataan vertikal
Rowspan	Menggabungkan beberapa baris
Collspan	Menggabungkan beberapa kolom

Cukup sekian dari saya...