Kalau terasa nak buat website atau laman web guna notepad secara percuma, korang boleh baca entri ni.
 |
| Sumber gambar |
Sebelum ni aku ada kongsikan tutorial cara2 nak buat website atau laman web guna notepad seperti di entri-entri berikut:
Tutorial 1: Buat website guna notepad (html)
Tutorial 2: Buat website guna notepad (html dan css)
Tutorial 3: Buat website guna notepad (navigation menu)
Kesemua tutorial aku kat atas ni tersangatlah basic sebab aku pun tak terror sangat pasal coding2 ni. Jadi, mungkin ada sesetengah di antara korang yang dah tahu lama dah apa yang aku sampaikan kat tutorial2 tu. Aku tahu ramai programmer2 yang hebat kat Malaysia ni. Aku buat tutorial ni pun saja2 je nak biar aku boleh refer balik bila2 masa nanti di samping dapat membantu orang lain yang tak tahu sangat pasal coding2 ni.
Jadinya, aku up la entri tutorial2 tersebut dengan harapan aku boleh refer balik kalau2 aku lupa benda yang aku dah belajar ni. Tak sangka pulak ada jugak orang yang terbaca dan rasa tutorial2 tu sangat membantu. Happy jugak la aku rasa bila apa yang aku buat ni membantu orang lain. Ye la...aku ni memang jenis yang suka tolong orang kan. Kalau dapat tolong orang tu....pehhh tak tau la nak cakap apa dia punya happy tu.... Kalau orang yang addicted dengan kerja tu orang gelar 'workaholic', aku pulak 'helpoholic' la.... Wuahahahah....ayat kau bro ley, tak nak kalah...
Ok2...enough! Untuk buktikan aku seorang helpoholic, makanya aku akan membantu, membantu lagi dan terus membantu. Hehe.....Kali ni tak banyak pun yang aku nak sampaikan. Kalau nak ikutkan, tutorial2 aku yang sebelum ni tu belum ada ajar lagi cara2 untuk upload coding yang dah siap tu pada web host/server. Aku cuma ajar cara2 nak save file kepada .html dan navigate website korang tu secara offline. Jadi, kali ni aku akan ajar macam mana nak bagi apa yang korang dah buat tu menjadi website yang real, berfungsi secara online dan boleh diakses oleh semua orang.
Yang paling penting cara ni free. Aku rasa ramai yang nak tahu benda ni. Sebab free kan...siapa tak nak.... Sebab aku dulu pun google jugak "cara2 nak buat website percuma", "How to make website for free", dan macam2 lagi. Last2 aku buat blogspot je. Free jugak kan. Kahkah....
Ok start je la tutorial...Banyak pulak aku merapu.
Let's begin.
Pernah dengar 000webhost.com? Kalau nak buat website sendiri dengan percuma kena sign up kat website ni dulu.
1) Sign up account korang kat 000webhost.com. Nanti akan keluar macam kat bawah ni korang isi la apa yang patut, (pilih free subdomain):
2) Lepas dah sign up, tunggu email dari diorang untuk aktifkan account.
3) Buka email korang dan klik pada link yang diberikan untuk aktifkan account.
5) Lepas log in, akan keluar macam kat bawah ni. Klik pada 'Go to CPanel'.
7) Lepas klik akan keluar macam kat bawah ni. Username korang akan diberitahu pada email dan biasanya kalau dah log in ianya akan automatik keluar kat field 'username' :
8) Dah isi username dan password, klik 'continue', maka akan keluar la macam kat bawah ni. Kemudian, klik pula pada folder 'public.html' :
 |
| File manager 000webhost |
 |
| Ni kat file manager aku. Kalau korang baru buat akan ada file 'defaul.php' |
11) Kalau nak upload coding2 yang ada pada notepad korang tu, save dulu file sebagai 'index.html' kemudian baru la upload. Make sure upload ke dalam folder 'public.html'.
 |
| Klik upload dan upload la file index.html korang sendiri |
12) Kalau macam aku, aku gunakan kod seperti pada tutorial 3: Buat website guna notepad (navigation menu) dan save as 'index.html'. Ini kod dia:
<head>
<title>Website caspositif</title>
</head>
<body><h>Selamat datang ke website saya!</h><br>
<ul>
<li><a href="http://caspositif.blogspot.com/">Home</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul><br>
<p1>Ini tutorial ke-3 buat website guna notepad</p1><br>
<p2>Tutorial kali ni kita belajar buat menu yang interaktif!</p2>
</body>
<style>
ul{list-style:none;}
ul li{display:inline-block;text-align:center;}
ul li a{text-decoration:none;font-size:20px;color:white;
background-color:grey;display:block;width:120px;height:30px;}
ul li a:hover{background-color:brown;}
h{font-size:40px;color:white;padding-left:40px;}
body{background-color:green;}
p1{font-size:18px;color:white;position:relative;top:40px;padding-left:50px;}
p2{font-size:25px;color:black;position:relative;top:80px;padding-left:50px;}
</style>
</html>
15)....Ini bermakna korang dah siap buat website sendiri menggunakan notepad secara percuma. Dan korang juga boleh teruskan menambah baik design website korang yang sedia ada tu dengan mengedit beberapa kod selepas ini.
16) Ohhh..bukan tu je, sekarang orang lain pun dah boleh akses ke website yang korang baru buat tu. Takde la korang syok sendiri je. Tak percaya yang orang lain pun boleh akses website korang??? Kalau korang tak percaya, korang boleh akses website yang aku baru buat ni:
caspositif.site88
17) Dah siap. Korang boleh la happy dengan website baru korang tu dan boleh la gelakkan website aku yang terlawa dalam dunia tu . kahkah... (nanti aku free, aku sambung tutorial ni bagi lawa sikit design website aku yang statik tu)
ul{list-style:none;}
ul li{display:inline-block;text-align:center;}
ul li a{text-decoration:none;font-size:20px;color:white;
background-color:grey;display:block;width:120px;height:30px;}
ul li a:hover{background-color:brown;}
h{font-size:40px;color:white;padding-left:40px;}
body{background-color:green;}
p1{font-size:18px;color:white;position:relative;top:40px;padding-left:50px;}
p2{font-size:25px;color:black;position:relative;top:80px;padding-left:50px;}
</style>
</html>
14) Kalau korang dah upload file 'index.html', file manager korang akan jadi macam ni:
15)....Ini bermakna korang dah siap buat website sendiri menggunakan notepad secara percuma. Dan korang juga boleh teruskan menambah baik design website korang yang sedia ada tu dengan mengedit beberapa kod selepas ini.
16) Ohhh..bukan tu je, sekarang orang lain pun dah boleh akses ke website yang korang baru buat tu. Takde la korang syok sendiri je. Tak percaya yang orang lain pun boleh akses website korang??? Kalau korang tak percaya, korang boleh akses website yang aku baru buat ni:
caspositif.site88
17) Dah siap. Korang boleh la happy dengan website baru korang tu dan boleh la gelakkan website aku yang terlawa dalam dunia tu . kahkah... (nanti aku free, aku sambung tutorial ni bagi lawa sikit design website aku yang statik tu)
Selamat mencuba!
Semoga korang beroleh manfaat daripada entri ini dan korang berjaya menjadi programmer yang hebat. Wuahahhah...
Salam.
Wow. Tutorial yang sangat berguna :) Thanks helpoholic!
BalasPadamHaha...takyah mention sgt helpoholic tu. Sesaja je tu nak menggedik sikit kat entri sendiri.
PadamYou're welcome. Harap entri ini bermanfaat kepada pembaca lain juga.
hebak mung! aku memang tak reti nak godek coding buat web ni. kikiki
BalasPadamTak hebat pun la...aku just nak buat experiment je buat website tu. Ye la... benda kalau dah belajar, tak praktikkan nanti lupa. So, aku buat la website sebagai bahan ujikaji aku. Haha..
PadamTakpe x reti coding buat web, asalkan reti coding sikit2 kat blog pun kira bagus dah.
2 years back aku dgn my colleagues ada kena pegi training utk bljr psl Cpanel etc blablabla.. sempatla pening lalat gak bljr benda tu. sbb ada modul yang kami kena tlg usahawan2 yg nak beli domain buat web. masa tu je la. pastu aku lupa dah semua =P
PadamHaha...sepatutnya kau faham ni apa yg aku cerita kt atas ni...tapi biasa la perempuan ni malas skit nak tahu benda lebih2 pasal IT.
PadamKau kerja apa sebenarnya ni?
peninggg., xpndai lnsung aku.,
BalasPadamTakpe2..jangan pening2. Tak faham takde masalah. Bukan semua orang boleh faham bahasa coding ni. Entri ni ada target audience yang tersendiri.
Padamehh jap, guna hosting ni tak payah bayar ke? free of charge?? :O :O :O
BalasPadamYa...tak payah bayar. Free je kalau guna hosting ni. Tapi kena pilih subdomain baru la free. Ikut je tutorial atas ni kalau nak upload website.
PadamTapi, kalau pakai 000webhost.com ni nampak macam outdated je UI dia. Aku lepas dah sign in 000webhost, baru la aku tau ada hostinger. Hostinger nampak macam lebih menarik sikit la nak banding dgn 000webhost ni. Suka hati la nak pilih yang mana pun.
Jap, lu nak buat website baru ke?
hajat di hati nak buat zyraroxx.com hiks :">
PadamFuhh..besar hajat tu. Kalau tutorial kt atas ni cuma bagitahu cara nak hosting website guna subdomain je. So, free je guna subdomain diorang.
PadamTapi kalau nak buat zyraroxx.com tu memang kena ada domain sendiri la. Domain sendiri ni biasanya memang kena bayar.
Kalau ada domain sendiri baru la jadi zyraroxx.com tapi kalau guna subdomain jadi la mcm zyraroxx.site88.net
Tapi, xpe...lu punya blog dah popular. Bole la beli domain sendiri.hehe..
rajinnya bro ley!!! teringin sgt nak mahir coding ni :') tp kena ada semangat yg tggi, silap je sikit, dia punya putus asa tu kalau boleh seminggu hahaha adesss. kalau pandai main coding, mmg lawalah blog kan >_<
BalasPadamHaha...xde rajin mana la..ni masa bosan2 tu study sikit2 pasal coding ni. Ni pun basic je...
PadamRasanya Sya lagi mahir kot bab coding2 ni dari saya. Dah kira hebat jugak la Sya ni boleh buat byk skin utk blog. Keep It up Sya...
Biasa la ada silap nak cari problem dia tu payah sikit. Programmer yg mahir memang seorg yg reti settlekan problem dgn keupayaan sendiri. Saya rasa Sya memang boleh jd programmer hebat.
Nanti dah habis spm, amik la course IT dan jgn lupa sentiasa buat experiment dgn apa yg Sya dah belajar. Kalau dah hebat coding ni....blog pun boleh jd interaktif.