Cara Membuat Frame di HTML

Belajar HTML : Cara Membuat Frame di HTML

Hallo gan, selamat datang dan terimakasih telah berkunjung ke website kami (ilmukita). Di artikel ini kita akan belajar cara membuat frame di HTML . Frame adalah teknik yang digunakan untuk memanggil beberapa halaman kemudian di tampilkan dalam satu halaman.

Format penulisan tag frame :

Format penulisan elemen tag frame :

Dalam frame kita tidak lagi memerlukan tag body, sehingga struktur dasar  frame adalah sebagai berikut:

Tag frameset memiliki  atribut diantaranya :

  • border : menentukan tebal garis border
  • cols :menentukan lebar kolom (px/%/*) ,dan untuk mentukan jumlah kolom yaitu memakai tanda koma ( )
  • rows : menentukan panjang baris (px/%/*) , dan untuk mentukan jumlah baris yaitu memakai tanda koma ( )

Tag frame memiliki  atribut diantaranya :

  • name : untuk menentukan nama frame atau untuk target link
  • scr :  berfungsi untuk menujukkan/lokasi  sumber file.

Contoh membuat frame di HTML

Membuat folder baru

buat folder baru dengan nama frame

Membuat file HTML

  • Buka text editor
  • Buat file baru dengan nama index.html kemudian simpan di dalam folder frame
  • Di file index.html Isikan kode html berikut :
  • Simpan kembali file tersebut.
  • Buat file baru dengan nama header.html kemudian simpan di dalam folder frame
  • Di file header.html isikan kode berikut :
  • Simpan kembali file tersebut
  • Buat file baru dengan nama sidebar.html kemudian simpan di folder farme
  • Di file sidebar.html isikan kode berikut :
  • Simpan file tersebut
  • Buat file baru dengan nama conten.html kemudian simpan di folder frame
  • Di file conten.html isikan kode berikut :
  • Simpan kembali file tersebut.
  • Buat file baru dengan nama footer.html  kemudian simpan di dalam folder fame
  • Di file footer.html isikan kode brikut :
  • Simpan kembali file tersebut

Untuk melihat hasilnya buka file index.html di browser

maka akan terlihat sebagai berikut :

hasil tampilan di browser
hasil tampilan di browser

Untuk download source code frame silahkan klik disini 

artikel selanjutnya :

Cara Membuat Form di HTML

LEAVE A REPLY

Please enter your comment!
Please enter your name here