Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website. Keberadaan gambar pada website dapat mempercantik tampilan website. Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
Kebutuhan gambar tadi nantinya 1 buah gambar kita gunakan sebagai background website dan 2 gambar lagi kita gunakan untuk dijadikan sebagai bagian dari konten website anda.
Demi kemudahan pembelajaran ini silahkan ketiga-tiganya dari gambar yang sudah anda siapkan tadi diletakkan pada 1 folder yang sama, agar nanti dalam pemanggilannya anda tidak mengalami kesulitan. Kode HTML yang nanti akan anda buat pun nantinya anda letakkan pada folder tersebut bersama ke 3 gambar yang sudah anda siapkan tadi.
kita misalkan saja nama file gambar anda tadi masing-masingnya adalah sebagai berikut :
kucing.jpg
devil.jpg
belakang.jpg
Pastikan ke 3 gambar tadi sudah anda simpan pada folder yang sama dan usahakan ke 3 gambar tadi formatnya JPEG.
Sebelum kita lanjutkan pada pembahasan prakteknya, saya akan ulas dulu tag-tag HTML yang akan kita gunakan dalam pembelajaran praktek ini. Silahkan disimak dulu penjelasannya dibawah ini.
Menampilkan Gambar Pada Background Website Dengan Tag <Body Background>
Pada materi Tutorial sebelumnya saya sudah memberi anda pembelajaran tentang cara memberi warna pada background website anda, jika anda belum membacanya silahkan baca dulu artikel sebelumnya yang berjudul Memberi Warna Pada Teks Dan Background Halaman Website Dengan HTML. Dengan membaca artikel tersebut nantinya anda akan bisa membedakan bagaimana cara memberi warna pada background website anda dan bagaimana cara menyisipkan gambar pada halaman body website anda.
Agar gambar yang akan digunakan bisa tampil sebagai background halaman website anda, kita akan menggunakan tag <Body Background> ini pada kode HTML yang akan kita buat filenya nanti. Untuk cara penggunaan penulisannya pada kode HTML anda yaitu dengan format :
<Body Background=”nama-file-gambar-anda.jpg“>
Dengan format penggunaan tag <Body Background> diatas tadi maka nanti gambar anda akan ditampilkan sebagai background website anda. Agar nantinya tampilan gambar anda pada background website tidak pecah maka silahkan gunakan gambar yang cukup besar ukurannya, karena nantinya layout background website anda akan terisi full oleh gambar tersebut.
Menampilkan Gambar Pada Halaman Website Dengan Tag <Img Src>
Pada cara yang kedua ini kita akan menampilkan gambar pada halaman website. Anda harus bisa membedakan dengan cara yang pertama tadi. Cara pertama dengan penggunaan tag <Body Background> diatas, maka seluruh layout halaman website akan tertutupi semua oleh gambar jika ukuran gambar itu memang besar ukurannya. Sedangkan cara yang kedua dengan penggunaan tag <Img Src> ini, gambar akan diletakkan pada halaman website tanpa menutup semua halaman website dengan gambar tersebut. Jadi dengan cara yang kedua ini, gambar tadi akan jadi bagian dari objek yang ada pada website, sama seperti text yang kita ketik pada website tersebut.
Contoh cara penggunaan tag <Img Src> ini bisa anda lihat pada contoh dibawah ini :
<IMG SRC=”nama-gambar.JPG”> atau <IMG SRC=”nama-gambar.JPG” width=350 height=200>
Untuk membedakan cara penggunaan ke 2 cara diatas nanti kita lanjutkan dengan praktek, agar anda nanti lebih faham dan lebih mengerti lagi apa perbedaan dari kedua cara tersebut. Namun sebelumnya saya akan menjelaskan dulu tag-tag HTML lainnya yang akan kita gunakan pada Tutorial Pembelajaran Website ini. Silahkan disimak dulu penjelasan berikutnya.
Penggunaan Tag <Div Align> Untuk Format Tata Letak Objek Gambar
Selain penggunaan tag <Body Background> dan tag <Img Src> tadi diatas, kita akan gunakan tag <Div Align> untuk mengatur format tata letak objek gambar tadi. tag <Div Align> ini selain digunakan untuk mengatur format tata letak objek gambar, juga bisa digunakan untuk mengatur format tata letak objek text atau pun objek-objek lainnya yang akan digunakan pada halaman website.
Tag <Div Align> ini digunakan untuk membagi-bagi dokumen yang ada pada HTML dalam suatu hierarki yang terstruktur. Nantinya objek seperti text dan gambar ataupun objek lainnya akan diformat sesuai dengan nilai atribut ALIGN yang ada dalam tag DIV tadi.
Ada beberapa perataan objek yang bisa dilakukan dengan tag <Div Align> ini, yaitu :
<Div Align=”left”> Untuk perataan kiri
<Div Align=”center”> Untuk perataan tengah
<Div Align=”right”> Untuk perataan kanan
Untuk memahami penggunaan ke 3 tag diatas tadi, silahkan anda buka notepad anda, lalu copy paste kode-kode HTML dibawah ini :
<header>
<title>
Menampilkan gambar pada Background dan halaman website Dengan HTML
</title>
</header><body background=”belakang.jpg”><div align=”center”><h1><font color=”red”>Ini Gambar Kucing</font></h><br><IMG SRC=”KUCING.JPG” width=350 height=200>
</div><div align=”center”><h1><font color=”red”>Ini Gambar Devil</font></h><br><IMG SRC=”devil.JPG” width=350 height=200>
</div></body>
</html>
Setelah Notepad anda terisi kode-kode HTML diatas, silahkan save dalam bentuk file HTML. Caranya, setelah mengetik nama file, dibelakangnya di beri tanda titik lalu diikuti kata html dibelakangnya. Untuk jelasnya lihat contoh : nama-file-anda.html
Simpan file HTML anda tadi satu folder dengan ke 3 file gambar yang sudah disebutkan diatas. Jadi didalam folder tersebut harus ada 4 file yaitu file : kucing.jpg, devil.jpg, belakang.jpg, dan file nama-file-anda.html yang baru saja anda buat tadi.
Jika ke 4 file tadi sudah tersedia pada 1 satu folder, maka silahkan klik 2 kali pada file nama-file-anda.html anda untuk melihat tampilannya di website. harusnya tampilannya seperti gambar dibawah ini.
Jika anda belum faham benar dengan langkah-langkah yang saya jelaskan pada artikel ini, maka silahkan anda langsung tonton saja Video Tutorialnya. melalui Link yang dibawah ini. Atau Jika anda ingin melihat semua Video Tutorial Pembelajaran Website lainnya yang sudah saya upload ke youtube, maka silahkan anda kunjungi saja channelnya dengan klik link ini
https://www.youtube.com/channel/UCyHUJtWm75DPmaJ93L5trog
Untuk memudahkan anda mendapatkan Update Video terbarunya, maka silahkan anda klik tombol SUBSCRIBE atau LANGGANAN di channel youtube tadi GRATIS tidak dipungut biaya sepeserpun.
Sedangkan jika anda ingin Memaksimalkan Pengetahuan Tentang Komputer, maka silahkan klik
https://www.youtube.com/channel/UCCN00g4lvoawk5tWsU-_syA
Jangan lupa klik tombol SUBSCRIBE nya untuk ber LANGGANANGRATIS di channel youtube KE-2 saya ini untuk memudahkan anda mendapatkan UPDATE VIDEO TERBARU dari saya.
Saya cukupkan sekian dulu artikel dari saya yang berjudul Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML ini. Silahkan praktekkan sendiri sesuai dengan langkah-langkah yang sudah saya berikan pada artikel dan video tutorial yang sudah saya bikin. Untuk melihat video saya yang lainnya, silahkan kunjungi langsung di channel youtube saya Belajar Website Cara Peterwebs.com. Sekian semoga bermanfaat.
Tags: #belajar html #kode html #membangun website #tutorial website #web design
Kiriman Terkait "Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML"
