Belajar pemrograman Web menggunakan HTML.pdf

1
MODUL 1
DASAR-DASAR HTML
RINGKASAN
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 dalam sebuah 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
<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

2
Tag untuk tampilan ‘hasil keluaran komputer’
<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>
<plaintext> Dihilangkan. Gunakan saja <pre>
<xmp> Dihilangkan. Gunakan saja <pre>
Tag untuk Citation, Quotation, dan Definisi
<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    
< kurang dari < <
> lebih dari > >
& dan (ampersand) & &
" tanda petik/kutip (quotation mark) " "
' koma atas (apostrophe) '
¢ Cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥
§ Section § §
© Copyright © ©
® registered trademark ® ®
× Multiplication × ×
÷ Division ÷ ÷

3
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
<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.
Silakan mencoba juga tag yang masuk dalam kategori “dihilangkan”, untuk melihat
seperti apa tampilan yang dapat dimunculkan. Untuk entitas karakter, silakan coba
nomor entitas selain yang telah ada pada daftar di atas, untuk melihat entitas karakter
apa saja yang dapat digunakan dalam sebuah halaman web.
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.

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

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

6
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>
FMIPA UAD<br>
Jl. Prof Dr Soepomo<br>
Janturan<br>
Yogyakarta
</address>
<br>
<abbr title="Universitas Ahmad Dahlan">UAD</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
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: </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>

8
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-jenis list ordered
<html>
<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>

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

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

11
MODUL 2
HTML LEBIH LANJUT
(LINK, FRAME, DAN TABEL)
RINGKASAN
Situs web biasanya tidak hanya terdiri atas 1 halaman saja (homepage, halaman awal/
pembuka). Bila suatu situs terdiri atas lebih dari 1 halaman, situs tersebut pasti
menggunakan hyperlink. Perhatikan bahwa tag untuk link memang hanya 1, tetapi
memiliki beberapa atribut tambahan agar link tersebut memberikan fungsi yang berbeda.
Untuk keperluan modifikasi tampilan agar link tidak hanya terlihat sebagai link standar,
nantinya akan disampaikan dalam materi khusus CSS. Tampilan link juga dapat diubah
sedikit lewat modifikasi tag <body> dalam suatu file HTML.
<a> 3.0 3.0 3.2 Mendefinisikan sebuah anchor
Atribut Target Kegunaan
target="_blank" Memuat dokumen baru ke dalam window baru yang kosong
target="_self" Memuat dokumen baru ke dalam window yang sama dengan
anchor (default)
target="_parent" Memuat dokumen baru ke dalam parent frame (bila
menggunakan frame)
target="_top" Memuat dokumen baru ke dalam keseluruhan window
browser (cara yang umum digunakan untuk keluar dari frame)
Sebuah halaman web yang ditampilkan dalam suatu window browser dapat dipecah
dalam beberapa tampilan yang berbeda. Masing-masing bagian tampilan dapat berisi
sebuah tampilan dari file HTML, sehingga dalam satu window browser dapat dibuka
beberapa file HTML sekaligus. Untuk dapat menampilkan beberapa file HTML dalam
satu window browser, dibutuhkan tag untuk membuat window menjadi beberapa bingkai
(frame). Di bawah ini adalah tag untuk membentuk frame pada window browser.
<frameset> 3.0 3.0 4.0 Mendefinisikan sebuah himpunan frame
<frame> 3.0 3.0 4.0 Mendefinisikan sebuah sub window (sebuah frame)
<noframes> 3.0 3.0 4.0
Mendefinisikan sebuah bagian noframe untuk browser yang
tidak dapat menangani frame
<iframe> 6.0 3.0 4.0 Mendefinisikan sebuah inline sub window (frame)
Dalam suatu halaman web, pemformatan saja tidaklah cukup untuk membentuk
tampilan web yang rapi dan enak dipandang. Supaya tampilannya lebih terstruktur,
Anda dapat menggunakan tabel. Perhatikan tag-tag di bawah ini.

12
<table> 3.0 3.0 3.2 Mendefinisikan sebuah tabel
<th> 3.0 3.0 3.2 Mendefinisikan sebuah header tabel
<tr> 3.0 3.0 3.2 Mendefinisikan suatu barisan dalam tabel
<td> 3.0 3.0 3.2 Mendefinisikan suatu sel dalam table
<caption> 3.0 3.0 3.2 Mendefinisikan sebuah caption untuk tabel
<colgroup> 3.0 4.0 Mendefinisikan sekelompok kolom dalam tabel
<col> 3.0 4.0
Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam
sebuah tabel
<thead> 4.0 4.0 Mendefinisikan suatu head tabel
<tbody> 4.0 4.0 Mendefinisikan suatu badan tabel
<tfoot> 4.0 4.0 Mendefinisikan suatu footer tabel
LATIHAN
Silakan mencoba kode-kode contoh pada modul ini, kemudian silakan mencoba variasi
penggunaannya. Gunakan alamat tujuan yang berbeda dari contoh yang ada. Bila tidak
terdapat koneksi ke Internet, gunakan alamat lokal saja terlebih dahulu. Alamat lokal
juga mempercepat akses Anda, sehingga hasilnya lebih cepat tampil di layar monitor.
Bila Anda ingin menggunakan halaman tujuan secara lokal, sebaiknya Anda membuat
file HTML tambahan dengan nama file yang disesuaikan agar dapat dipanggil. Isi file
HTML tambahan terserah Anda, yang penting bisa digunakan untuk menunjukkan
bahwa tag Anda bekerja seperti seharusnya.
Untuk mencoba kode HTML tentang frame, silakan menyiapkan file-file yang diperlukan
sesuai dengan nama-nama file yang telah disebutkan dalam contoh kode dalam modul
ini. Simpan di tempat yang sesuai dengan penunjukan frame Anda, disarankan disimpan
dalam folder yang sama tempat Anda menyimpan file definisi frame. Sebagai awalan,
sebaiknya Anda menggunakan browser IE, sebelum mencobakannya ke Navigator atau
Opera (bila ada).
Latihan menggunakan tabel mengharuskan Anda mencoba bentuk-bentuk yang ada
dalam contoh, kemudian silakan mencoba-coba sendiri variasi contoh dengan
menambahkan atau mengurangi sel dan isinya. Variasikan juga parameternya, agar
Anda tahu setiap bagian penentu tampilan tabel.
1. Link biasa, link gambar, link ke window baru, dan link internal
<html>
<body>
<p>
<a href="halaman.htm">
Teks ini</a> adalah sebuah link ke suatu halaman
dalam situs Web.
</p>
<p>
<a href="www.microsoft.com">
Teks ini</a> adalah sebuah link ke halaman awal
Situs Microsoft di World Wide Web.
</p>
<p>

13
<a href="#C4">
Melompat ke bagian lain dalam halaman ini.
</a>
</p>
<p>
Anda dapat juga menggunakan gambar sebagai sebuah link:
<a href="linkgambar.htm">
<img border="0" src="tombol.gif" width="65" height="38">
</a>
</p>
<a href="baru.htm" target="_blank">halaman Berikutnya</a>
<p>
Bila Anda memberikan atribut target sebuah link menjadi "_blank",
Link tersebut akan membuka sebuah window browser baru.
</p>
<p>
<p> Ada tulisan disini (lakukan copy dan paste baris ini untuk baris berikutnya) </p>
<p> Ada tulisan disini </p>
<a name="C4"><h2> Disinilah tujuan lompatan link internal anda </h2></a>
</body>
</html>
2. Link ke e-mail
<html>
<body>
<p>
Ini adalah link ke e-mail:
<a href="mailto:saya@microsoft.com?Subject=Halo%20lagi">
Kirim e-mail</a>
</p>
<p>
<b>Catatan:</b> Spasi di antara setiap kata sebaiknya digantikan dengan tanda
%20 untuk <b>memastikan</b> bahwa browser akan menampilkan teks Anda
dengan benar.
</p>
<p>

14
Ini juga contoh link ke e-mail:
<a
href="mailto:anda@microsoft.com?cc=dia@microsoft.com&bcc=kamu@microsoft.co
m&subject=Summer%20Party&body=Apakah%20Anda%20mau%20diundang%20ke
%20pesta%20malam%20minggu?">Kirim e-mail!</a>
</p>
</body>
</html>
3. Frameset (horisontal dan vertikal)
<html>
<frameset rows="50%,50%">
<frame src="frame1.htm">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
4. Frameset dengan atribut no-resize = “true”
<html>
<frameset rows="50%,50%">
<frame noresize="true" src="frame1.htm">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
5. Frame inline
<html>
<body>
<iframe src ="default.htm">
</iframe>
<p>Beberapa browser lama tidak mendukung iframe.</p>
<p>Bila browser yang Anda pakai sekarang tidak mendukung, iframe tak akan
terlihat.</p>
</body>
</html>
6. Membuat tabel
<html>
<body>
<p>
Setiap tabel dimulai dengan tag table.
Setiap baris tabel dimulai dengan tag tr.
Setiap data dalam tabel dimulai dengan tag td.
</p>
<h4>Satu baris satu kolom dengan border normal:</h4>

15
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>Satu baris dan tiga kolom dengan border tebal:</h4>
<table border="8">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Dua baris dan tiga kolom dengan border sangat tebal:</h4>
<table border="15">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Tabel ini tidak memiliki border:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>
7. Sel kosong dalam tabel
<html>
<body>
<table border="1">
<tr>
<td>Teks</td>
<td>Teks</td>
</tr>
<tr>
<td></td>
<td>Teks</td>

16
</tr>
</table>
<p>
Seperti yang Anda lihat, salah satu sel tidak memiliki border. Itu terjadi karena sel
tersebut kosong. Cobalah untuk menyisipkan sebuah spasi ke dalam sel tersebut.
Ternyata tetap saja tidak memiliki border.
</p>
<p>
Cara yang benar adalah dengan menyisipkan spasi non-breaking di dalam sel.
</p>
<p>Spasi non-breaking adalah sebuah entitas karakter. Bila Anda tidak mengetahui
apa yang disebut karakter entitas, baca kembali materi kuliah tentang hal tersebut.
</p>
<p>Entitas spasi non-breaking dimulai dengan tanda ampersand ("&"),
kemudian karakter-karakter "nbsp", dan diakhiri dengan semicolon (";")
</p>
<p>
</p>
</body>
</html>
8. Sel tabel yang diperlebar
<html>
<body>
<h4>Sel yang melebar dua kolom:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Sel yang melebar dua baris:</h4>
<table border="1">
<tr>
<th>Nama depan:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telepon:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body></html>

17
9. Menambahkan latar belakang ke tabel
<html>
<body>
<h4>Dengan warna latar belakang:</h4>
<table border="1" bgcolor="red">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan latar belakang gambar:</h4>
<table border="1" background="../bg.jpg">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Latar belakang pada sel:</h4>
<table border="1">
<tr>
<td bgcolor="red">Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td background="../bg.jpg">
Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>

18
MODUL 3
INTERAKTIVITAS DASAR
(FORM DAN GAMBAR)
RINGKASAN
Bila Anda suatu ketika ingin memasukkan informasi ke suatu situs web, maka anda
memerlukan fasiiltas khusus untuk keperluan tersebut. Dalam HTML Anda dapat
membuat tampilan halaman untuk menerima masukan dari pengunjung situs, kemudian
menyimpannya di situs Anda atau langsung dimunculkan kembali sebagai suatu
halaman. Disinilah perlunya menggunakan form. Perhatikan tag di bawah ini.
<form> 3.0 3.0 3.2 Mendefinisikan sebuah form untuk input dari pengunjung
<input> 3.0 3.0 3.2 Mendefinisikan sebuah field input
<textarea> 3.0 3.0 3.2
Mendefinisikan sebuah text-area (sebuah kontrol masukan
teks jenis multi-line)
<label> 4.0 4.0 Mendefinisikan sebuah label ke kontrol
<fieldset> 4.0 4.0 Mendefinisikan sebuah fieldset
<legend> 4.0 4.0 Mendefinisikan suatu caption untuk sebuah fieldset
<select> 3.0 3.0 3.2 Mendefinisikan sebuah list yang dapat dipilih (drop-down box)
<optgroup> 6.0 4.0 Mendefinisikan sebuah kelompok pilihan
<option> 3.0 3.0 3.2 Mendefinisikan sebuah pilihan dalam drop-down box
<button> 4.0 4.0 Mendefinisikan sebuah tombol
<isindex> Dihilangkan. Gunakan saja <input>
Anda tentu saja tidak ingin membuat halaman web yang hanya berisi teks saja. Agar
halaman web Anda lebih menarik, gunakan unsur grafis berupa gambar. Anda dapat
memanipulasi gambar dalam suatu halaman web sehingga menghasilkan berbagai efek.
Tag di bawah ini digunakan untuk keperluan tersebut.
<img> 3.0 3.0 3.2 Mendefinisikan sebuah gambar
<map> 3.0 3.0 3.2 Mendefinisikan sebuah image map (peta gambar)
<area> 3.0 3.0 3.2 Mendefinisikan sebuah area di dalam suatu image map
LATIHAN
Disini Anda akan berlatih membuat form dengan segala obyeknya. Tetapi hanya
sekedar form untuk mengumpulkan data secara interaktif, tanpa memproses data
tersebut. Di bagian ini belum akan dibicarakan tentang pemrosesan data, oleh karena itu
silakan mencoba-coba setiap obyek dalam form saja, dengan berbagai cara
penempatannya yang memungkinkan.
Untuk dapat melihat gambar dalam halaman dokumen Anda, silakan mempersiapkan
terlebih dahulu gambar-gambar yang akan digunakan. Untuk gambar bergerak, gunakan
saja format animasi GIF. Untuk gambar diam, gunakan format sesuai yang diperlihatkan
dalam kode sumber contoh.

19
1. Field teks dan password
<html>
<body>
<form>
Nama depan:
<input type="text" name="namadepan">
<br>
Nama belakang:
<input type="text" name="namabelakang">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Perhatikan bahwa ketika Anda mengetikkan karakter-karakter dalam suatu field
password, browser akan menampilkan asterisk atau bullet saja, bukannya karakter
yang diketikkan.
</p>
</body>
</html>
2. Checkbox dan tombol radio
<html>
<body>
<form>
Saya memiliki sebuah sepeda:
<input type="checkbox" name="Sepeda">
<br>
Saya memiliki sebuah mobil:
<input type="checkbox" name="Mobil" value="ON">
<br>
Jenis kelamin Anda?
<br>
Pria:
<input type="radio" name="Sex" value="pria">
<br>
Wanita:
<input type="radio" name="Sex" value="wanita" checked>
</form>
<p>
Ketika seorang pengguna memberikan klik mouse pada sebuah tombol radio, tombol
tersebut terlihat diberi tanda cek, dan semua tombol lain yang berada dalam nama
yang sama akan kehilangan tanda cek-nya
</p>
</body>
</html>

20
3. Kotak drop down dengan nilai default
<html>
<body>
<form>
<select name="mobil">
<option value="volvo">Volvo
<option value="peugeot">Peugeot
<option value="fiat" selected>Fiat
<option value="jaguar">Jaguar
</select>
</form>
</body>
</html>
4. Tombol dan fieldset
<html>
<body>
<fieldset>
<legend>
Informasi kesehatan:
</legend>
<form>
Tinggi <input type="text" size="3">
Berat <input type="text" size="3">
<br>
<input type="button" value="Ada tombol disini">
</form>
</fieldset>
<p>
Bila tidak terlihat adanya border di sekeliling form input, browser Anda sudah terlalu
lama.
</p>
</body>
</html>
5. Form dengan field input dan tombol submit
<html>
<body>
<form name="input" action="http://www.w3c.org/form_action.asp" method="get">
Masukkan nama depan Anda:
<input type="text" name="namadepan" value="Mickey">
<br>Masukkan nama belakang Anda:
<input type="text" name="namabelakang" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
<p>
Bila Anda meng-klik tombol "Submit", Anda akan mengirim input yang dimasukkan
lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c.
</p>
</body></html>

21
6. Mengirim e-mail dari suatu form
<html>
<body>
<form action="@" method="post" enctype="text/plain">
<h3>Form ini mengirim sebuah e-mail ke W3C.</h3>
Nama<br>
<input type="text" name="nama" value="Nama Anda” size="20">
<br>
Mail:<br>
<input type="text" name="mail" value="Mail Anda" size="20">
<br>
Komentar:<br>
<input type="text" name="komentar" value="Komentar Anda" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
7. Menyisipkan gambar latar belakang dan depan
<html>
<body background="background.jpg">
<h3>Lihatlah, ada gambar latar belakang!</h3>
<p>Baik file gambar dengan format gif maupun jpg dapat digunakan sebagai latar
belakang HTML.</p>
<p>Bila gambar yang digunakan lebih kecil dari halaman situs, gambar akan
ditampilkan berulang-ulang.</p>
<p>
Sebuah gambar dari folder lokal:
<img src="gambar1.gif" width="144" height="50">
</p>
<p>
Gambar dari folder lain:
<img src="../images/gambar2.gif" width="33" height="32">
</p>
<p>
Mengambil gambar dari situs lain:
<img src="www.yahoo.com/images/ie.gif" width="73" height="68">
</p>
</body>
</html>
8. Mengatur posisi gambar
<html>
<body>
<p>
Sebuah gambar
<img src ="../images/contoh.gif" align="bottom" width="100" height="50">
di antara teks

22
</p>
<p>
Sebuah gambar
<img src ="../images/contoh.gif" align="middle" width="100" height="50">
di antara teks
</p>
<p>
Sebuah gambar
<img src ="../images/contoh.gif" align="top" width="100" height="50">
di antara teks
</p>
<p>Perhatikan bahwa default pengaturan adalah bottom (diletakkan di bagian
bawah)</p>
<p>
Sebuah gambar
<img src ="../images/contoh.gif" width="100" height="50">
di antara teks
</p>
<p>
Sebuah gambar di depan teks
</p>
<p>
Sebuah gambar di belakang teks
</p>
</body>
</html>
9. Menampilkan teks alternatif untuk gambar
<html>
<body>
<img src="../images/gambar.gif" alt="Keterangan" width="32" height="32">
<p>
Browser text-only hanya akan menampilkan teks dalam atribut "alt", yaitu
Keterangan".
Perhatikan bahwa bilamana Anda membawa pointer mouse di atas gambar tersebut
maka teks alternatif akan ditampilkan.
</p>
</body>
</html>
10. Membuat Hyperlink pada gambar dan Image Map
<html>
<body>
<p>
Anda dapat menggunakan gambar sebagai suatu link:
<a href="halaman2.htm" >
<img border="0" src="gambar1.gif" width="65" height="38">
</a>
</p>

23
<p>
Gerakkan pointer mouse di atas gambar untuk melihat perbedaan link yang dituju:
</p>
<img src="../images/planet.gif" width=145 height=126 usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" >
<area shape="circle" coords="90,58,3" alt="Mercur" href="mercur.htm" >
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" >
</map>
</body>
</html>
11. Latar belakang dengan warna teks yang sesuai
<html>
<body bgcolor="#d0d0d0">
<p>
Paragraf ini terlihat enak dibaca karena menggunakan kombinasi warna latar
belakang dan warna teks yang sesuai.
</p>
</body>
</html>
12. Latar belakang dengan warna teks yang buruk
<html>
<body bgcolor="#ffffff" text="yellow">
<p>
Paragraf ini terlihat tidak nyaman dibaca karena menggunakan kombinasi warna
latar belakang dan warna teks yang tidak sesuai.
</p>
</body>
</html>

24
MODUL 4
STYLE SHEET
RINGKASAN
Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini tiba
saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk keperluan
tersebut, Anda dapat menggunakan style sheet/CSS. CSS tidak hanya dapat membuat
tampilan nampak lebih baik, tetapi dapat membuat pengembangan halaman web
menjadi jauh lebih efisien karena menghilangkan semua kesulitan yang muncul pada
halaman web biasa tanpa style.
Style
<style> 4.0 3.0 3.2 Mendefinisikan style dalam sebuah dokumen
<link> 4.0 3.0 3.2 Mendefinisikan relasi antara dua dokumen yang berhubungan
LATIHAN
Bagian ini mencakup penggunaan CSS untuk mengubah tampilan standar pada
halaman web Anda. Tidak semua tag style digunakan disini karena jumlahnya sangat
banyak, silakan Anda cari referensi lain sebagai tambahan untuk mempelajari CSS.
Seperti biasa, simpan file-file Anda dalam folder Anda sendiri, kemudian cobalah
langsung untuk melihat hasil setiap contoh, lalu ubahlah isinya untuk melihat variasi
tampilannya yang memungkinkan. Perhatikan bahwa semua contoh disini menggunakan
CSS internal, silakan Anda berlatih untuk mengubahnya menjadi CSS eksternal.
Gunakan sembarang gambar yang dapat Anda temui untuk contoh yang memerlukan
gambar (sesuaikan dulu dengan nama file dalam contoh).
1. Pengaturan latar belakang
<html>
<head>
<style type="text/css">
body
{
background: #00ff00
url("gambar.gif")
no-repeat fixed
center center
}
</style>
</head>
<body>
<p>
<b>Catatan:</b>
Properti background-attachment dan background-position tidak bisa digunakan
dalam browser Netscape 4.0.
</p>
<p>Ada teks disini</p>
<p>Tuliskan sekehendak kalian</p>

25
<p>Terserah apa saja</p>
<p>Yang penting ada tulisannya</p>
</body>
</html>
2. Penanganan font
<html><head>
p.normal {font-weight: normal}
p.tebal {font-weight: bold}
p.teballl {font-weight: 900}
p.lengkap
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
<p class="normal">
Perhatikan paragraf ini</p>
<p class="tebal">
Bandingkan dengan paragraf diatasnya</p>
<p class="teballl">
Bandingkan yang ini juga</p>
<p class="lengkap">
Paragraf dengan semua atribut font dimasukkan</p>
</body></html>
3. Pembuatan border
<html>
<head>
p.borderous
{
border-style: double;
border-width: 5px 10px 1px medium;
border-color: #ff0000
#00ff00 #0000ff
rgb(250,0,255)
}
</style>
</head>
<body>
<p class="borderous">
<b>Catatan:</b> Properti "border-color" dan "border-width" tidak dikenali oleh
browser Internet Explorer bila digunakan secara langsung. Gunakan properti
"border-style" untuk menyiapkan border dalam Internet Explorer.<br>
Internet Explorer 5.5 mendukung semua border style. Internet Explorer 4.0 - 5.0 tidak
mendukung nilai "dotted" dan "dashed" </p>
</body>
</html>

26
4. Pengaturan margin
<html>
<head>
p.margin {margin: 2cm 4cm 3cm 80px}
</style>
</head>
<body>
<p>
Yang ini adalah paragraf biasa tanpa pengaturan margin, sepertinya biasa saja.
</p>
<p class="margin">
Bandingkan dengan tampilan paragraf ini. Coba Anda kecilkan ukuran window
browser agar terlihat lebih jelas perbedaannya.
</p>
<p>
This is a paragraph
</p>
</body>
</html>
5. Mengatur padding pada sel tabel
<html>
<head>
td {padding: 1.5cm}
td.value2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
Ini adalah tabel dengan sel yang menggunakan padding sama pada setiap sisinya
(1,5cm).
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="value2">
Bandingkan dengan tampilan tabel ini. Padding atas dan bawah memiliki nilai 0,5cm,
sedangkan padding kanan dan kiri nilainya 2,5cm.
</td>
</tr>
</table>
</body>
</html>

27
6. Menggunakan list
<html>
<head>
ul
{
list-style: square outside url("gambarkecil.gif")
}
</style>
</head>
<body>
<p>Disini Anda menggunakan gambar berukuran kecil sebagai bullet untuk list.
Properti outside akan menyebabkan list menjadi lebih rapi bila terdiri atas item yang
berupa kalimat panjang dan window browser berukuran kecil.</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
7. Elemen latar depan dan latar belakang
<html>
<head>
img.x1
{
position:absolute;
left:0;
top:0;
z-index:1
}
img.x2
{
position:absolute;
left:0;
top:100;
z-index:-1
}
</style>
</head>
<body>
<p><b>Catatan:</b> Netscape 4 tidak mendukung properti "z-index".</p>
<h1>Sepertinya Heading ini terhalang oleh gambar</h1>
<img class="x1" src="gambar.bmp" width="100" height="80">
<p>Nilai default z-index adalah 0. Z-index 1 memiliki prioritas lebih tinggi, sedangkan
Z-index –1 memiliki prioritas lebih rendah.</p>
<p></p>
<img class="x2" src="gambar.bmp" width="100" height="80">

28
<p>Sekarang Anda bisa membandingkan dengan tampilan di bagian bawah ini.
Apakah masih terhalang gambar?</p>
</body>
</html>
8. Mengubah tampilan Link
<html>
<head>
a:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:visited {color: #0000ff}
a.four:hover {font-family: fixedsys}
a.five:visited {color: #0000ff; text-decoration: line-through}
a.five:hover {text-decoration: overline}
</style>
</head>
<body>
<p>Gerakkan pointer mouse di atas link-link di bawah ini untuk membuat link
tersebut berubah tampilannya.</p>
<p><a class="one" href="hlm1.htm"">Mengubah properti color</a></p>
<p><a class="two" href="hlm2.htm"> Mengubah properti font-size</a></p>
<p><a class="three" href="hlm3.htm"> Mengubah properti background-
color</a></p>
<p><a class="four" href="hlm4.htm"> Mengubah properti font-family</a></p>
<p><a class="five" href="hlm5.htm"> Mengubah properti text-decoration</a></p>
</body>
</html>

Belajar pemrograman Web menggunakan HTML.pdf

More Related Content

Similar to Belajar pemrograman Web menggunakan HTML.pdf (20)

Recently uploaded (20)

Belajar pemrograman Web menggunakan HTML.pdf