Tutorial HTML <base>
HTML base Tag - Belajar html
<base>, html <base> berfungsi sebagai Penentu Url dasar dari sebuah dokumen. Maksudnya adalah kita dapat membuat dasar dari semua url atau link relative.
Penempatan element
<base> harus di tempatkan di dalam elemen <head>. dan itupan hanya diperbolehkan menggunakan 1 elemen saja.
Di dalam element
<base> diikuti attribute href dan attribute target.
Penggunaan element
<base> sangat tepat untuk blog / website yang mempunyai Fasilitas explorer data website misal: website / blog yang menggunakan Cpanel, karna dengan Cpanel kita bisa menentukan Folder dan sub folder yang kita tentukan.
Tips dan saran :
Untuk Pengguna Blogger.com, kita masih bisa mencoba trik tersebut dengan menggunakn fasilitas file hosting external, baik itu dropbox , sites.google.com dan lain sebagainya...
Saran : jika cara ini dirasa hanya memperlambat proses ngeblog, lebih baik jangan menggunakan trik ini. Karena jika salah penerapan, yang ada hanya membuat link dari url menjadi link mati atau url tidak ditemukan.
Contoh 1:
Metode berikut dengan menargetkan url sebuah image.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/untukpublictriksonic/' target='_blank'/>
</head>
<body>
<img alt='demo' src='gambar/base.png' title='demo' />
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <base href='https://sites.google.com/site/untukpublictriksonic/' target='_blank'/> </head> <body> <img alt='demo' src='gambar/base.png' title='demo' /> </body> </html>
Contoh 2:
Metode berikut dengan menargetkan url sebuah Link.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='http://triksonic.blogspot.com/' target='_blank'/>
</head>
<body>
<a href="2016/07/html-tag-a-belajar-element-a.html">
html tag <code>a</code>
</a>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <base href='http://triksonic.blogspot.com/' target='_blank'/> </head> <body> <a href="2016/07/html-tag-a-belajar-element-a.html"> html tag <code>a</code> </a> </body> </html>
Contoh 3:
Metode berikut dengan menargetkan url sebuah file audio.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Triksonic</title>
<base href="https://sites.google.com/site/wp20zrt4/mp3/" target="_blank">
</head>
<body>
<p><strong>Pastikan perangkat audio anda aktif</strong></p>
<audio src="guitar.mp3" controls="controls"></audio>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo Triksonic</title> <base href="https://sites.google.com/site/wp20zrt4/mp3/" target="_blank"> </head> <body> <p><strong>Pastikan perangkat audio anda aktif</strong></p> <audio src="guitar.mp3" controls="controls"></audio> </body> </html>
Atribut :
| Attibute | Value | Deskripsi |
|---|---|---|
href |
url | url dasar dalam penentuan url relative |
target |
|
menentukan target dari sebuah url |
Global Attributes:
Element
<base> mencakup Global Attributes HTML.
Event Attributes:
Element
<base> tidak mendukung Event Attributes apapun.
Browser Support :
Desktop
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | 1 |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<base>, biasanya mempunyai nilai default :
/* tidak ada */