Responsive Advertisement

Cara Membuat Link HTML

judul

Pembahasan kali ini adalah memasukkan alamat website kedalam teks. Kamu dapat mempelajari Cara Membuat List HTML dan Cara Membuat Judul HTML supaya kamu dapat mempelajarinya lagi.

Memasukkan link kedalam teks itu sangat mudah, kamu harus menentukan alamat website yang kamu pilih kemudian copy alamat tersebut dan masukkan ke dalam kodingan. Dalam hal ini, kita akan memakai tag <a>  dan atribut <href> untuk memasukkan alamat website ke dalam  atribut tersebut. Contoh sederhananya <a href=”url”> ini link </a>.

Contoh kodingan dapat kamu lihat dibawah ini.

See the Pen Link1_materi by lintangzakti (@zakti13) on CodePen.


Kodingan diatas merupakan contoh sederhana cara memasukkan alamat website ke dalam teks. Kamu bisa merubah teks yang digunakan sesuai kebutuhan masing-masing.

Kali ini, link yang kamu buat langsung muncul ke jendela tab yang baru. Umumnya ketika kamu membuka alamat website, maka akan terbuka pada halaman link yang kamu klik. Biasanya hal seperti itu ada yang suka dan ada juga yang tidak.

Contoh kodingan dapat kamu lihat di bawah ini.

See the Pen Link2_materi by lintangzakti (@zakti13) on CodePen.


Perbedaan dari kodingan sebelumnya yaitu memakai atribut target. Kodingan diatas memakai atribut target untuk mendefinisikan link yang akan dibuka menuju ke tab baru atau tidak. Penjelasan sebagai berikut.
target=”_blank”, link akan terbuka pada jendela baru atau tab baru.
target=”_parent”, link akan terbuka pada halaman yang sama (default).
target=”_self”, link akan terbuka di nama frame yang kamu buat.
target=”_top”, link akan terbuka penuh pada jendela tab kamu.

Selanjutnya, link kalian bisa di pakai untuk bookmark atau menandai sesuatu pada halaman yang sama. Seperti kalian ingin menuju ke judul A dan ada link yang dapat langsung menuju ke judul A. 

Contoh kodingan dapat kamu lihat di bawah ini.

See the Pen Link3_materi by lintangzakti (@zakti13) on CodePen.


Kamu harus membuat link terlebih dahulu untuk menuju nama id yang digunakan. Dalam kodingan diatas, <a href=”#P1”> dan <a href=”#P6”> memakai # untuk nama id yang digunakan pada teks tersebut. Ingat, nama id harus sama dan wajib menggunakan # sebelum nama id dalam href.

Jika kalian ingin mencoba, silahkan kalian masukkan kodingan tersebut ke dalam Text Editor lalu Save As dengan format HTML dan nama yang kalian suka. Klik dua kali untuk membuka File tersebut dan lihat hasilnya.