Rabu, 24 Februari 2010

Membuat Tabel

ok, selanjutnya kita akan belajar bagaimana membuat tabel dengan mengetahui elemen-elemennya. berikut akan di berikan skrip html untuk membuat suatu desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan.

ini skrip html nya :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">

<head>
<title>Membuat Tabel</title>
</head>

<body>
<table border="2" cellspacing=0 frame="hsides" rules="groups">
<caption>PERBANDINGAN FITUR</caption>
<!--Perataan Tengah Conten Tabel-->
<colgroup align="left">
<colgroup align="left">
<colgroup align="center" span="2">
<thead valign="middle"-->

<tr>
<th width="35" align="center">No
<th width="200" align="center">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">-</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>



jika penulisan kode di atas susah benar, maka tampilannya akan seperti di bawah ini:

Diposting oleh di Tidak ada komentar:
Label:

Membuat Grafik Statis

Minggu yang lalu kita sudah mengetahui dasar-dasar html, berikutnya kita akan mencoba bermain dengan tabel. Di bawah ini adalah skrip untuk membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel, mari kita pelajari bersama :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Grafik Statis dalam Tabel</title>
</head>
<body>
<table width="550" >
<tr>
<td width="550" colspan="2">
<table frame="hsides" align="left" cellspacing="0" cellpadding="10">
<tr>
<th width="150">Perusahaan</th>
<th width="400" colspan="16">Pendapatan</th>
</tr>
</table>
</td>
</tr>


<tr>
<td>
<table frame="below" align="left" cellspacing="0"cellpadding="0">

<tr>
<td>Angin Reboot Ltd</td>
<td width="200" colspan="8"></td>
<td width="150" height="30" colspan="6"><table width="150" height="25" border="2" bgcolor="green" cellspacing="0" cellpadding="0"></table></td>
<td width="50" colspan="2">+150%</td>
</tr>

<tr>
<td width="150">Command Prompt Inc</td>
<td width="200" colspan="8"></td>
<td width="50" colspan="2" height="30"><table width="50" height="25" border="2" bgcolor="blue" cellspacing="0" cellpadding="0"></table></td>
<td width="75" colspan="3">+50%</td>
<td width="75" colspan="3"></td>
</tr>

<tr>
<td>Hibernate Ltd</td>
<td colspan="5" width="125"></td>
<td colspan="2" align="right" width="52">-23%</td>
<td width="23" height="30"><table width="23" height="25" border="2" bgcolor="yellow" cellspacing="0" cellpadding="0"></table></td>
<td colspan="8" width="200"></td>
</tr>
<tr>
<td>Shutdown Ltd</td>
<td colspan="5" width="125" align="right">-75%</td>
<td colspan="3" width="75" height="30"><table width="75" height="25" border="2" bgcolor="red" cellspacing="0" cellpadding="0"></table></td>
<td colspan="8" width="200"></td>
</tr>

</table>
</td>
</tr>

</table>
</body>
</html>

jika penulisan kode di atas susah benar, maka tampilannya akan seperti di bawah ini:
Diposting oleh di Tidak ada komentar:
Label:

Selasa, 16 Februari 2010

Membuat halaman WEB sederhana

Berikut adalah halaman web sederhana yang melibatkan element teks, garis, warna, dan gambar. Di mana terdapat sebuah heading dan garis berwarna, gambar dengan garis tepi dan latar belakang dengan gambar..

ini contoh skripnya :



<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--disini tempat memberikan judul halaman web kita-->
<title> Trouble Shooting >
</head>
<!--di bawah ini adalah body, tempat menuliskan kontens dari halaman web, di awal inisialisasi body kita atur warna teks dam gambar latarbelakangnya-->

<body text="purple" background="space.jpg">
<!--menambahkan heading 1-->
<h1>POWER IS MONEY :p>

<!--membuat garis dengan warna merah-->
<hr color="red" />
<p>
BLA..BALA.ANABB
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>

<!--membuat garis dengan warna biru-->
<hr color="blue" />
<br/>
<br/>

<!--membuat garis dengan warna magenta, panjang 30% dari layar, tebal 10 poin, dan dimulai dari kanan-->
<hr color="magenta" width="30%" size="10" align="right" />

<!--mengimport gambar lokal(alamat dinamis dg syarat gambar berada dalam satu folder) dengan border 6-->
<img border="6" width="200" height="120" src="mario.gif" align="right"/>
</body>
</html>
ini Tampilannya :



Diposting oleh di 1 komentar:
Label:
Langganan: Postingan (Atom)