Baca Juga
Belajar Pemrograman Web Css Dasar Untuk Pemula Lengkap Bagian Kedua - Halo teman - teman blog techno, Pada kesempatan kali ini kita akan melanjutkan seri pembelajaran Pemrograman Web Dasar kita ya, Dan pada pembahasan yang sebelumnya kita telah mengetahui berbagai Latar belakang dari CSS ini. Dan pada kesempatan kali ini kita akan mencoba membuat sebuah template atau tampilan website yang sangat sederhana menggunakan CSS dan HTML.
Baiklah teman - teman sekalian sebelum kita masuk kedalam tahapan coding mengcodingnya, disina ada beberapa hal yang harus teman - teman persiapkan terlebih dahulu :
Owh ya hampir lupa sebelum kita masuk kedalam membuat template atau proses pembuatan website kita, disini ada beberapa hal yang akan saya jelaskan terlebih dahulu.
Pertama adalah aturan penulisan kode CSS itu sendiri dibagi kedalam 3 aturan, Yaitu, Internal, Eksternal, Dan Inline. Kita bahas sedikit, Internal adalah aturan penulisan kode css dalam file HTML nya langsung biasanya ditulis diantara tag <head></head>, Contohnya :
Untuk gambar diatas adalah aturan penulisan kode CSS yang bersifat Internal, atau kode yang dituliskan langsung kedalam file HTML nya. Selanjutnya adalah penulisan kode CSS Eksternal. Untuk eksternal ini adalah kebalikan dari Internal, Kalau internal ditulis langsung di dokumen HTML, sementara yang Eksternal ini ditulis dengan file terpisah dari HTML nya dan dihubungkan dengan tag <link rel="stylesheet" type="text/css" href="namafile.css">.
Dan untuk aturan pembuatan file css nya, bisa dengan cara membuat sebuah file dan disimpan dengan namafile.css, Kemudian hubungkan file css anda kedalam dokumen HTML nya dengan cara menggunakan tag link diatas / <link rel="stylesheet" type="text/css" href="namafile.css">, Dan untuk property href ini adalah berisi file css anda. Untuk contohnya anda bisa melihatnya dibawah ini.
Ok untuk bagian yang terakhir ini adalah penulisan CSS dengan aturan inline. Nah untuk aturan ini sudah pernah kita gunakan sebelumnya pada artikel terakhir pembahasan HTML. Dan kembali saya jelaskan disini, Untuk aturan penulisan Internal anda cukup menempatkan kode CSS nya pada tag HTML nya langsung, Contoh, <h1 style="font-weight="bolder"></h1>. Nah untuk aturan penulisannya cukup anda tambahkan property style=" " pada tag yang ingin dimanipulasi, Sebagai Contoh.
Ok setelah kita tau aturan -aturan penulisannya, ada beberapa hal yang harus saya jelaskan lagi. Dan bisa dikatakan untuk materi kali ini akan lumayan banyak, Jadi siapkan fokus anda ya :).
Nah bisa kita lihat bersama - sama gambar diatas adalah aturan penggunaan kode CSS itu sendiri. Disini saya akan menjelaskan bahwa CSS itu memiliki 3 aturan yang perlu anda ketahui, Yaitu Selector, Property, Dan Value.
Selector sendiri adalah tahapan pemilihan tag - tag HTML yang anda pilih dan kemudian akan anda manipulasi tag nya.
Property adalah style apa yang akan anda berikan pada sebuah selector, atau bahasa gampangnya sih bisa dibilang tag yang sudah anda pilih dengan selector tadi mau anda apakan, Apakah mau anda ganti warna teksnya, ubah backgroundnya, merubah jenis tipe teksnya dan lain sebagainya. Itu semua disebut dengan property.
Dan untuk Value ini adalah isi dari Property tadi, Atau gampangnya gini lah anda sudah punya selector yang ingin anda manipulasi dengan property background-color, Nah kalau anda hanya menuliskannya sampai segini maka tag yang ingin anda manipulasi tidak akan terjadi perubahan apa - apa, Karena disini si CSS nya belum tau dia untuk tag nya yang memiliki property background-color mau diubah menjadi warna apa kan gitu. Jadi untuk men set warna atau nilai dari property itulah kita membutuhkan Value ini.
Jadi kalau dalam studi kasusnya bisa dikatakan seperti ini, Katakanlah anda memiliki sebuah tag <h1></h1> yang ingin anda ubah warna teks dan backgroundnya. Jadi pertanyaannya gimana cara merubahnya ?, Ya gampang aja dengan menggunakan Selector kemudian Property dan Value nya maka selesai kasus kita. Dan untuk format penulisannya seperti dibawah ini !
selector --> h1 { property-->color:-->value-->red; background-color:white;}
Jadi untuk menggunakan CSS ini cukup anda tulis selectornya apa kemudian diikuti dengan kurung buka { kemudian isinya adalah property dan valuenya dan diakhiri dengan kurung tutup }.
Dan mari kita lanjutkan studi kasus kita, Disini kita akan mencoba membuat sebuah tampilan website yang sangat - sangat sederhana menggunakan HTML dan CSS. Silahkan dibuat sebuah file dengan nama belajarcss.html dan tulislah kode dibawah ini.
Dan simpanlah file tersebut dan silahkan anda buka pada browser anda, Dan sekarang anda seharusnya akan mendapatkan hasil yang seperti ini kurang lebih ya.
Dan untuk penjelasan kode - kodenya saya mohon maaf yang sebesar - besarnya karena saya tidak akan menjelaskan semua kode yang kita buat, dikarenakan keterbatasan waktu juga. Jadi untuk anda yang ingin belajar semua kode - kode css dan HTML diatas silahkan kunjungi link dibawah ini.
Belajar Kode CSS Lengkap / Belajar Kode HTML Lengkap
Dan untuk seri terakhir kita dalam pembelajaran CSS ini kita akan membuat sebuah halaman profile yang sangat sederhana hanya dengan menggunakan CSS dan HTML.
Berikut Contoh yang akan kita buat !
Baiklah teman - teman sekalian sebelum kita masuk kedalam tahapan coding mengcodingnya, disina ada beberapa hal yang harus teman - teman persiapkan terlebih dahulu :
- Web Browser, Baik Chrome Atau Mozilla
- Text Editor
Owh ya hampir lupa sebelum kita masuk kedalam membuat template atau proses pembuatan website kita, disini ada beberapa hal yang akan saya jelaskan terlebih dahulu.
Pertama adalah aturan penulisan kode CSS itu sendiri dibagi kedalam 3 aturan, Yaitu, Internal, Eksternal, Dan Inline. Kita bahas sedikit, Internal adalah aturan penulisan kode css dalam file HTML nya langsung biasanya ditulis diantara tag <head></head>, Contohnya :
Untuk gambar diatas adalah aturan penulisan kode CSS yang bersifat Internal, atau kode yang dituliskan langsung kedalam file HTML nya. Selanjutnya adalah penulisan kode CSS Eksternal. Untuk eksternal ini adalah kebalikan dari Internal, Kalau internal ditulis langsung di dokumen HTML, sementara yang Eksternal ini ditulis dengan file terpisah dari HTML nya dan dihubungkan dengan tag <link rel="stylesheet" type="text/css" href="namafile.css">.
Dan untuk aturan pembuatan file css nya, bisa dengan cara membuat sebuah file dan disimpan dengan namafile.css, Kemudian hubungkan file css anda kedalam dokumen HTML nya dengan cara menggunakan tag link diatas / <link rel="stylesheet" type="text/css" href="namafile.css">, Dan untuk property href ini adalah berisi file css anda. Untuk contohnya anda bisa melihatnya dibawah ini.
Ok untuk bagian yang terakhir ini adalah penulisan CSS dengan aturan inline. Nah untuk aturan ini sudah pernah kita gunakan sebelumnya pada artikel terakhir pembahasan HTML. Dan kembali saya jelaskan disini, Untuk aturan penulisan Internal anda cukup menempatkan kode CSS nya pada tag HTML nya langsung, Contoh, <h1 style="font-weight="bolder"></h1>. Nah untuk aturan penulisannya cukup anda tambahkan property style=" " pada tag yang ingin dimanipulasi, Sebagai Contoh.
Ok setelah kita tau aturan -aturan penulisannya, ada beberapa hal yang harus saya jelaskan lagi. Dan bisa dikatakan untuk materi kali ini akan lumayan banyak, Jadi siapkan fokus anda ya :).
Nah bisa kita lihat bersama - sama gambar diatas adalah aturan penggunaan kode CSS itu sendiri. Disini saya akan menjelaskan bahwa CSS itu memiliki 3 aturan yang perlu anda ketahui, Yaitu Selector, Property, Dan Value.
Selector sendiri adalah tahapan pemilihan tag - tag HTML yang anda pilih dan kemudian akan anda manipulasi tag nya.
Property adalah style apa yang akan anda berikan pada sebuah selector, atau bahasa gampangnya sih bisa dibilang tag yang sudah anda pilih dengan selector tadi mau anda apakan, Apakah mau anda ganti warna teksnya, ubah backgroundnya, merubah jenis tipe teksnya dan lain sebagainya. Itu semua disebut dengan property.
Dan untuk Value ini adalah isi dari Property tadi, Atau gampangnya gini lah anda sudah punya selector yang ingin anda manipulasi dengan property background-color, Nah kalau anda hanya menuliskannya sampai segini maka tag yang ingin anda manipulasi tidak akan terjadi perubahan apa - apa, Karena disini si CSS nya belum tau dia untuk tag nya yang memiliki property background-color mau diubah menjadi warna apa kan gitu. Jadi untuk men set warna atau nilai dari property itulah kita membutuhkan Value ini.
Jadi kalau dalam studi kasusnya bisa dikatakan seperti ini, Katakanlah anda memiliki sebuah tag <h1></h1> yang ingin anda ubah warna teks dan backgroundnya. Jadi pertanyaannya gimana cara merubahnya ?, Ya gampang aja dengan menggunakan Selector kemudian Property dan Value nya maka selesai kasus kita. Dan untuk format penulisannya seperti dibawah ini !
selector --> h1 { property-->color:-->value-->red; background-color:white;}
Jadi untuk menggunakan CSS ini cukup anda tulis selectornya apa kemudian diikuti dengan kurung buka { kemudian isinya adalah property dan valuenya dan diakhiri dengan kurung tutup }.
Dan mari kita lanjutkan studi kasus kita, Disini kita akan mencoba membuat sebuah tampilan website yang sangat - sangat sederhana menggunakan HTML dan CSS. Silahkan dibuat sebuah file dengan nama belajarcss.html dan tulislah kode dibawah ini.
Dan simpanlah file tersebut dan silahkan anda buka pada browser anda, Dan sekarang anda seharusnya akan mendapatkan hasil yang seperti ini kurang lebih ya.
Dan untuk penjelasan kode - kodenya saya mohon maaf yang sebesar - besarnya karena saya tidak akan menjelaskan semua kode yang kita buat, dikarenakan keterbatasan waktu juga. Jadi untuk anda yang ingin belajar semua kode - kode css dan HTML diatas silahkan kunjungi link dibawah ini.
Belajar Kode CSS Lengkap / Belajar Kode HTML Lengkap
Dan untuk seri terakhir kita dalam pembelajaran CSS ini kita akan membuat sebuah halaman profile yang sangat sederhana hanya dengan menggunakan CSS dan HTML.
Berikut Contoh yang akan kita buat !
0 Comments
Post a Comment
Silahkan Berkomentar Dengan Bijak Dan Membangun Ya Sahabat Techno.