Mengatur Tampilan Gambar pada HTML

belajar HTML dan CSS untuk pemula

Pada tutorial HTML dasar mengenai gambar, kita sudah mempelajari cara memasukkan gambar ke dalam HTML. Dalam tutorial HTML lanjutan ini kita akan mengulas 2 buah atribut yang biasa dipakai di dalam mengatur tampilan gambar dalam HTML, yaitu atribut align dan atribut border.

Atribut align dan border yang akan kita bahas sebetulnya telah berstatus ‘deprecated’, yaitu tidak dianjurkan lagi untuk dipakai, dan mungkin tak akan disokong oleh web browser pada masa mendatang. Pengaturan tampilan gambar disarankan memakai CSS. Tetapi sebagai bahan informasi, saya akan tetap mendiskusikannya pada tutorial saat ini.

Mengenal Atribut Align pada Tag <img>

Secara default, gambar akan tampil dengan text berada di sisi bawah gambar. Untuk merubah atau mengatur tampilan gambar dalam HTML, kita dapat menambahkan atribut align ke dalam tag <img>. Atribut align bisa diisi dengan beberapa nilai, yaitu bottom, left, middle, right dan top.

Sesuai dengan namanya, setiap nilai dari atribut align bisa dipakai untuk mengatur tampilan gambar. Berikut ialah contoh kode HTML dengan memakai atribut align=”left” pada gambar.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Infanthree</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di Infanthree.com</h3>
 
<p>Infanthree ialah situs Belajar Ilmu Komputer.
Infanthree didedikasikan bagi kamu yang mau mempelajari
tentang dunia ilmu komputer.
<img src="infanthree.png" alt="gambar infanthree" height="100px"
align="left"/>
Sekarang ini infanthree masih berkonsentrasi kepada tutorial web programming,
seperti Tutorial Belajar HTML, Tutorial CSS, Tutorial PHP,
Tutorial JavaScript, dan Tutorial MySQL.
</p>
 
</body>
</html>

Seperti yang tampak, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Sebagai sarana latihan, kamu bisa mengubah kode diatas dengan mengubah-ubah nilai dari atribut align.

Mengenal Atribut Border pada Tag <img>

Atribut border dipakai untuk menambahkan garis pinggir (border) kedalam gambar. Nilai dari atribut ini merupakan angka yang berisi ukuran lebar garis pinggir dalam satuan pixel. Berikut ialah contoh kode HTML dengan memakai atribut border=”5” pada gambar:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Infanthree</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di Infanthree.com</h3>
 
<p>Infanthree ialah situs Belajar Ilmu Komputer.
<img src="infanthree.png" alt="gambar infanthree" height="100px"
align="right" border="5"/>
Infanthree didedikasikan bagi kamu yang mau mempelajari
tentang dunia ilmu komputer.
Sekarang ini infanthree masih berkonsentrasi kepada tutorial web programming,
seperti Tutorial Belajar HTML, Tutorial CSS, Tutorial PHP,
Tutorial JavaScript, dan Tutorial MySQL.
</p>
 
</body>
</html>

Pemakaian atribut border secara langsung ke dalam tag <img> mempunyai banyak keterbatasan, contohnya kita tidak dapat mengatur warna dan jenis border dari gambar. Pengaturan yang lebih dianjurkan yaitu dengan memakai CSS.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *