KEROPIS: Cara Membuat Frame di HTML

Cara Membuat Frame di HTML

Okey jadi sekarang akan mempelajari bagaimana cara membuat frame set pada HTML, sebelumnya terimakasih telah mengunjungi my blog Elsa Raysa .

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 :

KEROPIS

Mengenai Saya

Kamis, 11 Oktober 2018

Cara Membuat Frame di HTML

Cara Membuat Frame di HTML

Contoh membuat frame di HTML

Membuat folder baru

Membuat file HTML

Tidak ada komentar:

Posting Komentar