TUGAS
KE 2
HTML
LANJUT
Disusun untuk memenuhi
Matakuliah Pemrograman
Web Berbasis Framework
Yang dibimbing oleh
Bapak Aries Alfian Prasetyo, S.Pd.
OLEH
:
Aryanti Sekar
Wahyu/1221180023
Teknik
Informatika 1
AKADEMI
KOMUNITAS (Poltek) NEGERI BOJONEGORO
JURUSAN
TEKNIK INFORMATIKA
Maret, 2014
A.
STUDI KASUS
Script :
<head>
<title>Studi
Kasus</title>
</head>
<frameset rows="15%,*,15%">
<!--- frame
atas--->
<frame src="link2.html" name="top"
id="top" />
<frameset cols="20%,50%,20%,">
<!--- frame
kiri--->
<frame src="link1.html"
name="left" id="left" />
<!--- frame tengah --->
<frame src="link4.html"
name="main" id="main" />
<!--- frame
kanan--->
<frame src="link1.html"
name="right" id="right" />
</frameset>
<!--- frame
bawah--->
<frame src="link2.html"
name="bottom" id="bottom" />
<!--- ini
ditampilkkan jika browser tidak suppurt frame --->
<notframes>
Browser
Tidak Support Frame
</notframes>
</frameset>
</html>
B.
TUGAS PRAKTIKUM
1. Grafik Batang
Statis
Ø Script :
<head>
<title>Grafik
Berbasis tabel</title>
</head>
<body>
<table
width="561" height="241">
<tr>
<td colspan="7"
style="border-top:black solid;border-bottom:black
solid;"><b>Perusahaan</td>
<td colspan="7"
style="border-top:black solid;border-bottom:black
solid;"><b>Pendapatan</td>
</tr>
<tr>
<td width="172">Angin
Reebot Ltd </td>
<td
width="27"></td>
<td
width="31"></td>
<td
width="25"></td>
<td
width="33"></td>
<td
width="16"></td>
<td
width="13"></td>
<td colspan="6" bgcolor="green"></td>
<td
width="17">+150%</td>
</tr>
<tr>
<td>Command Prompt, Inc
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"
bgcolor="green"></td>
<td
width="16">+55%</td>
<td
width="16"></td>
<td></td>
</tr>
<tr>
<td>Hibernate Ltd </td>
<td></td>
<td></td>
<td></td>
<td>-23%</td>
<td colspan="2"
bgcolor="yellow"></td>
<td
width="34"></td>
<td
width="16"></td>
<td
width="16"></td>
<td
width="16"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Shutdown Ltd </td>
<td></td>
<td>-75%</td>
<td colspan="4"
bgcolor="red"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="padding-bottom:5px; border-bottom:2pt black
solid" width="200" align="left"></td>
</tr> </table>
</body>
</html>
2. Desain table
perbandingan item
Ø Script :
<html
lang="en">
<head>
<title>Tabel
Pengelompokan</title>
</head>
<body>
<br/>
<br/>
<table
border="2" cellspacing=0 frame=hsides rules="groups"
summary="Grafik
Berbasis Tabel 2">
<caption>PERBANDINGAN
FITUR</caption>
<colgroup
align="center">
<colgroup
align="center">
<colgroup
align="center">
<colgroup
align="center" span="2">
<thead
valign="middle">
<tr>
<th
width="35">No
<th
width="200">Fitur
<th
width="100">Enterprise
<th
width="50">Pro
<th
width="50">Free
</tr>
<tbody>
<tr><td>1<td>Garansi
seumur hidup<td align="center">X<td
align="center">-<td align="center">-</tr>
<tr><td>2<td>Multiuser<td
align="center">X<td align="center">-<td
align="center">-</tr>
<tr><td>3<td>Update
otomatis<td align="center">X<td
align="center">X<td align="center">-</tr>
<tr><td>4<td>Cetak
laporan<td align="center">X<td
align="center">X<td align="center">-</tr>
<tr><td>5<td>Notifikasi
error<td align="center">X<td
align="center">X<td align="center">X</tr>
<tbody>
<tr><td>6<td>Ubah
tema<td align="center">X<td
align="center">X<td align="center">X</tr>
<tr><td>7<td>Try
ikon<td align="center">X<td
align="center">X<td align="center">X</tr>
</table>
</body>
</html>
