loading...
Pada tutorial HTML dasar kali ini kita akan mempelajari tentang cara menambahkan gambar di HTML. Gambar memiliki peran yang sangat penting untuk melengkapi konten web modern saat ini. Karena sebuah konten tidak lengkap rasanya jika tidak memiliki gambar.
Untuk menyisipkan gambar atau foto, HTML menyediakan tag khusus yang bernama tag image, dan ditulis dengan <img>. Tag <img> setidaknya memiliki sebuah atribut src (singkatan dari source) yang berisi alamat atau lokasi gambar yang akan ditampilkan. Alamat tersebut bisa relatif maupun absolut. Selain atribut src, pada pembahasan kali ini kita juga akan mengenal beberapa atribut lainnya yang sering digunakan untuk memformat gambar di HTML.
Syntax dasar tag <img>:
Tag <img> tidak memiliki elemen sehingga langsung ditutup dengan />.
Sebagai contohnya silakan sobat sediakan sebuah gambar yang akan ditampilkan di HTML, file gambar bisa berformat JPG, JPEG, PNG, atau GIF. Setelah sobat mendapatkan gambarnya, kemudian letakkan file gambar tersebut ke dalam folder yang sama dengan file HTML yang akan kita buat nanti. Dalam contoh kali ini saya menggunakan gambar Penguins.jpg. Berikut kode HTML-nya:
Contoh penggunaan tag <img> di HTML:
Selain atribut src, atribut penting lainnya yang terdapat pada tag <img> adalah alt (singkatan dari alternate text). Fungsi atribut alt adalah sebagai teks alternatif jika gambar gagal ditampilkan oleh web browser. Biasanya ini terjadi karena koneksi internet yang buruk atau karena web browser memang disetting untuk tidak menampilkan gambar. Kira-kira penampakannya seperti ini:
Contoh penggunaan atribut alt pada tag <img>:
Seperti pada contoh sebelumnya, jika kita tidak mengatur ukuran gambar maka gambar akan ditampilkan dengan ukuran sebenarnya. Untuk bisa mengatur ukuran gambar yang akan ditampilkan, maka kita harus menambahkan atribut width dan height yang nilainya berupa satuan pixel.
Contoh penggunaan atribut width dan height dalam tag <img>:
Jika kita perhatikan secara seksama, gambar di atas terlihat tidak proporsional. Ini terjadi karena penggunaan atribut width dan height 'memaksa' gambar untuk tampil sesuai dengan nilai yang kita tetapkan, yakni lebar=200 pixel dan tinggi=300 pixel.
Maka hal yang harus kita lakukan agar gambar terlihat proporsional, namun tetap bisa mengatur gambar menjadi besar atau kecil adalah dengan hanya mencantumkan salah satu atribut saja (misalnya width saja atau height saja). Contohnya jika kita ingin mengatur atribut height=300 (tanpa mencantumkan width), maka gambar akan ditampilkan dengan tinggi 300 pixel, dan secara otomatis web browser akan menghitung lebar gambar agar tetap proporsional.
Berikut contoh penggunaannya:
Itulah tutorial tentang cara memasukan gambar ke dalam HTML. Setelah kita menguasai penggunaan tag <img> untuk menampilkan gambar, pada tutorial HTML dasar selanjutnya kita akan membahas tentang Cara Membuat Tabel di HTML menggunakan tag <table>.
Cara Memasukkan Gambar di HTML
Untuk menyisipkan gambar atau foto, HTML menyediakan tag khusus yang bernama tag image, dan ditulis dengan <img>. Tag <img> setidaknya memiliki sebuah atribut src (singkatan dari source) yang berisi alamat atau lokasi gambar yang akan ditampilkan. Alamat tersebut bisa relatif maupun absolut. Selain atribut src, pada pembahasan kali ini kita juga akan mengenal beberapa atribut lainnya yang sering digunakan untuk memformat gambar di HTML.
| Tag | Atribut | Deskripsi |
|---|---|---|
| <img> | src | Berisi lokasi gambar |
| alt | Teks alternatif untuk gambar | |
| width | Mengatur lebar gambar | |
| height | Mengatur tinggi gambar |
Syntax dasar tag <img>:
<img src="url" />
Tag <img> tidak memiliki elemen sehingga langsung ditutup dengan />.
Sebagai contohnya silakan sobat sediakan sebuah gambar yang akan ditampilkan di HTML, file gambar bisa berformat JPG, JPEG, PNG, atau GIF. Setelah sobat mendapatkan gambarnya, kemudian letakkan file gambar tersebut ke dalam folder yang sama dengan file HTML yang akan kita buat nanti. Dalam contoh kali ini saya menggunakan gambar Penguins.jpg. Berikut kode HTML-nya:
Contoh penggunaan tag <img> di HTML:
<!DOCTYPE html>
<html>
<head>
<title>Belajar tag image</title>
</head>
<body>
<h1>Contoh penggunaan tag image</h1>
<img src="Penguins.jpg" />
</body>
</html>
Catatan: Secara default, web browser akan menampilkan gambar dengan ukuran yang sebenarnya jika kita tidak menggunakan atribut width dan height. Jika sobat menggunakan gambar beresolusi 1024x768, maka gambar akan terlihat besar. Kita dapat mengatur ukuran gambar menggunakan atribut width dan height yang akan kita bahas nantinya.
Mengenal Atribut alt Dalam Tag <img>
Selain atribut src, atribut penting lainnya yang terdapat pada tag <img> adalah alt (singkatan dari alternate text). Fungsi atribut alt adalah sebagai teks alternatif jika gambar gagal ditampilkan oleh web browser. Biasanya ini terjadi karena koneksi internet yang buruk atau karena web browser memang disetting untuk tidak menampilkan gambar. Kira-kira penampakannya seperti ini:
Contoh penggunaan atribut alt pada tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Belajar tag image</title>
</head>
<body>
<h1>Contoh penggunaan tag image</h1>
<img src="Penguins.jpg" alt="gambar penguins" />
</body>
</html>
Catatan: Selain sebagai teks alternatif, atribut alt juga memiliki peran penting terhadap mesin pencari seperti Google. Karena Google meng-index seluruh teks yang ada pada sebuah halaman web, termasuk teks yang dituliskan dalam atribut alt.
Mengenal Atribut width dan height dalam tag <img>
Seperti pada contoh sebelumnya, jika kita tidak mengatur ukuran gambar maka gambar akan ditampilkan dengan ukuran sebenarnya. Untuk bisa mengatur ukuran gambar yang akan ditampilkan, maka kita harus menambahkan atribut width dan height yang nilainya berupa satuan pixel.
Contoh penggunaan atribut width dan height dalam tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Belajar tag image</title>
</head>
<body>
<h1>Contoh penggunaan tag image</h1>
<img src="Penguins.jpg" alt="gambar penguins" width="200" height="300" />
</body>
</html>
Jika kita perhatikan secara seksama, gambar di atas terlihat tidak proporsional. Ini terjadi karena penggunaan atribut width dan height 'memaksa' gambar untuk tampil sesuai dengan nilai yang kita tetapkan, yakni lebar=200 pixel dan tinggi=300 pixel.
Maka hal yang harus kita lakukan agar gambar terlihat proporsional, namun tetap bisa mengatur gambar menjadi besar atau kecil adalah dengan hanya mencantumkan salah satu atribut saja (misalnya width saja atau height saja). Contohnya jika kita ingin mengatur atribut height=300 (tanpa mencantumkan width), maka gambar akan ditampilkan dengan tinggi 300 pixel, dan secara otomatis web browser akan menghitung lebar gambar agar tetap proporsional.
Berikut contoh penggunaannya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar tag image</title>
</head>
<body>
<h1>Contoh penggunaan tag image</h1>
<img src="Penguins.jpg" alt="gambar penguins" height="300" />
</body>
</html>
Itulah tutorial tentang cara memasukan gambar ke dalam HTML. Setelah kita menguasai penggunaan tag <img> untuk menampilkan gambar, pada tutorial HTML dasar selanjutnya kita akan membahas tentang Cara Membuat Tabel di HTML menggunakan tag <table>.
loading...
0 Komentar Cara Menambahkan Gambar di HTML (tag img)
Post a Comment