Style Pada Halaman Web Menggunakan CSS

-

Style Halaman Web Menggunakan CSS

Penjelasan CSS🔥

Source:NesabaMedia

CSS adalah kependekan dari (Cascading Style sheet),berfungsi untuk mendesain suatu halaman web.Dengan adanya CSS,tag HTML yang sederhana dapat dibuat lebih menarik.

Konsep Layout Halaman Web🔥

Layout situs merupakan tata letak element halaman situs web.Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah dan informatif.
Desain Layout meliputi penyusunan:
–Pembagian tempat pada halaman.
–pengaturan jarak spasi.
–pengelompokan teks dan grafik.
–serta penekanan pada suatu bagian tertentu

Jenis-Jenis Layout Halaman Web🔥

—Top Index
digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine.

—Bottom Index
Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal.

—Left Index
Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama.

—Layout split
Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web.

—Alternating Index
digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain – lain.

Contoh penulisan Script code pada CSS.🔥

See the Pen Untitled by Paundra (@Paundra12) on CodePen.

Metode Stylesheet🔥

1.Internal CSS
Internal CSS adalah kode CSS yang ditulis di dalam tag <style>.Tag <style> bisa ditulis di dalam tag <head>, bisa juga ditulis di dalam tag <body>. Namun kebanyakan orang menulisnya di dalam <head>.

2.Eksternal CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.

3. Inline CSS
Inline CSS adalah kode CSS yang ditulis langsung pada atribut style di elemen HTML.
Kode CSS ditulis langsung tanpa menggunakan kurung kurawal{ ... }. Kemudian properti tetap dipisah dengan titik koma.


Contoh Property CSS🔥

1. background-color:memberi warna pada latar belakang

2. background-image:memberi gambar pada latar belakang dari suatu element

3. background-repeat:memberi perintah pada gambar yang ada di latar belakang untuk perulangan.

4. background-position: mengatur posisi gambar pada latar belakang.

5. background-attachment :mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap.

6. background-size: menentukan ukuran gambar pada latar belakang.

7. background-clip :menentukan area lukisan pada latar belakang.

8. background-origin :menentukan dimana sebuah gambar diposisikan.

9. background :mengatur latar belakang pada element secara luas.


Sekian dari saya 
Enjoy!!!













Komentar

Posting Komentar

Postingan populer dari blog ini

Sejarah Laravel dari awal hingga versi terbaru

-
Gambar
Apa Keuntungan Membuat Laravel??? Keuntungan menggunakan Laravel adalah mudah dipelajari dan digunakan oleh developer, memiliki fitur-fitur yang lengkap dan modern, serta dokumentasi yang lengkap dan mudah dipahami. Selain itu, Laravel juga memiliki komunitas yang besar dan aktif, sehingga memudahkan developer untuk mencari solusi atas masalah-masalah yang dihadapi dalam pengembangan aplikasi. Apakah Laravel cocok untuk pengembangan aplikasi web yang kompleks? Ya, Laravel sangat cocok untuk pengembangan aplikasi web yang kompleks. Laravel memiliki fitur-fitur yang lengkap dan modern seperti Eloquent ORM, Blade Templating, Authentication, dan Authorization. Fitur-fitur ini sangat membantu dalam pengembangan aplikasi web yang kompleks. Selain itu, Laravel juga memiliki komunitas yang besar dan aktif, sehingga memudahkan developer dalam mencari solusi atas masalah-masalah yang dihadapi dalam pengembangan aplikasi. Awal Mula Pengembangan Laravel Laravel dikembangkan oleh Taylor Otwell pada...
Baca selengkapnya

Penjelasan Tentang GitHub dan GitLab

-
Gambar
  Penjelasan GitHub dan GitLab Apa Itu GitHub??   GitHub adalah salah satu platform wajib bagi developer karena menawarkan kemudahan untuk mengelola kode pada project. Platform ini cukup populer dengan lebih dari 56 juta pengguna dari seluruh dunia.     Selain itu,  GitHub adalah website yang digunakan untuk menyimpan dan mengelola kode suatu project. Anda dapat membuat atau mengupload kode Anda ke server GitHub dan kemudian melakukan coding secara online. Tutorial Membuat Akun GitHub Untuk membuat akun GitHub, Anda dapat mengikuti langkah-langkah berikut: Buka situs web GitHub di browser web Anda. Pilih "Daftar" untuk memulai proses pendaftaran. Masukkan alamat email Anda. Buat kata sandi untuk akun GitHub baru Anda. Masukkan nama pengguna yang Anda inginkan. Pilih apakah Anda ingin menerima pembaruan dan pengumuman melalui email. Verifikasi akun Anda dengan memecahkan teka-teki. Setelah akun Anda terverifikasi, pilih tombol "Buat akun" untuk menyelesaikan pros...
Baca selengkapnya

Data Analytic Bertujuan Membangun model Machine Learning

-
Gambar
  Pengertian dari Data👀      Sekarang ini, data dijadikan sebagai sebuah keterangan dan bahkan menjadi acuan untuk mempermudah orang-orang dalam mencari ataupun mengamati suatu hal. Keterangan dari data tersebut bisa berupa kata-kata, kalimat, angka, simbol, dan lainnya. Akan tetapi, jika ingin memahami lebih dalam mengenai data, maka alangkah lebih baik kita kita mencari tahu dulu apa pengertian data secara umum.     Data adalah sekumpulan informasi yang dapat berupa angka, teks, gambar, atau jenis informasi lainnya yang dikumpulkan melalui observasi, pengukuran, atau penelitian. Data digunakan untuk analisis dan pengambilan keputusan.     Data Menurut para Ahli:     Pengertian data menurut Arikunto Suharsimi adalah serangkaian fakta dan juga angka yang bisa digunakan sebagai salah satu bahan untuk menyusun suatu informasi.     Pengertian data menurut Kuswandi dan E. Mutiara adalah sekumpulan informasi y...
Baca selengkapnya