Dokumen tersebut membahas pengenalan dasar HTML meliputi hyperlink, tabel, daftar terurut dan tidak terurut, serta paragraf. Hyperlink digunakan untuk menghubungkan teks atau gambar ke halaman lain. Tabel dibangun menggunakan tag table, tr, dan td untuk masing-masing baris dan sel. Daftar dapat diatur secara terurut menggunakan ol atau tidak terurut menggunakan ul. Paragraf dipisahkan menggunakan tag

1. HyperTextMarkupLanguage
sesi 2 HTML

2. Toni Tegar Sahidi
tonitegarsahidi@gmail.com
STT Stikma Internasional, Malang

3. HTML (2) OVERVIEW
#1 Link me Link
#2 Tabel
#3 List
#4 Paragraf

4. #1 HyperLink
1/6

5. Hyperlink : sebuah
teks/gambar yang menjadi
navigasi ke sebuah halaman
web lainnya.

6. Hyperlink :
sesuatu yang kalau di-klik
membawa kita ke halaman lain

7. Syntaks :
<a href="URL">AnchorText</a>

8. e.g.

9. <a href=“http://www.sepatuterakhir.com” >
Novel Inspiratif </a>

11. <a href=“http://www.sepatuterakhir.com” >
Novel Inspiratif </a>

12. URL = http://www.sepatuterakhir.com

13. Anchor Text = Novel Inspiratif

14. <a href=“tokokucing.php">
<img src=“kucing.jpg" alt=“toko
kucing" width=“100">
</a>

16. <a href="tokokucing.php"
title="kucing keren">
<img src=“kucing.jpg" alt=“toko
kucing" width=“100">
</a>

17. Apa bedanya dengan sebelumnya?

18. #2 TABEL TABLE
3/5

19. Tabel didefinisikan dengan
tag <table></table>

20. <table>
.......
</table>

21. setiap baris (row)
didefinisikan
dengan tag <tr>

22. <table>
<tr>
.....
</tr>
</table>

23. setiap cell di setiap baris(row)
dijelaskan dengan tag
<td></td>

24. <table>
<tr>
<td>baris1 cell 1</td>
<td>baris1 cell 2</td>
</tr>
</table>

26. kok border tabelnya
gak ada?

27. <table border=“1”>
<tr>
<td>baris1 cell 1</td>
<td>baris1 cell 2</td>
</tr>
</table>

29. jumlah kolom disetiap baris
ditunjukkan dengan jumlah
tag <td> yang ada

30. <table border=1>
<tr>
<td>kolom1</td>
<td>kolom2</td>
<td>kolom3</td>
</tr>
</table>

32. <table border=1>
<tr>
<td>kolom1</td>
<td>kolom2</td>
<td>kolom3</td>
</tr>
</table>

33. Tambah baris?
sisipkan lagi
<tr> dan <td> baru

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

36. Tabel model „biasa‟ diatas tak
bisa mendeskripsikan mana
tabel header, mana konten

37. ganti
<td></td>
dengan
<th></th>

38. <th></th>

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

41. sebuah tabel pada dasarnya
adalah kontainer...
Isi tabel tak hanya teks, bisa
diisi dengan gambar, atau
bahkan tabel lain

42. <table border=1>
<tr>
<td>
<table>.....</table>
</td>
</tr>
</table>

43. SELF LEARNING
ingin menggabung kolom/baris?
Pakai parameter rowspan &
colspan

44. SELF LEARNING
Parameter cellpadding &
cellspacing.
Contoh :
<table border=2 cellpadding=3 cellspacing=5>...</table>

45. SELF LEARNING
sebuah cell bisa diberi warna
background..

46. SELF LEARNING
Dahulu digunakan untuk
layouting halaman web,
Halaman web sekarang pakai
<div> dan css

47. #3 LIST
(bullet&numbering)
4/5

48. Aka. Bullet and Numbering

49. Ordered List = Numbering
UNOrdered List = Bullet

50. Ordered List = Numbering
UNOrdered List = Bullet

51. <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

53. Ordered List = Numbering
UNOrdered List = Bullet

54. <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

56. isi list tak harus teks, biga
gambar, dll. Termasuk juga list
lain (nested list).

57. <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

59. #4 PARAGRAF
4/5

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

62. cara lain bisa memakai
<div></div>

63. pada dasarnya <div></div>
adalah kontainer umum,
dan BUKAN untuk paragraf.

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

66. Further references :
http://www.w3schools.com

67. next session
 CSS