Dasar-dasar Kode HTML 4

Ini adalah seri terakhir dari Dasar-dasar HTML berseri. Apabila anda ingin melihat-lihat yang terdahulu, klik Dasar-dasar Kode HTML 1, Dasar-dasar Kode HTML 2, dan Dasar-dasar Kode HTML 3.

Di Dasar-dasar kode HTML 4, kita akan membahas beberapa kode-kode dasar lagi.

1. Kode marquee

Ketikkan kode ini jika marquee tidak berisi link (hanya persan).

<marquee direction="left" width="95%" scrollamount="2" height="30" align="center">Isi marquee</marquee>

Ketikkan kode ini jika marquee berisi link (misal: blogroll atau banner)

<marquee direction="left" onmouseover="this.stop()" width="95%" onmouseout="this.start()" scrollamount="2" height="30" align="center">Isi marquee</marquee>

Ket:

• Direction: Arah (left: kiri, right: kanan, up: atas, down: bawah)
• Width: lebar
• Height: tinggi
• Scrollamount: kecepatan
• Align: posisi

Contoh:

<marquee direction="left" width="95%" scrollamount="2" height="30" align="center">Contoh marquee.</marquee>


<marquee direction="left" onmouseover="this.stop()" width="95%" onmouseout="this.start()" scrollamount="2" height="30" align="center"><a href="http://boland-capzlock.blogspot.com">Contoh marquee dengan link.</a></marquee>

Hasil:

Contoh marquee.


Contoh marquee dengan link.

2. Kode image

Kode untuk menampilkan image:

<img src="ALAMAT_IMAGE" title="TITLE IMAGE" alt="KEYWORD IMAGE"/>

Ket:

• src: alamat gambar. Pastikan gambar sudah diupload ke hosting gambar.
• title: tulisan yang keluar ketika kursor mouse berada di atas gambar tersebut
• alt: keyword image

Berikut adalah contoh image yang dipakai.



Dan alamat image tersebut adalah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MpgncaOHpRBhyphenhyphen43gQ6CFJEfvY8inHvhCEf6m7fcLLUJunJjDmNh-Uy0W6vRZMWjpOPx8YIpyqkeHIAYLvb04LI8LkbKhbiyboOeSAP_08q32pHQAL6by302dwUokce_RLpb8WVgViY1Z/s320/untitled.JPG

Maka kodenya adalah:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MpgncaOHpRBhyphenhyphen43gQ6CFJEfvY8inHvhCEf6m7fcLLUJunJjDmNh-Uy0W6vRZMWjpOPx8YIpyqkeHIAYLvb04LI8LkbKhbiyboOeSAP_08q32pHQAL6by302dwUokce_RLpb8WVgViY1Z/s320/untitled.JPG" title="Contoh image" alt="Contoh image, contoh gambar, kode HTML image"/>

Dan hasilnya:

Anda juga bisa membuat link pada gambar tersebut. Apabila gambar tersebut diklik, maka keluarlah situs yang di-link pada gambar tersebut. Untuk contoh, image tersebut akan di-link ke http://boland-capzlock.blogspot.com

Kodenya seperti ini:

<a href="http://boland-capzlock.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MpgncaOHpRBhyphenhyphen43gQ6CFJEfvY8inHvhCEf6m7fcLLUJunJjDmNh-Uy0W6vRZMWjpOPx8YIpyqkeHIAYLvb04LI8LkbKhbiyboOeSAP_08q32pHQAL6by302dwUokce_RLpb8WVgViY1Z/s320/untitled.JPG" title="Contoh image" alt="Contoh image, contoh gambar, kode HTML image"/></a>

Dan hasilnya seperti ini:

3. Daftar (list)

Untuk membuat daftar, kodenya adalah sebagai berikut:

Untuk membuat daftar dengan angka:

<ol>
<li>Daftar 1</li>
<li>Daftar 2</li>
<li>Daftar 3</li>
</ol>

Untuk membuat daftar dengan bullets:

<ul>
<li>Daftar 1</li>
<li>Daftar 2</li>
<li>Daftar 3</li>
</ul>

Anda bisa menambah kode <li> untuk menambah daftar.

Contoh:

Daftar kegiatan camping:

<ol>
<li>6:30   = Berangkat</li>
<li>9:00   = Membangun tenda</li>
<li>9:30   = Olahraga</li>
<li>11:00 = Permainan</li>
<li>12:00 = Makan siang</li>
<li>13:00 = Lintas Alam</li>
<li>15:00 = Persiapan pulang</li>
<li>15:30 = Pulang</li>
</ol>

Daftar menu:

<ul>
<li>Ikan bakar</li>
<li>Ayam bakar</li>
<li>Sate Kambing</li>
<li>Sop sapi</li>
<li>Es Teh Manis</li>
<li>Air mineral</li>
</ul>

Hasil:

Daftar kegiatan camping:

1. 6:30 = Berangkat
2. 9:00 = Membangun tenda
3. 9:30 = Olahraga
4. 11:00 = Permainan
5. 12:00 = Makan siang
6. 13:00 = Lintas Alam
7. 15:00 = Persiapan pulang
8. 15:30 = Pulang

Daftar menu:

• Ikan bakar
• Ayam bakar
• Sate Kambing
• Sop sapi
• Es Teh Manis
• Air mineral

Sudah dulu ya... lama-lama tangan pegel nulisnya.