5. Tutorial HTML Membuat Link Pada HTML

Hai kembali dengan saya om Adji, sebelumnya kita telah membahas cara membuat list atau daftar di HTML, sekarang
kita akan membahas bagaimana caranya membuat Hyperlink untuk menghubungkan sebuah halaman ke halaman lainnya.

dalam membuat link pada HTML kita akan menggunakan tag<a></a> atau biasa disebut anchor tag. dan untuk menuliskan link alamat yang dituju perlu kita tambahkan atribut href (hypertext refferences) pada tag <a> lalu diikuti alamat tujuan, dalam penulisan alamat terdapat dua jenis alamat yaitu alamat absolut dan alamat relatif.

Alamat absolut adalah alamat yang mencantumkan alamat url secara lengkap, misalnya kita ingin membuat link ke facebook maka kita akan menulisnya sebagai berikut
<a href="http://www.facebook.com">Facebook</a>
Alamat relatif adalah alamat untuk menghubungkan kepada file relatif dalam web, misalnya saat kita berada pada halaman index dan ingin ke menu lainnya dalam sebuah web, contoh penulisannya sebagai berikut
<a href="menu_pertama.html">Menu Pertama</a>

Supaya tidak bingung dalam menulisnya, berikut cara penulisannya

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>Belajar membuat link di HTML</title>

</head>

<body>

<h3>belajar membuat link pada HTML </h3>

<p>Link ini akan membawa anda pada halaman facebook</p>

<a href="http://www.facebook.com" target="_blank">Facebook</a>

<p>Link ini akan membawa anda pada menu berikutnya</p>

<ul>

<li><a href="menu_pertama.html " target="_self">Menu pertama</a></li>

<li><a href="menu_kedua.html" target="_self">Menu kedua</a></li>

<li><a href="menu_ketiga.html" target="_self">Menu ketiga</a></li>

</ul>

</body>

</html>

Maka hasilnya akan seperti ini

Saat menu pertama, menu kedua, dan menu ketiga di klik akan muncul error karena menu_pertama.html, menu_kedua.html, dan menu_ketiga.html belum dibuat, jadi anda harus membuatnya dulu dan menyimpanya pada folder yang sama, namun jika anda menyimpanya di folder lain anda dapat menulisnya seperti ini

maksud dari penulisan ../ adalah naik satu tingkat folder.

Untuk penulisan atribut target= "_self" dan target="_blank" setelah href, maksudnya adalah sebagai berikut

target="_self" -> jika link di klik maka halaman yang terbuka tetap pada tab yang sama

target="_blank" -> jika link di klik maka halaman yang terbuka akan membuka tab baru

HMM parah nih om adji membuat para bewok lovers bingung, nah biar temen - temen ga bingung maksud nya seperti apa atau gimana sih caranya untuk pindah dari menu_pertama.html ke menu_kedua atau ke menu_ketiga.html. Nah biar ga penasaran mari kita mulai.

1. Kita buat dulu FILE nya ya seperti di bawah ini

2. Yang pertama kita edit adalah menu_pertama.html

seperti contoh di bawah ya

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>Belajar membuat link di HTML</title>

</head>

<body>

<h3>belajar membuat link pada HTML </h3>

<p>Link ini akan membawa anda pada halaman facebook</p>

<a href="http://www.facebook.com" target="_blank">Facebook</a>

<p>Link ini akan membawa anda pada menu berikutnya</p>

<ul>

<li><a href="menu_pertama.html " target="_self">Menu pertama</a></li>

<li><a href="menu_kedua.html" target="_self">Menu kedua</a></li>

<li><a href="menu_ketiga.html" target="_self">Menu ketiga</a></li>

</ul>

<br />

<h1>Halo Ini adalah Malam pertama, eh maksud nya menu pertama, semoga kalian bisa ya, semangat, kalau kamu ingin ke menu_kedua klik saja yang di atas </h1>

</body>

</html>

Seperti di bawah ya

3. Selanjut nya kita edit yang menu_kedua.html

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>Belajar membuat link di HTML</title>

</head>

<body>

<h3>belajar membuat link pada HTML </h3>

<p>Link ini akan membawa anda pada halaman facebook</p>

<a href="http://www.facebook.com" target="_blank">Facebook</a>

<p>Link ini akan membawa anda pada menu berikutnya</p>

<ul>

<li><a href="menu_pertama.html " target="_self">Menu pertama</a></li>

<li><a href="menu_kedua.html" target="_self">Menu kedua</a></li>

<li><a href="menu_ketiga.html" target="_self">Menu ketiga</a></li>

</ul>

<br />

<h1>Haduhhh bingung nih di menu kedua mau nulis apa, nanti kalau mau nulis tips ldr an indonesia - malaysia kepanjangan :p</h1>

</body>

</html>

Gambar nya seperti di bawah ini

4. TERAKHIR yang menu_ketiga.html

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>Belajar membuat link di HTML</title>

</head>

<body>

<h3>belajar membuat link pada HTML </h3>

<p>Link ini akan membawa anda pada halaman facebook</p>

<a href="http://www.facebook.com" target="_blank">Facebook</a>

<p>Link ini akan membawa anda pada menu berikutnya</p>

<ul>

<li><a href="menu_pertama.html " target="_self">Menu pertama</a></li>

<li><a href="menu_kedua.html" target="_self">Menu kedua</a></li>

<li><a href="menu_ketiga.html" target="_self">Menu ketiga</a></li>

</ul>

<br />

<h1>Makin gatau mau nulis apa di menu ketiga, mau nulis cara mendapatkan pacar dalam waktu 5 menit, penulis nya juga belum pacar,#curcol</h1>

</body>

</html>

Setelah sudah di apainn bang adji?????? di coba dong, masa di biarin aja :)),

Sekian untuk tutorial cara pembuatan hyperlink pada HTML, kita ketemu lagi dalam pembahasan berikutnya yaaa

Tutorial Programming & Digital Marketing

Breaking

Home Top Ad

Thursday, May 5, 2016

5. Tutorial HTML Membuat Link Pada HTML

1 comment:

Facebook

Recent

Popular

Contact Form