1

TENTANG HTML
1.1 Tujuan Instruksional
1. Pembaca mengetahui format penulisan HTML.
2. Pembaca mampu menggunakan komentar HTML.
3. Pembaca mengetahui teks editor yang digunakan untuk penulisan HTML.
4. Pembaca mengetahui aturan penulisan HTML.

1.2 Pendahuluan
HTML kependekan dari HyperText Markup Language. Yaitu suatu format data yang
digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform
komputer ke platform komputer lainnya,tanpa perlu melakukan suatu perubahan
apapun. HTML tidak hanya mampu menampilkan teks tapi juga dapat menampilkan
format-format lain dari teks tersebut, misalnya tabel, list, form, frame serta dapat
digabungkan dengan obyek suara, gambar, video maupun Java.

Dokumen yang berisi script HTML merupakan dokumen yang disajikan dalam
bentuk website. Dokumen HTML disebut markup language karena mengandung
tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan
tingkat kepentingan dari teks tersebut dalam suatu dokumen. Kita dapat menentukan
baris-baris mana yang merupakan judul, menentukan gambar yang harus tampil dan
pengaturan format teks dan lain sebagainya.

Saat ini banyak sekali software yang digunakan untuk mendesain web, seperti Adobe
GoLive, FrontPage, Macromedia Dreamweaver dan Framework. Namun anda tetap
perlu mengetahui dasar-dasar HTML. Karena meskipun software tersebut dapat
membuat website secara cepat dan menarik, kadang kala anda perlu melakukan
perubahan website sesuai keinginan anda, terutama web yang berisi website secara

1
spesifik. Misal, anda membuat sebuah web dengan website yang berisi informasi
sebuah perusahaan dimana anda bekerja atau mendapat proyek.

Untuk membuat script HTML hanya dibutuhkan teks editor dan browser. Teks editor
yang dapat digunakan adalah notepad, Ms. Word, CuteHTML dan EditPlus. Dalam
buku ini penulis menggunakan EditPlus, dimana softwarenya telah ada dalam CD.
Untuk browser, bisa menggunakan Internet Explorer, Nescape Comunicator,
Mozilla-Firefox, Opera dan lainnya. Agar file HTML dapat berjalan pada browser
harus disimpan dengan ekstensi .html atau .htm.

HTML merupakan script yang tidak ditulis secara utuh. Perbedaannya jika script
harus di embeded dengan script lain agar dapat dieksekusi misal HTML, XML,
Javascript, PHP. Jika program adalah kumpulan perintah yang dapat berdiri
tersendiri dan dapat dieksekusi langsung misal Turbo Pascal atau C++.

1.3 Aturan Penulisan HTML

1. Nama file pada beberapa sistem operasi bersifat case sensitive. Terutama sistem
operasi *nix seperti unix. Misal contoh.html berbeda dengan CONTOH.html.
Namun pada sistem operasi windows 9x/XP/2000 hal ini tidak berlaku.
2. Diawali dengan <namatag> dan diakhiri dengan </namatag>. Tag adalah
suatu elemen dalam dokumen. Misal, <h1>belajar web</h1>.
3. Jika dalam tag ada tag lagi, maka penulisannya sebaiknya urut. Misal,
<h1><b>ayo</b></h1>.
4. Penulisan script HTML tidak case sensitive. Namun untuk mengantisipasi
perkembangan script HTML disarankan menggunakan huruf kecil.

1.4 Elemen Dasar HTML

Suatu elemen HTML terdiri dari tag-tag dan atributnya.
TAG :
Sewaktu browser menampilkan halaman web. Browser akan membaca teks pada
dokumen HTML dan mencari kode khusus yang disebut tag. Tag biasanya
merupakan suatu pasangan tag awal <…> dan tag akhir </…>.
Tag yang mengandung tag lain didalamnya disebut sebagai nested tag.
2
Sebagai catatan,tidak semua tag didukung oleh semua browser. Jika suatu browser
tidak mengenali suatu tag tertentu, browser tersebut akan mengabaikan tag yang
tidak dikenalinya dan menampilkan isi tag sebagai teks biasa.

Aturan penulisan tag :

1. Tag HTML diapit dengan dua karakter kurung bersudut < dan >
2. Tag HTML secara normal selalu berpasangan seperti <b> dan >/b>
3. Tag pertama dalam suatu pasangan adalah tag awal,dan tag yang kedua
merupakan tag akhir.
4. Bebas (huruf kapital atau kecil atau campuran huruf besar –kecil) dan tidak
sensitif case artinya tag <b> berarti sama dengan <B>.
5. Jika dalam suatu tag ada tag lagi,maka penulisan tag akhir tidak boleh
bersilang,harus berurut. Misalnya <b><I> maka akhirnya harus </I></b>.

ATRIBUT :
Tag awal biasanya memiliki beberapa buah atribut yang menyatakan
karakteristiknya.
Misal :

<p align =”left”>

digunakan untuk membuat rata kiri suatu paragraph. Tag yang digunakan adalah <p>
dan atribut yang menyertainya adalah align dengan nilai left.

Dalam HTML nilai atribut dalam pasangan tanda petik ganda kecuali jika :
 Nilai merupakan suatu kumpulan dari nilai tertentu (misal dalam <P
ALIGN=”left”>, tanda petik ganda boleh dihilangkan. Maka penulisannya boleh
<P ALIGN=left>).
 Nilai hanya berisi angka,h uruf,dan titik (dalam <IMG
SRC=”Picture/alam.gif” ALT=”menampilkan gambar
pemandangan alam”>, kedua nilai tersebut memerlukan tanda petik ganda
karena SRC mengandung tanda “/”, dan ALT mengandung spasi).

3
Atribut yang menyertai elemen HTML adalah :
 Version = cdata (data adalah urutan karakter termasuk karakter khusus. Nilai
atribut ini sudah dispesifikasi oleh HTML DTD yaitu HTML Document Type
Definition,yang berupa definisi tipe dokumen.

Atribut lain yang boleh disertakan :

 Lang (language information) = language kode,digunakan untuk mengontrol
browser dalam menampilkan karakter khusus. Atribut ini dangat membantu
mencari alamat web,karakter khusus dan lainnya.

1.5 Kerangka Script HTML

Kerangka script HTML minimal mempunyai tag seperti pada tabel 1.

Tabel 1.1 Tag dasar HTML

<html> Sebagai tanda awal dokumen html.
<head> Sebagai informasi page header. Pada tag ini anda dapat meletakkan tag title,
base, isiindex, link, script, style dan meta
<title> Sebagai judul halaman. Kalimat yang terletak dalam tag ini akan muncul pada
bagian kiri atas browser (title bar).
<body> Di dalam tag ini bisa diletakkan berbagai page atribut seperti warna latar
belakang, warna teks, warna link, warna visited link, warna active link dan
lain-lain.

Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :

<HTML >
<HEAD>
…….informasi tentang dokumen HTML
</HEAD>
<BODY>
……Informasi yang ditampilkan dalam browser web
</BODY>
</HTML>

Bagian Head :
Kepala dokumen dinyatakan dengan pasangan tag <HEAD>…</HEAD> yang
merupakan pembuka dari dokumen HTML. HEAD berisi informasi-informasi yang
menjelaskan tentang dokumen HTML,seperti judul dokumen, basis URL suatu
dokumen, hubungan antar dokumen dalam HTML, dan indeks suatu dokumen.
4
Informasi yang ada di bagian HEAD tidak akan terlihat ketika dokumen tersebut
dibuka pada suatu browser.

Elemen-elemen pada bagian Head bertugas mengerjakan hal-hal berikut :

1. Menyediakan judul dokumen
2. Menjadi jembatan antar dokumen
3. Memberi tahu browser untuk membuat form pencarian
4. Menyediakan metode untuk mengirim pesan.

Elemen-elemen yang ada pada head :

 Elemen Title
Untuk membuat judul pada suatu dokumen HTML digunakan pasangan tag
<TITLE>….</TITLE>. Tag TITLE hanya boleh berada di bagian HEAD dan
setiap dokumen hanya boleh memiliki satu judul.
TITLE bukan bagian dari teks dokumen dan tidak boleh mengandung tag-tag
lain. TITLE biasanya ditampilkan oleh browser pada title bar dari jendela
browser dan berfungsi sebagai label untuk jendela dari browser tersebut.
 Elemen Base
Elemen ini dapat digunakan untuk mempersingkat penulisan URL dengan
memberikan hubungan relatif pada link dari dokumen. BASE merupakan
suatu elemen pada HTML yang berfungsi menyediakan suatu jalur pencarian
bagi dokumen-dokumen yang mempunyai hubungan dengan dokumen
pengguna tag BASE.
Dengan menggunakan BASE, user dapat mengikuti link dari dokumen
HTML yang kita buat,meskipun dokumen telah berpindah tempat. Hal ini
terjadi jika user mengambil suatu file dan membacanya secara local di
komputernya. Tanpa menggunakan BASE referensi yang menuju dokumen
lain akan menjadi kacau karena dokumen yang direferensikan berada di
komputer kita, bukan di komputer user.

<HTML>
<HEAD>
<TITLE> Link Berita</TITLE>
<BASE HREF=”//www.ia.net/~rmeegantara”>
</HEAD>
<BODY>

5
 <IMG SRC=/Gambar/Actual.Gif ALT=”Kantor Berita”>
<UL>
<A HREF=HTTP://www.cnn.com>CNN Today</A>
<BR><A HREF=HTTP://www.voa.com>VOA on Focus</A>
</UL>
</BODY>
</HTML>

 Elemen Link
Tag <LINK> menyatakan hubungan antara dokumen saat ini dengan
dokumen lain. LINK juga digunakan untuk menyatakan pengarang, indeks
dan istilah.
LINK berpengaruh pada keseluruhan isi dokumen,karena itu LINK berada di
bagian kepala. Suatu dokumen dapat banyak mempunyai LINK dengan
berbagai atributnya untuk menyatakan semua hubungan yang mungkin antara
dokumen tersebut dengan dokumen lain yang berhubungan. Lihat tabel
berikut :

Tabel 1.2: Atribut Link Dan Fungsinya.

Atribut Fungsi
HREF Menunjuk pada dokumen atau bagian dokumen yang dituju oleh
LINK tersebut.
REL Menyatakan hubungan antar dokumen saat ini dengan nilai pada
HREF
REV Menyatakan hubungan antara dokumen saat ini dengan nilai
HREF,hanya saja dalam hubungan yang berlawanan dengan REL.
TYPE Spesifikasi tipe dan parameter untuk link style sheet.

Contoh penggunaan tag link :

<HTML>
<HEAD>
<TITLE> penggunaan tag LINK</TITLE>
<LINK REV=”made” HREF=”mailto: [email protected]”>
<LINK REL=”toc” HREF=”contents.htm”>
<LINK REL=”index” HREF=”index.htm”>
<LINK REL=”copyright” HREF=”copyright.htm”>
</HEAD>
<BODY>
</BODY>
</HTML>

6
  Elemen Meta
Elemem META digunakan untuk memberikan informasi tentang suatu
dokumen. Elemen ini tidak dimaksudkan untuk menggantikan elemen TITLE
yang memberikan informasi tentang judul suatu dokumen tetapi untuk
memberikan informasi lain yang ber manfaat bagi browser ataupun server.
Berikut ini contoh penggunaan tag meta :
<META HTTP-EQUIV=”refresh” CONTENT=”60”
URL=”www.friendster.com/asihwinantu”>

Elemen META diatas dimaksudkan untuk menginstruksikan browser untuk

menunggu 60 detik untuk kemudian memanggil dokumen baru. Instruksi
semacam ini digunakan jika dokumen pindah ke lokasi lain.

Tabel 1.3 : Atribut META dan fungsinya.

Atribut Fungsi
HTTP-EQUIV Atribut ini menghubungkan elemen META ke respon
protokol tertentu.
NAME Untuk menambahkan keterangan elemen. Jika atribut
ini tidak ada diasumsikan sama dengan HTTP-EQUIV.
URL Mendefinisikan target dokumen.
CONTENT Menunjukkan respon nilai dari properti.

Bagian Body :
Section BODY yang dinyatakan dengan tag <BODY>…</BODY> merupakan
elemen terbesar di dalam dokumen HTML. Bagian ini bukan hanya untuk
memasukkan informasi atau isi dokumen tetapi juga bisa memberikan format tertentu
pada suatu kelompok teks, membuat tabel, form dan lain sebagainya. Contoh
Dokumen Dasar Html

<HTML>
<HEAD>
<TITLE> Judul Dokumen HTML</TITLE>
</HEAD>
<BODY>
masukkan teks dan isi tampilan halaman HTML disini
</BODY>
</HTML>

7
Simpan dokumen tersebut dengan ekstensi .htm atau .html. dan buka dengan
program web browser yang ada, Internet Explorer, mozzila, opera atau konqueror.
Browser akan mengenali file teks tersebut sebagai suatu dokumen HTML dan akan
menampilkan isinya sebagai suatu halaman web.

Judul dokumen html

Elemen body

Gambar 1.1 tampilan dokumen html

Atribut Elemen Body

Elemen BODY mempunyai banyak atribut. Berikut ini adalah atribut-atribut yang
menyertai elemen BODY.

Tabel 1.4 : Atribut BODY dan fungsinya

Atribut Fungsi
ALINK Menyatakan warna link yang sedang aktif
BACKGROUND Menyatakan file gambaryang akan digunakan sebagai gambar
latar belakang dari halaman HTML.
BGCOLOR Menyatakan warna yang digunakan sebagai latar belakang
halaman web.
BGPROPERTIES Jika diset FIXED, membuat suatu watermark yaitu background
tetap (tidak ikut menggulung jika halaman di scrooling)
LEFTMARGIN Mengatur margin kiri dari isi dokumen dengan ukuran pixel.
LINK Menyatakan warna dari link yang belum pernah dikunjungi.
TEXT Mengatur warna teks dokumen web.
TOPMARGIN Mengatur margin atas dari isi dokumen dengan ukuran pixel.
VLINK Menyatakan warna dari link yang pernah dikunjungi.

8
Warna yang digunakan dalam dokumen HTML menggunakan kode heksadesimal
atau nama dari RGB. Berikut ini adalah tabel nama warna dan nomor
hexadesimalnya.

Tabel 1.5 : Tabel warna dan Nomor Hexadecimal

Warna Nomor Hexadesimal
Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Grey #808080
Silver #C0C0C0
Red #FF0000
Lime #00FF00
Yellow #FFFF00
Blue #0000FF
Fuchsia #FF00FF
Aqua #00FFFF
White #FFFFF

1.6 Komentar HTML

Setiap bahasa pemrograman atau script, pasti mempunyai komentar. Manfaat dari
komentar adalah sebagai dokumentasi proses, logika program, deskripsi rumus atau
penjelasan. Untuk HTML cara membuat komentar dengan tag <!-- sebagai awal
komentar dan tag --> sebagai akhir komentar. Dari gambar 1.1 terlihat bahwa
komentar tidak ikut di proses, sehingga komentar dapat ditulis pada semua bagian
HTML.

9
1.7 HTML dan HTM
File halaman situs web disimpan dengan ekstensi HTML. Maka ketika situs tersebut
diakses, “HTML” tersebut muncul di alamat situs web. Contoh www., namun ada
juga alamat situs web berekstensi HTM, huruf “L”-nya hilang. Contoh
www.winzip.com/downwz.htm. Apakah perbedaannya ? sebetulnya tidak ada. HTM
adalah versi singkat dari HTML.

Ketika internet muncul, hampir semua situs berjalan di sistem UNIX. Ketika orang
mulai menggunakan DOS atau windows sebagai server situs web, ekstensi HTML
menjadi masalah. Karena DOS dan windows menggunakan format 8.3 untuk nama
file. Artinya file tidak boleh lebih dari 8 karakter dan ekstensi tidak boleh lebih dari
3. Karena HTML lebih dari 3 karakter maka supaya situs web dapat diakses
dibuatlah standar HTM, dengan menghilangkan huruf “L”.

Maka pada awal internet muncul, orang dapat mengetahui sistem operasi yang
digunakan oleh server situs web dengan melihat ekstensi filenya saja. Namun
sekarang jumlah karakter dalam ekstensi sudah tidak digunakan karena windows saat
ini dapat membaca ekstensi file lebih dari 3 karakter.

Selain HTML dan HTM masih ada SHTML, menandakan jika server menggunakan
“Server Side Include”. Server Side Include adalah salah satu cara mempermudah
update situs web. Halaman situs web SHTML memiliki kode tertentu di beberapa
bagian. Kode tersebut akan memanggil file yang ada di server dan menempatkan di
bagian yang sudah ditandai. Misal, sebuah situs web berisi bagian “Berita Terbaru”
yang harus berubah setiap hari. Apakah si admin harus merubah file HTML ? tentu
tidak. Isi bagian “Berita Terbaru” bisa diambil dari file TXT yang sudah disiapkan.
File TXT tersebut dipanggil dengan kode SHTML. Jadi yang perlu diubah adalah file
TXT tersebut.

oooO0Oooo

10
 2
KARAKTER KHUSUS
2.1 Tujuan Instruksional
1. Pembaca mengetahui daftar karakter khusus yang digunakan dalam disain web.
2. Pembaca dapat menggunakan karakter khusus dalam tag HTML.

2.2 Pendahuluan
Karakter khusus sering digunakan dalam penulisan script HTML. Biasanya untuk
penulisan tertentu seperti @,  dan . Atau tanda <=, >= yang digunakan untuk
menampilkan operasi matematika. Penulisan karakter khusus dapat menggunakan dua cara
yaitu menggunakan nama karakter atau kode karakter dimana daftar karakter ada di tabel 2.1.
Penggunaan nama karakter lebih mudah di banding kode karakter, namun tidak semua
browser mendukung penulisan dengan nama karakter.

2.3 Daftar Karakter Khusus

Browser dapat menampilkan karakter khusus tersebut dengan cara tertentu. Misal,
dalam browser ingin ditampilkan karakter & # < > / dan lainnya. Perlu diingat
karakter khusus pada HTML bersifat case sensitive.

Tabel 2.1 Daftar karakter khusus

Hasil Deskripsi Nama karakter Kode karakter
 Copyright &copy; &#169;

 Registered trademark &reg; &#174;

 Trademark &#8482;
Non breaking space &nbsp; &#161;
& Ampersand &amp; &#38;
<<
Angle quotion mark (left) &laquo; &#171;
>>
Angle quotion mark (right) &raquo; &#187;
“ Tanda kutip &quot; &#34;

11
 < Tanda lebih kecil &lt; &#60;
> Tanda lebih besar &gt; &#61;
x Tanda kali &times; &#215;
 Tanda bagi &divide; &#247;

2.4 Implementasi
Penggunaan karakter khusus diletakkan dalam tag HTML bagian <body>. Contoh
script HTML di bawah ini menjelaskan penggunaan beberapa karakter khusus.

<HTML><HEAD>
<TITLE> contoh karakter khusus </TITLE>
</HEAD>
<BODY>
Aplikasi Sistem Informasi Rekam Medik <br>RS. Cepat Sehat<br>
copyright &copy; Oktober 2005<br>
AKS Software&#8482; Jogjakarta
</BODY></HTML>

Gambar 2.1 Penerapan karakter khusus

Kharakter khusus juga sering digunakan pada website yang menampilkan operasi
matematika. Seperti penambahan, pengurangan atau operasi relasi. Lihat script
berikut ini:

<HTML><HEAD>
<TITLE> contoh karakter khusus </TITLE>
</HEAD>
<BODY>
10 &#60; 25 dan<br>
20 &divide; 5 = 4
</BODY></HTML>
oooO0Oooo

12
 3
PENGATURAN TEKS
3.1 Tujuan Instruksional
1. Pembaca memahami tag-tag HTML yang digunakan untuk mengatur teks.
2. Pembaca dapat menggunakan tag-tag yang digunakan untuk mengatur teks.
3. Pembaca mampu mendisain web sederhana dengan tag-tag HTML pengaturan
teks.

3.2 Pendahuluan
Selain secara disain GUI, seperti Framework atau Dreamweaver dalam disain web
pengaturan teks dapat menggunakan beberapa tag HTML. Penulisannya dilakukan
secara script langsung pada teks editor. Beberapa tag pengatur teks diantaranya :
<b>, <u>, <i>, <sub> dan <sup>. Setiap web kadang menampilkan sederetan kode
program (soruce), untuk keperluan ini dapat menggunakan tag <pre>, juga tersedia
tag computer output, seperti <code>, <kbd> dan <var>.

3.3 Pengaturan Teks

Tag <hn>
<hn>…..</hn> digunakan untuk memilih ukuran font. N mempunyai nilai 1 – 6.
Dengan acuan <h1> merupakan ukuran terbesar dan <h6> merupakan ukuran huruf
terkecil. Tag <hn> disarankan digunakan untuk pengaturan heading yaitu judul dari
suatu dokumen HTML.

<HTML>
<HEAD>
<TITLE> web-ku yang pertama </TITLE>
</HEAD>
<BODY>
<h1>selamat belajar script html.</h1>
<h2>selamat belajar script html.</h2>
<h3>selamat belajar script html.</h3>
<h4>selamat belajar script html.</h4>
<h5>selamat belajar script html.</h5>
13
 <h6>selamat belajar script html.</h6>
</BODY>
</HTML>

Gambar 3.1 Perapan tag <hn>

Tag <I>
Perintah untuk membuat tulisan dicetak miring/italic untuk huruf besar atau huruf
kecil.

Tag <u>
Perintah yang digunakan untuk mencetak garis bawah/underline pada tulisan atau
angka.

Tag <b>
perintah yang digunakan untuk mencetak tebal/bold pada tulisan atau angka.

<HTML>
<HEAD>
<TITLE> contoh </TITLE>
</HEAD>
<BODY>
<hr> <h2> berita utama hari ini </h2> <hr>
telah dibuka <i>pasar malam pada malam tahun baru</i> di
lapangan <u>sepak bola</u>, guna <b>membantu rakyat</b> yang
masih membutuhkan hiburan secara murah.
</BODY>
</HTML>

14
 Gambar 3.2 Hasil dari tag <i> <u> dan <b>

Tag <strong>
Perintah yang digunakan untuk menebalkan tulisan atau angka. Fungsinya sama
seperti perintah <b>.

Tag <big>
Perintah yang digunakan untuk mencetak dengan ukuran besar dari ukuran normal
huruf. Namun untuk hasil maksimal disarankan menggunakan perintah <font
size> yang dibahas pada bab tersendiri.

<HTML>
<HEAD>
<TITLE> contoh </TITLE>
</HEAD>
<BODY>
<hr>
<h2> berita utama hari ini </h2>
<hr>
<strong>telah dibuka pasar malam pada malam tahun baru</strong> di
lapangan sepak bola, guna <big>membantu rakyat</big> yang masih
membutuhkan hiburan secara murah.
</BODY>
</HTML>

15
 Gambar 3.3 Penerapan tag <strong> dan <big>

Tag <sub>
Perintah yang digunakan untuk mencetak turun pada suatu tulisan atau angka,
kepanjangan dari subscript.

Tag <sup>
Perintah yang digunakan untuk mencetak naik pada suatu tulisan atau angka,
kepanjangan dari superscript.

Tag <center>
Perintah untuk membuat teks terletak di tengah.

<HTML>
<HEAD> <TITLE> contoh </TITLE> </HEAD>
<BODY>
<h2><center>www.wartaku.co.id</center></h2>
</BODY>
</HTML>

Gambar 3.4 Hasil dari tag <center>, <sub> dan <sup>

16
Tag <ins>
Mendefinisikan teks yang disisipkan. Biasanya digunakan untuk meralat suatu teks
dalam website, misal sebuah kalimat akan dicoret dan diganti dengan kalimat lain.

Tag <del>
Mendefinisikan teks yang dihapus. Dapat digunakan berpasangan dengan tag <del>
atau berdiri sendiri. Hasil yang ditampilkan yaitu teks akan diberi garis bawah.

Tag <em>
Digunakan untuk menjelaskan sebuah teks yang ditekankan dan hasilnya akan
dicetak miring.

<HTML>
<HEAD>
<TITLE> contoh </TITLE>
</HEAD>
<BODY>
<b>Ralat soal ujian :</b><br>
1. <del>Jelaskan</del> <ins>Sebutkan</ins> tools untuk
merancang sistem informasi
!.<br>
2. Gambarkan Model SDLC <em>(System Development Life
Cycle)</em>.
<br><br>
<center>=== semoga sukses ===</center>
</BODY>
</HTML>

Gambar 3.5 Hasil dari tag <em>, <del> dan <ins>

17
3.4 Pengaturan paragraf
Tag <p>
Digunakan untuk pindah paragraf. </p> bersifat opsional artinya boleh ditulis, boleh
tidak. Karena tag <p> tidak didefinisikan mempunyai arti tag akhir. Dan setiap
paragraf harus dimulai dengan tag <p> kembali. Namun pengalaman penulis,
sebaiknya setiap paragraf diakhir dengan tag </p> untuk kemudahan dan sebagai
penanda akhir dari paragraf.

Perlu diingat bahwa penekanan tombol enter pada teks editor nantinya tidak
mempengaruhi seberapa banyak jarak antar paragraf, meskipun ditekan enter
beberapa kali. Kemudian ukuran window menyebabkan hasil yang berbeda-beda.
Browser akan melakukan pemformatan tampilan sesuai dengan ukuran windownya.

<HTML>
<HEAD>
<TITLE> web-ku yang pertama </TITLE>
</HEAD>
<BODY>
<p>dunia internet adalah dunia yang sangat mengasyikkan. disana
kita dapat melakukan komunikasi sesama teman, dengan jarak jauh.
atau dapat berkirim surat dengan fasilitas email.</p> <p>namun
saat ini, banyak sekali virus-virus yang menempel pada email
Kita, sehingga menyebabkan komputer dirumah menjadi kacau.</p>
</BODY>
</HTML>

Gambar 3.6 Penerapan tag <p>

18
Tag <br>
Adalah perintah untuk memasukkan fungsi enter atau digunakan untuk pindah ke
baris baru tanpa menekan tombol enter. Masih menggunakan contoh script diatas
yang telah dimodifikasi.

<HTML>
<HEAD>
<TITLE> web-ku yang pertama </TITLE>
</HEAD>
<BODY>
<p>dunia internet adalah dunia yang sangat mengasyikkan.<br>
disana kita dapat melakukan komunikasi sesama teman, dengan jarak
jauh.<br> atau dapat berkirim surat dengan fasilitas email.</p>
<p>namun saat ini, banyak sekali virus-virus yang menempel pada
email kita,<br><br><br>sehingga menyebabkan komputer dirumah
menjadi kacau.</p>
</BODY>
</HTML>

Anda perhatikan script diatas, untuk pindah ke baris baru tidak perlu menekan enter.
Terutama pada bagian akhir teks, terdapat tiga buah tag <br> secara berurutan
artinya teks akan di enter sebanyak tiga kali.
Lawan dari <br> adalah <nobr>. Bila digunakan tag <nobr> maka teks yang
panjang tidak secara otomatis pindah baris bawahnya, meskipun baris pertama sudah
terlalu panjang.

Gambar 3.7 Penerapan tag <br>

Tag <dd>
Kepanjangannya definition description. Perintah yang digunakan untuk membuat
teks atau sebuah paragrap masuk ke dalam.
19
<HTML>
<HEAD>
<TITLE> contoh </TITLE>
</HEAD>
<BODY>
<h2><center>www.wartaku.co.id</center></h2>
<p align=left><b>BBM Naik</b></p align>
<dd>
dalam waktu dekat harga bbm akan naik, dan diikuti harga sembako.
dalam waktu yang bersamaan kenaikan masih terus berlangsung akibat
menjelang hari raya.<br>
<dd>
namun pemerintah telah memberikan dana kompensasi bagi rakyat miskin
dengan pendapatan dibawah Rp. 155.000,- per bulan akibat kenaikan
bbm dengan menunjukkan kartu/tanda khusus.
</p align>
</BODY>
</HTML>

Gambar 3.8 Penerapan tag <dd>

Tag <align>
Perintah yang digunakan untuk mengatur teks rata kiri, rata kanan atau rata kiri
kanan.
Tabel 3.1 Format penulisan tag <align>
<p align=right> Untuk mengatur rata kanan
<p align=left> Untuk mengatur rata kiri
<p align=center> Untuk mengatur teks di tengah
<p align=justify> Untuk mengatur teks rata kiri kanan

20
<HTML>
<HEAD>
<TITLE> contoh </TITLE>
</HEAD>
<BODY>
<h2><center>www.wartaku.co.id</center></h2>
<hr>
<p align=left>BBM Naik
<p align=justify>

dalam waktu dekat harga bbm akan naik, dan diikuti harga sembako.
dalam waktu yang bersamaan kenaikan masih terus berlangsung akibat
menjelang hari raya Idul Fitri 1426 H.<br>
namun pemerintah telah memberikan dana kompensasi bagi rakyat miskin
dengan pendapatan dibawah Rp. 155.000,- per bulan akibat kenaikan
bbm dengan menunjukkan kartu/tanda khusus.
</BODY>
</HTML>

Gambar 3.9 Penerapan tag <align>

Tag <hr>
Perintah <hr> untuk membuat garis horisontal secara penuh. Satu perintah
menunjukkan satu garis lurus. Atribut yang menyertai yaitu noshade dan size.

<HTML>
<HEAD>
<TITLE>contoh buat garis</TITLE>

21
</HEAD>
<BODY>
<hr><br>
<hr noshade><br>
<hr size=7 noshade><br>
<hr size=7>
</BODY>
</HTML>

Gambar 3.10 Penerapan tag <hr>

3.5 Pengaturan Teks Computer-Output

Tag <pre>
Perintah yang digunakan untuk menampilkan suatu teks seperti bentuk aslinya. Hal
ini sangat bermanfaat jika anda ingin menampilkan source program dalam browser.

Tag <code>
Digunakan untuk menampilkan kode program dalam mode computer-code. Jika tag
<code> digunakan maka hasil sebuah source akan dicetak seperti kalimat biasa
berbeda dengan <pre>.

Tag <kbd>
Digunakan untuk mendefinisikan teks keyboard. Hasil teks akan dicetak layaknya
sebuah kalimat biasa.
Tag <var>
Digunakan untuk mendefinisikan suatu variabel yang disebutkan dalam source,
hasilnya akan tercetak miring meskipun tertulis dalam tag <pre>.

22
<HTML>
<HEAD>
<TITLE> contoh </TITLE>
</HEAD>
<BODY>
<b>Menggunakan pre :</b>
<pre>
if found()
<var>x=integer;</var>
=messagebox("data sudah ada",0+64,"perhatian")
endif
</pre>
<b>Menggunakan code :</b>
<code>
if found()
=messagebox("data sudah ada",0+64,"perhatian")
endif
</code>
<br><br>
<b>Menggunakan var :</b>
<var>
if found()
=messagebox("data sudah ada",0+64,"perhatian")
endif
</var>
<br><br>
<b>Menggunakan kbd :</b>
<kbd>
if found()
=messagebox("data sudah ada",0+64,"perhatian")
endif
</kbd>
</BODY></HTML>

Gambar 3.11 Penerapan tag <pre>

23
3.6 Pengaturan Kutipan dan Pendefinisian
Tag <address>
Perintah khusus yang digunakan untuk format alamat dalam dokumen HTML.
Biasanya tag <address> digunakan bersamaan dengan tag <br>, agar tampilan
lebih menarik.

Tag <acronym title>

Perintah yang digunakan untuk memunculkan pesan saat suatu keterangan atau
singkatan di sorot dengan mouse.

Tag <abbr title>

Digunakan untuk menyingkat suatu kalimat atau kata. Misalnya kata dkk, dll atau
www. Tag ini berfungsi jika kursor mouse diarahkan ke teks tersebut.

Tag <bdo>
Digunakan untuk mendefinisikan suatu arah teks dalam website dengan tampilan
terbalik. Tag <bdo> artinya Bi-Directional Override. Atribut “rtl” artinya
menampilkan right-to-left, kebalikannya adalah “ltr” left-to-right”.

<BODY>
<HTML>
<HEAD> <TITLE> contoh </TITLE> </HEAD>
<BODY>
Kami menyediakan layanan dalam bentuk :<br>
- <bdo dir="rtl">Instalasi Jaringan Komputer,Membangun
Aplikasi dan Web</bdo><br>
- Maintenance,Instalasi Software,<abbr title="dan lain-
lain">dll</abbr>
<br><br>
<address>
PT. Cahaya Nusaindah<br>
Jl. Wates Km 9.7 Yogyakarta<br>
Telp 0274-388299 Fax. 0274-387297<br>
<acronym title="Silahkan klik disini untuk lihat produk
kami">
www.cahayanusaindah.co.id</acronym>
email: [email protected]
</address>
</BODY>
</HTML>

24
 Gambar 3.12 Hasil dari tag pendefinisian

Tag <blockquote> dan <q>

Digunakan untuk mendefinisikan sebuah kutipan yang panjang. Tag <blockquote>
akan memberikan line break dan margin baru dibawahnya. Sehingga akan tampak
bahwa kalimat tersebut merupakan sebuah definsi atau kutipan. Untuk kutipan
pendek dapat menggunakan tag <q>, karena pendek maka hasil dari tag tersebut
tidak memberikan line break atau margin baru.

<html>
<head>
<title>contoh</title>
</head>
<body>
Menurut John E. Simpson XML yaitu <br>
<blockquote>
eXtensible Markup Language merupakan tool hebat yang menambah
makna dan fungsionalitas pada website tanpa kode, kompiler
atau tool yang rumit.
</blockquote>
Selain XML masih ada beberapa istilah lain yaitu HTML,
XHTML,CSS dan Javascript
<q>
HTML kependekan dari Hiper Text Markup Language. Script ini
merupakan dasar dari aplikasi pembangun WEB.
</q>
Untuk istilah lain akan dijelaskan pada bab tersendiri
</body>
</html>

25
 Gambar 3.13 Hasil dari penggunaakan tag <blockquote> dan <q>

3.7 Latihan
Buatlah sebuah website dengan nama file index.html yang disimpan pada folder
anda. Tema dari website yaitu menceritakan tentang pribadi dan aktifitas anda.
Gunakan tag-tag yang sudah dipelajari dari Bab 1 sampai Bab 3, sehingga tampilan
lebih menarik.

oooO0Oooo

26
 4
LIST
4.1 Tujuan Instruksional
1. Pembaca memahami berbagai bentuk list yang tersedia pada HTML.
2. Pembaca mampu membuat list pada tampilan website.
3. Pembaca mampu menggunakan list sesuai dengan tampilan website.

4.2 Pendahuluan
Dalam website biasanya terdapat tampilan dengan format pilihan. Seperti pekerjaan,
status, menu makanan atau kota tujuan. Agar tampilan pilihan tersebut terlihat
menarik dapat menggunakan fasilitas list. Ada tiga jenis list dalam HTML yaitu :
1. UL (unordered list)
2. OL (ordered list)
3. DL (definition list)

4.3 Unordered List

Jenis <ul> digunakan untuk membuat item list dengan tanda bullet. Unordered list
(UL) sering disebut sebagai bulleted list. Bullet ini bisa diubah dengan menambah
atribut TYPE. Untuk list entri digunakan tag <li>.

<HTML>
<HEAD>
<TITLE> contoh </TITLE>
</HEAD>
<BODY>
<h3>Menu masakan Rumah Makan Pasti Enak :</h3>
<ul type="disc"><b>Menu Makanan :</b>
<li>Sayur Asem</li>
<li>Oseng-oseng Kacang</li>
<li>Semur Ayam</li>
<li>Ayam Bali</li>
</ul>
<ul type="circle"><b>Menu Minuman :</b>
<li>Es Jeruk</li>

27
 <li>Es Teh</li>
<li>Teh Panas</li>
</ul>
<ul type="square"><b>Menu Spesial :</b>
<li>Nasi Goreng Cumi-cumi</li>
<li>Bakmi Jamur Kuping</li>
<li>Bubur Ikan Asin</li>
</ul>
</BODY>
</HTML>

Gambar 4.1 Penerapan tag <ul>

4.4 Ordered List

Jenis <ol> digunakan untuk membuat item list dengan tanda angka arab atau
romawi. Tag <ol> secara default menggunakan angka. Namun untuk keperluan
tertentu dapat diatur berkat atribut type. Jika ingin list dimulai dari nilai tertentu
dapat menggunakan atribut start. Kemudian tabel 4.1 berisi angka yang tersedia
untuk penomoran.

28
 Tabel 4.1 Daftar nilai yang mendukung atribut type
Type Keterangan
I Menggunakan romawi huruf besar
i Menggunakan romawi huruf kecil
a Menggunakan abjad huruf kecil
A Menggunakan abjad huruf besar
1 Default

<HTML>
<HEAD><TITLE> contoh </TITLE></HEAD><BODY>
<h3>Jurusan Ke Timur :</h3>
<ol type="i"><b>Bus PATAS :</b>
<li>Malang</li>
<li>Denpasar</li>
<li>Surabaya</li>
</ol>
<ol type="a"><b>Bus Ekonomi :</b>
<li>Solo</li>
<li>Madiun</li>
<li>Banyuwangi</li>
</ol>
<ol start="3"><b>Bus Pariwisata :</b>
<li>Denpasar</li>
<li>Malang</li>
</ol>
</BODY></HTML>

Gambar 4.2 Penerapan tag <ol>

29
4.5 Definition List
Sedangkan <dl> digunakan untuk membuat item list secara kalimat terdefinisi. Tag
<dl> juga dapat digunakan untuk informasi pilihan dalam bentuk kalimat. Untuk
menggunakannya tag <dl> disertai tag <dt> dan <dd>.

<HTML>
<HEAD><TITLE> contoh </TITLE></HEAD>
<BODY>
<h3>Terdiri dua bagian</h3>
<dl><b>Bagian Pertama :</b>
<dt>Menu Nasi :</dt>
<dd>Nasi Kuning Rasa Ayam Bawang</dd>
<dd>Nasi Goreng dengan Telor Dadar</dd>
<dt>Menu Sayur :</dt>
<dd>Sayur Garang Asem Ayam Kampung</dd>
<dd>Sayur Lodeh Bumbu Rujak Cingur</dd>
</dl>
</BODY></HTML>

Gambar 4.3 Penerapan tag <dl> dan <dt>

4.6 Latihan
Tambahkan fasilitas list pada file index.html yang sudah anda kerjakan pada Bab 3.
Jenis list silahkan ditentukan sendiri.

oooO0Oooo

30
 5
FONT
5.1 Tujuan Instruksional
1. Pembaca mampu membuat berbagai jenis huruf pada HTML.
2. Pembaca mampu menggunakan fasilitas warna pada berbagai jenis huruf.
3. Pembaca mampu menggunakan ukuran huruf yang digunakan dalam HTML.

5.2 Pendahuluan
Agar website terlihat tampil menarik, maka setiap tampilan diatur dengan huruf,
warna dan ukuran tertentu. Tag yang mengatur tampilan huruf yaitu <font>. Atribut
yang menyertai yaitu face, size dan color. Untuk atribut face penggunannya
bersifat case sensitive. Pada HTML versi 4, tag <font> mulai dihilangkan meskipun
masih banyak yang menggunakan. Sebagai gantinya dapat menggunakan style (CSS)
yang hasilnya lebi menarik. CSS akan dibahas pada bab tersendiri dalam buku ini.

5.3 Implementasi Font

Penjelasan dari atribut font, size dan color sebagai berikut:
1. SIZE: adalah ukuran font yang digunakan, bernilai 1 – 7. Nilai 1 merupakan
ukuran terkecil dan 7 merupakan ukuran terbesar.
2. FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang
masing-masing dipisahkan oleh koma.
3. COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau
bisa juga langsung menggunakan nama warna (red misalnya). Untuk nilai
RGB/HEX dapat dilihat pada lampiran buku ini.

<HTML>
<HEAD><TITLE> contoh </TITLE></HEAD>
<BODY>
<font size="5" face="Bookman Old Style">
Selamat Datang Di Acara Kami
</font><br>

31
<font size="3" face="Verdana">
Selamat Datang Di Acara Kami
</font><br>
<font size="6" face="Book Antiqua">
Selamat Datang Di Acara Kami
</font></BODY></HTML>

Gambar 5.1 Penerapan tag <font>

Penggunaan atribut color dapat menyebutkan secara langsung warnanya atau

menggunakan kode. Dalam buku ini penulis menggunakan teks editor EditPlus yang
sudah menyediakan fasilitas warna dalam bentuk kode.

<HTML>
<HEAD><TITLE> contoh </TITLE></HEAD>
<BODY>
<font size="4" color="#009933">
Selamat Datang Di Acara Kami
</font><br>
<font size="5" color="#FF0033">
Selamat Datang Di Acara Kami
</font><br>
<font size="2" color="#FF00CC">
Selamat Datang Di Acara Kami
</font></BODY></HTML>

Gambar 5.2 Penerapan atribut color dengan kode

oooO0Oooo

32
 6
LINK
6.1 Tujuan Instruksional
1. Pembaca dapat mengetahui bermacam-macam jenis link.
2. Pembaca mampu membuat website dengan link relatif.
3. Pembaca mampu membuat website dengan link absolut.
4. Pembaca mampu membuat website dengan link antar dokumen.

6.2 Pendahuluan
Dalam mendisain web setiap website selalu terhubung dengan website lain atau situs
lain sebagai fasilitas tambahan. Dengan fasilitas link maka orang dengan mudah
dapat menuju ke suatu situs tanpa harus keluar dari situs yang aktif. Dokumen
HTML mampu memberikan link dari sebuah teks/gambar menuju ke teks/gambar
lain. Untuk membuat link pada dokumen HTML dengan tag <a>, dan atribut href
digunakan untuk mendefinisikan lokasi letak link yang dituju. Kemudian beberapa
atribut yang dapat digunakan dalam link adalah :

Tabel 6.1 Atribut tag <a href>

onClick membuka link setelah tombol di klik.
onMouseover membuka link hanya dengan menyorot tombol.
onMouseout membuka link hanya dengan menyorot tombol, dan kembali ke
website semula bila mouse dijauhkan dari link.

Beberapa hal yang perlu diperhatikan dalam membuat link dan menjaga kesalahan
penamaan file sebaiknya mengikuti aturan berikut :
 File pertama/file induk simpan dengan nama index.html dan berhuruf kecil.
 File berikutnya dan file gambar simpan dengan huruf kecil.
 Jika nama file lebih dari satu pisahkan dengan garis bawah ( _ ). Contoh :
file_ke_tiga.html

33
6.3 Link Relatif
Link relatif dibuat bila membuat suatu link pada website aktif ke website lain, tidak
perlu menggunakan alamat URL secara lengkap. Untuk file yang letaknya beda
direktori, dapat menuliskan alamat drive dan direktori asal.

<HTML>
<HEAD>
<TITLE>CV. SAKTI</TITLE>
</HEAD>
<BODY>
<center>
<h2>CV. SAKTI</h2>
<h5>JL. Cendrawasih Raya No. 37 Banjarmasin</h5><hr><br>
<a href="hal_1.html">Visi dan Misi Perusahaan</a>
<a href="hal_2.html">Produk Perusahaan</a>
</center>
</BODY></HTML>

Gambar 6.1 Link relatif dalam satu direktori

<HTML>
<HEAD>
<TITLE> contoh </TITLE>
</HEAD>
<BODY>
<center><font face=Tahoma size=5>cv. Cahaya Nusaindah
</font></center>
<hr>
<a href="file:///D:/btc/home.html">Home</a><br>
<a href="file:///d:/btc/obyek.html">Lihat Produk</a>
</BODY>
</HTML>

34
 Gambar 6.2 Link relatif lokasi file berbeda direktori

6.4 Link Absolut

Link absolut dibuat bila akan membuat link ke website lain atau ke sebuah situs Pada
link ini anda harus menuliskan URL secara lengkap.

<HTML>
<HEAD><TITLE> contoh </TITLE></HEAD>
<BODY>
<center><font face=Tahoma size=5>cv. Cahaya Nusaindah
</font></center><hr>
<a href="file:///D:/btc/home.html">Home</a>
<a href="file:///d:/btc/obyek.html">Lihat Produk</a>
<hr>Anda ingin ke :<br>
<a href="www.yahoo.com">Yahoo...!</a><br>
<a href="www.Google.co.id">Google</a><br>
<a href="www.ilmukomputer.com">Komputer</a>
</BODY></HTML>

Gambar 6.3 Hasil link absolut

35
6.5 Link Antar Dokumen
Link antar dokumen dibuat bila digunakan untuk dokumen yang panjang, sehingga
bila dilihat pada browser user harus menggulung layar. Caranya sama dengan link
relatif dan link absolut, hanya nama dokumen dalam link diganti dengan nama
bagian dokumen ditambah tanda #. Sebuah halaman utama sebagai induk diberi
nama index.html. dan halaman pertama diberi nama hal_1.html. halaman kedua
diberi nama hal_2.html.

Setiap teks adalah link, ditunjukkan dengan teks bergaris bawah dan bergambar
tangan ketika kursor mouse menunjuk teks tersebut. Atau bila kursor mouse
menunjuk sebuah gambar kemudian bergambar tangan maka gambar tersebut
tergolong link.

<HTML>
<HEAD>
<TITLE> Contoh Link </TITLE>
</HEAD>
<BODY>
<a name="top">
<a href="#b2">
Ke BAB II
</a>
</a><p>
<b>BAB I</b>
<h5>
Teknologi informasi saat ini tidak dapat lepas dari internet.
jaringan komputer sangat memegang peranan penting dalam
internet.</h5>
<a name="b2">
<b>BAB II</b>
</a>
<h5>
Bab II menjelaskan tentang bagaimana cara kerja pengiriman
email
melalui internet ?.</h5>
<b>BAB III</b>
<h5>
Dapat disimpulkan bahwa, teknologi informasi saat ini sangat
tergantung dari keberadaan jaringan komputer yang terkoneksi
ke internet.</h5>
<a href="#top">Ke BAB I</a>
</BODY>
</HTML>

36
 Gambar 6.4 Link antar dokumen dalam satu website

6.6 Implementasi Link - CSS

Program berikut adalah contoh suatu link yang tidak digaris bawahi dengan
memanfaatkan CSS.

<HTML>
<HEAD><TITLE>CV. SAKTI</TITLE></HEAD>
<BODY>
<center>
<h2>CV. SAKTI</h2>
<h5>JL. Cendrawasih Raya No. 37 Banjarmasin</h5><hr><br>
<a href="http://www.skt.co.id" style="text-decoration:none">
Tentang Perusahaan</a><br>
<a href="hal_1.html" style="text-decoration:none">
Visi dan Misi Perusahaan</a><br>
<a href="hal_2.html" style="text-decoration:none">
Produk Perusahaan</a><br>
</BODY></HTML>

Gambar 6.5 Tampilan link tanpa garis bawah

37
Link juga dapat dibuat dengan tombol button. Caranya memanfaatkan atribut link
yang telah dijelaskan sebelumnya.

<HTML>
<HEAD>
<TITLE>CV. SAKTI</TITLE>
</HEAD>
<BODY>
<center>
<h2>CV. SAKTI</h2>
<h5>JL. Cendrawasih Raya No. 37 Banjarmasin</h5><hr><br>
<input type="button" value="Tentang Perusahaan"
onClick="parent.location='http://www.sakti.co.id'">
<input type="button" value="Visi dan Misi Perusahaan"
onClick="parent.location='hal_1.html'">
<input type="button" value="Produk Perusahaan"
onClick="parent.location='hal_2.html'">
</BODY>
</HTML>

Gambar 6.6 Tampilan link dengan tombol

Dari program diatas beberapa atribut HTML bersifat case sensitive. Sepert
onClick, window.open dan parent.location. Sedangkan contoh program
berikut menjelaskan link dengan menggunakan atribut onMouseover. Dengan
onmouseover maka link tidak perlu di klik, tetapi cukup dengan menyorotkan kursor
mouse.

6.7 Memanfaatkan Mailto

Proses link juga dapat untuk melakukan suatu pesan mail. Dengan catatan bahwa
web client harus dalam kondisi terpasang. Link ini memanfaatkan atribut mailto.

38
<HTML>
<HEAD>
<TITLE>CV. SAKTI</TITLE>
</HEAD>
<BODY>
<center>
<h2>CV. SAKTI</h2>
<h5>JL. Cendrawasih Raya No. 37 Banjarmasin</h5><hr><br>
<a href=" " target-main
onmouseover="window.open('hal_1.html')">Visi dan Misi
Perusahaan</a>
<a href=" " target-main
onmouseover="window.open('hal_2.html')">Produk
Perusahaan</a><br>
<a href="mailto:[email protected]? subject=Mohon Kirim
Price List">Kirim email</a>
</BODY>
</HTML>

Gambar 6.7 Tampilan link ke email

6.8 Latihan
Modifikasilah website anda yang bernama index.html, sehingga mempunyai fasiltias
link ke website lain. Tambahkan pula fasilitas link ke beberapa situs terkenal, seperti
yahoo, google atau hotmail. Untuk menguji link yang ada, anda perlu membuat
beberapa file website sesuai dengan tema yang sudah ditentukan.

oooO0Oooo

39
 7
IMAGE
7.1 Tujuan Instruksional
1. Pembaca dapat mengetahui tipe-tipe file image yang dapat diletakkan pad
HTML.
2. Pembaca mampu menggunakan perintah <img src>.
3. Pembaca dapat menggunakan atribut image.
4. Pembaca mampu mengatur tataletak image dalam website.

7.2 Pendahuluan
Perintah untuk menggabungkan gambar dengan website adalah img src. Browser
dapat menampilkan gambar yang disajikan dalam format .jpg, .gif, .bmp dan lainnya.
Setiap gambar membutuhkan waktu tambahan untuk proses download atau saat
browsing, sehingga dapat memperlambat akses. Untuk itu berhati-hatilah dalam
memilih gambar. Untuk hasil yang lebih baik dapat menggunakan aplikasi Flash,
Photoshop atau Image 3D supaya gambar bersifat dinamis.

7.3 Menggunakan Image

Format perintah img src adalah <img src=”nama_file_gambar”>. Penulisan
perintah gambar bergerak dan gambar diam sama saja. Hal yang perlu diperhatikan
adalah semakin besar ukuran file gambar maka proses download juga semakin lama
atau saat website diakses membutuhkan waktu lama.

Atribut yang menyertai perintah img src adalah alt, align=(center, left,
right, top, bottom), hspave, vspace, border, width dan height.
Beberapa contoh program berikut, menggunakan gambar pada lokasi d:\ikon\.

<HTML>
<HEAD> <TITLE> Contoh Image </TITLE> </HEAD>

40
<BODY>
<img src="d:\ikon\animals.ico">
</BODY>
</HTML>

Gambar 7.1 Hasil penggunaan tag <img src>

7.4 Mengatur Image

Contoh program berikut ini link gambar dengan mengatur lebar dan tinggi gambar
dengan atribut “widht”, “height” dan “border”. Untuk atribut border, nilai
diisi angka integer misal 1, 2 atau 3. Makin besar angkanya border bertambah tebal.

<HTML>
<HEAD> <TITLE> Contoh Image </TITLE> </HEAD>
<BODY>
<b>INI GAMBAR KUCING LUCU</b>
<img border="8" src="d:\ikon\kucing.jpg" width="300"
height="230">
</BODY>
</HTML>

Gambar 7.2 Hasil penggunaan atribut border, width dan height

41
7.5 Tataletak Image
Berikut ini contoh program yang menggunakan atribut “align (left, center,
right, bottom dan top)”. Selain itu di bawah ini menunjukkan bagaimana
suatu teks alternatif untuk image dengan menggunakan atribut “alt”. Dimana
memberitahu bacaan apa yang dimaksud pada website jika browser tidak dapat
menampilkan gambar.

<HTML>
<HEAD><TITLE> Contoh Image </TITLE></HEAD>
<BODY>
<center><b>INI GAMBAR KUCING LUCU</b></center><br>
<img src="d:\ikon\kuc.jpg" alt="kembali ke awal" align="left"
width="130" height="100">kucing ini dua bersaudara, mereka
sangat lucu tingkahnya. setiap hari kegiatannya selalu
bermain, kemana-manan berdua.<br>
<img src="d:\ikon\kuc.jpg" alt="maaf gambar belum ada"
align="right" width="130" height="100">anak kucing tersebut
terlihat sangat gemuk, karena makannya banyak setiap hari
selalu minum susu. sangat dimanjakan oleh yang punya.
</BODY></HTML>

Gambar 7.3 Hasil penggunaan atribut alt

7.6 Image Sebagai Link

Image juga dapat dimanfaatkan sebagai suatu link. Berikut contoh programnya.

42
<HTML>
<HEAD><TITLE> Contoh Image </TITLE></HEAD>
<BODY>
silahkan klik di sini, untuk kembali
<a href="hal2.html">
<img border="0" src="d:\ikon\arw08lt.ico" width="30"
height="20">
</a>
</BODY></HTML>

Gambar 7.4 Penggunaan image sebagai link

7.7 Image Map

Image map adalah gambar/image yang mempunyai hyperlink-hyperlink di dalam
gambar tersebut, jadi saat kita mengklik gambar,kita akan diarahkan ke alamat URL
yang lain,tergantung dari bagian gambar yang kita klik. Metode ImageMap
mengharuskan pemrogram web untuk mendefinisikan daerah-daerah dalam suatu
gambar (image) yang mempunyai link. Derah yang didefinisikan berupa bentuk
daerah dan koordinat pembatasnya.

Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian

koordinat (0,0) dimulai dari pojok kiri atas gambar, dan maksimum koordinat adalah
pojok kanan bawah gambar (lebar_maks, tinggi_maks).

Definisi bagian atau daerah (map) dalam gambar dinyatakan dalam bentuk obyek :
1. Titik (pint)
2. Poligon
3. Persegi panjang (rect : rectangle)
4. Lingkaran (circle)

Informasi dan pemrosesan link yang didefinisikan dengan map ini dibedakan
menjadi 2 macam,yaitu :

43
1. Server side
2. Client side

Server Side Image Map:

Definisi map disimpan dalam server,sehingga jika suatu daerah dalam gambar yang
mempunyai image map diklik maka browser mengirimkan koordinat daerah gambar
yang diklik. Oleh server koordinat tadi dicocokkan dengan definisi daerah yang ada.
Jika koordinat yang diklik tersebut berada pada definisi daerah yang mempunyai
link,maka secara otomatis server akan memberikan web page baru sesuai definisi
link.

Penerapan pada server side image map :

1. definisi peta dari gambar disimpan dalam file teks dengan ekstensi MAP.
2. berikan link berupa URL (dengan nama file berekstensi map),mengapit tag img.
3. tambahkan dalam tag Img atribut ISMAP.atribut ISMAP berfungsi untuk
mengindikasikan bahwa gambar adalah clickable image map.

Format definisi server side imagemap ada dua macam :

 format CERN
 format NCSA

format ini mempunyai isi yang sama,akan tetapi berbeda pada peletakan
informasinya.
Contoh format NCSA :
#
circle xx.html 52,38,52,17

Contoh format CERN :

#
circle (56,58) xx.html

Berikut ini adalah contoh isi dokumen HTML yang menggunakan server side image
map :
<a href =”http://www.situsku.com/cgi-
bin/imagemap/bookshelf”>
<img src=”bookshelf.gif” ISMAP> </a>

44
Client Side Image Map:
Definisi map disertakan ke dalam dokumen web. Surfer dapat melihat secara
langsung link/webpage yang akan disajikan pada saat pointer mouse berada diatas
gambar (pada status bar dari browser).

Sintaks :
<img src=”nama gambar sebagai map” width=”lebar tampilan
gambar” height=”tinggi tampilan gambar” usemap=”#nama_map”
border=0>
<map name=”nama_map”>
<area shape=”jenis map” coords=”koordinat map” href=”file
yang dipanggil”>
</map>

Pada atribut Shape di definisikan nama bentuk daerah:

 RECT untuk persegi panjang,dengan coords berupa koordinat pojok kiri atas dan
pojok kanan bawah.
 POINT untuk daerah berupa titik,dengan coords berupa x,y.
 POLY untuk polygon dengan coords adalah x,y untuk setiap titik (verteks) dari
setiap garis.
 CIRCLE untuk daerah berupa lingkaran dengan coords berupa x,y untuk pojok
kiri atas dan x,y untuk pojok kanan bawah,bentuk lingkaran akan disesuaikan
dengan definisi koordinatnya,karena bisa jadi koordinat yang ditampilkan setelah
diinterpolasi menunjukkan suatu bentuk elips.

Penerapan pada client side image map :

1. berikan definisi map seperti diatas
2. sisipkan pada tag Img sebuah atribut Usemap
3. isikan value untuk atribut usemap =”#namapeta”

Value pada atribut usemap diberi tanda # didepan untuk mendefinisikan bahwa
definisi peta berada didalam dokumen html yang bersangkutan.

Software Image Map

Software untuk image map dipergunakan untuk mempermudah pembuatan peta link.
Salah satu contoh software imagemap freeware,adalah MapEdit.

45
Pada saat mendefinisikan map,maka setiap obyek daerah dalam image tidak boleh
beririsan/overlapping koordinatnya. Maka harus dipersiapkan software
pendukungnya,yakni software untuk membuat gambar/image dan untuk membuat
image map. Software minimum yang fungsional yang dibutuhkan adalah :
 MSPaint
 MapEdit
 WebImage

Contoh penggunaan image map:

Link 2 Link 1

Link 4 Link 3

Gambar 7 .5: Contoh Image Map

Script dari image map diatas adalah :

<html>
<head> <title>Image Map</title> </head>
<body>
<p align="center">
<map name="Peta">
<area href="profile.html" shape="rect" coords="114,4,228,118">
<area href="fasilitas.html" shape="rect" coords="115,119,229,
234">
<area href="Prodi.html" shape="rect" coords="4,2,114,118">
<area href="alumni" shape="rect" coords="4,115,114,232"></map>
<img border="0" src="logo.jpg" width="230" height="235"
usemap="#peta"></p>
<p align="center"><b>Selamat Datang</b></p>
</body>
</html>

oooO0Oooo

46
 8
TABEL
8.1 Tujuan Instruksional
1. Pembaca mampu membuat tabel pada HTML.
2. Pembaca mampu menggunakan tabel sebagai penampung informasi.
3. Pembaca mampu memanfaatkan tabel dalam merapikan tampilan website.
4. Pembaca dapat membuat tabel dengan berbagai format.

8.2 Pendahuluan
Tabel digunakan untuk menyajikan informasi yang terdiri dari baris dan kolom.
Dengan script HTML anda dapat membuat tabel yang bersifat statis, informasi yang
tampil berasal dari data yang ditulis dalam script HTML. Dalam disain web tabel
juga dapat memperindah dan merapikan tampilan.

8.3 Elemen Pembentuk Tabel

Elemen-elemen pembentuk tabel dapat dilihat pada tabel 8.1

Tabel 8.1 Tag pembentuk tabel

Format Elemen Deskripsi
<table> ….. </table> Tag pembentuk tabel. jika border disertakan, maka
tabel akan tampil disertai border. Nilai border 0 – 30.
<th> ….. </th> Pembentuk sel header tabel.
<caption> …..</caption> Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> ….. </tr> Penjelaskan baris tabel dalam tabel. atribut yang
dipakai : align(left, center dan right) atau valign(top,
middle dan bottom).
<td> ….. </td> Pembentuk sel data dalam tabel.
<colgroup> Mendefinisikan kelompok kolom tabel
<col> Mendefinisikan nilai atribut untuk satu atau lebih
kolom dalam tabel.
47
 <thead> Mendefinisikan suatu header tabel yang tidak akan di
scroll.
<tbody> Mendefinisikan suatu body tabel yang menggulung
dalam header dan footer tabel.
<tfoot> Mendefinisikan suatu footer tabel yang tidak akan di
scroll.

8.4 Atribut Pembentuk Tabel

Atribut yang menyertai pembentuk elemen tabel cukup banya. Atribut ini gunanya
untuk memperindah tampilan tabel pada website.

Tabel 8.2 Daftar atribut pembentuk tabel

Format Deskripsi
Summary=string String (struktur tabel)
Width=length Lebar tabel
Border=pixels Lebar border nilai 0 - 30
Frame=[void|above|below|hsides Bagian luar border
|lhs|rhs|vsides|box|border]
Rules=[none|groups|rows|cols|all] Bagian dalam border
Cellspacing=length Jarak spasi antar sel
Cellpadding=length Jarak spasi dalam sel
Align=[left|center|right] Perataan tabel
Bgcolor=color Warna baackground tabel
Valign=[top|middle|bottom] Mendefinisikan alignment vertikal
dalam sel
Nowrap Menonaktifkan wrapping dalam
sebuah sel

8.5 Membuat Tabel

Berikut contoh sederhana cara membuat tabel pada script HTML dengan data satu
baris. Jika ingin datanya banyak maka tinggal menuliskan pada baris <tr> dan
<td> sejumlah yang diinginkan. Untuk bingkai menggunakan atribut border,
48
semakin besar nilai yang ditulis maka border tambah tebal. Sebuah tabel dapat diberi
judul dengan menambah perintah <caption>.

<HTML>
<HEAD><TITLE> Contoh Membuat Tabel </TITLE></HEAD>
<BODY>
<caption><b>DAFTAR BIODATA PEGAWAI</b></caption>
<table border="10">
<tr>
<th>Nama Lengkap</th>
<th>Alamat Rumah</th>
<th>Kota</th>
<th>Pekerjaan</th>
</tr>
<tr>
<td>Sujayadi</td>
<td>Jl. Kalimantan Timur 34</td>
<td>Balikpapan</td>
<td>Wiraswasta</td>
</tr>
<tr>
<td>Handayani</td>
<td>Jl. Cendrawasih Raya 4</td>
<td>Balikpapan</td>
<td>PNS</td>
</tr>
</table>
</BODY></HTML>

Gambar 8.1 Tabel dengan judul dan bingkai

8.6 Baris dan Kolom Pada Tabel

Colspan dan rowspan adalah atribut yang berfungsi untuk menggabungkan
beberapa baris sel atau kolom sel. Semacam mergesel dalam Ms. Exel. Nilai yang
ditulis dalam tanda kutip <colspan> menunjukkan jumlah sel yang di gabung.

49
<HTML>
<HEAD><TITLE> contoh </TITLE></HEAD>
<BODY>
<caption><b><center>DAFTAR
BIODATA PEGAWAI</center></b></caption>
<table border="2">
<tr>
<th>Nama Lengkap</th>
<th colspan=2>Alamat</th>
<th>Pekerjaan</th>
</tr>
<td>Sujayadi</td>
<td>Kantor : Jl. Kalimantan Timur 34</td>
<td>Rumah : Jl. Citandui No. 2</td>
<td>Wiraswasta</td>
</tr>
<tr>
<td>Handayani</td>
<td>Kantor : Jl. Kalimantan Timur 34</td>
<td>Rumah : Jl. Besuki Blok D No. 9</td>
<td>Wiraswasta</td>
</tr>
</table>
</BODY></HTML>

Gambar 8.2 Pengaturan kolom di tabel

<HTML>
<HEAD><TITLE> contoh </TITLE></HEAD>
<BODY>
<caption><b><center>
DAFTAR BIODATA PEGAWAI
</center></b></caption>
<table border="2">
<tr>
<th>Nama Lengkap</th>
<td>Sujayadi</td>
</tr>
<tr>
<th rowspan=2>Alamat</th>
<td>Kantor : Jl. Kalimantan Timur 34</td>
</tr>
<tr>
<td>Rumah : Jl. Citandui No. 2</td>
</tr>
<tr>
50
 <th>Nama Lengkap</th>
<td>Handayani</td>
</tr>
<tr>
<th rowspan=2>Alamat</th>
<td>Kantor : Jl. Kalimantan Timur 34</td>
</tr>
<tr>
<td>Rumah : Jl. Besuki Blok D No. 9</td>
</tr>
</table>
</BODY></HTML>

Gambar 8.3 Pengaturan baris di tabel

8.7 Penggunaan Jarak Sel pada Tabel

Berikut ini contoh program yang menjelaskan penggunaan cellspacing dan
cellpadding pada tabel. Nilai dalam tanda kutip menunjukkan besar kecil jarak,
yang akan mempengaruhi tampilan.

<HTML>
<HEAD><TITLE> contoh </TITLE></HEAD>
<BODY>
<caption><b><center>DAFTAR BIODATA
PEGAWAI</center></b></caption>
<table border="2" cellspacing=5 cellpadding=5>
<tr>
<th>Nama Lengkap</th>
<th colspan=2>Alamat</th>
</tr>
<tr>
<td>Sujayadi</td>
<td>Kantor : Jl. Kalimantan Timur 34</td>
<td>Rumah : Jl. Citandui No. 2</td>
</tr>
51
 <tr>
<td>Handayani</td>
<td>Kantor : Jl. Kalimantan Timur 34</td>
<td>Rumah : Jl. Besuki Blok D No. 9</td>
</tr>
</table>
</BODY></HTML>

Gambar 8.4 Hasil cellspacing dan cellpadding

8.8 Mengatur Isi Sel

Contoh program berikut ini menjelaskan tentang pengaturan teks dalam sel dengan
atribut align serta penggunaan atribut width. Jika atribut align tidak disebutkan
maka isi sel akan ditampilkan rata kiri.

<HTML>
<HEAD><TITLE> Contoh Membuat Tabel </TITLE></HEAD>
<BODY>
<caption><b>DAFTAR TARIF BUS AKAP</b></caption>
<table width="450" border="3">
<tr>
<th>Nama Bus</th>
<th>Trayek Perjalanan</th>
<th>Tarif Terjauh</th>
</tr>
<tr>
<td>Rosalia Indah</td>
<td align=center>Jogjakarta-Semarang-Cirebon</td>
<td align=right>Rp. 285.000</td>
</tr>
<tr>
<td>Antar Lintas Sumatra</td>
<td align=center>Jogjakarta-Merak-Lampung</td>
<td align=right>Rp. 820.000</td>
</tr>
<tr>
<td>Safari Dharma Raya</td>
<td align=center>Jogjakarta-Ketapang-Kuta</td>
<td align=right>Rp. 480.000</td>

52
 </tr>
</table>
</BODY></HTML>

Gambar 8.5 Tabel dengan atribut align dan width

8.9 Penggunaan Frame Pada Tabel

Border pada tabel dapat diatur sedemikian rupa dengan cara menyertakan atribut
frame dimana mempunyai nilai tertentu. Lihat kembali tabel 8.2. Di bawah ini
contoh program dengan menggunakan frame, dimodifikasi dari program
sebelumnya.

<HTML>
<HEAD><TITLE> Contoh Membuat Tabel </TITLE></HEAD>
<BODY>
<caption><b>DAFTAR TARIF BUS AKAP</b></caption>
<table frame=hsides width="450" border="5">
<tr>
<th>Nama Bus</th>
<th>Trayek Perjalanan</th>
<th>Tarif Terjauh</th>
</tr>
<tr>
<td>Rosalia Indah</td>
<td align=center>Jogjakarta-Semarang-Cirebon</td>
<td align=right>Rp. 285.000</td>
</tr>
<tr>
<td>Antar Lintas Sumatra</td>
<td align=center>Jogjakarta-Merak-Lampung</td>
<td align=right>Rp. 820.000</td>
</tr>
<tr>
<td>Safari Dharma Raya</td>
<td align=center>Jogjakarta-Ketapang-Kuta</td>
<td align=right>Rp. 480.000</td>
</tr>
53
</table>
</BODY></HTML>

Gambar 8.6 Tabel dengan atribut hsides

<caption><b>DAFTAR TARIF BUS AKAP</b></caption>

<table frame=vsides width="450" border="5">
<tr>
<th>Nama Bus</th>
<th>Trayek Perjalanan</th>

Gambar 8.7 Tabel dengan atribut vsides

8.10 Latihan
1. Modifikasilah file index.html yang sudah anda buat dengan menambahkan
fasilitas link dengan tema bebas. Misal : Link ke website lain, link antar dokumen
atau link relatif.
2. Lengkapi pula dengan informasi yang bisaa tampil dalam bentuk tabel
menggunakan elemen serta atribut yang sudah dipelajari pada bab ini.

oooO0Oooo

54
 9
FRAME
9.1 Tujuan Instruksional
1. Pembaca dapat membuat weobsite yang terbagi menjadi beberapa bagian.
2. Pembaca mampu menggunakan tag frame sebagai pembentuk website.
3. Pembaca dapat menggunakan atribut-atribut yang terdapat pada tag frame.
4. Pembaca dapat membuat website utama dengan tag frame.

9.2 Pendahuluan
Frame adalah perintah yang digunakan untuk membagi tampilan dalam beberapa
jendela. Pada umumnya sebuah website terdiri dari beberapa bagian frame.
Tujuannya adalah untuk mempermudah penyajian informasi atau memperindah
website. Fasilitas ini hanya dapat dijalankan pada browser IE 3.0 ke atas atau
Netscape 2.0, namun saat ini telah banyak browser versi baru dengan kemampuan
lebih. Seperti Mozilla, IE, Opera dan Nescape.

9.3 Atribut Frame

Perintah untuk membuat frame adalah frameset, frame dan iframe.
Frameset digunakan berpasangan dengan frame, atribut yang digunakan :

Tabel 9.1 Atribut pembentuk frameset

Atribut Penjelasan
rows Panjang baris dalam pixel. Nilai integer.
cols Panjang kolom dalam pixel. Nilai integer.
onLoad Semua frame sudah selesai di load. Nilai string.
onUnload Semua frame sudah dihapus. Nilai string.

Frame juga digunakan untuk melakukan link gambar, halaman/URL, mengatur

margin, menggulung frame. Atribut yang digunakan :

55
 Tabel 9.2 Atribut frame
Atribut Penjelasan
name Nama frame, bertipe string
src Isi frame
longdesc Uraian dari frame
frameborder Border frame, bernilai 1 atau 0
marginwidth Untuk enentukan jarak antara batas kiri atau batas kanan
frame dengan isi frame.
marginheight Untuk menentukan jarak antara batas atas atau batas bawah
frame dengan isi frame.
noresize Frame tidak dapat diperbesar
scrolling Dapat menggulung frame, nilainya yes atau no
Bordercolor Warna yang didefinisikan oleh tag yang lebih dalam
menang atas warna yang didefinisikan oleh tag yang luar.

Format penulisan frame seperti dibawah. Atribut name wajib disertakan jika frame
tersebut dijadikan sebagai tempat untuk menampilkan url dari suatu link.

<frameset border=# {rows|cols}={#,[#[,..]]}>

<frame src="url" name="nama_frame">
</frameset>

9.4 Target Pada Frame

Frame predefined digunakan sebagai target menampilkan suatu link. Nama frame
predefined dapat dilihat pada tabel 9.3.

Tabel 9.3 Daftar nama target predefined

Nama Keterangan
_self Digunakan jika target frame merupakan tempat frame tempat
link berada.
_top Digunakan jika target frame adalah windows tempat frame
berada.
_parent Digunakan jika target frame adalah setingkat diatas frame
link berada.

56
 _blank Digunakan untuk membuka windows baru.

9.5 Penggunaan Frame

Iframe digunakan untuk membuat frame window jadi mengambang, jika dilakukan
scroll frame turut bergerak. Perintah iframe harus ditulis jika dalam website terdiri
dari banyak frame yang mengambang.

<HTML>
<head>
<title> Contoh Frame </title>
</head>
<frameset cols="30%,70%">
<frame src="d:\buku_web\contoh2.html">
<frame src="d:\buku_web\contoh4.html">
</frameset>
</HTML>

Gambar 9.1 Frame dua kolom

<HTML>
<head>
<title> Contoh Frame </title>
</head>
<frameset rows="30%,70%">
<frame src="d:\buku_web\contoh2.html">
<frame src="d:\buku_web\contoh4.html">
</frameset>
</HTML>

57
 Gambar 9.2 Frame dua baris

Atribut cols dan rows berisi nilai interger dengan satuan %. Kedua atribut juga
dapat digabung, dan hasilnya lebih luwes dan menarik. Berikut contohnya :

<HTML>
<head>
<title> Contoh Frame </title>
</head>
<frameset rows="30%,70%">
<frame src="d:\buku_web\contoh2.html">
<frameset cols="50%,50%">
<frame src="d:\buku_web\contoh4.html">
<frame src="d:\buku_web\link_dok.html">
</frameset>
</frameset>
</HTML>

Gambar 9.3 Frame dengan tiga bagian

9.6 Implementasi Iframe

Tag iframe memungkinkan sebuah website yang mengambang, seperti textbox.
Jika user melakukan penggulungan maka frame juga bergerak. Atribut name wajib
ditulis jika dalam satu website berisi lebih dari satu frame.
58
<HTML>
<head>
<title> Contoh Frame </title>
</head>
<body>
<iframe src="d:\buku_web\contoh2.html" width=300 height=75>
</iframe>
<br>ini gambar disk drive
<img src="d:\ikon\35floppy.ico">
</body>
</HTML>

Gambar 9.4 Frame mengambang

9.7 Latihan
Buat dua atau tiga website baru dengan tema bebas. Dari file index.html tambahkan
fasilitas frame untuk melakukan navigasi ke file-file website yang sudah anda buat
tadi. Kemudian amati hasilnya.

oooO0Oooo

59
 10
FORM DAN INPUT
10.1 Tujuan Instruksional
1. Pembaca mengetahui elemen input pada HTML.
2. Pembaca dapat menggunakan elemen input dan atribut sesuai jenis datanya.
3. Pembaca mampu mendisain web dengan kemampuan input data.

10.2 Pendahuluan
Adalah suatu lembar tampilan (form) yang dapat diisi data dengan memanfaatkan
input yang tersedia pada HTML. Fungsi dari lembar tampilan (form) digunakan
untuk melakukan sesuatu yang diinputkan oleh user. Misal memperolah data user,
mendaftar pada service yang tersedia, melakukan transaksi online atau memperoleh
feedback dari user lain.

Perintah form biasanya selalu digunakan bersamaan dengan input. Sedangkan

input sendiri adalah perintah yang digunakan untuk mengisi masukan dari user.
Elemen pada input yaitu:
1. Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.
2. Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat
dilakukan.
3. Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
4. List, elemen pilihan dalam bentuk daftar.
5. Button, elemen berupa tombol untuk melakukan suatu proses.
6. Submit, elemen tombol yang digunakan untuk memanggil url.
7. Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.
8. Image, digunakan sebagai pengganti button, berupa gambar yang dapat
melakukan proses.
9. Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.
10. File, elemen button yang dapat memanggil file atau gambar dari storage.

60
11. Password, elemen berupa teks yang khusus digunakan untuk mengisi password.

10.3 Form dan Method

Setiap website biasanya mengandung minimal sebuah form. Dan setiap form dapat
terdiri dari beberapa form. Namun hanya satu form saja akan dikirim ke server.
Format dari tag form yaitu:

<form action=”_url_” method=”get|post” enctype=””>

…..
</form>

Atribut action digunakan untuk menspesifikasikan url yang akan digunakan

sebagai pemroses field lembar tampilan (form). URL adalah lokasi dokumen yang
akan melakukan proses terhadap elemen form. Method adalah atribut yang
digunakan untuk menentukan bagaimana data dari form dikirim ke server. Jika GET
dipilih maka data akan dikirim dengan menggunakan query string pada URL. Bila
POST maka data akan dikirim ke server sebagai block data ke script.

Tabel 10.1 Daftar atribut form

Atribut Keterangan
action Penanganan form
method [get | post] metode untuk submit form
enctype Nilai string, tipe isi submit form
target Nilai string, target pada frame
onSubmit Nilai string, form yang telah di submit
onReset Nilai string, form yang telah di reset
Name Memberi nama form

10.4 Atribut Input

Setiap elemen input mempunyai atribut. Atribut berguna pada waktu sebuah elemen
melakukan aksinya. Atribut yang menyertai perintah input tampak pada tabel 10.2.

Tabel 10.2 Daftar atribut yang menyertai elemen input

Atribut Keterangan
type Menampung nilai/nama elemen.
61
 name Nilai string, kunci dalam form submit
value Nilai string, dari input
checked Nilai dari elemen tombol radio atau checkbox
size Nilai integer, menentukan panjang elemen text
maxlength Nilai integer, menentukan panjang teks.
src Lokasi URLl atau gambar
alt Nilei string, keterangan untuk gambar
readonly Mencegah perubahan
accept Nilai string, media untuk upload file
acecckey Nilai string, untuk tombol shortcut
tabindex Nilai integer, menentukan posisi tab
onfocus Nilai string, elemen yang menerima kursor
onblur Nilai string, elemen yang ditinggalkan kursor
onselect Nilai string, teks yang dipilih
onchange Nilai string, nilai yang akan diganti
onclick Nilai string, melakukan proses jika tombol ditekan

10.5 Atribut Select-Option

Select adalah perintah yang digunakan untuk membuat daftar pilihan bersama
dengan perintah options. Misal pilihan jenis pekerjaan, status pribadi.

Tabel 10.3 Atribut pada perintah select

Atribut Keterangan
name Nilai string, kunci dalam form submit
multiple Untuk membuat pilihan berganda
size Nilai integer, menentukan jumlah pilihan yang terlihat
disable Untuk menyembunyikan elemen
tabindex Nilai integer, menentukan posisi tab
onfocus Nilai string, elemen text yang menerima kursor
onblur Nilai string, elemen text yang ditinggalkan kursor
onchange Nilai string, nilai yang akan diganti

Tabel 10.4 Atribut pada perintah option

Atribut Keterangan
value Nilai string, nilai pilihan

62
 selected Pilihan berupa initial
disabled Menyembunyikan pilihan
label Nilai string, pilihan label

10.6 Implementasi Form dan Input

Berikut ini contoh sebuah web pendaftaran calon mahasiswa baru secara sederhana
dengan script HTML yang masih dapat dimodifikasi agar menjadi menarik.

<HTML>
<head><title> Contoh WEB dengan Program HTML </title></head>
<form name=”daftar” method=post action=”dafmhs.php>
<h2><center>SELAMAT DATANG CALON MAHASISWA BARU</CENTER></H2>
<fieldset>
<legend><b>Biodata Calon MHS</b></legend>
<table>
<tr>
<td><label for=noreg>No. Pendaftaran :</label></td>
<td><input type=text name=noreg maxlength=5 size=6></td>
</tr>
<tr>
<td><label for=nm>Nama Calon MHS :</label></td>
<td><input type=text name=nm maxlength=45 size=47></td>
</tr>
<tr>
<td><label for=alm>Alamat Asal :</label></td>
<td><textarea name=alm rows=5 cols=30></textarea></td>
</tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><b>Data Pendaftaran</b></legend>
<table>
<tr>
<td><label for=jur1>Jurusan Pilihan :</label></td>
<td><select name="pilih">
<option value="si">Sistem Informasi
<option value="ti">Teknik Informatika
<option value="ka">Komputerisasi Akuntansi
<option value="mi">Manajemen Informatika
<option value="tk">Teknik Komputer
</select>
</td>
</tr>
<tr>
<td><label for=alm>Jenjang Pendidikan :</label></td>
<td><input type="radio" checked name="jp">S1
<input type="radio" name="jp">D3
</td>
</tr>
63
 <tr>
<td><label for=bi>Biaya Pendaftaran :</label></td>
<td><input type="text" name=bi maxlength=7 size=8></td>
</tr>
<tr>
<td><label for=alm> Program Pilihan :</label></td>
<td><input type="radio" checked name="prog">Reguler
<input type="radio" name="prog">Ekstensi
</td>
</tr>
</table>
</fieldset>
<br>
<center>
<input type="submit" value="Kirim">
<input type="reset" value="Hapus Formulir">
</center>
</form></HTML>

Gambar 10.1 Hasil elemen form dan input

10.7 Memproses Mail

Berikut ini contoh script mengirim email melalui form input. Perintah yang
digunakan pada bagian form adalah action:mailto<alamat email>.

64
<HTML>
<HEAD><TITLE> Contoh </TITLE></HEAD>
<BODY>
<form name="akses" action="mailto:[email protected]"
method="post" enctype="text/plain">
<center><FONT face= "Tahoma" SIZE="4">
Form Kirim email
</FONT></center>
<br>
<table align=center>
<tr>
<td>Nama Pengirim</td>
<td><Input type=text size="25" maxlength="25"></td>
</tr>
<tr>
<td>email</td>
<td><input type=text size="40" maxlength="40"></td>
</tr>
</table>
<hr>
<center>
<input type=submit value=Kirim>
<input type=button value=Kembali>
</center>
</form></BODY>
</HTML>

Gambar 10.2 Contoh form untuk mengirim email

10.8 Latihan
Buatlah sebuah website tentang Sistem Informasi Penjualan Tiket Kereta Api
Online yang terdiri dari file index.html, data_pembeli.html, data_tiket.html,
info.html dan jadwal.html. Manfaatkan semua perintah HTML lengkapi pula
dengan tombol-tombol yang diperlukan.

oooO0Oooo

65
 11
TENTANG XHTML
11.1 Tujuan Instruksional
1. Pembaca mengetahui struktur script XHTML.
2. Pembaca dapat membedakan script HTML dan XHTML.
3. Pembaca dapat mendisain web menggunakan script XHTML.

11.2. Pendahuluan
eXtensible HyperText Markup Language, atau XHTML, adalah bahasa markup
penerus dan pengembangan dari HTML yang memiliki kemampuan yang kurang
lebih mirip HTML, tapi dengan aturan sintaks yang lebih ketat. HTML merupakan
aplikasi dari SGML (Standard Generalized Markup Language) yang sangat
fleksibel, sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih
terbatas.

Karena XHTML harus memiliki keteraturan-bentuk (mengikuti sintaks yang tepat),

dokumen XHTML dapat diproses otomatis dengan menggunakan standar pemroses
XML - tidak seperti HTML yang membutuhkan pemroses yang cukup sulit dan
kompleks. XHTML dapat dianggap sebagai perpaduan antara HTML dan XML
karena merupakan formulasi ulang HTML dalam bentuk XML. XHTML 1.0 telah
menjadi rekomendasi World Wide Web Consortium (W3C) pada tanggal 26 Januari
2000.

Di internet sering dijumpai sebuah web yang dibangun dengan script HTML yang
tidak diatur dengan format baik atau istilahnya tidak well-formed, artinya struktur
penulisan tidak sesuai dengan aturan. Misal perintah <font size=11> tidak ditutup
dengan </font>. Berikut ini contoh script HTML yang tidak well-formed meskipun
dapat berjalan pada browser.

66
<html>
<head><title>Selamat Datang</title</head>
<body>
<font size=11>
Selamat belajar disain web secara programming.
</body>
</html>

Perkembangan teknologi informasi yang telah merambah ke Telepon Seluler dan

PDA memunculkan kebutuahn script yang standar dan bebas dari kesalahan. Untuk
keperluan tersebut XML dapat menyajikan dokumen atau data yang “well-formed”.
XML digunakan untuk mendeskripsikan data, sedangkan HTML digunakan untuk
menampilkan data. Kombinasi HTML dan XML yang dikenal dengan XHTML
penulisannya menggunakan aturan yang ketat. Halaman XHTML dapat dibaca pada
browser yang men-supprot XML.

11.3 Aturan Penulisan XHTML

XHTML mempunyai aturan penulisan yang ketat, padahal tidak semua tag HTML
mempunyai tag penutup. Seperti <hr> atau <br>. Untuk mengatasi permasalahan
tersebut pada XHTML dapat menggunakan tag />. Perbedaan utama HTML dan
XHTML yaitu:
1. Semua elemen XHTML sebaiknya tersarang (well-formed). Sedangkan HTML
tidak terlalu ketat.
Contoh benar (elemen bersarang):
<b><i><font size=”4”>Apa kabar anda ?</font></i></b>
<i><u><h3>Anda sudah belajar hari ini ? </h3></u></i>

Contoh salah (elemen tidak bersarang):

<b><i><font size=”4”>Apa kabar anda ?</font></b></i>
<i><u><h3>Anda sudah belajar hari ini ? </i></h3></u>

2. Pada HTML, beberapa elemen diperbolehkan untuk tidak ditutup,sedangkan pada

XHTML hal tersebut tidak diijinkan.
Contoh benar (dengan tag penutup):
<p>here is a paragraph.</p>
<p>here is another paragraph.</p>

67
 Contoh salah (tanpa tag penutup):
<p>here is a paragraph.
<p>here is another paragraph.

3. Pada HTML, skrip dokumen boleh dituliskan dengan huruf kecil maupun huruf
kapital, hal itu dikarenakan HTML tidak bersifat sensitive case. Sedangkan pada
XHTML harus ditulis dengan huruf kecil (lowercase) untuk menuliskan tag dan
atribut, hal itu dikarenakan XHTML bersifat sensitive case.

4. Nilai atribut harus diapit tanda kutip ganda ( “ ).

Contoh benar (bertanda kutip)
<td rowspan="3">
Contoh salah (tidak bertanda kutip)
<td rowspan=3>

5. pada XHTML penulisan elemen kosong harus mengandung tag pembuka dan tag
penutup yang berakhiran />
Contoh benar :
<br/><hr/>
Contoh salah :
<br><hr>

6. Dokumen XHTML harus mempunyai satu root elemen. Contoh:

<html>
<head>
<title>………</title>
</head>
<body>……………</body>
</html>

7. Penggunaan atribut “ID”

Pada HTML tag “name” digunakan untuk mendefenisikan sebuah applet, frame,
iframe, img dan lainnya. Pada XHTML atribut “name” diganti dengan atribut
“ID”. Contoh:
<input type=”text” id=”nama” size=”25” maxlength=”25”>
<input type=”checked” id=”pilihan”>

68
8. Doctype pada XHTML
Dokumen XHTML harus mengandung deklarasi DOCTYPE atau DTD
(Document Type Definition). Syarat dokumen XHTML harus mempunyai:
1. DOCTYPE
2. Head
3. Body
Deklarasi DOCTYPE tidak memerlukan penutup karena bukan bagian dari
XHTML. Ada tiga jenis DOCTYPE yang dapat digunaan yaitu:
1. STRICT (ketat)
2. TRANSACTIONAL
3. FRAMESET

Berikut ini contoh minimal sebuah dokumen XHTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD>
<TITLE> MENU UTAMA </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<center>
<h2>Selamat Datang</h2>
</center>
</BODY>
</HTML>

11.4 Mengapa Mengunakan XHTML

Manfaat-manfaat dari migrasi ke XHTML antara lain disebutkan dibawah ini :
1. Web developer dan perancang user agent (sistem yang berfungsi untuk
menerjemahkan script) selalu menemukan cara-cara baru untuk mengekspresikan
ide-ide mereka melalui mark-up baru. Pada format XML, sangatlah mudah untuk
memperkenalkan elemen-elemen baru atau atribut elemen tambahan. XHTML
didesain untuk mengakomodasi ekstensi-ekstensi tersebut melalui modul
XHTML dan teknik untuk membangun modul XHTML baru yang beraturan atau
well-formed (disebutkan dalam spesifikasi modulasi XHTML). Modul-modul

69
 tersebut akan mengijinkan kombinasi dari set fitur-fitur baru maupun yang telah
ada pada saat membangun konten dan saat mendesain user agent yang baru. .
2. Cara-cara alternatif untuk mengakses internet senantiasa diperkenalkan. XHTML
didesain dengan interoperabilitas umum. Melalui mekanisme user agent dan
pemprofilan dokumen, server, proxi dan user agent akan dapat memaksimalkan
transformasi konten web. Pada akhirnya, akan sangat dimungkinkan untuk
membangun XHTML baru yang beraturan yang dapat digunakan oleh segala
macam user agent.

11.5 Migrasi dari HTML ke XHTML

Untuk bermigrasi atau mengkonversi dokumen anda dari bentuk HTML ke bentuk
XHTML tentu anda harus sudah familiar dengan aturan-aturan XHTML yang telah
dijelaskan sebelumnya. Hal yang perlu diperhatikan yaitu penambahan deklarasi
DOCTYPE harus diletakkan pada bagian baris pertama setiap halaman. Penambahan
deklarasi DOCTYPE fungsinya agar dokumen dikoreksi validasinya. Lihat baris
berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Baris tersebut diatas harus ditambahkan dan diletakkan pada bagian pertama sebuah
dokumen XHTML. Selanjutnya setelah semua kaidah penulisan telah sesuai dengan
aturan XHTML pengecekan dokumen dapat dilakukan pada link:

http://validator.w3.org/check?uri=https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fwww.w3schools.c
om%2Fxhtml%2Fxhtml_howto.asp

Tampilan halaman validasi akan tampak seperti pada gambar 11.1. Setelah link ke
halaman web tersebut, masukkan alamat web anda ke form address. Kemudian lihat
hasilnya. Konversi HTML ke XHTML dapat pula menggunakan tools bernama
TIDY. TIDY dapat anda download di:

http://www.w3.org/People/Raggett/tidy

oooO0Oooo

70
 12
TENTANG CSS
12.1 Tujuan Instruksional
1. Pembaca mengetahui penggunaan CSS
2. Pembaca dapat menggunakan CSS untuk mengatur tampilan website.
3. Pembaca mampu mendesain CSS dan mampu mengaplikasikannya ke dalam
dokumen HTML

12.2 Pendahuluan
Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-
style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di
layar. Anda juga bisa menyebutnya sebagai template dari document HTML yang
menggunakannya.
Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style
sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style
untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang
akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih
banyak lagi yang bisa anda lakukan dengan style sheet.
Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan
tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang
didukung oleh hampir semua web Browser. Hal ini dikarenakan CSS telah
distandarkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web
browser.

12.3 Mengaplikasikan CSS pada Dokumen HTML

Style Sheet dapat digunakan dengan 3 cara, sesuai dengan kebutuhan anda:
• Dengan membuat link ke file CSS dari file HTML.
Metode seperti ini memungkinkan anda mengubah style sejumlah halaman web
dengan hanya mengedit satu file CSS. Untuk membuat link ke Style Sheet eksternal,
71
anda dapat dengan mudah membuat sebuah file berisi definisi style kemudian simpan
(save) dengan ekstensi .CSS, kemudian buat link ke file tersebut dari halaman web.
Dengan cara ini, anda dapat memanfaatkan Style Sheet yang sama untuk beberapa
halaman dalam site anda.

Sebagai contoh, bila Style Sheet anda dinamai style-saya.css dan terletak di alamat
http://alamat-internet/style-saya.css, diantara tag <HEAD> anda harus menambahkan
skrip berikut ini:
<HEAD>
<TITLE>Judul artikel</TITLE>
<LINK REL=STYLESHEET
HREF="http://alamat-internet/style-saya.css"
TYPE="text/css">
</HEAD>

• Dengan menyisipkan Style Sheet pada file HTML.

Metode seperti ini memungkinkan anda mengubah style suatu halaman web dengan
hanya mengedit beberapa baris Style Sheet. Untuk menyisipkan Style Sheet kedalam
dokumen HTML, tambahkan blok <STYLE> </STYLE> di awal dokumen, di antara
tag-tag <HTML> dan <BODY>. Hal ini memungkinkan anda untuk mengubah
penampilan satu halaman web. Tag <STYLE> memiliki satu parameter yaitu TYPE,
yang menspesifikasi type media internet sebagai “text/css” (memungkinkan browser
yang tidak mendukung type ini untuk mengabaikan Style Sheet). Tag <STYLE>
diikuti oleh sejumlah definisi style dan berakhir dengan tag </STYLE>.
Contoh :
<HTML>
<STYLE TYPE="text/css">
<!--
BODY {font: 10pt "Arial"}
H1 {font: 15pt/17pt "Arial";
font-weight: bold;
color: maroon}
H2 {font: 13pt/15pt "Arial";
font-weight: bold;
color: blue}
P {font: 10pt/12pt "Arial";
color: black}
-->
</STYLE>
<BODY>
...
</BODY>
</HTML>

72
• Dengan menyisipkan secara inline pada tag dalam file HTML.
Hal ini memberi cara tercepat untuk mengubah suatu tag, sejumlah tag, atau satu
blok informasi pada halaman web.
Bila anda menginginkan pemformatan pada sebagian kecil saja dari web anda, anda
dapat menggunakan inline style.
Definisi style pada inline style hanya berpengaruh pada tag dimana inline style
tersebut berada. Contoh inline style pada tag <p> berikut:
<P STYLE="margin-left: 0.5in; margin-right: 0.5in">
Baris ini akan terlihat rata di bagian kanan dan kiri.
<P> Baris ini tidak mempunyai indentasi.

12.4 Sintax Dasar CSS

Style sheets terdiri dari dua bagian:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector
2. Declaration
Terdiri dari property dan nilainya.
Syntax :
Selector { property1: value; property2:value, . . .}
Contoh :
H1{ color:green; background-color:orange}

12.5 Contoh penggunaan CSS

Contoh penggunaan CSS :
<html>
<head><title>Membuat form bentuk cantik</title>
<style type="text/css">
<!--
INPUT {
background-color:#00FF00;
border-style:outset;
border-width: 2PX;
}
TEXTAREA {
background-color:#00FF00;
border-style:outset;
border-width: 2PX;
}
.TABLE {

73
 border-style : solid;
border-color:#00FF00;
border-width: 1PX;
}
-->
</style></head>
<body>
<form name="form1" method="post" action="">
<table class="TABLE" width="350" border="0" cellspacing="0"
cellpadding="3">
<tr align="left" bgcolor="#00FF00">
<th colspan="2" scope="col">Form Cantik </th>
</tr>
<tr>
<td width="81">Nama </td>
<td width="107">
<input name="nama" type="text" id="nama" size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input name="alamat" type="text" id="alamat" size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text" id="email" size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Pesan</td>
<td><textarea name="pesan" cols="25" rows="4" id="pesan">
</textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>

oooO0Oooo

74