Abang Webmaster » Berita Terkini 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 Belajar Joomla RM999 http://www.abangwebmaster.com/belajar-joomla-rm999/ http://www.abangwebmaster.com/belajar-joomla-rm999/#comments Sat, 25 Apr 2009 18:45:06 +0000 Abang Is http://www.u-remit.com/webmaster/web/?p=352 Salam sejahtera untuk adik-adik yang abang kasihi sekelian. Diharap adik-adik semua berada dalam keadaan sihat selalu. Bagaimana adik-adik menghabiskan malam minggu sebegini? Diharap adik-adik melakukan aktiviti yang berfaedah. Abang baru saja pulang dari berjumpa dengan rakan-rakan abang.

Kami gemar berjumpa setiap hujung minggu bertukar-tukar fikiran sambil mencuci mata pada suasana malam minggu. Aktiviti beriadah ini amat bagus untuk para designer bagi mendapatkan ilham.

Ketika sedang rancak berbual dengan rakan-rakan, seorang kawan abang telah memberitahu tentang wujudnya sebuah lagi laman web yang mengajar orang membina laman web. Mengikut cerita kawan abang, laman web syarikat itu mengenakan charge yang mahal untuk belajar Joomla. Ya.. bagi adik-adik abang yang tidak tahu apa itu Joomla… jangan salah faham.. Jomlaa sebenarnya tiada kaitan dengan perkataan Jom Lah. Joomla adalah satu sistem open-source yang boleh adik download secara percuma di Internet.

Dari cerita kawan abang itu, kami semua berasa sangat excited untuk melihat sendiri laman web syarikat itu. Malangnya, kami semua tidak canggih seperti Webmaster-webmaster lain yang mempunyai handphone mahal yang boleh online Internet dengan menekan 1 butang. Kami semua terpaksa pulang ke rumah masing-masing untuk melihatnya sendiri.

Dalam perjalanan pulang abang tak sabar untuk sampai ke rumah dan membuka laman Web syarikat tersebut. Apabila sampai dirumah dan selesai mandi, abang pun membuka laman Web itu. Heh… lawak juga abang membaca ayat-ayat disitu.

Ntahlah adik-adik, abang pun hairan sekarang. Semua orang nak ajar orang buat web. Dah pulak tu mahal. Sepatutnya benda-benda Open-Source ni tak perlu belajar. Adik-adik boleh membacanya di Internet. Lainlah kalau adik-adik menghadiri kelas untuk belajar dan mahirkan diri bagaimana untuk design themes atau template bagi semua program Open-Source ini.

Contohnya, kenapa tiada orang yang buat kelas bagaimana untuk design themes wordpress yang hebat??? Itu adalah salah satu cara untuk membuat pendapatan secara online. Ya… adik boleh menjual themes WordPress di Internet. Hmm… kat bawah ni abang tunjuk sikit ayat-ayat yang digunakan oleh syarikat tersebut. Abang harap adik-adik abang yang selalu membaca blog abang ini tidak menggunakan design atau ayat-ayat berikut kerana adik akan nampak tidak PRO! Malah web adik itu nanti akan nampak lebih kepada web AH LONG Bukit Beruntung.

siapa2


]]> http://www.abangwebmaster.com/belajar-joomla-rm999/feed/ 20 AbangWebmaster.com http://www.abangwebmaster.com/abang-webmaster/ http://www.abangwebmaster.com/abang-webmaster/#comments Tue, 21 Apr 2009 14:29:28 +0000 Abang Is http://www.u-remit.com/webmaster/web/?p=176 Mesti ramai yang bertanya kenapa abang menggunakan nama AbangWebmaster.com. Sebenarnya laman blog ini saja abang bangunkan sebab abang kesian melihat adik-adik abang yang selalu ditipu sebab nak miliki website sendiri. Selalu abang baca paper, abang akan lihat iklan-iklan tentang website yang kebanyakkannya hanya mengaut keuntungan kepada syarikat sahaja. Macam-macam nama yang selalu abang tengok. Monsun.biz, MyPortal, BlogStarz, kak sherry, kak nora dan macam-macam lagi. Ada yang pakai cara land-lord, supermarket, SMS Whizz, dan macam-macam lagi sampai abang sendiri pun dah lupa. Harga package mereka tu semua… uishh.. mahal. Nak jadi landlord website pun sampai RM30 ribu. Kalau Rm30 ribu tu.. baik beli tanah dan bela kambing. Time raya boleh la jugak untung. Sambil-sambil tu boleh laah.. tanam-tanam rumput dgn jaggung sama.

Abang juga pernah diajak oleh seorang kawan abang menghadiri seminar yang diadakan oleh sebuah syarikat errr… apa nama… EDORY kaa EDORAY.. ntahlah. Abang pun dah lupa.  Syarikat ni menjalankan perniagaan laman web dan produk utama mereka ialah MyPortal. Malam tu ramai juga yang hadir. Semua dari golongan yang betul-betul teringin nak ada website sendiri. Kesian abang tengok mereka tu semua. Masa seminar tu, ada sorang jurucakap yang bercerita tentang sejarah website. Dia menunjukkan slide show Power Point yang tulisannya semua boleh fade-in dan fade-out. Semua yang hadir terkebil-kebil biji mata kerana berasa sangat hebat. Jurucakap itu juga ada bercerita tentang mereka-mereka yang telah berjaya dalam dunia Internet. Antara yang terlibat ialah founder MSN, Yahoo!, Google, Amazon dan Ebay.

Abang pasti, masa tu semua yang hadir pasti berasa semangat dan ingin ikut jejak mereka yang telah berjaya itu. Memang tak salah untuk berjaya seperti mereka-mereka tu, tapi cara yang dilakukan oleh syarikat-syarikat seperti MonsunBiz, MyPortal, BlogStarz ni bukannya nak menolong mereka yang memerlukan website ini. Syarikat ini semua hanya mahukan keuntungan saja. Bila orang dah beli produk mereka, nasib sendiri lah nak buat apa dengan web tu. Kalau tak percaya adik-adik bolehlah pergi melihat laman web mereka yang telah membeli produk-produk  syarikat-syarikat berkenaan.

Owh yaa… lupa nak cerita pula… di akhir seminar, syarikat itu telah membuat open table supaya mereka yang hadir membeli produk MyPortal tu. Abang ada tengok ada 2 orang awek yang pergi berjumpa jurucakap masa seminar tadi dan mereka kata nak pergi tekan duit di ATM machine. Boleh tunggu sat tak!?? Heh… Kalau awek tu jumpa abang tak perlu bayar RM500 pun. Abang buat free saja kalau mereka betul-betul nak Website. Boleh juga abang ada PENPAL. Malam tu ramai juga yang beli produk MyPortal tu. Hmmm.. abang tak beli la. Abang cuma ambik business kad sorang mak long yang jadi tukang tulis nama di seminar tu. Mak long tu pun ada website jugak. Heh. Tak payah la abang tunjuk kat sini. Kesian dia. Dia cuma cari makan.

Sekarang ni, wujud pula Jutawan E-Book yang nak ajar orang buat website. Macam-macam yang mereka tulis sebab nak jual e-Book. E-book tu bukan mereka tulis pun tetapi di Copy Paste saja. Benda tu semua boleh dapat free di Internet. Ada pula yang menjual CD Grafik. Benda tu pun boleh dapat free di Internet jugak. Kalau dah benda free bagi free sajalah pada orang lain supaya dapat dikongsi bersama.

Sejak dari itu abang sentiasa memantau aktiviti-aktiviti mereka ini. Lama-lama abang tengok makin ramai yang buat benda ni. Sampai yang baru tingkatan 5 pun nak ajar orang buat website. Abang tak kisah lah, kalau website website budak tingkatan 5 tu power. Tapi website pun hanya pakai minisite. Pada abang, budak-budak sekolah tu patut study saja, terutama subjek SEJARAH. Sebab zaman sekrang ramai budak sekolah tak tahu sejarah negara.

Heh. Oklah adik-adik, tak perlu lagi abang cerita panjang. Pasal lagi panjang abang tulis, nanti ada orang yang terasa hati pulak.. Ni pun abang boleh rasa ada orang kurang puas hati dengan abang dan kawan-kawan webmaster abang kerna mewujudkan laman web ini. Tapi itulah kan dah nama pun INTERNET..

Tataa.

]]> http://www.abangwebmaster.com/abang-webmaster/feed/ 5