PRAKTIKUM
PEMPROGRAMAN WEB 1
MODUL 1

DASAR-DASAR HTML

       Dalam praktikum kali ini, Anda akan mempelajari
penggunaan dari beberapa tag dasar yang hampir akan
selalu digunakan dalam setiap praktikum Anda
nantinya. Perhatikan daftar tag di bawah ini, serta
kegunaan utamanya dalamsebuah halaman HTML.

Tag HTML dasar
Start Tag NN IE W3C Kegunaan
<html> 3.0 3.0 3.2 Mendefinisikan sebuah dokumen html
<body> 3.0 3.0 3.2 Mendefinisikan isi/badan suatu dokumen
<h1>-<h6> 3.0 3.0 3.2 Mendefinisikan heading ke 1 s/d heading ke 6
<p> 3.0 3.0 3.2 Mendefinisikan sebuah paragraf
<br> 3.0 3.0 3.2 Menyisipkan sebuah line break
<hr> 3.0 3.0 3.2 Mendefinisikan sebuah garis horisontal
<!--> 3.0 3.0 3.2 Mendefinisikan komentar dalam kode sumber HTML

Setelah itu, Anda akan mempelajari penggunaan dari
beberapa tag yang digunakan dalam melakukan
pemformatan tampilan halaman web supaya lebih
sesuai dengan keinginan atau agar lebih rapi dan
terstruktur. Perhatikan beberapa daftar tag di bawah
ini, serta kegunaan utamanya dalam sebuah halaman
HTML. Beberapa diantaranya telah dihilangkan dari
daftar tag HTML standar, namun masih
memungkinkan untuk ditampilkan pada beberapa
browser tertentu atau browser lama.
Tag untuk pemformatan teks dasar
Start Tag NN IE W3C Kegunaan
<b> 3.0 3.0 3.2 Mendefinisikan teks tebal
<big> 3.0 3.0 3.2 Mendefinisikan teks yang lebih besar
<em> 3.0 3.0 3.2 Mendefinisikan teks yang dimiringkan
<i> 3.0 3.0 3.2 Mendefinisikan teks yang dimiringkan
<small> 3.0 3.0 3.2 Mendefinisikan teks yang lebih kecil
<strong> 3.0 3.0 3.2 Mendefinisikan teks tebal
<sub> 3.0 3.0 3.2 Defines subscripted text
<sup> 3.0 3.0 3.2
Mendefinisikan teks yang posisinya lebih ke
atas
<ins> 4.0 4.0 Mendefinisikan teks yang bergaris bawah
<del> 4.0 4.0 Mendefinisikan teks yang hendak dihapus
<s> Dihilangkan. Gunakan saja <del>
<strike> Dihilangkan. Gunakan saja <del>
<u> Dihilangkan. Gunakan saja style
Tag untuk tampilan ‘hasil keluaran
komputer’
Start Tag NN IE W3C Kegunaan
<code> 3.0 3.0 3.2 Mendefinisikan teks kode komputer
<kbd> 3.0 3.0 3.2 Mendefinisikan teks dari keyboard
<samp> 3.0 3.0 3.2 Mendefinisikan teks contoh kode komputer
<tt> 3.0 3.0 3.2 Mendefinisikan teks model teletype
<var> 3.0 3.0 3.2 Mendefinisikan sebuah variabel
<pre> 3.0 3.0 3.2 Mendefinisikan teks preformatted
<listing> Dihilangkan. Gunakan saja <pre>
<plainte
xt>
Dihilangkan. Gunakan saja <pre>
<xmp> Dihilangkan. Gunakan saja <pre>
10/25/2009
2
Tag untuk Citation, Quotation, dan
Definisi
Start Tag NN IE W3C Kegunaan
<abbr> 4.0 Mendefinisikan suatu kependekan
<acronym> 4.0 4.0 Mendefinisikan suatu singkatan
<address> 4.0 4.0 3.2 Mendefinisikan suatu elemen alamat
<bdo> 4.0 Mendefinisikan arah teks
<blockquote> 3.0 3.0 3.2 Mendefinisikan quotation panjang
<q> 4.0 4.0 Mendefinisikan quotation pendek
<cite> 3.0 3.0 3.2 Mendefinisikan suatu kutipan
<dfn> 3.0 3.2 Mendefinisikan suatu istilah
Contoh tag untuk Entitas karakter
Tampilan Deskripsi Nama Entitas Nomor Entitas
spasi kosong &nbsp; &#160;
< kurang dari &lt; &#60;
> lebih dari &gt; &#62;
& dan (ampersand) &amp; &#38;
"
tanda petik/kutip (quotation
mark)
&quot; &#34;
' koma atas (apostrophe) &#39;
¢ Cent &cent; &#162;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
§ Section &sect; &#167;
© Copyright &copy; &#169;
® registered trademark &reg; &#174;
× Multiplication &times; &#215;
÷ Division &divide; &#247;
 Ketika Anda menulis suatu dokumen, mungkin
terkadang Anda menuliskan kalimat dalam bentuk
poin-poin yang menerangkan tentang suatu hal.
Dalam suatu halaman web, terkadang Anda juga ingin
melakukan hal yang sama. Terdapat tag khusus untuk
penulisan dalam format poin-poin, perhatikan daftar
di bawah ini.
Tag untuk list
Start Tag NN IE W3C Kegunaan
<ol> 3.0 3.0 3.2 Mendefinisikan sebuah list ordered
<ul> 3.0 3.0 3.2 Mendefinisikan sebuah list unordered
<li> 3.0 3.0 3.2 Mendefinisikan sebuah item dalam list
<dl> 3.0 3.0 3.2 Mendefinisikan sebuah list definisi
<dt> 3.0 3.0 3.2 Mendefinisikan sebuah istilah list definisi
<dd> 3.0 3.0 3.2 Mendefinisikan sebuah keterangan list definisi
<dir> Dihilangkan. Gunakan saja <ul>
<menu> Dihilangkan. Gunakan saja <ul>
LATIHAN
Dalam modul ini Anda akan berlatih untuk menggunakan
berbagai tag dasar untuk pemrograman web menggunakan
HTML. Ketikkan setiap kelompok tag dalam sebuah file,
simpan dalam folder Anda sendiri yang telah ditentukan,
kemudian jalankan di web browser yang telah terinstall.
Ketikkan setiap kode sumber apa adanya terlebih dahulu
(termasuk spasi kosong). Perhatikan hasil tampilannya,
kemudian belajar untuk memodifikasi setiap kelompok tag
untuk mengetahui maksud dari setiap baris tag HTML
yang Anda ketikkan. Jangan lupa untuk menyimpan setiap
modifikasi Anda sebelum menjalankan ulang di dalam
browser.
 Bagian terakhir adalah list. List adalah salah satu
komponen yang cukup sering digunakan dalam suatu
halaman Web. Dalam bentuk aslinya, mungkin sudah
tidak terlalu banyak digunakan lagi dan digantikan
fungsinya dengan image (gambar), tetapi ada perlunya
juga Anda mengetahui list saat tidak memiliki gambar
yang akan dijadikan bullet.

1. Paragraf dan line break
<html>
<body>
<p>
Paragraf ini
mengandung banyak spasi dan baris
dalam kode sumbernya,
tetapi browser
akan mengabaikannya.
</p>
<p>
Sedangkan yang ini memiliki &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; spasi panjang.
</p>
<p align =”center”>
Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda. Bila
Anda mengubah ukuran window browser, jumlah baris dalam paragraf akan berubah.
</p>
<p align=”right”>
Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
</p>
</body>
</html>

2. Background color dan heading
<html>
<body>
<body bgcolor="yellow">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna kuning.
</p>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan
menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal.
Gunakan tag lain untuk keperluan itu. </p>
<h1 align="center">Ini adalah heading 1</h1>
<p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p>
</body>
</html>

3. Garis horisontal dan komentar
    tersembunyi
<html>
<body>
<p>Tag hr mendefinisikan sebuah garis horisontal, default-nya adalah rata
tengah:</p>
<hr color=”green” >
<p align=”left”>Terdapat paragraf disini</p>
<hr width=”80%” size=”10” align=”left”>
<p align=”right”>Terdapat paragraf disini</p>
<hr width=”400” size=”6” align=”right” color=”red”>
<center>
<p>Terdapat paragraf disini</p>
</center>
<!—Ini adalah komentar yang tidak akan ditampilkan di layar browser -->
</body>
</html>
4. Pemformatan teks
<html>
<body>
<b>Teks ini tebal </b>
<br>
<strong> Teks ini juga tebal </strong>
<br>
<big> Teks ini hurufnya besar </big>
<br>
<em> Teks ini miring </em>
<br>
<i> Teks ini juga miring </i>
<br>
<small> Teks ini hurufnya kecil </small>
<br>
Teks ini berisi <sub> subscript </sub>
<br>
Teks ini berisi <sup> superscript </sup>
</body>
</html>

5. Teks yang di-preformat
<html>
<body>
<pre>
Ini adalah
Teks yang di-preformat.
Preformat akan menampilkan spasi dan
line break apa adanya.
</pre>
<p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

6. Tag “keluaran komputer”,
alamat, singkatan, dan
kependekan
<html>
<body>
<code>Kode Komputer </code>
<br>
<kbd>Masukan dari keyboard</kbd>
<br>
<tt>Teks jenis teletype </tt>
<br>
<samp>Teks contoh</samp>
<br>
<var>Variabel komputer </var>
<br>
<p>
<b>Catatan:</b> Tag-tag tersebut biasanya digunakan untuk menampilkan kode komputer/ pemrograman.
<p>
<address>
STIKI MALANG<br>
Jl. TIDAR 100<br>
Malang<br>
Jawa TImur
</address>

<br>
<abbr title=“Sekolah Tinggi Informatika dan
Komputer">STIKI</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>Atribut title digunakan untuk menampilkan versi yang dieja
ketika pointer mouse berada di atas kependekan atau
singkatan.</p>
<p>Dalam IE 5, hanya elemen acronym yang mau bekerja.</p>
<p>Dalam Navigator 6.2, elemen abbr dan acronym keduanya
dapat bekerja.</p>
</body>
</html>
7. Arah teks dan quotation <html>
<body>
<p>
Bila browser Anda mendukung kemampuan bi-directional override (bdo), baris berikut ini akan
dituliskan dari kanan ke kiri (rtl):
</p>
<bdo dir="rtl">
Anggap saja ini tulisan bahasa Arab
</bdo>
<br>
Ini adalah contoh quotation panjang:
<blockquote>
Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah
quotation panjang. Ini adalah quotation panjang.
</blockquote>
Ini adalah contoh quotation pendek:
<q>
Ini adalah quotation pendek.
</q>
<p>
Menggunakan elemen blockquote, browser menyisipkan line break dan margin, tetapi elemen q tidak
akan menampilkan apapun yang khusus.
</p>
</body>
</html>

8. Teks yang terhapus, disisipkan,
dan entitas karakter
<html>
<body>
<p>
satu dosin adalah
<del>duapuluh</del>
<ins>duabelas</ins>
buah
</p>
<p>
Hampir semua browser akan memberi garis (overstrike) pada teks yang (maksudnya) terhapus dan teks yang disisipkan
akan diberi garis bawah.
</p>
<p>
Tetapi beberapa browser yang lama akan menampilkan teks yang terhapus atau teks disisipkan sebagai suatu teks biasa
(plain text).
</p>
<p>Ini adalah entitas karakter: &#000;</p>
<p>
Coba untuk mengganti 000 dengan suatu angka (misalnya 169), dan muat ulang halaman Anda agar Anda dapat melihat
hasil dari perubahan yang dilakukan.
</p>
</body>
</html>

9. List unordered dan ordered
<html>
<body>
<h4>Sebentuk list unordered:</h4>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<br>
<h4>Sebentuk list ordered:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>

10. Jenis-<html> jenis list ordered
<body>
<h4>List bernomor:</h4>
<ol>
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan huruf:</h4>
<ol type="A">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan huruf kecil:</h4>
<ol type="a">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan angka romawi:</h4>
<ol type="I">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan angka romawi kecil:</h4>
<ol type="i">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
</body>
</html>

11. Jenis-jenis list unoredered <html>
<body>
<h4>List dengan bullet berbentuk disc:</h4>
<ul type="disc">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
<h4>List dengan bullet berbentuk lingkaran:</h4>
<ul type="circle">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
<h4>List dengan bullet berbentuk kotak:</h4>
<ul type="square">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
</body>
</html>
12. List bersarang dan list definisi <html>
<body>
<h4>Sebuah list bersarang:</h4>
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh hitam</li>
<li>Teh Hijau</li>
</ul>
</li>
<li>Susu</li>
</ul>
<br>
<h4>Contoh list definisi:</h4>
<dl>
<dt>Kopi</dt>
<dd>Minuman panas hitam</dd>
<dt>Susu</dt>
<dd>Minuman dingin putih</dd>
</dl>
</body>
</html>