Membuat Link HTML


Halo sobat Artikel Multimedia, link html atau hyperlink atau bisa juga disebut tautan merupakan elemen html yang mengarahkan pengguna website untuk berpindah dari satu bagian ke bagian lain dalam satu halaman website yang sama atau ke halaman website yang berbeda. Link html sendiri tidak selalu dalam bentuk teks namun ada juga yang berupa gambar, ikon, tombol atau elemen html lainnya. Tag html yang digunakan untuk membuat link adalah <a href=”url”>…</a> dimana link yang dibuat dapat mengarahkan pengguna website ke: 

  • Halaman website lain (internal atau eksternal)
  • Email
  • File untuk diunduh
  • Bagian tertentu di halaman webiste yang sama

Berikut ini contoh kode html untuk membuat beberapa jenis link. 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cara Membuat Link HTML</title>
</head>
 
<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 30px;
    }
 
    h2 {
        color: #2c3e50;
    }
 
    a {
        color: #0077cc;
        text-decoration: none;
    }
 
    a:hover {
        text-decoration: underline;
    }
</style>
 
<body>
    <!-- Link ke situs eksternal -->
    <h2>1. Link ke Situs Eksternal</h2>
    <p><a href="https://www.google.com" target="_blank">Kunjungi Google</a></p>
 
    <!-- Link ke halaman lain dalam website -->
    <h2>2. Link ke Halaman Internal</h2>
    <p><a href="dokumen.html">Tentang Kami</a></p>
 
    <!-- Link untuk mengunduh file -->
    <h2>3. Link untuk Mengunduh File</h2>
    <p><a href="dokumen.pdf" download>Unduh Dokumen PDF</a></p>
 
    <!-- Link ke email -->
    <h2>4. Link ke Email</h2>
    <p><a href="mailto:contoh@email.com">Kirim Email ke Kami</a></p>
 
    <!-- Link ke bagian tertentu di halaman -->
    <h2>5. Link ke Bagian Tertentu di Halaman yang Sama</h2>
    <p><a href="#kontak">Lompat ke bagian Kontak</a></p>
 
    <!-- Konten untuk scroll -->
    <div style="height: 600px;"></div>
 
    <!-- Tujuan link -->
    <h2 id="kontak">Bagian Kontak</h2>
    <p>Ini adalah bagian kontak di bawah halaman.</p>
 
</body>
 
</html>


Berikut ini adalah tampilan dari kode html diatas jika dibuka melalui browser. 

Sedikit penjelasan sobat tentang kode html diatas. 

  • Di dalam tag <a> terdapat href= yang berfungsi untuk menentukan tujuan link tersebut.
  • Di dalam tag <a> juga terdapat target="_blank" yang berfungsi untuk membuka jendela baru ketika link tersebut diklik. 

Sekian penjelasan tentang cara membuat link html, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih … 

Tags:

Posting Komentar

0 Komentar

Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda