Abang Webmaster » css http://www.abangwebmaster.com buat website bukan susah . mai abang tunjuk Tue, 22 Jun 2010 02:21:42 +0000 en hourly 1 http://wordpress.org/?v=3.0 Siri 1: Konsep Asas CSS http://www.abangwebmaster.com/siri-1-konsep-asas-css/ http://www.abangwebmaster.com/siri-1-konsep-asas-css/#comments Fri, 08 May 2009 12:46:07 +0000 Abang Zai http://www.abangwebmaster.com/?p=567 Hi adik-adik semua. Bertemu lagi kita di dalam siri mari mengenal CSS dan XHTML. Abang mintak maaf sebab lama tak menulis kat sini. Ini kerana abang terpaksa bertapa di Gunung Jerai demi memantapkan lagi ilmu abang untuk mengajar adik-adik semua. Ok la, tanpa membuang masa lagi, untuk adik-adik yang skip kelas sebelumnya, abang sarankan supaya adik pergi membaca dahulu entri pertama dalam siri ini. Kepada adik-adik yang telah pun baca, abang harap semuanya sudah bersedia dengan perkakasan yang abang suruh pasang sebelum ni.
Hari ni kita akan mula menulis kod HTML dahulu buat permulaan.

“Abang! Tadi abang cakap ni siri mari mengenal CSS dan XHTML, kenapa abang nak tulis pasal HTML pulak dah?!“. Sabar dulu adik-adik abang yang dikasihi sekalian. Untuk pengetahuan adik-adik, HTML adalah asas yang penting untuk kita memahami CSS dan XHTML. Di bawah, abang ada tunjukkan contoh kod HTML:

<html>
<head>
<title>Laman HTML pertama saya!</title>
</head>

<body>

<h1>Selamat datang ke laman HTML pertama saya. Woot!</h1>
<p>Hai kawan-kawan! Ini laman web HTML pertama saya. Saya dapat buat semua ni lepas belajar dengan <a href=”http://www.abangwebmaster.com”>AbangWebmaster</a>.</p>

</body>
</html>

Sekarang, abang rasa elok adik-adik semua bukak editor teks masing-masing, Notepad++ contohnya. Copy dan paste kod yang abang dah tulis kat atas ke dalam editor teks adik-adik semua. Simpan sebagai index.html. Simpan di sini bermaksud, adik-adik kena save kan kod tadi dengan nama index.html. Jangan pi simpan dalam laci pulak tau, kalau simpan kat desktop kira ok lagi.

Ok, dah sudah? Bagus adik-adik, abang tau adik-adik semua boleh buat kerja senang ni. Sekarang, klik kiri dua kali pada fail HTML yang kita dah buat tadi, iaitu index.html. Adik-adik akan dihidangkan dengan paparan laman web HTML adik. Tahniah abang ucapkan kerana berjaya menulis sendiri laman web HTML adik, ok abang faham, bukan tulis sendiri, tapi cuma copy dan paste sahaja. Abang harap, lepas ni adik-adik boleh praktis tulis sendiri kod-kod mudah ni, barulah cepat proses pembelajaran kita nanti.

Untuk pengetahuan adik-adik, begitulah rupanya laman web HTML adik-adik jika tiada bahan kosmetik dari CSS. Sebab tu la nampak putih dan suci macam iklan produk Zaitun, kan? Aha, sekarang mai kita mekap laman web adik-adik ni dengan CSS, baru la nampak berseri dan ceria skit. Hehe..Seperti biasa, bukak editor teks adik-adik, dan salin semula kod di bawah untuk menggantikan semua kod di dalam index.html tadi. Kalau adik-adik nak dapat markah bonus, adik-adik boleh taip kod yang abang dah tebalkan(bold) di baris ke-2 kod di bawah.

<html>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
<head>
<title>Laman HTML pertama saya!</title>
</head>

<body>

<h1>Selamat datang ke laman HTML pertama saya. Woot!</h1>
<p>Hai kawan-kawan! Ini laman web HTML pertama saya. Saya dapat buat semua ni lepas belajar dengan <a href=”http://www.abangwebmaster.com”>AbangWebmaster</a>.</p>

</body>
</html>

Kalau dah selesai, simpan seperti biasa dengan nama fail index.html. Seterusnya, kita akan membuat fail CSS pula, mesti adik-adik gembira kan? Abang tau dah, hehe..Ok, sekarang, buat satu fail baru menggunakan notepad++(Adik-adik boleh tekan butang kibod Ctrl+C sebagai kekunci pintas, ni ala-ala pintar pintas jugak la ni kiranya). Adik-adik boleh salin, atau taip sendiri untuk mendapatkan markah bonus, kod-kod CSS di bawah:

/* Ini fail css*/

body
{
background:#000;
font-family:georgia, arial,verdana;
font-size:14px;
color:#fff;
}

a
{
color:#33cc22;
border-bottom:1px dotted #ccc;
text-decoration:none;
}

a:hover
{
color:#fff;
background:#33cc22;
}

h1
{
font-size:50px;
font-style:italic;
}

p
{
font-size:20px;
}

Dah sudah? Sekarang, simpan fail tadi sebagai style.css, dan letakkannya di dalam direktori yang sama di mana tersimpannya fail index.html tadi. Sekarang adik-adik boleh refresh laman web HTML adik tadi, dan tengok kesan kosmetik yang telah kita jalankan dengan arahan CSS.

Kemaskini: Untuk mengelakkan masalah, abang sarankan supaya adik-adik menaip sendiri kod di atas supaya peratusan adik-adik untuk berjaya menjadi lebih tinggi. Abang ingat nak kena pasang plugin untuk paparkan kod dengan lebih ekselen selepas ni.

Tada! Dah nampak lain bukan? Dah jadi hitam legam. Kenapa hitam? Sebab abang suka dengan iklan dulu-dulu yang suka dengan warna hitam, contohnya macam iklan Perilly’s yang selalu cakap, “Hitam itu keunggulan!”. Ok lah, sori sebab tadi abang tersyok sendiri pulak, ni kalau adik dah puas belek laman web tu, abang nak terangkan pula secara komprehensif arahan-arahan CSS yang kita dah tulis tadi, yang mana telah memberi kesan mendalam terhadap laman web HTML adik-adik.

Sila lihat dengan perasaan cinta dan kasih sayang untuk penerangan yang abang nak huraikan di bawah:

/* Ini fail css*/

body /*Ini untuk menggayakan tag <body> di dalam fail HTML*/
{
background:#000; /* Ini untuk menukar warna latar belakang kepada hitam(mengikut kod warna hex) */
font-family:georgia, arial,verdana; /* Ini untuk menentukan mukataip yang akan digunakan */
font-size:14px; /* Ini untuk menentukan saiz mukataip bagi semua tag <p> di dalam <body>*/
color:#fff; /* Ini pula untuk menentukan warna mukataip bagi semua tag <p> dan <h1>, <h2>, dan seterusnya…*/
}

a /* Ini untuk menggayakan tag <a href=”#”>, ataupun pautan/links */
{
color:#33cc22; /* Ini untuk menentukan warna bagi teks pautan */
border-bottom:1px dotted #ccc; /* Ini untuk menambah garis titik-titik di bawah teks pautan */
text-decoration:none; /* Ini untuk menghilangkan penggayaan garis default di bawah pautan */
}

a:hover /* Ini pula untuk menggayakan teks pautan apabila kita meletakkan cursor mouse di atas pautan*/
{
color:#fff; /* Ini untuk warna teks pautan apabila cursor mouse diletakkan di atas pautan */
background:#33cc22; /* Ini pula untuk warna latar belakang bagi teks pautan apabila cursor diletakkan di atas pautan */
}

h1 /* Ini untuk menggayakan heading <h1>*/
{
font-size:50px; /* Untuk menentukan saiz mukataip untuk <h1>*/
font-style:italic; /* Ini pula untuk menyengetkan tulisan teks */
}

p /* Ini untuk menggayakan tag <p>*/
{
font-size:20px; /* Menentukan semula /Overwrite saiz mukataip untuk tag <p>, yang sebelumnya sudah ditentukan pada tag <body> */
}

Untuk menyenangkan adik-adik, abang telah menebalkan kod CSS, dan telah menyengetkan komen untuk penerangan. Baik kan abang Zai? hehe..

Kemaskini: Adik Flisterz ada memberi URL ke rujukan HEX color code untuk memudahkan adik-adik mencari kod warna. Terima kasih abang ucapkan.

Untuk menjadikan proses pembelajaran kita lebih berkesan dan ekselen, abang sarankan supaya adik-adik bermain-main dahulu dengan menukar nilai-nilai kod warna, saiz, dan jenis mukataip yang abang gunakan. Jangan risau, komputer adik-adik tidak akan meletup sekiranya adik-adik tersalah taip arahan CSS. Kalau adik-adik tersalah jugak, adik-adik boleh kembali ke blog ni, dan tengok balik kod-kod tu semua.

Rasanya, itu saja untuk kelas kita hari ini, ini pun abang dah rasa cukup penat dah, rasa macam jari nak tercabut pun ada, maklum la dah berumur, lain la macam adik-adik, sihat dan kuat lagi sebab selalu makan biskut tiger.

Oh ya, ini rujukan tambahan untuk adik-adik semua sebagai tanda kasih sayang abang.

Sekiranya adik-adik ada soalan, jangan pendamkan dalam hati, kelak merana dikemudian hari. Lontarkan saja pertanyaan dan kegusaran adik ke rungan komen. Abang Zai sedia menjawabnya dengan hati yang terbuka. Hehe..

]]> http://www.abangwebmaster.com/siri-1-konsep-asas-css/feed/ 28 Perkakasan untuk belajar CSS dan XHTML http://www.abangwebmaster.com/perkakasan-untuk-belajar-css-dan-xhtml/ http://www.abangwebmaster.com/perkakasan-untuk-belajar-css-dan-xhtml/#comments Sun, 03 May 2009 09:07:17 +0000 Abang Zai http://www.abangwebmaster.com/?p=518 Hai adik-adik semua. Di petang hari ahad yang lapang ni, abang nak menulis tentang apa yang adik-adik perlukan untuk membolehkan kita belajar CSS dan XHTML dengan lebih berkesan. Sebenarnya abang nak tunggu dalam 2,3 hari lagi, nak biarkan adik-adik semua rindu banget kat abanglah kononnya. Tapi nasib baik abang ni jenis tak suka mengabaikan adik-adik semua. Hihihi…

Baiklah, cukuplah abang mengada-ngada sekejap tadi. Seperti mana-mana subjek, contohnya subjek lukisan. Kita kena ada perkakasan seperti kertas lukisan, berus mewarna, water kaler, palet, pensel, dan air. Maka, begitulah juga dengan CSS dan XHTML. Oh ya adik-adik, mengapa abang turut mengaitkan XHTML? Untuk pengetahuan adik-adik, CSS dan XHTML bagaikan ombak dan pantai, umpama lagu dan irama, yang tidak dapat dipisahkan lagi. Syahdu bukan?

Baik, sila kesatkan air mata yang berlinangan di pipi adik-adik. Jadi, untuk memperkasakan dan memudahkan pemahaman adik-adik tentang CSS dan XHTML, kita memerlukan beberapa perkakasan. Di zaman ekonomi yang tak menentu atau gawat ini, abang sedar yang kita perlu menyahut seruan kerajaan, iaitu dengan berjimat cermat. Jadi, abang akan cuba sedaya upaya untuk menyenaraikan perkakasan yang boleh didapati secara percuma. Di antaranya ialah:

  1. Sebiji komputer atau laptop. Ya, ini adik-adik kena beli sendiri, atau kalau nak mudah, pinjam dengan kawan-kawan. Abang tak kisah sama ada adik ni pengguna Windows, Mac OS X, atau Linux. Abang tidak akan membuat sikap pilih kasih di sini. Tapi adik-adik sila pastikan yang komputer/laptop adik-adik mempunyai sambungan internet. Ini untuk memudahkan adik-adik memuat turun perisian percuma, dan membaca artikel abang di sini.
  2. Editor teks — Untuk pengguna Windows, boleh guna notepad. Pengguna Mac OS X, boleh guna TextEdit, manakala untuk pengguna Linux, bolehlah guna GEdit(untuk Gnome), atau KEdit(untuk KDE). Namun, demi menjadikan proses pembelajaran semakin rancak dan menyeronokkan, abang sarankan adik-adik yang menggunakan Windows untuk mencuba Notepad++ yang boleh dimuat turun secara percuma. Adik-adik yang menggunakan Linux juga boleh mencuba perisian ini dengan bantuan TheWine. Malangnya, untuk adik-adik yang menggunakan Mac OS X, maafkan abang kerana tidak banyak perisian yang percuma untuk dicuba. Versi berbayar seperti Coda, dan Espresso sangat menarik. Tapi tu la, kena bayar.
  3. Adik-adik perlu ada sekurang-kurangnya 3 jenis pelayar web yang berbeza. Pelayar web yang abang sarankan ialah, Firefox, Opera(atau boleh guna Chrome), dan Internet Explorer 6, dan Internet Explorer 7. Pelayar web utama yang akan kita guna ialah Firefox, diikuti oleh Internet Explorer 6 dan 7 untuk melihat sama ada munculnya bug di dalam kod CSS kita. Manakala Opera atau Chrome sebagai langkah berjaga-jaga kita untuk memastikan laman web kita bebas dari segala masalah kompatibiliti.
  4. Oleh kerana pelayar web utama yang akan kita guna ialah Firefox, maka kita akan mengoptimakannya lagi dengan memasang 2 addon, iaitu Web Developer Toolbar, dan Firebug. Jangan risau, abang akan tunjukkan nanti cara-cara menggunakan addon ini kelak.
  5. Selain tu, adik-adik perlu kentalkan diri masing-masing, dan tanamkan sikap tidak mudah mengalah. Ini penting untuk mengelakkan adik-adik kecewa di hari kemudian akibat kecewa kerana tidak dapat menguasai CSS dan XHTML. Pesan abang, CSS dan XHTML akan menjadi mudah sekiranya adik bersikap terbuka dan ada kesungguhan untuk belajar.

Rasanya itu sahaja yang adik-adik perlukan, selain komputer dan yuran internet, semuanya adalah percuma. Hatta, adik-adik tak perlu membayar yuran walaupun sekupang untuk belajar CSS dan XHTML di sini. Hehe..

Selepas ni, InsyaAllah kita akan mula belajar untuk menguasai konsep CSS dan XHTML. Jangan lupa tau untuk pasang perisian-perisian yang abang dah tulis kat atas.

Sampai bertemu lagi, tata titi tutu.

]]> http://www.abangwebmaster.com/perkakasan-untuk-belajar-css-dan-xhtml/feed/ 15 Mari berkenalan dengan CSS http://www.abangwebmaster.com/mari-berkenalan-dengan-css/ http://www.abangwebmaster.com/mari-berkenalan-dengan-css/#comments Sat, 02 May 2009 10:17:01 +0000 Abang Zai http://www.abangwebmaster.com/?p=414 Hai semua. Untuk pengetahuan adik-adik, Abang Zai merupakan penulis baru di sini. Walaupun baru, pengalaman abang dalam bidang pembangunan web tidaklah terlalu baru. Abang telah mula membangunkan laman web sendiri pada tahun 2002. Tapi, abang mula serius dalam bidang ini pada tahun 2006 dengan kemunculan WordPress.

Oh ya adik-adik, zaman itu(tahun 2002), laman web berorientasikan Flash tersangatlah popular. Orang tak pandang langsung laman web yang guna table dan grafik yang statik. Abang rasa mereka pada zaman itu tak sedar diri sebab talian internet ketika itu cumalah sekitar 56kpbs, Streamyx pun takda lagi zaman tu. Abang pun salah seorang dari mereka yang tak sedar diri ketika itu dek terpegun dengan kecanggihan teknologi Flash dari Adobe.

Sungguh pun demikian, ada juga di antara pembangun laman web yang tak pandang langsung Flash ketika itu. Mereka lebih gemar mengikut piawaian yang ditetapkan oleh W3C. Piawaian yang ditetapkan itu ialah Web Standards. Ya adik-adik, zaman sekarang, ramai yang bercakap perihal Web Standards walaupun benda ini sudah lama berada di persada internet.

Sebelum Abang Zai mengomel bukan-bukan dan off-topic, salah satu teknologi yang ditetapkan oleh W3C ketika itu ialah penggunaan StyleSheet di dalam dokumen HTML untuk tujuan penggayaan(Styling). Bermula dengan versi CSS 1.0, CSS 2.1, dan kini sudah mencapai versi CSS 3(walaupun belum semua pelayar web menyokongnya). Untuk pengetahuan adik-adik, CSS dicipta oleh Håkon Wium Lie, yang kini sedang berkerja sebagai CTO di Opera. Ya adik-adik, Opera ialah sebuah syarikat yang membangunkan pelayar web Opera.

Kemaskini: Tadi Abang Zai terlalu ghairah sampaikan terlupa nak selitkan contoh kod CSS dalam artikel ni. Sakit jugak kepala Abang Zai lepas kena sekeh dengan Abang Lie tadi. Abang Zai harap adik-adik tidak marah kepada abang. Ini contoh kod CSS, supaya adik-adik tidak tersilap selepas ini:

?View Code CSS
body
{
background:#ccc url(images/bg.png) repeat;
background-attachment:fixed;
font: 76%/115% georgia,verdana,Arial;
text-align:left;
line-height:20px;
color:#666;
}

Nota: Jangan risau, abang takkan lupakan janji-janji manis abang terhadap adik-adik semua. Abang akan menulis dengan lebih komprehensif dan ekselen lagi selepas ini tentang CSS.

Kita tinggalkan dulu sejarah tentang CSS, kerana Abang Zai tahu, adik-adik kurang gemar belajar sejarah. Baiklah, CSS atau akronim untuk Cascading Style Sheets merupakan bahasa penggayaan/skrip(Styling/Scripting Language), dan bukannya bahasa pengaturcaraan(Programming Language). Jadi, tujuan CSS dibuat hanyalah untuk menggayakan dokumen HTML/XHTML supaya menjadi seperti rekabentuk yang kita inginkan.

Persoalannya di sini, kenapa kita perlu gunakan CSS ya adik-adik?

Di sini, biar abang terangkan apa kelebihan menggunakan CSS untuk laman web:

1) Kepantasan dari segi loading laman web. Ya adik-adik, laman web adik-adik semua akan dipaparkan dengan lebih pantas, berbanding dengan laman web yang menggunakan Flash, atau pun laman web zaman kuno yang menggunakan table.

2) Kepantasan dari segi suntingan. Maksud abang di sini ialah, adik-adik tidak akan membazirkan masa ketika menyunting laman web adik. Contohnya, jika laman web adik-adik mempunyai 10 halaman, adik-adik cuma perlu menyunting SATU fail css sahaja, dan semua halaman tadi akan digayakan mengikut arahan-arahan CSS yang telah adik-adik ubahsuai. Seronok bukan? Jadi jangan bazirkan masa adik-adik kerana ustaz Abang Zai pernah berpesan, membazir itu amalan syaitan. Bukan abang yang cakap tau, ustaz abang yang cakap.

Sebenarnya adik-adik, ada banyak lagi kebaikan jika kita menggunakan CSS, tapi bagi Abang Zai, biarlah adik-adik yang merasai dan melihat sendiri kelebihan CSS. Tapi adik-adik perlu ingat, CSS pun ada kelemahan. Walaupun tidak ketara, tapi ada kalanya ianya agak menduga kesabaran kita sebagai pembangun laman web. InsyaAllah abang akan menulis tentang kelemahan CSS di masa depan.

Untuk mendalamkan lagi pengetahuan adik-adik tentang CSS, abang sarankan supaya adik-adik rajinkan diri untuk membaca artikel di w3schools, A List Apart, dan CssPlay. Atau adik-adik boleh menggunakan khidmat laman web enjin carian untuk belajar tentang CSS.

Pesan abang, jangan malas untuk membaca, dan jangan takut untuk mencuba. Tak pernah lagi abang dengar ada orang mati akibat kecewa apabila tidak dapat belajar CSS.

Babai adik-adik semua. Terima kasih kerana sudi membaca artikel Abang Zai kali ni.

]]> http://www.abangwebmaster.com/mari-berkenalan-dengan-css/feed/ 17