Saturday, September 18, 2010

KOMPONEN HTML LANJUT

HTML mempunyai banyak elemen dasar.  Secara garis besar, elemen ini mencakup LINK, TABEL, FRAME, dan FORM. Pada bagian, akan dijelaskan mengenai dasar-dasar dan cara penggunaan elemen dasar TABEL dan FORM.
 Tabel merupakan elemen yang digunakan untuk menghasilkan data dalam bentuk tabular, sehingga dapat menyampaikan informasi secara jelas dan mudah dipahami. Terdapat beberapa tag atau elemen utama yang digunakan dalam pembuatan table :
<TABLE>…</TABLE>, <TH> …</TH, ><TR>…</TR>, dan <TD>…</TD>. 
PENFORMATAN TABLE
Untuk menformat table dapat menggunakan beberapa atribut  dibawah ini :
  • align : berfungsi untuk mengatur posisi rata kiri (left), tengah (center) atau kanan (right).
  • cellpadding : digunakan untuk mengatur spasi antar border sel dengan isinya.
  • cellspacing : digunakan untuk mengatur spasi antar sel.
  • width : digunakan untuk menentukan lebar tabel atau sel.
  • Merge : digunakan untuk penggabungan sel.
  • Rowspan : untuk menggabungkan sel berdasarkan baris.
  • Cospan : untuk menggabungkan sel berdasarkan kolom.
  • Colgroup : digunakan untuk mengelompokkan berdasarkan kolom.
  • Tbody : untuk mengelompokkan berdasarkan kolom.
  • Height : untuk menentukan ukuran tinggi sel.
  • Nowrap : digunakan untuk membuat isi dari kolom tetap berada pada satu baris.
CONTOH MEMBUAT TABLE BERUPA GRAFIK
Maka dapat dituliskan :
<!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 1</title>
</head>
<body>
<table width="550" height="250">
  <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 >
    <td width="175" >Angin Reebot Ltd </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 colspan="6" bgcolor="#006712"></td>
    <td width="25">+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="#006712"></td>
    <td width="25">+55%</td>
    <td width="25"></td>
    <td></td>
  </tr>
<tr>
    <td>Hibernate Ltd </td>
    <td></td>
    <td></td>
    <td></td>
    <td>-23%</td>
    <td colspan="2" bgcolor="#FFE900"></td>
    <td width="15"></td>
    <td width="15"></td>
    <td width="15"></td>
    <td width="15"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Shutdown Ltd </td>
    <td></td>
    <td>-75%</td>
    <td colspan="4" bgcolor="#FF0120"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="18" style="border-top:#000000 solid"></td>
  </tr>
</table>
</body>
</html>
Gambar 1. Table berupa grafik
CONTOH MEMBUAT TABLE PERBANDINGAN
Maka dapat dituliskan:
<!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>Perbandingan Berbasis Tabel 2</title>
</head>
<body>
<table width="500" height="500" border="0">
  <tr>
    <td colspan="10" style="border-bottom:#000000 solid;"><p align="center"><font color="black"     
    face="TIME NEW ROMAN" size"6">PERBANDINGAN FITUR</font></td>
  </tr>
  <tr>
    <td align="center">No</td>
    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td width="200" align="center">Fitur</td>
    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td align="center">Enterprise</td>
    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td align="center">Pro</td>
    <td align="center">Free</td>
  </tr>
  <tr>
    <td colspan="10" 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;"></td>
  </tr>
</table>
</body>
</html>
Gambar 2. Table berupa perbandingan
Posted by at No comments:

Saturday, August 28, 2010

CARA MEMBUAT HALAMAN WEB SEDERHANA

§ Dasar teori
   HTML (Hypertext Markup Language) adalah sebuah bahasa markup, bukan bahasa pemrograman. Bahasa markup merupakan bahasa yang mengkombinasikan antara teks dan informasi tambahan mengenai teks tersebut. HTML merupakan suatu dokumen standart yang biasanya digunakan untuk mendesain halaman web.
   Setiap dokumen HTML harus diawali dengan tag dan diakhiri dengan komplemennya, yakni tag < /html> tag. Dokumen HTML juga harus menyertakan tiga pasang tag, yang terdiri dari :
a) Tag dan < /head>
    Tag ini digunakan untuk menyatakan informasi mengenai dokumen HTML.
b) Tag dan < /title>
    Tag ini digunakan untuk menambahkan title di title bar browser.
c) Tag dan < /body>
    Tag ini digunakan untuk melingkupi semua teks yang terdapat dihalaman HTML.
§ Contoh
   Berikut ini adalah contoh cara membuat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar. Dimana terdapat minimal sebuah heading dan garis berwarna, gambar dan garis tepi (border), dan latar belakang gambar sembarang. Yang harus dilakukan antara lain :
A. Persiapkan kebutuhan
     Kebutuhan minimal yang harus tersedia pada halaman web sederhana menggunakan HTML adalah :
1. WampServer
    Pemilihan WarmServer dalam HTML disarankan yang praktis, sehingga tinggal memfokuskan pada   pemograman. Contohnya : Paket web server Apace, PHP, dan MySQL.
2. Web Browser
    Disarankan menggunakan browser utama Mozilla Firefox. Tetapi bida menggunakan browser lain sebagai pembanding.
3. Editor teks
    Editor teks digunakan untuk menuliskan kode - kode HTML pembentuk halaman pada aplikasi web. Contohnya : Notepad atau Notepad ++.
4. HTML validator
    HTML validator ini digunakan untuk menghasilkan dokumen HTML yang valid, misalnya berupa add-on pada browser Firefox.
B. Membuat dokumen HTML
     Langkah - langkah pembuatan dokumen HTML :
1. Buka teks editor
2. Ketikkan teks (kode - kode HTML) berikut pada teks editor seperti dibawah ini :


     <body>
            
<font color = "red"> Halam web sederhana  
<hr color="green"/>   
<p>
Anggrek merupakan tanaman bunga hias berupa benalu yang bunganya indah.
Anggrek sudah dikenal sejak 200 tahun lalu dan sejak 50 tahun terakhir mulai
dibudidayakan secara luas di Malang dan seluruh Indonesia.
<br />
<p>
Sentra tanaman anggrek di Eropa adalah Inggris, sedangkan di Asia adalah Muangthai. Di Indonesia, anggrek banyak terdapat di Jawa Barat, Jawa Tengah,
Jawa Timur, Sumatra ataupun di Irian Jaya.
<br />
<p>
Jenis anggrek yang terdapat di Indonesia termasuk jenis yang indah antara lain:
             1. Vanda tricolour terdapat di Jawa Barat dan di Kaliurang,
             2. Vanda hookeriana, berwarna ungu berbintik-bintik berasal dari Sumatera,
             3. Anggrek larat/Dendrobium phalaenopsis,
             4. Anggrek bulan/Phalaenopsis amabilis,
             5. Anggrek Apple Blossom,
             6. Anggrek Paphiopedilum praestans yang berasal dari Irian Jaya,
7.  Anggrek Paphiopedilum glaucophyllum yang berasal dari Jawa Tengah.
            
<hr color="green"/>
<hr color="red" width="500px"/>
<!-- menggunakan part absolut -->
<img src="Vanda insignis 2.jpg" border=”2”>
            
<!-- memberi warna goodbyesky_1900 di body -->
<body <body background="3Danimal_2014.jpg">
<hr />

</body>


3. lihat hasil pada localhost warmserver.
Posted by at No comments:
Subscribe to: Posts (Atom)