Web statis merupakan situs web yang memiliki isi tidak dimaksudkan untuk diperbarui secara berkala sehingga pengaturan ataupun pemutakhiran isi atas situs web tersebut dilakukan secara manual. Ada tiga jenis perangkat utilitas yang biasa digunakan dalam pengaturan situs web statis:
- Penyunting teks merupakan perangkat utilitas yang digunakan untuk menyunting berkas halaman web, misalnya: Notepad atau TextEdit.
- Penyunting WYSIWYG merupakan perangkat lunak utilitas penyunting halaman web yang dilengkapi dengan antar muka grafis dalam perancangan serta pendisainannya, berkas halaman web umumnya tidak disunting secara lengsung oleh pengguna melainkan utilitas ini akan membuatnya secara otomatis berbasis dari laman kerja yang dibuat oleh pengguna. perangkat lunak ini misalnya: Microsoft Frontpage, Macromedia Dreamweaver.
- Penyunting berbasis templat merupakan beberapa utilitas tertentu seperti Rapidweaver dan iWeb, pengguna dapat dengan mudah membuat sebuah situs web tanpa harus mengetahui bahasa HTML, melainkan menyunting halaman web seperti halnya halaman biasa, pengguna dapat memilih template yang akan digunakan oleh utilitas ini untuk menyunting berkas yang dibuat pengguna dan menjadikannya halam web secara otomatis.
Langkah 1
Cari di PC Anda aplikasi NotePad (seharusnya ada). Kemudian ketik sama
persis dengan yang di bawah ini (Saya harap Anda tidak melakukan copy
& paste. Kalo Anda lakukan itu, percuma dong belajar nulis HTML?)
Ini adalah halaman web pertama saya. Hore... Saya bisa!!
Jika sudah, simpan itu di folder Anda dengan pilihan: File Name : contoh.html Save as type: All files Klik ganda pada file yang sudah Anda buat tadi. Maka seharusnya halaman web Anda tampil seperti ini: belajar cara membuat website. Oleh:Widodo Purnomosidi Untuk menuliskan paragraf-paragraf Anda, awali selalu dengan tag dan tutup dengan
. Jika Anda ingin meng-editnya, cukup klik kanan pada file html Anda, point to open with, pilih NotePad. Sebagai bahan untuk belajar buat Anda, masih pada halaman ini, silahkan ketik CTRL + U - jika Anda menggunakan Mozila FireFox, atau pilih menu View kemudian Source - jika Anda menggunakan IE. Cara Membuat Link atau Navigasi Edit dengan NotePad file contoh.html kemudian tambahkan isi sebagai berikut:
Home | Halaman 2 | Halaman 3
Ini adalah paragraf pertama dari halaman homepage. Belajar HTML itu mudah dan tidak susah apalagi harus pake kursus, ngga banget lah yah...
Jika Sudah, klik SAVE. Masih pada jendela NotePad yang sama, ubah paragraf Anda dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh2.html. Jangan ditutup dulu, ubah lagi paragraf Anda untuk menandakan itu halaman ke-tiga dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh3.html.
Copy and WIN : http://ow.ly/KNICZ
1. Buka aplikasi Notepad (Klik Start>AllPrograms>Accessories>Notepad).Selamat Datang
Ini adalah halaman web pertama saya. Hore... Saya bisa!!
Jika sudah, simpan itu di folder Anda dengan pilihan: File Name : contoh.html Save as type: All files Klik ganda pada file yang sudah Anda buat tadi. Maka seharusnya halaman web Anda tampil seperti ini: belajar cara membuat website. Oleh:Widodo Purnomosidi Untuk menuliskan paragraf-paragraf Anda, awali selalu dengan tag dan tutup dengan
. Jika Anda ingin meng-editnya, cukup klik kanan pada file html Anda, point to open with, pilih NotePad. Sebagai bahan untuk belajar buat Anda, masih pada halaman ini, silahkan ketik CTRL + U - jika Anda menggunakan Mozila FireFox, atau pilih menu View kemudian Source - jika Anda menggunakan IE. Cara Membuat Link atau Navigasi Edit dengan NotePad file contoh.html kemudian tambahkan isi sebagai berikut:
Selamat Datang
Home | Halaman 2 | Halaman 3
Ini adalah paragraf pertama dari halaman homepage. Belajar HTML itu mudah dan tidak susah apalagi harus pake kursus, ngga banget lah yah...
Jika Sudah, klik SAVE. Masih pada jendela NotePad yang sama, ubah paragraf Anda dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh2.html. Jangan ditutup dulu, ubah lagi paragraf Anda untuk menandakan itu halaman ke-tiga dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh3.html.
Copy and WIN : http://ow.ly/KNICZ
 |
| Gambar 1. Screenshot Notepad pada Windows 7. |
<HTML>
<BODY style="background - color : red">
Halaman website pertama buatan saya !
</BODY>
</HTML>
3. Sekarang simpan file tersebut (klik File>SaveAS...).
 | |||
| Gambar 2. Menu Save As... |
4.Simpan dengan nama "coba.html", tuliskan lengkap dengan tanda kutipa gandanya di FileName,klik save. ingat baik-baik folder tempat Anda menyimpan file tersebut.
Dalam contoh ini saya menyimpan di folder c://proyek/coba.html.
 | |||
| Gambar 3.Menyimpan file HTML di folder. |
5.Sekarang kita akan melihat hasilnya. Silakan (buka browser Anda, Mozila Firefox)
 | ||
| Gambar 4 ikon Moxila firefox. |
6. Ketikan c: dilanjutkan dengan enter untuk melihat penyimpanan file coba.html
 | ||
| Gambar 5. Browser file coba.html. |
Cara membuat web dinamis:
Web dinamis merupakan situs web yang secara spesifik didisain agar isi yang terdapat dalam situs tersebut dapat diperbarui secara berkala dengan mudah. Sesuai dengan namanya, isi yang terkadung dalam situs web ini umumnya akan berubah setelah melewati satu periode tertentu. Situs berita adalah salah satu contoh jenis situs yang umumnya mengimplementasikan situs web dinamis.
Tidak seperti halnya situs web statis, pengimplementasian situs web dinamis umumnya membutuhkan keberadaan infrastruktur yang lebih kompleks dibandingkan situs web statis. Hal ini disebabkan karena pada situs web dinamis halaman web umumnya baru akan dibuat saat ada pengguna yang mengaksesnya, berbeda dengan situs web statis yang umumnya telah membentuk sejumlah halaman web saat diunggah di server web sehingga saat pengguna mengaksesnya server web hanya tinggal memberikan halaman tersebut tanpa perlu membuatnya terlebih dulu.
Untuk memungkinkan server web menciptakan halaman web pada saat pengguna mengaksesnya, umumnya pada server web dilengkapi dengan mesin penerjemah bahasa skrip (PHP, ASP, ColdFusion, atau lainnya), serta perangkat lunak sistem manajemen basisdata relasional seperti MySQL.
Struktur berkas sebuah situs web dinamis umumnya berbeda dengan situs web statis, berkas-berkas pada situs web statis umumnya merupakan sekumpulan berkas yang membentuk sebuah situs web. Berbeda halnya dengan situs web dinamis, berkas-berkas pada situs web dinamis umumnya merupakan sekumpulan berkas yang membentuk perangkat lunak aplikasi web yang akan dijalankan oleh mesin penerjemah server web, berfungsi memanajemen pembuatan halaman web saat halaman tersebut diminta oleh pengguna.
1. Pertama anda harus mempunyai aplikasi yang bernama xampp
yaitu sebagai server yang berdiri sendiri(localhost), anda bisa mendownloadnya
di internet, untuk installnya cukup mudah, ikuti saja instruksinya.
2. Setelah anda berhasil menginstal xampp, buka aplikasinya dan start "Apache" dan "Mysql" lalu buka browser anda direkomendasikan Firefox atau Chrome. Lalu Ketikkan localhost/phpmyadmin di address bar untuk mengolah database mysql
3. Setelah muncul laman
phpmyadmin, pertama anda buat database dengan nama db_web, lalu buat
table untuk admin ketikkan kode di bawah ini di tab SQL :
create table admin (
username varchar(15) not null
primary key,
password varchar(15) not null,
level varchar(15) not null
)
setelah berhasil di eksekusi,
saatnya untuk membuat web yang akan menampilkan databasenya..
4. Untuk membuat web, pertama anda harus membuat homepage terlebih dahulu, buka aplikasi editor seperti notepad atau notepad ++ dll lalu ketik/copas kode di bawah ini dan beri nama file "index.php"
4. Untuk membuat web, pertama anda harus membuat homepage terlebih dahulu, buka aplikasi editor seperti notepad atau notepad ++ dll lalu ketik/copas kode di bawah ini dan beri nama file "index.php"
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title>Kerangka Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="gray">
<td height="100" colspan="2"></td>
</tr>
<tr bgcolor="black">
<td colspan="2"><marquee onmouseover="this.stop()" onmouseout="this.start()" truespeed="true" scrollamount="1" scrolldelay="40" direction="left">
<strong><div id="login">Selamat Datang Di Website Kami, Website Ini Masih Dalam Tahap Pembuatan</div></strong>
</marquee>
</td>
</tr>
<tr>
<td width="200" height="600" valign="top" bgcolor="gray"><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><form name="form1" method="post" action="cek_login.php">
<table width="200" border="0" cellspacing="0" cellpadding="2">
<tr bgcolor="#003366">
<td height="30" colspan="2"><div align="center"><div id="login"><strong>Login Admin </strong></div></div></td>
</tr>
<tr>
<td width="74" height="30"><b>Username</b></td>
<td width="126">:
<input name="username" type="text" id="username" size="10"></td>
</tr>
<tr>
<td height="30"><b>Password</b></td>
<td>:
<input name="password" type="password" id="password" size="10"></td>
</tr>
<tr>
<td height="30"> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td><div id="kiri">
<div id="login">
<p><center><b>PROFIL</center></p>
<p>Nama : Banu Ari Ramadhan </p>
<p>Web : banuaril10.blogspot.com</p></b>
</div>
</div>
</td>
</tr>
</table>
</td>
<td valign="top"> </td>
</tr>
<tr bgcolor="black">
<td height="80" colspan="2"><div id="login"><center>Copyright 2015 <br>Design : Banu Ari Ramadhan</div></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Kerangka Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="gray">
<td height="100" colspan="2"></td>
</tr>
<tr bgcolor="black">
<td colspan="2"><marquee onmouseover="this.stop()" onmouseout="this.start()" truespeed="true" scrollamount="1" scrolldelay="40" direction="left">
<strong><div id="login">Selamat Datang Di Website Kami, Website Ini Masih Dalam Tahap Pembuatan</div></strong>
</marquee>
</td>
</tr>
<tr>
<td width="200" height="600" valign="top" bgcolor="gray"><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><form name="form1" method="post" action="cek_login.php">
<table width="200" border="0" cellspacing="0" cellpadding="2">
<tr bgcolor="#003366">
<td height="30" colspan="2"><div align="center"><div id="login"><strong>Login Admin </strong></div></div></td>
</tr>
<tr>
<td width="74" height="30"><b>Username</b></td>
<td width="126">:
<input name="username" type="text" id="username" size="10"></td>
</tr>
<tr>
<td height="30"><b>Password</b></td>
<td>:
<input name="password" type="password" id="password" size="10"></td>
</tr>
<tr>
<td height="30"> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td><div id="kiri">
<div id="login">
<p><center><b>PROFIL</center></p>
<p>Nama : Banu Ari Ramadhan </p>
<p>Web : banuaril10.blogspot.com</p></b>
</div>
</div>
</td>
</tr>
</table>
</td>
<td valign="top"> </td>
</tr>
<tr bgcolor="black">
<td height="80" colspan="2"><div id="login"><center>Copyright 2015 <br>Design : Banu Ari Ramadhan</div></td>
</tr>
</table>
</body>
</html>
5. Untuk membuat tampilan web
terlihat bagus, buat desain css untuk web tersebut buat file bernama "style.css"
lalu ketik/copas kode di bawah ini :
#kiri { font-size:12px; border-radius:5px;border:6px;height:120px; padding:10px;background-color:black;float:left;width:165px; margin-top:40px;margin-left:8px;}
#login{color:white; }
#login{color:white; }
penjelasan :
#kiri adalah untuk desain web bagian kiri
#login adalah untuk desain tulisan pada form login
6. Untuk melihat hasilnya simpan file "index.php" dan "style.css" pada C:>/xampp/htdocs/web(buat folder baru bernama web) lalu jalankan melalui address bar browser anda dengan mengetikan : localhost/web/index.php
lalu lihat hasilnya..
note : jangan lupa aktifkan xampp anda (start Apache dan Mysql)
Referensi:
http://learnwebscritp0.blogspot.com/2012/06/membuat-halaman-web-statis-sederhana.html
http://banuaril10.blogspot.com/2015/05/cara-membuat-web-dinamis-sederhana-php.html
Jika Sudah, klik SAVE. Masih pada jendela NotePad yang sama, ubah paragraf Anda denga
Copy and WIN : http://ow.ly/KNICZ
Copy and WIN : http://ow.ly/KNICZ
Jika Sudah, klik SAVE. Masih pada jendela NotePad yang sama, ubah paragraf Anda denga
Copy and WIN : http://ow.ly/KNICZ
Copy and WIN : http://ow.ly/KNICZ
Langkah 1
Cari di PC Anda aplikasi NotePad (seharusnya ada). Kemudian ketik sama
persis dengan yang di bawah ini (Saya harap Anda tidak melakukan copy
& paste. Kalo Anda lakukan itu, percuma dong belajar nulis HTML?)
Ini adalah halaman web pertama saya. Hore... Saya bisa!!
Jika sudah, simpan itu di folder Anda dengan pilihan: File Name : contoh.html Save as type: All files Klik ganda pada file yang sudah Anda buat tadi. Maka seharusnya halaman web Anda tampil seperti ini: belajar cara membuat website. Oleh:Widodo Purnomosidi Untuk menuliskan paragraf-paragraf Anda, awali selalu dengan tag dan tutup dengan
. Jika Anda ingin meng-editnya, cukup klik kanan pada file html Anda, point to open with, pilih NotePad. Sebagai bahan untuk belajar buat Anda, masih pada halaman ini, silahkan ketik CTRL + U - jika Anda menggunakan Mozila FireFox, atau pilih menu View kemudian Source - jika Anda menggunakan IE. Cara Membuat Link atau Navigasi Edit dengan NotePad file contoh.html kemudian tambahkan isi sebagai berikut:
Home | Halaman 2 | Halaman 3
Ini adalah paragraf pertama dari halaman homepage. Belajar HTML itu mudah dan tidak susah apalagi harus pake kursus, ngga banget lah yah...
Jika Sudah, klik SAVE. Masih pada jendela NotePad yang sama, ubah paragraf Anda dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh2.html. Jangan ditutup dulu, ubah lagi paragraf Anda untuk menandakan itu halaman ke-tiga dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh3.html.
Copy and WIN : http://ow.ly/KNICZ
Selamat Datang
Ini adalah halaman web pertama saya. Hore... Saya bisa!!
Jika sudah, simpan itu di folder Anda dengan pilihan: File Name : contoh.html Save as type: All files Klik ganda pada file yang sudah Anda buat tadi. Maka seharusnya halaman web Anda tampil seperti ini: belajar cara membuat website. Oleh:Widodo Purnomosidi Untuk menuliskan paragraf-paragraf Anda, awali selalu dengan tag dan tutup dengan
. Jika Anda ingin meng-editnya, cukup klik kanan pada file html Anda, point to open with, pilih NotePad. Sebagai bahan untuk belajar buat Anda, masih pada halaman ini, silahkan ketik CTRL + U - jika Anda menggunakan Mozila FireFox, atau pilih menu View kemudian Source - jika Anda menggunakan IE. Cara Membuat Link atau Navigasi Edit dengan NotePad file contoh.html kemudian tambahkan isi sebagai berikut:
Selamat Datang
Home | Halaman 2 | Halaman 3
Ini adalah paragraf pertama dari halaman homepage. Belajar HTML itu mudah dan tidak susah apalagi harus pake kursus, ngga banget lah yah...
Jika Sudah, klik SAVE. Masih pada jendela NotePad yang sama, ubah paragraf Anda dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh2.html. Jangan ditutup dulu, ubah lagi paragraf Anda untuk menandakan itu halaman ke-tiga dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh3.html.
Copy and WIN : http://ow.ly/KNICZ
:-?
BalasHapus