Dalam pembuatan website perlu kita ketahui beberapa dasar-dasar dalam pembuatannya, terutama pada sisi tampilan atau interface web yang akan kita bangun. Namun saat sekarang ini sudah banyak sekali developer yang menyediakan template secara free hingga peremium/berbayar dengan tampilan yang sudah didukung dengan berbagai fitur tambahan yakni menggunakan HTML5, CSS, Boostrap, JQuery, dan lain-lain.
Pada materi kali ini akan dibahas cara membangun tampilan website secara sederhana dengan menggunakan Frame pada HTML.
Frame yaitu teknik dalam menata atau membagi tampilan/window menjadi beberapa bagian. Yakni membagi posisi header, content, menu, sidebar, dan lain-lain.
Pada materi ini akan dibahas tentang :
- FRAME HTML
- TAG FRAMESET
- TAG FRAME
- ATRIBUT COLS
- ATRIBUT ROWS
- ATRIBUT BORDER & BORDERCOLOR
- ATRIBUT MARGINHEIGHT
- ATRIBUT MARGINWIDTH
- ATRIBUT SCROLLING
- ATRIBUT NORESIZE
- IFRAME
- PENAMAAN dan LINK
Frame HTML
Frame HTML digunakan untuk menampilkan beberapa web page yang ditampilkan dalam satu window browser baik secara vertical dan horizontal.
TAG FRAMESET
FRAMESET berfungsi untuk membagi isi jendela web browser menjadi beberapa bagian. Element ini mempunyai attribute yaitu:
- Cols (membagi jendela berdasarkan kolom)
- Rows (membagi jendela berdasarkan baris)
- Border
- Bordercolor
- Frameborder (untuk menampilkan border frame)
- Framespacing (spasi antara frame)
Sintaks :
<frameset
cols=”list” (dapat berupa pixel maupun %)
rows=”list” (dapat berupa pixel maupun %)
border=”pixel”
bordercolor=”color”
frameborder=”yes”|”no”
framespacing=”pixel”>
………………………
</frameset>
TAG FRAME
Tag FRAME mendefinisikan frame yang terdapat dalam frameset. Tag ini mempunyai attribute yaitu:
- Name (nama frame)
- Marginheight
- Marginwidth
- Bordercolor
- Frameborder
- Noresize
- Scrolling
- Src (dokumen yang ditampilkan pada frame).
Tag <frame> tidak mempunyai tag penutup.
Sintak penukisan :
<frame
name=”name”
marginheight=”pixel”
maginwidth=”pixel”
bordercolor=”color”
frameborder=”yes”|”no”
noresize
scrolling=”yes”|”no”
src=”URL”
>
contoh frameset cols :
framecols.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<frameset cols="15%,85%">
<frame src="abutua.html">
<frame src="hijautua.html">
</frameset>
</html>
abutua.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#808080">
</body>
</html>
hijautua.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#008080">
</body>
</html>
Catatan : ketiga file tersebut disimpan dalam 1 folder.
Hasilnya :
Dari contoh di atas terlihat farmeset akan membagi halaman secara vertical dengan menggunakan kolom (cols). Tampak bahwa frame abutua.html lebarnya paling kecil (15%), sedangkan hiajutua.html paling besar (85%). Besarnya tersebut sesuai dengan urutan penulisan nilai untuk atribut cols, dimana pada atribut cols di frameset pertama tertulis 15% selanjutnya 85%, berikutnya pada tag frame urutan penulisan frame src=”abutua.html” lebih dahulu kemudian frame src=”hijantua.html”. Artinya halaman abutua.html lebarnya 15% dan hijautua.html lebarnya 85%.
contoh frameset rows :
framerows.html :
<html>
<head>
<title>Latihan Frame Rows</title>
</head>
<frameset rows="75%,25%">
<frame src="abutua.html">
<frame src="hijautua.html">
</frameset>
</html>
abutua.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#808080">
</body>
</html>
hijautua.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#008080">
</body>
</html>
Catatan : ketiga file tersebut disimpan dalam 1 folder.
Hasilnya :
Dari contoh di atas terlihat farmeset akan membagi halaman secara horizontal dengan menggunakan baris (rows). Tampak bahwa frame abutua.html tingginya paling besar (75%), sedangkan hiajutua.html paling kecil (25%). Besarnya tersebut sesuai dengan urutan penulisan, dimana pada atribut rows di frameset pertama tertulis 75% selanjutnya 25%, berikutnya pada tag frame urutan penulisan frame src=”abutua.html” lebih dahulu kemudian frame src=”hijantua.html”. Artinya halaman abutua.html tingginya 75% dan hijautua.html tingginya 25%.
contoh frameset cols dan rows :
framecolsrows.html :
<html>
<head>
<title>Latihan Frame 1</title>
</head>
<frameset cols="15%,85%">
<frame src="abutua.html">
<frameset rows="75%,25%">
<frame src="abumuda.html">
<frame src="hijautua.html">
</frameset>
</frameset>
</html>
abutua.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#808080">
</body>
</html>
abumuda.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#c0c0c0">
</body>
</html>
hijautua.html
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#008080">
</body>
</html>
Catatan : ketiga file tersebut disimpan dalam 1 folder.
Hasilnya :
Dari contoh di atas merupakan gabungan antara cols dan rows, terlihat farmeset akan membagi halaman secara vertical dengan menggunakan kolom (cols). Tampak bahwa frame abutua.html lebarnya 15%, selanjutnya sisanya yang 85% dibagi lagi secara vertical dengan mennggunakan baris (rows) dengan prosentase 75% dan 25%. Baris 75% diisi dengan abumuda.html, sedangkann 25% diisi hijautua.html.
TAG NOFRAMES
Element NOFRAME mendefinisikan isi yang akan ditampilkan jika suatu frame tidak dapat diakses .
Sintaks:
<noframes> ………………… </noframes>
Contoh :
<html>
<head>
<title>Latihan No Frame</title>
</head>
<frameset cols="25%,75%">
<frame src="nav.html">
<frame src="content.html">
</frameset>
<noframes>
<body>
halaman tidak ada
</body>
</noframes>
</html>
ATRIBUT BORDER & BORDERCOLOR
contoh :
frameborder.html
<html>
<head>
<title>Latihan Frame Rows</title>
</head>
<frameset rows="75%,25%">
<frame src="hijau.html">
<frame src="oranye.html">
</frameset>
</html>
hijau.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#45b34a">
</body>
</html>
oranye.html :
<html>
<head>
<title>Latihan Frame Cols</title>
</head>
<body bgcolor="#f7af30">
</body>
</html>
Hasilnya :
ATRIBUT MARGINHEIGHT
Marginheight = untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi frame.
contoh :
<html>
<head>
<title>Latihan Marginheight</title>
</head>
<frameset cols="15%,*" border="10" bordercolor="#F87D06">
<frame src="Nav.html">
<frame src="Text.html" marginheight="50">
</frameset>
</html>
Hasilnya :
ATRIBUT MARGINHEIGHT
Marginwidth = untuk menentukan jarak antara batas kiri atau batas kanan frame dengan isi frame.
contoh :
<html>
<head>
<title>Latihan Marginwidth</title>
</head>
<frameset cols="15%,*" border="10" bordercolor="#F87D06">
<frame src="Nav.html">
<frame src="Text.html" marginwidth="50">
</frameset>
</html>
Hasilnya :
ATRIBUT SCROLLING
Contoh :
Pada contoh diatas tidak menggunakan atribut scrolling, contoh di bawah menggunakan atribut scrolling, perhatikan perbedaannya.
<html>
<head>
<title>Latihan Scrolling</title>
</head>
<frameset cols="15%,*" border="10" bordercolor="#F87D06">
<frame src="Nav.html">
<frame src="Text.html" marginheight="10" marginwidth="10" scrolling="no">
</frameset>
</html>
Hasilnya :
ATRIBUT NORESIZE
<html>
<head>
<title>Latihan Noresize</title>
</head>
<frameset cols="15%,*" border="10" bordercolor="#F87D06">
<frame src="Nav.html" norsize>
<frame src="Text.html" marginheight="10" marginwidth="10">
</frameset>
</html>
Hasilnya :
TAG IFRAME
Inline frame atau iframe adalah salah satu cara untuk menciptakan sebuah ‘jendela’ dalam halaman web yang mampu menampilkan dokumen terpisah di dalam jendela yang tanpa reload seluruh halaman.
Beberapa atribut yang sering di pasang dalam iframe adalah :
- ALIGN=”left/right”
- WIDTH=”lebar”
- HEIGHT=”tinggi”
- FRAMEBORDER=”garis pembatas”
- SCROLLING=”auto/yes/no”
- SRC=”url yg ingin di tampilkan”
Contoh :
PENAMAAN DAN LINK
script untuk gambar di atas adalah :
index.html :
<html>
<head>
<title>Latihan Frame Link</title>
</head>
<frameset rows="10%,80%,10%">
<frame src="header.html">
<frameset cols="20%,*">
<frame name="kiri" src="nav.html" norsize>
<frame name="kanan" src="main.html">
</frameset>
<frame src="footer.html">
</frameset>
</html>
header.html :
<html>
<head>
<title>Header</title>
</head>
<body bgcolor="#ffff00" scrolling="no">
<center><h2>HEADER</h2></center>
</body>
</html>
footer.html :
<html>
<head>
<title>Footer</title>
</head>
<body bgcolor="#8ccef7" scrolling="no">
<center><h2>HEADER</h2></center>
</body>
</html>
nav.html :
<html>
<head>
<title>Navigation</title>
</head>
<body bgcolor="#808080" text="white" alink="#F8B9F0" link="#fed158" vlink="#a8fa9d">
<h2>Navigation</h2>
<a href="main.html" target="kanan">Home</a><br>
<a href="putih.html" target="kanan">Halaman Putih</a><br>
<a href="hijau.html" target="kanan">Halaman Hijau</a><br>
<a href="oranye.html" target="kanan">Halaman Oranye</a><br>
<a href="pink.html" target="kanan">Halaman Pink</a><br>
<a href="merah.html" target="kanan">Halaman Merah</a><br>
</body>
</html>
main.html :
<html>
<head>
<title>Footer</title>
</head>
<body bgcolor="#e6fdcc">
<center><h2>Halaman Utama</h2></center>
</body>
</html>
putih.html :
<html>
<head>
<title>Footer</title>
</head>
<body bgcolor="white">
</body>
</html>
untuk script hijau.html, oranye.html, pink.html dan merah.html hampir sama dengan putih.html, hanya beda di atribut bgcolor-nya saja.