Tutorial Membuat Frame HTML
"Tutorial membuat Frame HTML, Cara membuat frameset HTML dan konsep membuat template website, fungsi dan kegunaan frame HTML."
4 min read
Tutorial Membuat <Frame> HTML - Frame adalah cara membagi window atau jendela ke dalam beberapa bagian. Pada intinya, sebuah template website itu terbagi atas beberapa bagian utama, yaitu header, sidebar, isi, dan footer. Dan semua bagian tersebut dapat dibuat dan dipanggil dengan masing-masing dokumen. |
| Membuat frame HTML |
Keuntungan menggunakan frame adalah mudahnya mengelola tampilan website. Karena setelah kita membuat hubungan antara dokumen dan memanggilnya untuk tampil di halaman depan website, maka yang perlu kita edit adalah tampilan-tampilannya pada setiap bagian. Untuk lebih jelasnya, ikuti cara membuat frame HTML di bawah ini.
Tutorial Lengkap Cara Membuat Frame HTML Sederhana
Berikut langkah-langkah membuat frame HTML.
Buatlah folder baru di mana saja di my computer. Folder baru ini dimaksudkan untuk meletakkan semua file yang dibutuhkan dalam membuat frame, yaitu sebagai berikut.
 |
| Cara membuat frame html |
- Buat folder baru dengan nama html dan letakkan di drvie C.
- Buat file HTML dengan nama sebagai berikut.
- 1.html
Copy script di bawah ini dan paste ke notepad dan simpan dengan nama 1.html dan type files all files.
<html>
<head>
<title>Tema</title>
<frameset rows=20%,*>
<frame name=header src="header.html">
<frameset cols=30%,70%,*>
<frame src="C:HTML/2.html" name="2">
<frame src="C:HTML/3.html" name="3">
</frameset>
</head>
<body>
</body>
</html>
File HTML 1 adalah file yang akan menjadi tampilan utama dari website kita nantinya.
- 2.html
Buat file html dengan nama 2.html dengan type files all files copy script HTML di bawah ini.
<H3>DAFTAR MENU</h3>
<ol>
<ul><img src="1.jpg" width="25px" height="25px"/> Bakso</ul>
<ul><img src="1.jpg" width="25px" height="25px"/> Kopi</ul>
<ul><img src="1.jpg" width="25px" height="25px"/> Mi Ayam</ul>
<ul><img src="1.jpg" width="25px" height="25px"/> Teh</ul>
</ol>
File html 2 ini terletak di sebelah kiri website.
- 3.html
Copy script ini ke dalam Notepad dan save as dengan nama 3.html dengan type files all files.
<table border="3" width=100%>
<tr>
<th>MENU</th>
<th>HARGA</th>
</tr>
<tr>
<td>Bakso</td>
<td>Rp32.000</td>
</tr>
<tr>
<td>Kopi</td>
<td>Rp20.000</td>
</tr>
<tr>
<td>Mi Ayam</td>
<td>Rp20.000</td>
</tr>
<tr>
<td>Teh</td>
<td>Rp20.000</td>
</tr>
</table>
Ini adalah tampilan isi dari website.
- header.html
Dan yang terakhir, buat file HTML dengan nama header.html dan save dengan type all files.
<marquee behavior="alternate">
<img src="1.jpg" width="25px" height="25px"/></marquee>
Ini adalah tampilan header atau kepala website. Pada menu ini saya mengisikan tag frame untuk membuat teks atau gambar berjalan.
Langkah terakhir adalah membuka file 1.html dengan web browser. Berikut tampilan website yang dibuka dengan Google Chorme menggunakan script di atas.
Untuk desain tampilannya, silahkan buat sesuka hati dan pelajari script di atas dengan seksama. Intinya seperti itulah pembuatan frame HTML untuk membagi window ke dalam beberapa bagian. Bagian paling atas atah header.html, bagian kiri adalah 2.html dan bagian isi kolom kedua yang berisi tabel adalah 3.html.
Pada dasarnya, tag frame html di atas merupakan konsep dasar yang perlu diketahui dalam pembuatan sebuah template website. Dan kegunaan lain dari frame yang paling umum digunakan adalah memanggil halaman website lain, seperti fanspage Facebook ke dalam website.
Demikianlah tutorial mudah cara membuat frame html. Dengan adanya fitur frame html ini, kita dapat mendesain tampilan website menjadi lebih mudah. Semoga bermanfaat.
<img src="1.jpg" width="25px" height="25px"/></marquee>
Ini adalah tampilan header atau kepala website. Pada menu ini saya mengisikan tag frame untuk membuat teks atau gambar berjalan.
Langkah terakhir adalah membuka file 1.html dengan web browser. Berikut tampilan website yang dibuka dengan Google Chorme menggunakan script di atas.
|
| Membuat frame HTML |
Untuk desain tampilannya, silahkan buat sesuka hati dan pelajari script di atas dengan seksama. Intinya seperti itulah pembuatan frame HTML untuk membagi window ke dalam beberapa bagian. Bagian paling atas atah header.html, bagian kiri adalah 2.html dan bagian isi kolom kedua yang berisi tabel adalah 3.html.
Pada dasarnya, tag frame html di atas merupakan konsep dasar yang perlu diketahui dalam pembuatan sebuah template website. Dan kegunaan lain dari frame yang paling umum digunakan adalah memanggil halaman website lain, seperti fanspage Facebook ke dalam website.
Untuk yang ingin download script HTML Frameset ini, silahkan
Download script frame HTML
Demikianlah tutorial mudah cara membuat frame html. Dengan adanya fitur frame html ini, kita dapat mendesain tampilan website menjadi lebih mudah. Semoga bermanfaat.