Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Beranda / tutorial / website

Cara Menyisipkan Dan Mengatur Gambar Di HTML

by why Posting Komentar

Sebuah Website tanpa gambar menjadi kurang menarik, karena itu menyisipkan gambar pada halaman website menjadi cukup penting. Alasan lainnya adalah karena gambar menjadi salah satu media yang terlihat mencolok, dengan menambahkan gambar akan memudahkan pembaca untuk lebih memahami isi atau konten dari web tersebut.

Cara Menyisipkan Dan Mengatur Gambar Di HTML

Salah satu cara yg paling untuk menyisipkan gambar pada sebuah halaman website adalah dengan menggunakan elemen <img> html. 

Baca juga : Dasar Pemrograman WEB : Pengenalan HTML dan CSS

Setelah kita mampu memahami cara menyispkan gambar pada html, kita bisa dengan mudah mengembagkannya seperti menambahkan logo di header, menyisipkan gambar di table, ataupun menyispkan gambar tersebut sebagai latar belakang. 

Sebelum itu simak artikel berikut untuk memahami dasar dari cara menyisipkan dan mengatur gambar di html.

Cara Menyisipkan Gambar di HTML

Pada HTML cara untuk menyisipkan gambar adalah dengan menggunakan tag <img>. tidak seperti elemen lain, elemen <img> dapat langsung menetapkan gambar yang ingin di tampilkan tanpa harus menuliskannya diantara tag pembuka dan penutup. Contohnya seperti ini :

<!DOCTYPE html>
<html>
    <head>
<title>Menyisipkan Gambar</title>
    </head>
    <body>
        <h1>Cara Menyisipkan Gambar Di HTML</h1>
<img src="chelsea.jpg">
    </body>
</html>

Masih bingung? tidak apa, artikel ini akan coba menjelaskannya lebih detail. Sekarang kita coba ambil elemen <img> untuk lebih memahaminya.

Cara Menyisipkan Dan Mengatur Gambar Di HTML

Di dalam elemen <img> terdapat atribut src yang berfungsi sebagai sumber gambar yang ditampilkan. atribut src bernilai path gambar lokal atupun bisa juga bernilai URL.

untuk contoh kode diatas gambar tersimpan di satu folder yang sama dengan berkas htmlnya. jika tersimpan di folder yang berbeda maka elemen <img> menjadi seperti ini.

<img src="folder-yg-dituju/chelsea.jpg">

selanjutnya setelah memahami cara menyisipkan gambar ada hal lain yang perlu di pahami yaitu menentukan format gambar yang benar, karena salah menentukan format gambar dapat berdamapak pada gambar yang tidak bisa tampil di halaman website.

Jenis-Jenis Format Gambar

1. (.gif) digunakan untuk format gambar berbentuk animasi
2. (.jpg, .jpeg, .jfif, .pjpeg, .pjp) digunakan untuk gambar yang tidak banyak teks.
3. (.png) digunakan untuk gambar yang memiliki teks lebih banyak 
4. (.webp) memiliki kualitas yang lebih baik, dan waktu loading lebih cepat\
5. (.svg) biasa digunakan untuk icon atau logo pada suatu web

Mengatur Ukuran Gambar Di HTML

Setelah mengetahui cara menyisipkan gambar dan jenis-jenis format gambar, selanjutnya adalah kita harus mengatur gambar tersebut. 

Pada sebuah halaman web perlu untuk mengatur setiap gambar yang ingin di tampilkan karena akan berdampak pada keindahan tampilan web tersebut. Untuk mengatur sebuah gambar pada dasarnya menggunakan atribut height dan width.

Kita hanya perlu menggunakan salah satu dari atribut height dan width, karena jika kita memaksakan untuk mengatur keduanya gambar yang di tampilkan akan terlihat tidak proporsional. 

Berikut adalah contoh mengatur ukuran gambar di html

<!DOCTYPE html>
<html>
    <head>
<title>Menyisipkan Gambar</title>
    </head>
    <body>
        <h1>Cara Menyisipkan Gambar Di HTML</h1>
<img src="chelsea.jpg" alt="Chelsea" height="500px">
    </body>
</html>

dan hasilnya adalah seperti ini

Cara Menyisipkan Dan Mengatur Gambar Di HTML

 

Posting Komentar untuk "Cara Menyisipkan Dan Mengatur Gambar Di HTML"