Pada kesempatan kali ini kita akan belajar bagaimana caranya Desain Halaman Web dengan Konsep Tabel. Halaman website adalah suatu tampilan yang dapat berinteraksi dengan pengguna atau user atau dapat dikatakan sebagai tata letak elemen pada situs website, dengan halaman website yang baik maka pengunjung akan merasa nyaman dengan tampilan website tersebut. Setiap layout halaman dari website merupakan satu kesatuan karena setiap halaman website mempunyai kesamaan tampilan (layout), yang membedakan adalah isi dari kontennya.
Layout dibagi menjadi beberapa bagian yakni :
- Header : Berisi logo,judul, dll.
- Navigation/menu : Untuk mengakses ke halaman halaman lainnya.
- Content : Berisi inti dari halaman website
- Sidebar : Berisi pendukung content
- Footer : Berisis informasi penutup atau sebuah hak cipta sebuah website
Ilustrasi dapat dilihat dari gambar di bawah ini :
Berikut contoh script untuk file dengan nama index.html :
<html>
<head>
<title>Layout Web Dengan Table</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table width="800" border="1" class="badan_tabel" align="center">
<tr height="150">
<td colspan="2" class="header" bgcolor="2fe670"><h2>Selamat Datang Di Web Kami</h2></td>
</tr>
<tr>
<td colspan="2" bgcolor="#f185c7">
<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" bgcolor="e3fb44">
<h3>6 JENIS BAHASA PEMROGRAMAN TERPOPULER DI INDONESIA</h3>
<p align="justify">
Secara definitif, bahasa pemrograman dapat dipahami sebagai serangkaian kata-kata
berupa instruksi yang biasanya terdiri dari banyak baris dan dipahami oleh perangkat komputer.
</p>
<p align="justify">
Hal ini wajib dikuasai jika Anda ingin mengembangkan aplikasi atau perangkat lunak
sehingga program yang Anda buat dapat beroperasi dengan lancar dan bisa dioperasikan oleh banyak orang.
</p>
<p align="justify">
Jika Anda merupakan seorang developer atau orang yang sudah lama bergelut dengan bahasa pemrograman,
tentu Anda mengetahui beberapa jenis bahasa yang dapat digunakan.
</p>
<strong>Berikut beberapa jenis bahasa pemrograman yang sangat populer dan sering digunakan oleh developer :</strong>
<br>
<ol>
<li>Java</li>
<li>Bahasa C</li>
<li>PHP</li>
<li>Visual Basic</li>
<li>Phyton</li>
<li>C++</li>
</ol>
</td>
<td width="300" valign="top" bgcolor="#5cdee0">
<h3>Informasi</h3>
<p>Pelatihan pemograman web akan dilaksanakan pada hari Kamis, 28 Januari 2021
<h3>Galeri Photo</h3>
<img src="images/gambar.jpg" width="180" height="120">
</td>
</tr>
<tr height="50">
<td colspan="2" bgcolor="#ccc2c4"><center>Created By The Letter</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 :
Untuk ukuran lebar, tinggi, warna dan sebaginya kita bisa berkreasi sesuai dengan apa yang kita inginkan, sebaiknya menggunakan CSS.
Be the first to comment