Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML

dalam HTML
Hosting Murah Berkualitas

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 :

<html>
<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.

tampilan gambar dengan tag img src dan body background dan div

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

author
Penulis: 
Saya adalah Seorang Blogger yang aktif dan konsen di bidang programming, web design, graphic design dan bisnis online. Saya juga tertarik pada bidang Parenting, Kesehatan dan informasi bermanfaat lainnya.
Cara Posting Artikel Di Website Berbasis WordPress
Cara Posting Artikel Di Website Berbasis WordPress
Pada saat yang lalu saya sudah membahas
Konfigurasi WordPress Yang Penting Untuk Diketahui
Konfigurasi WordPress Yang Penting Untuk Diketahui
Pada kesempatan yang lalu saya sudah membahas
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Bagi anda yang ingin memiliki banyak website
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Langkah pertama yang harus anda lakukan ketika
Cara Membeli Domain Dan Hosting
Cara Membeli Domain Dan Hosting
Salah satu persyaratan untuk bisa memiliki sebuah
Cara Install WordPress Di Localhost Dengan Xampp
Cara Install WordPress Di Localhost Dengan Xampp
Sebagai lanjutan dari pembelajaran membangun website, kali
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Sebelum anda memulai untuk belajar membuat website,
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Pada kesempatan yang lalu saya sudah share
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Kali ini saya akan sharing bagaimana caranya

Beri komentar "Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML"

Baca juga×

Top