˝htmldasar -...
TRANSCRIPT
“HTML Dasar”Pertemuan - 2
SemesterSemester GanjilGanjil 2009/20102009/2010
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).
• 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
• 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
• 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.
• 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>
contoh.html
©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>
©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>
• 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>
©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)
©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)
<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
Berfungsi untuk menuliskan judul & sub‐judul
©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)
©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)
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>
©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
©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
©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>
©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>
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>
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>
Dipergunakan untuk menggabungkan lebih dari satu halamanweb kedalam halaman lain.
cth : halaman3.html
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
halaman3.html
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
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
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>
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>
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>
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>
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
©2009 :: Pemrograman Web :: Sandhika Galih,Teknik Informatika – Universitas Pasundan Bandung
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
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.
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>
• 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
• 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
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>
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>
• 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
[email protected]://sandhikagalih.net