{"id":34523,"date":"2025-06-04T13:30:54","date_gmt":"2025-06-04T06:30:54","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=34523"},"modified":"2025-06-16T13:56:06","modified_gmt":"2025-06-16T06:56:06","slug":"elemen-dasar-website-html-css-dan-javascript","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/elemen-dasar-website-html-css-dan-javascript\/","title":{"rendered":"Elemen Dasar Website: HTML, CSS, dan JavaScript"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

Website yang kita lihat sehari-hari di internet dibangun menggunakan fondasi teknologi yang saling terintegrasi. Tiga komponen utama dalam pengembangan website modern adalah HTML<\/strong>, CSS<\/strong>, dan JavaScript<\/strong>. Ketiganya bekerja bersama untuk menyusun struktur, menentukan tampilan, serta menambahkan interaktivitas pada halaman web. Artikel ini akan membahas secara mendalam peran masing-masing elemen tersebut, bagaimana cara kerjanya, serta bagaimana mereka saling melengkapi.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

1. HTML (HyperText Markup Language)<\/h2>\n\t
\n\t\t
\n\t\t\t

Apa Itu HTML?<\/strong><\/h3>\n

HTML merupakan bahasa markup yang digunakan untuk membangun struktur dasar dari sebuah halaman web. HTML tidak dianggap sebagai bahasa pemrograman, melainkan sebagai bahasa markup yang memberikan kerangka dan konten seperti judul, paragraf, gambar, tautan, tabel, dan sebagainya.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

Fungsi Utama HTML:<\/strong><\/h3>\n
    \n
  • \n

    Menyusun struktur halaman web<\/p>\n<\/li>\n

  • \n

    Menandai elemen seperti header, footer, artikel, navigasi, dll.<\/p>\n<\/li>\n

  • \n

    Menyisipkan media seperti gambar dan video<\/p>\n<\/li>\n

  • \n

    Membuat tautan antar halaman atau situs<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n

    Contoh Kode HTML:<\/h3>\n\t
    \n\t\t\n\t\t
    \n\t\t\t
    \"html<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
    \n\t\t
    \n\t\t\t

    Dalam contoh di atas, <h1><\/code> digunakan untuk judul utama, dan <p><\/code> untuk paragraf.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    2. CSS (Cascading Style Sheets)<\/h2>\n\t
    \n\t\t
    \n\t\t\t

    Apa Itu CSS?<\/strong><\/h3>\n

    CSS adalah bahasa yang digunakan untuk mendesain tampilan visual dari elemen-elemen HTML. Dengan CSS, kita bisa mengatur warna, ukuran teks, jenis font, tata letak halaman, hingga animasi sederhana.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

    \n\t\t
    \n\t\t\t

    Fungsi Utama CSS:<\/strong><\/h3>\n
      \n
    • \n

      Mengatur tampilan dan layout elemen HTML<\/p>\n<\/li>\n

    • \n

      Memberikan gaya visual seperti warna, margin, dan padding<\/p>\n<\/li>\n

    • \n

      Membuat halaman lebih menarik dan responsif di berbagai perangkat<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n

      Contoh Kode CSS:<\/h3>\n\t
      \n\t\t\n\t\t
      \n\t\t\t
      \"css<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
      \n\t\t
      \n\t\t\t

      Kode CSS tersebut bisa ditulis dalam file terpisah (style.css<\/code>) atau langsung di dalam file HTML menggunakan tag <style><\/code>.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

      3. JavaScript<\/h2>\n\t
      \n\t\t
      \n\t\t\t

      Apa Itu JavaScript?<\/strong><\/h3>\n

      JavaScript adalah bahasa pemrograman yang digunakan untuk membuat website menjadi interaktif dan dinamis. Jika HTML memberikan struktur dan CSS menentukan tampilan, maka JavaScript memungkinkan pengguna untuk berinteraksi langsung dengan elemen di halaman, seperti mengklik tombol, mengisi formulir, atau menampilkan konten tanpa memuat ulang halaman.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

      \n\t\t
      \n\t\t\t

      Fungsi Utama JavaScript:<\/strong><\/h3>\n
        \n
      • \n

        Menambahkan interaktivitas (klik, hover, validasi formulir)<\/p>\n<\/li>\n

      • \n

        Mengubah konten halaman secara dinamis<\/p>\n<\/li>\n

      • \n

        Berinteraksi dengan server melalui API (misalnya, AJAX)<\/p>\n<\/li>\n

      • \n

        Membuat animasi dan efek visual<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n

        Contoh Kode JavaScript:<\/h3>\n\t
        \n\t\t\n\t\t
        \n\t\t\t
        \"javascript<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
        \n\t\t
        \n\t\t\t

        Script di atas akan menampilkan pesan saat pengguna mengklik tombol dengan ID “tombol”.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

        Bagaimana HTML, CSS, dan JavaScript Bekerja Bersama<\/h2>\n\t
        \n\t\t
        \n\t\t\t

        Untuk menciptakan sebuah website yang utuh, ketiga teknologi ini biasanya digabungkan dalam satu proyek. Berikut analogi sederhananya:<\/p>\n

          \n
        • \n

          HTML<\/strong> adalah kerangka bangunan<\/em> \u2013 seperti dinding dan struktur rumah.<\/p>\n<\/li>\n

        • \n

          CSS<\/strong> adalah cat dan dekorasi interior<\/em> \u2013 memberikan keindahan dan gaya.<\/p>\n<\/li>\n

        • \n

          JavaScript<\/strong> adalah listrik dan perangkat pintar<\/em> \u2013 membuat rumah tersebut interaktif dan responsif.<\/p>\n<\/li>\n<\/ul>\n

          Dalam praktiknya, HTML mendefinisikan elemen dasar, CSS mempercantik tampilannya, dan JavaScript memberikan kehidupan pada halaman web tersebut.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

          \n\t
          \n\t\t
          \n\t\t\t

          HTML, CSS, dan JavaScript adalah tiga elemen utama yang membentuk fondasi setiap website modern. HTML menyusun konten, CSS mempercantik tampilan, dan JavaScript menambahkan kemampuan interaktif. Untuk membangun website yang efektif dan menarik, ketiga komponen ini harus dipahami dan digunakan secara tepat.<\/p>\n

          Baik Anda seorang pemula maupun calon pengembang web profesional, memahami perbedaan dan sinergi antara HTML, CSS, dan JavaScript adalah langkah awal yang sangat penting dalam perjalanan Anda di dunia digital.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Website yang kita lihat sehari-hari di internet dibangun menggunakan fondasi teknologi yang saling terintegrasi. Tiga komponen utama dalam pengembangan website modern adalah HTML, CSS, dan JavaScript. Ketiganya bekerja bersama untuk menyusun struktur, menentukan tampilan, serta menambahkan interaktivitas pada halaman web. Artikel ini akan membahas secara mendalam peran masing-masing elemen tersebut, bagaimana cara kerjanya, serta bagaimana [...]","protected":false},"author":37,"featured_media":34941,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[300],"tags":[1493,1494,1492,1495,150,1085,1496,1487],"class_list":["post-34523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-css","tag-dan-javascript","tag-elemen-dasar-website-html","tag-front-end","tag-html","tag-javascript","tag-pengembangan-web","tag-web-development"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/34523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=34523"}],"version-history":[{"count":3,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/34523\/revisions"}],"predecessor-version":[{"id":34951,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/34523\/revisions\/34951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/34941"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=34523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=34523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=34523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}