Download - 4 pemrograman internet html (2)
![Page 1: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/1.jpg)
HyperTextMarkupLanguage sesi 2 HTML
![Page 3: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/3.jpg)
HTML (2) OVERVIEW #1 Link me Link #2 Tabel #3 List #4 Paragraf
![Page 4: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/4.jpg)
#1 HyperLink
1/6
![Page 5: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/5.jpg)
Hyperlink : sebuah teks/gambar yang menjadi navigasi ke sebuah halaman web lainnya.
![Page 6: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/6.jpg)
Hyperlink : sesuatu yang kalau di-klik membawa kita ke halaman lain
![Page 7: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/7.jpg)
Syntaks : <a href="URL">AnchorText</a>
![Page 8: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/8.jpg)
e.g.
![Page 9: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/9.jpg)
<a href=“http://www.sepatuterakhir.com” > Novel Inspiratif </a>
![Page 10: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/10.jpg)
![Page 11: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/11.jpg)
<a href=“http://www.sepatuterakhir.com” > Novel Inspiratif </a>
![Page 12: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/12.jpg)
URL = http://www.sepatuterakhir.com
![Page 13: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/13.jpg)
Anchor Text = Novel Inspiratif
![Page 14: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/14.jpg)
<a href=“tokokucing.php">
<img src=“kucing.jpg" alt=“toko
kucing" width=“100">
</a>
![Page 15: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/15.jpg)
![Page 16: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/16.jpg)
<a href="tokokucing.php"
title="kucing keren">
<img src=“kucing.jpg" alt=“toko
kucing" width=“100">
</a>
![Page 17: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/17.jpg)
Apa bedanya dengan sebelumnya?
![Page 18: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/18.jpg)
#2 TABEL TABLE
3/5
![Page 19: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/19.jpg)
Tabel didefinisikan dengan tag <table></table>
![Page 20: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/20.jpg)
<table> ....... </table>
![Page 21: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/21.jpg)
setiap baris (row) didefinisikan
dengan tag <tr>
![Page 22: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/22.jpg)
<table> <tr> ..... </tr> </table>
![Page 23: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/23.jpg)
setiap cell di setiap baris(row) dijelaskan dengan tag
<td></td>
![Page 24: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/24.jpg)
<table> <tr> <td>baris1 cell 1</td> <td>baris1 cell 2</td> </tr> </table>
![Page 25: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/25.jpg)
![Page 26: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/26.jpg)
kok border tabelnya gak ada?
![Page 27: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/27.jpg)
<table border=“1”> <tr> <td>baris1 cell 1</td> <td>baris1 cell 2</td> </tr> </table>
![Page 28: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/28.jpg)
![Page 29: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/29.jpg)
jumlah kolom disetiap baris ditunjukkan dengan jumlah
tag <td> yang ada
![Page 30: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/30.jpg)
<table border=1> <tr> <td>kolom1</td> <td>kolom2</td> <td>kolom3</td> </tr> </table>
![Page 31: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/31.jpg)
![Page 32: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/32.jpg)
<table border=1> <tr> <td>kolom1</td> <td>kolom2</td> <td>kolom3</td> </tr> </table>
![Page 33: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/33.jpg)
Tambah baris? sisipkan lagi
<tr> dan <td> baru
![Page 34: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/34.jpg)
<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>
![Page 35: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/35.jpg)
![Page 36: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/36.jpg)
Tabel model „biasa‟ diatas tak bisa mendeskripsikan mana tabel header, mana konten
![Page 37: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/37.jpg)
ganti <td></td> dengan
<th></th>
![Page 38: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/38.jpg)
<th></th>
![Page 39: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/39.jpg)
<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>
![Page 40: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/40.jpg)
![Page 41: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/41.jpg)
sebuah tabel pada dasarnya adalah kontainer...
Isi tabel tak hanya teks, bisa diisi dengan gambar, atau
bahkan tabel lain
![Page 42: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/42.jpg)
<table border=1> <tr> <td> <table>.....</table> </td> </tr> </table>
![Page 43: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/43.jpg)
SELF LEARNING ingin menggabung kolom/baris?
Pakai parameter rowspan & colspan
![Page 44: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/44.jpg)
SELF LEARNING Parameter cellpadding &
cellspacing. Contoh :
<table border=2 cellpadding=3 cellspacing=5>...</table>
![Page 45: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/45.jpg)
SELF LEARNING sebuah cell bisa diberi warna
background..
![Page 46: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/46.jpg)
SELF LEARNING Dahulu digunakan untuk layouting halaman web,
Halaman web sekarang pakai <div> dan css
![Page 47: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/47.jpg)
#3 LIST (bullet&numbering)
4/5
![Page 48: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/48.jpg)
Aka. Bullet and Numbering
![Page 49: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/49.jpg)
Ordered List = Numbering UNOrdered List = Bullet
![Page 50: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/50.jpg)
Ordered List = Numbering UNOrdered List = Bullet
![Page 51: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/51.jpg)
<ol> <li>Coffee</li> <li>Milk</li> </ol>
![Page 52: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/52.jpg)
![Page 53: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/53.jpg)
Ordered List = Numbering UNOrdered List = Bullet
![Page 54: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/54.jpg)
<ul> <li>Coffee</li> <li>Milk</li> </ul>
![Page 55: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/55.jpg)
![Page 56: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/56.jpg)
isi list tak harus teks, biga gambar, dll. Termasuk juga list
lain (nested list).
![Page 57: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/57.jpg)
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
![Page 58: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/58.jpg)
![Page 59: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/59.jpg)
#4 PARAGRAF
4/5
![Page 60: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/60.jpg)
<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>
![Page 61: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/61.jpg)
![Page 62: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/62.jpg)
cara lain bisa memakai <div></div>
![Page 63: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/63.jpg)
pada dasarnya <div></div> adalah kontainer umum,
dan BUKAN untuk paragraf.
![Page 64: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/64.jpg)
<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>
![Page 65: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/65.jpg)
![Page 66: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/66.jpg)
Further references : http://www.w3schools.com
![Page 67: 4 pemrograman internet html (2)](https://reader033.vdocuments.site/reader033/viewer/2022052216/549a4214ac79590e2e8b5ab5/html5/thumbnails/67.jpg)
next session
CSS