Membuat Layout Website Dengan Tabel

Membuat

Layout

Website

Dengan Tabel

Rizky Bintang Utama

1

�ssalamualai�um ��b

Kali ini saya akan memberikan tutorial tentang cara membuat layout website dengan tabel.

Pertama, anda sebelumya harus paham dengan struktur tag HTML dan CSS agar dapat memahami

dengan baik tutorial yang saya berikan ini.

2

Membuat Гonse�

Hal penting pertama yang harus anda pikirkan adalah membuat konsep dari layout yang akan anda

buat. Contohnya saya akan membuat konsep layout seperti ini:

Yap, kira kira seperti itulah bayangan layout yang akan saya buat dalam tutorial ini.

Me�ealisasi�an Гonse� �ang �u�a�

Di �uat

Saat anda sudah membuat konsep, maka anda harus merealisasikannya. Yang harus anda buat

selanjutnya adalah file index.html

Tulis dalam text editor anda:

<!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>Document</title>

<link rel="stylesheet" href="style.css" type="text/css"/>

</head>

<body>

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

3

<tr>

<td colspan="2">Ini Header</td>

</tr>

<tr>

<td valign="top">Ini Isi</td>

<td width="275px" valign="top">Ini Sidebar</td>

</tr>

<tr>

<td colspan="2">Ini Footer</td>

</tr>

</table>

</body>

</html>

Maka tampilannya akan seperti ini:

Untuk saat ini tampilan masih tidak beraturan.

Sekarang saya beri penjelasannya ...




Ini adalah tag awal menyatakan bahwa dokumen ini berisi script HTML.

<head>



4


</head>

Ini adalah wilayah header yg berisi content type dan title.

Lalu link rel stylesheet menyatakan bahwa akan meload stylesheet, href adalah lokasi stylesheet,

dan type adalah tipe stylesheet.

<body>

<table width="900px" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td colspan="2">Ini Header</td>

</tr>

<tr>

<td valign="top">Ini Isi</td>

<td width="275px" valign="top">Ini Sidebar</td>

</tr>

<tr>

<td colspan="2">Ini Footer</td>

</tr>

</table>

</body>

Body : script didalamnya lah yang akan tampil dalam web browser.

Table : menyatakan bahwa kita akan membuat tabel.

Width : menyatakan ukuran objek yang akan dibuat.

Border : menyatakan besarnya garis yg mengelilingi objek.

Align : menyatakan posisi objek yang akan dibuat.

Cellpadding & Cellspacing : menyatakan jarak spasi antar baris dan kolom.

Tr : menyatakan baris didalam tabel.

Td : menyatakan kolom didalam tabel.

Colspan : menyatakan jumlah kolom yang di satukan dalam baris tersebut.

5

Valign : meyatakan posisi vertikal isi dari kolom tersebut.

Membuat �tyle ntu� Layout

Website

Nah sekaranglah saat nya membuat style atau desain dari layout yang ingin kita buat.

Buka text editor anda dan tulis script berikut:

body {

background:#CCCCCC;

margin:0 auto;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

}

a {

color:#0066FF;

text-decoration:none;

}

a:hover {

color:#0099FF;

border-bottom:1px dotted #0099FF;

}

.header {

background:#0099FF;

border-bottom:2px solid #333333;

height:90px;

padding-left:20px;

padding-top:20px;

}

.header a {

color:#FFFFFF;

text-decoration:none;

font-size:26px;

font-weight:bold;

}

.header a:hover {

border-bottom:2px dotted #FFFFFF;

}

.content {

padding:5px;

background:#FFFFFF;

}

6

#content-title {

font-size:14px;

font-weight:bold;

}

#content-post {

padding-bottom:10px;

text-align:justify;

}

.sidebar {

padding:5px;

background:#ECECEC;

}

#sidebar-title {

font-size:13px;

font-weight:bold;

}

#sidebar-post {

padding-bottom:10px;

}

.footer {

background:#333333;

padding:5px;

font-size:11px;

color:#FFFFFF;

}

Penjelasannya ..

Kan udah belajar CSS, jadi ga perlu detail :D

. adalah untuk class

# untuk id

:hover untuk menyatakan style saat objek disorot dengan kursor

7

!inis�ing

Setelah membuat style nya, maka anda tinggal memasukkan class dan id pada file indx.html sesuai

dengan posisinya seperti ini:




<head>




</head>

<body>

<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">

<tr>

<td colspan="2" class="header">

<a href="#">Header</a>

</td>

</tr>

<tr>

<td valign="top" class="content">

<p id="content-title">Lorem ipsum</p>

<p id="content-post">Lorem <strong>ipsum</strong> no has veniam elaboraret

constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no,

qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora

<em>posidonium</em> vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando,

idque democritum incorrupte at sed, nostrud feugiat consetetur duo in. Aeque reformidans

ex quo, facilisis appellantur ea mei. Illud scaevola pertinacia mel ad, est ex tractatos

aliquando, cibo eloquentiam ea per.<br />

<br />

Cibo quas assum mel an, mel partiendo adipiscing quaerendum ne, dictas iisque ad usu.

Invenire delicata sit at, ad est mollis civibus corrumpit. Ne has delenit eligendi splendide,

harum numquam epicuri quo ea, sed verear aliquando consequuntur eu. Ad mea mucius

expetenda liberavisse, mei ea assentior dissentiunt, delectus antiopam disputando vel ad.

Ad pro erat quaeque suscipiantur, vis alia pertinacia at, ei duo zzril tibique necessitatibus.

Tritani reprehendunt et vel, et habeo viderer eruditi eos, ornatus pertinax periculis mel

ea.<br />

<br />

<a href="#">[Readmore ..]</a></p>

<p id="content-title">Ei brute deserunt</p>

<p id="content-post">Ei brute deserunt delicata nam, mundi

moderatius ex quo. Id per modo molestie lobortis, perfecto corrumpit omittantur nec an.

Albucius intellegam scripserit et cum, no mei porro tantas menandri. Nam detraxit

disputando efficiantur cu, nisl petentium repudiandae eum ut. Pri reque scripta admodum

te, rebum legere inimicus et has, ne qui amet meis commodo.<br />

<br />

8

Sint illud inani cum an, et primis nostrum adipiscing usu, ut alienum insolens omittantur eos.

Ad dolore torquatos moderatius vim, modo vero definitiones te his. Mea ei solet decore

quaestio, nam an dolores concludaturque. Has illud mazim deserunt in, qui ad mazim

democritum moderatius. Has essent sensibus id, dicant recusabo reprehendunt te pro, meis

facilis maiorum id pri. Et nec mutat erroribus, ad fugit aliquando incorrupte has.<br />

<br />

<a href="#">[Readmore ..]</a></p>

</td>

<td width="275" valign="top" class="sidebar">

<p id="sidebar-title">Search</p>

<form action="#" method="post">

<table width="100%" border="0">

<tr>

<td><input type="text" name="search" /></td>

</tr>

<tr>

<td><input type="submit" value="Search" /></td>

</tr>

</table>

</form>

<p id="sidebar-title">Login</p>

<form action="#" method="post">


<tr>

<td>Username</td>

<td><input type="text" name="username" /></td>

</tr>

<tr>

<td>Password</td>

<td><input type="password" name="password" /></td>

</tr>

<tr>

<td> </td>

<td><input type="submit" value="Login" /></td>

</tr>

</table>

</form>

<p id="sidebar-title">Links</p>


<tr>

<td>

<ul>

<li><a href="#">Google</a></li>

<li><a href="#">Kaskus</a></li>

<li><a href="#">Indowebster</a></li>

</ul>

</td>

</tr>

</table>

9

</td>

</tr>

<tr>

<td colspan="2" class="footer">

<p>Copyright © 2011 | All right reserved<br />Design by <a href="#">Rizky

Bintang Utama</a></p>

</td>

</tr>

</table>

</body>

</html>

Ket:

Merah adalah class.

Biru adalah id.

Dan Hijau adalah isinya.

Maka tampilan akhirnya akan seperti ini :

Membuat Layout Website Dengan Tabel

Documents

Transcript of Membuat Layout Website Dengan Tabel