Kode HTML Link selain dalam bentuk teks,
ternyata link juga bisa dalam bentuk gambar yang sering digunakan
sebagai iklan sebuah perusahaan atau produk. Link gambar dalam html yang kita harus tahu terlebih dahulu adalah kode html untuk menyisipkan gambar dalam HTML pada halaman web html. Tapi di sini kita akan belajar beberapa atribut html dalam membuat link pada gambar.
Berikut ini kode sederhana membuat Membuat Gambar Menjadi Link pada HTML :
Nah bisa kita lihat, tag html <img src> dimana terletak diantara tag <a> atau hiperlink. Jadi intinya kita membuat kode html menyisipkan gambar yang di bungkus dengan tag <a> hiperlink. ketika gambar di klik maka akan menuju ke link http://pojokentrepreneur.blogspot.com. Nah, kita harus memastikan alamat gambar secara benar. Untuk format gambar sebagai link dalam html bisa .jpg, .gif, .bmp, . tif , .png . dll.
Maka hasilnya akan terlihat seperti di bawah ini :
Keterangan atribut yang terdapat dalam Membuat Gambar Menjadi Link pada HTML :
- target=”_blank” yaitu jika link gambar HTML kita klik maka akan membuka jendela baru sesuai tujuan alamat pada link gambar tersebut yaitu pojokentrepreneur.blogspot.com. jika tidak diberikan atribut target=”” akan membuka alamat link pada halaman yang sama.
- height=”###″ yaitu memberi nilai untuk ukuran tinggi gambar yang diberikan link tersebut sebesar ###pixel. ( *### ubah sesuai ukuran gambar yang di inginkan).
- width=”###″ yaitu memberikan nilai sebesar ###pixel pada gambar link. ( *### ubah sesuai ukuran gambar yang di inginkan).
- border=”###″ yaitu memberikan garis tepi pada link gambar dengan tebal 2. semakin besar nilai semakin tebal garis tepinya. ( *### ubah sesuai ukuran gambar yang di inginkan).
- style = “border -style : double; float:right;” yaitu menyisipkan kode css dalam html dengan atribut border-style sebagai bentuk/style garis tepi dengan jenis yang berbeda-beda(double,ridge,dotted,dashed,dll) dan untuk atribut float yaitu untuk menentukan letak gambar (left,right,top,bottom).
<img src ="http://pojokentrepreneur.blogspot.com/Header1.png" height = “40” width =”100″ border = “2” style=”border-style:dotted; float:right;” >
ok siip postingannya .,.,.,
ReplyDeletedan kunjungi
http://brotherand-sister.blogspot.com/
Terimakasih kunjunganya gan
ReplyDelete