Cara Mengatur Tampilan Gambar dengan Atribut Align dan Border dalam HTML

Belajar HTML Lanjutan - Atribut Align dan Border dalam tag Image

Pada tutorial dasar html kita sudah bisa memasukan gambar, namun pada tutorial tersebut gambar masih terletak di tempat default. Sekarang dalam tutorial html lanjutan saya akan memakai atribut align untuk megatur letak gambar seperti nilai top, middle, right, alt dan juga atribut relatif address serta penggunaan atribut border pada image.

Atribut align image html

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.

Atribut Border pada Image html

atribut border pada tag image digunakan untuk membuat sebuah garis disekeliling gambar yang kita tampilkan, atribut border memiliki nilai, jika nilainya kita buat besar maka garis pada sekeliling gambar juga akan terlihat besar.

Contoh atribut align + border tag img html

<html>
<body>
<p>
<img src="https://phpdanmysql.com/wp-content/uploads/2018/07/membuat-link-html.jpg" width="144" height="50"> Contoh
penyisipan gambar pakai border nilai 5

<img src="https://phpdanmysql.com/wp-content/uploads/2018/06/logo.png" width="48" height="48" border="5">tinggal 
letakkan tag IMG di bagian yang akan disisipi gambar Secara default atribut align adalah <i><b>bottom</b></i>
</p>
<p>
<img src="https://phpdanmysql.com/wp-content/uploads/2018/06/pengertian-HTML.png" width="60" height="60" align="top">
Atribut align <u>TOP</u>
</p>
<p>
<img src="https://phpdanmysql.com/wp-content/uploads/2018/07/belajar-html-05.jpg" width="60" height="60" align="middle">
Atribut align <u>MIDDLE</u>
</p>
<p>
<img src="https://phpdanmysql.com/wp-content/uploads/2018/07/menambah-gambar-html.jpg" width="60" height="60" align="right">
Atribut align <u>RIGHT</u>
</p>
<p>
<img src="../membuat-form-html.jpg" width="100" height="60" alt="Membuat Form">contoh alt ketika gambar tidak 
tampil. Penggunaan <u>relative address</u> ini tidak akan menampilkan gambar, karena Interaktif editor ini tidak 
bisa menampilkan relatif address.
</p>
</body>
</html>

Dari contoh diatas kita bisa melihat contoh dalam penggunaan atribut align, silakan lihat penjelasan dari semua gambar, dan saya juga membuat atribut border dengan nilai 5, dan lihat pada gambar kedua ada garis hitam yang melingkari gambar.

dari contoh diatas anda pasti sudah paham bagaimana mengatur tampilan gambar dalam html, jika memang belum mengerti juga silakan dikomentar, kolom komentar akan selalu terbuka untuk anda.

Disini saya tidak memperpanjang penjelasan saya karena saya sudah pernah membahas tentang tag image dalam tutorial html dasar. saya yakin anda pasti sudah mengerti fungsi dari tag image tersebut.

Keyword:

  • cara mengatur align di html
  • cara membuat tampilan form date
  • atribut pada align dan valign
  • cara mengatur align html
  • MIDDLE ALIGN ADALAH

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas