Tutorial HTML Lanjutan: Cara Mengatur Tampilan Gambar di HTML



Halo gan. Di postingan sebelumnya, kita sudah membahas pengertian meta tag dan juga contoh-contohnya.

Apa yang ada di meta tag tidak akan ditampilkan di web browser. Karena meta tag berisi informasi yang ditujukan untuk web browser.

Kali ini, kita akan bahas cara mengatur tampilan gambar di HTML. Ada atribut tambahan yang kita pakai untuk mengatur tampilan gambar. Apa sajakah?

tutorial html lanjutan

Mengatur tampilan gambar di HTML

Kita sudah pernah membahas cara memasukkan gambar di HTML. Tentu masih ingat dong? Atau, jangan-jangan sudah lupa?

Monggo tengok ke belakang lagi di link ini: http://www.aneiqbal.com/2016/11/memasukkan-gambar-di-html.html.

Untuk mengatur tampilan gambar di HTML, ada 2 atribut yang digunakan. Pertama, atribut align. Kedua, atribut border.

Sebenarnya, untuk mengatur tampilan gambar disarankan menggunakan CSS bukan dengan atribut align dan border HTML. Tapi, nggak ada salahnya kan kalau kita bahas? Sebagai bahan informasi.

Yuk kita bahas satu per satu atributnya.

Atribut align pada tag <img>

Atribut align digunakan untuk mengatur posisi gambar dari objek di sekitarnya. Secara bawaan atau default, jika kita memasukkan gambar ke teks, maka teksnya akan berada di bagian bawah gambar.

tutorial html lanjutan

Supaya teksnya tidak dibawah, kita ubah posisi gambarnya dengan atribut align ini. Atribut align punya 4 value atau nilai, yakni: left, top, right, middle, dan bottom.

left akan membuat gambar ada di sebelah kiri teks. right akan membuat gambar ada di sebelah kanan teks. Sesuai dengan nama valuenya.

Kita coba ubah posisi gambarnya menjadi di sebelah kiri. Jangan lupa siapkan gambarnya ya. Dan, masih ingat kan cara memasukkan gambar di HTML?

Kalau lupa, bisa tengok lagi di: Tutorial HTML untuk Pemula: Memasukkan Gambar di HTML.

Kita buat kode HTMLnya.
<!DOCTPYE html>
<html>
  <head>
    <title>Mengatur tampilan gambar di HTML</title>
  </head>
  <body>
    <p>
    <img src="img/logo.png" align="left"/>
    Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal.
    </p>
  </body>
</html>

Kita simpan dengan nama style-img.html. Lalu jalankan.

tutorial html lanjutan

Gambar akan berada di sebelah kiri. Sehingga posisi teksnya juga akan ikut berubah mengisi kekosongan yang ditinggalkan gambar tersebut. Teksnya akan naik.

Monggo dicoba lagi dengan mengganti value atribut alignnya. Supaya lebih kelihatan perubahan-perubahannya.

Sudah?

Terlihat kan perbedaannya?

Kita lanjut ke atribut border.

Baca juga ya..
[Video] Parade Bhinneka Tunggal Ika Rusak Taman Kota
[Video] Kebakaran Hebat Hanguskan Hutan dan Kota, Israel Minta Pertolongan
Tutorial HTML Lanjutan: Pengertian Meta Tag

Atribut border pada tag <img>

Kalau kita menambahkan atribut border pada tag <img>, maka digambarnya akan muncul garis di tiap sisinya. 

Nilai atau value dari atribut border ini berupa angka. Secara default memiliki satuan pixel. Mari kita coba.

Kita coba tambahkan garis setebal 10 pixel pada gambar di atas. Tambahkan atribut border="10" pada kode HTML di atas. Seperti in jadinya,
<!DOCTPYE html>
<html>
  <head>
    <title>Mengatur tampilan gambar di HTML</title>
  </head>
  <body>
    <p>
    <img src="img/logo.png" align="left" border="10"/>
    Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal.
    </p>
  </body>
</html>

Maka, akan muncul garis tepi berwarna hitam di tiap sisi gambar.

tutorial html lanjutan

Berubah kan tampilan gambarnya?

Begitulah cara mengubah tampilan gambar dengan atribut align dan border pada tag <img>. Tapi, lebih disarankan menggunakan CSS untuk mengubah tampilan gambarnya.

Sekian pembahasan kita kali ini. Selanjutnya kita akan bahas cara membuat description list di HTML.



0 Komentar untuk "Tutorial HTML Lanjutan: Cara Mengatur Tampilan Gambar di HTML"