4 pemrograman internet html (2)
DESCRIPTION
Materi Kuliah Pemrograman Internet, Belajar Bahasa HTMLTRANSCRIPT
HyperTextMarkupLanguage sesi 2 HTML
HTML (2) OVERVIEW #1 Link me Link #2 Tabel #3 List #4 Paragraf
#1 HyperLink
1/6
Hyperlink : sebuah teks/gambar yang menjadi navigasi ke sebuah halaman web lainnya.
Hyperlink : sesuatu yang kalau di-klik membawa kita ke halaman lain
Syntaks : <a href="URL">AnchorText</a>
e.g.
<a href=“http://www.sepatuterakhir.com” > Novel Inspiratif </a>
<a href=“http://www.sepatuterakhir.com” > Novel Inspiratif </a>
URL = http://www.sepatuterakhir.com
Anchor Text = Novel Inspiratif
<a href=“tokokucing.php">
<img src=“kucing.jpg" alt=“toko
kucing" width=“100">
</a>
<a href="tokokucing.php"
title="kucing keren">
<img src=“kucing.jpg" alt=“toko
kucing" width=“100">
</a>
Apa bedanya dengan sebelumnya?
#2 TABEL TABLE
3/5
Tabel didefinisikan dengan tag <table></table>
<table> ....... </table>
setiap baris (row) didefinisikan
dengan tag <tr>
<table> <tr> ..... </tr> </table>
setiap cell di setiap baris(row) dijelaskan dengan tag
<td></td>
<table> <tr> <td>baris1 cell 1</td> <td>baris1 cell 2</td> </tr> </table>
kok border tabelnya gak ada?
<table border=“1”> <tr> <td>baris1 cell 1</td> <td>baris1 cell 2</td> </tr> </table>
jumlah kolom disetiap baris ditunjukkan dengan jumlah
tag <td> yang ada
<table border=1> <tr> <td>kolom1</td> <td>kolom2</td> <td>kolom3</td> </tr> </table>
<table border=1> <tr> <td>kolom1</td> <td>kolom2</td> <td>kolom3</td> </tr> </table>
Tambah baris? sisipkan lagi
<tr> dan <td> baru
<table border=1> <tr> <td>NIM</td> <td>NAMA</td> <td>KOTA</td> </tr> <tr> <td>1273621</td> <td>Sofyan Ahmad</td> <td>Jakarta</td> </tr> <tr> <td>1290123</td> <td>Umar Kaisani</td> <td>Malang</td> </tr> </table>
Tabel model „biasa‟ diatas tak bisa mendeskripsikan mana tabel header, mana konten
ganti <td></td> dengan
<th></th>
<th></th>
<table border=1> <tr> <th>NIM</th> <th>NAMA</th> <th>KOTA</th> </tr> <tr> <td>1273621</td> <td>Sofyan Ahmad</td> <td>Jakarta</td> </tr> <tr> <td>1290123</td> <td>Umar Kaisani</td> <td>Malang</td> </tr> </table>
sebuah tabel pada dasarnya adalah kontainer...
Isi tabel tak hanya teks, bisa diisi dengan gambar, atau
bahkan tabel lain
<table border=1> <tr> <td> <table>.....</table> </td> </tr> </table>
SELF LEARNING ingin menggabung kolom/baris?
Pakai parameter rowspan & colspan
SELF LEARNING Parameter cellpadding &
cellspacing. Contoh :
<table border=2 cellpadding=3 cellspacing=5>...</table>
SELF LEARNING sebuah cell bisa diberi warna
background..
SELF LEARNING Dahulu digunakan untuk layouting halaman web,
Halaman web sekarang pakai <div> dan css
#3 LIST (bullet&numbering)
4/5
Aka. Bullet and Numbering
Ordered List = Numbering UNOrdered List = Bullet
Ordered List = Numbering UNOrdered List = Bullet
<ol> <li>Coffee</li> <li>Milk</li> </ol>
Ordered List = Numbering UNOrdered List = Bullet
<ul> <li>Coffee</li> <li>Milk</li> </ul>
isi list tak harus teks, biga gambar, dll. Termasuk juga list
lain (nested list).
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
#4 PARAGRAF
4/5
<p>Diantara tag paragraf, dituliskan isi paragrafnya.</p> <p>Jika ingin ganti paragraf, tinggal buat tag paragraf baru, lalu sisipkan lagi saja isinya</p> <p>Ohya, tidak perlu dikasih Enter untuk ganti paragraf, karena tag paragraf sudah memberikan setiapnya masing-masing.</p>
cara lain bisa memakai <div></div>
pada dasarnya <div></div> adalah kontainer umum,
dan BUKAN untuk paragraf.
<div>Diantara tag div, dituliskan isi paragrafnya.<br />Jika ingin ganti paragraf/baris, tinggal sisipkan tag ganti baris / br, lalu sisipkan lagi saja isinya. <br />Ohya, berbeda dengan tag p, untuk div PERLU dikasih tag ganti baris untuk ganti paragraf.</div>
Further references : http://www.w3schools.com
next session
CSS