Membuat situs web adalah cara yang bagus untuk mengekspresikan diri Anda. Meskipun ada banyak alat pembuatan situs web, menulisnya sendiri adalah cara yang menyenangkan untuk mempelajari lebih lanjut tentang cara kerja situs web di balik layar. Proyek pemula yang baik adalah membuat situs web dan menambahkan gambar latar belakang dengan CSS. Proyek ini akan membuat Anda siap dan berjalan dengan HTML dan CSS.
Apa itu CSS?
CSS adalah singkatan dari Cascading Style Sheet. Ini adalah bahasa pemrograman yang memungkinkan Anda mengatur gaya bahasa markup. Salah satu bahasa markup tersebut adalah HTML atau Hyper-Text Markup Language. HTML digunakan untuk membuat situs web. Meskipun Anda dapat mengontrol beberapa gaya situs web menggunakan HTML, CSS menawarkan lebih banyak pilihan kontrol dan desain.
Membuat Situs Web Dasar Dengan HTML
Karena CSS hanyalah bahasa gaya, untuk menggunakannya, pertama-tama kita membutuhkan sesuatu untuk ditata. Situs web yang sangat dasar sudah cukup bagi kita untuk mulai bermain dengan CSS. Halaman kami akan menampilkan "Hello World."
Halo Dunia
Jika Anda tidak terbiasa dengan HTML, mari kita segera membahas apa yang dilakukan semua elemen. Seperti yang disebutkan, HTML adalah bahasa markup, yang artinya menggunakan tag untuk menandai teks tersebut. Kapanpun Anda melihat sebuah kata dikelilingi oleh <> itu adalah sebuah tag. Ada dua jenis tag, tag yang menandai awal bagian menggunakan <> dan satu yang menandai akhir bagian menggunakan
Dalam contoh kami, kami memiliki empat tag. Itu html tag menunjukkan elemen mana yang merupakan bagian dari situs web. Itu kepala tag berisi informasi header yang tidak ditampilkan pada halaman tetapi diperlukan untuk membuat halaman. Semua elemen yang ditampilkan berada di antara tubuh tag. Kami hanya memiliki satu elemen yang ditampilkan, yaitu p menandai. Ini memberi tahu browser web bahwa teks tersebut adalah paragraf.
Terkait: 10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit
Ingin tahu lebih banyak tentang menggunakan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.
Menambahkan CSS ke HTML
Sekarang kita memiliki halaman sederhana, kita dapat menyesuaikan gayanya dengan CSS. Halaman kita cukup sederhana saat ini, dan tidak banyak yang bisa kita lakukan, tapi mari kita mulai dengan membuat paragraf kita menonjol sehingga kita bisa membedakannya dari latar belakang dengan menambahkan perbatasan.
Halo Dunia
Sekarang, paragraf kita akan dikelilingi oleh perbatasan hitam. Menambahkan deskripsi gaya di CSS ke tag paragraf kami memberi tahu situs web cara memberi gaya paragraf. Kami dapat menambahkan lebih banyak deskripsi. Mari tingkatkan white-space, atau padding, di sekitar paragraf kita dan pusatkan teks kita.
Halo Dunia
Situs web kami terlihat lebih baik, tetapi HTML kami mulai terlihat berantakan dengan semua deskripsi di tag paragraf. Kami dapat memindahkan informasi ini ke header kami. Header kami adalah untuk informasi yang kami butuhkan untuk menampilkan situs web dengan benar.
Halo Dunia
Sekarang HTML kita lebih mudah dibaca. Anda akan melihat bahwa kami memang harus mengubah beberapa hal. Tag gaya memberi tahu informasi gaya browser web, tetapi juga apa yang harus diberi gaya. Dalam contoh kami, kami telah menggunakan dua cara berbeda untuk memberi tahu apa yang harus ditata. Itu p di tag gaya memberi tahu browser web untuk menerapkan gaya itu ke semua tag paragraf. Itu #ourParagraph bagian memberitahu itu hanya untuk elemen gaya dengan id ourParagraph. Perhatikan itu Indo informasi telah ditambahkan ke tag p di tubuh kita.
Mengimpor File CSS ke Situs Anda
Menambahkan informasi gaya ke tajuk membuat kode kita lebih mudah dibaca. Namun, jika kita ingin menata banyak halaman berbeda dengan cara yang sama, kita harus menambahkan teks itu ke bagian atas setiap halaman. Itu mungkin tidak tampak seperti banyak pekerjaan, Anda bisa menyalin dan menempelkannya, tetapi itu menciptakan banyak pekerjaan jika Anda ingin mengubah elemen nanti.
Sebagai gantinya, kami akan menyimpan informasi CSS dalam file terpisah dan mengimpor file untuk mengatur gaya halaman. Salin dan tempel informasi di antara tag gaya ke dalam file CSS baru ourCSSfile.css.
p {
text-align: center
}
#ourParagraph {
gaya pembatas: solid;
bantalan: 30px;
}Kemudian, impor file tersebut ke file HTML.
Halo Dunia
Menambahkan Gambar Latar Belakang Dengan CSS
Sekarang Anda memiliki basis yang kuat dalam HTML dan CSS, menambahkan gambar latar belakang akan menjadi sangat mudah. Pertama, identifikasi elemen apa yang ingin Anda berikan gambar latar belakang. Dalam contoh kami, kami akan menambahkan latar belakang ke seluruh halaman. Ini berarti kami ingin mengubah gaya file tubuh. Ingat, tag badan berisi semua elemen yang terlihat.
tubuh{
background-image: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
gaya pembatas: solid;
bantalan: 30px;
}Untuk mengubah gaya tubuh di CSS, pertama-tama gunakan tubuh kata kunci. Kemudian tambahkan tanda kurung kurawal seperti yang kita lakukan sebelumnya {}. Semua informasi gaya untuk badan harus berada di antara tanda kurung kurawal. Atribut gaya yang ingin kita ubah adalah gambar latar belakang. Ada banyak atribut gaya. Jangan berharap untuk menghafal semuanya. Bookmark a Lembar contekan properti CSS dengan atribut yang ingin Anda ingat.
Terkait: 8 Efek HTML Keren Yang Dapat Ditambahkan Siapa Pun ke Situs Web Mereka
Setelah atribut, gunakan titik dua untuk menunjukkan bagaimana Anda akan mengubah atribut. Untuk mengimpor gambar, gunakan url (). ini menunjukkan bahwa Anda menggunakan tautan untuk menunjuk ke gambar. Tempatkan lokasi file dalam tanda kurung di antara tanda kutip. Terakhir, akhiri baris dengan titik koma. Meskipun spasi putih tidak memiliki arti dalam CSS, gunakan lekukan agar CSS lebih mudah dibaca.
Contoh kami terlihat seperti ini:
Jika gambar Anda tidak ditampilkan dengan benar karena ukuran gambar, Anda dapat mengubah gambar secara langsung. Namun, ada atribut gaya latar belakang di CSS yang dapat Anda gunakan untuk mengubah latar belakang. Gambar yang lebih kecil dari latar belakang akan otomatis diulang di latar belakang. Untuk mematikannya, tambahkan ulangi latar belakang: no-repeat; ke elemen Anda.
Ada juga dua cara untuk membuat gambar menutupi seluruh latar belakang. Pertama, Anda dapat mengatur ukuran latar belakang ke ukuran layar dengan ukuran latar belakang: 100% 100%;, tetapi ini akan meregangkan gambar dan mungkin terlalu banyak mengubah gambar. Jika Anda tidak ingin proporsi gambar berubah, Anda juga dapat mengatur ukuran latar belakang ke penutup. Penutup akan membuat gambar latar menutupi latar belakang, tetapi tidak merusak gambar.
Mengubah Warna Latar Belakang
Mari kita ubah satu hal lagi. Sekarang setelah kita memiliki latar belakang, paragraf kita sulit dibaca. Mari kita buat latar belakangnya menjadi putih. Prosesnya serupa. Elemen yang ingin kita ubah adalah #ourParagraph. # Menunjukkan bahwa "ourParagraph" adalah nama id. Selanjutnya, kami ingin mengatur warna latar belakang atribut menjadi putih.
tubuh{
background-image: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
warna latar belakang: putih;
gaya pembatas: solid;
bantalan: 30px;
}Jauh lebih baik.
Melanjutkan Desain Situs Web Anda Dengan CSS
Sekarang setelah Anda mengetahui cara mengubah gaya berbagai elemen HTML, langit adalah batasnya! Metode dasar untuk mengubah atribut gaya adalah sama. Identifikasi elemen yang ingin Anda ubah, dan jelaskan cara mengubah atribut. Cara terbaik untuk mempelajari lebih lanjut adalah dengan bermain-main dengan atribut yang berbeda. Tantang diri Anda untuk mengubah warna teks Anda selanjutnya.
Ingin belajar HTML untuk membuat kode situs web dan aplikasi Anda sendiri? Gunakan contoh halaman web dan kode sumber berikut untuk mempelajari HTML dan CSS pada diri Anda sendiri.
- Pemrograman
- HTML
- Desain web
- CSS
J. Seaton adalah Penulis Sains yang berspesialisasi dalam memecahkan topik yang kompleks. Dia memiliki gelar PhD dari University of Saskatchewan; penelitiannya berfokus pada pemanfaatan pembelajaran berbasis game untuk meningkatkan keterlibatan siswa secara online. Saat dia tidak bekerja, Anda akan melihatnya sedang membaca, bermain video game, atau berkebun.
Berlangganan newsletter kami
Bergabunglah dengan buletin kami untuk mendapatkan tip teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Satu langkah lagi…!
Harap konfirmasi alamat email Anda di email yang baru saja kami kirimkan kepada Anda.