"WELCOME WELCOME WELCOME"
"BE YOUR SELF"

DesainTabel Dengan Pengelompokan

Untuk membuat desain tabel perbandingan item dengan memanfaatkan fitur
pengelompokan. Contoh hasilnya diperlihatkan seperti di bawah ini

langkah-langkah pembuatannya adalah hampir sama dengan yang pertama dengan memgatur letak atau posisi dari Tagnya ditambah dengan memanfaatkan elemen tabel. Elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk memformat visualisasi tabel.
Tiga atribut pertama yang sering digunakanadalah align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel) dan cellpadding (untuk mengatur spasi antara border sel denganisinya).
Dalam pembuatan tabel ini format yang di atur adalah format alignnya, selanjutnya dengan memanfaatkan penggabungan (merge) sel yaitu colspan seperti pada pembuatan grafik batang sebelumnya. Anda bisa mengatur letak posisinya sehingga dapat terlihat seperti gambar di atas.

sourcode untuk desain tabel yang kedua...

<!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">
<head>
<title>Grafik Berbasis tabel 2</title>
</head>

<body>
<marquee><font color="Red" face="arial" size="5">Desain Tabel Dengan Fitur Pengelompokan</font></marquee>
<blink><font color="Red" face="Arial" size="4">Created by: Novi Khassifa</font></blink>
<table width="470" height="401" border="0">
<tr>
<td colspan="8" style="border-bottom:#000000 solid;"><p align="center"><font color="black" face="TIME NEW ROMAN" siz"4">PERBANDINGAN FITUR</font></td>
</tr>
<tr>
<td width="31"align="center">No</td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
<td width="208" align="center">Fitur</td>
<td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0">&nbsp;</td>
<td width="92" align="center">Enterprise</td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
<td width="0"align="center">Pro</td>
<td width="0"align="center">Free</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">1</td>
<td>Garansi seumur hidup </td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">2</td>
<td>Multiuser</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3</td>
<td>Update otomatis </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">4</td>
<td>Cetak Laporan </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">5</td>
<td>Notifikasi error </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">6</td>
<td>Ubah tema </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td align="center">7</td>
<td>Try ikon</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
</table>
<BR><a href="Tugas1.html">Back</a> Kembali Ke Halaman Utama
</body>
</html>

silahkan anda coba lagi...
^_^

NB: -Untuk tulisan berjalan dan tulisan blinknya anda bisa menambahkan source code merquee dan blink...
-Agar kedua halaman web (Tabel 1 dan 2) bisa dikaitkan maka sudah saya tambahkan Link agar bisa bolak balik kehalamn 1 dan ke halaman ke-2 Readmore...

Diposting oleh khassifa di 05.17 0 komentar
Bookmark and Share
Label:

Grafik Batang Berbasis Tabel

Membuat kreasi grafik batang garis dengan memanfaatkan elemen tabel
hasilnya bisa dilihat pada gambar di bawah ini


adapun langkah-langkah dalam pembuatan tabel tersebut adalah dengan mengatur letak atau posisi dari masing-masing tag yang ada dalam tabel yaitu
-Tag atau table heading yang berfungsi mendefinisikan header
-Tag atau table row yang berfungsi mendefinisikan baris
-Tag atau table data yang berfungsi mendefinisikan sel
namun dalam pembuatan diagram batang yang diubah adalah Tag Tr dan Tdnya saja

Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam
setiap baris ataupun kolomnya.untuk itu perlu
dilakukan penggabungan (merge) sel. Dalam konteks elemen tabel,
penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom
(colspan). Untuk diagram batang dengan memanfaatkan elemen tabel ini anda rubah colspannya sehingga akan terlihat hasil seperti pada gambar di atas

agar lebih menarik anda bisa mengubah warna, tampilan atau background sesuai dengan keinginan anda

source codenya==>

<!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>
<title>Grafik Berbasis tabel</title>
</head>
<body background ="6.jpg">
<marquee><font color="Red" face="arial" size="5">Kreasi Grafik Batang Dengan Memanfaatkan Elemen Garis</font></marquee>
<blink><font color="Red" face="Arial" size="4">Created by: Novi Khassifa</font></blink>
<table width="561" height="241">
<tr>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Perusahaan</td>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>
</tr>
<tr >
<!--&nbsp;-->
<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="#006600"></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="#006600"></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="#FFFF00"></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="#FF0000"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="14" style="border-top:#000000 solid"></td>
</tr>
</table>
<a href="Tugas2.html">Klik di sini</a> Untuk Mengakses Desain Tabel Berikutnya
<hr color="black"></hr>
</body>
</html>


selamat mencoba!!! ^_^ Readmore...

Diposting oleh khassifa di 05.08 0 komentar
Bookmark and Share
Label:

MEMBUAT HALAMAN WEB SEDERHANA


Gambar di atas adalah salah satu contoh dari membuat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan
gambar.Terdapat sebuah heading dan garis berwarna,
dua buah gambar pada sisi kiri dan kanan dengan garis tepi (border), dan halaman utama dengan latar belakang (background) gambar sembarang.
Adapun source codenya==>

<!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> <title>khassifa</title></head>
<body background ="6.jpg">

<h2><b>Halaman Web Sederhana</b></h2>
<h3><b>By: Khassifa</b></h3>
<img src="1.jpg" align="left" border="6" alt="0"/>

<hr style = "color:#0000FF" />
<p>
studdy kasus ==> Memuat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan
gambar. Di mana terdapat minimal sebuah heading dan garis berwarna,
gambar dengan garis tepi (border), dan halaman utama dengan latar belakang
gambar sembarang
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
</p>
<hr style = "color:#FF0000" /> <br />
<hr style = "color:#0000FF" align="right" width="200" />
<p align="right">
</p>
<font color="#800000"><b>KuruNdutZ</b></font><br />
<font color="#800000"><b>AyyaMdanBeybekZ</b></font><br />
<img src="5.jpg" align="right" border="6"alt="0"/>
</body>
</html>


 Readmore...

Diposting oleh khassifa di 18.40 0 komentar
Bookmark and Share
Label:

Bismillah.....

Ngeblog lagi untuk upload tugas Pemrograman Berbasis Web salah satu mata kuliah semester 6 PTI UM '07 ..Bimbingan Pak Didik Dwi Prasetyo,S.T,M.T.
Mudah-mudahn lancar aja untuk seterusnya Amin.... Readmore...

Diposting oleh khassifa di 14.38 1 komentar
Bookmark and Share
Label:

SISTEM ORGAN TUBUH MANUSIA BERBASIS JAVA 3D


ehm..gambar di atas Project grafkom semester 5 kemarin...
lumayan mumet juga seh walaupun tampilannya sederhana kayak gitu...untung aja ngerjakannya berkelompok bareng kedua temenku Amanda Rehana A.T dan Romita Apriyani...
terima kasih buat dosen matakuliahnya Pak Didik karena udah ngasih nilai bagus,alhamdulillah...
bagi temen2 atau siapapun yang ingin mengembangkan project kami bisa menghubungi alamat email kami di mythzone@gmail.com, atirtani_orly@yahoo.com, khassifa_novi@yahoo.com Readmore...

Diposting oleh khassifa di 11.14 1 komentar
Bookmark and Share
Label:
Langganan: Postingan (Atom)

The ReaL GeJe ^^

The ReaL GeJe ^^

KHASSIFA SI BINTU NAHL

KHASSIFA SI BINTU NAHL
"TELADANI LEBAH YANG SUCI DAN MENGOBATI"
 

About Me

Foto saya
Aku terlahir di mataram Lombok NTB pada bulan November 89..... sekarang lagi memempuh study Pendidikan Teknik Informatika di Universitas Negeri Malang.... prinsipQ..be ur self & Islam is one way solution.. sedikit keburukanku... Aduh!!!orangnya ancur2an,,,ceplas-ceplos....ceroboh...maaf y?!bagi yg udah tersinggung ma novi..

Tags Cloud

Blogumulus by Roy Tanck and Amanda Fazani

BlogUp