🎯 Tujuan

Memahami Sintaks-Sintaks HTML sangat penting untuk berkontribusi dalam proyek web. SOP ini akan membantu kamu memahami struktur tampilan web secara keseluruhan, sehingga kamu dapat membangun dan mengatur elemen-elemen web dengan baik dan efisien.

⏰ Konteks

Pada tahap intermediate dalam belajar HTML, kamu akan mempelajari lebih dalam tentang Forms dan Graphics. Di bagian Forms, kamu akan belajar cara membuat form interaktif, validasi, dan pengolahan data input. Sementara itu, di bagian Graphics, kamu akan memahami cara menambahkan gambar, video, dan elemen grafis lainnya, termasuk penggunaan Canvas untuk grafik dinamis. Ini akan memperkaya kemampuanmu dalam membuat halaman web yang lebih interaktif dan menarik.

🪵 Hal yang Diperlukan

  1. Visual Studio Code (VS Code)
  2. Pemahaman Dasar HTML
  3. Extension Live Server
  4. Google Chrome

📋 Langkah-Langkah

  1. Membuat Form Forms adalah sintaks paling penting di HTML untuk melakukan Create, Read, Update, dan Delete (CRUD) terhadap data. Berikut adalah berbagai input type yang bisa kamu gunakan dalam form.

Salin kode di bawah untuk mencoba berbagai input type:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <!-- Input Text -->
        <label>Nama:</label><br>
        <input type="text" name="nama"><br>

        <!-- Input Radio -->
        <label>Bahasa Pemrograman Favorit:</label><br>
        <input type="radio" name="fav_language" value="HTML"> HTML<br>
        <input type="radio" name="fav_language" value="CSS"> CSS<br>
        <input type="radio" name="fav_language" value="JavaScript"> JavaScript<br>

        <!-- Input Checkbox -->
        <label>Hobi Kamu:</label><br>
        <input type="checkbox" name="hobi" value="Coding"> Coding<br>
        <input type="checkbox" name="hobi" value="Reading"> Reading<br>
        <input type="checkbox" name="hobi" value="Gaming"> Gaming<br>
        <input type="checkbox" name="hobi" value="Travelling"> Travelling<br>

        <!-- Input Select -->
        <label>Pilih Salah Satu:</label><br>
        <select name="fav_color">
            <option value="red">Merah</option>
            <option value="green">Hijau</option>
            <option value="blue">Biru</option>
            <option value="yellow">Kuning</option>
        </select><br>

        <!-- Input Submit -->
        <input type="submit" value="Submit">
    </form>
</body>
</html>
```

Berikut adalah penjelasan beberapa input type yang umum digunakan:

1. **Text input**: Untuk input teks pendek, seperti nama pengguna.
    
    ```html
    <input type="text" id="username" name="username" placeholder="Enter your username">
    ```
    
2. **Password input**: Untuk input kata sandi. Karakter yang diketik akan disembunyikan.
    
    ```html
    <input type="password" id="password" name="password" placeholder="Enter your password">
    ```
    
3. **Email input**: Dirancang untuk alamat email dengan validasi otomatis.
    
    ```html
    <input type="email" id="email" name="email" placeholder="Enter your email">
    ```
    
4. **Number input**: Hanya menerima angka, bisa diatur batas minimum dan maksimum.
    
    ```html
    <input type="number" id="age" name="age" min="1" max="100">
    ```
    
5. **Checkbox input**: Untuk pilihan ganda, seperti langganan newsletter.
    
    ```html
    **<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">**
    ```
    
6. **Radio input**: Untuk membuat pilihan eksklusif.
    
    ```html
    <input type="radio" id="male" name="gender" value="male"> Male
    <input type="radio" id="female" name="gender" value="female"> Female
    ```
  1. Menggunakan Canvas Canvas adalah elemen HTML yang digunakan untuk menggambar grafis secara dinamis menggunakan JavaScript. Berbeda dengan SVG, yang berbasis vektor, Canvas bekerja dengan rendering berbasis piksel, yang berarti gambar tidak dapat diperbesar tanpa kehilangan kualitas.

Berikut adalah contoh sederhana penggunaan Canvas:

```html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 150, 75);
</script>
```

**Penjelasan**:

- **<canvas>**: Tag HTML untuk membuat area kanvas.
- **getContext('2d')**: Metode JavaScript untuk mengakses area gambar 2D pada kanvas.
- **fillRect()**: Menggambar persegi panjang berwarna biru di kanvas.

Canvas sangat berguna dalam proyek yang memerlukan interaksi, seperti SMOO / E-Sign, di mana canvas digunakan untuk menerima coretan tanda tangan pengguna saat registrasi serta menampilkan dokumen PDF dengan dukungan JavaScript yang kompleks.

Kesimpulan

Dengan mengikuti langkah-langkah yang dijelaskan dalam SOP ini, kamu telah mempelajari dan memahami sintaks-sintaks dasar HTML, terutama terkait dengan penggunaan forms dan elemen canvas.

Dengan pengetahuan ini, kamu siap untuk membangun tampilan web yang lebih kompleks dan interaktif, serta memahami cara mengolah input pengguna dengan baik. Teruslah berlatih dan eksplorasi lebih jauh untuk mengasah keterampilan HTML dan JavaScript kamu!

📋 Documentation