Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Frame HTML Menggunakan 10 Atribut Utama dan Fungsinya

Frame HTML digunakan untuk membagi windows pada web browser menjadi beberapa bagian dimana setiap bagian tersebut dapat dibuat secara terpisah. Tag frameset merupakan kumpulan dari jendela atau windows browser tersebut.


Sebelum memahami lebih dalam materi tentang Membuat Frame HTML Menggunakan 10 Atribut Utama dan Fungsinya, terlebih dahulu pelajari materi tentang: Membuat Form HTML Menggunakan Tag Form, Mengatur Gaya Huruf HTML Menggunakan Tag Font, dan Menyematkan Aplikasi Eksternal pada HTML Menggunakan Tag Embed.

Membuat frame: Tag frameset digunakan untuk membagi browser menjadi beberapa windows, dimana setiap frame akan ditunjukkan oleh tag frame dan pada dasarnya merupakan bentuk pendefinisian dari dokumen HTML itu sendiri yang akan dibuat ke dalam tag frame. Untuk mendefinisikan frame horizontal maka digunakan atribut row dari tag frame, sedangkan jika ingin mendefinisikan frame dalam bentuk vertikal maka digunakan atribut col dari tag frame pada dokumen HTML.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Frame menggunakan

atribut row

</title>

</head>

 

<frameset 

rows = "20%, 60%, 20%">

 

<frame 

name = "top" 

src ="C:/Users/dharam/Desktop/attr1.png" />

 

<frame 

name = "main" 

src ="C:/Users/dharam/Desktop/gradient3.png" />

 

<frame 

name = "bottom" 

src ="C:/Users/dharam/Desktop/col_last.png" />

 

<noframes>

<body>

Browser tidak mendukung

penggunaat frame.

</body>

</noframes>

 

</frameset>

 

</html>

Contoh program tersebut pada dasarnya digunakan untuk membuat tiga frame horizontal yaitu bagian atas, tengah, dan bahwa dengan menggunakan atribut row dari frameset dan tag noframe digunakan untuk browser yang tidak mendukung penggunaan noframe.

Contoh: ilustrasi dari atribut col dari tag frameset.

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Frame menggunakan 

atribut col

</title>

</head>

 

<frameset 

cols = "30%, 40%, 30%">

 

<frame 

name = "top" 

src = "C:/Users/dharam/Desktop/attr1.png" />

 

<frame 

name = "main" 

src = "C:/Users/dharam/Desktop/gradient3.png" />

 

<frame 

name = "bottom" 

src = "C:/Users/dharam/Desktop/col_last.png" />

 

<noframes>

<body>

Browser yang digunakan tidak 

mendukung penggunaan frame.

</body>

</noframes>

 

</frameset>

 

</html>

Contoh tersebut digunakan untuk membuat tiga frame vertikal yaitu kiri, tengah, dan kanan dengan menggunakan atribut col dari tag frameset.

Atribut dari Tag Frameset:
satu, cols: digunakan untuk membuat bingkai vertikal pada web browser. Atribut ini pada dasarnya digunakan untuk menentukan jumlah kolom dan ukurannya pada tag frameset. Ukuran dan lebar kolom diatur dalam frameset dengan cara berikut:
  • Menggunakan nilai pixel absolut. Contoh: <frameset cols = "300, 400, 300">
  • Menggunakan nilai persen. Contoh: <frameset cols = "30%, 40%, 30%">
  • Menggunakan nilai wild card. Contoh: <frameset cols = "30%, *, 30%">

dua, rows: digunakan untuk membuat frame horizontal pada web browser. Atribut ini digunakan untuk menentukan jumlah baris dan ukurannya pada tag frameset yang diperlihatkan sebagai berikut:
  • Menggunakan nilai pixel. Contoh: <frameset rows = "300, 400, 300">
  • Menggunakan nilai persen. Contoh: <frameset rows = "30%, 40%, 30%">
  • Menggunakan nilai wild card. Contoh: <frameset rows = "30%, *, 30%">

tiga, border: atribut ini digunakan untuk mendefinisikan lebar batas pada setiap frame dalam satuan pixel dengan nilai nol digunakan untuk meniadakan batas-batas atau border tersebut.
Contoh: <frameset border="4" frameset>

empat, frameborder: atribut ini digunakan untuk menentukan apakah batas tiga dimensi harus ditampilkan diantara bingkai atau tidak. Atribut ini menggunakan dua nilai yaitu 0 dan 1. Nilai 0 mendefinisikan makna tanpa batas dan nilai 1 mendefinisikan nilai berbatas pada atribut.

lima, framespacing: atribut ini digunakan untuk menentukan jumlah jarak antar frame dalam sebuah frameset. Atribut ini dapat mengambil nilai integer apapun sebagai nilai parameter yang pada dasarnya menunjukkan nilai pixel.
Contoh: <framespacing="20">

enam, name: atribut ini digunakan untuk memberi nama pada frame. Atribut ini digunakan untuk membedakan antara frame satu dengan frame lainnya yang juga digunakan untuk menunjukkan bingkai mana pada dokumen yang harus dimuat.
Contoh:
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src = "C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src = "C:/Users/dharam/Desktop/col_last.png" />


tujuh, src: Atribut dalam tang bingkai tersebut digunakan untuk mendefinisikan file sumber yang harus dimuat ke dalam bingkai. Nilai dari src juga dapat berupa nilai url apapun.
Contoh: <frame name = "left" src = "/html/left.htm" />
Dari contoh tersebut maka file akan melakukan loading dari url "/html/left.html".

delapan, marginwidth: Atribut ini digunakan untuk menentukan lebar spasi dalam satuan pixel antara nilai batas dan isi dari frame kiri dan kanan.
Contoh: <frame marginwidth="20">

sembilan, marginheight: Atribut ini digunakan untuk menentukan tinggi spasi dalam satuan pixel antara batas dan isi bingkai atas dan isi bingkai bawah.
Contoh: <frame marginheight="20">

sepuluh, scrollbar: Digunakan untuk mengontrol tampilan scroll pada frame yang digunakan pada dokumen html. Atribut ini pada dasarnya digunakan untuk mengendalikan tampilan dari scrollbar frame. Nilai pada atribut dapat berupa yes, no, dan auto, dimana nilai no akan mengeksekusi perintah untuk tidak menampilkan scroll pada frame. Atribut scrolling adalah atribut yang digunakan untuk menentukan apakah frame tersebut akan diberi scrolbar atau tidak, pilihannya adalah yesno, atau auto. Jika pilihan nilai scrolling adalah auto, maka scrollbar hanya dimunculkan jika dibutuhkan, dimana kondisi scrolbar akan muncul dibagian samping kanan atau bawah frame, jika lebar atau tinggi layar frame lebih kecil daripada website yang akan ditayangkan ke dalam frame. Jika plihan scrolling adalah yes, maka scrolbar akan selalu muncul meskipun ukuran website yang ditampilkan pada frame jauh lebih kecil dari ukuran frame itu sendiri. Jika pilihan nilai scrolling adalah no, maka frame tidak akan menampilkan scrolbar pada frame meskipun ukuran website yang akan ditampilkan pada frame jauh lebih besar dari frame itu sendiri. Secara default, jika frame html tidak menampilkan atribut scrolling, maka scrolbar yang terdapat  pada frame akan diatur dengan nilai auto
Contoh: <frame scrollbar="no">

Keunggulan tag frame:
  1. Memungkinkan user untuk melihat beberapa file dokumen dalam satu halaman website saja.
  2. Memungkinkan untuk memuat beberapa halaman website dalam satu halaman saja.
  3. Browser tipe lama yang tidak mendukung penggunaan bingkai dapat menggunakan tag ini untuk mengatasi masalah tersebut.

Kekurangan tag frame: Karena beberapa kelemahan yang dimiliki dari penggunaan tag frame, maka tag tersebut jarang digunakan dalam pengembangan web:
  1. Frame dapat membuat situs website menjadi terlihat rumit.
  2. User tidak dapat menandai halaman website manapun yang telah dilihat pada frame.
  3. Tombol back pada browser mungkin tidak berfungsi seperti yang diharapkan semestinya.
  4. Penggunaan frame yang terlalu banyak dapat memberikan beban kerja berlebih pada server.
  5. Banyak browser website lama yang tidak mendukung penggunaan tag frame.

Catatan: penggunaan tag ini sudah tidak didukung pada HTML5.

Dalam dunia pengembangan halaman web, pemahaman tentang elemen-elemen dasar sangat penting, salah satunya adalah elemen frame dalam HTML. Meskipun kini penggunaan frame sudah kurang populer karena beberapa kendala teknis, pengetahuan tentang cara kerja frame dan atribut-atribut yang dapat digunakan tetap relevan untuk memahami bagaimana struktur halaman web dibangun. Pada artikel ini, akan dibahas secara mendalam mengenai pembuatan frame dalam HTML serta atribut-atribut utama yang dapat digunakan untuk memaksimalkan fungsinya.

Pengertian Frame HTML

Frame dalam HTML digunakan untuk menampilkan beberapa halaman atau bagian halaman dalam satu halaman utama. Sebelumnya, HTML menyediakan elemen `<frameset>` yang digunakan untuk membagi halaman menjadi beberapa bagian, masing-masing dapat menampilkan konten yang berbeda. Namun, setelah perkembangan web, penggunaan elemen tersebut mulai ditinggalkan, digantikan oleh desain responsif menggunakan CSS dan JavaScript. Meski demikian, frame tetap memberikan gambaran tentang bagaimana konten bisa dipisahkan dan ditampilkan dalam satu halaman.


Atribut-Atribut Utama dalam Frame HTML

Berikut adalah sepuluh atribut utama yang sering digunakan dalam pembuatan frame HTML dan fungsinya. Setiap atribut ini memiliki peran yang sangat penting dalam pengaturan tampilan dan perilaku frame.
  • src (Sumber): Atribut `src` digunakan untuk menentukan alamat sumber atau URL dari halaman yang akan ditampilkan dalam frame. Tanpa atribut ini, frame tidak akan memiliki konten apa pun untuk ditampilkan. Atribut ini sangat penting karena berfungsi sebagai penghubung antara halaman utama dan konten eksternal yang ingin ditampilkan di dalamnya.
  • name (Nama): Atribut `name` berfungsi untuk memberikan nama pada frame. Nama ini memungkinkan frame untuk digunakan sebagai target dalam elemen-elemen lain seperti tautan atau formulir. Ketika sebuah tautan diklik, halaman atau konten yang dituju bisa dibuka dalam frame yang sesuai, jika tautan tersebut memiliki atribut `target` yang merujuk pada nama frame yang dimaksud.
  • width (Lebar): Atribut `width` menentukan lebar dari frame yang akan ditampilkan. Nilai lebar bisa berupa ukuran dalam satuan piksel atau persentase dari lebar layar. Pengaturan lebar ini memungkinkan pengembang untuk menyesuaikan tampilan frame sesuai dengan layout halaman web. Pengaturan yang tepat akan memberikan kenyamanan bagi pengunjung dalam melihat konten.
  • height (Tinggi): Atribut `height` berfungsi untuk menentukan tinggi frame. Sama seperti atribut `width`, nilai tinggi bisa disesuaikan dengan ukuran piksel atau persentase. Penyesuaian tinggi sangat penting agar konten dalam frame dapat ditampilkan dengan proporsional tanpa memotong atau memperbesar tampilan secara tidak tepat.
  • frameborder (Batas Frame): Atribut `frameborder` digunakan untuk mengontrol apakah frame memiliki garis batas atau tidak. Nilai `0` berarti tidak ada batas, sementara nilai `1` menandakan adanya batas pada frame. Penggunaan atribut ini sangat berpengaruh pada desain visual halaman web. Pada pengembangan modern, atribut ini lebih sering digantikan dengan pengaturan menggunakan CSS, namun tetap penting untuk memahami peranannya.
  • scrolling (Pengguliran): Atribut `scrolling` digunakan untuk menentukan apakah frame dapat digulir secara vertikal atau horizontal. Nilai yang dapat diterapkan adalah `yes`, `no`, atau `auto`. Pengaturan ini sangat berguna saat menampilkan konten dalam frame yang melebihi ukuran yang disediakan, sehingga pengunjung dapat menggulirkan konten untuk melihat bagian yang tersembunyi.
  • marginwidth (Lebar Margin): Atribut `marginwidth` mengatur lebar margin horizontal di dalam frame, yang berarti jarak antara konten dalam frame dengan batas frame di sisi kiri dan kanan. Dengan pengaturan yang tepat, margin ini membantu menciptakan ruang kosong yang membuat tampilan lebih rapi dan tidak terlalu padat.
  • marginheight (Tinggi Margin): Serupa dengan `marginwidth`, atribut `marginheight` mengatur jarak vertikal antara konten dengan batas frame di bagian atas dan bawah. Pengaturan margin ini juga penting untuk memastikan bahwa konten dalam frame tidak terlalu dekat dengan tepi, memberikan ruang untuk tata letak yang lebih baik.
  • noresize (Tanpa Pengubahan Ukuran): Atribut `noresize` diterapkan pada elemen `<frameset>` untuk mencegah pengguna mengubah ukuran frame. Dengan atribut ini, ukuran frame tetap konstan, terlepas dari interaksi pengguna. Hal ini sering digunakan ketika pengembang ingin mempertahankan desain yang konsisten tanpa adanya perubahan ukuran yang tidak diinginkan.
  • target (Sasaran): Meskipun atribut `target` lebih sering digunakan pada elemen tautan, atribut ini juga berperan penting dalam pengaturan frame. Dengan atribut `target`, pengembang dapat menentukan dimana konten dari tautan tersebut akan ditampilkan, apakah dalam frame yang ada atau di jendela baru. Dengan menggunakan nilai seperti `_self`, `_blank`, atau nama frame tertentu, kontrol atas pembukaan konten dapat dilakukan dengan lebih fleksibel.

Peran dan Kelemahan Frame dalam Desain Web

Meskipun frame menawarkan banyak fitur menarik, seperti menampilkan beberapa konten dalam satu halaman dan navigasi antar frame, ada sejumlah kelemahan yang harus diperhatikan. Salah satunya adalah masalah SEO, karena konten dalam frame sering kali tidak dianggap sebagai bagian dari halaman utama oleh mesin pencari. Selain itu, penggunaan frame dapat membingungkan bagi pengunjung yang ingin menavigasi kembali atau membagikan URL halaman, karena frame biasanya memiliki URL terpisah.

Selain itu, penggunaan frame dapat mengganggu pengalaman pengguna jika tidak dirancang dengan cermat. Misalnya, pengaturan ukuran frame yang tidak sesuai dapat menyebabkan konten terpotong atau sulit dibaca. Oleh karena itu, meskipun frame pernah menjadi pilihan utama dalam desain web, kini penggunaan elemen ini lebih terbatas, digantikan dengan teknik lain seperti pengaturan tampilan responsif.

Perkembangan Penggunaan Frame dalam Web Modern

Seiring berkembangnya teknologi dan semakin populernya desain responsif, penggunaan frame dalam HTML mulai ditinggalkan. Sebagai penggantinya, desain menggunakan teknik seperti CSS Flexbox dan Grid telah menjadi pilihan utama dalam membuat tata letak halaman yang fleksibel dan dinamis. Teknik-teknik ini memungkinkan pengembang untuk membuat layout halaman yang lebih bersih dan mudah diatur, tanpa mengandalkan frame.

Namun, memahami konsep frame tetap penting bagi pengembang web yang bekerja dengan aplikasi lama atau situs web yang masih mengandalkan elemen ini. Memahami atribut-atribut yang terlibat dalam penggunaan frame dapat memberikan wawasan lebih dalam tentang cara kerja halaman web dan elemen-elemen terkait.

Kesimpulan

Meskipun penggunaan frame dalam HTML telah mengalami penurunan, pengetahuan tentang atribut-atribut utama dalam pembuatan frame tetap penting untuk dipahami. Atribut seperti `src`, `name`, `width`, `height`, dan lainnya memberikan kontrol penuh atas bagaimana konten ditampilkan dalam frame. Setiap atribut memiliki fungsinya sendiri yang membantu pengembang menyesuaikan tampilan dan interaksi dengan konten dalam frame. Namun, untuk desain web modern, disarankan untuk beralih ke teknik lain yang lebih fleksibel dan ramah terhadap pengguna serta mesin pencari.

Artikel ini akan dibaca oleh: Aditya Aji Pradana, Afifah Eva Nuriyah, Aldila Puspita Husna, Amalia Safitri, dan Andhi Nur Saputra.

32 komentar untuk "Membuat Frame HTML Menggunakan 10 Atribut Utama dan Fungsinya"

  1. Apa yang dimaksud dengan tag frame pada html?

    BalasHapus
    Balasan
    1. Frame HTML digunakan untuk membagi jendela web browser menjadi beberapa bagian dimana setiap bagian tersebut dapat dimuat secara terpisah. Tag frameset merupakan kumpulan frame pada jendela browser.

      Hapus
  2. Bagaimana menciptakan frame?

    BalasHapus
    Balasan
    1. 1. Gunakan elemen frameset sebagai pengganti elemen body dalam dokumen html.
      2. Gunakan elemen frame untuk membuat bingkai untuk konten halaman website.
      3. Gunakan atribut src untuk mengidentifikasi sumber daya yang harus dimuat pada setiap frame.
      4. Buat file yang berbeda dengan isi untuk setiap frame yang akan ditampilkan.

      Hapus
  3. Apa yang dimaksud dengan frame dalam konteks web browser?

    BalasHapus
    Balasan
    1. Dalam konteks web browser, frame merupakan bagian dari halaman website atau jendela browser yang menampilkan konten independen dari wadahnya, dengan kemampuan untuk membuat konten secara independen.

      Hapus
  4. Apa fungsi dari frame kolom pada frame HTML?

    BalasHapus
    Balasan
    1. Kolom pada frame atau frame kolom berfungsi untuk menentukan subruang vertikal dalam sebuah bingkai atau frame.

      Hapus
    2. Kedua frame baik itu kolom ataupun baris dapat diatur secara sendiri-sendiri ataupun secara bersamaan untuk mebuat sebuah kombinasi frame.

      Hapus
  5. Apa fungsi atribut scrolling pada frame html?

    BalasHapus
    Balasan
    1. Fungsi atribut scrolling pada frame html adalah memberikan pilihan kepada pengguna apakah akan menggunakan scrol atau tidak pada frame jika laman yang ditampilkan ukurannya lebih besar dari laman frame, dengan nilai atribut adalah YES atau NO atau AUTO.

      Yes berarti diberikan scrol pada frame.

      No berarti tidak diberikan scrol pada frame.

      AUTO berarti akan diberikan frame pada laman web jika ukuran web yang ditampilkan pada frame melebihi ukuran dari frame sendiri.

      Hapus
  6. Bagaimana cara membuat dan mengatur frame pada laman html?

    BalasHapus
    Balasan
    1. 1. Gunakan elemen FRAMESET sebagai pengganti elemen body dalam dokumen HTML.
      2. Gunakan elemen FRAME untuk membuat bingkai untuk konten website.
      3. Gunakan atribut SRC untuk mengidentifikasi source yang harus dimuat dalam setiap frame.
      4. Buat file berbeda untuk setiap frame yang disediakan.

      Hapus
  7. Bagaimana cara mewarnai frame pada html?

    BalasHapus
    Balasan
    1. Untuk dapat mewarnai frame pada laman html dapat menggunakan atribut bordercolor, dengan nilai atau value dari atribut tersebut adalah bilangan hexadecimal enam karakter.

      Hapus
  8. Penggunaan umum dari frame pada html adalah untuk menampilkan navigasi frame pada sepanjang sisi atau pada bagian atas dari halaman web. Dengan menggunakan frame, perancang web dapat membuat frame navigasi yang mengontrol dokumen pada laman lainnya.

    BalasHapus
  9. Atribut scroll pada frame html digunakan untuk menentukan apakah harus menggunakan scrol atau tidak pada frame yang digunakan. Secara default, schollbar akan muncul pada frame jika konten yang ditampilkan ukurannya lebih besari dari frame itu sendiri.

    BalasHapus
  10. Apa keuntungan dan kerugian menggunakan frame pada laman html yang dibuat?

    BalasHapus
    Balasan
    1. Keuntungannya, perancang web dapat menampilkan laman web lain pada laman web sendiri tanpa harus membuat ulang laman html yang akan ditampilkan tersebut.

      Hapus
    2. Kerugiannya, jika laman html yang akan ditampilkan frame ternyata memiliki waktu loading yang lama maka dapat membebani situs atau halaman html yang terpadat frame yang mengarah kesitus tersebut.

      Dalam pengembangan situs atau web, penting bagi seorang perancang situs untuk mempertimbangkan kecepatan akses dari situs tersebut supaya pengunjung merasa nyaman untuk mengunjungi situs tersebut. Sebuah situs yang memiliki waktu loading yang terlalu lama akan membuat pengunjung tidak bisa bertahan lama, dan cenderung tidak mau datang lagi ke situs tersebut.

      Hapus
  11. Untuk setting scroll sebaiknya menggunakan atribut dengan nilai yes, no, atau auto?

    BalasHapus
    Balasan
    1. Jawabannya tergantung dari pemauan perancang situs itu sendiri, biasanya sebuah frame yang menampilkan situs dengan ukuran yang selalu lebih kecil dari frame, maka jauh lebih bijak jika value dari atribut scroll disetting dengan NO. Begitupun dengan kondisi lainnya, semua keputusan bersifat subjektif tergantung dari kemauan perancang situs masing-masing.

      Hapus
  12. Bagaimana cara menjadi frame sebagai target hyperlink pada html?

    BalasHapus
    Balasan
    1. Pada dasarnya apa yang dilakukan sama seperti menargetkan laman web biasa pada frame, namun pada kondisi ini laman web yang dijadikan sebagai frame adalah laman yang berisi link.

      Hapus
  13. Kenapa frame hyperlink yang saya buat tidak menampilkan laman yang ingin ditampilkan melainkan laman internet positif?

    BalasHapus
    Balasan
    1. Karena laman yang pengen lu tampilan adalah laman terlarang -__- , makanya dicekal pemerintah.

      Hapus
    2. Coba pasang VPN di browser, insyallah laman yang ingin ditampilkan bisa terlihat tanpa ada pencekalan dari internet positif :D.

      Hapus
  14. Frame HTMl digunakan untuk membagi jendela browser untuk menjadi beberapa bagian dimana setiap bagian dapat memuat dokumen html secara terpisah yang didalamnya juga bisa terdapat frame itu sendiri yang dikenal sebagai suatu frameset.

    BalasHapus
  15. Atribuat name digunakan untuk memberikan penamaan pada tag FRAME. Atribut NAME digunakan untuk memberikan referensi elemen pada JavaScript, juga bertindak sebagai target dari link.

    BalasHapus
  16. Tag FRAME adalah elemen HTML yang digunakan untuk menampilkan area tertentu pada dokumen HTML lain yang dapat ditampilkan. Frame harus digunakan dalam bentuk FRAMESET. penggunaan elemen FRAME tidak dianjurkan karena dapat memberikan kerugian tertentu seperti pada masalah kinerja web atau kurangnya aksesibilitas bagi pengguna dalam membaca layar.

    BalasHapus
  17. Berapa banyak frame yang dapat ditampilkan pada sebuah laman html?

    BalasHapus
    Balasan
    1. Sebanyak mungkin sesuai dengan kemauan dari perancang web.

      Namun, semakin banyak frame yang dimuat dalam suatu laman web, maka semakin banyak pula waktu loading yang dibutuhkan oleh sebuah laman untuk dapat menampilkan semua frame yang ditautkan ke laman tersebut.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -