- 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
<a href="file target">Text</a>
Contoh :
<a href="http://www.kompas.com">Baca Kompas</a>
Hasilnya akan terlihat seperti ini : Baca Kompas
Posted at 12:08 pm by
siswa
Permalink
<img dynsrc="movie.mpg" loop=-1 width="lebar" height="tinggi">
angka -1 untuk membuat video berputar terus tidak berhenti .... :)
Posted at 12:07 pm by
siswa
Permalink
<img src="file gambar" width="lebar" height="tinggi">
Perhatikan ! 2 buah gambar tidak dapat di sejajarkan langsung bila yang satu rata kiri dan satunya lagi rata kanan
Contoh
Sebaiknya pake cara tabel
Posted at 12:06 pm by
siswa
Permalink
<center>
<p style="text-align:left atau center atau right atau justify">
Posted at 12:05 pm by
siswa
Permalink
Contoh perintah format teks dalam HTML :
- <br> atau break roos atau ganti baris
- <p> ganti paragraf
- <b>
- <i>
- <u>
- <font size="n" color="warna" face="jenis huruf"> keterangan n = 1 s.d. 7, 1 = kecil dan 7 = paling besar
Nb.
Untuk keamanan sebaiknya setiap
value diberi tanda petik :)
Posted at 12:04 pm by
siswa
Permalink
<body bgcolor="lightgreen" text="#00ffff">
tag body bgcolor dan text disebut attribut sedangkan isi di antara tanda petik lightgreen dan #00ffff adalah value
Perhatikan : Tanda petik pada value boleh tidak dipakai bila value terdiri dari huruf dan angka, tetapi bila value terdiri dari karakteristik unik misal @,%, _, * maka harus menggunakan tanda petik agar dapat dibaca ! walau sebenernya keuntungan tidak pake tanda petik, ukuran file menjadi lebih kecil :)
Posted at 12:02 pm by
siswa
Permalink
Perhatikan : Ingat ! Perintah Enter dan Spasi tidak dibaca oleh HTML.
Tag -----> <.......> seperti <html>, <head>, <body>
Pertanyaan : yang terlintas saat mengetik ini adalah bagaimana menterjemahkan tulisan di notepad <html> sehingga ketika dibuka di browser terlihat sebagai <html> ? Saat mengetik ini aku menggunakan penyulih Ms. Front Page :)
HTML tidak membedakan huruf besar atau kecil, tapi kalo di linux berbeda :). Tag HTML umumnya berpasangan.
Misal : .... .... <b>tebal</b> ..... .......
<b> adalah tag pembuka dan </b> adalah tag penutup.
Tag-tag tidak boleh saling memotong !
Misal : <p>.....<a>.....<b>.......</b>.....</a>.....</p> = benar
dan = <p>....<a>.....<b>.....</a>....</p>.....</b>
= salah
Contoh : ketik kode-kode HTML berikut ini di notepad
<html>
<head>
<title>My First HTML</title>
</head>
<body>Selamat Datang</body>
</html>
Kemudian save as index.htm {usahakan ditulis dengan huruf kecil dan tidak ada spasi}
Posted at 12:01 pm by
siswa
Permalink
