Kursus IT Dasar HTML 015_Fitur Baru HTML5

Fitur Baru HTML5

HTML5 adalah versi terbaru dari HTML dan memperkenalkan banyak tag, atribut, dan fitur baru, yang sangat meningkatkan fungsi dan interaktivitas web.

Beberapa fitur baru yang menarik di HTML5:

• Elemen canvas untuk menggambar
• Elemen video dan audio untuk pemutaran media
• Dukungan yang lebih baik untuk penyimpanan lokal offline
• Elemen konten khusus baru seperti article, footer, header, nav, section
• Kontrol formulir baru seperti calendar, date, time, email, url, search

<canvas>

Elemen <canvas> HTML5 digunakan untuk menggambar grafik pada halaman web. Elemen <canvas> berbasis API gambar JavaScript dan dapat digunakan untuk membuat berbagai grafik, termasuk diagram, grafik, animasi, dll.

Contoh:

1
<canvas width="500" height="500">
2
    Browser Anda tidak mendukung tag canvas HTML5.
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // Dapatkan konteks gambar
7
    const ctx = canvas.getContext("2d");
8
    // Gambar lingkaran
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

Efek:

<svg>

Elemen SVG HTML5 digunakan untuk membuat grafik SVG pada halaman web. Grafik SVG adalah grafik vektor berbasis XML yang dapat diskalakan tanpa kehilangan kualitas dan cocok untuk berbagai tujuan, termasuk:

Elemen SVG meliputi:

• Elemen <svg>: Mendefinisikan elemen root grafik SVG.
• Elemen <path>: Mendefinisikan bentuk jalur.
• Elemen <rect>: Mendefinisikan bentuk persegi panjang.
• Elemen <circle>: Mendefinisikan bentuk lingkaran.
• Elemen <ellipse>: Mendefinisikan bentuk elips.
• Elemen <line>: Mendefinisikan garis lurus.
• Elemen <polygon>: Mendefinisikan poligon.
• Elemen <polyline>: Mendefinisikan polyline.
• Elemen <text>: Mendefinisikan teks.
• Elemen <g>: Mendefinisikan grup, digunakan untuk mengelompokkan elemen SVG bersama-sama.
• Elemen <defs>: Mendefinisikan atribut global yang dapat diterapkan pada beberapa elemen SVG.

Contoh:

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

Efek:

SVG dan Canvas keduanya adalah alat untuk membuat grafik pada halaman web. Keduanya memiliki kelebihan dan kekurangan masing-masing dan cocok untuk skenario yang berbeda.

SVG adalah grafik vektor berbasis XML yang dapat diskalakan tanpa kehilangan kualitas. Ini berarti grafik SVG dapat ditampilkan dalam ukuran apa pun tanpa kehilangan kualitas. Grafik SVG juga dapat dimanipulasi dan dianimasikan menggunakan CSS dan JavaScript.

Canvas adalah API gambar berbasis JavaScript yang dapat membuat grafik bitmap. Ini berarti grafik Canvas tidak dapat diskalakan tanpa kehilangan kualitas, tetapi grafik yang lebih kompleks dapat dibuat menggunakan JavaScript. Grafik Canvas juga dapat dimanipulasi dan dianimasikan menggunakan JavaScript.

Perbedaan spesifik antara SVG dan Canvas:

• SVG cocok untuk skenario:

  • Grafik yang perlu diskalakan tanpa kehilangan kualitas, seperti ikon, logo, ilustrasi
  • Grafik yang perlu dimanipulasi dan dianimasikan dengan CSS dan JavaScript

• Canvas cocok untuk skenario:

  • Skenario yang memerlukan grafik kompleks, seperti game, animasi
  • Skenario yang memerlukan operasi kompleks dengan JavaScript

Formulir HTML5

HTML5 memperkenalkan beberapa tipe input dan atribut baru untuk meningkatkan fungsi dan kemudahan penggunaan formulir.

Elemen formulir baru:

• Elemen <datalist>: Digunakan untuk daftar opsi yang telah ditentukan sebelumnya untuk elemen <input>.

Contoh:

1
<label for="browser">Pilih browser:</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

Efek:

Atribut formulir baru:

• Atribut autocomplete <form> / <input>: Menentukan bahwa field form atau input harus memiliki fungsi pelengkapan otomatis. Ketika pengguna mulai mengetik di field pelengkapan otomatis, browser harus menampilkan opsi yang diisi di field tersebut.

Contoh:

1
<form action="demo-form.php" autocomplete="on">
2
  Nama keluarga:<input type="text" name="fname"><br>
3
  Nama depan:<input type="text" name="lname"><br>
4
  Email:<input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

Efek:

Tipe input baru:

1
<form action="/submit" method="post">
2
  <label for="name">Nama:</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">Alamat email:</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">Tanggal lahir:</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">Nomor telepon:</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="Kirim" />
15
</form>

Efek:

[!Ringkasan]