Membuat Link dan Gambar di HTML

LINK DAN GAMBAR

Saat kita membuat sebuah dokumen web, ada kalanya pasti kita ingin menghubungkan dokumen satu dengan dokumen lainnya. Atau seperti dalam sebuah website seperti artikel dalam sebuah blog seringkali kita menemui link ke halaman lain atau link download sebuah file itulah yang disebut dengan Hyperlink. HTML menyediakan hypertext link yang merupakan daerah teks atau gambar yang bisa menyambung kan ke dokumen HTML yang lain. Bahkan bukan hanya teks dan gambar saja, file multimedia pun sudah dapat dibuat link ke dokumen yang diinginkan.

1. Link
Hypertext Link atau Hyperlink atau lebih di singkat lagi  Link ini menjadikan kita bisa membuka dokumen HTML lain atau langsung menuju ke bagian tertentu ataupun pada sebuah gambar dan jika link tersebut diletakkan di sebuah teks maka teks tersebut secara default akan digaris bawahi dan warna teks berbeda.


Sintak penulisan :                                                                         
                          <a href="ULR_tujuan">Nama_Link</a>  
Contoh :
 <a href="https://17416255201077-azizfirmansaputra.blogspot.com/">
https://17416255201077-azizfirmansaputra.blogspot.com/</a> 

Hasil Link :
https://17416255201077-azizfirmansaputra.blogspot.com/

2. Membuat Link di dalam Dokumen
   
   Dalam suatu dokumen yang panjang, kita biasanya ingin langsung menuju ke poin yang ingin dituju pada bagian tertentu sebuah halaman web. Oleh karena itu, kita bisa menyisipkan Tag Anchor <a> dengan atribut id="Nama" dibagian dokumen yang akan dituju. Misalnya pada contoh kali ini kita akan menuju pada bagian atas dokumen langsung. Untuk menggunakan Link yang akan menuju ke bagian dokumen maka ditambahkan "#nama_section".
   Contoh :
   Sisipkan pada bagian yang akan dituju misalnya <h2 id="JUDUL">LINK DAN GAMBAR</h2>
              <a href="https://17416255201077-azizfirmansaputra.blogspot.com/2018/11/membuat-link-dan-gambar-di-html.html#JUDUL">LINK DAN GAMBAR</a>
   
   Hasil Link :
   LINK DAN GAMBAR
   
3. Gambar
   
   Kita dapat menyisipkan gambar dalam dokumen web dengan menggunakan Tag <img>. Pada umumnya, dokumen web hanya menggunakan kombinasi dari tiga format gambar saja yaitu .jpg, .gif, dan .psd.
   Contoh Sintak secara Standar :
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDW7FIRxY5BB7bF2GpP0VEMPhOkFZi_FGFsinJiJmSwjXtoIYQZ_cnmDqtD078_GaUgG_ECc12IJ9eVTmRHgR5yuk0PSIcxHfSbYJmfvl2p4SWGJ9YfCDLlTBsPADBDLR09ysNycbdE4/w172-h178-rw/" width="193"  height="200" alt="Sekedar_Contoh">
   
   Hasil Gambar :
   
4. Membuat Hyperlink dari sebuah Gambar
   
   Saat kita mengunjungi sebuah website pasti kita akan menemui sebuah gambar yang jika kita klik kita bisa merujuk ke sebuah halaman lain. Seperti contohnya logo dalam sebuah website atau pun gambar untuk mendownload sebuah File. Untuk membuatnya kita bisa menggunakan sintak sebagai berikut :
   <a href="url tujuan">
   <img src="url gambar" alt="nama_alternatif_gambar" width="lebar" height="tinggi"></a>
   
   • Tag <a href> untuk memasukkan URL yang dituju saat gambar di klik.
   • Tag <img> untuk mendefinisikan sebuah gambar di HTML.
     
   • Atribut src artinya sumber atau URL dari gambar.
   • Atribut alt artinya nama alternatif  gambar, jika gambar tidak dapat ditampilkan, maka yang akan muncul nama alternatifnya.
   • Atribut width dan height untuk mengatur ukuran gambar lebar dan tinggi.
   
   Contoh Link Gambar :
   <a href="https://17416255201077-azizfirmansaputra.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDW7FIRxY5BB7bF2GpP0VEMPhOkFZi_FGFsinJiJmSwjXtoIYQZ_cnmDqtD078_GaUgG_ECc12IJ9eVTmRHgR5yuk0PSIcxHfSbYJmfvl2p4SWGJ9YfCDLlTBsPADBDLR09ysNycbdE4/w172-h178-rw/" alt="Firman's_Blog" width="193" height="200"></a>
   
   Hasil Link Gambar :
   
   

Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.