˝HTMLDasar -...
Transcript of ˝HTMLDasar -...
![Page 1: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/1.jpg)
“HTML Dasar”Pertemuan - 2
SemesterSemester GanjilGanjil 2009/20102009/2010
![Page 2: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/2.jpg)
![Page 3: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/3.jpg)
HTML? Sebuah bahasa markup yang digunakan untuk membuat
sebuah halaman web dan menampilkan berbagai informasidi dalam sebuah browser.• HTML berupa kode‐kode tag yang menginstruksikan
browser untuk menghasilkan tampilan sesuai dengan yangdiinginkan.
• HTML saat ini merupakan standar Internet yangdidefinisikan dan dikendalikan penggunaannya oleh WorldWide Web Consortium (W3C).
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
HTML? Sebuah bahasa markup yang digunakan untuk membuat
sebuah halaman web dan menampilkan berbagai informasidi dalam sebuah browser.• HTML berupa kode‐kode tag yang menginstruksikan
browser untuk menghasilkan tampilan sesuai dengan yangdiinginkan.
• HTML saat ini merupakan standar Internet yangdidefinisikan dan dikendalikan penggunaannya oleh WorldWide Web Consortium (W3C).
![Page 4: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/4.jpg)
• HTML 2.0(RFC1866) disetujui sebagai standard pada 22 September1995
• HTML 3.214 Januari 1996
• HTML 4.018 Desember 1997
• ISO/IEC 15445:2000 “ISO HTML”berdasar padaHTML 4.01 Strict – 15 Mei 2000
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
• HTML 2.0(RFC1866) disetujui sebagai standard pada 22 September1995
• HTML 3.214 Januari 1996
• HTML 4.018 Desember 1997
• ISO/IEC 15445:2000 “ISO HTML”berdasar padaHTML 4.01 Strict – 15 Mei 2000
![Page 5: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/5.jpg)
• XHTML 1.0 → gabungan HTML & XML24 Januari 2000
• XHTML 1.116 February 2007
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
• XHTML 1.0 → gabungan HTML & XML24 Januari 2000
• XHTML 1.116 February 2007
![Page 6: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/6.jpg)
• Ekstensi file berupa .htm atau .html
• Non case sensitive.
• Terdiri atas tag‐tag pembuka dan penutup (walaupun adabeberapa tag yang tidak memiliki penutup).
• Tag‐tag saling berpasangan & bersarang.
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
• Ekstensi file berupa .htm atau .html
• Non case sensitive.
• Terdiri atas tag‐tag pembuka dan penutup (walaupun adabeberapa tag yang tidak memiliki penutup).
• Tag‐tag saling berpasangan & bersarang.
![Page 7: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/7.jpg)
• Document Information<html></html>
• Document Header<head></head>
• Document Body<body></body>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
• Document Information<html></html>
• Document Header<head></head>
• Document Body<body></body>
![Page 8: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/8.jpg)
contoh.html
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 9: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/9.jpg)
• Page TitleJudul dari halaman webcth : <title></title>
• ScriptingTempat client‐side script yang disertakan (javascript,vbscript, jscript)cth : <script></script>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
• Page TitleJudul dari halaman webcth : <title></title>
• ScriptingTempat client‐side script yang disertakan (javascript,vbscript, jscript)cth : <script></script>
![Page 10: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/10.jpg)
• StyleDipergunakan untuk mengatur bagaimana sebuah halamanweb dengan berbagai komponennya hendak ditampilkan kedalam browsercth : <style></style>
• MetaMeta tags, descriptions & keywords untuk mempermudahsearch engine dalam melakukan indexing.cth : <meta></meta>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
• StyleDipergunakan untuk mengatur bagaimana sebuah halamanweb dengan berbagai komponennya hendak ditampilkan kedalam browsercth : <style></style>
• MetaMeta tags, descriptions & keywords untuk mempermudahsearch engine dalam melakukan indexing.cth : <meta></meta>
![Page 11: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/11.jpg)
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 12: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/12.jpg)
Bagian dari dokumen web yang akan ditampilkan ke usercth : <body></body>
Bagian ini memuat :• Teks & gambar• Link• Server Side Script• Multimedia and Special Programmed Events (Shockwave,
SWFs, Java Applets, online video)
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Bagian dari dokumen web yang akan ditampilkan ke usercth : <body></body>
Bagian ini memuat :• Teks & gambar• Link• Server Side Script• Multimedia and Special Programmed Events (Shockwave,
SWFs, Java Applets, online video)
![Page 13: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/13.jpg)
<body bgcolor = “blue”>tag attribute attribute value
element
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
<body bgcolor = “blue”>tag attribute attribute value
element
![Page 14: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/14.jpg)
![Page 15: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/15.jpg)
Berfungsi untuk menuliskan judul & sub‐judul
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 16: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/16.jpg)
Untuk membuat paragraf baru, membuat text beradadalam sebuah paragraf. Tag paragraf bisa memiliki tagpenutup, bisa juga tidak.
<p>isi paragraf</p>
cth :<p>Ini adalah tulisan yang berada dalamparagraf. Dengan tag ini maka tampilan dalamweb akan menjadi lebih rapi</p>
<BR> : break-line (untuk berpindah ke baris selanjutnya)<HR> : Horizontal-line (untuk menambahkan garis horizontal)
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Untuk membuat paragraf baru, membuat text beradadalam sebuah paragraf. Tag paragraf bisa memiliki tagpenutup, bisa juga tidak.
<p>isi paragraf</p>
cth :<p>Ini adalah tulisan yang berada dalamparagraf. Dengan tag ini maka tampilan dalamweb akan menjadi lebih rapi</p>
<BR> : break-line (untuk berpindah ke baris selanjutnya)<HR> : Horizontal-line (untuk menambahkan garis horizontal)
![Page 17: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/17.jpg)
Untuk mengatur penggunaan tulisan dalam halaman web(jenis tulisan, ukuran, warna, dll)
cth :<font color=blue size=7 face=“arial”>Test</font>
Tag lain untuk manipulasi Font:• <b> tulisan tebal </b>• <i> tulisan miring </i>• <u> tulisan bergaris bawah </u>• <sub> subscript </sub>• <sup> superscript </sup>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Untuk mengatur penggunaan tulisan dalam halaman web(jenis tulisan, ukuran, warna, dll)
cth :<font color=blue size=7 face=“arial”>Test</font>
Tag lain untuk manipulasi Font:• <b> tulisan tebal </b>• <i> tulisan miring </i>• <u> tulisan bergaris bawah </u>• <sub> subscript </sub>• <sup> superscript </sup>
![Page 18: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/18.jpg)
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 19: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/19.jpg)
Untuk memuat gambar ke dalam halaman web.cth :<img src=“logo-unpas.jpg”>Tag image memiliki beberapa attribute antara lain :
• src → lokasi gambar yang akan ditampilkan• width → ukuran lebar gambar• height → ukuran tinggi gambar• alt → deskripsi tentang gambar• title → judul gambar
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Untuk memuat gambar ke dalam halaman web.cth :<img src=“logo-unpas.jpg”>Tag image memiliki beberapa attribute antara lain :
• src → lokasi gambar yang akan ditampilkan• width → ukuran lebar gambar• height → ukuran tinggi gambar• alt → deskripsi tentang gambar• title → judul gambar
![Page 20: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/20.jpg)
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 21: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/21.jpg)
Dipergunakan untuk menghubungkan (linking) text danimage ke halaman lain atau bagian tertentu dari halamanyang sama dalam satu website atau website yang lain.
cth :
• Link ke halaman website lain<a href=“http://sandhikagalih.net”>website</a>
• Link ke file lain dalam satu website<a href=“halaman2.html”>Halaman 2</a>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Dipergunakan untuk menghubungkan (linking) text danimage ke halaman lain atau bagian tertentu dari halamanyang sama dalam satu website atau website yang lain.
cth :
• Link ke halaman website lain<a href=“http://sandhikagalih.net”>website</a>
• Link ke file lain dalam satu website<a href=“halaman2.html”>Halaman 2</a>
![Page 22: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/22.jpg)
Untuk mengakses bagian tertentu dalam sebuah halamanwebsite, maka bagian halaman tersebut harus diberi penanda.
cth :• Penanda pada bagian halaman<a name=“atas”>ini adalah alinea pertama</a>
atau<p name=“atas>ini adalah alinea pertama</p>
• Link ke file yang sama<a href=“#atas”>Kembali ke Atas</a>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Untuk mengakses bagian tertentu dalam sebuah halamanwebsite, maka bagian halaman tersebut harus diberi penanda.
cth :• Penanda pada bagian halaman<a name=“atas”>ini adalah alinea pertama</a>
atau<p name=“atas>ini adalah alinea pertama</p>
• Link ke file yang sama<a href=“#atas”>Kembali ke Atas</a>
![Page 23: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/23.jpg)
Berfungsi sebagai pembungkus komentar, agar tidak terbacaoleh browser.
<!-- komentar -->
cth :<!-- Ini adalah contoh paragraf --><p> paragraf pertama ini menjelaskan tentang… </p>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Berfungsi sebagai pembungkus komentar, agar tidak terbacaoleh browser.
<!-- komentar -->
cth :<!-- Ini adalah contoh paragraf --><p> paragraf pertama ini menjelaskan tentang… </p>
![Page 24: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/24.jpg)
![Page 25: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/25.jpg)
Dipergunakan untuk menggabungkan lebih dari satu halamanweb kedalam halaman lain.
cth : halaman3.html
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 26: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/26.jpg)
halaman3.html
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 27: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/27.jpg)
Digunakan untuk membuat daftar.Terdiri atas :• Ordered List• Unordered List• Definition List
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Digunakan untuk membuat daftar.Terdiri atas :• Ordered List• Unordered List• Definition List
![Page 28: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/28.jpg)
Digunakan untuk membuat daftar dimana tiap bagiannyamemiliki nomor secara terurut.Contoh :<ol>
<li>Pemrograman Web</li><li>Sistem Informasi</li><li>Rekayasa Perangkat Lunak</li>
</ol>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Digunakan untuk membuat daftar dimana tiap bagiannyamemiliki nomor secara terurut.Contoh :<ol>
<li>Pemrograman Web</li><li>Sistem Informasi</li><li>Rekayasa Perangkat Lunak</li>
</ol>
![Page 29: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/29.jpg)
Digunakan untuk membuat daftar dimana tiap bagiannyaditandai dengan sebuah simbol.Contoh :<ul>
<li>Jaringan Komputer</li><li>Sistem Multimedia</li><li>Basis Data</li>
</ul>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Digunakan untuk membuat daftar dimana tiap bagiannyaditandai dengan sebuah simbol.Contoh :<ul>
<li>Jaringan Komputer</li><li>Sistem Multimedia</li><li>Basis Data</li>
</ul>
![Page 30: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/30.jpg)
Digunakan untuk membuat daftar dimana tiap bagiannyaditandai dengan sebuah simbol.Contoh :<ul>
<li>Jaringan Komputer</li><li>Sistem Multimedia</li><li>Basis Data</li><li>Sistem Operasi</li>
</ul>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Digunakan untuk membuat daftar dimana tiap bagiannyaditandai dengan sebuah simbol.Contoh :<ul>
<li>Jaringan Komputer</li><li>Sistem Multimedia</li><li>Basis Data</li><li>Sistem Operasi</li>
</ul>
![Page 31: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/31.jpg)
Digunakan untuk membuat daftar dimana tiap daftartersebut memiliki penjelasan (sub‐bagian).Contoh :<dl>
<dt>FT</dt><dd>Teknik Informatika</dd><dd>Teknik Industri</dd><dd>Teknik Mesin</dd><dd>Teknik Pangan</dd><dd>Teknik Planologi</dd><dd>Teknik Lingkungan</dd>
</dl>©2009 :: Pemrograman Web :: Sandhika Galih,
Teknik Informatika – Universitas Pasundan Bandung
Digunakan untuk membuat daftar dimana tiap daftartersebut memiliki penjelasan (sub‐bagian).Contoh :<dl>
<dt>FT</dt><dd>Teknik Informatika</dd><dd>Teknik Industri</dd><dd>Teknik Mesin</dd><dd>Teknik Pangan</dd><dd>Teknik Planologi</dd><dd>Teknik Lingkungan</dd>
</dl>
![Page 32: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/32.jpg)
List Atribut Value HasilOrdered List type I I,II,III,IV,…
i i,ii,iii,iv,…
A A,B,C,D,…
a a,b,c,d,…
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
a a,b,c,d,…
start 1/2/3/4/.. nilai awal list
Unordered List type square
disc
circle
![Page 33: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/33.jpg)
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 34: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/34.jpg)
Digunakan untuk menyajikan data dalam bentuk kolomdan baris, tujuannya agar informasi dapat ditampilkansecara lebih terstruktur dan tabular.
table
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
row
column cell
![Page 35: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/35.jpg)
Elemen Penjelasan<table> … </table> Mendefinisikan sebuah tabel dalm dokumen HTML.
Atribut : border, cellpadding, cellspacing<th> … </th> Membuat judul kolom<tr> … </tr> Mendefinisikan baris dalam tabel.
Atribut : align (left, center, right), valign (top,middle, bottom)
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
<tr> … </tr> Mendefinisikan baris dalam tabel.Atribut : align (left, center, right), valign (top,middle, bottom)
<td> … </td> Mendefinisikan kolom tabel.Atribut : align (left, center, right), valign (top,middle, bottom), colspan, rowspan.
![Page 36: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/36.jpg)
Baris 1Kolom 1
Baris 1Kolom 2
Baris 2Kolom 1
Baris 2Kolom 2
<table><tr>
<td>baris1 kolom1</td><td>baris1 kolom2</td>
</tr><tr>
<td>baris2 kolom1</td><td>baris2 kolom2 </td>
</tr></table>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
Baris 2Kolom 1
Baris 2Kolom 2
<table><tr>
<td>baris1 kolom1</td><td>baris1 kolom2</td>
</tr><tr>
<td>baris2 kolom1</td><td>baris2 kolom2 </td>
</tr></table>
![Page 37: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/37.jpg)
• ColspanMenggabungkan beberapa cell (column) dalam satu baris.
• RowspanMenggabungkan beberapa cell (row) dalam satu kolom.
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
rowspan
= 5
colspan = 2
![Page 38: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/38.jpg)
• CellspacingJarak antara satu cell dengan cell yang lain.
• Cellpadding Jarak antara tepi cell dengan isi cell.
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
![Page 39: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/39.jpg)
Digunakan untuk membungkus tag-tag lain agarmemiliki perilaku yang sama.<div style:”color:red”>
<h3>Pemrograman Web</h3><p>ini adalah kuliah pemrograman web</p>
</div>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
<div style:”color:red”><h3>Pemrograman Web</h3><p>ini adalah kuliah pemrograman web</p>
</div>
![Page 40: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/40.jpg)
Digunakan sebagai sistem blok untuk membuatlapisan layout pada halaman.
<div id=”header”>...
</div><div id=”content”>
...</div><div id=”footer”>
...</div>
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
<div id=”header”>...
</div><div id=”content”>
...</div><div id=”footer”>
...</div>
![Page 41: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/41.jpg)
• Salhazan Nasution, SKom., “Pemrograman Web”. TeknikInformatika Universitas Islam Indonesia.
• Herman Tolle, “Sejarah dan Perkembangan Internet”. TeknikElektro Universitas Brawijaya.
• www.w3school.com
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
• Salhazan Nasution, SKom., “Pemrograman Web”. TeknikInformatika Universitas Islam Indonesia.
• Herman Tolle, “Sejarah dan Perkembangan Internet”. TeknikElektro Universitas Brawijaya.
• www.w3school.com
![Page 42: ˝HTMLDasar - sandhikagalih.netsandhikagalih.net/wp-content/uploads/2009/09/pbw-Pertemuan-2-HTML-Dasar.pdf · HTML? ððSebuah bahasa markup yang digunakan untuk membuat sebuah halaman](https://reader030.fdocuments.net/reader030/viewer/2022040418/5d63d13488c993cd298b7fe1/html5/thumbnails/42.jpg)
[email protected]://sandhikagalih.net