Dasar HTML: Cara Menambah Gambar di HTML ( Tag img )
Belajar kali ini mengenai HTML dasar selanjutnya yaitu Cara Menambah Gambar pada HTML, kita sering melihat berbagai Halaman Web HTML yang memiliki sebuah gambar, Bagaimana sih cara menambahkan gambar tersebut? Gambar tersebut bisa kita tambahkan dengan tag image yaitu <img>, tetapi kalau hanya tag <img> aja belum bisa, kita masih perlu atribut di dalamnya yakni src.
 |
| Cara Menambah Gambar di HTML |
Penggunaan Atribut src dalam tag <img>
Apakah kalian tau apa itu src? Src ini kepanjangan dari source yakni bisa disebut sumber atau sumber gambar yang berisi alamat dari gambar yang akan kita tampilkan. Gambar yang akan di tampilan bisa berupa JPEG, PNG maupun GIF, letakan gambar pada folder Kode HTML nya, jadikan dalam satu folder. Contoh kode HTML dalam penggunaan tag <img> sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>MamiGoNet</title>
</head>
<body>
<h1>Ini Logo MamiGoNet</h1>
<img src="mamigonet.jpg" />
</body>
</html>
Kode di atas meruapakan contoh penggunaan tag <img>, perlu di ingat tag <img>ini tidak memiliki elemen jadi langsung di tutup menggunakan />. Untuk hasil dari Kode di atas sebagau berikut:
Mengatur Ukuran Gambar Pada HTML
Untuk mengatur besar kecilnya gambar yang kita tambahkan ke halaman HTML, kita hanya perlu menambahkan Atribut Width dan Height, berikut ini contoh Kode HTML yang menggunakan Atribut width dan height pada tag <img>.
<!DOCTYPE html>
<html>
<head>
<title>MamiGoNet</title>
</head>
<body>
<h1>Ini Logo MamiGoNet</h1>
<img src="mamigonet.jpg" width=”500” height=”300” />
</body>
</html>
Hasil dari kode di atas sebagai berikut:
Gambar di atas adalah contoh hasil penggunaan Atribut Widht dan Height, bisa anda lihat sendiri gambar menjadi lebih besar, untuk angkat 500 pada width dan angka 300 pada height bisa anda rubah sesuka anda tergantung anda mau bikin gambarnya sebesar bagaimana. Mungkin itu saja tunggu artikel lainnya tentang belajar HTML, semoga bermanfaat Terima Kasih.
0 Response to "Dasar HTML: Cara Menambah Gambar di HTML ( Tag img )"
Posting Komentar