Selasa, 30 Agustus 2011

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: http://3.bp.blogspot.com/_g30iiY0E5ek/SvYotFuOB2I/AAAAAAAAABc/1k0mMXkmEHE/s320/untitled.JPG

Maka kodenya adalah:
<img src="http://3.bp.blogspot.com/_g30iiY0E5ek/SvYotFuOB2I/AAAAAAAAABc/1k0mMXkmEHE/s320/untitled.JPG" title="Contoh image" alt="Contoh image, contoh gambar, kode HTML image"/>
Dan hasilnya:
Contoh image, contoh gambar, kode HTML image
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="http://3.bp.blogspot.com/_g30iiY0E5ek/SvYotFuOB2I/AAAAAAAAABc/1k0mMXkmEHE/s320/untitled.JPG" title="Contoh image" alt="Contoh image, contoh gambar, kode HTML image"/></a>
Dan hasilnya seperti ini:
Contoh image, contoh gambar, kode HTML image
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.

0 komentar:

:10 :11 :12 :13 :14 :15 :16 :17
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39

Poskan Komentar

Prev Prev home

aku berada didalam kejahatan yg tak punya malu.. ingin merasakan rasanya sensasi yg baru.. godaan yg membuatku senang..


dilarang merokok,,blog ini ber~AC...!!!
boland capzlock
Diberdayakan oleh Blogger.
RUANG MANAJEMEN SUDUT PANDANG © design Template 2011 by:
boland capzlock
blogwalking.. Selamat datang di blog saya.