Skip to main content

A.3.13. Script & Link

Kali ini kita akan bahas dua tag penting dalam HTML yang sering digunakan untuk menghubungkan dokumen HTML dengan file eksternal, yaitu <script> dan <link>. Yuk, kita mulai! 🚀

A.3.13.1. Tag script​

Tag <script> digunakan untuk menyisipkan atau menghubungkan file JavaScript ke dalam halaman HTML temen-temen. JavaScript ini biasanya dipakai buat nambahin interaktivitas di website, seperti animasi, validasi form, atau manipulasi DOM. Berikut adalah contoh penggunaannya:

<!-- Menyisipkan JavaScript langsung di dalam HTML -->
<script>
  alert("Hola, Minna-san!");
</script>

<!-- Menghubungkan file JavaScript eksternal -->
<script src="path/to/file.js"></script>

Tag <script>diletakan sebelum penutup tag <body> ya temen-temen. Terdapat beberapa perbedaan di antara kode diatas, yaitu:

  • <script> dengan kode di dalamnya: Ini cara buat menyisipkan JavaScript langsung di halaman HTML. Biasanya dipakai buat kode-kode pendek atau spesifik.
  • src attribute: Menghubungkan file JavaScript eksternal ke halaman HTML. Dengan cara ini, temen-temen bisa memisahkan kode JavaScript dari file HTML, sehingga lebih rapi dan terorganisir.

Output

Output dari kode diatas adalah sebuah alert yang berisi pesan Hola, Minna-san! yang dibuat dengan menggunakan JavaScript.

Tag <link> digunakan untuk menghubungkan dokumen HTML dengan resource eksternal, biasanya file CSS (Cascading Style Sheets) yang mengatur tampilan dan layout halaman. Dengan tag ini, temen-temen bisa menambahkan _style_eksternal ke halaman web. Contohnya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A.3.13.2. Link</title>

    <!-- Menghubungkan file CSS eksternal -->
    <link rel="stylesheet" href="css/style.css" />

    <!-- Menghubungkan favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
  </head>

  <body></body>
</html>

Terdapat beberapa point penting dari kode diatas, diantaranya:

  • rel="stylesheet": Menandakan bahwa file yang terhubung adalah stylesheet, yang akan mengatur tampilan halaman HTML.
  • href attribute: Menentukan lokasi file CSS atau resource lainnya yang ingin temen-temen hubungkan.
  • rel="icon": Ini dipakai untuk menghubungkan favicon (ikon kecil yang muncul di tab browser) ke halaman web.

Output

Untuk file JavaScript yang besar atau dipakai di banyak halaman, sebaiknya temen-temen gunakan file eksternal dengan tag <script src="...">.

Letakkan tag <link> di dalam tag <head> dan tag <script> biasanya di bagian bawah halaman sebelum </body>agar halaman web temen-temen bisa dimuat dengan lebih cepat.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/a-html/chapter-A.3-tags-pada-html/chapter-A.3.13-script-dan-link