SlideShare uma empresa Scribd logo
1 de 13
Baixar para ler offline
Mendesain Frame
Frame
Elemen Frame

• Format untuk membuat frame pada halaman
  web adalah dengan menggunakan perintah :

  <FRAMESET>
   <NOFRAMES>
   diabaikan jika browser mampu
   menampilkan frame
   </NOFRAMES>
  </FRAMESET>
Atribut-atribut Frame
Atribut-atribut Frame




Catatan:
Untuk membuat halaman web yang memiliki frame
biasanya akan dibuat satu halaman web utama yang
memiliki frame ditambah dengan file-file HTML lainnya
yang digunakan sebagai sumber untuk frame tersebut.
Contoh
• (Satu.html)
  <html>
  <body bgcolor="#008080">
  <h1 align="center"><font face="Arial">Halaman Satu
  dari File Satu.Html </font></h1>
  </body></html>

• (Dua.html)
  <html>
  <body bgcolor="#ff0080">
  <h1 align="center"><font face="Arial">Halaman Dua
  dari File Dua.Html</font></h1>
  </body></html>
Contoh (Lanjutan)
• (Tiga.html)
  <html>
  <body bgcolor="#aa00ff">
  <h1 align="center"><font face="Arial">Halaman tiga
  dari File tiga.Html</font></h1>
  </body></html>
Penggabungan ke frame (1)
• Frame dengan framerows :
 <html>
 <frameset rows="80,*">
 <noframes>maaf hanya bisa tampil pada web yang
 mendukung frame</noframes>
 <frame src="satu.html" name="atas" scrolling="no"
 noresize>
 <frame src="dua.html" name="bawah">
 </frameset>
 <html>
Hasil
Penggabungan ke frame (2)
• Frame dengan framecols :
 <html>
 <frameset cols="200,*">
 <noframes>maaf hanya bisa tampil pada web yang
 mendukung frame</noframes>
 <frame src="satu.html" name="kiri" scrolling="no"
 noresize>
 <frame src="dua.html" name="kanan">
 </frameset>
 <html>
Hasil
Gabungan dari framecols dan
framerows
<html>
<frameset rows=20%,* border=10 bordercolor="red">
<noframes>maaf hanya bisa tampil pada web yang
mendukung frame</noframes>
   <frame src="satu.html" name="atas" scrolling="no"
   noresize>
   <frameset cols=30%,*>
      <frame src="dua.html" name="bawah">
      <frame src="tiga.html" name="bawah">
   </frameset>
</frameset>
<html>
Hasil

Mais conteúdo relacionado

Mais procurados

Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphp
Afdi Njomplank
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
Saikhu Zaenul
 
Langkah awal-membuat-html
Langkah awal-membuat-htmlLangkah awal-membuat-html
Langkah awal-membuat-html
Satria Anpan
 

Mais procurados (19)

Dasar pemrograman web HTML
Dasar pemrograman web HTMLDasar pemrograman web HTML
Dasar pemrograman web HTML
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
Modul dasar html
Modul dasar htmlModul dasar html
Modul dasar html
 
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphp
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II web
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
Belajar html!!
Belajar html!!Belajar html!!
Belajar html!!
 
Bab8
Bab8Bab8
Bab8
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
 
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
 
PWEB HTML
PWEB HTMLPWEB HTML
PWEB HTML
 
Langkah awal-membuat-html
Langkah awal-membuat-htmlLangkah awal-membuat-html
Langkah awal-membuat-html
 
Modul html
Modul htmlModul html
Modul html
 
Week 11 (Pengenalan Html 1) Student
Week 11 (Pengenalan Html 1)   StudentWeek 11 (Pengenalan Html 1)   Student
Week 11 (Pengenalan Html 1) Student
 
Modul Dasar HTML
Modul Dasar HTMLModul Dasar HTML
Modul Dasar HTML
 
Modul HTML Lanjut
Modul HTML LanjutModul HTML Lanjut
Modul HTML Lanjut
 
Laporan tugas project pemograman web
Laporan tugas project pemograman webLaporan tugas project pemograman web
Laporan tugas project pemograman web
 

Semelhante a 8.materi desain frame (ok)

3.struktur elemen html.pdf
3.struktur elemen html.pdf3.struktur elemen html.pdf
3.struktur elemen html.pdf
Ojik3
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
Samsuri14
 

Semelhante a 8.materi desain frame (ok) (20)

3.struktur elemen html.pdf
3.struktur elemen html.pdf3.struktur elemen html.pdf
3.struktur elemen html.pdf
 
Mengenal script html 2
Mengenal script html 2Mengenal script html 2
Mengenal script html 2
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
 
Modul html
Modul htmlModul html
Modul html
 
Pengenalan internet 13
Pengenalan internet 13Pengenalan internet 13
Pengenalan internet 13
 
01 html
01 html01 html
01 html
 
Pemrograman Internet - HTML (2)
Pemrograman Internet - HTML (2)Pemrograman Internet - HTML (2)
Pemrograman Internet - HTML (2)
 
Web html
Web htmlWeb html
Web html
 
02 mengenal html
02 mengenal html02 mengenal html
02 mengenal html
 
HTML
HTMLHTML
HTML
 
Pengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverPengenalan Macromedia Dreamweaver
Pengenalan Macromedia Dreamweaver
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Modul web-design
Modul web-designModul web-design
Modul web-design
 
Pemrograman Web - Pembuatan HTML
Pemrograman Web - Pembuatan HTMLPemrograman Web - Pembuatan HTML
Pemrograman Web - Pembuatan HTML
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
 
Pembinaan laman web peringkat permulaan
Pembinaan laman web peringkat permulaanPembinaan laman web peringkat permulaan
Pembinaan laman web peringkat permulaan
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
 

Mais de Nacha Evangelion

Mais de Nacha Evangelion (10)

Css dasar-lanjut
Css dasar-lanjutCss dasar-lanjut
Css dasar-lanjut
 
7.materi membuat form (ok)
7.materi membuat form (ok)7.materi membuat form (ok)
7.materi membuat form (ok)
 
6.materi pemanfaatan tabel (ok)
6.materi pemanfaatan tabel (ok)6.materi pemanfaatan tabel (ok)
6.materi pemanfaatan tabel (ok)
 
5.menyisipkan gambar & link (ok)(2)
5.menyisipkan gambar & link (ok)(2)5.menyisipkan gambar & link (ok)(2)
5.menyisipkan gambar & link (ok)(2)
 
5.menyisipkan gambar & link (ok)
5.menyisipkan gambar & link (ok)5.menyisipkan gambar & link (ok)
5.menyisipkan gambar & link (ok)
 
4.format html (ok)
4.format html (ok)4.format html (ok)
4.format html (ok)
 
3.elemen dasar html (ok)
3.elemen dasar html (ok)3.elemen dasar html (ok)
3.elemen dasar html (ok)
 
2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)
 
2.pendahuluan
2.pendahuluan2.pendahuluan
2.pendahuluan
 
Www.0fees.net
Www.0fees.netWww.0fees.net
Www.0fees.net
 

8.materi desain frame (ok)

  • 3. Elemen Frame • Format untuk membuat frame pada halaman web adalah dengan menggunakan perintah : <FRAMESET> <NOFRAMES> diabaikan jika browser mampu menampilkan frame </NOFRAMES> </FRAMESET>
  • 5. Atribut-atribut Frame Catatan: Untuk membuat halaman web yang memiliki frame biasanya akan dibuat satu halaman web utama yang memiliki frame ditambah dengan file-file HTML lainnya yang digunakan sebagai sumber untuk frame tersebut.
  • 6. Contoh • (Satu.html) <html> <body bgcolor="#008080"> <h1 align="center"><font face="Arial">Halaman Satu dari File Satu.Html </font></h1> </body></html> • (Dua.html) <html> <body bgcolor="#ff0080"> <h1 align="center"><font face="Arial">Halaman Dua dari File Dua.Html</font></h1> </body></html>
  • 7. Contoh (Lanjutan) • (Tiga.html) <html> <body bgcolor="#aa00ff"> <h1 align="center"><font face="Arial">Halaman tiga dari File tiga.Html</font></h1> </body></html>
  • 8. Penggabungan ke frame (1) • Frame dengan framerows : <html> <frameset rows="80,*"> <noframes>maaf hanya bisa tampil pada web yang mendukung frame</noframes> <frame src="satu.html" name="atas" scrolling="no" noresize> <frame src="dua.html" name="bawah"> </frameset> <html>
  • 10. Penggabungan ke frame (2) • Frame dengan framecols : <html> <frameset cols="200,*"> <noframes>maaf hanya bisa tampil pada web yang mendukung frame</noframes> <frame src="satu.html" name="kiri" scrolling="no" noresize> <frame src="dua.html" name="kanan"> </frameset> <html>
  • 11. Hasil
  • 12. Gabungan dari framecols dan framerows <html> <frameset rows=20%,* border=10 bordercolor="red"> <noframes>maaf hanya bisa tampil pada web yang mendukung frame</noframes> <frame src="satu.html" name="atas" scrolling="no" noresize> <frameset cols=30%,*> <frame src="dua.html" name="bawah"> <frame src="tiga.html" name="bawah"> </frameset> </frameset> <html>
  • 13. Hasil