Web HTML
Senin, 15 November 2010
1.1. Apa itu HTML
HTML (Hypertext Markup Language) merupakan sebuah bahasa pemrograman yang mengatur browser bagaimana sebuah halaman ditampilkan di internet. HTML merupakan cabang dari bahasa yang lebih besar, SGML (Standard Generalized Markup Language). Sebagaimana tujuan awalnya untuk mengatur tampilan sebuah dokumen, HTML bukanlah sebuah bahasa pemrograman untuk membuat program yang dapat berdiri sendiri. Sehingga beberapa fitur bahasa pemrograman pada umumnya seperti pemilihan kondisi dan perulangan tidak tercakup disini. Sehingga HTML harus disandingkan atau dikombinasikan dengan bahasa pemrograman lain untuk membuat sebuah program yang berbasis web.
Pada bab berikutnya kita akan membahas lebih lanjut bagaimana HTML bekerjasama dengan bahasa lain untuk membuat sebuah program berbasis web.
1.2. Struktur HTML
Pemrograman HTML tidak lepas dari label berkurung yang populer dengan sebutan tags, berikut adalah sebuah contoh dokumen HTML sederhana:
<Html>
<HEAD>
<title>Contoh dokumen</title>
</HEAD>
<body>
Ini adalah contoh sederhana dari sebuah dokumen HTML
</body>
</html>
Pada dokumen diatas, ada beberapa sifat dasar dari sebuah dokumen html :
- Diawali dengan tag <html> dan diakhiri dengan tag </html>. Untuk tag yang paling awal menjelaskan bahasa dari dokumen tersebut, untuk bahasa pemrograman lain juga akan memiliki namanya sendiri. Tag pembuka dan penutup dibedakan dengan adanya tanda “/ “ di penutup tag.
- Terdiri dari dua bagian yaitu Head dan Body. Head menjelaskan informasi-informasi yang akan dicantumkan dalam sebuah dokumen, sementara pada Body berisi informasi yang ingin ditampilkan dalam sebuah dokumen.
- Besar kecilnya huruf tidak berpengaruh dalam penulisan tags.
1.3. Membuat Halaman HTML
Pada bagian ini kita akan langsung mencoba membuat halaman HTML sederhana. Sebagai editornya kita cukup menggunakan tool yang sederhana saja yaitu notepad pada windows atau gedit pada linux. Sebenarnya kita bebas untuk menggunakan editor apa saja, mulai dari yang paling sederhana
seperti notepad dan gedit, sampai yang memang ditujukan untuk pemrograman web seperti Frontpage, Dreamweaver, dan Quanta. Tapi, agar kita benar-benar menguasai konsep pemrograman web dan untuk menghindarkan diri dari ketergantungan akan sangat baik jika kita mulai dari dasar.
Pada editor mulailah kita ketik kode berikut :
<html>
<head>
<title>Halaman HTML perdana</title>
</head>
<body>
Hallo, selamat datang di halaman perdana saya!
</body>
</html>
Setelah itu jangan lupa untuk menyimpannya, misal dengan nama coba.htm. Kemudian bukalah sebuah web browser, semisal Mozillla Firefox atau Internet Explorer, dan bukalah halaman yang baru kita buat dengan mengkliknya dua kali.
1.4. Layout Teks
Setelah berhasil membuat halaman sederhana kini saatnya kita belajar jurus-jurus tags tambahan untuk mempercantik tampilan web kita.
1.4.1. <br> - Line Break
Misalkan kita ingin membuat sebuah halaman lirik lagu, maka kita akan membuat sebuah halaman html sebagai berikut :
<html>
<head>
<title>Naik-naik</title>
</head>
<body>
Naik, naik ke puncak gunung
Tinggi, tinggi sekali
Kiri,kanan kulihat saja banyak pohon cemara (2x)
</body>
</html>
Dan sekarang cobalah dibuka dengan browser. Akan tampak bahwa teks lagu di atas tampil dalam satu baris mendatar. Agar teks diatas tampil sesuai dengan yang kita inginkan maka kita perlu menambahkan sebuat tag <br>.
Setelah dimodifikasi maka halaman diatas akan menjadi:
<html>
<head>
<title>Naik-naik</title>
</head>
<body>
Naik, naik ke puncak gunung<br>
Tinggi, tinggi sekali<br>
Kiri,kanan kulihat saja banyak pohon cemara (2x)<br>
</body>
</html>
Dan sekarang jika kita browser, barulah kita dapatkan tampilan yang kita inginkan. Tag <br> ini tidak membutuhkan tag penutup.
1.4.2. <p> - Paragraph
Tag ini berfungsi untuk memberitahu browser bahwasanya kita ingin membuat jeda paragraf baru, dengan kata lain memasukkan sebuah line break dan memberi jarak satu spasi kosong dengan baris berikutnya. Mirip dengan tag <br>, tag <p> juga tidak membutuhkan tag penutup. Berikut contoh penerapannya:
<html>
<head>
<title>Lagunya Opick</title>
</head>
<body>
Bagimanakah bila saatnya<br>
Waktu terhenti tak kau sadari<p>
Masikah ada jalan bagi mu untuk kembali<br>
Mengulang ke masa lalu<p>
--Opick "Bila Waktu Tlah Berakhir"
</body>
</html>
Selanjutnya cobalah untuk menyimpan dan menjalankan dokumen diatas pada browser.
1.4.3. - Penanda Spasi
Seringkali kita ingin menambahkan spasi antar karakter, sementara pada bahasa HTML spasi kosong lebih dari satu akan diabaikan. Untuk keperluan itulah kita menggunakan tag , tag ini cukup unik karena tidak memerlukan <>. Berikut contoh penggunaannya :
<html>
<head>
<title>Tes spasi</title>
</head>
<body>
1 2 3 4
</body>
</html>
Selanjutnya cobalah untuk menyimpan dan menjalankan dokumen diatas pada browser.
1.4.4. <center> - Rata Tengah
Ada kalanya kita ingin membuat teks tampil rata tengah, saat itulah kita menggunakan tag <center>. Tag ini dimasukan di awal dan di akhir teks yang akan kita buat rata tengah, bisa berupa satu kata, kalimat atau paragraf. Misalnya pada lagu di atas kita ingin membuat semuanya tampak rata tengah maka akan tampak sebagai berikut:
<html>
<head>
<title>Naik-naik</title>
</head>
<body>
<center>
Naik, naik ke puncak gunung<br>
Tinggi, tinggi sekali<br>
Kiri, kanan kulihat saja banyak pohon cemara(2x)<br>
<center>
</body>
</html>
1.4.5. <h> - Heading
Dalam artikel atau tulisan seringkali kita membuat judul, dengan format yang berbeda dari tulisan umunya. Untuk itu kita bisa menggunakan tag <h> ditambah angka dibelakangnya, misal <h1>, <h2>, dan seterusnya. Untuk contoh lebih jelasnya anda dapat melihat kode di bawah :
<html>
<head>
<title>Bermacam Jenis Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Ukuran teks normal
</body>
</html>
Dengan mencoba menjalankan halaman di atas dengan browser anda akan mendapatkan berbagai pilihan heading yang akan anda gunakan. Selain itu dengan tambahan align anda bisa mengatur letak dari heading tersebut, pilihan yang tersedia adalah left, center dan right, contohnya adalah :
<h1 align="center">Kata ini akan berada di tengah</h1>
1.4.6. Efek pada Font
Seringkali kita perlu menambahkan berbagai efek pada tulisan agar tampilannya menjadi lebih manis. Berikut beberapa cara mempermanis tampilan dari halaman web kita.
<b> - Bold
Tag ini, sebagaimana yang sudah kita duga untuk membuat tampilan huruf menjadi lebih tebal. Sepertinya tidak perlu satu halaman penuh untuk contoh penggunaannya, namun disini akan diperlihatkan contoh penggunaannya :
Kata berikut akan terlihat <b>tebal</b>
Untuk hasil yang sama kita juga bisa menggunakan tag <strong>.
<i> - Italic
Sedangkan untuk memberi efek miring pada font kita bisa menggunakan tag <i> atau dengan cara lain menggunakan <em> dan <cite>. Contoh :
Kata berikut akan terlihat <i>miring</i>
<u> - Underline
Tidak lengkap jika kita hanya membahas bold, dan italic tanpa mengulas underline. Langsung saja kita lihat contoh penggunaannya :
Kata berikut akan terlihat memiliki <u>garis bawah</u>
<blink> - Teks Berkedip
Ada kalanya kita ingin membuat teks terlihat berkedip, untuk keperluan itulah tag ini digunakan. Teks berkedip ini biasanya cukup ampuh untuk menarik perhatian pengunjung halaman web kita dan hanya bisa berjalan ketika kita menggunakan browser Modzilla. Contoh implementasinya :
Teks saya bisa <blink>berkedip</blink> lho....!!
<sub> - Subscript
Untuk pembuatan rumus kimia terkadang kita memerlukan beberapa karakter untuk turun ke bawah, disini kita bisa menggunakan tag subscript, berikut contohnya :
Rumus kimia air adalah <h2>H<sub>2</sub>O</h2>
<sup> - Superscript
Sementara kebalikan dari subscript adalah superscript dimana juga akan sangat berguna jika kita ingin menuliskan rumus kimia atau rumus matematika. Contoh :
X kuadrat sama dengan <h2>X<sup>2</sup></h2>
<font> - Modifikasi setting font
Terdapat beberapa pilihan untuk mengubah setting dari font, seperti ukuran dan warna dari font. Untuk mengubah ukuran font misalnya kita bisa menggunakan tag <font size>, contoh :
<html>
<head>
<title>Mengubah ukuran font</title>
</head>
<body>
<font size=1>Ukuran 1</font>
<font size=2>Ukuran 2</font>
<font size=3>Ukuran 3</font>
<font size=4>Ukuran 4</font>
<font size=5>Ukuran 5</font>
<font size=6>Ukuran 6</font>
Ukuran teks normal
</body>
</html>
Sementara untuk mengubah warna dari font kita bisa menggunakan tag <font color> dan ditutup dengan tag </font>. Contohnya :
<html>
<head>
<title>Mengubah warna font</title>
</head>
<body>
<font color=red>Merah</font>
<font color=green>Hijau</font>
<font color=blue>Biru</font>
<font color=yellow>Kuning</font>
<font color=pink>Merah muda</font>
<font color=magenta>Ungu</font>
</body>
</html>
Selain menggunakan nama warna kita juga bisa menggunakan kode heksadesimal, untuk daftar yang lebih lengkap beserta warnanya kita dapat melihat pada link berikut :
http://www.w3schools.com/html/html colornames.asp
Kita juga bisa menggabungkan kedua setting font tersebut dalam satu langkah menjadi seperti berikut :
<font size=6 color=green>Hijau dan besar</font>
1.4.7. <body> - Setting pada halaman
Jika kita bisa melakukan perubahan pada teks tentunya kita juga bisa melakukan perubahan tampilan pada halaman secara keseluruhan. Misalkan memeberi warna latar belakang, atau membuat sebuah gambar menjadi latar belakang halaman kita. Misal kita ingin mengubah latar belakang halaman menjadi biru maka caranya adalah :
<body bgcolor=green>
Sementara jika ingin menjadikan sebuah gambar menjadi latar belakang atau background maka berikut caranya :
<body background=walls.jpg>
Daripada mengubah warna masing-masing teks di dalam sebuah halaman, ada cara yang lebih mudah untuk mengubah seluruh warna halaman :
<body text=red>
1.5. Membuat List
Mirip dengan pengolah kata, pada HTML juga terdapat tag untuk membuat bullet atau list, yang akan berguna untuk membuat daftar atau pilihan.
Terdapat tiga jenis list, un – ordered (tak terurut), biasa juga disebut bullet, ordered (terurut) atau list angka dan yang ketiga adalah definitional.
1.5.1. Bullet
Untuk membuat bullet kita menggunakan tag <ul>, untuk penanda adanya bullet dan <il>, untuk setiap elemen dalam bullet tersebut. Contoh :
<ul>
<il>Teh</il>
<il>Kopi</il>
<il>Susu</il>
<il>Jus</il>
</ul>
Secara default tag diatas akan menghasilkan bullet dalam bentuk bulatan hitam kecil, kita dapat mengganti tipe bullet ini dengan menambahkan type dalam tag <ul>. Terdapat tiga tipe bullet lainnya yaitu disc (wajik), circle (bulatan), dan square (kotak). Contoh penerapannya :
<ul type=disc>
<il>Teh</il>
<il>Kopi</il>
<il>Susu</il>
<il>Jus</il>
</ul>
1.5.2. List
Sementara jika kita ingin membuat daftar menggunakan urutan angka (1,2,3....) maka kita gunakan tag <ol>, dengan melakukan sedikit modifikasi pada halaman di atas, berikut adalah contohnya :
<ol>
<il>Teh</il>
<il>Kopi</il>
<il>Susu</il>
<il>Jus</il>
</ol>
Sama dengan bullet, kita juga bisa mengatur tipe dari ordered list, pilihannya adalah:
- Type=1 untuk penomoran normal, contoh: 1,2,3...
- Type=a untuk penomoran menggunakan abjad kecil, contoh: a, b, c...
- Type=A untuk penomoran menggunakan abjad besar, contoh: A, B, C...
- Type=i untuk penomoran menggunakan huruf romawi kecil, contoh: i, ii, iii...
- Type=I ntuk penomoran menggunakan huruf romawi besar, contoh: I, II, III, IV...
1.5.3. Definitional List
Sebenarnya definitional list disini bukanlah untuk membuat urutan, namun lebih tepatnya untuk membuat isian seperti kamus istilah, untuk lebih jelasnya dapat melihat contoh berikut :
<dl>
<dt>Teh</dt>
<dd>Minuman hangat & nikmat diminum waktu sore</dd>
<dt>Susu</dt>
<dd>Minuman segar, baik untuk masa pertumbuhan</dd>
</dl>
1.6. T a b e l
Setelah bermain-main dengan teks, kini saatnya kita bermain dengan tabel. Tabel akan berguna untuk memberikan bentuk pada halaman web yang kita buat, karena halaman yang hanya berisi teks akan terasa membosankan, dan tabel juga berguna untuk mengatur tampilan teks agar lebihrapi dan sedap dipandang. Adapun macam dari operasi menggunakan tabel dalam HTML sepertri tertera dibawah ini.
1.6.1. Tag Dasar
Untuk membuat tabel kita memulainya dengan tag <table> dan seperti biasa, mengakhirinya dengan </table>. Tag berikutnya yang harus kita kenal adalah <tr>, yang berfungsi untuk membuat row atau baris, semakin banyak <tr> yang kita buat akan semakin banyak juga baris yang ada pada suatu tabel.
Tak lengkap mengenal baris jika tidak mengenal kolom, dimana tagnya adalah <td> dan tag ini biasa ditempatkan didalam tag <tr>. Untuk lebih jelasnya dalam penggunaan lihatlah contoh berikut :
<table border="1">
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
</tr>
</table>
Jika kita lihat pada kode di atas setelah tag table kita lihat adanya opsi untuk border, border disini berfungsi untuk mengatur ketebalan dari garis pembatas di sekeliling tabel, semakin besar nilainya maka garis kelilingnya akan semakin tebal. Dan jika kita mencantumkan nilai border ini atau bernilai 0, maka yang tampak hanyalah teks di dalam tabel saja.
1.6.2. Mengatur Lebar Tabel
Opsi lain untuk tabel adalah width, untuk mengatur lebar dari tabel. Terdapat dua cara yang bisa kita lakukan untuk mengaturnya, yang pertama mengaturnya dalam bentuk angka absolut dalam pixel (misal width=400) atau dengan persentase lebar browser (misal width=80%). Contohnya :
<table border="1" width="300">
1.6.3. Cell Padding dan Cell Spacing
Selanjutanya kita akan belajar mengatur jarak antara teks di dalam sel dengan border, disebut juga cellpadding dan mengatur jarak antar sel, disebut juga cellspacing. Tanpa adanya cellpadding seringkali tampak jarak teks terlalu rapat dengan border di sekelilingnya sehingga perlu kita tambah.
Angka yang digunakan disini adalah dalam pixel, berikut contoh penggunaannya :
<table border="1" cellpadding="10">
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
</tr>
</table>
Sementara jika kita ingin menambah spasi atau jarak antar sel, kita gunakan opsi cellspacing dalam besaran pixel, berikut contohnya :
<table border="1" cellspacing="10">
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
</tr>
</table>
1.6.4. Colspan dan Rowspan
Lalu bagaimana jika kita ingin melebur beberapa kolom atau baris menjadi satu? Untuk itu kita bisa gunakan colspan untuk kolom, dan rowspan untuk baris. Contoh dari keduanya dalam satu halaman adalah sebagai berikut :
<h4>Dua kolom jadi satu</h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon:</th>
</tr>
<tr>a
<td>Andi</td>
<td>772 854</td>
<td>772 855</td>
</tr>
</table>
<h4>Dua baris jadi satu</h4>
<table border="1">
<tr>
<th>Nama</th>
<td>Andi</td>
</tr>
<tr>
<th rowspan="2">Telepon:</th>
<td>772 854</td>
</tr>
<tr>
<td>772 855</td>
</tr>
</table>
1.6.5. Judul Kolom
Seringkali kita ingin menampilkan judul dari kolom, untuk itu kita tambahkan tag <th>, misal pada contoh sebelumnya kita ingin tambahkan heading maka contoh diatas akan menjadi :
<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
</tr>
</table>
1.6.6. Judul Tabel
Masih tentang judul, jika kita ingin menambahkan judul dari tabel secara keseluruhan kita bisa tambahkan tag <caption> setelah tag <table>, masih dengan contoh yang sama :
<table border="1">
<caption>Judul tabel</caption>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
</tr>
</table>
1.7. Menambahkan gambar
Untuk menambahkan gambar pada halaman web, kita dapat menggunakan tag <img> tanpa tag penutup. Berikut contohnya :
<img src="foto.jpg">
Dimana tag diatas dapat dimasukkan di bagian mana saja yang kita inginkan. Ada baiknya juga kita tambahkan opsi alt, sehingga bila gambar tidak dapat ditampilkan oleh browser, akan ditampilkan teks pengganti. Beberapa browser juga akan menampilkan teks ini jika melayangkan kursor di atas gambar. Contohnya :
<img src="foto.jpg" alt="ini fotoku">
Sumber dari gambar juga bisa dari direktori lain, contoh :
<img src="images/foto.jpg">
atau situs lain
<img src="www.gambar.com/image_dir/foto.jpg">
1.7.1. Mengatur Ukuran Gambar
Kita juga dapat mengatur ukuran dari gambar yang ingin kita tampilkan dengan menambahkan opsi width dan height, berikut adalah contohnya :
<img src="foto.jpg" width="40" height="20">
1.7.2. Mengatur Posisi Gambar
Posisi gambar juga bisa kita atur relatif menurut teks. Terdapat tiga pilihan posisi vertikal yang bisa kita gunakan, yaitu bottom, middle dan top dan dua posisi horizontal yaitu left dan right. Jika posisi ini tidak kita tentukan secara otomatis maka akan menjadi bottom. Contoh penerapannya adalah :
<img src="foto.jpg" align="middle">
1.8. Links
Hyperlinks atau biasa disebut dengan links saja merupakan salah satu ciri khas dan kelebihan dari halaman web, yaitu kemampuannya untuk meloncat atau berpindah ke halaman lain dengan hanya satu klik mouse.
1.8.1. Teknik dasar
Link yang paling sederhana dan yang paling sering kita lihat dalam halaman web, berupa kalimat atau huruf berwarna biru dan bergaris bawah. Mari kita lihat contoh link untuk halaman lain yang masih berada pada satu direktori yang sama dengan halaman yang sedang kita buka :
Klik
<a href="halaman2.htm">Halaman 2</a>
untuk berpindah ke halaman 2.
Dan jika kita ingin berpindah ke halaman di situs lain, maka kita bisa melihat contoh berikut :
<a href="http://www.google.com/">Mesin pencari</a>.
1.8.2. Link dengan gambar
Kita juga bisa membuat link menggunakan gambar, misal pada contoh sebelumnya kita ingin menampilkan gambar kaca pembesar yang jika di-klik akan menuju ke situs Google maka caranya adalah :
<a href="http://www.google.com/"><img src="lup.gif">
</a>.
1.8.3. Link ke jendela baru
Ada kalanya kita ingin ketika link di-klik maka halaman yang dituju akan dibuka dalam halaman baru, untuk itu kita tambahkan opsi target, seperti pada contoh berikut :
<a href="http://www.yahoo.com/" target="_blank">
Buka Yahoo
</a>.
1.8.4. Link di dalam satu halaman
Bila tujuan dari link terdapat dalam satu halaman yang sama maka kita bisa menggunakan opsi name. Misalkan pada satu halaman terdapat keterangan singkat dari semua propinsi yang ada di Indonesia, tentunya pengunjung akan menggulung halaman ke bawah untuk menemukan Propinsi Jawa Timur, untuk itu pertama-tama kita buat link tujuan (biasa disebut juga anchor atau jangkar) dengan cara :
<a name ="jatim">Jawa Timur</a>
Kemudian di awal halaman, bisa kita buat daftar link propinsinya, yang akan otomatis menuju propinsi dan deskripsi yang diinginkan, untuk contoh diatas maka :
<a href="#jatim">Jawa Timur</a>
Dan jika kita ingin membuat link dari situs lain langsung ke link Jawa Timur (misal nama situs kita http://www.propinsi.org) maka contoh linknya adalah sebagai berikut :
<a href="http://www.propinsi.org/propinsi.htm#jatim">
Tentang Jawa Timur
</a>
1.9. Frame
Frame sangat berguna jika kita ingin menampilkan lebih dari satu halaman web dalam satu jendela browser. Dimana frame akan memecah satu tampilan menjadi beberapa bagian tampilan. Isi satu frame merupakan bagian independen. Namun frame setidaknya memiliki dua kelemahan dimana programmer web harus memperhatikan beberapa dokumen HTML sekaligus dan kesulitan untuk mencetak keseluruhan halaman.
1.9.1. Tag <frameset>
Tag <frameset> mendefinisikan bagaimana memecah satu tampilan halaman web menjadi beberapa tampilan sekaligus. Frameset disini juga mengatur beberapa baris atau kolom yang akan ditampilkan, dan nantinya akan berdampak dari ukuran tempat yang digunakan. Misalkan kita ingin menampilkan dua halaman ( halaman1.htm dan halaman2.htm ) sekaligus dengan proporsi 25%:75%, maka dalam bahasa HTML akan menjadi :
<frameset cols="25%,75%">
<frame src="halaman1.htm">
<frame src="halaman2.htm">
</frameset>
Untuk membuat sebuah halaman dari beberapa baris maka kita cukup mengganti cols diatas menjadi rows.
1.9.2. Mengunci frame
Satu kelemahan dari cara diatas adalah border dari frame dapat diubah oleh pengunjung atau bergeser. Untuk itu akan lebih baik jika kita tambahkan juga opsi noresize pada contoh diatas :
<frameset cols="25%,75%">
<frame noresize="norezise" src="halaman1.htm">
<frame noresize="norezise" src="halaman2.htm">
</frameset>
1.9.3. Menghilangkan border
Kita juga bisa menghilangkan border atau pembatas yang ada di sekeliling frame dengan opsi frameborder, sebagai contoh :
<frameset cols="25%,75%">
<frame frameborder="0" src="halaman1.htm">
<frame frameborder="0" src="halaman2.htm">
</frameset>
1.9.4. Frame navigasi
Salah satu penggunaan frame yang populer adalah frame navigasi, dimana terdapat satu frame statis yang berisi link, dan frame kedua yang menampilkan isi dari setiap link tersebut. Pertama-tama kita buat dulu satu halaman yang berisi link yang diinginkan, misal diberi nama menu.htm dengan isi file :
<a href="halaman1.htm" target="showframe">Halaman 1</a>
<a href="halaman2.htm" target="showframe">Halaman 2</a>
<a href="halaman3.htm" target="showframe">Halaman 3</a>
Kemudian baru kita buat halaman utama yang menampilkan kedua frame ini, contoh :
<html>
<frameset cols="120,*">
<frame src="menu.htm">
<frame src="halaman1.htm" name="showframe"">
</frameset>
</html>
0 comments: