Membuat Halaman Web dengan Menggunakan Elemen Table dan Hyperlink

Minggu, Februari 13, 2011 | 0 Comments

Dengan menggunakan elemen table dan hyperlink, kita sudah bisa membuat suatu tampilan web yang sederhana tapi bagus. Pada halaman web ini, digunakan 3 buah halaman web yang nantinya saling dikaitkan satu sama lain. Di dalam halaman web tersebut juga terdapat informasi yang juga memiliki link dengan website lain.

Silahkan lihat kodenya untuk halaman "Dokumen" dibawah ini :


<!DOCTYPE HTML>
<html lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="Dossier.png" />
<title>Dokumen</title>
</head>
<body bgcolor="#b2b3b9">
<br />
<hr size=5 color="#505152" />
<h1 align="center"><font face="courier new" color="#505152">WELCOME TO MY PAGE</font></h1>
<hr size=5 color="#505152" />
<br />
<br />
<table align="center" cellspacing=0>

<!--Baris 1 -->
<tr align="center">
<td height=40 width=20 rowspan=3 bgcolor="black"></td>
<td width=20></td>
<td width=200 bgcolor="#666769"><a href="studi_kasus.html"><font color="white"><b>Dokumen</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="video.html"><font color="white"><b>Video</b></a></font></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="musik.html"><font color="white"><b>Musik</b></font></a></td>
<td width=20></td>
<td width=20 rowspan=3 bgcolor="black"></td>
</tr>

<!--Baris 2 -->
<tr>
<td height=150 width=20 colspan=7 bgcolor="#666769">
<ol>
<a href="http://www.4shared.com/document/RNUdOuVc/modul_01_pti438_java.html"><font color="white"><li>Modul 1 Praktikum Praktikum Berorientasi Objek</li></font></a>
<a href="http://www.4shared.com/document/OfRD9Y1N/MODUL_PRAKTIKUM_II.html"><font color="white"><li>Modul 2 Praktikum Praktikum Berorientasi Objek</li></font></a>
<a href="http://www.4shared.com/document/pgK3grmk/MODUL_PRAKTIKUM_III.html"><font color="white"><li>Modul 3 Praktikum Praktikum Berorientasi Objek</li></font></a>
<a href="http://www.4shared.com/document/mF_hnxWR/Modul_4_PBO.html"><font color="white"><li>Modul 4 Praktikum Praktikum Berorientasi Objek</li></font></a>
<a href="http://www.4shared.com/document/K2M62ang/praktikum_5.html"><font color="white"><li>Modul 5 Praktikum Praktikum Berorientasi Objek</li></font></a>
</ol>
</b></td>
</tr>

<!-- Baris 3 -->
<tr align="center">
<td height=35 colspan=9 bgcolor="black"><font color="white">&copy; Alivi Nur Rosida</font></td>
</tr>
</table>
</body>
</html>

untuk kode di atas, gambar hasilnya dapat dilihat dibawah ini :


Untuk kode dari halaman "Video" dapat dilihat di bawah ini :

<!DOCTYPE HTML>
<html lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="dossier-video.png" />
<title>Video</title>
</head>
<body bgcolor="#b2b3b9">
<br />
<hr size=5 color="#505152" />
<h1 align="center"><font face="courier new" color="#505152">WELCOME TO MY PAGE</font></h1>
<hr size=5 color="#505152" />
<br />
<br />
<table align="center" cellspacing=0>

<!--Baris 1 -->
<tr align="center">
<td height=40 width=20 rowspan=3 bgcolor="black"></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="studi_kasus.html"><font color="white"><b>Dokumen</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="#666769"><a href="video.html"><font color="white"><b>Video</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="musik.html"><font color="white"><b>Musik</b></font></a></td>
<td width=20></td>
<td width=20 rowspan=3 bgcolor="black"></td>
</tr>

<!--Baris 2 -->
<tr>
<td height=150 width=20 colspan=7 bgcolor="#666769">
<ol>
<a href="http://www.youtube.com/watch?v=bc6OcZ3BoRQ"><font color="white"><li>Upin dan Ipin 1</li></font></a>
<a href="http://www.youtube.com/watch?v=NA8kdmMt4pU"><font color="white"><li>Upin dan Ipin 2</li></font></a>
<a href="http://www.youtube.com/watch?v=0j5tOSRV5Qg"><font color="white"><li>Upin dan Ipin 3</li></font></a>
<a href="http://www.youtube.com/watch?v=m_Rq23PK8WI"><font color="white"><li>Upin dan Ipin 4</li></font></a>
<a href="http://www.youtube.com/watch?v=pkuKEGCO37k"><font color="white"><li>Upin dan Ipin 5</li></font></a>
</ol>
</b></td>
</tr>

<!-- Baris 3 -->
<tr align="center">
<td height=35 colspan=9 bgcolor="black"><font color="white">&copy; Alivi Nur Rosida</font></td>
</tr>
</table>
</body>
</html>

Untuk hasil tampilan dari halaman "Video" dapat dilihat di bawah ini :

Untuk halaman terakhir yaitu "musik", kodenya dapat dilihat dibawah ini :

<!DOCTYPE HTML>
<html lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="Dossier-music.png" />
<title>Musik</title>
</head>
<body bgcolor="#b2b3b9">
<br />
<hr size=5 color="#505152" />
<h1 align="center"><font face="courier new" color="#505152">WELCOME TO MY PAGE</font></h1>
<hr size=5 color="#505152" />
<br />
<br />
<table align="center" cellspacing=0>

<!--Baris 1 -->
<tr align="center">
<td height=40 width=20 rowspan=3 bgcolor="black"></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="studi_kasus.html"><font color="white"><b>Dokumen</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="video.html"><font color="white"><b>Video</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="#666769"><a href="studi_kasus.html"><font color="white"><b>Musik</b></font></a></td>
<td width=20></td>
<td width=20 rowspan=3 bgcolor="black"></td>
</tr>

<!--Baris 2 -->
<tr>
<td height=150 width=20 colspan=7 bgcolor="#666769">
<ol>
<a href="http://www.4shared.com/audio/RFT01l21/Kotak_-_Pelan_Pelan_Saja.html"><font color="white"><li>Kotak -- Pelan-Pelan Saja</li></font></a>
<a href="http://www.4shared.com/audio/Vlh0xbwo/Kotak_-_Beraksi.html"><font color="white"><li>Kotak -- Beraksi</li></font></a>
<a href="http://www.4shared.com/audio/rvZE4VG2/Kotak_-_Masih_Cinta.html"><font color="white"><li>Kotak -- Masih Cinta</li></font></a>
</ol>
</b></td>
</tr>

<!-- Baris 3 -->
<tr align="center">
<td height=35 colspan=9 bgcolor="black"><font color="white">&copy; Alivi Nur Rosida</font></td>
</tr>
</table>
</body>
</html>

Untuk tampilan halaman "musik" dapat dilihat dibawah ini :


selamat mencobaaa...semoga ini dapat membantuuu...
terimakasiiih..
Baca Selengkapnya...

Tidak ada komentar:

Posting Komentar

About

- alivi -