Kali ini akan saya lanjutkan tutorial mengenai dasar-dasar HTML, yaitu tentang cara memasukkan atau memasang gambar pada halaman web menggunakan skrip HTML. Ada dua pilihan, yaitu memasang gambar sebagai background web atau kita pasang hanya sebagai gambar biasa. Selain itu saya juga akan menjelaskan bagaimana cara untuk mengatur ukuran gambar, letak atau posisinya dan lain-lain. Untuk lebih jelasnya silahkan teman-teman ikuti tutorial di bawah ini.
Siapkan terlebih dahulu gambar atau foto yang akan teman-teman gunakan. Buatkan folder khusus dan copas gambar atau foto tersebut ke dalam folder. Folder ini nantinya akan kita gunakan untuk meletakkan file dan skrip HTML serta gambar agar berada dalam satu folder yang sama. Alasannya, file dengan format HTML harus satu folder dengan file gambar supaya nantinya gambar dapat muncul pada halaman web.
Pertama kita akan pasang gambar sebagai background web.
Buka program Notepad atau Notepad++. Lalu ketik atau copy skrip di bawah ini.
<html>
<head><title>dasarHTML-b</title>
<body>
<body background="dsr_HTML-b.JPG" />
</body>
</html>
Siapkan terlebih dahulu gambar atau foto yang akan teman-teman gunakan. Buatkan folder khusus dan copas gambar atau foto tersebut ke dalam folder. Folder ini nantinya akan kita gunakan untuk meletakkan file dan skrip HTML serta gambar agar berada dalam satu folder yang sama. Alasannya, file dengan format HTML harus satu folder dengan file gambar supaya nantinya gambar dapat muncul pada halaman web.
Pertama kita akan pasang gambar sebagai background web.
Buka program Notepad atau Notepad++. Lalu ketik atau copy skrip di bawah ini.
<html>
<head><title>dasarHTML-b</title>
<body>
<body background="dsr_HTML-b.JPG" />
</body>
</html>
Lalu Save dengan nama dasarHTML-b.html dan pilih Save as Type: All Types (*.*).
Keterangan:
Untuk menampilkan background gambar, kita menggunakan tag <body> dengan menambahkan atribut background, hasil skripnya menjadi <body background="dsr_HTML-b.JPG" />. Dengan “dsr_HTML-b.JPG yang merupakan nama file gambar yang digunakan sebagai background. Ganti “dsr_HTML-b.JPG” dengan nama file gambar milik teman-teman. Jangan sampai salah baik nama maupun format file, supaya gambar dapat muncul dalam halaman web.
Selanjutnya kita akan memasukkan gambar di dalam halaman web, bukan sebagai background web. Jadi kita dapat mengatur ukuran (panjang dan lebar), posisi dan yang lainnya.
Buka kembali skrip di atas menggunakan Notepad. Kemudian edit skrip seperti di bawah ini.
<html>
<head><title>dasarHTML-b</title>
<body>
<body background="dsr_HTML-b.JPG" />
<p align="center"><img src="dsr_HTML-b-a.JPG" width="500px" /></p>
</body>
</html>
Jangan gunakan gambar yang sama, supaya gambar bisa muncul pada halaman web. Tag <p> kita gunakan untuk mengatur posisi gambar, dengan cara menambahkan atribut “align”. Dengan tag tersebut kita hanya bisa mengatur posisi benda di kiri, tengah dan kanan. Selanjutnya, kita gunakan skrip <img src="dsr_HTML-b-a.JPG" width="500px" /> untuk memasukkan gambar pada halaman web. Atur lebar (width) ataupun tingginya (height) sesuai keinginan teman-teman.
Kemudian Save skrip di atas dan cek hasilnya. Misalnya lihat gambar di bawah ini.
Cukup mudah bukan, dengan tutorial dasar ini, saya rasa akan memudahkan teman-teman untuk belajar blogging ataupun desain web. Jadi terus ikuti tutorial dasar lainnya di LensaDunia25.blogspot.com. Terimakasih.
Download Tutorial: Memasukkan_Gambar_pada_Halaman_Web_dengan_Skrip_HTML.pdf
