Sosial Media
0
Info
    Loading..
    Home Android ​Coding

    Dasar HTML, CSS, dan JavaScript

    "HTML (HyperText Markup Language), CSS (Cascading Style Sheets), dan JavaScript adalah tiga teknologi dasar untuk membangun halaman web."

    8 min read

    Dasar HTML, CSS, dan JavaScript
    HTML, CSS, JS
    HTML (HyperText Markup Language), CSS (Cascading Style Sheets), dan JavaScript adalah tiga teknologi dasar untuk membangun halaman web. 

    Dalam postingan ini, kita akan membahas pengertian, fungsi, dan contoh penggunaan dari masing-masing teknologi tersebut.

    HTML (HyperText Markup Language),

    HTML adalah bahasa markup yang digunakan untuk membuat struktur dasar dari sebuah halaman web. 

    HTML tidak mengandung logika pemrograman, melainkan hanya menata teks dengan cara yang terstruktur. Elemen-elemen HTML didefinisikan menggunakan tag yang dikelilingi oleh tanda kurung sudut ( < > ).

    Contoh:

    html
    <!DOCTYPE html> <html> <head> <title>Contoh Halaman HTML</title> </head> <body> <h1>Ini adalah heading utama</h1> <p>Ini adalah paragraf teks biasa.</p> <a href="https://www.example.com">Ini adalah link</a> </body> </html>

    Penjelasan:

    • <!DOCTYPE html>: Menentukan bahwa ini adalah dokumen HTML5.
    • <html>: Elemen root yang mengandung seluruh isi halaman web.
    • <head>: Bagian yang berisi metadata (seperti judul, penghubung file CSS, dll).
    • <body>: Bagian yang menampilkan konten utama halaman web.
    • <h1>, <p>, <a>: Contoh elemen HTML yang digunakan untuk heading, paragraf, dan link.


    2. CSS (Cascading Style Sheets)

    CSS digunakan untuk mendesain dan mengatur tata letak halaman HTML. Dengan CSS, kamu dapat mengubah warna, font, margin, padding, dan banyak lagi. CSS memungkinkan HTML yang mentah terlihat lebih menarik.

    Contoh:

    css
    <style>   body {     background-color: #f0f0f0;     font-family: Arial, sans-serif;   }      h1 {     color: blue;     text-align: center;   }   p {     font-size: 18px;     line-height: 1.6;     color: #333;   }   a {     color: red;     text-decoration: none;   }   a:hover {     text-decoration: underline;   } </style>

    Penjelasan:

    • body: Selector yang mengatur gaya untuk seluruh halaman.
    • background-color: Mengubah warna latar belakang.
    • font-family: Mengatur jenis font yang digunakan.
    • color: Mengubah warna teks.
    • text-align: Mengatur perataan teks (misalnya, center untuk tengah).
    • a:hover: Pseudo-class untuk mengubah gaya link saat dihover (saat kursor di atasnya).

    3. JavaScript

    JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. JavaScript bekerja di dalam browser dan memungkinkan penambahan logika seperti animasi, validasi form, atau merespon tindakan pengguna seperti klik atau scroll.

    Contoh:

    Javascript
    <script>   // Fungsi yang akan dijalankan ketika tombol diklik   function showAlert() {     alert("Tombol telah diklik!");   } </script> <body>   <button onclick="showAlert()">Klik Saya!</button> </body>

    Penjelasan:

    • function showAlert(): Mendefinisikan sebuah fungsi JavaScript yang menampilkan pesan alert.
    • onclick="showAlert()": Event handler yang akan menjalankan fungsi showAlert ketika tombol diklik.

    Cara HTML, CSS, dan JavaScript Bekerja Bersama

    Ketiga teknologi ini saling melengkapi untuk membuat halaman web dinamis dan interaktif:

    1. HTML: Menyediakan struktur halaman.
    2. CSS: Mengubah tampilan dan gaya dari struktur HTML.
    3. JavaScript: Menambahkan logika untuk membuat halaman lebih interaktif.

    Contoh Kombinasi:

    html
    <!DOCTYPE html> <html>   <head>     <style>       body {         background-color: #e0e0e0;         font-family: 'Arial', sans-serif;         text-align: center;       }       h1 {         color: green;       }       button {         background-color: blue;         color: white;         padding: 10px;         border: none;         cursor: pointer;       }       button:hover {         background-color: darkblue;       }     </style>   </head>   <body>     <h1>Selamat Datang di Halaman Saya!</h1>     <button onclick="changeColor()">Ubah Warna</button>     <script>       function changeColor() {         document.body.style.backgroundColor = "lightblue";       }     </script>   </body> </html>

    Penjelasan:

    • HTML digunakan untuk membuat struktur (heading, tombol).
    • CSS digunakan untuk membuat gaya (warna tombol, warna latar).
    • JavaScript digunakan untuk merespon interaksi pengguna (mengubah warna latar ketika tombol diklik).

    Itulah dasar dari HTML, CSS, dan JavaScript. Ketiga teknologi ini bekerja bersama untuk menciptakan halaman web yang berfungsi penuh, menarik, dan interaktif.

    Additional JS