FORMAT TAMPILAN GAMBAR
Assalamualikum Wr.Wb
Kali ini saya akan menjelaskan bagaimana coding Menyajikan
Format Tampilan Gambar. Karena suatu halaman web akan terlihat kaku,
terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar.
1.
1. Menggabung Gambar dan Teks
Jika
kita ingin menggabungkan atau menyisipkan gambar di dalam suatu teks atau
paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan:
Secara
vertikal:
·
Teks bisa berada
sejajar dengan bagian atas gambar
·
Teks bisa berada
sejajar dengan bagian tengah gambar
·
Teks bisa berada
sejajar dengan bagian bawah gambar
Secara horizontal:
·
Gambar
bisa berada di bagian kiri teks/paragraph
·
Gambar
bisa berada di bagian kanan teks/paragraf
Untuk posisi gambar yang dilihat dari arah vertikal dapat ditentukan
dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang
terdapat pada tag <img>.
Contoh hasil dokumen HTML di Web Browser seperti gambar
berikut :
Coding :
<html>
<head>
<title>Tugas Siti Salbiah</title>
</head>
<h1>Menggunakan Gambar dan Teks, posisi terhadap teks
<br> secara vertikal </h1>
<body>
<p><img src="E:\pweb\komputer.png"
width=150 align=Top>Komputer 1 (menggunakan align=TOP)</img>
<p><img src="E:\pweb\komputer.png"
width=150 align=MIDDLE>Komputer 2 (menggunakan align=MIDDLE)</img>
<p><img src="E:\pweb\komputer.png"
width=150 align=BOTTOM>Komputer 3 (menggunakan align=BOTTOM)</img>
Gambar Coding di
Notepad++
Adapun untuk posisi gambar yang
dilihat dari arah horisontal ditentukribut an dengan mengisi nilai LEFT dan
RIGHT kedalam ALIGN pada tag <img>. Dengan mengisi atribut tersebut
dengan nilai LEFT maka gambar akan berada di sebelah kiri teks. Sebaliknya,
jika diisi RIGHT akan menyeabkan posisi gambar akan berada di sebelah kanan
teks.
Contoh hasil dokumen HTML di Web Browser seperti gambar
berikut :
Coding :
<html>
<head>
<h1>Menggunakan Gambar dan Teks, posisi terhadap teks
secara horisontal </h1>
<body>
<p><img src="E:\pweb\komputer.png"
width=100 align=LEFT>Komputer 1 (menggunakan align=LEFT)</img></p>
<p><img src="E:\pweb\komputer.png"
width=100 align=RIGHT>Komputer 2 (menggunakan
align=RIGHT)</img></p>
</body>
</head>
</html>
Gambar coding di
Notepad++
1.
2. Memberi Keterangan Pada Gambar
Agar
lebih terkesan informatif, anda dapat memberikan keterangan yang relevan dan
seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan pada halaman
web. Keterangan ini akan muncul dalam bentuk tooltip ( sesaat, hanya beberapa
detik) pada saat penunjung mengarahkan kursor (penjujuk mouse) ke atas gambar.
Untuk membuat keterangan semacam ini, kita
dapat menggunakan atribut TITLE maupun ALT pada tag <img>.
Contoh hasil dokumen HTML di Web Browser
seperti gambar berikut :
Pada gambar di atas dapat dilihat bahwa keterangan gambar
terlihat pada saat mouse di atas gambar, di sana tertulis “Komputer Desktop”
sebagai keterangan gambar.
Coding :
<html>
<head>
<title>Komputer salbiah</title>
</head>
<body>
<h1>Menyajikan Format Gambar Dengan
Keterangan</h1>
<img src="E:\pweb\komputer.png"
title="komputer dekstop"/ width=500>
</body>
</html>
Gambar
coding di Notepad++
Sekian dulu dari penjelasan saya, mohon maaf jika ada
kesalahan dalam penyampaian tulisan, semoga materi yang saya beri kali ini
bermanfaat untuk kalian semua. Terimakasih sudah mengunjungi blog saya, mohon
kritik dan saran nya yaa…. J
Wassalamualaikum wr.wb.
Komentar
Posting Komentar