STYLE = kumpulan format
Contoh pendeklarasian (warna merah) dan penerapannya :
<html>
<head>
<title>style</title>
<style>
.coba1 {
color:red;
font-family:"arial narrow";
font-size:"14pt";
cursor:hand;
background-color:"yellow";
}
</style>
</head>
<body>
<center>Formulir Buku Tamu</center>
Silahkan isi :
<form method= action=>
Nama <input type=text name=Nama id=Nama>
<br>
Email <input type=text name=Email id=email>
<br>
Homepage <input type=text name=Homepage id=Homepage>
<br>
Jenis kelamin : <input type=radio name=sex id=sex>Pria <input type=radio
name=sex id=sex>Wanita
<p class="coba1">
Hobby
<br>
<input type=checkbox name=Musik id=Musik>Musik <input type=checkbox name=Sport
id=Sport>Sport<br>
<input type=checkbox name=Film id=Film>Film <input type=checkbox name=Lainnya
id=Lainnya>Lainnya
</p>
<p>
Pendidikan
<select nama=Pendidikan>
<option value=SMA>SMA</option>
<option value=S-1>S-1</option>
<option value=S-2>S-2</option>
<option value=S-3>S-3</option>
<option value=Lainnya>Lainnya</option>
</select>
<p class="coba1">
Beri komentar untuk situs ini :
<br>
<textarea name=komentar cols=50 rows=10></textarea>
<br>
<input type=submit name=Kirim id=Kirim value=Kirim>
<input type=reset name=Batal id=Batal value=Batal>
</p>
</form>
</body>
</html>
Posted at 08:26 am by
siswa
Permalink
<form method=post/get action=file_target>
-
-
-
-
</form>
post : untuk mengirim data rincian dan rahasia
get : untuk memperoleh hasil olahan data terbuka
<input type=text name=Nama id=Nama>
name=Nama dan id=Nama adalah data yang dibaca komputer
sedangkan >Text< adalah data yang dibaca pengunjung
Macam type :
type=text untuk memasukkan text
type=password untuk memasukkan password
type=radio untuk memasukkan pilihan
type=checkbox untuk memasukkan pilihan lebih dari satu
type=tombol untuk memasukkan OK
type=submit untuk memasukkan memasukkan isian
type=reset untuk memasukkan membatalkan isian
type=file untuk memasukkan upload file
Data-data pilihan :
<select name=Nama id=Nama>
<option value=Nama>Text</option>
-
-
-
-
-
-
</select>
Data masukkan komentar:
<textarea name="komentar" cols="50" rows="10"></textarea>
Contoh pemakaian :
<html>
<head>
<title>from</title>
</head>
<body>
<center>Formulir Buku Tamu</center>
Silahkan isi :
<form method= action=>
Nama <input type=text name=Nama id=Nama>
<br>
Email <input type=text name=Email id=email>
<br>
Homepage <input type=text name=Homepage id=Homepage>
<br>
Jenis kelamin : <input type=radio name=sex id=sex>Pria <input type=radio
name=sex id=sex>Wanita
<p>
Hobby
<br>
<input type=checkbox name=Musik id=Musik>Musik <input type=checkbox name=Sport
id=Sport>Sport<br>
<input type=checkbox name=Film id=Film>Film <input type=checkbox name=Lainnya
id=Lainnya>Lainnya
<p>
Pendidikan
<select nama=Pendidikan>
<option value=SMA>SMA</option>
<option value=S-1>S-1</option>
<option value=S-2>S-2</option>
<option value=S-3>S-3</option>
<option value=Lainnya>Lainnya</option>
</select>
<p>
Beri komentar untuk situs ini :
<br>
<textarea name=komentar cols=50 rows=10></textarea>
<br>
<input type=submit name=Kirim id=Kirim value=Kirim>
<input type=reset name=Batal id=Batal value=Batal>
</form>
</body>
</html>
Posted at 08:19 am by
siswa
Permalink
Iframe = membuat kotak di dalam broser yang menampilkan halaman lain
Rumusnya :
<iframe id=kotak name=kotak width=lebarkotak height=tinggikotak scr="halaman
yang ingin ditampilkan.htm" frameborder=1></iframe>
Attribut name=..... digunakan sebagai antisipasi bila broser tidak bisa membaca attribut id=...
Contoh penggunaan iframe :
<html>
<head>
<title>iframe</title>
</head>
<body>
Selamat Datang ...
<p>
|<a href="http://detik.com" target=kotak>Detik</a>
|<a href="http://liputan6.com" target=kotak>Liputan6</a> |
<p>
<iframe id=kotak name=kotak width=800 height=300 src="http://google.com"
frameborder=1></iframe>
</body>
</html>
Posted at 02:26 am by
siswa
Permalink
Attribut pada tag frameset : frameborder=1 (atau) 0 digunakan untuk menampilkan border (1) atau tidak (0).
Attribut pada frame src : noresize dan scrolling=yes/no/auto. Noresize agar ukuran frame tidak bisa diubah-ubah, sedangkan scrolling=yes/no/auto untuk mengatur scroll.
Contoh :
<html>
<head>
<title>default</title>
</head>
<frameset rows="25%,*" frameborder=1>*Peletakan frameborder boleh di sini saja
<frame src="judul.htm" name=atas noresize scrolling=yes>*Ini juga :)
<frameset cols="25%,*">
<frame src="menu.htm" name=kiri>
<frame src="utama.htm" name=kanan>
</frameset>
</frameset>
</html>
Bila broser pengunjung tidak mendukung frame, maka sebagai persiapan perlu ditambahi kode setelah </frameset>, yaitu :
<frameset>
-
-
-
-
</frameset>
<!--Awal kode tambahan--!>
<noframe>
<body>
Sorry, broser anda tidak mendukung "frame" :)
</body>
</noframe>
<!--Akhir kode tambahan--!>
Posted at 01:54 am by
siswa
Permalink
Kursus hari ini Jum'at 13 Mei 2005 rodo nyebelin, mergo ono program DAP yang bekerja secara invisible di kompi latihku membuat makan memori banyak, sehingga aku ga bisa buka IE, kalo pake mozilla ada yang ga sejalan ... :(. Akhirnya buang˛ waktu buat mbunuh DAP semprul tersebut ....
Posted at 01:51 am by
siswa
Permalink
Frame : untuk membagi jendela menjadi beberapa
Perhatikan potongan gambar frame di bawah ini :
Saat menge-klik menu.htm seperti Home, Profile, History, atau Contact maka isi dari link
tersebut akan tersaji di bagian utama.htm. Maka yang harus disiapkan adalah
- home.htm
- profile.htm
- history.htm
- contact.htm
- judul.htm
- utama.htm
- menu.htm, yang terlulis link˛ menuju
- home.htm
- profile.htm
- history.htm
- contact.htm
- terahkir adalah file default.htm yang berisi kode-kode frame seperti dibawah ini
<
html>
<
head>
<
title>default</
title>
</
head>
<!--Kode frame dimulai--!>
<
frameset rows=
"25%,*">
<
frame src=
"judul.htm" name=
atas>
<
frameset cols=
"25%,*">
<
frame src=
"menu.htm" name=
kiri>
<
frame src=
"utama.htm" name=
kanan>
</
frameset>
</
frameset>
<!--Kode frame diakhiri--!>
</
html>
Posted at 09:26 am by
siswa
Permalink
- Sketsakan tabel yang akan dibuat dalam kertas dengan pensil
- Bacalah data-data tabel secara horisontal, jangan vertikal ini menyesatkan
!
- Terjemahkan pembacaan tadi ke bahasa html :)
Contoh :
| No. | Nama | Harga | Jumlah | Netto |
|---|
| 1 | Buku | 3500 | 10 | ? |
| 2 | Pensil | 750 | 5 | ? |
| Total | <B> |
Maka cara menulis html-nya adalah
<table align=center border=1 cellspacing=2 bgcolor=yellow>
<!--Di atas sebagai attribut table--!>
<tr><th>No.</th><th>Nama</th>
<th>Harga</th><th>Jumlah</th><th>Netto</th><tr>
<!--Sebagai baris pertama/judul--!>
<tr><td>1</td> <td>Buku</td> <td>3500</td>
<td>10</td> <td
align=center>?</td></tr>
<!--Sebagai baris kedua--!>
<tr><td>2</td> <td>Pensil</td><td>750</td>
<td>5</td> <td
align=center>?</td></tr>
<!--Sebagai baris ketiga--!>
<tr><td colspan=4 bgcolor=lightgreen>Total</td> <td
align=center><B></td></tr>
<!--Sebagai baris ke-4 beberapa kolom digabung dengan perintah <td colspan=4>--!>
</table>
Contoh lagi penggunaan colspan dan rowspan:
| Hari | Sesi | Ruang I |
|---|
| Dosen | Materi |
|---|
| Senin | 7 | - | - |
|---|
| 9 | - | - |
| 11 | - | - |
| Selasa | 7 | - | - |
|---|
| 9 | - | - |
Html-nya :
<table align=center border=1 cellspacing=3 bgcolor=yellow>
<tr><th rowspan=2>Hari</th><th rowspan=2>Sesi</th><th
colspan=2>Ruang
I</th></tr>
<tr><th>Dosen</th><th>Materi</th></tr>
<tr><th
rowspan=3>Senin</th><td>7</td><td>-</td><td>-</td>&l
t;/tr>
<tr><td>9</td><td>-</td><td>-</td></tr>
<tr><td>11</td><td>-</td><td>-</td></tr>
<tr><th
rowspan=2>Selasa</th><td>7</td><td>-</td><td>-</td>&
lt;/tr>
<tr><td>9</td><td>-</td><td>-</td></tr>
</table>
Perhatikan ! terkadang kita perlu menulis attribut border=1 untuk mengetahui kondisi garis-garis
pada table, karena keinginan kita kadang beda dengan default dari broser tersebut :)
Posted at 08:09 am by
siswa
Permalink
Rumusnya :
<table width="n%" align=perataan border=n cellspacing=n bgcolor=warna>
<tr><th> table heading</th></tr>
<tr><td> table data1</td> <td> table data2</td> <td> table
data...ke-n</td></tr>
<tr> baris ke-2 </tr>
<tr> baris ke-n </tr>
</table>
Keterangan : <th> = table heading bisa diletakkan di baris manapun tidak hanya baris
pertama.
Attribut yang bisa menyertai tiap-tiap tr, th, dan td adalah
- bg color
- align
- valign=top|botton|middle
- width
- heigth
- colspain=menggabungkan kolom
- rowspain=menggabungkan baris
Tambahan : menjawab pertanyaan sebelum ini tentang cara menulis kode html agar tidak diproses
oleh browser, misal ingin menulis <b> agar di broser ditampilkan apa adanya (tidak
dieksekusi) maka cara menulisnya adalah <b> terdiri dari tanda lebih kecil di
terjemahkan < + b + tanda lebih besar > = membacanya (and litte than ; b and greater
then)
Posted at 08:07 am by
siswa
Permalink
<a
href="mailto:bahtiar@gmail.com">Kirim e-Mail</a>
Hasilnya akan jadi seperti ini : Kirim e-Mail
Perhatikan ! SPASI dalam HTML maksimal cuman 1 x, kalo pingin tambah panjang kasih kode   sebanyak-banyaknya .... :)
Contoh :
aku             ngantuk
Hasilnya akan berupa : aku ngantuk, perhatikan antara kata aku dan ngantuk terdapat spasi sebanyak 6 x :)
Cara mengingatnya :
dan nambah spasi =
 
Posted at 12:12 pm by
siswa
Permalink
