Menampilkan Gambar di HTML

Assalamua'laikum wr.wb

Pada kali ini kita akan belajar bagaimana caranya Menampilkan gambar di HTML.

Tujuan dari pembahasan kali ini adalah

  • Memahami format menampilkan gambar 
  • Cara menyajikan format tampilan gambar
Langsung saja teman-teman simak pembahasan berikut:

Landasan Teori


Suatu halaman webiste akan terlihat kaku, terkesan formal, dan akan sedikit terlihat membosankan bila tidak disertai dengan gambar. Kita dapat lihat saat ini, halaman web yang terdapat diinternet, hampir semua memasukan unsur gambar, animasi, bahkan ada yang menambahkan audio serta video tujuannya adalah untuk menarik dan membuat tercengan pengunjungnya.

Cara yang dapat dilakukan untuk memasukan atau menambahkan ke dalam suatu halaman website sangatlah mudah. HTML sendiri telah menyediakan tag khusus untuk keperluan tersebut, yaitu <img>. Tag ini merupakan tag yang tunggal atau tidak memiliki pasangan seperti tag lainnya. Atribut terpenting dari tag ini <img> adalah src (source atau sumber), yang berisi file gambar atau ditektori penyimpanan yang akan ditampilkan ke dalam halaman website.

Setelah memahami teori diatas selanjutnya kita masuk ketahap pembuatan.

Langkah Kerja

  • Silahkan teman-teman buat folder pada drive D:, dengan nama folder nama teman-teman sendiri. Misal: prakweb_NamaSiswa.
  • Buatkan subfolder dengan nama praktikum4 di dalam forder yang sudah teman-teman buat sebelumnya.
  • Buka aplikasi teks editor kalian seperti (notepad++/sublime text)
  • Selanjutnya silahkan simpan elemen-elemen struktur dokumen tersebut dalam format .html
  • Jalankan masing-masing contoh elemen  html tersebut dengan menggunakan web browser.

Percobaan

1. Silahkan buat halaman web sebagai berikut (bentuk umum tag img).

<!DOCTYPE html>
<html>
<head>
<title>Masukan gambar</title>
</head>
<body>
<h2>Personal Computer</h2>
<img src="pc.jpg">
</body>
</html>

Simpan kode html diatas dengan nama img1.html lalu teman-teman buka hasilnya menggunakan web browser. Apabila teman-teman benar dalam penulisannya maka akan tampil seperti halaman berkut:
2. Silahkan buat halaman web sebagai berikut (Memasukan gambar dari folder yang berbeda)

<!DOCTYPE html>
<html>
<head>
<title>Masukan Gambar</title>
</head>
<body>
<h2>Personal Conputer</h2>
<img src="pc.jpg">
<h2>Ethernet Card</h2>
<img src="gambar/ethernet card.jpg">
<h2>Wireless Router</h2>
<img src="../wireless router.jpg">
</body>
</html>

Simpan kode HTML diatas dengan nama img2.hml, lalu teman buka hasilnya dengan mengunnakan web browser. Apabila teman-teman benar dalam penulisannya maka akan tampil seperti halam berikut:
3. Silahkan buat halaman web sebagai berikut (Menggabungkan gambar dan teks)
<!DOCTYPE html>
<html>
<head>
<title>Masukan Gambar</title>
</head>
<body>
<h2>Personal Conputer</h2>
<p><img src="pc.jpg" align="top">Gambar 1 menggunakan align top</p>
<h2>Ethernet Card</h2>
<p><img src="gambar/ethernet card.jpg" align="center">Gambar 2 menggunakan align center</p>
<h2>Wireless Router</h2>
<p><img src="../wireless router.jpg" align="bottom">Gambar 3 menggunakan align bottom</p>
<h2>Access Point</h2>
<p><img src="gambar/access point.jpg" align="left">Gambar 4 menggunakan align left</p>
<h2>Switch</h2>
<p><img src="gambar/switch.jpg" align="right">Gambar 5 menggunakan align right</p>
</body>
</html>

Simpan kode HTML diatas dengan nama img3.html lalu teman-teman buka hasilnya dengan menggunakan web browser. Apabila benar dalam penulisannya maka akan tampil seperti halaman web berikut:
4. Buatlah halaman web sebagai berikut (Mengatur ukuran gambar)
<!DOCTYPE html>
<html>
<head>
<title>Masukan Gambar</title>
</head>
<body>
<h2>Personal Conputer</h2>
<img src="pc.jpg" width="240px" height="160px">
<h2>Ethernet Card</h2>
<img src="gambar/ethernet card.jpg" width="240" height="160">
<h2>Wireless Router</h2>
<img src="../wireless router.jpg" width="160" height="80">
</body>
</html>

Simpan kode HTML diatas dengan nama img4.html lalu teman buka hasilnya dengan menggunakan web  browser. Apabila penulisannya benar maka akan tampil seperti halaman web berikut:

5. Buatlah Halaman web sebagai berikut (Memberi keterangan pada gambar)
<!DOCTYPE html>
<html>
<head>
<title>Masukan gambar</title>
</head>
<body>
<h2>Personal Computer</h2>
<img src="pc.jpg" title="Personal conputer">
</body>
</html>

Simpan kode HTML tersebut dengan nama img5.html lalu teman buka hasilnya dengan menggunakan web browser. Apabila teman benar dalam penulisannya maka akan tampil seberti halaman web sebagai berikut:
Itulah beberapa cara tentang Menampilkan Gambar di HTML, semoga bermanfaat :)

0 Response to "Menampilkan Gambar di HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel