JAVA - koneksi ke database acces

Ada beberapa proses dasar di dalam pemrograman database, diantaranya adalah:
koneksi database yang suatu teknik untuk menghubungkan aplikasi dengan sebuah DBMS (DataBase Management System).
Menampilkan data dari database menggunakan query
Mengelola data, seperti menambah data, menghapus data dan memperbaikia data.


untuk selengkapnya dapat di baca dan di download via 4shared dan mediafire

Read More

APSI - pertemuan 10 + tugas

Sequence diagram menggambarkan interaksi antar obyek di dalam dan di sekitar sistem (termasuk pengguna, display dan sebagainya).Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu.




Download File Selengkapnya via 4shared atau via Mediafire

Read More

APSI - pertemuan 9 + tugas

       Rancagan Layar adalah sebuah disain tampilan yang berfungsi sebagi antar muka antara si pengguna (user) dengan Applikasi (Sistem), atau biasa disebut dengan User Interface.Rancangan layar dibuat berdasarkan 2 diagram

              - Use Case Diagram

              - Class Diagram

   dan dengan mempertimbangkan dari sudut pandang user atau kebutuhan user.

Lebih Lengkap Download materinya Via 4shared atau via Mediafire

Read More

APSI - pertemuan 8 + tugas

maaf baru sempet uploud.... langsung aj download materi delapan dan juga terdaapat tugas kelompok dan individu di dalamnya...

download : via 4shared dan via mediafire

Read More

Download materi semester 5 Lengkap

UNtuk yang belum punya materi semester 5 atau yang belum sempat downoad sebelumnya ni link baru download semester 5 materi lengkap... cz banyak link sebelumnya yang broken... langsung aj download :

Via 4shared 
Via Mediafire

Read More

Materi Arsitektur dan Organisasi Komputer

Ini  adalah  modul  tentang  organisasi  komputer.  Modul  ini  mendeskripsikan fungsi  dan  desain  berbagai  unit  komputer  digital  yang  menyimpan  dan  mengolah informasi.  Modul  ini  juga  berkait an  dengan  unit  komputer  yang  menerima  informasi dari  sumber  eksternal  dan  mengirimkan  hasil  terkomputasi  ke  dest inasi  eksternal. Kebanyakan  materi  dalam  modul  ini  ditujukan  untuk  hardware  komputer  dan
arsitektur komputer.

Download : Via 4shared     &        Via Midiafire

Read More

APSI-Pertemuan 4 Use case Diagram

Use Case diagram adalah diagram yang menggambarkan kebutuhan sistem dari sudut pandang user, yang memperlihatkan hubungan-hubungan yang terjadi antara actors dengan use cases dalam sistem.

Actor adalah entity eksternal yang berhubungan dengan sistem yang berpartisipasi dalam use case. Seorang actor secara khusus membangkitkan sistem dengan input atau masukan kejadian-kejadian, atau menerima sesuatu dari sistem. Actor dilukiskan dengan peran yang mereka mainkan dalam use case, seperti Pelanggan, Kasir, dan lain-lain........ 

untk read more lgsung download aj di sini

Read More

Lesson5. Cascade Style Sheet

Style sheet merupakan fitur yang sangat penting dalam membuat dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheet merupakan kelebihan tersendiri. Style sheet merupakan fasilitas HTML yang memungkinkan kita untuk memisahkan style dan layout dokumen HTML sebenarnya. Dengan adanya kemampuan ini kita tidak perlu menyentuh setiap baris HTML lagi jika ingin melakukan perubahan layout pada dokumen, kita cukup mengubah definisi style sheet atau membuat style sheet baru.

• Reading Material
•  Style SheetPDF document
•  Contoh 1. Penggunaan Background ColorResource
•  Contoh 2. Penggunaan ClassResource
•  contoh 3. Penggunaan HyperlinkResource
• Game
•  Contoh File CSS

Download Materi

Read More

Contoh File Css

Berikut contoh satu file yang berisi perintah-perintah untuk mengatur layout halaman web, file tersebut disimpan dengan nama default.css.
Untuk lebih lengkapnya anda dapat mendowload file tersebut default.css.
File CSS tersebut dapat digunakan untuk mengatur format tampilan halaman web dengan pemanggilan menggunakan Link yaitu :
<link href="default.css" rel="stylesheet" type="text/css" >.
Berikut contoh nya : 

<html><br /> <head><br /> <title>welcome my website</title><br /> <link href="default.css" rel="stylesheet" type="text/css" ><br /> </head><br /> <body><br /> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="bg1"><tr> <td valign="top"><table width="740" border="0" align="center" cellpadding="0" cellspacing="0" class="bg2" style="height: 181px; padding-left: 45px;"><tr> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr> <td width="740"><img src="images/spacer.gif" alt="" width="100" height="80"></td> </tr> <tr> <td class="text3"><div align="left">learning by doing</div></td> </tr> <tr> <td class="text4"><div align="left"></div></td> </tr> <tr> <td class="text4"><img src="images/spacer.gif" alt="" width="100" height="38" ></td> </tr> <tr> <td valign="middle" class="style1"><div align="left"><a href="#">Home</a>  | <a href="#">profil </a> |  <a href="#">galeri</a>  |  <a href="#">buku tamu </a> | <a href="#"> kontak</a>  | </div></td> </tr> </table></td> </tr> </table></td> </tr> </table><table width="680" border="0" align="center" cellpadding="0" cellspacing="0"><tr> <td><table width="650" border="0" align="center" cellpadding="0" cellspacing="0"><tr valign="top"> <td width="189"><table width="96%" border="0" cellspacing="0" cellpadding="0"><tr> <td class="text2"> </td> </tr> <tr> <td class="text2"> </td> </tr> <tr> <td class="text2">Berita terbaru</td> </tr> <tr> <td> </td> </tr> <tr> <td><p><strong>Materi Kuliah</strong></p></td> </tr> <tr> <td> </td> </tr> <tr> <td><p><strong>Catatanku</strong></p></td> </tr> <tr> <td> </td> </tr> <tr> <td><p><strong>Umum</strong></p></td> </tr> <tr> <td> </td> </tr> <tr> <td><p><strong>Islami</strong></p></td> </tr> <tr> <td> </td> </tr> <tr> <td><p><strong>Seni</strong></p></td> </tr> <tr> <td> </td> </tr> </table></td> <td width="40"> </td> <td width="421"><table width="97%" border="0" cellspacing="0" cellpadding="0"><tr> <td class="text2"> </td> </tr> <tr> <td class="text2"> </td> </tr> <tr> <td class="text2">Selamat datang di website kami</td> </tr> <tr> <td> </td> </tr> <tr> <td valign="top"><p>Terimakasih anda telah bergabung dengan kami, semoga website ini dapat memberikan informasi yang anda butuhkan......</p><p> </p></td> </tr> <tr> <td> </td> </tr> </table></td> </tr> </table></td> </tr> </table><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bg3" style="height: 41px;"><tr> <td><table width="740" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-left: 45px;"><tr> <td class="style1"><a href="#">Home</a>  | <a href="#">profil</a>|  <a href="#">galeri</a>  |  <a href="#">buku tamu </a> | <a href="#">kontak</a>  | </td> </tr> <tr> <td class="style1"> </td> </tr> <tr> <td class="style1"> </td> </tr> </table></td> </tr> </table><table width="740" border="0" align="center" cellpadding="0" cellspacing="0"><tr> <td> </td> </tr> <tr> <td align="center">Copyright © 2010 Jakarta. Designed by Endar Nirmala</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table><div style="text-align: center; font-size: 0.75em;"></div></body><br /> </html>

Silakan anda mencoba file CSS dengan mengubah nilai atau menambahkan attibut yang lain.

Read More

Penggunaan Hyperlink

Hyperlink adalah cara untuk menghubungkan suatu bagian dalam slide, file, program, atau halaman web dengan bagian lainnya dalam bidang-bidang tersebut. Hyperlink digunakan untuk menunjukan lokasi lain dari dari teks atau objek yang dipresentasikan. Hyperlink dapat menghubungkan beberapa dokumen, file, objek, aplikasi, halaman web dan sebagainya.
Langsung try aj code script di bawah ini....

<html><br /> <head><br /> <style type="text/css"> a:link {color:#FF0000;} /* link belum dikunjungi */ a:visited {color:#00FF00;} /* link telah dikunjungai */ a:hover {color:#FF00FF;} /* ketika mouse diletakkan diatas link */ a:active {color:#0000FF;} /* link saat di klik */ </style><br /> </head><br /> <br /> <body><br /> <p><b><a href="lat7.html" target="_blank">Ini adalah Link menuju ke latihan7</a></b></p><p>Setiap umat beragama umumnya memiliki tempat yang dianggap suci. Belum afdol rasanya jika seumur hidup tidak pernah mengunjungi lokasi-lokasi tersebut.<br /> Sebutlah umat Islam yang punya Mekkah, kota Jerusalem di Israel tujuan umat Kristiani, pun negara India tempat lahirnya agama Hindu dan Buddha. Masing-masing punya sejarah yang berkaitan erat dengan asal-usul suatu agama.</p><br /> <p>Nah, situs InfoWorld telah memilih beberapa "tempat suci", khusus bagi para pelaku dunia teknologi informasi (TI). Tempat-tempat ini direkomendasikan untuk dikunjungi, mengingat di sinilah banyak inovasi fenomenal dalam bidang komputer diinisiasi. <br /> <br /> Sudah bukan rahasia lagi, kebanyakan penemuan atau pionir perusahaan TI, terutama di Amerika Serikat, dilakukan dalam garasi rumah atau kamar asrama. Karena itu, jangan heran kalau beberapa tempat dalam daftar berikut bukanlah berwujud gedung atau bangunan megah.<br /> <br /> Ini dia, 12 tempat yang memegang peranan penting dalam sejarah komputer dunia.</p><br /> <b><a href="lat5.html">367 Addison Avenue, Palo Alto, California, USA</a></b><br /> <p>Lokasi yang ditasbihkan sebagai tempat kelahiran Silicon Valley oleh pemerintah negara bagian California pada tahun 1989. Garasi rumah ini merupakan tempat Bill Hewlett dan Dave Packard mengembangkan produk pertama mereka: osilator audio Model 200A, lebih dari 70 tahun yang lalu. Film legendaris "Fantasia" keluaran Disney ialah salah satu karya yang mempergunakan produk ini dalam pembuatan soundtrack-nya. Kini, perusahaan rintisan mereka, HP, telah menjelma menjadi salah satu vendor raksasa di dunia TI.</p><br /> <b>2066 Crist Drive, Los Altos, California, USA</b><br /> <p>Di rumah inilah, Steve Jobs dan Steve Wozniak merintis perusahaan Apple Computer pada tahun 1976. Duo Steve memproduksi 50 buah PC yang mereka beri nama Apple 1 di sebuah kamar yang tak terpakai. Komputer yang mereka buat kemudian dijual melalui toko Byte Shop seharga $500 per unit.</p><br /> <b>232 Santa Margarita Avenue, Menlo Park, California, USA</b><br /> <br /> <p>Tempat terakhir yang berlokasi di wilayah Silicon Valley. Masih berbentuk garasi rumah, di sini duo Larry Page dan Sergey Brin melakukan riset sekaligus mengembangkan mesin pencari Google. Dari ide yang muncul saat kedua mahasiswa ini mengobrol di kamar asrama, mereka mendapat dukungan dana sebesar 1 juta dolar dan akhirnya memutuskan untuk menyewa sebuah garasi di rumah milik Susan Wojcicki, seorang karyawan Intel.<br /> </p><br /> </body><br /> </html>

Read More

Penggunaan Class

Copy koed script di bawah ini untuk copy dan coba sendir di komputer ente....

<html><br /> <head><br /> <style type="text/css"> body { margin-left:300px; background:#5d9ab2 url('tree.jpg') no-repeat top left; background-attachment:fixed; } .container { text-align:left; margin-right: 100px; text-align:justify; color: sienna; font-size: 150%; } .center_div { border:4px solid gray; margin-left:auto; margin-right:auto; width:80%; background-color:#d0f0f6; text-align:left; padding:5px; } </style><br /> </head><br /> <br /> <body><br /> <!--<div class="container"> <br /> --><br /> <div class="center_div"><h1>Hello World!</h1><p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p></div><h2>Uji coba container KOTA TUA</h2><div class="container">"Kota tua" merupakan saksi sejarah kota Jakarta, dibalik arsitektur bangunannya yang mengagumkan menyimpan "Misteri" akan peristiwa sejarah di masa lampau. Inilah selintas mengenai kota tua Jakarta dan sejarahnya….<br /> <br /> Museum Wayang Gedung ini awalnya bernama Gereja Lama Belanda (De Oude Hollandsche Kerk) dibangun pada tahun 1640 M. Pada tahun 1732 M, gedung ini diperbaiki dan berganti nama menjadi Gereja Belanda Baru (De Nieuwe Hollandsche Kerk). Namun, terjadi gempa bumi pada tahun 1808 M yang menyebabkan sebagian bangunan ini hancur. Kemudian dibangun lagi pada Tahun 1912, dan dijual oleh pemerintah Hindia Belanda kepada sebuah perusahaan yang bernama Geo Wehry & Co serta dijadikan kantor hingga tahun 1934. Pada tahun 1936, kepemilikan gedung ini berpindah lagi setelah dibeli oleh sebuah Lembaga Ilmu Pengetahuan, Seni dan Budaya di Batavia milik pemerintah Belanda. Baru pada tahun 1957, gedung ini diserahkan pada Lembaga Kebudayaan Indonesia dan secara resmi dijadikan Museum Wayang pada tanggal 13 Agustus 1975.<br /> </div><h2>Kalibesar</h2><h4>Kalibesar merupakan nama jalan di daerah Jakarta Utara. Letaknya tidak jauh dari Museum Sejarah Jakarta. Dengan berjalan kaki dari Museum Sejarah Jakarta, kita hanya membutuhkan waktu lima menit saja untuk mencapai jalan Kalibesar ini. Dulu pada abad ke-17, Jalan Kalibesar terkenal sebagai daerah pusat bisnis perdagangan yang cukup terkenal dan bergengsi. Jalan Kalibesar ini biasa disebut Grootegracht yang artinya kali besar, karena di jalan tersebut terdapat kali yang diapit jalan dan bangunan. Selain pusat bisnis perdagangan, di Jalan Kalibesar juga banyak terdapat rumah penduduk Cina. Kali itu sendiri menjadi jalur lalu lintas kapal bongkar muat barang. Hingga akhirnya pada tahun 1740, terjadi kerusuhan di Jalan Kalibesar dan banyak rumah penduduk dibakar.<br /> <br /> Pada tahun 1870, Jalan Kalibesar dibangun kembali. Di Jalan Kalibesar terdapat bangunan berlantai dua dan berwarna merah. Nggak heran kalau bangunan ini disebut Toko Merah. Bangunan ini sangat terkenal pada zaman dulu karena pernah ditinggali oleh beberapa Gubernur Jenderal VOC. Saat ini bangunan Toko Merah masih berdiri kokoh dan digunakan sebagai perkantoran.</h4></body><br /> </html>

selamat mencoba..

Read More

Penggunaan Background Color

Pada Materi Pelajarn yang ke5 salah satu mater yang dbahas adlah bagaimana cara mengganti bcakground collor.. untuk langsung mencobany copy script contoh di bawah ini....

<html><br /> <head><br /> <style type="text/css"> h1 { background-color:#6495ed; } p { background-color:#e0ffff; } div { background-color:#b0c4de; color: purple; font-size: 125%; text-align: justify; } </style><br /> </head><br /> <br /> <body><br /> <br /> <h1>Contoh Penggunaan Warna Latar Belakang dalam CSS</h1><div>Ini adalah Text dalam elemen div.<br /> <p>Paragraph ini mempunyai warna latar belakang sendiri </p><br /> Museum Sejarah Jakarta <br><br /> Museum Fatahillah yang juga dikenal sebagai Museum Sejarah Jakarta atau Museum Batavia adalah sebuah museum yang terletak di Jalan Taman Fatahillah No. 2, Jakarta Barat dengan luas lebih dari 1.300 meter persegi.<br /> Gedung ini dulu adalah Stadhuis atau Balai Kota, yang dibangun pada tahun 1707-1710 atas perintah Gubernur Jenderal Johan Van Hoorn. Bangunan balaikota itu serupa dengan Istana Dam di Amsterdam , terdiri atas bangunan utama dengan dua sayap di bagian timur dan barat serta bangunan sanding yang digunakan sebagai kantor, ruang pengadilan, dan ruang-ruang bawah tanah yang dipakai sebagai penjara.<br /> <br /> Pada tanggal 30 Maret 1974, gedung ini kemudian diresmikan sebagai Museum Fatahillah.<br /> Arsitektur bangunannya bergaya abad ke-17 bergaya Barok klasik dengan tiga lantai dengan cat kuning tanah, kusen pintu dan jendela dari kayu jati berwarna hijau tua. Bagian atap utama memiliki penunjuk arah mata angin.<br /> Museum ini memiliki luas lebih dari 13.000 meter persegi. Pekarangan dengan susunan konblok, dan sebuah kolam dihiasi beberapa pohon tua.<br /> We are still in the div element.<br /> </div><br /> </body><br /> </html>

Selamat Mencoba.....

Read More

APSI- Pertemuan3 Actvity Diagram

Activity diagrams are constructed from a limited number of shapes, connected with arrows. The most important shape types:

• rounded rectangles represent activities;
• diamonds represent decisions;
• bars represent the start (split) or end (join) of concurrent activities;
• a black circle represents the start (initial state) of the workflow;
• an encircled black circle represents the end (final state).

Arrows run from the start towards the end and represent the order in which activities happen.

to more this lesson please download this module..

Download

Read More

Enterprise Architec

langsung download aj...

Read More

APSI-Per I & II

baerikut materi yang telah di berikan oleh pak dose fikri pertemuann I dan II..
lagsung aj download disini...

 

Read More

Frame

Frame

Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi dalam beberapa bagian berdasarkan baris dan kolom, dan setiap bagian adalah 1 halaman web. Biasanya frame digunakan jika salah satu bagian dalam halaman web tetap dan halaman yang lainnya berubah (mis : Menu) sehingga dapat mempercepat proses, karena hanya satu bagian saja yang diload dari server. Untuk membuat frame, digunakan tag <FRAMESET> … </FRAMESET> dalam tag ini terdapat tag <FRAME> yang menentukan isi dari frame yang ditentukan dalam tag <FRAMESET>, struktur dari tag ini adalah :

<frameset border=n rows|cols = ”..%, ...%, dst”>
<frame src=”url” name=”name frame”>
<frame src=”url” name=”name frame”>
</frameset>

Pada tag <FRAMESET> terdapat atribut COLS atau ROWS, atribut COLS jika kita ingin membuat frame yang terbagi dalam kolom-kolom, sedangkan atribut ROWS digunakan jika kita ingin membuat frame yang terbagi dalam beberapa baris.
Dokumen yang berisi frame tidak boleh menggunakan elemen BODY, sebagai gantinya digantikan oleh elemen FRAMESET yang menyatakan bahwa isi dokumen tersebut mengandung suatu frame .
Struktur dasar dokumen HTML dengan frame sebagai berikut :

<html>
<head>
--- bagian head ---
</head>
<frameset>
--- bagian frame ---
</frameset>
</html>

FRAMESET mempunyai 2 buah atribut, yaitu ROWS (membagi jendela browser menjadi beberapa baris frame) dan
COLS (membagi jendela browser menjadi beberapa kolom frame). Misalnya jika kita ingin membuat 3 buah baris frame
di mana tiap frame tingginya adalah 100, 150, dan 200 pixel, maka kode HTML untuk membuat frame ini adalah : <FRAMESET ROWS = “100, 150, 200”>.

Cara lain untuk menyatakan ukuran baris dan kolom suatu frame adalah dengan menggunakan % dan nilai relative.
Contoh 1 : <FRAMESET ROWS =”25%, 25%, 50%”>
Contoh 2 : <FRAMESET ROWS =”*, 3*, *”>

Contoh :

<!—Dokumen HTML Frame -->
<html>
<head>
<title>Frame Baris dan Kolom </title>
</head>
<! – Frame dibagi menjadi tiga buah frame baris - - >
<frameset rows = “*,*,*”>
<! Frame baris pertama sebagai header -- >
<frame src = “a.htm”>
<! Frame baris kedua, dibagi menjadi dua buah frame kolom -- >
<frameset cols = “*,*”>
<frame scr = “b.htm”>
<frame scr = “c.htm”>
</frameset>
<! Frame ketiga sebagai Footer -- >
<frame src = “d.htm”>
</frameset>
</html>

Dalam frame terdapat target yang digunakan untuk menunjukkan target penampilan dari suatu link .

<html>
<head>
<title>Daftar</title>
<body>
<center>
<a href=”gunung.htm” target=”dinamis”><h2>Mountain</h2></a>
<a href=”sungai..htm” target=”dinamis”><h2>River</h2></a>
</center>
</body>
</html>

<html>
<head>
<title>Contoh Penggunaan Frame</title>
<frameset cols=”30%, *”>
<frame src=”daftar.htm”>
<frame src=”gunung.htm” name=”dinamis”>
</frameset>
</html>

Read More

Form

Berikut ini beberapa contoh kegunaan Form dalam web :

• Memperoleh feedback dari pengguna web
• Memperoleh informasi pembelian secara online
• Memperoleh data-data user baik nama, alamat, dan data lainya untuk mendaftar pada service yang disediakan

<form action=”url” method=”get | post”>
………
………
</form>


url : lokasi file yang akan melakukan proses terhadap input dari form
method : menyatakan bagaimana masukan-masukan berasal dari form dikirimkan kepada program CGI.
Jenis masukan dalam Form :

Text : nilai yang dimasukkan dapat berupa angka atau teks
<input type=”text” name=”var1” size=n maxlength=n>

Value pada size menunjukkan besar text box
Value pada maxlength menunjukkan jumlah karakter maksimum yang dapat
ditampung.

Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.
<input type=”radio” name=”var1”> pilihan 1
<input type=”radio” name=”var2”> pilihan 2
<input type=”radio” name=”var3”> pilihan 3

Checkbox : menyediakan beberapa pilihan, dapat lebih dari satu pilihan
<input type=”checkbox” name=”var1” checked>pilihan 1
<input type=”checkbox” name=”var2”>pilihan 2

List atau Dropdown box : menyediakan pilihan dalam bentuk list.
<select name=”var” size=n>
<option value=”… ”>pilihan 1
<option value=” … ”>pilihan 2
<option value= “ … “ selected>pilihan 3
</select>

Textarea : memasukkan data dalam bentuk teks berupa memo.
<textarea name=”var” cols=”n” rows=”n”> … </textarea>

Cols : besar kolom
Rows : banyaknya baris

Button : digunakan untuk melakukan pemrosesan form, sehingga membuat form lebih interaktif.
Pada saat button ditekan script yang ada dalam file lain akan dipanggil untuk melakukan proses selanjutnya.
Tombol button terdiri dari : submit dan reset.

<input type=”submit” value=” … “>
<input type=”reset” value=” … “>

Fieldset : membuat border dengan caption di sekeliling data.

<fieldset>
<legend> …….. </legend>
<form>
……….
</form>
</fieldset>

Contoh :

<! –Dokumen HTML --!>
<html>
<head>
<title>Form Sederhana</title>
</head>
<body>
<h2 align=center>Contoh Form Sederhana</h2>
<h4>Di bawah ini adalah suatu contoh form sederhana dengan mempergunakan control-kontrol :<br>
<ul>
<li>Kotak input teks
<li>Tombol submit
<li>Tombol reset
</ul>
</h4>
<hr>
<form method=”post” action=”coba.php”>
Masukkan nama anda disini : <input type=”text” name=”nama””><p>
Klik tombol OK jika nama anda sudah benar, atau klik tombol batal untuk membatalkannya.</p>
<input type=”submit” value=”ok”> <input type=”reset” value=”batal”> </form>
</body>
</html>

Hasil Contoh :

Contoh Form Sederhana

Di bawah ini adalah suatu contoh form sederhana dengan mempergunakan control-kontrol :

• Kotak input teks
  
• Tombol submit
  
• Tombol reset
  

---

Masukkan nama anda disini :
Klik tombol OK jika nama anda sudah benar, atau klik tombol batal untuk membatalkannya.

Read More

Tabel

Tabel

Tag <table> digunakan untuk membuat tabel dalam dokumen HTML, bagian pokok dari tabel adalah sel.
Elemen tabel terdiri dari :

Mendefinisikan tabel :
<table border="n" cellpadding="n" cellspacing="n">
……….
</table>

Attribute Tabel
Border : garis pada tabel ; n=0, 1, 2, .. dst
Cellpadding : spasi antar sel dan border
Cellspacing : jarak antar sel

WIDTH : Menentukan lebar tabel
HEIGHT : Menentukan tinggi tabel
BGCOLOR : Menentukan background tabel
BACKGROUND : Menentukan gambar yang digunakan untuk background tabel

Mendefinisikan judul tabel, dalam keadaan default posisi ditengah bagian paling atas tabel.
<caption align=”…”> … </caption>

Menspesifikasikan sebuah baris.
<tr align=”…”> … </tr>

Mendefinisikan sel header
<th> … </th>

Mendefinisikan sebuah sel data
<td> … </td>

Atribut table yang lain :
Align = {left | center | right } --> alignment horizontal untuk sel
Valign = {top | middle | bottom } --> alignment vertical dalam sel
Colspan = n --> menggabungkan beberapa kolom
Rowspan = n --> menggabungkan beberapa baris

Contoh :

<html>
<head>
<title>Penggunaan Tabel Dalam HTML</title>
</head>
<body>
<table border="1" width="70%" >
<caption>BIODATA SISWA</caption>
<tr>
<th width="15%">Nama</th>
<th width="16%">Alamat</th>
<th width="35%" colspan="3" align="center">Telepon</th>
</tr>
<tr>
<td width="15%">Endar Nirmala</td>
<td width="16%">&nbsp;Jl. Rasamala 3, Jakarta</td>
<td width="13%" align="center">021 - 5678910</td>
<td width="13%" align="center">0812285104</td>
<td width="13%" align="center">021 - 56788901</td>
</tr>
<tr>
<td width="15%">Wirastuti Wiraguna</td>
<td width="16%">&nbsp;Jl. Permata&nbsp; 5, Jakarta</td>
<td width="13%" align="center">021 - 76456982</td>
<td width="13%" align="center">08183457298</td>
<td width="13%" align="center">021 - 66543881</td>
</tr>
</table>
<p>&nbsp;</p>
<table border="1" width="70%" >
<caption>BIODATA SISWA</caption>
<tr>
<th width="15%">Nama</th>
<th width="16%">Alamat</th>
<th width="9%" align="center">Telepon</th>
</tr>
<tr>
<td width="15%" rowspan="3">Angga Kusuma</td>
<td width="16%" rowspan="3">&nbsp;Jl. Karbela 2, Jakarta</td>
<td width="13%" align="center">021 - 55667788</td>
</tr>
<tr>
<td width="13%" align="center">08131445689</td>
</tr>
<tr>
<td width="13%" align="center">021 - 56788901</td>
</tr>
<tr>
<td width="15%" rowspan="3">Wirastuti Wiraguna</td>
<td width="16%" rowspan="3">&nbsp;Jl. Permata&nbsp; 5, Jakarta</td>
<td width="13%" align="center">021 - 76456982</td>
</tr>
<tr>
<td width="13%" align="center">08183457298</td>
</tr>
<tr>
<td width="13%" align="center">021 - 66543881</td>
</tr>
</table>
</body>
</html>

Hasilnya :

BIODATA SISWA

Nama	Alamat	Telepon
Endar Nirmala	Jl. Rasamala 3, Jakarta	021 - 5678910	0812285104	021 - 56788901
Wirastuti Wiraguna	Jl. Permata  5, Jakarta	021 - 76456982	08183457298	021 - 66543881

BIODATA SISWA

Nama	Alamat	Telepon
Angga Kusuma	Jl. Karbela 2, Jakarta	021 - 55667788
		08131445689
		021 - 56788901
Wirastuti Wiraguna	Jl. Permata  5, Jakarta	021 - 76456982
		08183457298
		021 - 66543881

Read More

Menyisipkan Image

Halaman web yang menarik, biasanya menampilkan gambar-gambar untuk menarik pengunjung masuk kedalamnya, bayangkan saja jika situs tersebut hanya menampilkan tulisan saja, tentu amat membosankan. HTML menyediakan fasilitas untuk menampilkan gambar di halaman web kita menggunakan tag <IMG>. Tag <IMG> memiliki bermacam atribut seperti SRC yang digunakan untuk menentukan lokasi gambar yang akan ditampilkan, ALT sebagai teks pengganti apabila ada browser yang tidak mendukung grafik, BORDER berfungsi untuk memberikan suatu border di sekeliling gambar, Height dan weight berfungsi untuk menentukan tinggi atau lebar suatu gambar dalam halaman web kita (dalam ukuran pixel), HSPACE dan VSPACE berfungsi menentukan jarak spasi dengan objek disekitar gambar secara horiontal maupun vertikal.

Jenis format image yang sering digunakan adalah :
- GIF (Graphical Interchange Format)
- JPEG (Joint Photographic Expert Image)
- PNG (Portable Network Graphics)

Bentuk Umum :
<img src="...." border=... height=... width=... vspace=... hspace= ... align="...">

Contoh:

<HTML>
<HEAD>
<TITLE> Penggunaan Attribute dalam Image </TITLE>
</HEAD>
<BODY BGCOLOR="#f59630" TEXT=BLACK LINK=BLUE VLINK=PURPLE ALINK=RED >
<font size=3>
<pre>
Bagian ini mencoba menggunakan halaman web dengan background warna, dalam keadaan standard text berwarna hitam
dan jika halaman web ini menggunakan link, warna teks yang berfungsi sebagai link berwarna biru dan ketika link diklik berwarna merah serta
ketika selesai mengklik berwarna purple.
<a href="lat4.html">Memanggil latihan 4 </a></font>

Kalau yang ini mau menampilkan gambar
<!--
<img src="../bahan/perform4.gif" border=3 width="250" height="275" alt="myPicture" align="right">
-->
<img src="../bahan/perform4.gif" border=3 width="250" height="275" alt="myPicture" hspace="30" vspace="20">
</pre>

</BODY>
</HTML>

Read More

Definition List dan Bullet

List

Terkadang dalam website yang kita buat, kita ingin membuat sebuah daftar, misalnya saja kita membuat daftar menu sbb :
• Home
• Gallery
• Link

HTML menyediakan tag untuk membuat list seperti diatas. Jenis list dalam HTML dibagi menjadi :
• Ordered List
• Unordered List
• Directory List
• Menu List
• Definition List

List yang paling sering dipakai adalah Ordered List dan Unordered List, untuk Directory List, Menu List dan jarang sekali digunakan.

Ordered List
Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list diawali dengan tag <OL> dan setiap item dalam list selalu diawali dengan <LI>. List yang memakai tag <OL> ini tidak harus 1,2,3,dst tetapi bisa saja a,b,c,dst, i,ii,iii,dst, tergantung pada atribut TYPE yang dituliskan dalam tag <OL>.
Tipe penomoran yang dimiliki oleh tag <OL> yaitu :
• 1 -> 1,2,3,…
• A -> A,B,C,…
• A -> a,b,c,…
• I -> I,II,III,…
• I -> i,ii,iii,…

Unordered List
Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai setiap item dalam list. Unordered list diawali dengan tag <UL>. Sama seperti dalam Ordered list, pada Unordered list setiap item dalam list selalu diawali dengan <LI> dan juga memiliki beberapa type, yaitu :
• TYPE = circle -> Tanda lingkaran
• TYPE = disk -> Tanda cakram
• TYPE = square -> Tanda kotak

Contoh :
<HTML>
<HEAD>
<TITLE>Latihan menggunakan List</TITLE>
<HEAD>
<BODY>
Dibawah ini menggunakan Ordered List
<OL TYPE=a>
<LI>Ms Windows
<LI>Linux
<LI>Xenix
</OL>

Dibawah ini menggunakan Unordered List
<UL TYPE=square>
<LI>MySql
<LI>SQL
<LI>ORACLE
</UL>

Dibawah ini menggunakan Ordered List mulai 10
<OL TYPE=1 START=10>
<LI>PHP Triad
<LI>XAMPP
<LI>WAMPP
</OL>
</BODY>
</HTML>

Menu List (Daftar Menu)
Merupakan daftar item yang pendek dan tidak disertai dengan nomor ataupun penanda item. Menu list menggunakan
tag awal <MENU> dan tag akhir </MENU>, dengan setiap item di dalamnya menggunakan <LI>
<menu>
<li> ...
<li> ...
<li> ...
dst
</menu>

<dir>
<li> ...
<li> ...
<li> ...
dst
</dir>


Definition List <DL>
<dl>
<dt> ... </dt>
<dd> ..................... </dd>
<dt> ... </dt>
<dd> ...................... </dd>
</dl>

Read More