My Personal Blog HTML & CSS Membuat desain layout website dengan tabel

Membuat desain layout website dengan tabel

Wim Sonevel Monday, January 18, 2016 HTML & CSS

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 :)

Terima Kasih untuk artikel nya min..
artikel admin ini sangat bermanfaat, penjabaran nya juga simple dan mudah untuk di mengerti, sukses selalu untuk admin nya. jangan berhenti untuk bikin artikel-artikel seperti ini ya min..
Perkenalkan nama saya Mozza Muthia Rahman
saya mahasiswa di kampus Atma Luhur, kunjungi website kami di
(https://www.atmaluhur.ac.id/)

My Personal Blog

Membuat desain layout website dengan tabel

Share this :

Wim Sonevel

61 Komentar

Penulisan markup di komentar

Ads