Cara menyisipkan Kode Javascript dan CSS.

Setelah mempelajari tentang tag <link> tag yang dipelajari selanjutnya didalam tag <head> adalah Tag <script> dan Tag <style>.

Kenapa ini dijadikan satu materi? Yups, Karena fungsi kedua tag ini hampir sama, yaitu untuk menginputkan kode bahasa yang lain di dalam html.

Tag <script> digunakan untuk menyisipkan kode javascript.
Tag <style> digunakan untuk menyisipkan kode CSS.

Nah untuk lebih jelasnya langsung saja masuk materi utama,

Tag script-- Menyisipkan Kode Javascript

Tag <script> digunakan untuk menginput kode program script (Contoh : Javascript) kedalam halaman HTML. Umumnya bahasa pemrogaman script yang digunakan untuk membuat website adalah JavaScript, dan inilah bahasa default jika tidak dicantumkan jenis bahasa dalam atribut type.

Berikut contoh baris kode tag script

<script type="text/javascript">
// inputkan kode javascript disini.....
// inputkan kode javascript disini.....
// inputkan kode javascript disini.....
</script>

Didalam seri HTML yang terbaru yaitu HTML 5, penulisan atribut type="text/javascript" sepenuhnya optional, sehingga bisa diabaikan jika bahasa yang digunakan adalah javascript, seperti contoh berikut :

<script>
// inputkan kode javascript disini.....
// inputkan kode javascript disini.....
// inputkan kode javascript disini.....
</script>

Selain menginput langsung kode script ke dalam halaman, tag <script> juga digunakan untuk menginput file JavaScript external (yang dibuat terpisah) ke dalam halaman HTML. Untuk ini perlu ditambahkan atribut src. Nilai dari atribut src adalah lokasi tempat tempat file script berada. Berikut contoh penulisannya:

<script src="javascript.js"> </script>

Kode diatas akan menginput file javascript.js yang berada di dalam satu folder dengan file saat ini ke dalam halaman HTML.

Walaupun dijelaskan tag <script> di bagian head element, penggunaan tag ini tidak harus di bagian <head> saja. Tag <script> bisa ditempatkan di bagian manapun sepanjang halaman HTML.

Tag Style-- Menyisipkan Kode CSS

Tag <style> digunakan untuk menginput kode style kedalam halaman HTML. Kode style yang umumnya digunakan adalah CSS. (Untuk materi CSS akan dibahas lebih lanjut).

CSS juga menjadi default style jika tidak ditulis type="text/css".
Berikut contoh penggunaan tag <style>:

<style type="text/css">
// kode CSS disini...
// kode CSS disini...
// kode CSS disini...
</style>

Sama seperti tag <script>, aribut type di tag <style> juga bersifat optional di dalam HTML5. Atribut type bisa tidak dituli, seperti contoh berikut:

<style>
// kode CSS disini...
// kode CSS disini...
// kode CSS disini...
</style>

Seperti tag <script>, Tag <style> juga dapat ditempatkan di bagian mana saja didalam halaman HTML. (tidak harus dibagian head).

Selain menggunakan tag <style>, cara yang lain untuk meyisipkan CSS dengan cara memberikan atribut style kepada tag di HTML. Pelajari lebih lanjut tentang Tag.
Contoh menggunakan tag p, maka kodenya akan jadi seperti ini :

<p style="kode CSS disini">

Mengenai materi tentang CSS akan dibahas di artikel yang lain.

Nah itulah artikel tentang cara menyisipkan kode Javascript dan CSS di Halaman HTML, Sebelum beralih ke materi selanjutnya akan diberikan contoh kode-kode yang sudah dipelajari selama ini, yaitu yang berkaitan dengan tag <head>. (untuk melihat seluruh artikel tentang HTML silahkan kunjungi menu tutorial-web design-HTML).

<!DOCTYPE>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="author" content="Patukom">
   <meta name="keyword" content="Tutorial web design, tutorial App desktop, Tutorial SEO, Download Software Gratis, dan tips trik mengoptimalkan komputer>
   <meta name="description" content="Blog yang memberikan segala tutorial komputer">
   <meta http-equiv="refresh" content="60">
   <meta http-equiv="X-UA-Compatible" content="IE-Edge">
   <meta name="viewport" content="width=device-width, initial scale=1">
   <meta name="robots" content="index, follow">
   <link rel="icon" href="logo.png" type="image/png">
   <script src="javascript.js"></script>
   <title>Belajar HTML untuk pemula</title>
   <style>
   //Kode CSS disini....
   //Kode CSS disini....
   </style>
</head>
<body>
// Element body...
// Element body...
</body>
</html>

Terimakasih atas kunjungan teman-teman semua, apabila ada kesulitan dipersilahkan bertanya di kolom komentar, kritik dan saran selalu diterima untuk meningkatkan kualitas blog ini, Sekian terimakasih.. Jangan lupa dishare yaa :)

Tutorial selanjutnya yang dibahas adalah tentang Tag <body> dan Element apa saja yang berada didalamnya. Untuk materi pertama yang dibahas tentang Kode HTML yang digunakan untuk membuat/memformat teks atau tulisan.

Azis Saputra

Saya pribadi mengucapkan banyak terimakasih atas kunjungan dan partisipasi teman-teman, kritik dan saran selalu diterima, dan apabila apa yang teman-teman peroleh dari blog ini bermanfaat. Penulis mempersilahkan share sebanyak-banyaknya agar orang lain juga memperoleh manfaatnya juga.

1 komentar:

Andrian Antonius7 April 2020 pukul 18.36
Terima kasih kak atas blog nya sangat membantu saya untuk membuat suatu web dengan menggunakan html,css dan js kak dan terus berkarya kak.
perkenalkan nama saya : Andrian Antonius NIM saya : 1922500215 Web Kampus saya :https://www.atmaluhur.ac.id
BalasHapus
Balasan