Kali ini kita akan membahas mengenai salah satu elemen yang pasti ada dalam pembuatan suatu website yaitu Gambar. Gambar atau images dalam pembuatan website sangat penting untuk memberikan sarana komunikasi visual untuk menggambarkan atau menggantikan banyak kata serta membuat website yang kita bangun terlihat lebih hidup dan menarik.
Section Artikel
Dasar HTML
Seperti biasa sebelum masuk ke pembahasan gambar pada bootstrap kita lebih dahulu membahas mengenai dasar dari pemanggilan gambar di pemrograman html. Pada pemrograman html, gambar dibuat dengan menggunakan tag <img> seperti
<img src=”alamat gambar”>
Secara teknis gambar tidak dimasukkan ke dalam website yang kita buat, tag <img> menautkan serta membuat area untuk gambar yang ingin ditampilkan. Tag <img> merupakan single tag yitu sebuah tag yang tidak mempunyai penutup seperti tag <a> dengan penutup </a>. Tag <img> hanya memiliki attribut yaitu ada 2 yang umum digunakan
- src -> alamat dari gambar yang ingin dimasukkan dalam website,
Contoh: <img src=”img/gambar1.jpg”> ini berarti gambar tersebut berada dalam folder img. Kita juga bisa memasukkan link dalam attribute src,contohnya <img src=”https://dosenit.com/wp-content/uploads/2020/10/proteuslogo.jpg”>
- alt -> berarti alternatif text yang akan terlihat jika gambar gagal di tampilkan.
Contoh <img src=”gambarku.jpg” alt=”gambar galery”>, yang berarti jika gambar gambarku.jpg tidak berhasil terlihat pada halaman website maka teks “gambar galery” yang kan muncul dalam area nya.
Contoh Tag img dasar
<html>
<head><title>Gambar</title>
</head>
<body>
<img src="https://dosenit.com/wp-content/uploads/2020/10/proteuslogo.jpg" alt="Contoh gambar">
</body>
</html>
Gambar Bootstrap
Pada bootstrap gambar di optimasi menjadi lebih responsive dan menambahkan style atau gaya ke dalam gambar serta kita dapat emngatur perataan dari gambar kita. Tentunya untuk membuat hal ini kita harus memasukkan class bootstrap kedalam tag img.
Responsive Dan ukuran image
Pada bootstrap gambar dapat dibuat menjadi lebih responsive dengan memasukkan .img-fluid. max-width:”100%”; dan height:auto; Class-class ini akan membuat gambar menyesuaikan dengan ukuran layar dengan gambar fullscreen tentunya. untuk merubah tinggi dan lebar gambar tinggal teman-teman ubah width dan height nya saja. contohnya:
<html>
<head>
<title>Gambar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<img src="https://dosenit.com/wp-content/uploads/2020/10/16.jpg" class="img-fluid" width="450" height="350" alt="Contoh gambar">
</body>
</html>Perataan gambar
Gambar pada bootstrap juga dapat diatur perataan nya seperti gambar dibuat rata kiri, rata kanan, atau bahkan pada posisi ditengah. Untuk mengetahui hal ini lihat contoh program dibawah:
<html>
<head>
<title>Gambar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<img src="https://dosenit.com/wp-content/uploads/2020/10/16.jpg" class="float-right" alt="Gambar rata kanan">
<img src="https://dosenit.com/wp-content/uploads/2020/10/16.jpg" class="float-left" alt="Gambar rata kiri"><br><br>
<img src="https://dosenit.com/wp-content/uploads/2020/10/16.jpg" class="mx-auto d-block" alt="Gambar rata tengah">
</body>
</html>Bentuk gambar
Selain perataan gambar, pada bootstrap juga kita dapat mengatur bagaimana bentuk gambar ditampilkan. Silahkan teman – teman lihat tabel dibawah:
| Bentuk gambar | Class yang digunakan |
|---|---|
| Gambar dengan sudut tumpul (Rounded corners) | .rounded |
| Gambar berbentuk lingkaran | .rounded-circle |
| gambar thumbnail | .img-thumbnail |
contohnya:
<html>
<head>
<title>Gambar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<img src="https://dosenit.com/wp-content/uploads/2020/10/16.jpg" class="rounded" alt="Gambar sudut tumpul">
<img src="https://dosenit.com/wp-content/uploads/2020/10/16.jpg" class="rounded-circle" alt="Gambar bentuk lingkaran">
<img src="https://dosenit.com/wp-content/uploads/2020/10/16.jpg" class="img-thumbnail" alt="Gambar thumbnail">
</body>
</html>Itulah beberapa style bootstrap agar gambar terlihat lebih bagus dari segi penempatan, bentuk, hingga besar kecilnya. Hal – hal diatas hanya bersifat dasar, teman – teman dapat memodifikasi nya dengan menggunakan CSS atau pun javascript. Bootstrap yang saya gunakan adalah bootstrap 4, jika teman teman menggunakan jenis / versi bootstrap yang berbeda mungkin akan ada sedikit perbedaan.
Sekian dari saya terimakasih
