Attibute Align

Attribute align adalah attribute dalam kode html yang fungsinya berkaitan dengan pengaturan perataan teks dan pengaturan posisi image. Untuk perataan teks, attribute align dapat digunakan pada semua blok elemen html yang bermuatan teks. Anda bisa menggunakan attribute ini pada tag DIV, tag p dan elemen heading (h1 s/d h6).
Attribute align pada teks
  • align="right" » Membuat teks rata kanan.
  • align="left" » Membuat teks rata kiri.
  • align="justify" » Membuat teks rata kanan-kiri.
  • align="center" » Membuat teks rata tengah.
Attribute align pada image
Penggunaan attribute align pada image tak hanya sekedar mengatur posisi image, namun juga berkaitan dengan posisi teks yang digunakan bersama image. Beberapa posisi teks akan menyertai perubahan posisi image.
  • align="right" » Membuat image diposisi kanan dan teks di sebelah kiri.
  • align="left" » Membuat image di posisi sebelah kiri dan teks disisi sebelah kanan.
  • align="top" » Image disisi sebelah kiri dan teks disebelah kanan sejajar dengan terluar bagian atas image.
  • align="bottom" » Image disisi sebelah kiri sementara teks disebelah kanan sejajar dengan sisi terluar bagian bawah image.
  • align="middle" » Image disisi sebelah kiri sementara teks disebelah kanan image sejajar garis tengah horizontal image.

Contoh Penggunaan Align Attribute

<div align="center" style="font:bold 22px Arial;width:450px;padding:10px;margin:20px;background:#eee;color:#222;">Contoh attribute align="center"</div>
<h2 align="right">align="right" - Rata Kanan</h2>
<div style="width:500px;height:140px;background:lightblue;margin:20px auto;font:bold 32px Serif;padding:10px;">
<img align="bottom" src="https://lh5.googleusercontent.com/-4Ky9M5tJohA/UDFIFmjNvqI/AAAAAAAAANY/nJhv22IiXYM/s150/monyet-pakai-kacamata.jpg" width="150" height="140" />
Masa mudaku!
</div>
Beberapa penggunaan attribute align telah disertakan dalam demo di bawah ini. Edit kode untuk mendapatkan beberapa efek berbeda, terutama berkaitan penggunaan teks bersama image.

Please click the button to display. Continue with editing code and click to see the results!

3 komentar:

My ProfileC l o s e

FollowerC l o s e