Cara Membuat Frame HTML

Cerita Dosen, Sepriano - Pada kesempatan kali ini kita akan membahas Pemrograman Web 1 dimulai dari langkah awal hingga langkah akhir, kali ini admin akan sajikan pada Part 2, silahkan dibaca, dipahami dan dipraktikkan di laptop masing-masing.

Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:

Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen
Membuat suatu dokumen tanya jawab, dll.

Sama halnya seperti membuat tabel, dalam mendefinisikan frame, hal pertama yang harus dilakukan adalah mendefinisikan dahulu bentuk frame yang akan dibuat.

Cara Membuat Frame HTML

Untuk membuat frame seperti Frame A2, sebuah halaman kita bagi menjadi dua bagian terlebih dahulu secara horizontal seperti Frame A1, kemudian dibagi lagi hingga seperti Frame A2. Demikian pula untuk membuat Frame B2 harus melalui bentuk Frame B1. Urutan ini akan sangat memengaruhi bentuk frame yang akan kita bangun.

Tag untuk membuat frame diawali dengan menggunakan <FRAMESET> dan diakhiri dengan </FRAMESET>. Pada file pendefinisi frame kita tidak lagi memerlukan tag

<BODY></BODY>, sehingga struktur dasar pendefinisi frame adalah sebagai berikut:

Pada file pendefinisi frame ini, setiap kita akan membagi menjadi beberapa bagian, maka kita gunakan tag <FRAMESET></FRAMESET>. Atribut-atribut yang dapat menyertai tag ini adalah:

BORDER, untuk menentukan tebal garis pemisah antar frame
ROWS, untuk menentukan berapa baris bagian yang akan dibentuk
COLS, untuk menentukan berapa kolom yang akan dibentuk

Jika kita tidak akan membagi lagi frame yang ada, maka selanjutnya kita definisikan frame tersebut dengan tag <FRAME>. Atribut-atribut yang dapat menyertai tag ini adalah:

NAME, untuk memberi identitas/nama bagi frame tersebut. Fungsinya adalah ketika frame tersebut dijadikan target untuk menampilkan suatu halaman.
SRC, menunjukkan file yang mengisi frame tersebut.
SCROLLING, untuk menunjukkan apakah kita akan menggunakan scrolling bar di samping atau di bawah halaman, opsi inputnya adalah "YES, NO atau AUTO".

Yang perlu diperhatikan saat membuat file pendefinisi frame adalah bahwa kita telah mempunyai file yang akan digunakan untuk mengisi frame tersebut.

Aturan Pendefinisian Ukuran :

Nilai angka dalam pixel.
Nilai angka dalam persentase (%) yang menandakan persentase dari keseluruhan area tampilan yang tesedia.
Tanda bintang (*) yang menandakan sisa ruang yang masih ada.

Berikut adalah code yang akan dibuat

Tampilan yang didapat seperti pada gambar di bawah ini

Cara Menambahkan Link di HTML <tag a>

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.

Link ditulis dengan <a> yang merupakansingkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).

Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat kode seperti dibawah ini.

Contoh penggunaan tag link <a>:

Maka akan tampil hasil seperti gambar di bawah ini

Alamat absolute ditulis dengan lengkap, sebagai contoh http://www.wawangunawan.web.id, Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini.

Seandainya nama file kita adalah latihan1.php, dan dalam folder yang sama terdapat halaman latihan2.php, kita dapat menggunakan href=”latihan2.html” untuk membuat link ke halaman latihan2.php

Atribut tag <a>: target

Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk menentukan apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela baru.

Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan atribut target=”_blank”.

Contoh penggunaan tag link <a>dengan atribut target:

Jika kita men-klik link tersebut, maka halaman duniailkom.com akan terbuka di tab baru, dan tidak menimpa tab saat ini.

Selain digunakan untuk menghubungkan halaman HTML, Tag <a> juga bisa digunakan untuk dihubungkan ke bagian lain dari halaman yang sama, atau disebut Internal Link. Cara pembuatan internal link adalah dengan membuat link berisi atribut id dari tag lain.

Cara Membuat Internal Link ke Bagian Lain Dokumen (Atribut id)

Jika pada tutorial HTML Dasar kita telah mempelajari cara membuat link ke halaman lain (baik link dengan alamat absolut maupun alamat relatif), kita juga bisa membuat link ke bagian lain dari dokumen yang sama. Dalam Tutorial HTML Lanjutan kali ini kita akan mempelajari Cara Membuat Internal Link ke Bagian Lain Dokumen dengan menggunakan atribut id.

Selain digunakan di dalam CSS dan JavaScript, atribut id juga digunakan di dalam HTML

sebagai ‘penanda’ bagian dari halaman web.

Apabila paragraf pertama dari halaman kita memiliki id=”paragraf1”, maka kita bisa membuat link yang akan ‘memindahkan’ jendela web browser ke bagian “paragraf1”, dengan menuliskan:

<a href="#paragraf1">Kembali ke paragraf pertama</a>

Jika bagian tersebut dijalankan, web browser akan menampilkannya seperti link ‘normal’, namun ketika user men-klik kalimat link tersebut, ia akan dipindahkan ke bagian halaman yang memiliki id=”paragraf1”. Perhatikan bahwa di dalam tag <a>, kita menggunakan tanda pagar “#” untuk berpindah ke bagian lain halaman.

Syarat dari link tersebut bisa berfungsi adalah di bagian lain halaman, harus ada tag yang memiliki atribut id=”paragraf1”.

Selain digunakan untuk pindah ke bagian lain pada halaman yang sama, kita juga bisa membuat link untuk halaman lain, dan sekaligus memindahkan tampilan ke bagian tertentu. Untuk keperluan ini, kita hanya tinggal menambahkan tanda pagar di akhir atributhref, seperti contoh berikut ini:

<ahref="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>

Jika digabungkan dengan alamat absolut, kita bisa memandu pengunjung situs ke bagian tertentu situs lain, dengan syarat pada bagian tersebut memiliki tag id.

Sebagai contoh, berikut adalah kode HTML cara membuat link ke bagian lain dokumen

HTML: