Monday, January 18, 2016

Membuat desain layout website dengan tabel

Posted by on Monday, January 18, 2016
Halo gaes, saya mau sharing nih seputar tentang web development yaitu cara mendesain layout website. Pada dasarnya website memiliki layout yang berbeda-beda, namun ada beberapa komponen umum yang biasanya terdapat dalam desain layout website. Layout dibagi menjadi beberapa bagian yakni :
1. header
2. menu
3. content
4. sidebar
5. footer.

Ilustrasi dapat dilihat dari gambar di bawah ini :


Kalau begitu langsung saja kita mulai codingnya hehe..
Pertama-tama buat file dengan nama index.html kemudian ketikkan script html berikut ini :

<html>
<head>
<title>Percobaan Praktikum Pertama</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table width="800" border="1" class="badan_tabel">
<tr>
<td colspan="2" class="header"><h2>Selamat Datang Di Web Kami</h2></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFCC99">
<ul class="list_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</td>
</tr>
<tr>
<td width="488">
<h3>Teknis Publish Website</h3>
<p align="justify">Publish web adalah cara untuk mempublikasikan web statis ataupun dinamis yang sudah kita buat agar dapat dilihat oleh user melalui browser. Agar dapat diakses oleh user untuk sebuah website, kita memerlukan domain dan hosting.</p>
<p align="center">Bagi anda yang belum mengetahui apa itu domain singkat cerita domain adalah sebuah nama alamat yang nantinya akan digunakan user untuk mengakses, melihat atau menampilkan halaman web kita.</p>
<p align="left">Domain diatur sedemikian rupa sehingga memudahkan kita dalam mengakses sebuah webserver, karena kita tidak perlu lagi menuliskan alamat sebuah webserver dalam bentuk IP address.</p>
<strong>Berikut cara mempublish website anda:</strong><br>
<ol>
<li>Mendapatkan domain</li>
<li>Setting nama server di domain</li>
<li>Mendapatkan hosting</li>
<li>Upload website</li>
<li>Instal database</li>
<li>Tes hasil</li>
</ol>
</td>
<td width="300" valign="top" bgcolor="lightblue">Ini Bagian Sidebar</td>
</tr>
<tr>
<td colspan="2" bgcolor="#E5E5E5"><center>Created By Wim Sonevel</center></td>
</tr>
</table>
</body>
</html>

Kemudian buat file CSS dengan nama style.css di folder yang sama. CSS berguna untuk mempercantik tampilan website.

.badan_tabel{
margin: auto;
border: 1px solid #999999;
}
.header{
background-color: #6699FF;
padding: 5px;
height:100px;
}
.list_menu{
background-color: #FFCC99;
margin: 0px;
width: auto;
padding: 0px;
}
.list_menu li{
float:left;
display:block;
list-style-type: none;
border-right-width:1px;
border-right-style:solid;
border-right-color:#999999;
padding:10px;
}
.list_menu li:hover{
background-color: #FFFFFF;
}
.list_menu li a{
text-decoration: none;
}
.list_menu li a:hover{
font-weight:bold;
color:red;
}
table{
border-collapse:collapse;
}

Save, kemudian jalankan dibrowser. Maka hasilnya akan tampak seperti ini :

Agan-agan bisa berkreasi dengan mendesain layout sesuai keinginan Agan.
Sekian tutorial dari saya semoga bermanfaat.
Happy Coding :)
close