Unduh PDF
Unduh PDF
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. [1] X Teliti sumber CSS merupakan singkatan dari Cascading Style Sheets dan digunakan untuk mengubah tampilan dan tata letak halaman web. [2] X Teliti sumber Anda akan perlu menyiapkan gambar latar belakang yang ingin digunakan pada halaman web.
Langkah
-
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.
-
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.
-
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.
-
Klik File . Opsi ini berada di bilah menu di bagian atas halaman.
-
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.
-
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 ".
-
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) .
-
8Klik Save . Opsi ini berada di pojok kanan bawah jendela. Langkah ini menyimpan dokumen teks sebagai dokumen HTML.Iklan
-
Tikkan <!DOCTYPE html> di bagian atas dokumen HTML. Kode HTML tersusun dari label ( tag ) pembuka dan penutup. Setiap halaman HTML yang tertulis baik harus dimulai dengan <!DOCTYPE html>. Label ini memberi tahu peramban web bahwa berkas tersebut adalah berkas HTML.
-
Tuliskan <html> di baris berikutnya. Inilah label pembuka kode HTML Anda. Label ini memberi tahu peramban bahwa kode HTML dimulai dari sini.
-
Tikkan <head> 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.
-
Tikkan <title>Page Title</title> . Inilah kode HTML yang berisi judul halaman di halaman web. Label "<title>" adalah label pembuka dari judul Page (halaman) dalam kode HTML. Label "</title>" 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.
-
Tikkan </head> 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 "<head>", dan sebelum label penutup "</head>".
-
Tikkan <body> 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.
-
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. URL ini dapat berupa lokasi gambar yang diunggah ke server daring, atau lokasinya di dalam komputer Anda. [3] X Teliti sumber
- Anda juga bisa menggunakan memakai CSS 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.
-
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.
-
Tikkan </body> 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.
-
Tikkan </html> di akhir. Inilah label untuk menutup seluruh dokumen HTML. Tikkan label ini di baris terakhir.
-
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:
<!DOCTYPE html> < html > < head > < title > Page Title </ title > </ head > < body > < div style = "background-image: url('https://www.website.com/images/image_background.jpg');" > </ body > </ html >
Iklan
-
Buat dokumen HTML. Gunakan langkah-langkah dalam Metode 2 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.
-
Tikkan <style> di judul dokumen HTML. Inilah label pembuka untuk cascading style sheets (CSS). Label ini dibuat setelah label "<head>", dan sebelum "</head>".
- Kalau tidak, Anda bisa membuat CSS pada dokumen CSS terpisah dan menautkannya dalam dokumen HTML.
-
Tikkan body { di baris berikutnya. Inilah kode pembuka CSS yang akan menetapkan gaya badan dokumen HTML.
-
Tikkan background-image: url('[image url]'); di baris berikutnya. Baris ini menentukan gambar latar belakang yang digunakan. Ganti teks "[ image url ]" dengan url sebenarnya gambar yang ingin digunakan.
- Ketika Anda menggunakan nama berkas tanpa jalur atau URL berkas (misalnya background-image: url("background.png"); ), peramban web akan mencari gambar tersebut dalam folder halaman web. Kalau berkas berada di folder lain pada sistem berkas, Anda akan perlu menambahkan jalur penuh ke berkas tersebut.
-
Tikkan background-repeat: no-repeat; di baris berikutnya. Baris ini memberi tahu peramban untuk hanya menampilkan gambar sekali, alih-alih mengulangi gambar berkali-kali.
-
Tikkan background-size: cover; di baris berikutnya. Baris ini memberi tahu peramban untuk menutupi seluruh latar belakang dengan gambar tersebut.
-
Tikkan } di akhir segmen " Body " (badan) HTML. Kalau Anda ingin menyertakan baris CSS lain yang memegaruhi Badan dokumen HTML, pastikan untuk menyertakannya sekarang. Tikkan"}" di baris terakhir segmen " Body " CSS untuk menutupnya.
-
Tikkan </style> di akhir CSS. Ketika selesai menyertakan semua CSS yang ingin disertakan, tikkan "</style>" di akhir. Label ini menutup CSS Anda.
-
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:
<!DOCTYPE html> < html > < head > < title > Page Title </ title > < style > body { background-image : url ( "https://www.website.com/images/image_background.jpg" ); background-repeat : no-repeat ; background-size : cover ; } </ style > </ head > < body > </ body > </ html >
Iklan
![Step 4 Tikkan background-image: url('[image url]'); di baris berikutnya.](#/Berkas:2627945-22-3.jpg)
-
Klik kanan dokumen HTML. Langkah ini menampilkan menu pop-up di sebelah kanannya.
-
Pilih Open with . Langkah ini menampilkan daftar aplikasi yang bisa membuka HTML.
-
Pilih peramban web. Anda bisa membuka HTML di sembarang peramban web.
-
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.
-
Sunting berkas HTML. Dalam jendela editor teks, gerakkan kursor ke antara label <body> </body>, lalu tikkan Hello world! . Muat ulang jendela untuk melihat teks di bagian atas gambar latar belakang.Iklan
Referensi
Iklan
