Flamingosolution.com | Berikut pembahasan lanjutan dari HTML Dasar yaitu "Cara membuat Link di HTML Dasar", jika sebelumnya blog telah memuat artikel tentang tahap -tahap awal HTML Dasar,
atau bisa dilihat halaman yang telah dimuat sebelumnya dibawah ini :
Dasar HTML 1
Dasar HTML 2
Dasar HTML 3 ( Pengenalan Judul dan Attribut)
Dasar HTML 4 (Membuat Tabel)
Maka selanjutnya seperti diatas tadi kita akan melanjutkan membahas cara membuat link dalam HTML Dasar.
LINK adalah suatu alamat dalam kode HTML yang ditulis/dimasukkan dalam HTML dengan tujuan untuk menghubungkan suatu halaman ke halaman lain.
Tentu sebelum membuat link, kita harus menyediakan beberapa file Html dalam drive/ penyimpanan kita, agar nantinya tujuan dari link itu sendiri dapat berjalan sesuai keinginan (Menghubungkan antar halaman)
Contoh atau bentuk tag yang digunakan untuk membuat link dalam sebuah HTML ialah;
NB : Ditulis dalam Body
NB : Ditulis dalam Body
<body>
<a href ="halaman_b.html"> Klik untuk halaman kedua </a>
</body>
Berikut penjelasan kode diatas;
- Kode merah <a href =" "> </a> adalah mutlak bentuk dari sebuah tag LINK.
- Kode biru (halaman_b.html)adalah sebuah alamat dari suatu halaman di html, seperti contoh halaman google
- Sedangkan tulisan hitam "Klik untuk halaman kedua" adalah tulisan dari link yang akan kita tampilkan sebagai link tersebut. (sebagai penanda/ atau tulisan yang akan kita klik).
Selanjutnya, Misalkan sebuah file dari "halaman tujuan" itu berada di folder lain dalam Drive penyimpanan kita, maka kita harus menambahkan sebuah SUB FOLDER di depan alamat dari link (Warna biru diatas).
dengan cara menambahkan "nama folder/ " pada awalan alamat tujuan dari link.
Contohnya :
<a href ="folderhtml/halaman_b.html"> Klik untuk halaman kedua </a>
Maka bisa dilihat kode warna Coklat diatas merupakan sub folder dari html tujuan kita, jika misalkan file nya berbeda dengan file yang dibentuk bersama link.
Namun suatu "HTML Link" bukanlah hal yang mengharuskan dalam penggunaan antar file/ halaman yang berbeda, tapi dalam file atau halaman yang sama juga dapat beroperasi.
Seperti contoh yang kerap kita temui adalah Tombol (Back to Top) / tombol kembali ke halaman atas.
Tombol (Back to Top) atau Kembali ke atas berlaku apa bila suatu halaman dalam html memiliki konten/ tampilan isi yang banyak sehingga memungkinkan kita untuk melakukan "Scroll Down" kebawah.
Sehingga dibuatlah sebuah link untuk memudahkan akses langsung kembali ke atas tanpa melakukan "Scroll Up"
Untuk membuat link dalam halaman yang sama (Back to Top) ;
Misalkan kita akan membuat Beberapa Judul dalam konten isi/ <body> , mungkin banyak, tujuannya agar nantinya kita dapat melakukan scroll kebawahseperti berikut ini;
<body>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h2> Judul tengah </h2>
Namun suatu "HTML Link" bukanlah hal yang mengharuskan dalam penggunaan antar file/ halaman yang berbeda, tapi dalam file atau halaman yang sama juga dapat beroperasi.
Seperti contoh yang kerap kita temui adalah Tombol (Back to Top) / tombol kembali ke halaman atas.
Tombol (Back to Top) atau Kembali ke atas berlaku apa bila suatu halaman dalam html memiliki konten/ tampilan isi yang banyak sehingga memungkinkan kita untuk melakukan "Scroll Down" kebawah.
Sehingga dibuatlah sebuah link untuk memudahkan akses langsung kembali ke atas tanpa melakukan "Scroll Up"
Untuk membuat link dalam halaman yang sama (Back to Top) ;
Misalkan kita akan membuat Beberapa Judul dalam konten isi/ <body> , mungkin banyak, tujuannya agar nantinya kita dapat melakukan scroll kebawahseperti berikut ini;
<body>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h3> Judul Tengah </h3>
<h3> Judul Tengah </h3>
<h3> Judul Tengah </h3>
<h3> Judul Tengah </h3>
<h3> Judul Tengah </h3>
</body>
Kode diatas hanyalah akan menampilkan judul biasa.
Tujuan kita ialah membuat isi agar dapat discroll yaitu dengan memperbanyak isi dengan judul, apabila sudah bisa di scroll.
Selanjutnya kita akan menambah fungsi dengan Tag dan attribut ke dalam "Judul Teratas" yang nantinya akan dipanggil jika kita menekan Link yang ada dibawah, yaitu link #kembali keatas.
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h2> Judul tengah </h2>
<h3> Judul Tengah </h3>
<h3> Judul Tengah </h3>
<h3> Judul Tengah </h3>
<h3> Judul Tengah </h3>
<h3> Judul Tengah </h3>
</body>
Kode diatas hanyalah akan menampilkan judul biasa.
Tujuan kita ialah membuat isi agar dapat discroll yaitu dengan memperbanyak isi dengan judul, apabila sudah bisa di scroll.
Selanjutnya kita akan menambah fungsi dengan Tag dan attribut ke dalam "Judul Teratas" yang nantinya akan dipanggil jika kita menekan Link yang ada dibawah, yaitu link #kembali keatas.
Pertama langsung saja berikut cara dan contohnya tampilannya, dibawah ini ;
<body>
<a name="Kembalikeatas"><h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1></a>
<h2> judul tengah<h2>
<h2> judul tengah<h2>
<h2> judul tengah<h2>
<h3> judul tengah<h3>
<h3> judul tengah<h3>
<h3> judul tengah<h3>
<h3> judul tengah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> judul tengah<h3>
<h3> judul tengah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3> <h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3> <h3> Judul Bawah<h3> <h3> Judul Bawah<h
<a href="#kembalikeatas"> Klik untuk Kembali Keatas </a>
</body>
Penjelasannya seperti berikut ;
<a name="Kembalikeatas"><h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1>
<h1> Judul Teratas</h1></a>
<h2> judul tengah<h2>
<h2> judul tengah<h2>
<h2> judul tengah<h2>
<h3> judul tengah<h3>
<h3> judul tengah<h3>
<h3> judul tengah<h3>
<h3> judul tengah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> judul tengah<h3>
<h3> judul tengah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3> <h3> Judul Bawah<h3>
<h3> Judul Bawah<h3>
<h3> Judul Bawah<h3> <h3> Judul Bawah<h3> <h3> Judul Bawah<h
<a href="#kembalikeatas"> Klik untuk Kembali Keatas </a>
</body>
Penjelasannya seperti berikut ;
1. Tambahkan sebuah fungsi yang akan dipanggil di link dengan cara mengapit <h1> dengan mengawali tag
<a> dan ditutup diakhiran </h1> dengan </a>
2. Lalu dalam Tag <a> tambah attribut name="kembalikeatas" yaitu sebagai fungsi yang akan dipanggil di link.
3. Kemudian Panggil di akhiran (diatas </body>) fungsi nomor 2 tersebut dengan membuat "link" seperti ini":
<a href="#kembalikeatas"> Klik untuk Kembali Keatas </a>
NB : Mengapa dalam dalam Tag Link attribut alamat "href="#Kembalikeatas"> memakai tanda (#)???
Karena
tanda # dalam alamat berfungsi memanggil attribut yang telah dimasukkan
dalam tag pembuka di judul teratas atau <h1>
Saya rasa Teman teman sekalian dapat memahami dengan seksama, silahkan diperhatikan/diulang langkah langkah diatas apabila linknya tidak berjalan lancar.
Sekian Ulasan diakhiri, apabila ada yang kurang jelas, silahkan untuk meninggalkan komentar dibawah.
Jangan lupa Klik like, atau bagikan ke teman teman yang lain apabila hendak ingin belajar HTML.
Terima kasih
Baca pula Artikel Terkait :
.jpg)
.png)
0 komentar:
Post a Comment
Mari Saling Berbagi, Membangun dengan memberi kritik, saran jika ada yang kurang jelas, dan tentunya Komentar yang tidak mengandung hal NEGATIF, SARA, BERBAU PORNO GRAFI.
Salam BLOGGER