Semua tulisan di sini adalah hasil uneg-uneg kala bete berat, jam kuliah kosong, dan ketika hotspot kampus bisa diajak kerja sama.
RSS

About Me

Foto Saya
LiliQue
Anak bungsu dari 4 bersaudara. Waktu kecil nakal setengah mati dan hobi banget berkelahi. Sekarang jadi mahasiswi teknik informatika Universitas Negeri Malang yang masih aja sering pulang karena kangen masakan ibu tercinta (yah gimana ga kangen masakan rumah kalo makanan anak kos ya begitu-begitu aja!). Punya rambut panjang sepunggung tapi sering dipanggil 'Mas', tinggi semampai (a.k.a semeter tak sampai). Selalu dapat peran jadi hantu kalo ada drama gara2 punya mata besar dan nakutin kalo melotot. Enggak terlalu berbakat berurusan sama anak kecil karena kalo ada anak kecil yg tadinya diam pasti cemberut begitu liat aku, yg tadiny ketawa ngakak malah nangis terisak..(ga tau knapa padahal akunya diem aja...ckck...ckck...).
Lihat profil lengkapku
Welcome to My Blog

Yang melirik Blog seadanya ini..

Web Page Counter
Digital camera coupons

Membuat dan Memodifikasi Tabel pada HTML (bagian 2)

Label:
Kalau sebelumnya kita membuat dan memodifikasi tabel untuk membuat diagram batang, kali ini kita akan mencoba membuat tabel yang data-datanya tampak dikelompokkan seperti Gambar 1 ini :
Gambar 1

Model tabel seperti Gambar 1 dapat dibuat dengan memanfaatkan fitur pengelompokan (group).
rules="groups" dan colgroup bisa disebut 'kata kunci' untuk membuat tampilan seperti Gambar 1.
rules="group" digunakan untuk membuat garis horizontal per group data yang kita buat.
Sementara itu, colgroup digunakan untuk membuat garis-garis vertikal yang membatasi kolom-kolom pada tabel.

Kode Program:

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

<head>
<title>Tabel 2</title>
</head>

<body>
<table border="2" cellspacing=0 frame="hsides" rules="groups">
<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>

Hasilnya jadi seperti ini :

 







Read More.. 0 komentar
Diposting oleh LiliQue di 05.54

Membuat dan Memodifikasi Tabel pada HTML (bagian 1)

Label:

Gambar 1

Tabel pada HTML dapat dimanfaatkan dan dimodifikasi untuk merepresentasikan beberapa hal diantaranya untuk merepresentasikan diagram batang seperti yang ditunjukkan
Gambar 1.
Untuk memodifikasi tabel agar tampak seperti gambar 1, kita bisa memanfaatkan penggunaan tabel di dalam tabel. Rincian langkahnya adalah sebagai berikut:
1. Buat tabel utama yang mempunyai width=600. Tabel ini nantinya akan terdiri dari 2 row(baris).
    Baris pertama akan diisi tabel yang berisi nama perusahaan dan pendapatan sementara baris kedua diisi tabel yang memuat data-data seperti nama-nama perusahaan dan pendapatannya masing-masing.
2.    Buat tabel pertama yang berisi teks "Perusahaan" dan "Pendapatan" di dalam row pertama dari tabel no.1.
3.    Buat tabel kedua yang berisi data nama-nama perusahaan dan pendapatannya di dalam row kedua dari tabel no.1.
4.    Untuk membuat diagram batang pendapatan, buat tabel baru dan masukkan tabel tersebut sebagai data kolom ke dalam row  tabel no.3. Beri warna dan border pada tabel yang baru kita buat ini.
   
Lebih lengkapnya, source kodenya adalah sebagai berikut :

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>tugas Praktikum 1</title>
</head>
<body>
<table width="600" >
<tr>
<td width="600" colspan="2">
<table frame="hsides" align="left" cellspacing="0" cellpadding="5">
<tr><!--  Mengatur  lebar  kolom  -->
<th width="200">Perusahaan</th>
<th width="500">Pendapatan</th>
</tr>
</table>
</td>
</tr>


<tr>
<td>
<table frame="below" align="left" cellspacing="0"cellpadding="1">
<tr><!--  Mengatur  lebar  kolom  -->
<td width="200">Angin Reboot Ltd</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="150" colspan="5" ><table border="2"><tr><th width="150" height="16" colspan="5" bgcolor="green"></th></tr></table></td>
<td >+150%</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
</tr>

<tr><!--  Mengatur  lebar  kolom  -->
<td width="200">Command Prompt Inc</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="50" colspan="2"><table border="2"><tr><td width="50" height="16" colspan="2" bgcolor="green"></td></tr></table></td>
<td width="25">+50%</td>
<td width="25"></td>
<td width="25"></td>
</tr>

<tr><!--  Mengatur  lebar  kolom  -->
<td width="200">Hibernate Ltd</td>
<td width="50"></td>
<td width="25"></td>
<td width="25" align="right">-23%</td>
<td width="25"><table border="2" align="right"><tr><td width="20" height="16" bgcolor="yellow"></td></tr></table></td>
<td width="25"></td>
<td width="25"></td>
</tr>

<tr><!--  Mengatur  lebar  kolom  -->
<td width="200">Shutdown Ltd</td>
<td width="25"></td>
<td width="25"></td>
<td width="25">-75%</td>
<td width="100"><table border="2"><tr><td width="100" height="16" colspan="3" bgcolor="red"></td></tr></table></td>
<td width="25"></td>

<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
</tr>

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

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


Dalam source kode tersebut digunakan atribut frame.
frame="hsides" pada tabel no.2 dimanfaatkan untuk membuat garis hanya pada sisi atas dan bawah tabel.
Sementara frame="below" pada tabel no.3 digunakan untuk memberi garis hanya pada garis horizontal paling bawah dari tabel.

Hasilnya :





Read More.. 3 komentar
Diposting oleh LiliQue di 05.38

Membuat Web Sederhana

Label:
Membuat halaman web sederhana yang terdiri dari beberapa macam elemen seperti teks, paragraf, garis berwarna, gambar dengan border dan halaman utama yang latar belakangnya bebas .

Kodenya :

Kalo kode di atas sudah ditulis, sebainya di cek dulu dengan html validator milik firefox supaya kita tahu apakah kode program yang kita buat sudah sesuai standar atau belum. Setelah divalidasi dengan HTML Validator, untuk mengetahui apakah kode program sudah valid atau belum dilihat dari tanda yang muncul di pojok kanan bawah. bila yang muncul tanda centang hijau berarti sudah sesuai standar, namun bila muncul tanda silang merah berarti kode program belum sesuai standar.

Tampilan Hasilnya :
Read More.. 1 komentar
Diposting oleh LiliQue di 23.59
Langganan: Postingan (Atom)