Home » HtmlPHP » Membuat Template Menggunakan HTML

Membuat Template Menggunakan HTML

Sebelum kita menuju ke tutorial selanjutnya tentang if bersarang di php, pada kesempatan kali ini saya akan mencoba untuk membahas bagaimana caranya untuk membuat template menggunakan HTML, soalnya pada tutorial tutorial sebelumnya itu terlihat tidak menarik ketika dijalankan. Oleh karena itu kita bahas cara Membuat template terlebih dahulu. dan, nantinya kita akan bagi materi membuat template ini menjadi 2, yaitu

  • - Membuat Template Menggunakan HTML
  • - Memecah Template Menggunakan HTML/ PHP ( kita tidak harus menulis ulang seluruh kode template pada halaman baru, cukup dengan memecahnya menjadi beberapa bagian kemudian di satukan kembali menggunakan php, Hal ini dapat mempermudah pekerjaan kita)
Pada kesempatan kali  ini kita akan membuat template seperti gambar yang dibawah. 

script-javaku.blogspot.com

yang kita butuhkan adalah 
  • # index.html (sebagai halaman Utama)
  • # style.css (sebagai script untuk mempercantik/ mengatur tampilan pada halaman utama)
Berikut Scriptnya

index.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Belajar Php</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <!Memanggil style css>
</head>
<body>
<div id="sampul"> <!div id= membuat class css dengan nama header>


<div id="header">
<h2>Header</h2>
<div id="linkHeader">
<h4><a href="index.php">Beranda</a></h4>
</div>
</div>
<div id="body">
<div id="SidebarKiri">
<h2>Sidebar Kiri</h2>
</div>
<div id="isi">
<h2>Isi</h2>
</div>
<div id="SidebarKanan">
<h2>Sidebar Kanan</h2>
</div>
</div>
<div id="footer">
<h2>Footer</h2>
</div>

</div>
</body>
</html>


style.css:

/*
Document : style
Created on : Sep 13, 2013, 3:27:50 PM
Author : Razaq
Description:
Purpose of the stylesheet follows.
*/

body{
background-color: #999999;
margin: 0px;
padding: 0px;
}

#sampul{ /*membuat class sampul di css */
margin: auto;
width: 900px;
clear: both; /*berhubungan dengan posisi text pada isi nanti */
text-align: center;
/*kita gunakan sampul supaya semuanya otomatis di tengah*/
}

#header{
height: 197px;
background-color: #0066ff;
padding: 20px;
}

#linkHeader{
margin-top: 140px;
margin-left: 0;
text-align: left;

}

#body{
background-color: #cc0099;
clear: both;
display: table-row;

}

#SidebarKiri{
float: left;
width: 200px;
margin:0;
padding:10px;
border: 0;
clear: both;
background-color: #cc0099;
}
#isi{
float: left;
width: 440px;
margin:0;
padding:10px;
border: 0;
background-color: #cc00cc;
height: 250px;
}
#SidebarKanan{
float: right;
width: 200px;
margin:0;
padding:10px;
border: 0;
background-color: #cc0099;
}

#footer{
height: 120px;
border: 0;
clear:both;
background-color: #9900cc;
padding: 20px;

}





Penjelasan.

  • *Penjelasannya sudah terdapat pada script, sebagai komentar
  • *Namun jika masih memiliki keraguan, silahkan tanyakan pada kotak komentar


Artikel Terkait:

gaga

0 comments:

Ada pertanyaan?? Silahkan tanyakan di kotak komentar .. :)

Subscribe to: Post Comments (Atom)