Saturday, March 16, 2013

Cara Membuat Link Pelangi Pada Dokumen HTML

Cara Membuat Link Pelangi Pada Dokumen HTML

Pada posting sebelumnya saya share 'Cara Membuat Text Pelangi Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Link Pelangi Pada Dokumen HTML'.

Link Pelangi adalah sebuah link (hyperlink) yang di kombinasikan dengan penggunaan javascript sehingga dapat membuat sebuah link yang apabila di sorot akan menampilkan efek berkedip-kedip dan warna-warni atau yang di sebut dengan Link Pelangi. Sedangkan Link itu sendiri adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain.

Baiklah berikut ini cara membuat Link Pelangi pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Link Pelangi Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Link Pelangi pada dokumen HTML seperti pada kotak di bawah ini.

  4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Link Pelangi Pada Dokumen HTML </title>

    <script src='js/rainbow-link.js' type='text/javascript'></script>

    </head>

    <body>

    <!-- Start Link Pelangi Code -->

    <a href="www.amirabella-zone.blogspot.com">Nama Link</a>

    <!-- // End Link Pelangi Code -->

    </body>
    </html>

    Keterangan

    1. Sisipkan JavaScript Text Pelangi di atas tag </head> seperti pada code di atas, ganti 'js/rainbow-link.js' dengan url tempat Anda menyimpan JavaScript. (Sudah ada di dalam file example).
    2. Setelah Anda attach java script seperti pada point no. 1 di atas, maka setiap Anda membuat link akan menampilkan efek pelangi pada saat link itu di sorot.
    3. Pada contoh di atas ganti www.amirabella-zone.blogspot.com dengan url link Anda, kemudian ganti Nama Link dengan nama link yang Anda kehendaki.


Nb. Silahkan beri feed back pada kotak komentar di bawah!


Bagikan posting ini di:
Comments
0 Comments

0 comments:

Post a Comment

 
Related Posts Amirabella-Zone