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
Latihan Frame Cols
kakak. html
Latihan Frame Cols
hijau tua. html
Latihan Frame Cols_
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
Latihan Frame Rows
kakak. html
Latihan Frame Cols
hijau tua. html
Latihan Frame Cols_
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
Latihan Frame 1_
kakak. html
Latihan Frame Cols
abumuda. html
_0
hijau tua. html
Latihan Frame Cols_
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
_2
Contoh
_3
ATRIBUT BORDER & BORDERCOLOR
contoh
batas bingkai. html
_4
hijau. html
_5
jeruk. html
_6
Hasil
ATRIBUT MARGINHEIGHT
Marginheight = untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi frame
contoh
_7
Hasil
ATRIBUT MARGINHEIGHT
Marginwidth = untuk menentukan jarak antara border kiri atau border kanan frame dengan isi frame
contoh
_8
Hasil
ATRIBUT GULIR
Contoh
Contoh diatas tidak menggunakan atribut scrolling, contoh dibawah ini menggunakan atribut scrolling, perhatikan perbedaannya
_9
Hasil
ATRIBUT NORESIZE
Latihan Frame Cols0
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
Latihan Frame Cols1
tajuk. html
Latihan Frame Cols2
footer. html
Latihan Frame Cols_3
nav. html
Latihan Frame Cols_4
bermain. html
Latihan Frame Cols5
putih. html
Latihan Frame Cols6
untuk skrip hijau. html, oranye. html, merah muda. html dan merah. html hampir identik dengan putih. html, hanya atribut bgcolor yang berbeda