Apa html yang benar untuk menyisipkan gambar latar belakang?

Table of Contents Show

Mengubah Background Warna HTML CSS
Mengubah Background Gambar HTML CSS
Cara Mengubah Background HTML
1. mengubah warna background HTML
2. Mengubah Background HTML dengan Gambar
Apa HTML yang benar untuk menyisipkan gambar?
Tag HTML IMG memiliki atribut apa saja?
Kenapa gambar tidak bisa muncul di HTML?

Pada tutorial series HTML kali ini Konsep Koding akan berbagi tutorial untuk mengubah Background Warna dan Background Gambar di HTML dengan mudah dan gampang.

Tutorial Mengubah Background Warna/Gambar HTML Mudah

Mengubah Background Warna HTML CSS

Untuk mengatur warna latar belakang dalam HTML, gunakan atribut style. Atribut style menentukan gaya sebaris untuk sebuah elemen. Atribut ini digunakan dengan tag HTML <body>, dengan properti CSS background-color. HTML5 tidak mendukung atribut tag <body> bgcolor, sehingga gaya CSS digunakan untuk menambahkan warna latar belakang. Atribut bgcolor tidak digunakan lagi dalam HTML5.

Hanya perlu diingat, penggunaan atribut gaya menimpa gaya apa pun yang ditetapkan secara global. Ini akan menimpa gaya apa pun yang diatur dalam tag <style> HTML atau lembar gaya eksternal.

Sebelum nya buat file index.html kemdian tambahkan kode di bawah ini :

<!DOCTYPE html>

<html>

<head>

<title>HTML Backgorund Color</title>

</head>

<h1>Hello World</h1>

<p>Mengubah Warna Pada Background HTML</p>

</body>

</html>

Untuk mengubahnya anda hanya perlu menambahkan style="background-color:red;"

Maka hasilnya akan seperti gambar di bawah ini ketika file inde.html anda di buka di browser:

Mengubah Background Gambar HTML CSS

Properti background-image menyetel satu atau beberapa gambar latar belakang untuk sebuah elemen.

Secara default, gambar latar ditempatkan di sudut kiri atas elemen, dan diulang baik secara vertikal maupun horizontal.

Tip: Latar belakang elemen adalah ukuran total elemen, termasuk padding dan border (tetapi bukan margin).

Tip: Selalu atur warna latar yang akan digunakan jika gambar tidak tersedia.

Note: Pastikan gambar dalam satu folder atau path file gambar sudah benar, agar bisa muncul

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("paper.gif");

}

</style>

</head>

<body>

<h1>Gambar background HTML CSSS</h1>

<p>Hello World!</p>

</body>

</html>

Properti yang kita gunakan adalah : background-image: url("paper.gif"); dan gambar bisa berupa gif, png, jpg atau jpeg.

Maka hasilnya akan seprti ini ketika di buka di browser

Untuk gambar dengan URL luar seperti ini :

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg");

}

</style>

</head>

<body>

<h1>Gambar background HTML CSS</h1>

<p>Hello World!</p>

</body>

</html>

Jika anda ingin menggunakan gambar luar anda bisa membuatnya seperti ini : background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg");

Hasilnya akan seperti gambar di bawah ini :

Ok sekian semoga dapat bermanfaat tutorial HTML mengganti background warna dan background gambar pada HTML, sekian dan terimakasih.

Membuat tampilan website yang indah dan menarik adalah tugas seorang designer web, mereka akan berlomba-lomba dan berusaha semaksimal mungkin untuk mendesign website agar terlihat menarik, untuk mendesign web maka seorang designer harus tau cara mengubah background suatu halaman. ini adalah dasar yang perlu dikuasai oleh para design website. Ada berbagai cara dalam mengubah background website, dan umumnya menggunakan CSS atau mengedit manual pada kode HTML itu sendiri. cara mengedit manual pada HTML, adalah cara yang tidak dianjurkan, namun tetap perlu kamu kuasai.

Untuk mengubah background website pada HTML, kita dapat menggunakan Atribut Bgcolor, yang digunakan untuk membuat seluruh background tampil berwarna. Dengan adanya bgcolor ini maka seluruh tag yang ditandai akan berwarna sesuai dengan warna yang kita cantumkan.

Sedangkan, untuk mengubah background menjadi gambar kita hanya perlu mencantumkan atribut Background dan ditambah dengan value url gambar (lokasi gambar).

Cara Mengubah Background HTML

Pertama-tama kita akan membahas tentang cara mengubah background html dengan warna :

1. mengubah warna background HTML

kode atribut yang digunakan adalah sebagai berikut :

bgcolor=”..warna yang dibutuhkan…”;

Jiki kita sisipkan dalam tag <body>, dengan warna merah (red), maka perintahnya akan tampak seperti kode berikut ini:

<html>
<head>
<title> ........<title>
</head>
<body bgcolor="red">

..........

</body>
</html>

Pada kode perintah diatas, kita telah menambahkan atribut bgcolor dengan value red. artinya bahwa halaman tersebut akan berwarna merah. Kita juga dapat menggunakan berbagai warna lainnya seperti “black” dan “yellow”. selain menggunakan kata red ataupun black, kita juga bisa mengisi value dengan kode dari suatu warna.

Untuk mendapatkan kode suatu warna, kita dapat menggunakan software Photoshop, perhatikan gambar berikut ini :

Lihatlah bagian kode yang bertulisan #db28a2 (ini adalah kode yang bisa kita sisipkan dalam HTML Tag), jika kita tuliskan pada atributnya, maka akan tampak seperti bgcolor=”#db28a2″

sekarang, mari kita buat contah lainnya. silahkan buka text editornya, kamu bisa menggunakan notepad ++ ataupun notepad biasa. ketikan kode seperti berikut ini:

<html>
<head>
<title>belajar bgcolor</title>
</head>
<body bgcolor="green">
seperti ini warnanya

</body>
</html>

See also Cara Membuat Form Login dengan HTML Secara Sederhana dan Mudah

Silahkan simpan perintah kode tersebut dengan nama yang anda inginkan, asalkan disertai dengan ekstensi “.html”, misalnya seperti “aku_belajar.html”, setelah itu anda buka dengan browser kesayangan anda, seperti opera min, google chrome, dan sebagainya. kurang lebih akan tampak seperti berikut ini :

Penjelasan dari kode diatas :

<html> merupakan tag awal dari kode html, dan file html ini ditutup dengan kode perintah </html>
<head> merupakan judul dari tab atau halaman yang telah kita buat. dalam tag ini, kita bisa menyisipkan kode CSS, JavaScript, Iklan, tag meta dan sebagainya. tag head ini perlu kita tutup dengan kode </head>.
<title> tag ini merupakan perintah untuk menyatak suatu judul dari halaman. tag ini terletak diantara <head> dan </head>. tag ini ditutup dengan kode perintah </title>
<body> Tag ini dibuat untuk menampilkan isi halaman kepada user, pada tag inilah kita menyatakan suatu konten artikel, recent post, popular post, dan sebagainya. tag ini diakhiri dengan tag </body>
bgcolor=”green” merupakan suatu atribut yang akan menyatakan bahwa tag ini akan berwarna hijau.

2. Mengubah Background HTML dengan Gambar

Selanjutnya kita akan mengubah background HTML dengan suatu gambar. sekali lagi saya katakan bahwa metode ini tidak dianjurkan untuk membuat website yang dinamis, namun jika ingin membuat website statis, bisa saja. kenapa pada website dinamis tidak dianjurkan ? karena saat ini sudah ada CSS yang mampu mendesign halaman menjadi lebih responsif.

peintah yang digunakan untuk mengubah background halaman, hampir sama dengan bgcolor, cuma yang menjadi templatenya adalah suatu foto atau gambar. atribut yang digunakan adalah background. Berikut ini merupakan cara penulisan atributnya :

background=”…lokasi_gambar…”

Pertama yang harus anda siapkan adalah suatu foto atau gambar, simpan foto dalam satu file bersama dengan file html yang kita buat, disini saya menggunakan gambar dengan nama “ari.jpg”. perhatikan gambar berikut ini :

Oke, sekarang kita langsung saja ketikan kode HTML berikut ini :

<html>
<head>
<title>belajar background</title>
</head>
<body background="ari.jpg">

ini potonya jadi template

</body>
</html>

Pada kode tag <body background=”ari.jpg”> lihat kata “ari.jpg”, nah ini merupakan nama dari foto beserta ekstensinya yaitu “.jpg”, anda juga bisa menggunakan poto dengn nama ekstensi “.png” dan lain-lain, intinya anda harus menyesuaikan perintah diatas dengan poto dan ekstensinya.
jangan lupa, simpan gambar bersama dengan file html yang telah tadi kita buat.

See also HTML Troubleshooting - Bullet Point Lists

jika ingin memisahkan Gambar di folder yang berbeda atau lokasi lain juga bisa. pertama buatlah folder, misalnya folder “gambarku”, lalu simpan gambar dalam folder tersebut. setelah itu kamu tinggal ubah kode html tadi menjadi background=”gambarku/ari.jpg”.

Apa HTML yang benar untuk menyisipkan gambar?

Untuk menyematkan gambar pada website, Anda perlu menggunakan tag <img> pada dokumen HTML.

Tag HTML IMG memiliki atribut apa saja?

Atribut Untuk Tag <img>.

src – menentukan alamat lokasi atau url gambar yang akan ditampilkan..

alt – membuat teks alternatif gambar..

width – menentukan lebar gambar..

height – menentukan tinggi gambar..

style – menentukan style atau gaya dari gambar..

Kenapa gambar tidak bisa muncul di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.