Tuesday, 8 August 2017

Bagaimana Cara Membuat Frame Pada HTML


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, dll.

Akan tetapi bahasan kali ini saya berusaha mengangkat kembali bagaimana cara membangun tampilan website secara sederhana dengan hanya menggunakan Frame dengan HTML dasar.
Frame yaitu teknik dalam menata atau memabagi tampilan/window menjadi beberapa bagian. Yakni membagi posisi header, content, menu, sidebar, dll.

Adapun kiat-kiat yang perlu kita lakukan dalam pembuatan website menggunakan farme seperti pada gambar diatas :

1. Buatlah script seperti yang ada dibawah ini, dan simpan dengan nama file index.html.

<html>
<head>
<title>.:Basic Web:.</title>
</head>

<frameset rows="20%,80%" border="1">
<frame name="header" src="header.html"></frame>
<frameset cols="20%,60%,20%" border="1">
<frame name="menu" src="menu.html"></frame>
<frame name="content" src="content.html"></frame>
<frameset rows="30%,30%,30%" border="1">
<frame name="sidebar1" src="sidebar1.html"></frame>
<frame name="sidebar2" src="sidebar2.html"></frame>
<frame name="sidebar3" src="sidebar3.html"></frame>
</frameset>
</frameset>
</frameset>

</html>
Note : Dalam pembagian layar perlu kita pahami bahwa layar diasumsikan dengan persentase yakni dengan asumsi 100%.

2. Buatlah script seperti yang ada dibawah ini, dan simpan dengan nama file header.html yang berfungsi sebagai header pada website kita.

html>
<head>
<title>header</title>
</head>
<body bgcolor="blue">
<!-- <marquee behavior="scroll"> -->
<center>
<font color="white"><h1>WELCOME TO MY WEBSITE</h1></font>
</center>
<!-- </marquee> -->
</body>
</html>

3. Buatlah script seperti yang ada dibawah ini, dan simpan dengan nama file menu.html yang berfungsi sebagai menu pada website kita.

<html>
<head>
<title>menu</title>
</head>
  <body bgcolor="yellow">
    <br>
    <a href="#">HOME</a>
    <br>
    <br>
    <a href="#">MY GALLERY</a>
    <br>
    <br>
    <a href="#">MY SCHEDULE</a>
</body>
</html>

4. Buatlah script seperti yang ada dibawah ini, dan simpan dengan nama file content.html yang berfungsi sebagai Content pada website kita.

<html>
<head>
<title>content</title>
</head>
<body bgcolor="green">
 <h3>seperti inilah isi-isinya haha</h3>
</body>
</html>

5. Buatlah script seperti yang ada dibawah ini, dan simpan dengan nama file sidebar1.html yang berfungsi sebagai sidebar atau tambahan tampilan pada website kita.

<html>
<head>
<title>sidebar1</title>
</head>
<body bgcolor="red">
<h2>sidebar 1</h2>
</body>
</html>

6. Buatlah script seperti yang ada dibawah ini, dan simpan dengan nama file sidebar2.html yang berfungsi sebagai sidebar pada website kita.

<html>
<head>
<title>sidebar2</title>
</head>
<body bgcolor="gray">
<h2>sidebar 2</h2>
</body>
</html>

7. Buatlah script seperti yang ada dibawah ini, dan simpan dengan nama file sidebar3.html yang berfungsi sebagai sidebar pada website kita.

<html>
<head>
<title>sidebar3</title>
</head>
<body bgcolor="orange">
<h2>sidebar3</h2>
</body>
</html>

Setelah semua script sudah dibuat maka simpanlah file pada satu folder untuk memudahkan dalam menjalankan script HTML yang sudah kita buat. Dan untuk melihat tampilan website yang kita bangun menggunkan frame maka bukalah file index.html.

Selamat Mencoba :).

0 comments:

Post a Comment