HTML Dasar : Hyperlink
HELLO MATES 🍻 !!!
By : Mr.KLA
Hello Mates Welcome Back !!! Pada kesempatan kali ini yang kita bahas adalah Hyperlink atau disebut juga link atau web link. Link adalah sebuah koneksi dari sebuah sumber web ke sumber lain. Itu menurut spesifikasinya kalau kurang jelas cari aja pengertiannya di google :v. Jadi komponen Hyper Karrie ini eh :v Hyperlink ini adalah komponen penting dalam sebuah web.
Link pada HTML dibuat dengan tag <a></a> atau disebut anchor, kenapa disebut anchor ? Karena anchor itu analaginya atau ibaratnya adalah sebuah jangkar yang pasti terhubung pada sebuah kapal. Sama seperti Hyperlink yang pasti terhubung pada sebuah sumber. Oke langsung saja kita mulai ngeCodingnya
Seperti biasa saya sudah membuat folder latihan 6 didalam folder HTML dan juga saya sudah simpan satufile html bernama Halaman1.html
Didalam html nya saya akan coba buat sebuah paragraf yang berisi seperti ini . Yang nantinya kata "disini" akan saya jadikan sebuah link, sehingga kita bisa terhubung ke sumber lain atau ke halaman lain
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik disini untuk mengetahui informasi lebih lanjut.</p>
</body>
</html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik disini untuk mengetahui informasi lebih lanjut.</p>
</body>
</html>
Jadi cara menuliskannya adalah kita tambahkan tag <a> sebelum kata "disini" dan tutup </a> setelah kata "disini"
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik <a>disini</a> untuk mengetahui informasi lebih lanjut.</p>
</body>
</html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik <a>disini</a> untuk mengetahui informasi lebih lanjut.</p>
</body>
</html>
Lalu kita lihat hasilnya !
Nah kata "disini" belum menjadi sebuah Hyperlink karena untuk membuat Hyperlink kita butuh satu artibut yang dinamakan dengan href. Nah kemudian kita bisa tulis sumber nya. Nah yang kita bisa tuliskan didalam href itu ada beberapa jenis <a href=" "></a> Didalam href ini yang pertama kita bisa tuliskan External link atau link ke website lain contoh : http://www.google.com , https://www.blogger.com
Kita coba misalnya kita ingin terhubung ke google.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik <a href="http://google.com">disini</a> untuk mengetahui informasi lebih lanjut.</p>
</body>
</html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik <a href="http://google.com">disini</a> untuk mengetahui informasi lebih lanjut.</p>
</body>
</html>
Lalu kita lihat hasilnya otomatis linknya berubah style nya warnanya menjadi ungu atau biru lalu ada garis bawahnya.
Apa perbedaaanya antara ungu dan biru ? Kalau ungu kita sudah pernah mengunjungi link nya tapi kalauwarnanya biru terang kalian belum pernah sama sekali mengunjungi web tersebut.
Sekarang saya coba klik. Kalau kalian terhubung di internet maka otomatis akan masuk ke google.com
Kedua kita bisa masukan internal link atau halaman website lain yang ada di dalam kedomain kita atau satu domain dengan website yang kita buat contoh : product.html , ../admin/index.html
Oke kita buat lagi file yang bernama halaman2.html yang isinya seperti ini
Lalu kita kembali lagi ke halaman 1 tapi href nya saya ganti dengan file yang saya akan tuju yaitu halaman2.html . Kita tidak perlu menuliskan http karna ini sudah satu domain, bahkan saya sudah simpan di satu folder yang sama
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik <a href="halaman2.html">disini</a> untuk mengetahui informasi lebih lanjut.</p>
</body>
</html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik <a href="halaman2.html">disini</a> untuk mengetahui informasi lebih lanjut.</p>
</body>
</html>
Tampilannya memang tetap tapi kita coba pencet kata "disini"
Maka otomatis kita dialihkan di halaman 2 yang tadi kita buat
Untuk pindah ke halaman satu kita tambahkan tag <a href> dihalaman 2 kita
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink halaman 2</title>
</head>
<body>
<h1>Ini adalah halaman 2</h1>
<a href="Halaman1.html">Kembali ke halaman 1</a>
</body>
</html>
<html>
<head>
<title>Hyperlink halaman 2</title>
</head>
<body>
<h1>Ini adalah halaman 2</h1>
<a href="Halaman1.html">Kembali ke halaman 1</a>
</body>
</html>
Dan kita lihat hasil nya, kemudian klik kembali ke halaman 1
Kita otomatis akan dialihkan ke halaman 1 yang kita buat tadi.
Yang ketiga kita bisa tambahkan page anchor yang disebut dengan bagian tertentu dari sebuah halaman. Jadi bukan hanya kita masuk ke sebuah halaman tpi kita pindahnya dibagian tertentu dari sebuah halaman contoh : #about , index.html#contact 
Sekarang yang kita lakukan adalah setelah h1 saya akan menambahkan <ul> yang didalam nya terdapat 3 buah list item
Yang ketiga kita bisa tambahkan page anchor yang disebut dengan bagian tertentu dari sebuah halaman. Jadi bukan hanya kita masuk ke sebuah halaman tpi kita pindahnya dibagian tertentu dari sebuah halaman contoh : #about , index.html#contact
Nah saya sudah buat file bernama halaman3.html . Ini kalau kalian lihat jangan bingung dulu dan kaget dengan isinya. Ini ceritanya saya udah buat sebuah artikel dengan judul bagian 1 , bagian 2, dan bagian 3.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 3</h1>
<h2>Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2>Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2>Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<html>
<head>
<title>Hyperlink halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 3</h1>
<h2>Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2>Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2>Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Jadi lorem dan bla bla bla ini ada playholder atau text sembarang yang digunakan untuk melihat apakah sebuah paragraf itu akan tampail sesuai dengan keinginan kit atau tidak. Tapi intinya saya punya 3 bagian . Bagian 1 yang memilki dua paragraf lalu saya pisahkan dengan sepuluh buah tag <br>. Lalu ada bagian 2 saya punya 3 buah paragraf sama dibatasi juga oleh 10 buah tag <br>. Kemudian di bagian 3 saya punya 1 paragraf.
Bagaimana dengan lorem ? jadi di sublime text kita dapat menuliskan lorem dengan efisien tinggal tulis lorem kemudian pencet tab maka akan keluar sendiri text bla bla bla nya
Lalu kita lihat hasilnya
Nah jadi ini ide nya nanti setelah saya buat <h1> saya akan membuat <ul> yang berisi tiga buah link menggunakan list item sehingga nanti jika saya klik nanti akan pindah ke bagian 1 , kalau saya klik list yang kedua maka akan pindah ke bagian 2, kalau saya klik list yang ke tiga maka akan pindah ke bagian 3
Sekarang yang kita lakukan adalah setelah h1 saya akan menambahkan <ul> yang didalam nya terdapat 3 buah list item
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 3</h1>
<ul>
<li><a href="">Ke Bagian 1</a></li>
<li><a href="">Ke Bagian 2</a></li>
<li><a href="">Ke Bagian 3</a></li>
</ul>
<h2>Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2>Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2>Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<html>
<head>
<title>Hyperlink halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 3</h1>
<ul>
<li><a href="">Ke Bagian 1</a></li>
<li><a href="">Ke Bagian 2</a></li>
<li><a href="">Ke Bagian 3</a></li>
</ul>
<h2>Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2>Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2>Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Lalu gimana agar bisa berpindah? Kita akan berikan penanda kebagian yang ingin kita pindah yaitu dengan kita tambahkan id
Kemudian di href nya kita tuliskan #bagian 1 dan seterusnya
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 3</h1>
<ul>
<li><a href="#bagian1">Ke Bagian 1</a></li>
<li><a href="#bagian2">Ke Bagian 2</a></li>
<li><a href="#bagian3">Ke Bagian 3</a></li>
</ul>
<h2 id="bagian1">Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian2">Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian3">Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<html>
<head>
<title>Hyperlink halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 3</h1>
<ul>
<li><a href="#bagian1">Ke Bagian 1</a></li>
<li><a href="#bagian2">Ke Bagian 2</a></li>
<li><a href="#bagian3">Ke Bagian 3</a></li>
</ul>
<h2 id="bagian1">Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian2">Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian3">Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Jadi ini bacanya saya akan pindah ke halaman yang sama tapi mencari id atau anchor bagian 1. Kita lihat hasilnya jika saya klik link bagian satu maka dia otomatis pindah ke bagian 1 dan seterusnya.
Nah pada saat saya klik bagian 3. Itu teks nya tidak berada di atas mengapa? itu karena spasi nya habis atau kurang, jadi halaman nya paling bawah.
Agar bagian 3 pindah ke atas kita tambahkan tag <br> lagi . Misal saya tambahkan dua baris br lagi
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 3</h1>
<ul>
<li><a href="#bagian1">Ke Bagian 1</a></li>
<li><a href="#bagian2">Ke Bagian 2</a></li>
<li><a href="#bagian3">Ke Bagian 3</a></li>
</ul>
<h2 id="bagian1">Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian2">Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian3">Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<html>
<head>
<title>Hyperlink halaman 3</title>
</head>
<body>
<h1>Ini adalah halaman 3</h1>
<ul>
<li><a href="#bagian1">Ke Bagian 1</a></li>
<li><a href="#bagian2">Ke Bagian 2</a></li>
<li><a href="#bagian3">Ke Bagian 3</a></li>
</ul>
<h2 id="bagian1">Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian2">Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian3">Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Tapi nanti ini kalian lakukannya dengan CSS . Lalu kita lihat bagian 3 nya otomatis pindah ke atas
Dan kalian juga bisa pindah dari halaman lain ke bagian lain contoh di halaman 1
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik <a href="halaman2.html">disini</a> untuk mengetahui informasi lebih lanjut.</p>
<a href="halaman3.html#bagian3">Ke halaman 3 Bagian 3</a>
</body>
</html>
<html>
<head>
<title>Hyperlink Halaman 1</title>
</head>
<body>
<p>Klik <a href="halaman2.html">disini</a> untuk mengetahui informasi lebih lanjut.</p>
<a href="halaman3.html#bagian3">Ke halaman 3 Bagian 3</a>
</body>
</html>
Lalu kita lihat hasilnya , kemudian klik link halaman 3
Maka akan langsung ke bagian 3
Sekian dari saya ! Gimana pendapat anda ??? Pusing ? Badan Pegal-pegal ??? Nyeri Punggung ??? Langsung saja ke klinik TONG FANG Maka otomatis kepala,punggung akan hilang :v.
Demikian dari saya Mohon maaf jika ada kesalahan kata :v
selengkapanya atau bingung bisa hubungi wa saya wa.me/+620895327283020
SEE YOU NEXT TIME UWU
Thanks To :
- ANGELS CYBER MOON
- TANGGERANG CYBER ARMY
- CLOWNSEC TEAM
- MALANG XPLOIT CYBER
- AND YOU UWU
Belum ada Komentar untuk "HTML Dasar : Hyperlink "
Posting Komentar