Desain

Syntax HTML (Pertemuan 5)

1. Menyisipkan gambar pada web

<img src = “C://mydocument/robot.jpg” alt=”robot” title=”ini gambar robot”>

Keterangan :

* alt dan title tidak harus disertakan.

* alt digunakan untuk memberi keterangan pada gambar yang sifatnya berupa bayangan. Jadi jika browser tidak mensupport gambar, maka yang tampil bukanlah gambar, melainkan adalah kata-kata yang diatur pada alt (pada contoh di atas yang muncul hanya kata robot).

* Sama halnya dengan alt, title digunakan untuk memberi keterangan pada gambar. Bedanya keterangan ini hanya muncul saat cursor diarahkan ke gambar.

 

2. Menyisipkan image yang dapat digunakan sebagai button

<a href = “http://www.google.com”><img src = “C://mydocument/robot.jpg”></a>

3. Membuat tabel tanpa border

<table>

<caption>Tabel coba-coba</caption>

<tr><td>Baris satu kolom satu</td></tr>

</table>

* Keterangan: Syntax diatas akan menghasilkan tabel dengan 1 kolom dan 1 baris (tr = table row/baris, td = table data/ field).

* Caption berfungsi untuk memberi judul/nama tabel.

4. Membuat tabel dengan border

<table border = “1”>

<tr><td>Baris satu kolom satu</td>

<td> Baris satu kolom dua</td></tr>

<tr><td>Baris dua kolom satu</td>

<td> Baris dua kolom dua</td></tr>

</table>

Keterangan:

* Semakin besar angka pada tabel border, menandakan semakin tebal border yang dihasilkan.

* Syntax tersebut menghasilkan tabel border yang terdiri dari 2 kolom dan 2 baris.

5. Menyisipkan fungsi merge cell table pada web

  • ROWSPAN

Menggabungkan beberapa kolom menjadi satu.

<table border = “1”>

<tr><td rowspan = “2”>Baris satu kolom satu</td>

<td> Baris satu kolom dua</td></tr>

<tr><td> Baris dua kolom dua</td></tr>

</table>

  • COLSPAN

Menggabungkan beberapa baris menjadi satu.

<table border =”10″ >

<tr><td colspan = “2″ align = “center” bgcolor = “green”> ABC </td></tr>

<tr><td>DEF</td>

<td>coba</td></tr>

<tr><td>GHI</td>

<td>Tes</td></tr>

</table>

Keterangan :

* align = “center” digunakan untuk merata tengahkan tulisan ABC yang ada pada kolom satu baris satu.

* bgcolor digunakan untuk memberi background warna pada field.

Add comment


Go to top