Belajar Kode CSS, HTML Terlengkap dan JavaScript Dasar

Belajar Kode CSS, HTML Terlengkap dan JavaScript Dasar - Belajar CSS, HTML dan bahkan JavaScript sangat diperlukan jika Anda ingin menekuni dunia web developer, namun untuk belajar dari kode-kode web tersebut bukanlah sesuatu yang mudah dilakukan

Baca Juga

Belajar Kode CSS, HTML Terlengkap dan JavaScript Dasar - Belajar CSS, HTML dan bahkan JavaScript sangat diperlukan jika Anda ingin menekuni dunia web developer, namun untuk belajar dari kode-kode web tersebut bukanlah sesuatu yang mudah dilakukan, sekalipun Anda belajar dengan menggunakan panduan berbayar sekalipun tidak mudah untuk memahaminya, apalagi belajar sendiri dengan mengikuti panduan atau tutorial yang ada. Kecuali, Anda benar-benar serius untuk belajar tentang kode CSS, HTML dan JavaScript sekaligus.

Dengan menguasai semua kode CSS, HTML, dan JavaScript bahkan kode PHP, Anda bisa menguasai internet khususnya dunia website dan pemograman karena sampai saat ini kedua bidang ini masih sangat menggiurkan dan memiliki potensi yang menjanjikan untuk menghasilkan pundi-pundi uang bahkan dollar dengan menjadi seorang web developer atau pengembang web dan web design! Dari sini Anda sudah bisa membayangkan seandainya Anda bisa menjadi seorang web developer, berapa banyak web-web yang Anda kelola, aplikasi-aplikasi yang dibutuhkan pada sebuah web, plugin, tema (template) dan sebagainya yang berhubungan dengan pemograman website.

Apalagi 3 komponen lengkap menjadi milik Anda yaitu menjadi seorang web developer, web designer dan web master! Dunia masa depan dengan pertumbuhan dan perkembangan dunia digital yang semakin pesat bisa menjadi milik Anda. Namun sekali lagi untuk mewujudkan semau itu butuh proses panjang dan belajar yang tentunya tidak mudah tapi jika serius dan fokus dilakukan, semuanya bisa diraih dengan mudah. Oleh karena itu, pada artikel ini kami akan membahas tentang CSS, HTML, dan kode JavaScript.

Meskipun kami sendiri bukanlah seorang yang ahli dalam pengkodean (coding), setidaknya apa yang kami ketahui dan kami share di blog ini bisa memberikan manfaat bagi yang mempelajarinya, meskipun apa yang kami share adalah bagian-bagian dasarnya saja namun jika dipelajari dan dikembangkan pasti akan bermanfaat buat diri sendiri dan orang lain. Seperti halnya belajar kode CSS dan HTML ini, kami hanya memberikan dasarnya saja selanjutnya terserah Anda mau mengembangkan atau tidak dan belajar lebih dalam lagi tentang kode CSS dan HTML ini. Karena semua yang berhasil melakukan sesuatu dengan baik semuanya berasal dari dasar yang baik.

Belajar Kode CSS, HTML Terlengkap dan JavaScript Dasar

Seperti yang telah kami sebutkan diatas, untuk bisa membuat atau mengedit sebuah tampilan website atau blog yang menarik atau yang sesuai dengan keinginan diri sendiri sehingga membedakan antara web atau blog yang lainnya maka diperlukan yang namanya kode CSS dan HTML, dua kode ini tidak bisa dipisahkan satu sama lain karena kedua kode ini saling berhubungan. Kode CSS digunakan untuk mengatur tampilan, sedangkan kode HTML digunakan untuk menampilkan kode yang diatur dalam kode CSS tersebut. Bingung?? Daripada bingung yuk kita belajar kode CSS dan HTML bareng-bareng aja...

Kode CSS
CSS merupakan singkatan dari Cascading Style Sheet. CSS digunakan untuk mengatur style atau gaya dari setiap tampilan sebuah website. Tampilan yang bisa diatur adalah seluruh komponen yang ada dan yang digunakan dalam sebuah website atau blog seperti bentuk huruf, jenis huruf (font), tampilan gambar, bentuk list, hingga pengaturan pada kode animasi.

Didalam kode CSS sendiri ada komponen yang harus diketahui. Komponen ini digunakan dalam penulisan kode CSS itu sendiri. Ada 3 komponen yang menjadi bagian dari kode CSS yaitu:

• Selector : Tag Html atau elemen html yang akan di berikan style oleh css. Selector ini biasanya juga ditandai dengan kode ID dan Class yang masing-masing ditandai dengan tanda pagar untuk atribut id dan tanda titik untuk atribut class.
• Property : Attribut dari html tag. Kode ini digunakan saat penulisan di tag HTML.
• Value : Nilai yang di berikan kepada Property.

Untuk lebih jelasnya dari penggunaan komponen CSS diatas, berikut kami contohkan kode CSSnya:

h1 {
color : #000000;
}

Kode diatas adalah salah satu contoh dasar dari kode CSS, jika dibaca menggunakan komponen yang kami sebutkan diatas maka hasilnya sebagai berikut:

• h1 : adalah selector.
• color : adalah property.
• #000000 : adalah value, dalam hal ini kode warna, #00000 adalah kode untuk warna hitam.

Contoh kode CSS diatas untuk penggunaan selectornya adalah menggunakan selector dari kode HTML langsung yaitu h1, selain itu untuk penulisan kode CSS dari kode selector tersebut juga menggunakan selector ID dan Class seperti berikut ini:

Selector ID
Selector ini menggunakan atribut ID yang di berikan pada tag html dan contoh penulisan kode CSSnya sebagai berikut:

#header {
color: #000000;
}

Penjelasan dari kode diatas sebagai berikut:

• #header : adalah selector.
• color : adalah property.
• #000000 : adalah value.

Jika ditulis dalam kode HTML (mark up html), maka penulisannya sebagai berikut:

<div id='header'></div>

Dari contoh penulisan kode HTML diatas, terdapat tag div yang diwakili oleh atribut id yang berisi nilai header. Kode ini merupakan kode pemanggil yang digunakan untuk membuat layout atau tampilan dasar sebuah website atau blog.

Jadi untuk Selector ID pada kode CSS memiliki syarat sebagai berikut:

• Menggunakan tanda pagar # di awal sebagai penanda bahwa kode CSS menggunakan Selector ID
• Setelah tanda pagar di ikuti oleh nama dari atribut ID yang digunakan pada penulisan tag html.

Selector Class
Selector ini mirip dengan Selector ID hanya atribut yang digunakan di html berbeda yaitu menggunakan atribut class. Sehingga penulisan kodenya juga berbeda hanya pada selectornya saja. Seperti contoh berikut ini:

.header {
color: #000000;
}

Jika ditulis dalam kode HTML (mark up html), maka penulisannya sebagai berikut:

<div class='header'></div>

Group Selector CSS
Selector ini gunakan untuk beberapa tag html sekaligus yang memiliki kode property dan value yang sama. Contohnya seperti berikut:

h1, h2 {
color: #000000;
}

Untuk penulisan 2 selector seperti contoh diatas, yang perlu diperhatikan adalah penggunaan tanda baca koma ,. Jika Anda melupakan tanda ini maka kode tidak akan bekerja dengan baik.

Selain menggunakan selector dari kode tag HTML langsung, untuk penulisan group selector ini bisa menggabungkan selector class dengan id, selector di dengan id atau selector class dengan class. Perhatikan contoh berikut ini:

#header, #sidebar {
color: #000000;
}

.header, #sidebar {
color: #000000;
}

.header, .sidebar {
color: #000000;
}

Selector CSS Turunan
Selain dari beberapa selector yang kami sebutkan diatas, ada lagi selector yang menjadi bagian dari selector lainnya yang kami sebut sebagai selector turunan. Contohnya seperti berikut ini:

#header h1 {
color: #000000;
}

Bahkan dari beberapa selector tersebut bisa digabungkan menjadi satu, dengan syarat memiliki nilai atau value yang sama. Bagaimana jika ada selector yang fungsi bekerja secara menyeluruh untuk semua tampilan blog? Apakah ada selector seperti itu? Ada, yaitu selector universal yang fungsinya untuk semua selector yang ada. Selector ini menggunakan tanda bintang * dalam penulisan code CSSnya seperti contoh berikut ini:

* {
font-family: Arial, Helvetica, sans-serif;
}

Dari beberapa kombinasi penulisan kode CSS dengan selector berbeda namun memiliki value aau nilai yang sama, akan membuat penggunaan kode CSS yang berlebih. Silahkan Anda coba.

Kode HTML
HTML singkatan dari Hyper Text Markup Language yang merupakan bahasa markup untuk membuat kerangka dasar dari sebuah website atau blog. Dalam penulisannya, bahasa markup html direpresentasikan kedalam elemen html yang penulisannya menggunakan tag html. Dalam penulisannya, mark up html menggunakan tag pembuka dan tag penutup, sebagai contoh jika Anda menuliskan huruf tebal maka menggunakan tag Bold dengan kode <b>

<b>Teks Ini Di cetak Tebal</b> --> Teks Ini Di cetak Tebal
<u>Teks Ini Bergaris Bawah</u> --> Teks Ini Bergaris Bawah
<i>Teks Ini Di Tulis Miring</i> --> Teks Ini Di Tulis Miring

Menerapkan Kode CSS Kedalam HTML
Untuk menerapkan atau menampilkan kode CSS yang telah ditetapkan dan ingin menampilkan dari kode CSS tersebut maka dibuthkan mark up HTML dari masing-masing kode yang ada di CSS. Namun untuk penulisan kode CSSnya sendiri sudah tidak seperti yang telah kami contohkan diatas, ada 3 cara dalam penulisan kode CSS yaitu:

1. Menggunakan Element <style> atau Embed CSS
Pada cara ini menggunakan elemen <style> yaitu dengan menulis kode css di dalam elemen<style> yang biasanya diletakan diantara tag <head> html seperti contoh berikut ini:

<html>
<head>
<style>
h1 {
 color: #000000;
}
</style>
</head>
<body>
</body>
</html>

2. Inline Style
Cara yang kedua menggunakan inline style yaitu langsung memasang kode css kedalam elemen html dengan menggunakan atribut style seperti contoh berikut ini:

<html>
<head>
</head>
<body>
<h1 style = "color:#000000;"> Ini Judul </h1>
</body>
</html>

Cara kedua ini adalah cara alternatif, jika memungkinkan jangan menggunakan cara yang kedua ini karena bisa menyebabkan kode CSS dan HTML tidak Valid.

3. External Link CSS
Untuk cara ketiga ini kode CSS tidak dimasukkan kedalam elemen <style> namun menyimpan kode CSS kedalam bentuk link dengan ekstensi CSS yang diletakkan diantara kode tag <head> didalam HTML. Contohnya seperti berikut ini:

<html>
<head>
<link type = "text/css" href = "style.css" />
</head>
<body>
</body>
</html>

Untuk penggunaan CSS dalam bentuk link ini, Anda harus memiliki penyimpanan database dari kode CSS yang digunakan. Untuk blog yang menggunakan Blogspot bisa menggunakan layanan penyimpanan file CSS dan HTML. Sedangkan untuk blog yang menggunakan self hosting bisa langsung menyimpannya kedalam hosting yang digunakan.

Menampilkan Hasil Kode CSS dan HTML
Misalkan Anda ingin membuat sebuah tombol menggunakan kode CSS kedalam artikel, maka buatlah dulu kode CSSnya seperti berikut ini:

<style>
#tombolbaru {
    background: #f57b54;
    width: 150px;
    border-radius: 2px;
    border: 1px solid #f84912;
    color: #ffffff;
    cursor: pointer;
    height: 27px;
    padding: 0 10px;
    line-height: 26px;
    margin: 0;
    text-align: center;
    box-sizing: content-box;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;</style>
}

Dan untuk penulisan kode HTMLnya adalah sebagai berikut:

<div id='tombolbaru'>Tombol Baru</div>

Dan untuk hasilnya akan tampil sebuah tombol seperti berikut ini:

Tombol Baru

Bagaimana mudah bukan belajar kode CSS dan HTML? Bahkan Anda bisa membuat sebuah kode CSS sesuai dengan keinginan Anda. Silahkan di coba

Untuk belajar kode CSS dan HTML ini jika ulasan yang kami buat hanya dibaca saja tanpa praktek, memang agak membingungkan tapi jika dipraktekkan langsung akan lebih mudah dilakukan. Tidak hanya melalui artikel ini saja untuk belajar CSS dan HTML, banyak sekali blog-blog besar yang membahas lebih lengkap lagi mengenai kedua kode ini, termasuk JavaScript. Untuk JavaScript sendiri tidak bisa kami bahas didalam artikel ini dan akan kami bahas pada artikel berikutnya, termasuk penggunaan kode responsive. Semoga bermanfaat.