HTML Lanjutan 3: Cara Mengatur Tampilan Gambar Dengan Atribut Align dan Border

0
23

Mengenal Atribut Align pada Tag <img>

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

Sesuai dengan namanya, masing-masing nilai dari atribut align bisa digunakan untuk mengatur tampilan gambar. Berikut adalah contoh kode HTML dengan menggunakan atribut align=”left”pada gambar.

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

Atribut align, gurukomputer.com, welovebet.com

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


Mengenal Atribut Border pada Tag <img>

Atribut border digunakan untuk menambahkan garis tepi (border) kedalam gambar. Nilai dari atribut ini adalah angka yang berisi ukuran lebar garis tepi dalam satuan pixel. Berikut adalah contoh kode HTML dengan menggunakan atribut border=”5” pada gambar:

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

Atribut border, gurukomputer.com, welovebet.com

Penggunaan atribut border secara langsung ke dalam tag <img> memiliki banyak keterbatasan, misalnya kita tidak bisa mengatur warna dan jenis border dari gambar. Pengaturan yang lebih disarankan adalah dengan menggunakan CSS.

LEAVE A REPLY

Please enter your comment!
Please enter your name here