Cara Mengatur Posisi Dan Tampilan Gambar Di Html - Calon Teknisi | Free Download BIOS

Calon Teknisi | Free Download BIOS

Free download BIOS, Schematic, Boardview & Kursus Teknisi Laptop Online Interaktif.

Cara Mengatur Posisi Dan Tampilan Gambar Di Html

Share This
Pada tutorial sebelumnya Saya telah membahas Trik Memasukkan Gambar di HTML. Dalam tutorial kali ini Saya akan membahas 2 buah atribut yang sering di gunakan dalam mengatur posisi dan tampilan gambar di HTML, ialah atribut align dan atribut border.

Sebenarnya untk mengatur tampilan gambar di sarankan memakai CSS, sebab atribut align dan border yang di gunakan setips pribadi ke dalam tag <img> sudah berstatus deprecated, yakni tidak di sarankan lagi untk di gunakan. Namun sebagai materi informasi, Saya akan tetap akan membahasnya pada tutorial kali ini.

Menggunakan Atribut align pada Tag <img>

Setips default, gambar akan tampil dengan teks yang berada di bawah gambar.

Contoh arahan HTML ibarat di bawah ini :

<!DOCTYPE html> <html> <head>  <title>Belajar HTML</title>  <meta charset="utf-8"/> </head> <body>  <h2>Saya Sedang Belajar HTML</h2>    <p>Kali ini Saya sedang berguru HTML di blog .</p>  <img src="Abdi.png"/>  <p>Nah, bagi Anda yang ingin berguru ihwal HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</p> </body> </html>

Pada tutorial sebelumnya Saya telah membahas Trik Memasukkan Gambar di HTML Trik Mengatur Posisi dan Tampilan Gambar di HTML

Terlihat pada gambar di atas teks berada di bawah gambar, agar teks tidak di bawah gambar kita ubah posisi gambarnya dengan menambahkan atribut align di tag <img>. Atribut align mempunyai 4 nilai, ialah left, right, middle dan bottom.

Kita akan coba ubah posisi gambarnya menjadi sebelah kiri dengan atribut align="left". Berikut ini adlah pola tag <img> yang memakai atribut align="left"; :

<!DOCTYPE html> <html> <head>  <title>Belajar HTML</title>  <meta charset="utf-8"/> </head> <body>  <h2>Saya Sedang Belajar HTML</h2>    <p>Kali ini Saya sedang berguru HTML di blog .</p>  <img src="Abdi.png" align="left"/>  <p>Nah, bagi Anda yang ingin berguru ihwal HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</p> </body> </html>

Pada tutorial sebelumnya Saya telah membahas Trik Memasukkan Gambar di HTML Trik Mengatur Posisi dan Tampilan Gambar di HTML

Seperti yang terlihat, gambar akan berada di sebalah kiri dan teksnya akan berada di sebelah kanan gambar. Anda juga dapat mengganti nilai dari atribut align dengan nilai right, middle dan bottom sebagai sarana latihan.

Mengenal atribut border pada Tag <img>

Atribut border di gunakan untk menambahkan garis tepi di tiap sisi gambar. Nilai dari atribut border adlah angka dalam satuan pixel.

Kita akan menciptakan gambar mempunyai garis tepi sebesar 10 pixel, berikut ini arahan HTML-nya :

<!DOCTYPE html> <html> <head>  <title>Belajar HTML</title>  <meta charset="utf-8"/> </head> <body>  <h2>Saya Sedang Belajar HTML</h2>    <p>Kali ini Saya sedang berguru HTML di blog .</p>  <img src="Abdi.png" border="10"/>  <p>Nah, bagi Anda yang ingin berguru ihwal HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</p> </body> </html>

Pada tutorial sebelumnya Saya telah membahas Trik Memasukkan Gambar di HTML Trik Mengatur Posisi dan Tampilan Gambar di HTML

Penggunaan atribut border setips pribadi ke dalam tag <img> mempunyai banyak keterbatasan, contohnya ibarat tidak dapat memberi warna garis tepi sesuai cita-cita kita. Untuk mengatasi msumberah tersebut kita dapat memakai CSS.

Pada article selanjutnya kita akan mempelajari Trik Membuat Link Yang Akan Mengarah ke Bagian Lain Halman HTML.
Sumber https://mas-abdi.blogspot.com/

No comments:

Post a Comment