BELAJAR HTML : MEMBUAT FRAME DENGAN HTML ~ AjiBoril's

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 :

1

<frameset>... frameset>

Format penulisan elemen tag frame :

1

<frame> .. </frame>

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

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<frameset>

     <frame>

     <!-- isi frame yang akan di panggil -->

     </frame>

</frameset>

</html>

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML : farme</title>

</head>

<frameset rows="20%,*,10%" border="1">

    <frame name="header" src="header.html"></frame>

    <frameset cols="25%,*" border="1">

        <frame name="sidebar" src="sidebar.html"></frame>

        <frame name="konten" src="conten.html"></frame>

    </frameset>

    <frame name="footer" src="footer.html"></frame>

</frameset>

</html>

Simpan kembali file tersebut.
Buat file baru dengan nama header.html kemudian simpan di dalam folder frame
Di file header.html isikan kode berikut :

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<head>

<title>header</title>

</head>

<body bgcolor="yellow">

<h1>ini header</h1>

</body>

</html>
Simpan kembali file tersebut
Buat file baru dengan nama sidebar.html kemudian simpan di folder farme
Di file sidebar.html isikan kode berikut :

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<head>

<title>sidebar</title>

</head>

<body bgcolor="grey">

<h3>ini sibebar</h3>

</body>

</html>
Simpan file tersebut
Buat file baru dengan nama conten.html kemudian simpan di folder frame
Di file conten.html isikan kode berikut :

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<head>

<title>conten</title>

</head>

<body>

<h3>ini konten</h3>

</body>

</html>
Simpan kembali file tersebut.
Buat file baru dengan nama footer.html kemudian simpan di dalam folder fame

Di file footer.html isikan kode brikut :

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

<title>footer</title>

</head>

<body>

     <center>

         <h3>ini footer</h3>

     </center>

</body>

</html>

Simpan kembali file tersebut

Untuk melihat hasilnya buka file index.html di browser

maka akan terlihat sebagai berikut :

Untuk download source code frame silahkan klik disini

artikel selanjutnya :

Cara Membuat Form di HTML

AjiBoril's

adalah blog tentang informasi dan tutorial konfigurasi system komputer

Minggu, 19 Mei 2019