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
<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
