Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML

BELAJAR HTML | Cara Membuat Halaman Lebih Dari Satu Pada HTML

Oleh Wahyup Posting Komentar
Haii Selamat datang kembali di Awonapa JR, apakabar teman teman sekalian? Semoga Selalu sehat yah.
Untuk kesempatan kali ini kita akan membahas mengenai, Cara Membuat Halaman Lebih dari Satu Pada HTML.

Membuat Halaman Web

Sebelumnya apakah kalian sudah pernah mempelajari bagaimana cara halaman satu ke halaman lain bisa terhubung di dalam HTML.
itu mudah saja karena seperti Pipa yang memiliki sambungan di setiap tujuan yang berbeda.

Jadi disini pada file HTML, kita membuat 2 file HTML. yang pada setiap file HTML nya terdapat link yang saling mengarah ke file HTML kedua nya.
Beberapa contoh untuk link yaitu Home, Kontak, Tentang, atau daftar isi dan lain lain.

Oke langsung saja kita coba untuk membuat nya.

  1. Pastikan sudah siapkan sebuah file.html yang akan di edit untuk membuat link ke halaman lain. jika belum membuat silahkan untuk membaca artikel ini. BELAJAR HTML | Mempelajari Dasar Kerangka HTML
  2. Jika sudah membuat file index.html, kita akan membuat satu lagi file. kontak.html

    Ini adalah file index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Awonapa JR</title>
    </head>
    <body>
        <!-- Kita tambahkan link yang menghubungkan antara kedua file html tersebut-->
        <div>
            <a href="index.html"> Home </a>
            <a href="kontak.html"> Kontak </a>
        </div>

        <h1>Selamat Datang Di Web Awonapa JR</h1>
        <p>Ini adalah halaman utama dari website Awonapa Jr</p>
        <div>
            <p>Silahkan Kunjungi Fanspage kami.</p>
            <a href="www.facebook.com">Fanspage Facebook</a>
            <img src="html.png" height="100" width="200" />
            <a href="www.facebook.com">Fanspage Twitter</a>
        </div>
    </body>
</html>

Hasil dari tampilan diatas adalah seperti ini.

Hasil Halaman satu
pada bagian atas gambar terdapat link ke Home, Kontak, dan anda bisa menambahkan lagi.

3. Pada tahap berikutnya adalah kita akan membuat sebuah file kontak.html

<!DOCTYPE html>
<html>
    <head>
        <title>Kontak</title>
    </head>

    <body>
        <!-- Kita tambahkan link yang menghubungkan antara kedua file html tersebut-->

        <div>
            <a href="index.html"> Home </a>
            <a href="kontak.html"> Kontak </a>
        </div>

        <h1>Selamat Datang Di Web Awonapa JR</h1>

        <p>Ini adalah halaman kontak dari website Awonapa Jr</p>
    </body>
</html>


Maka hasil dari script di atas adalah seperti ini.

Hasil Halaman 2
Oke sudah bisa di pahami yah.
Oiya jika teman teman ingin membuat sebuah folder untuk file html tersebut maka script pada pemanggilan nya akan berganti.

Contoh:
  • Jika file index.html berada di luar dan kontak.html berada di dalam folder maka script nya akan berubah di keduanya
    • pada file index.html maka akan berubah seperti ini
<!DOCTYPE html>
<html>
    <head>
        <title>Awonapa JR</title>
    </head>

    <body>
        <!-- Kita tambahkan link yang menghubungkan antara kedua file html tersebut-->
        <div>
            <a href="index.html"> Home </a>
            <a href="kontak/kontak.html"> Kontak </a>
        </div>

        <h1>Selamat Datang Di Web Awonapa JR</h1>
        <p>Ini adalah halaman utama dari website Awonapa Jr</p>

        <div>
            <p>Silahkan Kunjungi Fanspage kami.</p>
            <a href="www.facebook.com">Fanspage Facebook</a>
            <img src="html.png" height="100" width="200" />
            <a href="www.facebook.com">Fanspage Twitter</a>
        </div>
    </body>
</html>
    • Namun pada file kontak.html akan menjadi seperti ini.
<!DOCTYPE html>
<html>
    <head>
        <title>Kontak</title>
    </head>

    <body>
        <!-- Kita tambahkan link yang menghubungkan antara kedua file html tersebut-->

        <div>
            <a href="../index.html"> Home </a>
            <a href="kontak.html"> Kontak </a>
        </div>

        <h1>Selamat Datang Di Web Awonapa JR</h1>

        <p>Ini adalah halaman kontak dari website Awonapa Jr</p>
    </body>
</html>
    Jika teman teman  pernah mempelajari perpindahan folder di linux, maka akan mengerti arti dari ../ maksudnya adalah, 
      • jika anda di dalam sebuah folder satu dan anda ingin keluar dari folder satu anda bisa menggunakan perintah ../
        • hal itu bekerja pada CLI saja. jika tampilan nya GUI kamu tidak perlu repot repot.
        Oke jadi sekian yah yang kita bahas Kesempatan kali ini. selanjutnya kita akan membahas hal lain menarik dari HTML ini.
        Terimakasih!!

        Posting Komentar untuk "BELAJAR HTML | Cara Membuat Halaman Lebih Dari Satu Pada HTML"