˝HTMLDasar -...

“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


• 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


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


• 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>


• Document Information<html></html>

• Document Header<head></head>

• Document Body<body></body>

contoh.html


• Page TitleJudul dari halaman webcth : <title></title>

• ScriptingTempat client‐side script yang disertakan (javascript,vbscript, jscript)cth : <script></script>


• 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>


• 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>

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)


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


<body bgcolor = “blue”>tag attribute attribute value

element

Berfungsi untuk menuliskan judul & sub‐judul


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


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>

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


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

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>


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>


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.



cth :<p> paragraf pertama ini menjelaskan tentang… </p>


Berfungsi sebagai pembungkus komentar, agar tidak terbacaoleh browser.



cth :<p> paragraf pertama ini menjelaskan tentang… </p>

Dipergunakan untuk menggabungkan lebih dari satu halamanweb kedalam halaman lain.

cth : halaman3.html


halaman3.html


Digunakan untuk membuat daftar.Terdiri atas :• Ordered List• Unordered List• Definition List


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>


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>



<li>Jaringan Komputer</li><li>Sistem Multimedia</li><li>Basis Data</li>

</ul>


<li>Jaringan Komputer</li><li>Sistem Multimedia</li><li>Basis Data</li><li>Sistem Operasi</li>

</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,…


a a,b,c,d,…

start 1/2/3/4/.. nilai awal list

Unordered List type square

disc

circle

Digunakan untuk menyajikan data dalam bentuk kolomdan baris, tujuannya agar informasi dapat ditampilkansecara lebih terstruktur dan tabular.

table


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)


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


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.


rowspan

= 5

colspan = 2

• CellspacingJarak antara satu cell dengan cell yang lain.

• Cellpadding Jarak antara tepi cell dengan isi cell.


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>


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


<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


• 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

˝HTMLDasar -...

Documents

Transcript of ˝HTMLDasar -...