Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Teks / Gambar yang Bisa di Klik (HyperLink)

Kamu sedang menulis artikel untuk blog atau website dan ingin membuat teks atau gambar yang bisa diklik? Caranya tidak terlalu susah. Langkah-langkahnya kira-kira sebagai berikut.

Membuat hyperlink teks

Kode dasar untuk membuat teks yang bisa diklik adalah :

<a href="http://www.kalenderlengkap.com">Kalender Lengkap</a>

Hasilnya adalah Kalender Lengkap

Catatan: tulisan merah adalah halaman yang akan terbuka jika diklik, sedangkan tulisan hijau adalah teks yang bisa diklik.

Membuat hyperlink gambar

Kode dasar untuk membuat gambar yang bisa diklik hampir sama dengan teks, yaitu :

<a href="http://www.jadijenius.id"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizI2kznGMRJFvLQvUo7951LrgX2VSo9w_pEAfShG1rxdrD5q0U16AvTxz-mQJchN64C2sqopId16fLck51vQ4G_z134nHC29ZPjiD57gHe33v9xJ5iqtQAxvp1zbN6b2Dn3WtrxboMc0U/s1600-r/gakgaptek.jpg"/></a>

Hasilnya seperti ini:

Catatan: tulisan merah adalah halaman yang akan terbuka jika diklik, sedangkan tulisan hijau adalah alamat tempat gambar yang akan diklik.

Selain kode dasar tersebut, ada beberapa modifikasi yang bisa dilakukan yaitu:

1. Menampilkan halaman baru tanpa menutup halaman lama.

<a href="http://www.jadijenius.id" target=_blank>JadiJenius.id</a>

Contohnya : JadiJenius.id

2. Menampilkan tulisan ketika teks atau gambar disorot dengan cursor.

<a href="http://www.jadijenius.id" title="Jadi Jenius">JadiJenius.id</a>

Contohnya: JadiJenius.id

3. Teks tebal :

<a href="http://www.jadijenius.id"><b>JadiJenius.id</b></a>

Contohnya: JadiJenius.id

4. Teks miring :

<a href="http://www.jadijenius.id"><i>JadiJenius.id</i></a>

Contohnya: JadiJenius.id

Contoh di atas adalah kode-kode dasar. Kamu dapat bereksperimen dengan tag-tag HTML lainnya misalnya mengatur warna, besar huruf, jenis huruf, gambar flash, dll.

2 komentar untuk "Cara Membuat Teks / Gambar yang Bisa di Klik (HyperLink)"

  1. terimakasih tutorialnya
    Menampilkan tulisan ketika teks atau gambar disorot dengan cursor.

    GakGaptek.Com

    Contohnya: GakGaptek.Com gan kalau Menampilkan gambar ketika teks atau teks disorot dengan cursor. mohon info kodenya

    BalasHapus
  2. Terimakasih tutorialnya, kalau artikel yang nomerdua ini 2. Menampilkan tulisan ketika teks atau gambar disorot dengan cursor.

    GakGaptek.Com tag penutup ini menampilkan tulisan ketika teks disorot kursos
    pertanyaan saya bagaimana kalau menampilkan gambar ketika teks disorot kursos boleh tahu scrip HTML nya sepertinya hampir mirip dengan nomer dua, yang membedakan hanya keluar tulisan< ada pada tutorial no2) dan keluar gambar

    Contohnya: GakGaptek dot Com maaf kami delete sebagian teks supaya menjadi link tidak aktip boleh juga kami dijawab komentar kami di lombokmanlytours at gmail dot com terimakasih

    BalasHapus