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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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 **

Artikel Lainnya

  • Script mengirim email dengan php
    Mengirim email tidak hanya bisa dilakukan menggunakan aplikasi seperti outlook atau thunderbird, tapi juga bisa menggunakan script/kode php.
  • Memformat angka dengan php
    Nilai yang dihasilkan dalam perhitungan di php bisa kita format sesuai keperluan dengan menggunakan fungsi number_format(). Berikut contoh penggunaanya.
  • Cara membuat laporan sederhana database mysql dengan php
    Laporan adalah bagian utama hasil yang diharapkan dari sebuah aplikasi. Proses pengelolaan data yang rumit pasti dibagian akhir yang buat adalah laporan. Berikut ini Kode singkat dan mudah membuat laporan database mysql dengan php. Bagi newbie recomended
  • Menghitung jumlah hari dalam 1 bulan
    Jumlah hari pada tiap bulan bisa berbeda, ada yang 29, 30 dan ada yang 31. Kita bisa menghitung jumlah hari pada bulan tertentu dengan php. Silahkan simak kode singkat berikut.
  • 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.

Kiriman terbaru