berhubung sedang latihan membuat website kali ini saya akan memosting sedikit tentang cara membuat website dengan notepad++ hehe. Siapkan notepad++ atau notepad biasa >> langsung aja kita akan membuat tampilan seperti gambar dibawah
ayoo kita mulai dengan scripnya >>
siapkan notepad dan simpan scrip di bawah dengan tipe php misal kepala.php
untuk headernya
<html>
<head>
<title>Latihan</title>
<link href=model.css rel=stylesheet type=text/css>
</head>
<body>
<div id="kepala">
<div id="judul"><a href=index.php>ILMU ALAKADARNYA</div>
<div id="menu">
<li><a href=Home.php>Home</a></li>
<li><a href=profil.php>Profil</a></li>
<li><a href=Signin.php>Sign In</a></li>
<li><a href=login.php>Login</a></li>
</div>
<div id="isi">
<marquee>My Website</marquee>
>> siapkan halaman baru di notepad dan simpan scrip misal sikil.php untuk footernya
</div>
<div id=sikil>copyright © <a href='index.php'>ILMU ALAKADARNYA</a> 2012
</div>
</div>
</body>
</html>
>> untuk membuat selanjutnya buat lagi dengan notepad baru misal dengan judul 2.php, scripnya sebagai berikut
<div id="profil">
<table width="100%">
<tr>
<td colspan="2"><div align="center">Profil</div></td>
</tr>
<tr>
<td width="10%"><img src="akku.jpg" width="96" height="140"></td>
<td width="90%" bgcolor="#FFF"><p align="justify">Saya adalah Rahmawan Eka Hadi Saputra, saya tinggal di Tegalrejo Tambi Kejajar Wonsobo saya asli dari Sleman dan lahir pada tanggal 17 September 1990. Saya masih menuntut ilmu di UNSIQ mengambil jurusan Manajemen Informatika dan Sekarang masih semester IV. Kesukaan saya untuk pemrograman menggunakan delphi dan ini sekedar iseng membuat web karena tuntutan untuk memenuhi nilai dan ngak ada salahnya juga mengutak-atik web karena ternyata setelah dicoba pemrograman berbasis web tidak begitu sulit dan sama asiknya dengan delphi </p>
</td>
</tr>
</table>
</div>
keterangan :
- untuk yang di cetak merah adalah nama gambar yang anda sediakan
>> untuk memodifikasi style maka kita buat untuk modelnya >> siapkan halaman baru dan simpan dengan nama model.css
>> tulis scripnya sebagai berikut
body{
background:silver;
}
#kepala{
width:70%;
height:absolute;
margin-right:auto;
margin-left:auto;
padding-top:30px;
background-repeat:no-repeat;
background:black;
}
#kepala a:link, #kepala a:visited {/*jika pada kepala mengandung link*/
text-decoration: none;
color:#666666;
}
#judul{
font-size:50px;
font-family:Monotype Corsiva;
font-weight:bold;
color:white;
Width:100%;
text-align:center;
}
#menu{
width:10%;
float:right;
background-image:url(bb.jpg);
/*bb.jpg adalah gambar latar pada isi gambar bisa anda ganti dengan gambar pilihan anda*/
text-align:right;
}
#menu a:hover {
background-color: #FFF;
color:white;
width:25%;
height:100%;
}
#menu li{
list-style: none;
}
#menu a:link, #menu a:visited {
text-decoration: none;
color:Black;
}
#isi{
width:90%;
float:left;
background-image:url(bb.jpg);/*bb.jpg adalah gambar latar pada isi gambar bisa anda ganti dengan gambar pilihan anda*/
height:absolute;
}
#sikil{
background-color:black;
padding:10px 0 10px 0;
color:white; /* warna huruf di dalam elemen footer */
text-align:center;
width:100%;
margin-right:auto; /* jarak header ke tepi kanan */
margin-left:auto;
float:left;
}
#sikil a:link, #sikil a:visited {
text-decoration: none;
color:white;
}
#profil{
text-align:justify;
}
>> langkah terakhir >> halaman notepad baru san tuliskan scrip sebagai berikut >>
<?php
include"kepala.php";
include"2.php";
include"sikil.php";
?>
simpan dengan profil.php setelah menyimpannya.klik kanan pada file tersebut dan opoen whit google crome/ mozilla semoga berhasil.
sekian dan selamat mencobanya semoga berhasil dan kembangkan dengan inspirasi anda sendiri-sendiri
Post a Comment