Mengenal Cara Kerja HTML dan CSS
Jika kita lihat dari perspektif orang yang memiliki minat dalam pengcodingan, maka kemungkinan besar dia akan mengatakan " Sebenarnya ngoding itu gak susah kok, pelajari dan cari bahan referensi ". Disini kita akan membahas lebih mendalam, kenapa HTML dan CSS saling berhubungan atau secara garis besarnya bagaimana cara kerja HTML dan CSS.Namun ingat! ini membahas HTML yang <head> dan <body> yang berarti <head> tempat peletakan untuk code CSS, sementara <body> tempat untuk membuat semua kode CSS dan html bekerja. Mari kita mengenal cara kerja HTML dan CSS.
Cara Kerja CSS dan HTML
1.CSS
Cara kerja CSS atau bisa dibilang code yang membuat CSS berhasil atau sukses tampil di template website ataupun blog adalah karena kode <style> . Dalam beberapa template mungkin juga akan ditemukan kode <b:skin>. Cara kerja CSS yang dibungkus oleh <style> inilah yang membuat HTML mendapatkan perintah bagaimana proses tampilan dan posisi tampilan. Namun tidak hanya sekilas karena ada <style> saja. Secara garis rinci, ada cara pemanggilan file CSS yang dilakukan oleh HTML diantara lain seperti kode CSS yang diawali oleh # atau . atau mungkin tanpa # dan .
Berikut contoh CSS yang terdiri dari awalan # atau . atau mungkin bahkan tanpa # dan .
Bentuk CSS secara garis besar
<style>
body{
background:white;
font-family: Century Gothic;
}
</style>
body{
background:white;
font-family: Century Gothic;
}
</style>
Nah itu hanya garis besar dari awalan bentuk CSS saja. Mari kita lihat secara garis rinci dari bentuk CSS yang diawali oleh # atau . atau bahkan tanpa # dan titik (.) .
<style>
#Header{
background:black;
width:100%;
}
.linkheader{
padding: 1px;
}
</style>
#Header{
background:black;
width:100%;
}
.linkheader{
padding: 1px;
}
</style>
Nah begitulah bentuk CSS secara dasar. Eits jangan kira tanda # atau titik (.) tidak ada gunanya yah. Ntar di HTML kamu bakal tau kok kegunaannya awalan tanda CSS seperti # ataupun titik(.)
2.HTML
Setelah kita mengetahui CSS secara mendasar dan apa saja bentuk CSS sekarang kita akan melanjutkannya dalam bahasan HTML. Code awalan untuk HTML itu beragam, seperti <div> atau <b:if> atau tanpa <div> dan <b:if> . Nah bentar lagi kamu akan tahu kegunaan # dan . di CSS. berikut contoh code pemanggilan CSS oleh HTML agar hadir dan tampil di website / blog kecintaan kamu.
<div id="Header"> Hai Saya Header
<div class="linkheader> <a href='header.com'> Cek Saya </a>
</div>
</div>
<div class="linkheader> <a href='header.com'> Cek Saya </a>
</div>
</div>
Itu adalah kode sederhana HTML dan ada terhubungnya dengan CSS. Nah pasti kamu penasaran kenapa di HTML ada id dan class. Berikut penjelasannya beserta kenapa CSS ada # dan titik (.)
Hubungan CSS dan HTML
1. id HTML dan # CSS
id HTML lah yang membuat atau merespon atau memanggil code tampilan CSSnya. Coba lihat kode yang diatas. id HTML dan #CSS penulisannya harus sama, contoh kalau # CSSnya seperti #header, maka id HTML nya penulisan nya juga sama yaitu id="header". Jangan sampai berbeda, satu kata saja berbeda atau huruf kapital saja berbeda atau ada kelupaan sesuatu saja, maka id yang ada di HTML tidak akan merespon code CSSnya karena wordnya tidak sama. Ingat! komputer itu sensitif.
2. class HTML dan . (titik) CSS
sama dengan id HTML dan # CSS, sistem kerja atau cara kerja keduanya sama. Tapi tolong diingat kembali, kalau wordnya harus sama, jangan sampai code CSS nya diawali dengan # eh malah di pemanggilan HTMLnya malah class= , itu juga gak akan work. Karena apa? Karena komputer dirancang untuk merespon apa yang telah di programkan dan komputer itu sensitif.
Nah itulah study singkat kita mengenai cara kerja HTML dan CSS beserta apa hubungan antara keduanya, apa hubungan gelap? hubungan cinta sejati? ah bodo lah. Namun HTML yang saya maksud disini bukanlah seluruh HTML dari awal code <!DOCTYPE html> yah, tapi mengenai <head> dan <body> .
Semoga informasi singkat dari PenggemarKoding ini dapat membantu kamu yang lagi belajar membuat template blog atau website pribadi. Dulu saya juga seperti kamu, susah cari informasi pelajaran, tapi untung di internet yang dicari itu ada walaupun tidak selalu ada. Coba lah bergabung di berbagai forum ataupun situs belajar coding biar kita makin berilmu. Jangan lupa share artikel ini untuk membantu mereka yang sedang ingin belajar seperti kita agar makin banyak ilmu ketika saling berbagi ilmu.
Sumber: Penggemarkoding.blogspot.com
0 Response to "Mengenal Cara Kerja HTML dan CSS"
Post a Comment