Dasar-dasar CSS | Sharing Bersama Mas Aji Kamaludin | || BLC Telkom Klaten ||
Assalamualaikum wr.wb.
A. Pendahuluan
CSS merupakan kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, dimana bahasa markup ini salah satunya adalah HTML.
B. Latar belakang
Mempelajari CSS
C. Maksud dan tujuan
Mengetahui kegunaan CSS
D. Hasil yang didapat
Dapat mempelajari CSS
E. Alat dan bahan
F. Jangka waktu pelaksanaan
3 jam
G. Pembahasan
Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, HTML for content, CSS for Presentation.
Fungsi dan Kegunaan CSS
Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:
Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color="red"> pada kata-kata tertentu.
Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.
Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:
Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class="warna". Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head.
Nah! ini merupakan hasil coding bersama bersama Mas Aji Kamaludin
H. Kesimpulan
Kita harus lebih teliti pada saat kita melakukan script-script diatas (ngoding), agar tidak terjadi error
I. Referensi
Ebook RPL
Mas Aji Kamaludin
https://www.w3school.com/
Sekian dari saya yang dapat saya sampaikan, semoga bermanfaat bagi kalian semua
Wassalamualaikum wr.wb.
A. Pendahuluan
CSS merupakan kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, dimana bahasa markup ini salah satunya adalah HTML.
B. Latar belakang
Mempelajari CSS
C. Maksud dan tujuan
Mengetahui kegunaan CSS
D. Hasil yang didapat
Dapat mempelajari CSS
E. Alat dan bahan
- Laptop
- Charger
- Text editor (sublime text, notepad, atom, dll)
- Koneksi internet
F. Jangka waktu pelaksanaan
3 jam
G. Pembahasan
Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, HTML for content, CSS for Presentation.
Fungsi dan Kegunaan CSS
Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:
Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color="red"> pada kata-kata tertentu.
Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.
Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:
Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class="warna". Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head.
Nah! ini merupakan hasil coding bersama bersama Mas Aji Kamaludin
H. Kesimpulan
Kita harus lebih teliti pada saat kita melakukan script-script diatas (ngoding), agar tidak terjadi error
I. Referensi
Ebook RPL
Mas Aji Kamaludin
https://www.w3school.com/
Sekian dari saya yang dapat saya sampaikan, semoga bermanfaat bagi kalian semua
Wassalamualaikum wr.wb.
0 Komentar