Pelajari HTML, CSS, dan JavaScript: Buat Website Pertamamu!

Pelajari HTML, CSS, dan JavaScript untuk membuat website pertama Anda! Temukan panduan praktis dan tips menarik yang akan membawa keahlian coding Anda ke level selanjutnya!

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Pelajari HTML, CSS, dan JavaScript: Buat Website Pertamamu!
  • Ebook, Web Development, HTML, CSS, JavaScript, Tutorial, Pemrograman, Desain Web

Baca Online

Pelajari HTML, CSS, dan JavaScript: Buat Website Pertamamu!

Daftar Isi

  1. Pengenalan HTML
  2. Struktur Dasar HTML
  3. Elemen dan Tag HTML
  4. Pengenalan CSS
  5. Cara Menggunakan CSS
  6. Selector CSS
  7. Pengenalan JavaScript
  8. Variabel dan Tipe Data
  9. Fungsi dan Event
  10. Membuat Website Pertamamu

1. Pengenalan HTML

HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman web. HTML digunakan untuk membuat struktur dan konten pada website, seperti teks, gambar, tautan, dan elemen lainnya.

Ilustrasi kode HTML yang ditulis di editor teks dengan tampilan kode berwarna

HTML menggunakan tag-tag yang membungkus konten untuk memberi tahu browser bagaimana menampilkan konten tersebut.

2. Struktur Dasar HTML

Struktur dasar sebuah dokumen HTML terdiri dari beberapa bagian utama:

  • <!DOCTYPE html> : Mendefinisikan tipe dokumen sebagai HTML5.
  • <html> : Elemen root yang membungkus seluruh konten halaman.
  • <head> : Bagian yang berisi metadata, judul, dan link ke file eksternal.
  • <body> : Bagian yang berisi konten utama yang akan ditampilkan di halaman.
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>
      

Struktur ini adalah pondasi untuk membuat halaman web yang valid dan terstruktur dengan baik.

3. Elemen dan Tag HTML

Elemen HTML terdiri dari tag pembuka, konten, dan tag penutup. Contohnya:

<p>Ini adalah paragraf.</p>
      

Beberapa elemen penting yang sering digunakan:

  • <h1> - <h6> : Judul dengan tingkat heading berbeda.
  • <p> : Paragraf teks.
  • <a> : Tautan/link.
  • <img> : Gambar (tag self-closing).
  • <ul> dan <ol> : Daftar tidak berurutan dan berurutan.

Contoh penggunaan gambar dengan tag <img> :

Contoh tag img HTML yang menampilkan gambar placeholder berukuran 600x300 piksel

4. Pengenalan CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS, kamu bisa mengubah warna, ukuran, posisi, dan gaya elemen HTML.

Ilustrasi kode CSS yang ditulis di editor teks dengan tampilan kode berwarna

CSS membuat website menjadi lebih menarik dan mudah dibaca.

5. Cara Menggunakan CSS

Ada tiga cara utama menggunakan CSS dalam HTML:

  1. Inline CSS: Langsung menambahkan atribut style pada elemen HTML.
    <p style="color: blue; font-weight: bold;">Teks biru tebal</p>
              
  2. Internal CSS: Menulis CSS di dalam tag <style> di bagian <head> .
    <style>
      p {
        color: green;
        font-size: 18px;
      }
    </style>
              
  3. External CSS: Menghubungkan file CSS terpisah menggunakan tag <link> .
    <link rel="stylesheet" href="styles.css">
              

6. Selector CSS

Selector CSS digunakan untuk memilih elemen HTML yang ingin diberi gaya. Contoh selector yang umum:

  • Selector Tag: Memilih semua elemen dengan tag tertentu, misal p untuk semua paragraf.
  • Selector Class: Memilih elemen dengan atribut class tertentu, misal .highlight .
  • Selector ID: Memilih elemen dengan atribut id tertentu, misal #header .
p {
  color: red;
}

.highlight {
  background-color: yellow;
}

#header {
  font-size: 24px;
}
      

Dengan selector, kamu bisa mengatur gaya elemen secara spesifik dan terorganisir.

7. Pengenalan JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. Dengan JavaScript, kamu bisa membuat tombol yang bisa diklik, form yang validasi otomatis, animasi, dan banyak lagi.

Ilustrasi kode JavaScript yang ditulis di editor teks dengan tampilan kode berwarna

JavaScript berjalan di browser dan bisa berinteraksi dengan elemen HTML dan CSS.

8. Variabel dan Tipe Data

Variabel adalah tempat untuk menyimpan data. Di JavaScript, kamu bisa membuat variabel dengan let , const , atau var .

let nama = "Budi";
const umur = 20;
var isStudent = true;
      

Tipe data umum di JavaScript antara lain:

  • String: Teks, misal "Halo Dunia".
  • Number: Angka, misal 10, 3.14.
  • Boolean: true atau false.
  • Array: Kumpulan data dalam satu variabel.
  • Object: Data dengan properti dan nilai.

9. Fungsi dan Event

Fungsi adalah blok kode yang bisa dipanggil berulang kali. Event adalah aksi yang terjadi, seperti klik tombol atau input teks.

function sapa() {
  alert("Halo, selamat datang!");
}

document.getElementById("btnSapa").addEventListener("click", sapa);
      

Contoh di atas membuat fungsi sapa yang menampilkan pesan, dan menghubungkannya dengan event klik pada tombol dengan id btnSapa .

10. Membuat Website Pertamamu

Sekarang kita akan membuat website sederhana yang menampilkan judul, paragraf, gambar, dan tombol interaktif.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Website Pertamaku</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
        background-color: #f9fafb;
      }
      h1 {
        color: #4f46e5;
      }
      button {
        background-color: #4f46e5;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
      }
      button:hover {
        background-color: #4338ca;
      }
    </style>
  </head>
  <body>
    <h1>Selamat Datang di Website Pertamaku</h1>
    <p>Ini adalah paragraf pertama saya yang dibuat dengan HTML.</p>
    <img src="https://placehold.co/600x300/png?text=Gambar+Website+Pertama" alt="Gambar ilustrasi website pertama dengan latar belakang biru dan teks selamat datang" />
    <br><br>
    <button id="btnClick">Klik Saya</button>

    <script>
      document.getElementById("btnClick").addEventListener("click", function() {
        alert("Terima kasih sudah mengklik tombol!");
      });
    </script>
  </body>
</html>
      

Kamu bisa salin kode di atas dan coba jalankan di browser untuk melihat hasilnya.

Tampilan website sederhana dengan judul berwarna ungu, paragraf, gambar placeholder berukuran 600x300, dan tombol berwarna ungu

Edukasi Terkait