Artikel Terbaru

4 Keunggulan Utama Bitcoin

Sebelum membicarakan tentang bitcoin, terlebih dahulu mari pahami apa yang dimaksud dengan uang. Apa sebenarnya yang dimaksud dengan uang? Pada dasarnya, uang adalah segala sesuatu yang mewakili nilai tertentu.

8 Pengaturan Utama Penggunaan Link pada Dokumen HTML

Link adalah koneksi dari satu sumber web terhadap sumber web lainnya. Sebuah link memiliki dua tujuan akhir, anchor dan direction atau tujuan. Link dimulai dari sumber anchor (jangkar) dan menuju ke titik destinasi dari anchor, yang mungkin saja berupa sumber web lain seperti gambar, video, potongan suara, program pada html dokumen atau elemen yang terdapat pada html dokumen.

Sintak Link Html
Link secara spesifik pada html menggunakan tag "a".
<a href="url">Text link</a>

Penjelasan Sintak:
href: atribut href digunakan untuk mengarahkan ke alamat destinasi dari link yang digunakan.
Text link: text link adalah bagian yang tampak dari link.

Input:

<!DOCTYPE html>

<html>

 

<h3>

Contoh penambahan link

</h3>

 

<body>

<p>

Klik link berikut ini:

</p>

 

<

href = "https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a>

</body>

 

</html>

Output:

Klik link berikut ini:

blog ElfanMauludi

Internal Link adalah tipe dari hyperlink yang targetnya adalah sumber seperti gambar atau dokumen pada satu alamat website atau domain.

Input:

<!DOCTYPE html>

<html>

 

<h3>

Contoh internal link dan external link.

</h3>

 

<body>

<p>

<

href="https://www.elfanmauludi.id/p/about-us.html">

Halaman profil blog ElfanMauludi

</a>

</p>

 

<p>

<

href="https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a

</p>

</body>

 

</html>

Output:

Halaman profil blog ElfanMauludi

blog ElfanMauludi


Mengubah Warna Link pada HTML
Perbedaan tipe dari tampilan link pada format berbeda seperti diperlihatkan berikut ini:
  • satu, Tampilan link yang belum dikunjungi memiliki garis bawah dan warna biru secara default.
  • dua, Tampilan link yang telah dikunjungi memiliki garis bawah dan warna purple secara default.
  • tiga, Link aktif memiliki garis bawah dan warna merah secara default.

Tampilan dari warna-warna default pada link dapat diubah dengan menggunakan CSS.

Input:

<!DOCTYPE html>

<html>

 

<head>

<style>

 

a:link 

{

color: red;

background-color: transparent;}

 

a:visited 

{

color: green;

background-color: transparent;}

 

a:hover 

{

color: blue;

background-color: transparent;}

 

a:active 

{

color: yellow;

background-color: transparent;}

 

</style>

</head>

 

<body>

 

<p>

Mengubah warna default dari link.

</p>

 

<p>

Link yang dikunjungi

</p>

<

href="https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a>

 

<p>

Link

</p>

<

href="https://facebook.com">

facebook

</a>

 

<p>

efek hover

</p>

<a href="https://elfanmauludi-tik.blogspot.com/">

blog ElfanMauludi

</a>

 

</body>

 

</html>


Atribut Target pada Link
Atribut target digunakan untuk menunjukkan lokasi dimana link dokumen dibuka. Pilihan berbeda dapat digunakan pada atribut target yang ditandai berikut ini:

Input:

<!DOCTYPE html>

<html>

 

<body>

 

<h3>

Variasi pilihan yang tersedia

dalam atribut target

</h3>

 

<p>

Jika target diatur ke tipe

"_blank", maka link akan

membuka alamat tujuan pada tab

atau window baru pada browser.

</p>

<

href="https://elfanmauludi-tik.blogspot.com/" 

target="_blank">

blog ElfanMauludi

</a>

 

<p>

Jika atribut diatur ke tipe 

"_self", maka link akan

membuka alamat tujuan pada tab

atau window yang sama pada

browser.

</p>

<

href="https://elfanmauludi-tik.blogspot.com/" 

target="_self">

blog ElfanMauludi

</a>

 

<p>

Jika atribut diatur ke tipe

"_top", maka link akan membuka

alamat tujuan pada full

window.

</p>

<

href="https://elfanmauludi-tik.blogspot.com/" 

target="_blank">

blog ElfanMauludi

</a>

 

<p>

Jika atribut diatur ke tipe

"_parent", maka link akan

membuka alamat tujuan pada

parent frame.

</p>

<

href="https://elfanmauludi-tik.blogspot.com/" 

target="_blank">

blog ElfanMauludi

</a>

 

</body>

 

</html>

Output:

Variasi pilihan yang tersedia dalam atribut target

Jika target diatur ke tipe "_blank", maka link akan membuka alamat tujuan pada tab atau window baru pada browser.

blog ElfanMauludi

Jika atribut diatur ke tipe "_self", maka link akan membuka alamat tujuan pada tab atau window yang sama pada browser.

blog ElfanMauludi

Jika atribut diatur ke tipe "_top", maka link akan membuka alamat tujuan pada full window.

blog ElfanMauludi

Jika atribut diatur ke tipe "_parent", maka link akan membuka alamat tujuan pada parent frame.

blog ElfanMauludi


Menggunakan Gambar Sebagai Link pada HTML
Gambar dapat digunakan sebagai link untuk alamat url spesifik.

Input:

<!DOCTYPE html>

<html>

 

<body>

 

<h3>

Menggunakan image sebagai link.

</h3>

 

<p>

Klik untuk mengunjungi blog ElfanMauludi.

</p>

<a href="https://elfanmauludi-tik.blogspot.com/">

<img 

src="elf_200X200.jpeg" 

alt="blog elfanmauludi"

style="width:80px;height:80px;border:0">

</a>

 

</body>

 

</html>

Output:

Menggunakan image sebagai link.

Klik untuk mengunjungi blog ElfanMauludi.

blog elfanmauludi

Membuat Link Bookmark untuk Halaman Website
Sebuah bookmark adalah link yang bisa digunakan untuk menuju ke tujuan spesifik dari laman webBookmark sangat berguna jika sebuah laman web sangat panjang.

Tahap untuk Membuat Bookmark adalah:
satu, Gunakan atribut id, ciptakan bookmark.
<h2 id="T17">Topic</h2>

dua, Tambahkan jatah spesifik dari laman web menuju bookmark.
<p><a href="#T17">Jump to Topic 17</a></p>

Input:

<!DOCTYPE html>

<html>

 

<body>

 

<p>

<a href="#T11">

Jump to Topic 11

</a>

</p>

 

<p>

<a href="#T17">

Jump to Topic 17

</a>

</p>

 

<p>

<a href="#T20">

Jump to Topic 20

</a>

</p>

 

<h2>Topic 1</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 2</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 3</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 4</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 5</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 6</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 7</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 8</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 9</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 10</h2>

<p>

paragraph 1

.....

</p>

 

<h2 id="T11">Topic 11</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 12</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 13</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 14</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 15</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 16</h2>

<p>

paragraph 1

.....

</p>

 

<h2 id="T17">Topic 17</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 18</h2>

<p>

paragraph 1

.....

</p>

 

<h2>Topic 19</h2>

<p>

paragraph 1

.....

</p>

 

<h2 id="T20">Topic 20</h2>

<p>

paragraph 1

.....

</p>

 

</body>

 

</html>

Output:

Membuat Link Download pada HTML
Sebuah teks link dari sebuah pdf, doc, ataupun file zib dapat dibuat sebagai suatu laman download.

Input:

<!DOCTYPE html>

<html>

 

<h3>

Membuat link download

</h3>

 

<body>

<a href = "https://drive.google.com/file/d/1IH5EA4-bOe6MkifoYLxu4qHg7lYsBCwk/view?usp=sharing">Download PDF File</a>

</body>

 

</html>

Output:

Membuat link download

Download PDF File

Komentar

  1. Apa yang dimaksud dengan link pada html?

    BalasHapus
    Balasan
    1. Link atau tautan merupakan object HTML yang memungkinkan user untuk melompat ke lokasi URL lain ketika dilakukan klik pada link yang dituju. Link juga dapat dilampirkan dalam bentuk teks, gambar, ataupun elemen lainnya pada HTML. Kebanyakan link atau tautan adalah berwarna biru, karena warna tersebut merupakan warna standar yang digunakan browser web untuk menampilkan tautan.

      Hapus
    2. Pada situs website, hyperlink atau link adalah item yang berupa teks atau tombol yang mengarah ke lokasi lainnya. Ketika user mengklik sebuah link, maka link tersebut akan membawa user ke target link tersebut, yang bisa berupa halaman web, dokumen, ataupun konten online lainnya. Situs website juga menggunakan hyperlink sebagai cara untuk menavigasi konten secara online.

      Hapus
  2. Apakah warna biru untuk hyperlink bisa diubah dengan warna lainnya?

    BalasHapus
    Balasan
    1. Bisa, dengan menggunakan kode CSS,

      seperti pada blog ini digunakan warna hijau sebagai warna default untuk hyperlink.

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.

POIN 6, Jika ada pihak ketika yang ingin memasang iklan pada blog ini secara langsung, maka dapat menghubungi pemilik blog melalui kontak 0882 3218 8316.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

4 Contoh Program Java dan Multiple Inheritance

Perbedaan Antara int main() dan int main(void) pada Bahasa C