HyperTextMarkupLanguage sesi 2 HTML

Toni Tegar Sahidi tonitegarsahidi@gmail.com

STT Stikma Internasional, Malang

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