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..
saya kagum dengan usaha saudara. gaya penulisan santai abis! teruskan usaha.
Abang juga kagum dengan cara adik menulis di techmalaya. Abang selalu masuk tu tau =D Cuma tak pernah komen la, hehe..Segan sebab tak pandai english, huhu
Abe Zai, napa fail css tuh x befungsi bila sy wat??
Maseh gak jd putih. Nape eh??
aku pun kagum dgn gaya penulisan. memang nak bace lah. heh. lepas ni sape2 yang nak mintak tolong ajar CSS, bagi link website ni je la.
Kaedah yg bagus Abang Zai comment setiap line CSS tu. maybe boleh bagi link ke senarai HEX colour (cth http://html-color-codes.com/ ) supaya mereka2 boleh try color2 lain tu.
caya la bro.. semua kagum gan abg zai.. saya pun kagum2..
sambil belajar kita gelak.. santai jerh..
layanz…
a’ah tak berfungsi gak bila saya try td.. cukup aneh…
cuba ganti:
background:#000;
dengan:
background-color:#000;
Kepada semua yang tak berjaya, abang dah dah tanya dukun tadi, dia cakap ini bukan masalah dari CSS, hehe..
Jawapannya ialah, pada fail HTML tu, adik-adik kena betulkan curly quotes aka double quotes tu dulu. Ini contohnya:
” <– Ini kalau adik-adik copy paste dari artikel ni, memang akan jadi lain, penyelesainnya ialah, adik-adik kena taip sendiri kod di atas dalam editor teks adik-adik semua. =D
Selamat mencuba, nanti lepas abang zai mandi, abang betulkan artikel ni supaya semua orang takkan ada masalah.
Kepada adik Flisterz, terima kasih di atas cadangan tersebut, nanti abang updet entri ni balik dengan memasukkan url hex color code tu, hehe..
Eriyza dan kill-vearn boleh tengok komen abang yang kat atas untuk menyelesaikan masalah tu, abang jamin, lepas ni gerenti jadi, InsyaAllah, hehe..
Kepada biskut tiger, abang tak sampai tahap tu lagi yang boleh dikagumi, tunggu abang bukak studio sendiri dulu, lepas tu baru leh kalau nak kagum2, hehe..
abag zai…kan kita kena buat dua kali file ‘index.html’ so kita kena replace ke?
Sy8, Kena buat satu fail saja, dan kita memang kena replace pun sebenarnya kod-kod tu, hehe..
berjaya akhirnya..mekasih abg zai…
Abang pun tumpang gembira, hehe..Sama-samalah kita.
yg code css tu di tgh2 html ker?
krenyer kte ade 2 file ler? html.index ngan style.css kan?
Bukan ditengah, tapi di bahagian selepas tag .
Ya, pandai adik teka, memang ada 2 fail tu. =D
salam..hai abg zai, mmg berinformasi dan sangat membntu..( ^^, )
Salam..
kagum gaya penulisan santai Bro.Zai. Konsep belaja ala santai.
Saya nak tanya bagaimana untuk gabungkan beberapa fail CSS jadi satu je. Supaya mudah, kemas dan cepat web tu nak bukak..bahse melayunye..Fast appear..hehe.
Terima Kasih.
Salam Bro Zai..
ari tu saya ada tanya pasal cara nak gabungkan fail2 Css dan Javascripts jadi 1. Bila datang balik sini terkejut + panik bila tengok box coment saya dah ilang..tak pun memang saya yang tak jumpa.
Harap sangat Bro Zai dapat bantu sebab web saya banyak guna kedua tu.
Terima Kasih
Hi adik Hasfa, di dalam CSS terdapat satu function yang boleh menggabungkan beberapa file css yang lain tanpa menggunakan javascript. lihat contoh dibawah:
buat satu file CSS. Sebagai contoh, kita beri nama ‘semua.css’. Kemudian, didalam file ‘semua.css’, masukkan code dibawah(pastikan adik menggunakan double-quote):
@import url("style1.css");
@import url("style2.css");
@import url("style3.css");
Jadi di dalam header file HTML adik, cuma gunakan CSS ‘semua.css’.
Di harap info ini dapat membantu adik.
Terima Kasih Atas Jawapan Bro Lie..nanti saya buat seperti yang bro ajar tu..Kalau untuk gabungkan Javascripts pun boleh gunakan kaedah yang sama juga ke? hehe..sori..banyak tanya..
.Terima Kasih sekali lagi
Salam Abg Lie.
ni contohnya..cadang nak gabungkan untuk jadikan 1 javascripts je.
web yang bagus untuk mereka yang tak tahu ape2 tentang css.. Terima kasih sangat2.. Akan subcribe utk feed sterusnya..
abang, sedikit cadangan disini. apa kata abang buat REPLY TO COMMENTS. senang pembaca nak tgk samada komen diorang telah dibalas oleh abang atau belum. hee..
tutorial diatas sangat seswai utk yg baru nak belajar css. banyak-kan lagi tutorial2 css ni. jgn lupa yg advanced jugak. aku pun tak pandai yg advanced ni. cthnya css utk html yg coding drp psd.
insyaAllah.. akan diusahakan.
Salam Bro Lie.. agak lama tak datang web nih. sejak last post tu. Banyak membantu saya tentang CSS ni. Terima Kacih daun keladi atas tutor berguna free plak tu. moga Tuhan je yg balas ilmu yg bermanafaat nih. Kalau ada lapang harap Bro Lie boleh datang ke web sy komen ape je untuk sy perbaiki ape2 yg kureng. Terima Kasih .
abang…. leh adik minta tolong sikit? hehe
cmna nak buatkan paparan nmpak ok guna internet explorer? guna browser lain ok pulak. ada apa2 kena tambah kat css utk tujuan itu?
adik baru belajar nk buat tema utk wordpress ni. abang tolong ye…
bye abang… heheh
Salam Abgweb. Selamat Berpose.
Mintak Maaf jika soklan saya agak lari dari tajuk CSS.
1/Bagaimana nak “combine javascripts yang berjenis2 jadi 1 je.
2/nak panggil semua (JS) tu dari html kira external.
Terima Kasih
Salam Abang Zai Dan Rakan2. Sure Abg Zai agak bz nih. Lama tiada post terkini di pages ni.
Jika Abg Zai tak keberatan. Pasal combine javascripts tu tersangat la penting untuk saya lajukan load portal saya. Terima Kasih.