Atribut align dan border yang akan kita bahas sebenarnya sudah berstatus ‘deprecated’, yakni tidak disarankan lagi untuk digunakan, dan mungkin tidak akan didukung oleh web browser pada masa mendatang. Pengaturan tampilan gambar sebaiknya menggunakan CSS. Namun sebagai bahan informasi, saya akan tetap membahasnya pada tutorial kali ini.
Mengenal Atribut Align pada Tag <img>
Kita sudah pernah membahas cara memasukkan gambar di HTML. 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. Penggunakan atribut align=”left” :
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h3 id="judul1">Apa itu RuangIlmu</h3>
<p>Ruang Ilmu adalah sebuah blog pribadi yang berguna untuk belajar secara online dan asyik. Pada blog Ruang Ilmu ini akan tersedia berbagai ilmu ilmu yang anda akan dapatkan dengan mudah selain anda belajar di Sekolah tentunya.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawL9evvXydr-k_P7z85Pav4p-tCReZFSvGZjIODbtdbPSWlRHnwWbHmZpgF-oIHQfjrEBNvLvHFn7HCl-pZgce5eTjiWtfecBIk5wh33MJcBzP2W38N_U1L4f-A_rdh668nGkyZIhcg/s1600/Untitled-1.png" alt="logo RuangIlmu" height="100px"
align="left"/>
Pada blog RuangIlmu ini akan menyedia berbagai ilmu ilmu yang akan anda dapatkan, mungkin awal 2018 ini adalah awal pembuatan blog Ruang Ilmu. Sampai akhir 2018 ini Ruang Ilmu akan berusaha sebaik mungkin akan melengkapi ilmu ilmu yang sudah ada pada daftar menu yang sudah tersedia. Anda akan mendapatkan berbagai ilmu yang tersedia seperti Ilmu Pemrograman, Ilmu Sejarah, Ilmu Komputer, Ilmu Blogging, dan Pembahasan Seputar Teori Bumi.
</p>
</body>
</html>
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 penggunaan atribut border=”5” pada gambar:
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h3 id="judul1">Apa itu RuangIlmu</h3>
<p>Ruang Ilmu adalah sebuah blog pribadi yang berguna untuk belajar secara online dan asyik. Pada blog Ruang Ilmu ini akan tersedia berbagai ilmu ilmu yang anda akan dapatkan dengan mudah selain anda belajar di Sekolah tentunya.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawL9evvXydr-k_P7z85Pav4p-tCReZFSvGZjIODbtdbPSWlRHnwWbHmZpgF-oIHQfjrEBNvLvHFn7HCl-pZgce5eTjiWtfecBIk5wh33MJcBzP2W38N_U1L4f-A_rdh668nGkyZIhcg/s1600/Untitled-1.png" alt="logo RuangIlmu" height="100px"
align="right" border="5"/>
Pada blog RuangIlmu ini akan menyedia berbagai ilmu ilmu yang akan anda dapatkan, mungkin awal 2018 ini adalah awal pembuatan blog Ruang Ilmu. Sampai akhir 2018 ini Ruang Ilmu akan berusaha sebaik mungkin akan melengkapi ilmu ilmu yang sudah ada pada daftar menu yang sudah tersedia. Anda akan mendapatkan berbagai ilmu yang tersedia seperti Ilmu Pemrograman, Ilmu Sejarah, Ilmu Komputer, Ilmu Blogging, dan Pembahasan Seputar Teori Bumi.
</p>
</body>
</html>
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.
0 komentar:
Bijaklah saat Anda memberikan komentar atau kritik !!