Membuat Halaman Web dengan Table

Kali ini kita mencoba buat halaman website dengan table. Yap, biasanya table kita gunakan saat ingin menampilkan sebuah data kan? Yang ini lain, kita coba mendesain sebuah halaman website dengan table.

Rencananya kita akan membuat tampilan website seperti ini :

screenshot

Untuk awalnya, kita buat sebuah folder untuk menyimpan halaman website maupun gambar yang akan digunakan. Folder tersebut berisi sebuah gambar bernama cover.jpg dan sebuah halaman website bernama home.html.

Home.html inilah yang akan menjadi tempat kita mendesain halaman web. Berikut source code nya :

 

<html>
<head> <title>Home </title></head>
<body align=”center” >

<table align=”center” height=”200″ width=”900″>
<tr>
<td background=”cover.jpg” width=”900″ height=”200″>
</td>
</tr>
</table>

<table align=”center” width=”900″ height=”400″>
<tr>
<td bgcolor=”#BFE3FE” valign=”top”><p><br><h3>Link Tutorial</h3>
<ul>
<li><a href=”http://www.w3schools.com”>W3 School</a></li><br>
<li><a href=”http://www.ilmukomputer.org”>Ilmu Komputer</a></li><br>
<li><a href=”https://xcode.or.id”>X-Code</a></li&gt;
</ul>
</td>
<td width=”700″ valign=”top”><p><br>
<h2>Sekapur Sirih</h2>
<p>Belajar membuat website tidak hanya dilakukan di lingkungan sekolah atau kampus. Kamu pun mampu belajar <i>coding</i> dirumah dengan membuka beberapa halaman website yang ada di sisi kiri halaman website ini.
<p>
Bermacam – macam sintak <i>coding</i> dengan berbagai bahasa ada di <a href=”http://www.w3schools.com”>W3 School</a>, buat kamu yang suka dengan hal-hal berbau Jaringan Komputer, Security bisa coba kunjungi <a href=”https://xcode.or.id”>X-Code</a&gt;. Lalu dokumentasi dalam bentuk pdf bisa juga dipelajari dari <a href=”http://www.ilmukomputer.org”>Ilmu Komputer</a>.<p>

Lengkap sudah, selamat belajar
</td>
</tr>
</table>

<table align=”center” width=”900″ height=”50″>
<tr align=”center” bgcolor=”#80C8FE”>
<td><a href=”http://www.facebook.com”>Facebook</a></td&gt;
<td><a href=”http://www.twitter.com”>Twitter</td&gt;
<td><a href=”http://www.instagram.com”>Instagram</td&gt;
</tr>
</table>

</body>
</html>

Selamat mencoba ya…..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s