Pada tutorial HTML dasar tentang gambar, kita telah mempelajari cara memasukkan gambar ke dalam HTML. Dalam tutorial HTML lanjutan ini kita akan membahas 2 buah atribut yang sering digunakan di dalam mengatur tampilan gambar dalam HTML, yaitu atribut align dan atribut border.
Mengenal Atribut Align pada Tag <img>
Secara default, gambar akan tampil dengan text berada di sisi bawah gambar. 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.
Sesuai dengan namanya, masing-masing nilai dari atribut align bisa digunakan untuk mengatur tampilan gambar. Berikut adalah contoh kode HTML dengan menggunakan atribut align=”left” pada gambar.
<!DOCTYPE html> <html> <head> <title>Belajar HTML di Duniailkom</title> </head> <body> <h3 id="judul1">Saya sedang belajar HTML di Duniailkom.com</h3> <p>Duniailkom adalah situs Belajar Ilmu Komputer. Duniailkom didedikasikan bagi anda yang ingin mempelajari tentang dunia ilmu komputer. <img src="duniailkom.png" alt="gambar duniailkom" height="100px" align="left"/> Saat ini duniailkom masih berfokus kepada tutorial web programming, seperti Tutorial Belajar HTML, Tutorial CSS, Tutorial PHP, Tutorial JavaScript, dan Tutorial MySQL. </p> </body> </html>
Seperti yang terlihat, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Sebagai sarana latihan, anda bisa merubah kode diatas dengan mengubah-ubah nilai dari atribut align.
Mengenal Atribut Border pada Tag <img>
Atribut border digunakan untuk menambahkan garis tepi (border) kedalam gambar. Nilai dari atribut ini adalah angka yang berisi ukuran lebar garis tepi dalam satuan pixel. Berikut adalah contoh kode HTML dengan menggunakan atribut border=”5” pada gambar:
<!DOCTYPE html> <html> <head> <title>Belajar HTML di Duniailkom</title> </head> <body> <h3 id="judul1">Saya sedang belajar HTML di Duniailkom.com</h3> <p>Duniailkom adalah situs Belajar Ilmu Komputer. <img src="duniailkom.png" alt="gambar duniailkom" height="100px" align="right" border="5"/> Duniailkom didedikasikan bagi anda yang ingin mempelajari tentang dunia ilmu komputer. Saat ini duniailkom masih berfokus kepada tutorial web programming, seperti Tutorial Belajar HTML, Tutorial CSS, Tutorial PHP, Tutorial JavaScript, dan Tutorial MySQL. </p> </body> </html>
Penggunaan atribut border secara langsung ke dalam tag <img> memiliki banyak keterbatasan, misalnya kita tidak bisa mengatur warna dan jenis border dari gambar. Pengaturan yang lebih disarankan adalah dengan menggunakan CSS.
mudah mudahan Duniailkom tambah maju sukses selalu. amin..
Amiin.. terimakasih tarwo, mudah-mudahan tutorial ini bisa bermanfaat… :)
sangat bermanfaat…teruslah membagikan ilmu…sukses trus Duniailkom
Terimakasih jofny… Salam sukses juga… :)
kalau gambar di tengah?
Kalau gambar ditengah, biasanya gambarnya tampil tersendiri (tanpa ada text di sisi kiri dan kanan). Untuk hal ini kita bisa menggunakan kode HTML menggunakan tag <center>:
Tetapi penggunaan tag <center> tidak disarankan lagi, karena itu kita bisa menggunaan CSS:
mudah2an bisa membantu :)
sangat membantu bro, semoga makin sukses. ijin untuk berlangganan
salam dari bali :v
mantap mas bos
mas kalau ingin gambar nya ditimpa teks bagaimana ya, karena ketika saya letakkan logo di footer bawah, conten disampingnya malah ada jarak 'enter' sebesar ukuran logo tersebut. dan bagaimana supaya itu tidak terjadi. terima kasih
Cara memasukan tiga gambar yang sejajar tanpa menggunakan tabel bagaimana kak?
misal gambar mau dimasukan di sebelah kiri, tengah dan kanan dan semuanya sejajar.
terima kasih.
Maksudnya sejajar disini secara horizontal ya? (dalam baris yang sama).
Untuk membuat gambar ada di sebelah kiri dan kanan, bisa menggunakan property float dari CSS. Contohnya sebagai berikut:
Tetapi untuk menambahkan 1 gambar lagi ditengah-tengah keduanya agak susah. Kita harus mengakalinya dengan menambahkan sebuah container baru (tag <div>). Berikut contohnya:
kalau mau nambah komentar pada masing masing gambar gmna ya kak
klo mau masukin lagu gimana om?
kaya gini tagnya..
<audio controls>
<source="alamat lagu.format lagu" type="audio/format lagu" >
</audio>
———————————————-
=> contoh :
<audio controls>
<source="media/coldplay.mp3" type="audio/mp3">
</audio>
lebih lengkapnya silahkan searching aja….
gan.. secara default kan tampilan pemutar audionya di kiri kan yah.. nah kalo misal kita ingin di tengah gimana tuh gan..? :)
Selamat pagi,gan,bgmna caranya supaya foto di dalam poatingan letaknya sejajar horisontal?
Terima kasih
Kalau mau nampilin gambar sumbernya dari photo profil FB gimana ya ?
Bisa pakai kode berikut:
<img src=”http://graph.facebook.com/belajar.duniailkom/picture?type=large” />
ganti bagian “belajar.duniailkom” dengan nama fb user yang ingin ditampilkan gambarnya.
Semoga bisa membantu :)
Maaf admin mengganggu, kegunaan alt disini untuk apa?
Bisa langsung kesini mas, sudah saya bahas soalnya: Belajar HTML Dasar : Cara Menambahkan Gambar di HTML
Sungguh menyenangkan belajar disini materi dan penyampaiannya sangat mudah di mengerti,
Semoga dunia ilkom menjadi situs belajar web progreming/designer terbaik berbahasa idonesia
Amiin… terimakasih mas. Saya juga senang tutorialnya bisa mudah dipahami :)
Mas Andre mau tanya.
cara mengatur posisi gambar ditengah secara vertical bagaimana ya?
misalkan parent memiliki height 100px, sedangkan tinggi gambar hanya 30px.
Untuk membuat posisi center vertikal memang agak susah mas, pakai CSS sekalipun. Biasanya ini diatur manual dengan property css box model seperti height, padding, dan margin. Tinggal dihitung berapa jarak yang ingin dibuat.
Cara mengatur tinggi lebarnya gambar gimana????
Bisa pakai atribut width dan height gan, misalnya:
<img src="koala.jpg" height="200" width="100" />
Lebih lengkapnya bisa ke: https://www.duniailkom.com/belajar-html-cara-menambahkan-gambar-di-html-tag-image/
Mantab.. Pembahasan yang menarik
<table border='5'> Sama <table border='5px'> Bedanya Apa Yah Angka Dengan Pixel
Sama saja gan, web browser akan menganggap angka 5 atau 5px sebagai 5 pixel. Bahkan beberapa web browser bisa ditulis seperti ini: <table border='5panjangnya'>. Teks setelah angka akan diabaikan (dianggap 5 pixel).
Artikel yang sangat bermanfaat, sukses terus maju terus Pak Andre :)
yang halaman ini g ada judul selanjutnya min
Artikel ini terpisah gan, jadi g ada part selanjutnya (sudah selesai di artikel ini saja). Tutorial lain akan membahas topik yang lain juga, jadi sengaja tidak saya cantumin judul selanjutnya.
salut gan, tutorial berbobot + admin responsif.
Siip gan, semoga bisa bermanfaat :)
belajar web programing di duniailkom sungguh menyenangkan
terimakasih mas atas ilmunya
Sama2 gan, semoga bisa bermanfaat…
udah ngutak atik blog sendiri sampe nyerah mau edit template, penjelasannya susah dimengerti. dan mulai search lagi ngutak atik ketemu postingan ini, akhrinya dapet juga sela nya, thanks membantu
Siip gan, semoga sukses dengan templatenya…
kalau menghilangkan spasi di atas gambar gmn mas? thx
Biasanya itu sudah pakai CSS gan, menggunakan property margin untuk mengatur lebar spasi. Bukan dari HTML lagi kita ngubahnya….
min, kalo kita mau taro image nya di kanan atas (align diisi dengan 2 nilai) bisa ga??
G bisa gan. Harus menggunakan CSS kalau pengen seperti itu.
Maap pak klu link kan suka ada sub menu kodingnya gmn contoh link pelamar sub menunya contoh nama,lulusan.almt.trims
Pembuatan coding seperti itu bisa makan waktu cukup lama. Saran saya sebaiknya agan mulai belajar HTML dan CSS dari awal agar bisa membuat sendiri. Atau mudah2an ada rekan2 lain yang bisa bantu.
Gan kalo cara agar gambar background ditiban ama gambar lgh gimana gan … Jadi background saya juga gambar , jadi gmbar di atas gambar gitu gan gimana ?
Bisa gan, tapi ini sudah bagiannya CSS. Gambar pertama bisa diinput menggunakan tag <img> biasa, untuk gambar background diinput dari CSS menggunakan property background-image.
Boleh minta kode css nya gk gan .. Kebetulan itu yg di atas pertanyaan saya
Gimana cara menaruh foto di deface ini gan?
bg saya mau nanya, kalo seandainya kode htmlny gmana ya saya mau menyusun gambar berderet secara horizontal, 20 atau 30 gambar dlm satu halaman, kode dasarnya biar bisa sejajar gmana ya, thanks
Mengenai tampilan, sudah gabungan HTML dan CSS, tidak bisa dari HTML saja. Jadi ada baiknya belajar CSS lagi.
Contoh menyusun gambar berderet bisa kesini: https://www.duniailkom.com/tutorial-belajar-css-membuat-gallery-gambar-dengan-html-dan-css/
belum terlalu paham, saya mau belajar bg, sekarang masih copas dari yg lain kode2 nya, terimakasih, nnti saya baca2 dulu bg, web nya sangat membantu untuk pemula
Mantaapp berguna bgt postingan nya thx sudah share
ilmunya mas admin
Siip, semoga bisa bermanfaat…
Kak, mau bertanya ini, jika kita pasang logo, dan logo itu terlalu ke bawah itu bagaimana cara setelnya yah kak? mohon diajarin kak :)
Untuk utak-atik tampilan harus menggunakan CSS, terutama tentang box model seperti margin, padding, width, dll. Jadi silahkan lanjut belajar CSS…
Mas mau tanya nih, itu fungsi atribut "id=judul1" yang berada di tag "<h3>" apa yah?
Saya coba ngikutin tapi kok ga tampil di browser.. Makasih mas sebelumnya
Atribut id itu baru berfungsi jika dikombinasikan dengan kode CSS atau JavaScript. Karena dalam contoh ini tidak ada kode CSS maupun JavaScript, atribut id itu tidak berefek apa2 (dihapus pun g ada masalah).
Kenapa teks nya malah menyamping tidak kebawah seperti yang di atas.kalau menggunakan <p>seiap kalimat terlalu renggang ,gimana caranya supaya teks kebawah mas
Apakah kodenya bergabung dengan kode2 lain (misalnya di blog)? Kalau iya, itu sudah dipengaruhi oleh kode CSS yang ada di blog dan templatenya.
bg fungsing id setelah h3 ini apa ya bg?
yg tertera di bawah ini bg.
<h3 id="judul1">
Oh ya, dalam contoh ini bisa dibilang atribut id itu tidak berfungsi apa2 (dihapus pun g ada masalah). Atribut id itu baru berfungsi jika dikombinasikan dengan kode CSS atau JavaScript.
tapi kalo mau di taro di center, gunain <div> juga bisa kan ya bang?
kalau buat gambar menjadi tranfaran dan ada texs ,trus kalau di klik jadi terang bagaimana caranya?
Untuk membuat yang seperti itu lumayan rumit dan perlu gabungan CSS dan JavaScript. Konsep dasarnya bisa baca2 kesini: http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/
min, koq atribut Align & Border tidak aktif ya?
Barusan saya test masih aktif… Tapi kalau kode diatas dipakai untuk blog yang sudah jadi (seperti blogspot atau wordpress), maka hasilnya bisa bentrok dengan kode2 yang sudah ada.
Selain itu untuk tampilan design seperti ini sebaiknya dibuat pakai CSS, bukan dari atribut HTML.
tanya min?kalau agar gambar bisa ditimpa text gimana
terimakasih?
Untuk yang seperti itu harus pakai CSS. Idenya, gambar di tempatkan sebagai background dari sebuah element (dengan property background-image di CSS), lalu teks ditulis ke dalam element seperti biasa.
Contoh: <div style="background-image:panda.jpg">Teks disini</div>
kak mau tanya untuk mensejajarkan boder supaya bisa bersebelahan menggunakan perintah apa yaa?
terimakasih
kak aku mau nanyo dong soalny masih baru belajar
kak misal kita ngirim file html nya ke hp tapi di html nya tuh ada gmbar
kenapa kita gak bisa buka gambar nya di hp ya, apa emng beneran gak bisa dari sananya
minta penjelasannya dong kak :)
kok disaya textnya ketiban sama gambarnya ya mas?
ralat, ternyata ga ketiban hehe. tapi kok punya saya gambarnya bener2 disamping tulisannya kata pertama ya? kalo dr contoh kan posisinya ada dibawah kiri tulisannya
Kemungkinan karena teks yang ada kurang banyak. Bisa test kecilkan jendela web browser, atau perbanyak teks yang ada diantara gambar. Ukuran gambar juga ikut mempengaruhi hasil yang didapat.
Itu ada atribut id didalam tag heading, artinya apa ya mas andre?