Html, Css dan Javascript

StudySmile Agustus 25, 2025

 

Pengenalan HTML, CSS, dan JavaScript

Dalam pengembangan web modern, terdapat tiga teknologi utama yang menjadi fondasi dari setiap halaman web yang kita lihat di internet, yaitu HTML, CSS, dan JavaScript. Ketiganya memiliki peran berbeda namun saling melengkapi untuk membangun tampilan dan fungsi dari sebuah website.

1. HTML (HyperText Markup Language)

✅ Fungsi HTML:

HTML digunakan untuk membangun struktur dan konten dari halaman web. Ini adalah bahasa markup, bukan bahasa pemrograman, yang memberitahu browser bagaimana menampilkan teks, gambar, link, dan elemen lainnya.

🧱 Contoh Struktur Dasar HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Halaman Pertama Saya</title>
</head>
<body>
  <h1>Selamat Datang!</h1>
  <p>Ini adalah paragraf pertama saya.</p>
  <a href="https://www.google.com">Kunjungi Google</a>
</body>
</html>

🔹 Elemen HTML Umum:

  • <h1> sampai <h6>: Judul

  • <p>: Paragraf

  • <a>: Link

  • <img>: Gambar

  • <ul>, <ol>, <li>: Daftar

  • <div>, <span>: Elemen kontainer

2. CSS (Cascading Style Sheets)

✅ Fungsi CSS:

CSS digunakan untuk mengatur tampilan dan layout dari elemen HTML. Dengan CSS, kita bisa mengubah warna, font, ukuran, posisi, dan banyak aspek visual lainnya.

🎨 Contoh Penggunaan CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial;
    }

    h1 {
      color: blue;
      text-align: center;
    }

    p {
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Judul dengan CSS</h1>
  <p>Ini adalah paragraf yang telah diberi gaya.</p>
</body>
</html>

🔹 Jenis Penulisan CSS:

  1. Inline CSS (langsung pada elemen HTML)

  2. Internal CSS (di dalam tag <style> pada bagian <head>)

  3. External CSS (menggunakan file .css terpisah)

Contoh External CSS:

<link rel="stylesheet" href="style.css">

3. JavaScript (JS)

✅ Fungsi JavaScript:

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif dan dinamis. Dengan JS, kita bisa menangani event (klik, hover), memanipulasi DOM, memvalidasi form, membuat animasi, dan banyak lagi.

🛠️ Contoh Sederhana JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh JavaScript</title>
</head>
<body>
  <h1 id="judul">Hello!</h1>
  <button onclick="ubahTeks()">Klik Saya</button>

  <script>
    function ubahTeks() {
      document.getElementById("judul").innerText = "Teks Berubah!";
    }
  </script>
</body>
</html>

🔹 Fitur JavaScript:

  • Interaktif: menangani input user (klik, form, dsb)

  • DOM Manipulation: mengubah isi HTML lewat JS

  • Validasi data form

  • AJAX: mengambil data tanpa reload

  • Digunakan juga untuk backend dengan Node.js

Perbedaan dan Hubungan Antara HTML, CSS, dan JavaScript

Teknologi Fungsi Utama Contoh
HTML Struktur konten Membuat paragraf, gambar, heading
CSS Tampilan dan layout Memberi warna, posisi, animasi
JS Interaktivitas & logika Validasi form, event handler, animasi

Ketiganya biasa digunakan bersamaan untuk menciptakan user experience yang menarik dan responsif.

Kesimpulan

HTML, CSS, dan JavaScript adalah tiga pilar utama dalam pengembangan web. Memahami dan menguasai ketiganya akan membuka banyak kemungkinan dalam membangun website dari yang sederhana hingga kompleks.

  • HTML membangun kerangka.

  • CSS mempercantik dan mengatur tampilan.

  • JavaScript menambahkan nyawa dan interaktivitas.


StudySmile

Diposting oleh StudySmile

Posting Komentar

0 Komentar