Apa Itu Html Css Javascript

4 min read Jun 28, 2024
Apa Itu Html Css Javascript

Apa itu HTML, CSS, dan JavaScript?

HTML, CSS, dan JavaScript adalah tiga teknologi inti yang digunakan untuk membangun situs web dan aplikasi web. Ketiganya bekerja bersama untuk menciptakan pengalaman pengguna yang interaktif dan menarik.

HTML: Struktur Situs Web

HTML (HyperText Markup Language) adalah bahasa pemrograman dasar untuk membuat struktur situs web. HTML menggunakan tag untuk mendefinisikan konten dan elemen situs web seperti judul, paragraf, gambar, dan tautan. Tag HTML digunakan untuk memberi tahu browser bagaimana menampilkan konten dan mengatur tata letak halaman.

Contoh tag HTML:

  • <html>: Tag pembuka dan penutup untuk dokumen HTML.
  • <head>: Menentukan informasi tentang dokumen HTML, seperti judul halaman.
  • <title>: Menentukan judul halaman web.
  • <body>: Menentukan konten utama halaman web.
  • <h1>: Tag heading tingkat 1.
  • <p>: Tag paragraf.
  • <img>: Tag untuk menampilkan gambar.
  • <a>: Tag untuk membuat tautan.

CSS: Gaya Situs Web

CSS (Cascading Style Sheets) digunakan untuk menentukan gaya dan tata letak elemen HTML. CSS memungkinkan Anda mengatur warna, font, ukuran, posisi, dan banyak lagi aspek tampilan situs web. CSS membantu membuat situs web tampak lebih menarik dan profesional.

Contoh properti CSS:

  • color: Mengatur warna teks.
  • font-size: Mengatur ukuran font.
  • background-color: Mengatur warna latar belakang.
  • margin: Mengatur ruang kosong di sekitar elemen.
  • padding: Mengatur ruang kosong di dalam elemen.

JavaScript: Interaktivitas Situs Web

JavaScript adalah bahasa pemrograman yang menambahkan interaktivitas dan perilaku dinamis pada situs web. JavaScript memungkinkan Anda membuat situs web yang responsif terhadap tindakan pengguna, seperti mengklik tombol, menggulir halaman, atau mengisi formulir.

Contoh fungsi JavaScript:

  • alert(): Menampilkan kotak dialog dengan pesan.
  • document.getElementById(): Mencari elemen HTML berdasarkan ID-nya.
  • addEventListener(): Menambahkan event listener ke elemen HTML.
  • fetch(): Mengirim permintaan HTTP ke server.

Hubungan HTML, CSS, dan JavaScript

HTML menyediakan struktur dasar situs web, CSS menentukan tampilan dan gaya, dan JavaScript menambahkan interaktivitas dan fungsionalitas. Ketiga teknologi ini bekerja bersama untuk menciptakan pengalaman pengguna yang kaya dan dinamis.

Contoh sederhana:




  Contoh Situs Web
  


  

Selamat Datang!

Ini adalah contoh situs web sederhana.

Kode HTML di atas mendefinisikan judul, paragraf, dan tombol. CSS mengatur warna latar belakang dan warna heading. JavaScript menambahkan fungsi onclick() ke tombol untuk menampilkan kotak dialog ketika tombol ditekan.

Related Post