Membuat Desain Layout Website Dengan Tabel
Halo gaes, aku mau sharing nih seputar ihwal web development yaitu cara mendesain layout website. Pada dasarnya website mempunyai layout yang berbeda-beda, namun ada beberapa komponen umum yang biasanya terdapat dalam desain layout website. Layout dibagi menjadi beberapa bab yakni :
1. header
2. menu
3. content
4. sidebar
5. footer.
Ilustrasi sanggup dilihat dari gambar di bawah ini :
Kalau begitu pribadi saja kita mulai codingnya hehe..
Pertama-tama buat file dengan nama index.html kemudian ketikkan script html berikut ini :
Kemudian buat file CSS dengan nama style.css di folder yang sama. CSS berkhasiat untuk mempercantik tampilan website.
Save, kemudian jalankan dibrowser. Maka balasannya akan tampak menyerupai ini :
Agan-agan sanggup berkreasi dengan mendesain layout sesuai impian Agan.
Sekian tutorial dari aku semoga bermanfaat.
Happy Coding :)
1. header
2. menu
3. content
4. sidebar
5. footer.
Ilustrasi sanggup dilihat dari gambar di bawah ini :
Kalau begitu pribadi 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 yaitu cara untuk mempublikasikan web statis ataupun dinamis yang sudah kita buat semoga sanggup dilihat oleh user melalui browser. Agar sanggup diakses oleh user untuk sebuah website, kita memerlukan domain dan hosting.</p> <p align="center">Bagi anda yang belum mengetahui apa itu domain singkat kisah domain yaitu sebuah nama alamat yang nantinya akan dipakai user untuk mengakses, melihat atau menampilkan halaman web kita.</p> <p align="left">Domain diatur sedemikian rupa sehingga memudahkan kita dalam mengakses sebuah webserver, alasannya yaitu 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 berkhasiat 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 balasannya akan tampak menyerupai ini :
Agan-agan sanggup berkreasi dengan mendesain layout sesuai impian Agan.
Sekian tutorial dari aku semoga bermanfaat.
Happy Coding :)
Comments
Post a Comment