Salam.
Kalau terasa nak buat website atau laman web guna notepad secara percuma, korang boleh baca entri ni.
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.
4) Lepas klik, account korang akan aktif. Dan boleh la log in ke 000webhost.com
5) Lepas log in, akan keluar macam kat bawah ni. Klik pada 'Go to CPanel'.
6) Kemudian, klik pula pada ' File Manager'.
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 |
9) Lepas tu akan keluar macam ni pulak:
|
Ni kat file manager aku. Kalau korang baru buat akan ada file 'defaul.php' |
10) Kalau kat atas ni, 'index.html' tu file yang aku baru upload sendiri. Kalau korang yang baru je buat account, akan ada satu file 'default.php'. Korang kena delete file 'default.php' tu dulu dan gantikan dengan file html korang sendiri.
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 t
utorial 3: Buat website guna notepad (navigation menu) dan save as 'index.html'. Ini kod dia:
<html>
<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>
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.