HTML base tag | belajar <base> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML base tag. Tutorial dan panduan mengenai element <base />. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <base>.

Deskripsi
Penjelasan HTML base

HTML base element digunakan untuk menentukkan document base URL (URL dasar sebuah dokumen), artinya kita membuat sebuah alamat URL sebagai sandaran untuk semua relative URL. Untuk lebih jelasnya, lihat penjelasan berikut contohnya pada halaman di bawah.

Dalam sebuah dokumen tidak boleh menuliskan lebih dari satu element base

Di dalam element base harus menyertakan attribute href, target ataupun keduanya.

Attributes
Atribut HTML Tag <base>

href

Menentukkan URL base (URL dasar) untuk semua relative URL di dalam halaman.

Value: (URL)

target

Menentukkan konteks jelajah dokumen yang di link, bagaimana cara membuka halaman yang dirujuk dari link tersebut?

Value: _blank | _parent | _self | _top | nama frame

Global Attributes
Atribut Secara Global (Keseluruhan)

<base> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<base> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <base> element

HTML 
<!DOCTYPE html>

<html>
  <head>
    <base href="/media/images/" target="_blank">
  </head>
  <body>
    <p>
    <img src="apacara.com.png" alt="" />
    </p>

    <p>
    <a href="http://www.apacara.com">Kunjungi apacara.com</a>.
    </p>
  </body>
</html>
Penjelasan:

Pertama, kita menulis markup <base href="alamat yang dijadikan URL dasar" target="target url" > didalam element <head> sebuah dokumen web (lihat baris 5). Kemudian, pada baris ke-9 kode diatas, kita cukup menulis nama file yang terletak pada base url tersebut (baris 5), sehingga baris ke-9 tersebut menjadi <img src="https://www.apacara.com/images/apacara.com.png">. Selanjutnya, pada baris ke-13 link tersebut menggunakan target attribute pada base element (baris 5) sehingga menjadi <a href="http://www.apacara.com" target="_blank">Kunjungi apacara.com</a>.

SOURCE
editor 
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML base element</title>
    <base href="/media/images/" target="_blank">
    <style>
      img {
        float: left;
        margin-right: 1em;
      }
    </style>
  </head>

  <body>

  <p>
  <img src="apacara.com.png" alt="" />
  Logo apacara.com disamping ini aslinya terletak pada relative URL: "/media/images/apacara.com.png" akan tetapi, disini hanya ditulis nama filenya saja (apacara.com.png) atau lebih jelasnya <code>img src="apacara.com.png"</code>. Kenapa bisa demikian? karena kita sudah menuliskan elemen <code>base</code> dengan rujukan link dasarnya yaitu: "/media/images/"  (value dari href attribute pada base element tersebut), sehingga kita tidak perlu menulis secara lengkap cukup nama file yang merujuk pada base url tersebut .
  </p>

  <p>
  <a href="http://www.apacara.com">Kunjungi apacara.com</a>.
  Link ini akan terbuka pada jendela baru, karena pada element <code>base</code> kita sudah menentukan "target=_blank" yang artinya dibuka pada jendela/tab baru untuk semua URL dasarnya.
  </p>
  </body>
</html>
SHARE
Previous Article Next Article