Tutorial Cara Membuat Link di HTML

-

 Anda tentunya sudah tidak asing lagi dengan istilah “link” karena di berbagai website Anda bisa menemukan link baik berupa teks ataupun gambar. Yang menjadi pertanyaan adalah bagaimana cara membuat link di suatu dokumen HTML ? Untuk menjawab pertanyaan tersebut, pada artikel ini saya akan menjelaskan tentang bagaimana memasukkan link ke dokumen HTML dan hal – hal lainnya yang berkaitan dengan link.

Link digunakan sebagai penghubung antara satu halaman dengan halaman yang lainnya. Lebih jelasnya, penggunaan link pada HTML yaitu untuk menghubungkan dokumen HTML tersebut ke halaman lain yang merupakan alamat tujuan. Link merupakan teks atau gambar yang terkait dengan suatu alamat tertentu. Agar Anda lebih memahami materi “Link”, simaklah penjelasan dibawah ini:

a. Penggunaan tag <a>

Penggunaan link pada dokumen HTML ditandai dengan penggunaan elemen anchor yaitu tag berpasangan <a> …… </a>. Pada browser, link umumnya ditandai dengan teks berwarna biru yang memiliki garis bawah. Jika Anda mengklik teks atau gambar yang mengandung link, maka path dari link tersebut akan dibuka baik di tab itu sendiri ataupun di tab baru. Adapun atribut yang ada pada tag <a> adalah sebagai berikut:

Atribut  Fungsi
 hrefMenunjukkan lokasi dokumen tujuan
 idMenghubungkan style sheet (CSS) atau menandai lokasi pada sebuah halaman
 hreflangMenunjukkan bahasa yang digunakan
 typeMemberi catatan tipe isi dari dokumen tujuan
 relMenggambarkan hubungan dari dokumen saat ini dengan dokumen tujuan
 revMenggambarkan hubungan antara dokumen tujuan dengan dokumen asal
 charsetMenspesifikasikan karakter encoding dokumen web
 titleMemberikan judul link berupa tooltip

Berikut contoh sederhana penggunaan link di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Link Di HTML</title>
 </head>
 <body>
  <p>Anda sedang belajar HTML di blog <a href="https://www.nesabamedia.com">Nesaba Media</a></p>
 </body>
</html>

Setelah Anda menjalankan kode HTML diatas di browser maka akan tampil seperti gambar dibawah ini:

Penggunaan link di html

b. Atribut id

Atribut href pada tag <a> digunakan untuk menyatakan suatu file tujuan. Path tujuan HTML yang berada di dalam tag <a> dapat diikuti dengan menggunakan atribut id yang digunakan untuk membawa pembaca ke suatu bagian tertentu dalam dokumen.

Agar lebih mudah dimengerti, coba tulis “#tentang” pada atribut href di link dan tulis atribut id=”tentang” pada tag <p>. Untuk contoh kode penulisannya bisa anda lihat dibawah ini :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Link Di HTML</title>
 </head>
 <body>
  <p>Klik <a href="#tentang">Tentang</a> untuk mengetahui informasi mengenai Nesaba Media</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><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><br><br><br><br><br><br><br><br><br>
  <p id="tentang">Nesabamedia.com merupakan seputar tutorial komputer, internet dan jaringan komputer.</p>
 </body>
</html>

Hasilnya di browser akan seperti ini:

Penggunaan atribut id

Saya sengaja menggunakan banyak tag <br> untuk mempermudah Anda memahami fungsi dari atribut ini. Ketika Anda klik link “Tentang”, Anda akan langsung diarahkan ke bagian kalimat ini “Nesabamedia.com merupakan seputar tutorial komputer………”.

c. Atribut title

Selanjutnya, jika Anda menggunakan atribut title, maka akan ditampilkan isi title tersebut sebagai tooltip yang akan muncul jika Anda mengarahkan kursor pada linknya. Berikut contoh penulisannya di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Link Di HTML</title>
 </head>
 <body>
  <a href="https://id.wikipedia.org/wiki/Soekarno" title="Biografi">Biografi</a> 
 </body>
</html>

Setelah anda menjalankan kode diatas, anda akan melihat tampilan seperti dibawah ini ketika mengarahkan kursor di link Biografi:

title pada link html

d. Perbedaan external link dan local link

External link digunakan untuk membuka web page yang berada pada website lain (berbeda domain), biasanya diikuti dengan penulisan alamat path tujuan secara lengkap dengan bagian “http://”. Berikut contoh penulisan dan penggunaannya di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>External Link</title>
 </head>
 <body>
  <p>Untuk mengetahui informasi lengkap mengenai Bill Gates, klik <a href="https://en.wikipedia.org/wiki/Bill_Gates">Biografi</a></p>
 </body>
</html>

Setelah kode HTML tersebut dijalankan di browser, maka tampilannya akan seperti dibawah ini :

penggunaan external link

Berbeda dengan local link digunakan untuk membuka web page pada website atau document root yang sama. Misalkan alamat website anda www.nesabamedia.com dan pada website tersebut terdapat halaman bernama belajarpiano.html. Jika anda ingin membuat link yang menuju halaman tersebut, maka anda tidak perlu menulis urlnya secara lengkap seperti www.nesabamedia.com/belajarpiano.html pada atribut href, cukup menuliskan belajarpiano.html saja. Contoh penulisannya seperti dibawah ini:

<!DOCTYPE html>
<html>
 <head>
  <title>Local Link</title>
 </head>
 <body>
  <p>Klik <a href="belajarpiano.html">link ini</a> untuk membaca tutorial belajar piano yang benar</p>
 </body>
</html>

Contoh lainnya seperti ini, misalkan kita mempunyai folder bernama BelajarHTML. Di dalam folder tersebut terdapat 2 file html dan 2 folder yang masing-masing mempunyai 1 file html. Lebih jelasnya, struktur foldernya seperti ini:

Jadi begini, anggap saja saat ini saya sedang mengedit file yang bernama webku.html dan saya ingin membuat link yang mengarah ke halaman kisahku.html, maka saya cukup menuliskan kode HTMLnya seperti ini:

<a href="cinta/kisahku.html">

Anggap saya masih sedang mengedit file webku.html tapi kali ini saya ingin membuat link yang mengarah ke halaman karirku.html, maka kode HTMLnya menjadi seperti ini:

<a href="bisnis/karirku.html">

Masih mengedit file webku.html. Jika saya ingin membuat link yang mengarah ke halaman posting.html, maka kode HTMLnya seperti ini:

<a href="posting.html">

Dengan menggunakan local link, anda tidak perlu menulis secara lengkap alamat halaman yang ingin dituju.

Menjadikan gambar sebagai link

Ada kalanya kita ingin menjadikan gambar sebagai link untuk kebutuhan tertentu seperti membuat tombol yang mengarah ke halaman lain, dimana tombol tersebut sejatinya terbuat dari gambar. Untuk contoh kode HTMLnya bisa Anda lihat dibawah ini:

<!DOCTYPE html>
<html>
 <head>
  <title>Gambar sebagai Link</title>
 </head>
  <body>
   <p>Klik tombol dibawah ini jika anda ingin membaca halaman posting.<br>
    <a href="posting.html" title="Halaman Posting"><img src="tombol.jpg" alt="halaman posting"></a>
   </p>
 </body>
</html>

Setelah Anda menjalankan kode HTML diatas di browser, maka tampilannya seperti dibawah ini:

gambar sebagai link

Ketika anda klik gambar tombol, maka anda akan diarahkan ke halaman posting.html. Oh ya, untuk penulisan <img scr=”alamatgambar”…. pastikan benar ya, kalau salah gambarnya tidak akan muncul. Pada kode HTML diatas, file tombol.jpg saya letakkan dalam satu folder dengan file htmlnya, makanya saya hanya menulis <img src=”tombol.jpg”…. tidak perlu menuliskan alamat lengkap file gambarnya. Dan untuk file htmlnya saya beri nama gambar.html sedangkan file gambarnya saya beri nama tombol.

struktur gambar sebagai link

Jika anda memahami konsep local link yang sudah saya bahas sebelumnya, anda tidak akan bingung pada step ini.

d. Atribut target pada link

Atribut target digunakan untuk menentukan atau menetapkan bagaimana suatu path tujuan ditampilkan setelah link diklik seperti apakah dibuka pada tab/ jendela saat ini atau pada tab/ jendela baru. Berikut nilai pada atribut target yang dapat Anda gunakan :

Atribut Fungsi
 _blank Membuka web page tujuan di tab atau jendela baru
 _self Membuka web page tujuan di tab atau jendela saat ini (default)
 _parent Membuka web page tujuan di parent frame
 _top Membuka web page tujuan di tab atau jendela yang sedang dibuka, membatalkan semua frame

Perlu diingat, pada HTML5, penggunaan “_parent” dan “_top” sudah deprecated karena website sekarang sudah tidak ditulis berdasarkan frame atau frameset. Selain itu kedua atribut ini jarang sekali digunakan. Jika Anda tidak menentukan atribut target pada link, maka secara default web page tujuan akan dibuka di tab atau jendela yang saat itu dibuka (“_self”).

Berikut contoh kode penulisan dan penggunaan atribut target=”_blank” di HTML :

<!DOCTYPE html>
 <html>
 <head>
  <title>Penggunaan Target _blank</title>
 </head>
  <body>
   Baca selengkapnya mengenai tutorial HTML hanya di <a href="https://www.nesabamedia.com" target="_blank">Nesaba Media</a>
 </body>
 </html>

Setelah Anda menjalankan kode diatas di browser maka akan tampil seperti gambar dibawah ini:

target blank di link

Itulah tutorial cara membuat link di HTML beserta penjelasan mengenai tag dan atribut apa saja yang berhubungan dengan link di HTML. Materi selanjutnya yang perlu anda pelajari adalah cara menambahkan gambar di HTML.

Comments

Post a Comment

Popular posts from this blog

Membuat Project Web Pribadi dengan HTML

-
Image
  Step 1 – Membuat Desain Web Pembuatan web dimulai dengan desain. Kalau tidak ada desain, nanti kita akan kesulitan dan tidak akan tahu mau buat apa. Biasanya desain web dikerjakan oleh desainer, setelah itu diserahkan ke programmer untuk diubah menjadi HTML. Pada project ini, kita akan membuat tiga halaman web, yakni  home ,  contact , dan  about . Desain yang digunakan adalah desain dalam bentuk  wireframe  atau sketsa. Berikut ini desain untuk tiap-tiap halaman: 1. Desain Halaman Home Halaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka website. Halaman ini berisi menu, foto, teks, dan tabel. 2. Desain Halaman Contact Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik website. 3. Desain Halaman About Halaman about adalah halaman yang berisi informasi lengkap tentang website. Step 2 – Memulai Project Web Silahkan buat folder baru dengan nama  websiteku . Setelah itu buat folder   image   dan   video   di dalam folder   websit
Read more

Cara Menambahkan Audio (Lagu) di HTML

-
Image
  Cara Menambahkan Audio (Lagu) di HTML Beberapa website seperti  website musik , penyedia lagu-lagu online, kursus online ataupun yang lainnya, tentunya perlu memasukkan file – file audio sebagai konten dari website tersebut. Secara umum, ada tiga jenis file audio yang bisa dimainkan yaitu audio digital, file music dan text to speech. Selain itu, kita juga bisa menambahkan inline audio pada sebuah website. Inline audio adalah suara yang disertakan dalam suatu halaman web atau sebagai bagian dari suatu halaman web dimana suara tersebut akan dimainkan saat browser diload. Tetapi sebelum Anda memasang inline audio pada website, terlebih dahulu perhatikan apakah penggunaan inline audio tersebut tidak mengganggu pengunjung untuk membaca konten website. Anda sebaiknya memasang inline audio pada halaman web yang diharapkan oleh pengunjung untuk mendengar suara. Pada materi kali ini, saya akan membahas tentang bagaimana cara menambahkan lagu di dalam HTML dengan menggunaan elemen audio. Untuk
Read more

Contoh Coding HTML Website Biodata

-
Image
  Persiapan Sebelum memulai coding  HTML  untuk membuat website biodata, ada beberapa persiapan yang perlu dilakukan: 1. Menyiapkan Editor Teks Favorit Anda Anda dapat menggunakan editor teks sederhana seperti Notepad atau menggunakan editor khusus HTML seperti Visual Studio Code atau Sublime Text. 2. Membuat Folder Proyek Buat folder khusus untuk proyek website biodata Anda. Di dalam folder tersebut, buat file dengan ekstensi .html untuk menyimpan kode HTML. Langkah-langkah Membuat Website Biodata dengan HTML 1. Struktur Dasar HTML Mulailah dengan menambahkan struktur dasar HTML pada file Anda dengan menggunakan  tag   <html> ,  <head> , dan  <body> . Ini akan menjadi kerangka dasar dari halaman website.2. Menambahkan Judul Halaman Gunakan tag  <h1>  atau  <h2>  untuk menambahkan judul halaman biodata Anda. <!DOCTYPE html> <html> <head> <title>Biodata Saya</title> </head> <body> <!-- Isi halaman website -->
Read more