Cara membuat background header di html

Style the header with a large padding, centered text, a specific background-color and a big sized text:

Example

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Artikel ini disusun oleh tim penyunting terlatih dan peneliti yang memastikan keakuratan dan kelengkapannya.

Tim Manajemen Konten wikiHow memantau hasil penyuntingan staf kami secara saksama untuk menjamin artikel yang berkualitas tinggi.

Artikel ini telah dilihat 107.071 kali.

Kalau Anda ingin menambahkan gambar pada halaman web, yang dibutuhkan hanyalah HTML. Jika ingin menetapkan gambar sebagai latar belakang halaman web, Anda membutuhkan HTML dan CSS. HTML merupakan singkatan dari Hypertext Markup Language dan merupakan kode yang memberi tahu peramban apa yang perlu ditampilkan pada halaman web. CSS merupakan singkatan dari Cascading Style Sheets dan digunakan untuk mengubah tampilan dan tata letak halaman web. Anda akan perlu menyiapkan gambar latar belakang yang ingin digunakan pada halaman web.

1. Buat folder untuk menampung berkas HTML dan gambar latar belakang. Di komputer, buat dan beri nama folder yang nantinya bisa ditemukan dengan mudah.

   • Anda bebas memberi nama folder, tetapi ketika berurusan dengan HTML, sebaiknya biasakan memberi nama berkas dan folder berupa satu kata singkat yang mudah dikenali.

2. Letakkan gambar latar belakang ke folder HTML. Masukkan gambar yang ingin Anda gunakan sebagai latar belakang ke folder HTML.

   • Anda bisa menggunakan gambar dengan resolusi yang lebih tinggi kalau terlalu memedulikan keramahan situs terhadap koneksi internet yang lamban. Gambar sederhana dengan pola cerah dan repetitif juga bagus supaya Anda masih bisa membaca tulisan di latar depan.

   Tip: Jika Anda tidak memiliki gambar latar belakang, unduhlah secara gratis dari internet. Kalau sudah, masukkan ke folder HTML yang sebelumnya dibuat.

3. Buka editor teks atau editor HTML. Anda bisa membuat berkas HTML menggunakan aplikasi editor teks dasar semacam NotePad untuk Windows atau TextEdit pada Mac. Anda juga bisa menggunakan editor HTML semacam Adobe Dreamweaver.

   • Kalau Anda menggunakan editor HTML, klik opsi untuk membuka berkas HTML baru di awal halaman.

4. Klik File. Opsi ini berada di bilah menu di bagian atas halaman.

5. Klik Save As (Notepad) atau Save (TextEdit). Opsi ini berada dalam menu File. Kalau Anda menggunakan PC, klik Save As di menu tarik turun "File". Kalau Anda memakai Mac, klik Save di menu tarik turun.

6. Tikkan nama untuk dokumen HTML. Biasanya, halaman pertama situs dinamakan "index", tetapi Anda bebas menentukan nama halaman. Tikkan nama berkas dalam kotak teks di sebelah "File Name".

7. Ubah tipe berkas menjadi dokumen HTML. Kalau memakai editor HTML, Anda hanya perlu menyimpan berkas. Jika Anda menggunakan NotePad atau TextEdit untuk membuat HTML, ikuti langkah-langkah berikut untuk menyimpan dokumen sebagai format HTML.

   • Notepad: Ganti ekstensi ".txt" di akhir nama berkas dengan ".html".
   • TextEdit: Gunakan menu tarik turun di sebelah "File Format" untuk memilih Web page (.html).

8. Klik Save. Opsi ini berada di pojok kanan bawah jendela. Langkah ini menyimpan dokumen teks sebagai dokumen HTML.

1. Tikkan di bagian atas dokumen HTML. Kode HTML tersusun dari label (tag) pembuka dan penutup. Setiap halaman HTML yang tertulis baik harus dimulai dengan . Label ini memberi tahu peramban web bahwa berkas tersebut adalah berkas HTML.

2. Tuliskan di baris berikutnya. Inilah label pembuka kode HTML Anda. Label ini memberi tahu peramban bahwa kode HTML dimulai dari sini.

3. Tikkan di baris berikutnya. Inilah label pembuka untuk Kepala (Head) dokumen HTML. Kepala ini berisi informasi meta yang tidak ditampilkan di peramban web. Bagian dokumen ini berisi informasi semacam judul halaman, dan juga Cascading Style Sheets (CSS) yang merupakan format untuk melihat kode HTML.

4. Tikkan Page Title. Inilah kode HTML yang berisi judul halaman di halaman web. Label "

   " adalah label pembuka dari judul <i>Page</i> (halaman) dalam kode HTML. Label "" adalah label penutup. Ganti teks "Page Title" dengan sembarang judul yang diinginkan sebagai nama halaman HTML. Teks ini akan muncul di label peramban pada bagian atas peramban web.

5. Tikkan di baris berikutnya. Inilah label yang menutup kepala dokumen HTML. Jalau Anda ingin menyertakan informasi lainnya atau cascading style sheets pada dokumen HTML, pastikan untuk menuliskannya setelah label pembuka "", dan sebelum label penutup "".

6. Tikkan di baris berikutnya. Inilah label pembuka untuk badan dokumen HTML. Badan dokumen adalah tempat semua unsur visual halaman web berada. Unsur-unsur ini termasuk teks, gambar, tombol, dan unsur lainnya yang bisa dilihat pada halaman web.

7. Tikkan

   di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan. URL ini dapat berupa lokasi gambar yang diunggah ke server daring, atau lokasinya di dalam komputer Anda.

   • Anda juga bisa menggunakan untuk menetapkan gambar latar belakang.
   • Ketika Anda menggunakan nama berkas tanpa jalur atau URL berkas (misalnya background-image: url("background.png");), peramban akan mencari gambar dengan nama tersebut dalam folder halaman web. Jika berkas berada dalam folder lain di sistem berkas, Anda tidak perlu menambahkan jalur penuh untuk berkas tersebut.

8. Selesaikan sisa dokumen HTML Anda. Kalau Anda ingin menyertakan unsur HTML lain dalam halaman web, misalnya teks, gambar, video, tautan, tombol, dan lain-lain, pastikan untuk menyertakannya dalam segmen "Body" dokumen HTML.

9. Tikkan di baris terakhir. Inilah label yang menutup badan dokumen HTML. Ketika Anda selesai menambahkan semua unsur HTML yang ingin disertakan dalam dokumen, tikkan label ini di baris terakhir.

10. Tikkan di akhir. Inilah label untuk menutup seluruh dokumen HTML. Tikkan label ini di baris terakhir.

11. Simpan berkas HTML. Ketikan selesai memasukkan semua unsur yang diinginkan dalam halaman web, klik File, lalu Save untuk menyimpan hasil kerja Anda. Seluruh dokumen HTML akan tampak sebagai berikut:

    
    
    Page Title
    
    
    
    
    
    

1. Buat dokumen HTML. Gunakan langkah-langkah dalam untuk menuliskan dokumen HTML. Dokumen HTML harus memiliki label pembuka dan penutup kepala, serta label pembuka dan penutup badan. Anda tidak perlu menyertakan label HTML untuk menambahkan gambar latar belakang. Bagian ini mengajarkan Anda cara menetapkan gambar latar belakang menggunakan CSS alih-alih HTML.

2. Tikkan di akhir CSS. Ketika selesai menyertakan semua CSS yang ingin disertakan, tikkan "" di akhir. Label ini menutup CSS Anda.

3. Simpan berkas HTML. Ketika Anda menyelesaikan semua yang ingin disertakan, klik File, lalu Save untuk menyimpan hasil kerja. Seluruh dokumen HTML Anda akan tampak seperti berikut:

   
   
   Page Title
   
   
   
   
   
   
   
   

1. Klik kanan dokumen HTML. Langkah ini menampilkan menu pop-up di sebelah kanannya.

2. Pilih Open with. Langkah ini menampilkan daftar aplikasi yang bisa membuka HTML.

3. Pilih peramban web. Anda bisa membuka HTML di sembarang peramban web.

4. Ulas berkas HTML. Lihatlah semua unsur dalam berkas dan pastikan sudah benar.

   • Ketika membuka peramban, jika Anda melihat kode HTML alih-alih gambar latar belakang, berkas HTML dapat tersimpan sebagai berkas .txt atau rtf alih-alih dokumen HTML. Anda bisa mencoba menyunting berkas HTML di editor teks lain.

   Catatan: Ketika peramban terbuka, jika Anda tidak melihat gambar terkait, pastikan namanya dieja dengan benar dalam index.html pada jendela editor teks.

5. Sunting berkas HTML. Dalam jendela editor teks, gerakkan kursor ke antara label , lalu tikkan Hello world!. Muat ulang jendela untuk melihat teks di bagian atas gambar latar belakang.

   Apa HTML yang benar untuk memasukkan gambar latar belakang?

   Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.

   Bagaimana cara menambahkan warna latar belakang dalam HTML?

   Jika Anda ingin menggunakan warna-warna dasar pada kode HTML, tikkan nama warna tanpa tagar (“#”) sebagai pengganti kode warna HTML. Sebagai contoh, jika Anda ingin menggunakan warna oranye sebagai warna latar halaman, tikkan background-color: orange; .

   Apa tag yang tepat untuk menambahkan gambar latar?

   Untuk menambahkan background di html maka perlu menggunakan style CSS (Cascading Style Sheet). Style ini dapat kita buat langsung didalam tag <head> pada dokumen htmlnya.

   Apa itu background pada CSS?

   CSS background-image digunakan untuk mengatur gambar latar belakang sebuah elemen HTML. Secara default, background gambar akan diulang (repeat) sehingga memenuhi seluruh elemen. Untuk cara penggunaanya silahkan ikuti contoh di bawah ini. Namun sebelumnya siapkan gambar yang akan dijadikan sebagai latar belakang.