Bissmillah Hirahmanirahim
Assalamualaikum
Materi pada pertemuan kali ini merupakan kelanjutan atau pengembangan dari materi pada minggu lalu. Yang juga membahas tentang pembuatan sebuah tabel. Dapat dilihat disini.
Pada pertemuan kali ini, kita akan membuat sebuah daftar isi berbentuk frame 3 kolom. Untuk materi pembuatan daftar isi dan tabel yang berkolom-kolom bisa diliat di tulisan yang lalu. Cek disini.
Tak sama seperti daftar isi pada umumnya. Daftar isi yang nanti akan Kita buat akan memadukan fungsi hyperlink dan beberapa trik lainnya. Untuk lebih jelasnya bisa dilihat pada gambar-gambar dibawah ini.
Gambar 2 : Isi dari frame pada kolom kedua dan ketiga
Gambar 3 : Tampilan frame daftar isi dengan 3 kolom
- Tag HTML Untuk Gambar 1:
<html>
<head>
<title>
</title>
</head>
<body>
Semua Hyperlink di baha ini akan membuka file latihan tabel HTML. Namun, targetnya berbeda-beda :<br>
<ul>
<li><a href="data mahasiswa.html" target="new">Buka dalam layar browser baru</a>
<li><a href="data mahasiswa.html" target="tengah">Buka dalam frame pada bagian tengah</a>
<li><a href="data mahasiswa.html" target="kanan">Buka dalam frame pada bagian kanan</a>
</ul>
</body>
</html>
- Tag HTML Untuk Gambar 2:
<html>
<head>
<title>Data Mahasiswa TI 7</title>
</head>
<body>
<center>
<h1>Data Mahasiswa TI 7</h1>
<table width= 80% height= 20% border="1">
<tr>
<td rowspan="2" bgcolor="blue" align="center"><b>No.</b></td>
<td rowspan="2" bgcolor="blue" align="center"><b>Data Mahasiswa</b></td>
<td colspan="3" bgcolor="blue" align="center"><b>Persetujuan</b></td>
</tr>
<tr>
<td bgcolor="blue" align="center"><b>Ada</b></td>
<td bgcolor="blue" align="center"><b>Tidak Ada</b></td>
<td bgcolor="blue" align="center"><b>Keterangan</b></td>
</tr>
<tr>
<td align="center">1.</td>
<td>Wisnu Jati Primadana</td>
<td align="center">Ada</td>
<td align="center">-</td>
<td align="center">WNI</td>
</tr>
<tr>
<td align="center">2.</td>
<td>107091002272</td>
<td align="center">Ada</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3.</td>
<td>021-5914723</td>
<td align="center">Ada</td>
<td align="center">-</td>
<td align="center">Telpon Rumah</td>
</tr>
<tr>
<td align="center">4.</td>
<td>085693096966</td>
<td align="center">Ada</td>
<td align="center">-</td>
<td align="center">Nokia 3230</td>
</tr>
<tr>
<td align="center">5.</td>
<td>demongpok@gmail.com</td>
<td align="center">Ada</td>
<td align="center">-</td>
<td align="center">Email</td>
</tr>
<tr>
<td align="center">6.</td>
<td>klintink.blogspot.com</td>
<td align="center">Ada</td>
<td align="center">-</td>
<td align="center">Blog</td>
</tr>
<tr>
<td align="center">7.</td>
<td>Jl. Sarangan Raya/No.6 Perumnas 2 Tangerang</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">Alamat Rumah</td>
</tr>
<tr>
<td align="center">8.</td>
<td>sempax_zone</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">YM</td>
</tr>
</table>
</center>
</body>
</html>
- Tag HTML Untuk Gambar 3:
<html>
<head>
<title>INDEX
</title>
</head>
<frameset rows="100%,*">
<frameset cols="40%, 30%, 30%">
<frame src=kiri.html cols="100%">
<frame name="tengah" cols="100%">
<frame name="kanan" cols="100%">
</frameset>
<noframes>
Browser anda tidak bisa menampilkan from, sekalipun demikian anda masih dapat melihat isi pada <a href="isi.html">DAFTAR ISI</a>
</frameset>
</html>
Langkah terakhir dalam pengerjaan pertemuan 7 ini adalah simpel, yaitu Jangan lupa setiap file disimpan dengan ekstensi .html. hehehe...
Dari tag HTML pada setiap gambar, tidak ada yang begitu menyulitkan. Hanya saja Kita harus teliti dalam penamaan file, peletakan file, meng-link-kan suatu file dan mengatur ukuran dari baris dan kolom untuk tabel/frame tersebut.
Sekian tulisan saya, terkait tentang Praktikum Pemodelan dan SImulasi pertemuan ke-7 ini. Mohon maaf kalau ada kekurangan atau kesalahan dalam pengetikan kata-kata dan juga sourcecode yang digunakan. Bila ada tanggapan, Anda dapat mengetikan komentar diakhir dari tulisan ini.
Mau tidak repot dan tidak capek
>>Download Disini<<
Terimakasih
Wassalamualaikum...
0 comments:
Post a Comment