HTML dan CSS 101

Years ago, my colleague Molly Holzschlag used a variant of this story to explain the importance of understanding our tools. When it comes to complex machines like cars, knowing how they work can really get you out of a jam when things go wrong. Fail to understand how they work and you could end up, well, buzzard food. At the time, Molly and I were trying to convince folks that learning HTML, CSS, and JavaScript was more important than learning Dreamweaver. Like many similar tools, Dreamweaver allowed you to focus on the look and feel of a website without needing to burden yourself with knowing how the HTML, CSS, and JavaScript it produced actually worked. This analogy still applies today, though perhaps more so to frameworks than WYSIWYG design tools.

From URL to Interactive — Aaron Gustafson

Ada yang bilang, “the ability to learn and to study is a privilege.” Di Twitter juga beberapa kali ada obrolan soal privilege dan diskusi soal apa sih privilege itu.

Privilege /?pr?v?l?d?/ n. a special right, advantage, or immunity granted or available only to a particular person or group — Dictionary.com

Dalam bahasa Indonesia… Apa ya? Hak? Kurang tepat, sebenernya. “Kelebihan”, mungkin ya?

Kenapa gw ngomongin soal privilege padahal pembukanya soal belajar HTML dan CSS, karena gw tau kalo belajar hal-hal yang… Ga awam diajarkan di sekolah publik/sekolah umum, seperti HTML dan CSS ini, adalah sebuah kelebihan. Nggak semua orang punya waktu, energi, dan akses untuk belajar “bahasa” baru seperti HTML dan CSS, jadi gw ga pengen juga seperti memaksakan kehendak LU HARUS BELAJAR HTML DAN CSS DAN JAVASCRIPT LHO YA.

Kenapa gw ngobrol gini, karena… Oke lah, kira-kira hampir 2 bulan gw di Automattic, salah satu isu yang gw sering pegang adalah CSS Customization dari user. Untuk user dengan langganan Premium, mereka bisa ngedit CSS dari Dashboard mereka (How to Add Custom CSS)

Nah, ada beberapa situasi ketika kita bertanya soal tampilan situs kita, “kok tampilannya gini ya? Kayanya di live demo ga gitu deh!” Lalu ketika dicek, oh, ternyata ada CSS yang bikin tampilannya jadi berubah. Seperti batu nyemplung ke air. Ripple effect. Kadang ada juga yang CSS-nya konflik. Harusnya teks warna merah, dikasih CSS jadi warna biru, lalu ada tombol yang latar belakangnya biru juga jadi lah teks ga kebaca.

Jadi kalo ada waktu dan mungkin lagi pengen belajar sesuatu yang baru — sementara mungkin belum terbiasa dengan bahasa pemrogaman seperti HTML dan CSS, gw saranin belajar HTML dan CSS deh. Seru lho.

HTML

HTML (Hypertext Markup Language) itu sebenernya cukup “terus terang”. Ada teks yang mau dibikin tebel seperti ini; nah itu nulis kodenya gimana?

Di HTML, ada istilah ‘b’ yang artinya ‘bold’. Tebal. Atau ‘strong’. Sebenernya fungsinya sama, cuma lebih ke konteks. ‘Bold’ itu artinya ya menebalkan huruf, sementara ‘strong’ itu lebih ke… Membuat sebuah karakter lebih bisa terbaca. Lebih jelas gitu.

Jadi kaya contoh di atas, mau bikin tulisan “seperti ini” dan tebal. Nulisnya gimana?

<strong>seperti ini</strong>

Atau…

<b>seperti ini</b>

Mungkin biar lebih jelas, bisa pake kalimat dengan tampilan yang berbeda ya 🙂

Misalnya, kalimat begini:

“Jangan sebut aku perempuan sejati jika hidup hanya berkalang lelaki. Tapi bukan berarti aku tidak butuh lelaki untuk aku cintai.”

Kalo dilihat dari kutipan di atas, yang perlu diset dalam HTML adalah kata “jangan” (tebal) dan “bukan berarti” (miring/italic). Jadi kalo dalam kode HTML, gimana? Nah, kalo untuk menebalkan tulisan bisa pake “b”, kalo untuk membuat tulisan miring/italic, bisa pake “i” (atau “em” dari “emphasis“.)

"<b>Jangan</b> sebut aku perempuan sejati jika hidup hanya berkalang lelaki. Tapi <i>bukan berarti</i> aku tidak butuh lelaki untuk aku cintai."

Nah, semoga cukup jelas ya 🙂 Ini semacam pengenalan awal mengenai HTML. Menyenangkan lho!

CSS

CSS. Cascading Style Sheet. Cascade itu secara harafiah seperti air terjun. Tumpah blar dari atas. Jadi kalo HTML di atas itu kita musti masukin kodenya satu-satu per kata, CSS ini macem temen baiknya yang membantu pekerjaan HTML sedikit lebih mudah. Macem sidekick gitu lah.

Kok kaya air terjun? Jadi gini, CSS itu sederetan kode dengan perintah-perintah tertentu yang menentukan sebuah elemen dalam kode itu ditampilkan. Dalam CSS, ada yang namanya “id” dan “class”. Kita bisa menulis perintah untuk class atau id yang spesifik, dan diterjemahkan di HTML.

Bingung? Sama, hahaha.

Jadi misalnya ada kode CSS berikut:

h1 {
text-align: center;
color: blue;
font-size: 40px;
}

Itu berarti setiap kode HTML yang ada gerbang pembuka (dan penutup) berupa “h1”, akan berwarna biru, berukuran 40 pixel (guede itu), dan lokasinya di tengah area tulisan/center.

Lho, kok ini memudahkan? Emang kaya gimana sih memudahkannya?

Kalo ga ada CSS, kebayang ga musti nulis setiap nulis kode? Terus di satu halaman itu butuh 50 “h1”?

<h1 align="center" color="blue" font-size="40px">Heading Here</h1>

Ngirim kode ke gebetan aja setengah mati, apalagi ini nulis kode begini mulu tiap ngetik apa ga setengah idup jadinya. Dengan CSS, cukup aja nulis gini:

<h1>Heading Here</h1>

Wis itu thok. Udah otomatis langsung ke-set warna biru, ukuran tulisan nganu, posisi teks nginu.

Jadi CSS itu ibarat, “POKOKNYA kode HTML yang identitas atau class-nya anu, mempunyai tampilan yang inu! Lu cukup ngetik ID atau class aja cukup.”

Tapi jujur ya, se… ‘Gampang-gampang’nya CSS, makin banyak pake CSS, makin pusing, hahaha. Serius. Ada lagi nanti tuh macem “blog.page”, terus “blog-id-5839”, opo meneh kuwi, hahaha. Tapi seru lho, beneran.

Buat yang ingin belajar atau cukstaw soal HTML dan CSS, boleh cek-cek lho di sini:

• W3Schools: CSS
• W3Schools: HTML
• WordPress Support: CSS Basics

“Kayanya asik tuh belajar CSS dan HTML!” (said no one ever) “Gimana caranya kalo mau liat HTML dan CSS di website gw ya?”

Biasanya disebutnya itu backend. Alias dapurnya. Nah, kalo lu punya deretan file-file website (dan kalo lu paham musti buka yang mana, gw yakin lu ga butuh baca tulisan blog ini, hahaha,) itu cari yang berakhiran .css dan .html.

Atau kalo mau iseng, misalnya lagi keliaran di website nih, bisa pake web inspector yang biasanya ada di browser.

Kalo pake Chrome, bisa klik View > Developer > Developer Tools.

Kalo pake Safari, bisa aktifkan Advanced dulu (Safari > Preferences > Advanced > “Show Develop menu in menu bar”) lalu baru klik Develop > Show Web Inspector.

Kalo pake Firefox, bisa klik Tools > Web Developer > Inspector.

Kalo pake Internet Explorer, lu ngapain sih kurang gawean mbok ya download aja itu Firefox atau Chrome pake IE hadeh.

Ketika kita paham, atau minimal ngeh lah, gimana sesuatu hal itu bekerja, Insya Allah mudah untuk ngutak-ngutiknya 🙂