Add Css Javascript

3 min read Jun 22, 2024

Menambahkan CSS dan JavaScript ke dalam HTML

Pendahuluan

CSS (Cascading Style Sheets) dan JavaScript adalah dua komponen penting dalam pengembangan web modern. CSS digunakan untuk mengatur tampilan dan gaya website, sementara JavaScript digunakan untuk menambahkan interaktivitas dan fungsionalitas dinamis. Artikel ini akan membahas cara menambahkan CSS dan JavaScript ke dalam HTML.

Menambahkan CSS

Ada tiga cara utama untuk menambahkan CSS ke dalam HTML:

Inline Styles: Menambahkan gaya langsung ke elemen HTML menggunakan atribut style.
```
Ini adalah paragraf dengan gaya inline.
```
Internal Stylesheets: Menambahkan semua CSS dalam tag <style> di dalam bagian <head> dokumen HTML.
```
  
```
External Stylesheets: Menyimpan CSS dalam file terpisah dengan ekstensi .css dan menghubungkannya ke dokumen HTML menggunakan tag <link>.
```
  
```

Menambahkan JavaScript

Sama seperti CSS, ada beberapa cara untuk menambahkan JavaScript ke dalam HTML:

Inline Script: Menambahkan JavaScript langsung ke elemen HTML menggunakan atribut onclick atau onmouseover.
Internal Script: Menambahkan semua JavaScript di dalam tag <script> di dalam bagian <head> atau <body> dokumen HTML.
External Script: Menyimpan JavaScript dalam file terpisah dengan ekstensi .js dan menghubungkannya ke dokumen HTML menggunakan tag <script>.

Rekomendasi

Untuk proyek yang lebih kompleks, gunakan external stylesheets dan scripts. Hal ini memungkinkan pemisahan kode, meningkatkan keterbacaan, dan memudahkan pengelolaan.
Tempatkan tag <link> untuk CSS di dalam <head> dan tag <script> untuk JavaScript di bagian akhir <body>. Hal ini membantu memastikan bahwa halaman web dimuat dengan benar.
Gunakan minifier dan bundler untuk mengoptimalkan kode CSS dan JavaScript sebelum dipublikasikan. Hal ini akan mengurangi ukuran file dan meningkatkan kecepatan loading halaman.

Penutup

Menambahkan CSS dan JavaScript ke dalam HTML adalah langkah penting dalam membangun website yang menarik dan interaktif. Dengan memahami cara menambahkan dan mengelola kode tersebut dengan benar, Anda dapat menciptakan website yang lebih profesional dan efisien.