Cara Menambahkan/Memasukkan Gambar di HTML (tag img)
Baca Juga
Cara Menambahkan Gambar di HTML (tag img)
Berbicara tentang website kita semua pasti sudah tak asing lagi dengan halaman website ketika kita menjumpai berupa gambar-gambar pada halaman tersebut. Fungsi gambar ini, tentunya akan menciptakan tampilan halaman web yang menarik dan informasi yang disampaikan menjadi lebih informatif.Nah bagi sobat yang ingin mengetahui bagaimana cara menambahkan sebuah gambar menggunakan bahasa pemrograman html. Berikut saya akan menjelaskan bagaimana cara menambahkan gambar pada website.
Ada beberapa format gambar yang didukung oleh HTML, seperti GIF, PNG, JPG, JPEG, WMF, PCX, BMP, TIFF dll. Biasanya format gambar yang paling sering digunakan adalah gambar yang berformat PNG dan JPG maupun JPEG.
Baca juga : contoh penggunaan dan fungsi tag font di HTML
Pengenalan tag <img> di HTML
Untuk memasukkan gambar atau foto, HTML menyediakan tag khusus yang bernama tag image, dan ditulis dengan <img>. tag ini juga disebut tag single/tunggal dimana kita tidak ada tag akhir pada tag ini.Untuk memfungsikan tag ini nantinya kita akan memerlukan beberapa atribut diantaranya :
- Src (berfungsi menunjukkan URL atau direktori lokasi file gambar berada)
- Width (Untuk mengatur lebar pada sebuah gambar)
- Heigth (Tinggi gambar)
- Align (Menentukan posisi teks disekitar gambar)
- Alt (sebagai kata kunci gambar pada search engine google dll, dan menggantikan teks jika gambar tidak dapat ditampilkan)
- Border (memberikan bingkai/garis tepi pada gambar dengan nilai menggunakan satuan pixel)
Contoh cara penggunaan tag <img> di HTML
Sebagai contohnya silahkan sobat sediakan sebuah gambar yang akan ditampilkan pada sebuah halaman. Pilih format gambar yang standar terlebih dahulu agar sobat lebih mudah untuk mengoperasikannya. Misalnya dengan format JPG, JPEG, PNG, atau GIF.Setelah itu letakkan gambar tersebut kefolder baru tepat sama letak dengan file HTML yang akan kita buat dibawah ini. Pada contoh kali ini saya menggunakan gambar Avanger.jpg dengan kode HTML sebagai berikut :
<DOCTYPE html>
<html>
<head>
<title> Menyisipkan gambar </title>
</head>
<body>
<h1> cara memasukkan gambar </h1>
<img src=”Avanger.jpg” align=”center” alt=”Gambar Avanger” width=”150” heigth=”100”>
</body>
</html>
<html>
<head>
<title> Menyisipkan gambar </title>
</head>
<body>
<h1> cara memasukkan gambar </h1>
<img src=”Avanger.jpg” align=”center” alt=”Gambar Avanger” width=”150” heigth=”100”>
</body>
</html>
Setelah kode HTML diatas disimpan pada folder yang sama dengan letak gambar tadi maka secara otomatis, HTML akan membaca format gambar tersebut dan kemudian dengan perintah kode yang kita buat tadi HTML akan menampilkannya pada halaman website seperti gambar dibawah ini :
Oh ya sobat pasti bertanya mengapa gambar tersebut tidak berada diposisi tengah padahal atribut align menggunakan nilai center yang artinya tengah. Karean fungsi atribut align disini akan terlihat ketika gambar tersebut dikombinasikan dengan beberapa teks pada pengkodeannya. Seperti contoh dibawah ini :
<DOCTYPE html>
<html>
<head>
<title> Menyisipkan gambar </title>
</head>
<body>
<h1> cara memasukkan gambar </h1>
<p> ini adalah gambar di tengah :<img src="Avanger.jpg" align="center" alt="Gambar Avanger" width="150" heigth="100"> Dengan align tengah</p>
</body>
</html>
Jika dijalankan maka hasilnya seperti gambar berikut :<html>
<head>
<title> Menyisipkan gambar </title>
</head>
<body>
<h1> cara memasukkan gambar </h1>
<p> ini adalah gambar di tengah :<img src="Avanger.jpg" align="center" alt="Gambar Avanger" width="150" heigth="100"> Dengan align tengah</p>
</body>
</html>
Baiklah sobat itulah tutorial cara memasukkan gambar di HTML (tag img). semoga artikel ini menjadi referensi yang bermanfaat untuk menambah pengetahuan sobat. Jangan lupa share dan baca juga artikel tentang HTML menarik lainnya.
0 Response to "Cara Menambahkan/Memasukkan Gambar di HTML (tag img)"
Post a Comment