Cara membuat bingkai di html

Dalam membuat sebuah website, kita perlu mengetahui beberapa dasar dalam pembuatannya, terutama dalam hal tampilan atau interface web yang akan kita bangun. Namun saat ini sudah banyak developer yang menyediakan template gratis hingga premium/berbayar dengan tampilan yang didukung dengan berbagai fitur tambahan yang menggunakan HTML5, CSS, Boostrap, JQuery, dan lain-lain.

Pada materi kali ini akan dibahas bagaimana cara membuat tampilan website sederhana dengan menggunakan Frames pada HTML

Frame adalah teknik dalam menyusun atau membagi tampilan/jendela menjadi beberapa bagian. Yaitu, membagi posisi header, konten, menu, sidebar, dll

Pada materi kali ini akan dibahas tentang

• BINGKAI HTML
• TAG FRAMESET
• TAG BINGKAI
• ATRIBUT COLS
• ATRIBUT BARIS
• ATRIBUT BORDER & BORDERCOLOR
• ATRIBUT MARGINHEIGHT
• ATRIBUT MARGINWIDTH
• ATRIBUT GULIR
• ATRIBUT NORESIZE
• IFRAME
• NAMA dan LINK

bingkai HTML

Bingkai HTML digunakan untuk menampilkan beberapa halaman web yang ditampilkan di jendela browser baik secara vertikal maupun horizontal

TAG FRAMESET

FRAMESET berfungsi membagi isi jendela web browser menjadi beberapa bagian. Elemen ini memiliki atribut berikut

• Cols (membagi jendela berdasarkan kolom)
• Baris (membagi jendela berdasarkan baris)
• Berbatasan
• warna batas
• Frameborder (untuk menampilkan frame border)
• Framespacing (jarak antar frame)

Sintaksis

    ………………………

TAG BINGKAI

Tag FRAME mendefinisikan frame yang terdapat dalam frameset. Tag ini memiliki atribut berikut:

• Nama (nama bingkai)
• Tinggi margin
• Lebar margin
• warna batas
• Batas bingkai
• Ukuran Nore
• Menggulir
• Src (dokumen yang ditampilkan pada bingkai)

Tag tidak mempunyai tag penutup.

Menggambar sintaks

contoh frameset cols

framecols. html

kakak. html

hijau tua. html

Catatan. Ketiga file tersebut disimpan dalam 1 folder

Hasil

Baca Juga   Tutorial PHP. #10 Menampilkan Tanggal di PHP

Dari contoh diatas terlihat bahwa farmeset akan membagi halaman secara vertikal dengan menggunakan kolom (cols). Sepertinya bingkainya besar. html memiliki lebar terkecil (15%), sedangkan hiajutua. html terbesar (85%). Besarannya sesuai dengan urutan penulisan nilai untuk atribut cols, dimana atribut cols pada frameset pertama ditulis 15% kemudian 85%, selanjutnya pada tag frame urutan penulisan frame src=”abutua. html" terlebih dahulu kemudian bingkai src="hijau. html". Artinya halaman utama. html lebarnya 15% dan berwarna hijau tua. html lebarnya 85%.

contoh baris frameset

framerows. html

kakak. html

hijau tua. html

Catatan. Ketiga file tersebut disimpan dalam 1 folder

Hasil

Dari contoh di atas terlihat bahwa Farmeset akan membagi halaman secara horizontal menggunakan baris. Sepertinya bingkainya besar. html adalah yang tertinggi (75%), sedangkan hiajutua. html terkecil (25%). Besarannya sesuai dengan urutan penulisan, dimana pada atribut rows pada frameset pertama ditulis 75% kemudian 25%, selanjutnya pada tag frame urutan penulisan frame src=”abutua. html" terlebih dahulu kemudian bingkai src="hijau. html". Artinya halaman utama. html adalah 75% tinggi dan hijau tua. html adalah 25% tinggi

contoh frameset cols dan baris

framecolrows. html

kakak. html

abumuda. html

hijau tua. html

Catatan. Ketiga file tersebut disimpan dalam 1 folder

Hasil

Dari contoh di atas yang merupakan gabungan antara kolom dan baris terlihat bahwa Farmeset akan membagi halaman secara vertikal dengan menggunakan kolom (cols). Sepertinya bingkainya besar. html lebarnya 15%, kemudian 85% sisanya dibagi vertikal menggunakan baris dengan persentase 75% dan 25%. Barisan tersebut 75% diisi dengan abumuda. html, sedangkan 25% diisi dengan warna hijau tua. html

Baca Juga   Tutorial PHP. #7 Pengulangan (Looping) Pada PHP

TAG NOFRAM

Elemen NOFRAME menentukan konten yang akan ditampilkan jika bingkai tidak dapat diakses

Sintaksis

Contoh

ATRIBUT BORDER & BORDERCOLOR

contoh

batas bingkai. html

hijau. html

jeruk. html

Hasil

ATRIBUT MARGINHEIGHT

Marginheight = untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi frame

contoh

Hasil

ATRIBUT MARGINHEIGHT

Marginwidth = untuk menentukan jarak antara border kiri atau border kanan frame dengan isi frame

contoh

Hasil

ATRIBUT GULIR

Contoh

Contoh diatas tidak menggunakan atribut scrolling, contoh dibawah ini menggunakan atribut scrolling, perhatikan perbedaannya

Hasil

ATRIBUT NORESIZE

Hasil

TAG IFRAM

Inline frame atau iframe adalah salah satu cara untuk membuat 'jendela' di halaman web yang dapat menampilkan dokumen terpisah di jendela tanpa memuat ulang seluruh halaman.

Beberapa atribut yang sering dipasang di iframe adalah

• ALIGN="kiri/kanan"
• LEBAR =”lebar”
• TINGGI =”tinggi”
• FRAMEBORDER=”garis batas”
• SCROLLING=”otomatis/ya/tidak”
• SRC = "url yang akan ditampilkan"

Baca Juga   Tutorial Laravel 8 #3. Buat Pengontrol

Contoh

NAMA DAN LINK

Script untuk gambar di atas adalah

indeks. html

tajuk. html

footer. html

nav. html

bermain. html

putih. html

untuk skrip hijau. html, oranye. html, merah muda. html dan merah. html hampir identik dengan putih. html, hanya atribut bgcolor yang berbeda

Apa itu bingkai HTML?

Apa itu tag bingkai?