Cara menggunakan add div html

Question

Link atau Hyperlink adalah elemen HTML yang menghubungkan satu halaman web dengan halaman web lainnya

Elemen ini dapat diklik. dan nanti akan membuka halaman lain sesuai dengan alamat URL yang diberikan

Tidak hanya untuk link halaman, link juga memiliki fungsi lain seperti scroll top, download file, menjalankan fungsi javascript, dll

Nanti kita akan membahas hal ini lebih mendalam

Sehat. sekarang, bagaimana cara membuat tautan di HTML?

Silakan lanjutkan membaca

Cara Membuat Link di HTML

Tautan dalam HTML dapat dibuat dengan tag

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>

4, maka tag ini harus memiliki atribut

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>

5 untuk menentukan alamat URL tujuan dari tautan tersebut

Bentuk sederhananya seperti ini

Contoh.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

_6

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

Hasil

Tautan akan ditampilkan dengan warna biru dan bergaris bawah. Ini adalah gaya standar setiap browser

Tentu saja, ini bisa kita ubah sesuai selera

Nanti kita bahas caranya

Sekarang coba klik link tersebut

Lihat. Mengapa itu salah?

Tautan yang kami buat akan membuka halaman

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

_7, tetapi kami belum membuat file ini atau belum ada. Karena itu, itu pasti kesalahan

Untuk mengatasinya, kita harus membuat file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7 dan menyimpannya dalam folder dengan file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

6

Isi file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

_7 seperti ini

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

_

Nah, sekarang mari kita coba lagi

Ya

Halaman

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

6 dan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7 berhasil terhubung

Tapi tunggu dulu

Mengapa alamat URL pada atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

5 ditulis dengan nama file?

<a href="about.html">About us</a>

Bukankah seharusnya alamat URL lengkap yang menggunakan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

4 bla bla?

Hal ini dikarenakan link yang kami buat adalah internal link dan juga file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

7 masih dalam folder yang sama dengan file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

6. Jadi anda bisa langsung menulis nama filenya, tanpa harus dilengkapi dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

4

Untuk lebih jelasnya mari kita pelajari jenis-jenis link pada HTML

Jenis link dalam HTML

Berdasarkan alamat URL tujuan, tautan HTML dibagi menjadi dua kelompok

Tautan Dalam. adalah tautan yang mengarah ke domain atau halaman web itu sendiri;
Tautan eksternal. adalah tautan ke domain lain

Tautan internal biasanya digunakan untuk menghubungkan satu halaman ke halaman lain di situs web atau domain

Sedangkan untuk external link, digunakan untuk membuka website atau domain lain. Contohnya seperti. buka halaman facebook, buka chat whatsapp, buka youtube, dan sebagainya

Intinya adalah

Selama tautan tersebut membuka situs web lain, maka itu bersifat eksternal. Tetapi jika Anda masih membuka web itu sendiri maka itu adalah internal

Agar lebih jelas, mari kita coba membuatnya dalam HTML

1. Contoh tautan internal

Buat file baru bernama

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

_8 lalu isi dengan kode berikut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

Kemudian buat file baru bernama

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

9 dengan konten berikut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

Terakhir, buat file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

_7 dengan konten berikut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

Pastikan semua file ini disimpan dalam satu folder

Setelah itu, coba buka

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

8 dengan browser

Jadi hasilnya

2. Contoh Tautan Eksternal

Cara membuat external link sebenarnya sama dengan internal link. Perbedaannya terletak pada alamat URL yang diberikan

Sebagai contoh. Ini adalah tautan eksternal yang menuju ke halaman Facebook

<a href="https://www.facebook.com/petanikode">Facebook Patani Kode</a>

Hasil

Facebook Patani Kode

Jadi ketika link di klik maka kita akan membuka halaman https. // www. facebook. com/petanicode

Contoh lain

Tautan CTA (ajakan bertindak) untuk whatsapp

<a href="https://api.whatsapp.com/send?phone=6287111&text=Hi">Chat dengan Saya</a>

Hasil

Ngobrol denganku

Pada link tersebut, kami memberikan alamat URL WhatsApp dan nantinya akan membuka halaman tersebut. Ini juga bisa disebut external link, karena akan membuka halaman whatsapp

Oh iya disana kami memberikan parameter berupa nomor telepon dan juga teks

Nah, biar lengkap. kami akan mencoba menambahkan tautan eksternal ke file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

9

Silahkan buka file

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About us</h1>
        <p>
          Ini adalah website yang dibuat dengan link.
          Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
        </p>
        <p>
          <a href="link.html">Kembali ke halaman link</a>
        </p>
    </body>
</html>

_9 kemudian ubah kodenya menjadi seperti ini

https://www.petanikode.com/contact.html

0

Hasil

Tes buka tautan Facebook

Tes buka tautan whatsapp

Sudah paham tentang external link?

Oke, sekarang lanjutkan belajar atribut

Atribut untuk Tautan

Selain atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

5, ada juga beberapa atribut yang sering ditambahkan pada link, seperti.

<a href="about.html">About us</a>

5,

<a href="about.html">About us</a>

6,

<a href="about.html">About us</a>

7,

<a href="about.html">About us</a>

8, dll.

Menggunakan Atribut <a href="about.html">About us</a>5

Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang umum digunakan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

0 akan membuka tautan di jendela atau tab baru;

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

1 akan membuka tautan di halaman itu sendiri (target default);

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

_2 menuju bagian atas halaman;

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

_3 membuka tautan di bingkai utama;

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

_4 akan membuka tautan di

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

5 dengan nama tertentu;

Contoh

https://www.petanikode.com/contact.html

1

Hasil

Saat link diklik, browser akan membuka tab baru. Ini karena kita memberikan atribut target dengan nilai

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

0

Selanjutnya, kami akan mencoba menampilkan tautan dalam bingkai

Buat file baru bernama

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

7, lalu isikan kodenya seperti ini

https://www.petanikode.com/contact.html

2

Hasil

Menggunakan Atribut <a href="about.html">About us</a>6

Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan muncul saat link disentuh pointer atau saat kita menahan tap pada ponsel

Contoh

https://www.petanikode.com/contact.html

3

Hasil

Demo Langsung

Untuk lebih jelasnya silahkan dibuka. Tentang kami

Cara Mengubah Warna Tautan di HTML

Warna default link adalah biru, kita bisa mengubahnya dengan gaya CSS. Warna yang bisa kita berikan untuk teks dan latar belakang (background)

Jalan

Tambahkan atribut

<a href="about.html">About us</a>

_8 lalu isi dengan css style untuk merubah warnanya yaitu

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

0 (untuk text) dan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

1 (untuk background)

Contoh

https://www.petanikode.com/contact.html

4

Hasil

Fungsi Menarik Lainnya dari Link

Seperti yang saya katakan sebelumnya. tautan tidak hanya digunakan untuk menghubungkan halaman web

Itu juga dapat digunakan untuk beberapa fungsi tertentu seperti

Membuat Tautan Mati

Tautan mati adalah tautan yang tidak akan membuka apa pun. Biasanya digunakan sebagai placeholder atau sampel saja

Cara membuatnya

Tambahkan lindung nilai atau lindung nilai dan tanda seru ke atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

5

Contoh

https://www.petanikode.com/contact.html

5

Hasil

Perhatian

Pada contoh, kita mengisi URL dengan tanda kurung. Arti dari tanda pagar pada URL sebenarnya adalah sebuah jangkar.

Anchor ini nantinya akan membawa kita ke lokasi tertentu di dalam dokumen HTML. Kalau hanya diisi pagar, maka tidak akan kemana-mana

Membuat Anchor Link

Tautan jangkar adalah tautan yang mengarah ke elemen tertentu. Cara kerjanya seperti ketika kita mengaitkan jangkar, lalu menariknya ke sana. Karena itu, dia disebut sebagai jangkar

Cara membuat anchor link adalah dengan mengisi alamat URL dengan tanda pagar (

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

3), kemudian isikan nama

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

4 dari elemen yang akan diarahkan

Contoh

https://www.petanikode.com/contact.html

6

Hasil

Jika kami perhatikan, di sana kami menggunakan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

5 sebagai URL

https://www.petanikode.com/contact.html

7

Sedangkan elemen yang memiliki

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

_6, tidak ada dalam HTML yang kita tulis

Mengapa anchor link ini bisa naik?

Hal ini dikarenakan browser sudah paham, jika ada anchor link yang mengarah ke

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

5 maka akan dibawa ke bagian atas dokumen

Membuat Tautan untuk Memanggil Fungsi Javascript

Tautan juga dapat digunakan untuk memanggil fungsi Javascript

Panggilan fungsi Javascript biasanya dilakukan dengan atribut acara seperti

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

8,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Contact</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Kamu bisa menghubungi saya melalui nomer WA: 0871111111
          atau juga alamat email: [email protected]
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

9,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

0, dan seterusnya

Contoh

https://www.petanikode.com/contact.html

8

Hasil

Bahkan, hampir semua elemen dapat menjalankan fungsi Javascript dengan atribut event

Nah, khusus untuk link. Ia juga dapat menjalankan fungsi Javascript melalui atribut atau URL

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

5

Contoh

https://www.petanikode.com/contact.html

_9

Hasilnya akan sama dengan contoh sebelumnya

Membuat Tautan dengan Gambar

Menjadikan gambar sebagai link terkadang sering dilakukan di web. Cara membuatnya sangat sederhana, kita hanya perlu membungkus tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

2 dengan tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

4

Contoh

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

0

Hasil

Semua area gambar akan menjadi link dan jika kita klik, kita akan dibawa ke halaman yang akan dituju oleh link tersebut

Buat tautan untuk mengunduh file

Tautan terkadang juga digunakan sebagai tautan untuk mengunduh file

Cara membuatnya sangat mudah, kita hanya perlu memasukkan alamat URL dari file yang akan didownload

Contoh

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

_1

Hasil

Pada contoh di atas, kita langsung menuliskan nama file. Ini karena HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

4 berada di folder yang sama dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

5

Lalu, bagaimana jika file tersebut ada di tempat lain?

Mudah. hanya mengubah URL

Contoh

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

_2

Buat Tautan untuk Mengirim Email

Tautan terkadang juga digunakan untuk mengirim email

Cara membuatnya

Ubah URL tujuan tautan dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>About</h1>
        <p>
          <a href="index.html" >Home</a> |
          <a href="contact.html" >Contact</a> |
          <a href="about.html" >About</a>
        </p>
        <hr>
        <p>
          Ini adalah halaman about dari website saya.
          Jadi ini adalah contoh cara membuat link internal di HTML.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

6, diikuti dengan alamat email yang akan menerima email

Contoh

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk lebih lengkapnya, silahkan buka:
            <a href="about.html">About us</a>
        </p>
    </body>
</html>

_3

Hasil

Jika Anda membukanya di Google Chrome, maka itu akan membuka Gmail. Namun jika dibuka di Firefox, maka akan memilih aplikasi email yang tersedia di komputer

Apa berikutnya?

Wow. selain menghubungkan halaman, ternyata banyak sekali fungsi link lainnya

Intinya adalah

Anda hanya perlu mengingat cara membuat tautan dan jenisnya. Karena ini adalah basic yang akan terus digunakan dalam membuat web

Untuk apa tag div dalam HTML?

Biasanya fungsi tag div pada HTML digunakan untuk mengelompokkan elemen atau berbagai tag untuk membentuk grup . Tag div ini juga sering digunakan untuk mendefinisikan ID atau Class dari CSS.

Apa itu kelas div dalam HTML?

Fungsi div di HTML biasanya untuk pengelompokan elemen atau tag - tag menjadi grup. tag div ini juga sering digunakan untuk mendefinisikan id atau class dari css.