CSS dan Javascript Eksternal ~ Pemrograman dan Teknologi

CSS dan Javascript bisa langsung diletakkan dalam satu file berisi kode HTML ataupun diletakkan di file terpisah. Jika kita hanya menggunakan CSS atau javascript dalam satu kode HTML, script dan CSS bisa saja kita letakkan di dalam satu file yang berisi kode HTML. Tapi, jika script atau CSS tersebut kita gunakan berkali-kali di beberapa file HTML, alangkah baiknya kalau kita menggunakan file lain untuk menyimpannya supaya kita tidak perlu melakukan copas berkali-kali.

Kali ini, saya akan coba membuat file javascript dan CSS yang terpisah dari Kode HTML. Sebelum memulai membaca apa yang saya tulis setelah ini, silakan buat 3 file di satu folder dengan nama-nama berikut ini!!!

coba.html
scriptku.js
styleku.css

Kalian bisa mulai mengetik kode HTML berikut di dalam file "coba.html". Nama file HTML-nya sebenarnya tidak harus "coba.html". Kalian bisa menggantinya dengan nama lain jika kalian mau. Syaratnya, nama filenya tetap harus diakhiri dengan ".htm" atau ".html"

<HTML>
<HEAD>
    <TITLE> Belajar HTML</TITLE>
    <LINK rel="stylesheet" href="styleku.css"/>
</HEAD> 
<BODY>
    <SCRIPT src="scriptku.js">
    </SCRIPT> 
</BODY> 
</HTML>

Kode HTML di atas dihubungkan dengan CSS dan javascript-nya melalui tag <link> dan tag <script>. File yang berisi file javascript namanya berakhiran .js, dan didalamnya tidak perlu lagi ada tag <SCRIPT>. Jika ada atribut src dalam tag script, maka isi dari elemen script tidak perlu diisi.

Setelah selesai mengetik, kalian bisa menyimpan filenya. Berikutnya, ketik javascript-nya dalam file "scriptku.js".

alert("cuma contoh");
document.write("terserah");

Yang terakhir, buka file "styleku.css". Kemudian ketik kode CSS yang ada di bawah ini.

h2{
    color:red;
    text-decoration:underline;
}

Simpan file CSS-nya, dan buka file coba.html di browser!
Lihat hasilnya!!!