Penggunaan Tag Href Untuk Membuat Link (internal) pada struktur HTML #7

Halo teman teman apa kabar nya nih ?? semoga dalam keadaan baik ya….

Oke teman teman dalam pembahasan materi kali ini mimin akan membahas kelanjutan dari materi kemarin nih yakni pembuatan hyperlink internal  ,seperti biasa siapkan alat tempur kebanggan kalian ya ……

Code editor

Kopi

Rokok

Hehehhe

Oke langsungsaja ke pembahasan

Pada pembuatan hyperlink kemarin kita mengunakan google sebagai alamat yang kita tuju.

Perlu di garis bawahi bahwa penggunaan hyperlink internal disini saya akan menggunakan sebuah script html yang saya buat sendiri ,artinya dalam penggunaan hyperlink internal kali ini kita akan membuat 2 buah script /code yang akan kita buat menjadi saling menghubungkan ….

Bingung??

Mari langsung saja kita lakukan tahap pengcodingannya….

<!DOCTYPE html>
<html>
<head>
            <title>Pembuatan hyperlinx eksternal</title>
</head>
<body>
            <p>
                        <a href=”hyperlinx2.html”>KLIK</a> disini boy
            </p>
           
</body>
</html>

 Perhatikan Gambar Berikut ….

Disini saya membuat 2 buah codingan yang berarti nanti akan menampilkan 2 buah halaman akan saya kaitkan satu sama lain sehingga kedua halaman ini akan saling menguhubungkan satu sama lain

Didalam codingan pertama saya membuat sebuah link yang akan menuju pada halaman hyperlink 2

Coba kalian perhatikan didalam sebuah tag body , saya sudah menjelaskan pada postingan  sebelumnya mengenai link eksternal yang mana kita kaitkan alamatnya menuju google .

Nah kali ini kita akan mencoba menghubungkan dengan halaman html yang akan kita buat sendiri.

Pada href saya sudah cantumkan file codingan ke dua yakni “hyperlink2.html”  

Coba perhatikan gambar dibawah ini…

Ini Adalah isi dari file hyperlink2.html disitu sudah saya tulis banyak list ,saya akan cantumkan code nya dan gambar nya di bwah ini…

<!DOCTYPE html>
<html>
<head>
            <title>pembuatan Link Internal</title>
</head>
<body>
            <h1>List Barang Yang Harus Di beli Di Tahun 2021</h1>
            <ol>
                        <li>Mobil</li>           
                        <li>Motor</li>          
                        <li>Komputer</li>   
                        <li>Helikopter</li>
                        <li>Laptop</li>         
                        <li>Ikan Cahanna</li>
                        <li>Sofa</li> 
                        <li>Aquarium</li>
                        <li>Rumah</li>         
                        <li>Kopi</li>
                        <li>Rokok</li>          
                        <li>Hp</li>
            </ol>
</body>
</html>

Jika kalian bingung dengan codingan ini maka kalian sebaiknya membaca postingan sebelumnya mengenai pembuatan list….

Perhatikan gambar di atas ini merupakan hasil dari codingannya ,nah halaman inilah yang akan kita tuju ..

Coba kalian perhatikan gambar dibawah ini..

Perhatikan didalam elemen <a href yang saya beri tanda ,didalamnya saya menuliskan file yang bertuliskan hyperlynk.html artinya saya menghubungkan link pada halaman ini ke pada halaman ke dua

Gambar ini merupakan hasil dari tahap peng codingan pertama yakni file “hyperlinx.html”

Disitu terlihat tulisan yang berwarna biru, tulisan tersebut merupakan sebuah tautan atau sebuah link  yang akan mengarahkan kita pada halaman 2 yakni file “hyperlinx2.html

Jika kita tekan /pencet tulisan “klik”  Maka Kita akan menuju halam kedua yakni pada gambar berikut..

Nah ini adalah contoh penggunaan untuk hyperlink yang bersifat internal, jika kalian bingung lebih baik kalian coba terlebih dahulu ..kemudian pahami bagaimana cara kerja dan fungsi dari hyperlink ini……

Jika masih bingung juga maka silahkan kalian cantumkan pertanyaan kalian pada kolom komentar..

Owh iya,Selanjutnya kita masih akan membahas tentang hyperlink ..bedanya kali ini kita akan menggunakan gambar ssebagai linknya bukan sebuah teks…

Owh iya jika ada kritik dan saran silahkan kalian cantumkan juga dalam kolom komentar ya….

Mohon maaf jika ada salah kata..

Sekian dari mimin ,sampai ketemu di pembahsan selanjutnya………

Assalamualaikum warahmatullahi wabaraathuh…..

Author: kucing

Leave a Reply

Your email address will not be published. Required fields are marked *