Membuat layout sederhana dengan css

Membuat layout dengan css

Berikut ini saya akan berbagi tentang cara membuat layout/tampilan halaman web sederhana dengan html dan css. Layout yang saya buat sangat sederhana dengan susunan 2 kolom yang dilengkapi pula dengan header, menu pada bagian atas serta bagian footer.

Selain waktu penampilan halaman web lebih cepat, cara membuat layout dengan html dan css juga sangatlah mudah. Silahkan lihat kode berikut.

Membuat kode html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contoh Layout Sederhana dengan html dan css</title>
</head>
<body>
<div id="utama">
  <div id="header"> 
    <h1>NAMA HALAMAN / SITUS</h1>
  </div>
  <div id="menu-atas"> <a href="#">MENU 1</a> <a href="#">MENU 2</a> <a href="#">MENU 3</a></div>
  <div id="informasi">
    <div id="leftcolumn">
      <h2>KOLOM KIRI</h2>
      <p> INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI</p>
    </div>
    <div id="rightcolumn">
      <h2>KOLOM TENGAH</h2>
      <p>INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI</p>
    </div>
    <div class="clear"></div>
  </div>
  <div id="footer"> Dibuat oleh <a href="www.zainalhakim.web.id">www.zainalhakim.web.id</a></div>
</div>
</body>
</html>

Kemudian kita buat kode cssnya untuk mengatur susunan tampilan html diatas. Caranya, sisipkan pada bagian <head>..</head>

Kode css untuk layout

<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
#utama {
	margin: 0 auto;
	width: 800px;
	padding:10px;
}
#informasi {
	margin-bottom: 5px;
	overflow: auto; 
	width: 800px;
	background-color:#ECFEEB;
}
#header {
	color: #333;
	padding: 10px;
	height: 100px;
	margin: 10px 0px 5px 0px;
	background:#BEFBBB;
}
#menu-atas {
	color: #333;
	padding: 10px;
	margin: 10px 0px 5px 0px;
	background:#BEFBBB;
}
#leftcolumn {
	display: inline;
	color: #333;
	margin: 10px;
	padding: 5px;
	width: 195px;
	float: left;
	background-color:#CCCCCC
}
#rightcolumn {
	float: right;
	color: #333;
	margin:0;
	padding: 0px;
	width: 580px;
	display: inline;
	position: relative;
	padding:10px;
}
#footer {
	clear: both;
	color: #333;
	background: #BEFBBB;
	margin: 0px 0px 10px 0px;
	padding: 10px;
}
.clear {
	clear: both;
	background: none;
}
</style>

Hasilnya bisa dilihat pada gambar berikut :

contoh layout dengan css

Lihat Demo

Semoga bermanfaat

Zainal Hakim

Baca juga :

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Menampilkan jumlah like dan share facebook dengan php
    Facebook menyediakan plugint like dan share yang sangat mudah kita tempelkan pada bagian-bagian web atau blog kita. Selain menggunakan script program yang disediakan oleh facebook, kita juga bisa langsung menampilkan jumlah like dan share dalam aplikasi php yang kita buat. Penasaran bagaimana caranya? Silahkan lihat potongan kode php berikut.
  • Mengatur tingkat transparan objek dengan css
    Berikut ini adalah script css yang digunakan untuk mengatur tingkat transparan objek. Misal anda punya sebuah tulisan atau kotak header atau footer yang ingin ditampilkan secara transparan maka anda bisa gunakan cara berikut.
  • Mengambil ip address dan jenis browser dengan php
    Setiap komputer yang terhubung ke sebuah web atau blog membawa banyak informasi yang bisa kita ketahui melalu php, diantaranya ip address dan jenis browser.
  • Script mengirim email dengan php
    Mengirim email tidak hanya bisa dilakukan menggunakan aplikasi seperti outlook atau thunderbird, tapi juga bisa menggunakan script/kode php.
  • Membuat random angka huruf dan simbol dalam php
    PHP hanya menyediakan fungsi random/acak untuk deretan nilai. Padahal ada beberapa kasus seperti membuat password, membuat kode registrasi maupun lainya kita memerlukan kode acak yang tersusun dari angka dan huruf bahkan simbol. Berikut kode singkat untuk melakukan random/acak angka dan huruf secara bersamaan.

Kiriman terbaru