- Chapter 1: Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML.
- Chapter 2: Cara Membuat Headings (h1,h2,h3) dan Horizontal Ruled Lines Pada HTML.
- Chapter 3: Cara Membuat paragraph, Align Attribute, Line Break, dan Preformatted Text Pada HTML.
- Chapter 4: Cara Membuat Center Tag dan Body Attributes Pada HTML
- Chapter 5: Penulisan Font dan Text color di HTML
- Chapter 6: Cara Membuat Tag Links dan Images Pada HTML
- Chapter 7: Cara Membuat List Tulisan Pada HTML
- Chapter 8: Penulisan kode HTML (Clean code), Escape Code, dan Comment Tag Pada HTML
- Chapter 9: Cara Membuat Link Navigasi Dalam 1 Halaman (Navigation Within A Document)
- Chapter 10: Cara Membuat Tag Tables di HTML
 |
| Chapter 11: Cara Membuat Tag Frames (Bingkai) Pada HTML |
Apa itu Frame?
Frames adalah salah satu fitur baru dari HTML yang hanya diimplementasikan pada browser terbaru (Netscape 2.0 atau yang lebih tinggi) yang memungkinkan satu jendela browser dibagi menjadi beberapa bagian, masing-masing halaman HTML bersifat independen yang dimuat di dalamnya, dan halaman HTML ini dapat berinteraksi satu sama lain. Setiap halaman dimuat dalam setiap bagian dari frame dokumen HTML yang terpisah.
Contoh kode pembuatan halaman frame...
<html>
<head><title>testing frames...</title></head>
<frameset cols="25%,75%">
<frameset>
<frame src="test.html" name="indexbar">
</frameset>
<frameset>
<frame src="main.html" name="main">
</frameset>
</frameset>
<noframes>
Halaman ini membutuhkan browser yang mendukung frame ...
</noframes>
</html>
Halaman frame itu sendiri dalam banyak kasus tidak benar-benar berisi konten apapun, semua konten ditempatkan pada halaman HTML terpisah yang dimuat dalam setiap frame (bagian). Sebaliknya, halaman frame bertindak sebagai panduan, mendefinisikan halaman yang akan dimuat ke setiap frame, dan frame memiliki atribut sendiri. Anda mungkin telah menyadari, halaman frame mirip halaman HTML biasa, kecuali bahwa body digantikan dengan frameset, dan tambahan tag yang harus ditambahkan noframes.
Cara menggunakan tag Frameset...
Tag frameset digunakan untuk menentukan karakteristik frame, dan tag noframes digunakan untuk mendefinisikan browser yang tidak bisa melihat frame-aktif. Karena tag frameset diabaikan oleh browser non-frame, apa pun dalam noframes tag akan dianggap sebagai halaman HTML biasa. Jadi setelah tag <noframes> harus ditempatkan tag<body>, kemudian diakhiri dengan tag </body>, diikuti oleh tag </noframes>. Konten noframes tidak akan terlihat oleh seseorang yang menggunakan browser frame-aktif, kecuali mereka yang menggunakan 'view source' pada browser.
Tag Frameset akan digunakan beberapa kali di seluruh halaman frame tunggal. Pertama tag frameset digunakan untuk menentukan jumlah kolom frame yang terpisah dalam jendela browser, dan lebar masing-masing jendela. Berikutnya tag rangkaian frame akan digunakan untuk menentukan berapa banyak baris frame akan berada di jendela browser, dan mengatur tinggi masing-masing dari frame tersebut. Atribut baris diatur secara terpisah untuk setiap kolom, misalnya, kolom pertama Anda mungkin memiliki 4 frame, dan kolom kedua Anda mungkin memiliki 2 frame, dll Tidak ada batasan tertentu pada jumlah frame yang mungkin Anda miliki dalam satu jendela browser , tetapi Anda harus menyadari bahwa halaman Anda akan dilihat dalam resolusi yang berbeda, dari 640 x 480 piksel dengan 1024 x 768 piksel dan lebih besar lagi. Saran saya adalah untuk membatasi halaman Anda tidak lebih dari 4 frame dalam satu jendela browser.
Pendefinisian Kolom...
Pertama tag frameset harus dibuka dengan tag <frameset cols="SIZE_OF_COLUMN_1,SIZE_OF_COLUMN_2,ETC">. Tag pertama ini akan ditutup dengan tag </frameset>, tetapi hanya setelah baris frameset untuk setiap kolom tersebut didefinisikan. SIZE_OF_COLUMN dapat diganti dengan salah satu dari tiga nomor dibawah ini:
- x% - Setiap kolom diatur oleh persentase dari jendela browser yang tersedia. (x adalah angka dari 1 sampai 100)
- x - Setiap kolom diatur oleh jumlah piksel yang tetap. (tidak disarankan, karena lebar pixel bervariasi tergantung pada resolusi layar) (x adalah nomor dalam pixel)
- * - Memberitahu browser untuk menggunakan semua ruang yang tersedia yang tersisa untuk kolom ini.
Jadi frameset membaca <frameset cols="20%,80%"> yang berarti bahwa kolom pertama jendela browser akan mengambil 20% dari lebar jendela browser, dan kolom kedua akan mengambil 80% dari lebar total browser. Contoh lain adalah <frameset cols="120,*"> di mana kolom pertama adalah 120 pixel, dan kolom kedua mengambil semua sisa lebarnya. Hanya satu kolom yang diperlukan, dan tidak ada batasan berapa banyak kolom yang dapat didefinisikan.
Pendefinisian Baris...
Didalam kolom mendefinisikan tag pembuka dan penutup frameset. Jumlah dalam baris mendefinisikan tag frameset secara langsung tergantung pada jumlah kolom yang didefinisikan dalam kolom mendefinisikan tag frameset. Jika ada dua kolom didefinisikan, akan ada dua baris mendefinisikan tag frameset yang terpisah, jika tiga kolom didefinisikan, akan ada tiga baris yang mendefinisikan tag frameset.
Tag baris frameset memiliki tag pembuka <frameset rows="SIZE_OF_ROW_1,SIZE_OF_ROW_2,ETC">. SIZE_OF_ROW didefinisikan hampir sama dengan SIZE_OF_COLUMN... x% adalah persentase tinggi browser yang tersedia, x adalah mengatur ketinggian dengan nilai piksel, dan * adalah semua ruang yang tersisa. Baris didefinisikan dari atas ke bawah, dan Kolom yang didefinisikan dari kiri ke kanan.
Pendefinisian Frames...
Dalam setiap tag baris frameset memiliki tag frame, yang mendefinisikan mana halaman yang akan dimuat dalam kerangka dan beberapa atribut pada frame tersebut. Frame tag sederhana memiliki kode seperti <frame src="document_to_load.html">, di mana document_to_load adalah nama dari halaman web yang akan dimuat dalam bingkai itu, dan tag bingkai tidak memiliki tag penutup. Tag frame memiliki beberapa atribut lain yaitu:
- SCROLLING="yes|no|auto" - Hal ini mendefinisikan jika frame memiliki scroll bar atau tidak. Secara default set scroll bingkai dipasang auto, yang berarti browser menentukan apakah scroll bar akan diperlukan. Jika diatur ke ya, maka frame akan selalu memiliki scroll bar, dan jika diatur ke tidak, maka frame tidak akan pernah memiliki scroll bar.
- NORESIZE - atribut ini menyatakan bahwa pengguna tidak dapat mengubah ukuran frame. Secara default pengguna dapat mengubah ukuran semua frame dalam jendela browser.
- NAME="x" - atribut ini mendefinisikan nama dari frame, yang digunakan untuk menargetkan halaman yang akan dimuat dalam bingkai itu. (x adalah kombinasi alfanumerik)
<frame src="document_to_load.html" SCROLLING="no">
Atau jika Anda ingin resizing di disabled, Anda bisa menggunakan kode:
<frame src="document_to_load.html" NORESIZE>
Contoh halaman frame yang kompleks...
<html>
<head><title>testing complex frames</title></head>
<frameset cols="33%,33%,33%">
<frameset rows="*,100">
<frame src="page1.html" NAME="index">
<frame src="page2.html" NORESIZE>
</frameset>
<frameset>
<frame src="main.html" NAME="main">
</frameset>
<frameset rows="50%,50%">
<frame src="page3.html">
<frame src="page4.html" SCROLLING="no">
</frameset>
</frameset>
<noframes><body>
This page requires a frames-enabled browser!
</body></noframes>
</html>
Halaman frame tersebut akan terlihat seperti...
---------------------------------------------- | page1.html | main.html | page3.html | | | | | | | | | | | | | | | | | | | | | | | |--------------| | | | page4.html | | | | | | | | | |--------------| | | | page2.html | | | | | | | ----------------------------------------------
Menggunakan atribut TARGET...
Bagaimana jika Anda memiliki halaman dalam satu frame yang memiliki link, tapi ketika pengguna mengklik link tersebut, Anda ingin dimuat ke salah satu frame lain yang ditetapkan? Inilah atribut TARGET yang bisa difungsikan. TARGET atribut adalah bagian dari tag <a href>. Tag a href yang bisa digunakan dengan atribut TARGET, yaitu:
<a href="page_to_load.html" TARGET="target_frame">text</a>
Dimana page_to_load.html adalah nama file yang harus dimuat dalam bingkai, target_frame adalah nama yang Anda berikan kepada frame untuk memuat ke dalam link, dan text adalah anchored text pada link. Jika Anda menghubungkan tanpa target, halaman terkait akan memuat ke dalam frame. Ada juga beberapa target khusus lainnya yang dapat digunakan target_frame adalah:
- TARGET="_blank" - Link dimuat ke jendela browser baru kosong.
- TARGET="_self" - link dimuat ke dalam bingkai link yang diklik pengunjung.
- TARGET="_top" - Link dimuat ke jendela penuh pada browser, dan semua frame menghilang, meninggalkan halaman baru untuk memiliki seluruh jendela.