Cara Menyisipkan Gambar Di Web Dengan HTML

Zona Internetku No Comment November 28, 2018

Cara Menyisipkan Gambar Di Web Dengan HTML. Gambar adalah salah satu file multimedia yang bisa ditampilkan dalam web, baik itu untuk mempercantik tampilan web ataupun untuk konten artikel pada web dengan menggunakan tag <img> dan atribut src. Tag <img> memiliki arti image alias gambar, sedangkan src adalah source yang berarti sumber gambar.

Baca juga :
Cara Membuat Berbagai Macam HyperLink HTML Di Web
Mengatur Posisi Paragraf Dengan HTML Dan CSS
Mengatur Heading Dan Format Text Web Menggunakan HTML

Untuk sebagai bahan pembelajaran, kalian harus menyiapkan gambar yang berformat .JPG .JPEG .PNG ataupun .GIF dan letakkan dalam satu folder dengan file html kita nanti

<html>
<head>
<title>Menyisipkan Gambar</title>
</head>
<body>
<img src="Penguins.jpg"/>
</body>
</html>

Coba kalian perhatikan tag <img> karena tidak memiliki sebuah elemen maka kita harus menggunakan tanda /> sebagai penutup tag tersebut
Sekarang kalian simpan kode tersebut menjadi satu folder dengan file gambar tadi dan lihatlah hasilnya dengan browser kalian, maka hasilnya akan seperti berikut

Cara Menyisipkan Gambar Di Web Dengan HTML

Mengatur Ukuran Gambar

Pada dasarnya tag <img> akan menampilkan gambar dengan ukuran asli gambar tersebut, namun kita juga dapat mengatur ukuran gambar sesuai dengan kebutuhan kita sendiri menggunakan atribut width yang berguna untuk mengatur lebar dan height untuk mengatur tinggi gambar. Sebagai contohnya lihat kode berikut

<html>
<head>
<title>Menyisipkan Gambar</title>
</head>
<body>
<img src="Penguins.jpg" width="170px" height="250px"/>
</body>
</html>

Sebenarnya kita dapat menggunakan salah satu dari atribut tersebut baik hanya menggunakan width ataupun height saja, karena dengan menggunakan salah satu atribut saja maka atribut lainnya akan melengkapi secara otomatis sehingga ukuran gambar yang akan ditampilkan akan proporsional dengan gambar aslinya.
Jika kalian menggunakan kedua atribut tersebut maka ukurannya akan dipaksa sesuai dengan value (isi) yang ada didalam atribut tersebut shingga gambar yang akan dimuat bisa saja tidak proporsi lagi dengan gambar asli

Menambahkan Atribut Alt Dan Title Pada Gambar

Atribut alt berarti alternatif deskripsi, merupakan atribut yang juga tak kalah penting dengan atribut lainnya ketika menginputkan gambar, karena atribut alt akan menampilkan sebuah deskripsi apabila gambar yang akan dimuat pada browser tidak tampil maka atribut alt akan memunculkan deskripsi gambar tersebut. Hal ini akan membuat mesin pencari lebih mudah memahami isi konten website kalian.
Atribut title atau judul, kita juga dapat memberikan sebuah judul pada gambar kita sehingga seseorang yang tidak mengetahui maksud dari gambar tersebut bisa mengetahui melalui judul dengan saat mereka meletakkan kursor mereka di area gambar.

<html>
<head>
<title>Menyisipkan Gambar</title>
</head>
<body>
<img alt="Gambar Pinguin" title="Pinguin Berkumpul" src="Penguins.jpg" width="170px" height="250px"/>
</body>
</html>

Cara Mengatur Posisi Gambar Di HTML Menggunakan Atribut Align

Secara default gambar yang kita upload akan berada di sisi kiri dan apabila disandingkan dengan teks maka terlihat berantakan karena posisi teks tidak bisa sejajar dengan gambar, sebenarnya kita juga dapat mengatur posisi gambar pada web kita dengan menggunakan atribut align supaya terlihat rapi. Dan berikut ini adalah contoh penggunaan atribut align pada gambar

<html>
<head>
<title>Menyisipkan Gambar</title>
</head>
<body>
<img alt="Gambar Pinguin" title="Pinguin Berkumpul" src="Penguins.jpg" width="270px" align="right"/>
Zona Internetku merupakan situs web untuk mendapatkan tutorial dan informasi mengenai dunia teknologi seperti komputer, gadget dan masih banyak lagi
</body>
</html>