Membuat Halaman Web Menggunakan Php (Bagian 1)

Ketik kode dibawah ini simpan dengan nama newstyle.css

body {
background-color: #FFCC99;
}

#wrapper {
margin: auto;
width: 1000px;

}
#header {
height: 160px;
width: 1000px;
background-color:gray;

}
#inner {
float: left;
width: 1000px;
height: 500px;
margin: 0px;
}
#inner1 {
float: left;
width: 740px;
height: 500px;
margin: 0px;
}
#sidebar {
float: left;
width: 244px;
height: 330px;
margin-right: 10px;
margin-top: 20px;
}
#content {
float: left;
height: 500px;
width: 470px;
}
#iklan1 {
float: left;
height: 100px;
width: 240px;
margin-top: 20px;
background-color:brown;

}
#iklan11 {
float: left;
height: 100px;
width: 240px;
margin-top: 20px;
background-color:white;
}
#iklan2 {
float: right;
height: 100px;
width: 240px;
margin-top: 20px;
background-color:red;
}
#iklan22 {
float: right;
height: 100px;
width: 240px;
margin-top: 20px;
background-color:blue;
}
#iklan222 {
height: 28px;
width: 1000px;
margin-top:500px;
background-color:green;
}

#footer {
clear: both;
height: 100px;
margin-top:10px;

//apabila ingin memberikan gambar gunakan kode di bawah ini
background-image:url(footer.jpg);
}

#leftmenu ul {
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #FF3333 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #FFFF99 no-repeat left center; color: #000000
}

Kemudian buka notepad baru kemudian ketikkan kode di bawah ini menggunakan nama index.php

<head>
<title>Desain Layout Sederhana</title>
<link rel=”stylesheet” href=”newstyle.css” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>

</div>
<div id=”inner”>
<div id=”sidebar”>

<div id=”leftmenu”>
<a href=”?action=home”>Home</a>
<a href=”?action=visimisi”>Visi-Misi</a>
<a href=”?action=data”>Data</a>

</div>
<div id=”iklan1″></div>
<div id=”iklan11″></div>
</div>
<div id=”inner1″>
<div id=”content”>
<br/>
<p align=”center”><marquee>Selamat Datang Di Website Akademi Liverpool</marquee></p>
<br/>
<table border=”0″>
<tr>
<?php

if($_GET[action]==”visimisi”)
{
include”visimisi.php”;
}

else if($_GET[action]==”data”)
{
include”data.php”;
}
else
{
include”home.php”;
}
?>
</tr>
</div>
<div id=”iklan2″></div>
<div id=”iklan22″></div>
</div>
</div>
<div id=”iklan222″><font color=”#FFFFFF”><marquee>Website ini Berisi tentang Profile Liverpool yang membuka akademi dan sekolah sepakbola pertama di luar Eropa, tepatnya di Indonesia. Liverpool sama sekali buta dengan sepakbola Indonesia. Namun seandainya ada anak-anak berbakat dari Indonesia maka pintu akademi Liverpool akan terbuka untuk mereka. Liverpool U-17 akan melawan Frenz United Indonesia sebagai bagian dari turnamen Frenz U-16 International Cup 2014 di Stadion Sultan Agung, Bantul pada Rabu malam WIB.Frenz United Indonesia diisi oleh sebagian besar pemain tim nasional Indonesia U-16 yang pada tahun lalu sukses melaju ke final Piala AFF.</marquee></font></div>
<div id=”footer”>
<a href=”admin.php”>Administrator</a>
</div>
</div>
</body>

Pada dasarnya pembuatan halam Php pada index.php ini merupakan pemahaman pemrograman web menggunakan div, fungsi div di gunakan untuk membuat kotak-kotak bagian dari tiap2 bagian web. Tampilan web akan tampil seperti di bawah ini :

Capture

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>