» » » HTML : Menampilkan Gambar pada HTML

HTML : Menampilkan Gambar pada HTML

,
Assalammualaikum Wr. Wb

create-script - hai gaesss....kali ini saya akan sharing mengenai cara menampilkan gambar pada HTML. baik, langsung saja kita bahas....



A. PENDAHULUAN
  • Pengertian
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
  • Latar Belakang
hampir semua website yang telah dipublikasikan menggunakan gambar. suatu website akan terasa kurang menarik jika tidak melibatkan gambar pada dekorasinya
  • Maksud dan Tujuan
  • Hasil yang Diharapkan
dapat menampilkan gambar dengan baik dan benar, serta dapat memahami dalam setiap penggunaan tag <img>.

B. ALAT DAN BAHAN
  • Web Browser
  • Text Editor
C. PEMBAHASAN
  • Menampilkan gambar pada HTML
kita dapat menggunakan tag <img> dan atribut src="" untuk menampilkan gambar pada HTML.

  • Cara Menampilkan Gambar pada HTML
untuk menampilkan gambar pada HTML, kita dapat menggunakan tag <img> sebagai pembukanya. kemudian kita memasukkan atribut src="" untuk memasukkan alamat dimana gambar berada. tag <img> tidak perlu penutup. mungkin jika dikalangan anak muda dapat disebt dengan tag jomblo :). karena hanya memiliki tag pembuka, namun tidak memiliki tag penutup. cara penulisan atribut src adalah dengan memasukkan nama_folder/nama_filenya (jika file gambarnya berada di beda folder dengan file htmlnya). juda dapa menggunakan value namafile. dan juga jika file gambarnya berada diluar sebelum tag HTMLnya kita gunakan value ../nama_folder/nama_file, tanda titik-titik dan slash tergantung berapa jauh jarak file HTML dengan gambarnya.


1. Contoh pertama :ketikkan script berikut :
<!DOCTYPE html>
<html>
<head>
    <title>create-script</title>
</head>
<body>
    <h1>Menampilkan Gambar pada HTML</h1>
    <img src="golinux.png"> <!--satu folder-->
    <img src="gambar/golinux.png"> <!--didalam folder-->
    <img src="../golinux.png"> <!--diluar folder-->

</body>
</html>

kemudian save, dan buka di browser anda, maka hasilnya akan menjadi seperti ini :
sebenarnya gambar diatas ada 3, namun yang 1 tidak dapat dijangkau saat screenshoot

Penjelasan :
tag img adalah sebuah tag pembuka untuk memasukkan gambar, didalam tag src digunakan untuk memasukkan alamat gambar nya, tanda <!-- --> adalah sebuah script yang digunakan untuk memberikan comment(terserah diberi comment atau tidak). gambar pertama sebagai contoh jika ditaruh satu folder bersama file gambarnya. gambar kedua digunakan jika gambar dengan file HTMLnya berada berbeda folder, namun folder untuk menaruh gambar berada bersama file index. gambar ketiga digunakan jika gambarnya berada diluar folder dimana untuk menempatkan HTMLnya, atau dengan kata lain, tidak bersama file HTMLnya.

2. Contoh Kedua. kita ketikkan script berikut
<!DOCTYPE html>
<html>
<head>
    <title>create-script</title>
</head>
<body>
    <h1>Menampilkan Gambar pada HTML</h1>
    <img src="golinux.png" width="300px" height="50px"> <!--satu folder-->
    <img src="gambar/golinux.png" width="350px" height="100px"> <!--didalam folder-->
    <img src="../gambar/golinux.png" width="400px" height="150px"> <!--diluar folder-->

</body>
</html>

kemudian save kembali, dan buka kembali di browser anda, maka hasilnya akan menjadi seperti ini :

Penjelasan :
  1. ada tambahan atribut width dan height.
  2. atribut width digunakan untuk mengatur ukuran gambar (horizontal).
  3. atribut height digunakan untuk mengatur ukuran gambar (vertikal).

D. HASIL YANG DIDAPATKAN
  • Kita dapat menampilkan gambar pada HTML
E. KESIMPULAN
  • Kita dapat menampilkan gambar pada HTML dengan berbagai cara, itu semua tergantung dimana anda meletakkan file gambarnya. karena akan berpengaruh jika anda salah dalam pemanggilan file gambar pada HTML anda

Sekian Sharing saya pada Kesempatan kali ini...semoga Bermanfaat...


Wassalammualaikum Wr.Wb.


Subscribe to: Post Comments (Atom)