Membuat File Source Frame Pada HTML

Aplikasi Pembuatan FRAME


http://websitecompletecoding.blogspot.co.id/
Sebelum kita membuat frame maka kita harus membuat beberapa file, dimana file-file tersebut akan ditampilkan dalam frame. Untuk itu mari kita coba membuat beberapa halaman website (dokumen HTML) lalu kita akan membuat sebuah halaman website utama yang terdiri dari beberapa frame.

Aplikasi pembuatan frame ini juga terkait dengan beberapa multibedia yang ada didalamnya, serta bisa menggabungkan atau menyatukan beberapa file mulitimedia di halaman website ini.


Buat File Source FRAME

Tentukan 3 (tiga) file yang akan diletakan dalam frame, atau jika belum buatlah file-file berikut ini :

File : website1.html
<html>

    <head>
        <title> Website 1 </title>
    </head>

    <body>
       
        <h2> Ini Website 1 </h2>
      
            <img src="Android.png" width="140" height="175">
        <!-- Website Complete Coding Blogspot -->
    </body>

</html>

File : website2.html
<html>

    <head>
        <title> Website 2 </title>
    </head>

    <body>
       
        <h2> Ini Website 2 </h2>
       
            <img src="Linux.png" width="150" height="170">
        <!-- Website Complete Coding Blogspot -->
    </body>

</html>

File : website3.html
<html>

    <head>
        <title> Website 3 </title>
    </head>

    <body>
        
        <h2> Ini Website 3 </h2>
      
            <img src="Apple.jpg" width="170" height="165">
        <!-- Website Complete Coding Blogspot -->
    </body>

</html>

Menampilkan 2 File Dalam 2 Frame

Selanjutnya mari kita buat file utama yang akan membuat file-file diatas. Pertama kita akan tampilkan 2 (dua) file ini kita beri nama "frame1.html" terdiri dari dua buah frame yang tersusun secara vertikal.

File : frame1.html
<html>

    <head>
        <title> Belajar Membuat Frame </title>
    </head>

        <frameset cols="50%,50%">
            <frame src="website1.html">
            <frame src="website2.html">
        </frameset>
        <!-- Website Complete Coding Blogspot -->
    </body>

</html>

Sekarang coba kita lihat hasilnya pada browser :

http://websitecompletecoding.blogspot.co.id/
Menggunakan frame dengan kolom

Sekarang kita merubah isi file frame1.html sehingga menampilkan dua frame dalam posisi horisontal, yaitu dengan mengganti atribut "cols" dengan "rows".

<html>

    <head>

        <title> Belajar Membuat Frame </title>

    </head>

        <frameset rows="50%,50%">

            <frame src="website1.html">

            <frame src="website2.html">

        </frameset>
        <!-- Website Complete Coding Blogspot -->
    </body>

</html>
Coba bandingkan dengan hasil sebelumnya, apa yang terjadi?

http://websitecompletecoding.blogspot.co.id/
Menggunakan frame dengan baris

Menampilkan 3 File Dalam 3 Frame Atau Lebih

Jika kita ingin membuat lebih dari 2 (dua) frame maka pada tag "<FRAMESET>" disertakan atribut "rows" atau "cols" dengan value lebih dari dua.

Pada contoh berikut ini akan dibuat 3 (tiga) frame dengan kombinasi atribut "rows" dan "cols".

File : frame2.html
<html>

        <head>
            <title> Belajar Membuat Frame </title>
        </head>

            <frameset rows="159,83" cols="*" border="5" bordercolor="red">

                <frame src="website1.html" />
                  
                    <frameset cols="170,400" frameborder="no">
                      
                        <frame src="website2.html" />
                      
                        <frame src="website3.html" />
                    </frameset>
            </frameset>
            <!-- Website Complete Coding Blogspot -->
</html>

Pemberian nlai rows dalam satuan pixel, tanda (*) adalah sisa area browser.

Mari kita lihat hasilnya pada browser :

http://websitecompletecoding.blogspot.co.id/
Frame dengan baris dan kolom

Untuk menampilkan 4 file dalam 4 frame dengan kombinasi atribut rows dan cols, anda dapat mencobanya dengan memasukan kedua atribut tersebut dalam satu <FRAMESET>.

Contoh :
<FRAMESET COLS="50%,*" ROWS="50%,*">
Sampai sini mudah bukan untuk dan cara membuat frame pada HTML, jika masih ada yang membingungkan kalian bisa tinggalkan komentar di bawah artikel ini. Dan bisa konsultasilangsung dengan saya untuk membahas tata cara membangun sebuah website yang anda buat.

Postingan terkait:

Belum ada tanggapan untuk "Membuat File Source Frame Pada HTML"

Posting Komentar