Membuat layout web sederhana

Catatan untuk membuat layout sederhana dengan menggunakan html dan css, pertama kita perlu  buat code html-nya sebagai berikut:

<!DOCTYPE HTML>
<head>
<meta http-equiv=”content-type” content=”text/html” />
<title>………………………</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
</head>

<body>
<div id=”ikat”>

<div id=”header”>ini header sementara</div>
<div id=”menu”>
<div><?php $tampil=date(‘Y-m-d’);
function DateToIndo($date){
$BulanIndo = array(“Januari”, “Februari”, “Maret”,
“April”, “Mei”, “Juni”,
“Juli”, “Agustus”, “September”,
“Oktober”, “November”, “Desember”);

$tahun = substr($date, 0, 4);
$bulan = substr($date, 5, 2);
$tgl   = substr($date, 8, 2);

$result = $tgl . ” ” . $BulanIndo[(int)$bulan-1] . ” “. $tahun;
return($result);
}

echo(DateToIndo($tampil));?></div>
<div></div>
</div>
<div id=”kiri”>ini kiri sementara</div>
<div id=”isi”>ini isi sementara</div>
<div id=”kaki”>copyright ………. 2010-<?php echo date(‘Y’);?></div>
</div>

</body>
</html>

untuk yang kedua kita buat file  css-nya untuk codenya sebagai berikut:

/*
https://ica03.wordpress.com
*/

#ikat
{
width: 900px;
background-color: #00FF80;
margin: auto;
}

#header
{
height: 250px;
background-color: red;
}

#menu
{
height: 25px;
background-color: white;
}

#kiri
{
width: 200px;
background-color: green;
height: 400px;
display: inline;
float: left;
}

#isi
{
width: 700px;
float: right;
display: inline;
background-color: yellow;
height: 400px;
}

#kaki
{
clear: both;
height: 100px;
background-color: #00FF80;
}

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s