HTML intinya adalah elemen/struktur web, dan CSS adalah "penghias" serta
penyusun layout hingga sebuah halaman web memiliki interface yang unik
dan indah. Jika anda adalah blogger pemula, baik dalam konteks baru saja
membangun blog, atau bagi anda yang mulai risih dengan berbagai kode-kode yang belum dimengerti padahal harus berurusan dengan utak-atik template, inilah saatnya anda mulai menyadari bahwa coding merupakan syarat penting yang harus anda kuasai agar mampu mengutak-atik desain blog
sesuai yang diinginkan; sekurang-kurangnya anda wajib memahami apa itu
dasar HTML dan CSS dan bagaimana keduanya bekerja dalam membentuk
tampilan sebuah halaman web.
Meski pada awalnya anda harus berjuang mati-matian untuk bisa memahami
HTML dan CSS serta merasa asing ketika harus bersentuhan dengan
keduanya, semakin anda mempelajari dan mempraktekkan semakin mudah anda
membaca, memahami, dan menerapkannya dasar-dasar HTML dan CSS dengan
baik. Semua hanyalah masalah "alah bisa karena biasa." Semakin anda terbiasa, semakin mudah dan cepat proses pembelajarannya. Bisa dikatakan, memahami HTML dan CSS adalah syarat paling dasar
yang harus dipenuhi oleh seorang Blogger, jika ia ingin proses
ngeblognya berkembang dan sukses. Mengesampingkan hal-hal mendasar
demikian dan bahkan menyerah berarti sudah pasti si blogger tidak akan
berkembang.
Ada berbagai macam tutorial coding, dari paling dasar hingga advanced,
dari sekedar HTML dan CSS sederhana hingga XML, PHP, ASP, dan bahkan
hingga bagaimana merancang API. Semua tersedia gratis dan bertebaran di
muka bumi, eh maksudnya di web. Jadi, tidak ada alasan untuk bilang
susah karena tidak ada sarana belajar. Satu-satunya alasan kenapa kata
"susah" muncul adalah karena kemalasan, tidak ada yang lainnya.
Berikut adalah beberapa website pilihan saya, yang juga biasa saya
gunakan sebagai sumber belajar sekaligus test kode. Tutorialnya tersusun
dengan baik, dari dasar hingga advanced, bahkan sebagian besar
memiliki interface interaktif dimana anda bisa langsung melakukan
latihan dan ujicoba kode tanpa harus menggunakan software belajar
apapun. Fokus kita kali ini adalah HTML dan CSS untuk pemula, namun
tidak menutup kemungkinan terdapat tutorial lain, misalnya HTML5,
Javascript, PHP, ASP, ASPX, PERL, dan sebagainya, bagi anda yang sudah
begitu akrab dengan HTML dan CSS dan ingin mengembangkan yang lainnya.
Semua tertulis dalam bahasa Inggris, namun menurut saya cukup mudah
untuk diikuti dan dipahami.
1. W3 SCHOOLS (w3schools.com)
Siapa yang belum pernah dengar tentang situs ini? Bisa dibilang sebagai
situs terbesar dengan informasi, penjelasan, dan tutorial paling detil
mengenai berbagai hal yang berkaitan dengan desain dan pengembangan web.
Dalam hal HTML dan CSS, tentu saja ini adalah salah satu resource yang bisa diandalkan. Belum lagi berbagai interface interaktif-nya (Try it Yourself Editor)
yang bisa kita gunakan untuk latihan dari tingkat paling dasar hingga
advanced. Terdapat pula berbagai informasi dan tutorial javascript, HTML
5, bahasa pemrograman yang berkaitan dengan server (PHP, SQL, ASP,
dll), ASP.NET, XML, dll.
2. Code Academy (www.codeacademy.com)
Ini adalah situs yang paling sering saya kunjungi, terutama dalam
belajar dan bertukar pikiran soal pengembangan web (khususnya PHP, API,
dan Ruby). Yang paling saya sukai adalah fitur interaktifnya dimana anda
bisa langsung mempelajari sekaligus mempraktekkan berbagai level
pembelajar HTML dan CSS dengan tahap yang jelas, terstruktur, dan dengan
tutorial yang mudah diikuti. Jika anda ingin langsung melihat bagaimana
pembelajaran basic-nya, langsung tuju navigasi di footer, dan klik
HTML/CSS. Anda juga bisa mengawali pembelajaran dengan mengagumi
bagaimana kode-kode bekerja dengan mengisi kolom interaktif di halaman
depan. Bagi web developer dan pengagum coding, ini surga buat anda!
3. HTML.net
Jika anda lebih menyukai "penuturan" untuk memahami dan mencerna materi
HTML dan CSS, sekaligus ingin memahami esensi halaman website serta
berbagai elemen dan tag-nya, maka situs ini bisa menjadi sumber yang
tepat. Plus, anda bisa menggunakan Google Translate dengan mudah jika
anda kesulitan dalam memahami bahasa Inggris (hehe). Semua konten
memiliki struktur dan sistematika yang jelas, dari A sampai Z, jadi
cukup membantu proses pemahaman secara bertahap. Terdapat pula berbagai
tutorial lain seperti HTML5, PHP, ASP, dan Javascript.
4. HTML Dog (www.htmldog.com)
Masih sama dengan model website di atas, situs ini juga menyediakan
berbagai tutorial HTML dan CSS. Yang agak berbeda adalah konten dibagi
berdasarkan jenis elemen/tag (heading, title, list, link, tabel, form,
dan lain sebagainya), sehingga anda bisa masuk ke bagian tertentu secara
langsung. Terdapat pula tutorial javascript dasar dimana anda juga bisa
berkenalan dengan bahasa javascript.
5. CSS Easy (www.csseasy.com)
Mungkin bagi anda yang pertama kali masuk website ini akan kebingungan
dan menganggap remeh. Ya, situs ini hanya berbicara bagaimana CSS
digunakan untuk menyusun layout dasar. Tapi jangan salah, dengan
memahami bagaimana layout dasar sebuah halaman web, maka anda sudah
masuk ke gerbang awal desain template blog/web, dan memahami bagaimana
CSS digunakan sebagai penyusun layout. Terdapat dua jenis layout yang
variatif untuk dipelajari, yang pertama berupa fixed layout dan yang kedua berupa fluid layout (yang
kemudian bisa digunakan untuk menyusun dasar template responsive juga).
Cara yang digunakan untuk mempelajari cukup unik, klik salah satu
contoh layout, lalu klik kanan dan pilih "open page source" atau "view
source" untuk melihat kode-kode CSS di dalamnya. Simpan halaman tersebut
untuk bisa diutak-atik sesuai keinginan.
That's it and have a nice learning!
