Cara Mengatur Posisi Dan Tampilan Gambar Di Html
Monday, February 15, 2016
Add Comment
Pada tutorial sebelumnya Saya telah membahas Cara 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, yaitu atribut
Sebenarnya untuk mengatur tampilan gambar di sarankan memakai CSS, sebab atribut
Menggunakan Atribut
Secara default, gambar akan tampil dengan teks yang berada di bawah gambar.
Contoh arahan HTML menyerupai di bawah ini :
Terlihat pada gambar di atas teks berada di bawah gambar, semoga teks tidak di bawah gambar kita ubah posisi gambarnya dengan menambahkan atribut
Kita akan coba ubah posisi gambarnya menjadi sebelah kiri dengan atribut
Seperti yang terlihat, gambar akan berada di sebalah kiri dan teksnya akan berada di sebelah kanan gambar. Anda juga dapat mengganti nilai dari atribut
Mengenal atribut
Atribut
Kita akan menciptakan gambar mempunyai garis tepi sebesar 10 pixel, berikut ini arahan HTML-nya :
Penggunaan atribut
Pada artikel selanjutnya kita akan mempelajari Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML.
align dan atribut border.Sebenarnya untuk mengatur tampilan gambar di sarankan memakai CSS, sebab atribut
align dan border yang di gunakan secara pribadi ke dalam tag <img> sudah berstatus deprecated, yakni tidak di sarankan lagi untuk di gunakan. Namun sebagai materi informasi, Saya akan tetap akan membahasnya pada tutorial kali ini. Menggunakan Atribut align pada Tag <img>
Secara default, gambar akan tampil dengan teks yang berada di bawah gambar.Contoh arahan HTML menyerupai 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 wacana HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</p> </body> </html>
Terlihat pada gambar di atas teks berada di bawah gambar, semoga teks tidak di bawah gambar kita ubah posisi gambarnya dengan menambahkan atribut
align di tag <img>. Atribut align mempunyai 4 nilai, yaitu left, right, middle dan bottom.Kita akan coba ubah posisi gambarnya menjadi sebelah kiri dengan atribut
align="left". Berikut ini yaitu rujukan 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 wacana HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</p> </body> </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 untuk menambahkan garis tepi di tiap sisi gambar. Nilai dari atribut border yaitu 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 wacana HTML silahkan kunjungi alamat <a href="https://mas-abdi.blogspot.com">https://mas-abdi.blogspot.com</a>.</p> </body> </html>
Penggunaan atribut
border secara pribadi ke dalam tag <img> mempunyai banyak keterbatasan, contohnya menyerupai tidak dapat memberi warna garis tepi sesuai cita-cita kita. Untuk mengatasi duduk kasus tersebut kita dapat memakai CSS.Pada artikel selanjutnya kita akan mempelajari Cara Membuat Link Yang Akan Mengarah ke Bagian Lain Halaman HTML.
0 Response to "Cara Mengatur Posisi Dan Tampilan Gambar Di Html"
Post a Comment