Membuat Layout Web 2 Kolom Tanpa Tabel

Awal munculnya sebuah website, para programmer website membuat sebuah layout website menggunakan permainan tabel.Semakin berkembangnya teknologi web,penggunaan tabel semakin ditinggalkan selain karena alasan kurang fleksibel teknologi tabel juga menjadikan layout website tampak kaku.Akhirnya muncullah teknologi baru yang dikenal dengan nama CSS(Cascading Style Sheet).

CSS seakan sebuah malaikat bagi teknologi web saat ini, bagaimana tidak dengan menggunakan CSS para programmer semakin mudah dalam menuliskan tag-tag HTML.Sehingga layout pun akan labih ringan saat diload.

Pada kesempatan kali ini saya akan memberikan sekilas tutorial bagaimana menerapkan CSS itu sendiri dalam pembuatan layout sebuah website.Oke, langsung saja tutorialnya.🙂

Seperti biasa, buat file HTMLnya, simpan dengan nama index.html.

<html>
<head><title>LAyout 2 column</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
 <div id="header">
 <h1>
 Site name
 </h1>
 </div>
 <div id="navigation">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact us</a></li>
 </ul>
 </div>
 <div id="content-container">
 <div id="content">
 <h2>
 Page heading
 </h2>
 <p>
 Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
 vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
 </p>
 <p>
 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
 praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
 </p>
 <p>
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
 luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
 sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
 tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 </p>
 </div>
 <div id="aside">
 <h3>
 Aside heading
 </h3>
 <p>
 Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan.
 </p>
 </div>
 <div id="footer">
 Copyright © Site name, 20XX
 </div>
 </div>
</div>
</body>
</html>

Kalau dirasa terlalu panjang dalam menulis file html di atas..boleh di copy kok…🙂

Kemudian kita poles dengan CSS, simpan dalam satu folder dengan nama style.css

#container
{
 margin: 0 auto;
 width: 900px;
 background: #fff;
}

#header
{
 background: #ccc;
 padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
 float: left;
 width: 900px;
 background: #333;
}

#navigation ul
{
 margin: 0;
 padding: 0;
}

#navigation ul li
{
 list-style-type: none;
 display: inline;
}

#navigation li a
{
 display: block;
 float: left;
 padding: 5px 10px;
 color: #fff;
 text-decoration: none;
 border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
 float: left;
 width: 900px;
 background: #fff;
}

#content
{
 clear: left;
 float: left;
 width: 560px;
 padding: 20px 0;
 margin: 0 0 0 30px;
 display: inline;
}

#content h2 { margin: 0; }

#aside
{
 float: right;
 width: 240px;
 padding: 20px 0;
 margin: 0 20px 0 0;
 display: inline;
}

#aside h3 { margin: 0; }

#footer
{
 clear: left;
 background: #ccc;
 text-align: right;
 padding: 20px;
 height: 1%;
}

Nah, mudah kan…🙂

Selamat mencoba..dan terus belajar 🙂

7 thoughts on “Membuat Layout Web 2 Kolom Tanpa Tabel

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s