A. PENDAHULUAN
- Pengertian
- Latar belakang masalah
B. MAKSUD DAN TUJUAN
Agar memiliki skills Html yang di butuhkahkan tuntuk menuju ke jenjang berikutnya.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Html canvas
- Html SVG
- Html Media
- Html video
- Html Audio
- Html Plug-in
- Html Youtube.
D. TARGET DAN HASIL YANG DIHARAPKAN
Mengetahui dan memahami Html canvas, Html SVG, Html Media, Html video, Html Audio, Html Plug-in, Html Youtube.
E. METODE PELAKSANAAN
- Membaca Referensi di w3schools
- Mengerjakan Try your self
F. ALAT DAN BAHAN
- Laptop
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
- HTML Canvas
Tag <canvas> digunakan untuk menggambar grafik pada halaman web.
Grafik di sebelah kiri dibuat dengan <canvas>. Ini menunjukkan empat elemen: persegi panjang merah, persegi panjang gradien, persegi panjang multiwarna, dan teks multiwarna.
Apa itu Kanvas HTML?
HTML <canvas> digunakan untuk menggambar grafik dengan cepat, melalui javascript
Elemen <canvas> ini hanya wadah untuk grafik. Anda harus menggunakan Javascript untuk benar-benar menggambar grafik.
Kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, teks, dan menambahkan gambar.
Dalam mengakses kanvas ini browser harus sesuai untuk mendukung kanas pada HTML ini.
Berikut adalah berbagai browser serta versinya yang bisa mendukung untuk mengakses kanvas :
Chrome : 4.0
bing : 9.0
Firefox : 2.0
Safari : 3.1
Opramini : 9.0
Contoh penulisan pada kanvas
<canvas id="adelwinkanvas" width="200" height="100"></canvas>
selalu tentukan id atribut (untuk dirujuk dalam script nanti) dan width dan height untuk menentukan ukuran kanvas. Untuk menambahkan batas, gunakan style atribut.
Tambahkan javascript untuk menambahkan garis miring pada kotak/persegi panjang tersebut
untuk penulisannya :
<script>
var adelwin = document.getElementById("adelwinkanvas");
var adel = adelwin.getContext("2d");
adel.moveTo(0,0);
adel.lineTo(200,100);
adel.stroke();
</script>
untuk hasilnya seperti ini :
Jika ingin membuat lingkaran kalian bisa ikuti kode javascript dibawah ini :
<script>
var adelwin = document.getElementById("idkanvasmu");
var adel = adelwin.getContext("2d");
adel.beginPath();
adel.arc(95, 50, 40, 0, 2 * Math.PI);
adel.stroke();
</script>
Hasil :
Menggambar teks pada canvas, penulisan js nya seperti dibawah ini :
<script>
var adelwin = document.getElementById("idkanvasmu");
var adel = adelwin.getContext("2d");
adel.font = "30px monospace";
adel.fillText("AdelwinNL", 10, 50);
</script>
Hasilnya :
jika ingin merubah teks nya menjadi stroke maka tinggal ubah bagian fillText menjadi strokeText.
- Menggambar Gradien Linier pada kanvas :
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Pembuatan Gradien
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// warna blok dengan gradien
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Hasilnya :
- Menambahkan gambar pada kanvas :
untuk menambahkan gambar kalian siapkan terlebih dahulu gambarnya setelah itu di kasih id ( untuk dirujukkan di javascriptnya nanti ) ketika sudah maka.
contoh :
<img id="adelwinganteng" src="https://i.top4top.io/p_2252rdnf31.jpg" alt="adelwinganteng" width="280" height="277">
untuk penulisan tag canvasnya seperti biasa, contoh :
<canvas id="adalahkanvas" width="300" height="300"></canvas>
dan untuk penulisan java scriptnya seperti ini :
<script>
function adalahkanvas() {
var adelwingans = document.getElementById("adalahkanvas");
var adelwin = adelwingans.getContext("2d");
var gamber = document.getElementById("adelwinganteng");
adelwin.drawImage(gamber,10,10);
}
</script>
Maka hasilnya akan seperti ini :
- SVG pada HTML
svg adalah singkatan dari Scalable Vector Grapichs, SVG ini digunakan untuk mendefinisikan grafik untuk web
Elemen Html <svg>
tag <svg> adalah wadah untuk grafik SVG.
SVG ini memiliki beberapa metode untuk menggambar jalur, seperti kotak, lingkaran, teks, dan gambar grafik.
Untuk browser yanng mendukung SVG ini adalah :
Chrome : 4.0
Bing : 9.0
Firefox : 3.0
Safari : 3.2
Opramini : 10.1
- Membuat Lingkaran Svg
<!DOCTYPE html>
<html>
<head>
<title>Lingkaran pada SVG HTML</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" r="40" stroke="tomato" stroke-width="4" fill="blue" />
</svg>
</body>
</html>

Hasilnya :
- Membuat persegi panjang pada SVG HTML :
<!DOCTYPE html>
<html>
<title>Membuat Persegi panjang pada SVG HTML</title>
<body>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
Hasilnya :
- Membuat persegi pada SVG HTML :
<!DOCTYPE html><!DOCTYPE html>
<html>
<head>
<title>Persegi SVG HTML</title>
<style>
rect {
fill: blue;
stroke: black;
stroke-width: 5;
opacity: 0.5;
}
</style>
</head>
<body>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" />
</svg>
</body>
</html>
Maka hasilnya akan seperti ini :
- Membuat bintang pada SVG HTML :
<!DOCTYPE html>
<html>
<head>
<title>Pembuatan Bintang SVG HTML</title>
</head>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:blue;stroke:tomato;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Hasilnya :
- Perbedaan Antara SVG dan Kanvas
1. SVG adalah bahasa untuk menggambarkan grafik 2D dalam XML.
2. SVG Berbasis XML, yang berarti bahwa di setiap elemen tersedia dalam DOM SVG. Anda dapat melampirkan event handler JavaScript untuk sebuah elemen.
3. SVG setiap bentuk yang digambar diingat sebagai objek. Jika atribut objek SVG diubah, browser dapat merender ulang bentuk secara otomatis.
Perbedaan :
1. Kanvas menggambar grafik 2d, dengan cepat ( dengan javascript ).
2. Kanvas dirender piksel demi piksel. Di kanvas, setelah grafik digambar, itu dilupakan oleh browser. Jika posisinya harus di ubah, seluruh pemandangan perlu di gambar ulang, termasuk objek apapun yang mungkin tertutup oleh grafik.
- Perbandingain antara Kanvas dengan SVG
Canvas :
- Tergantung resolusi
- Tidak ada dukungan untuk event handler
- Kemampuan rendering teks yang buruk
- Anda dapat menyimpan gambar yang dihasilkan sebagai .png atau .jpg
- Sangat cocok untuk game intensif grafis
SVG :
- Resolusi independen
- Dukungan untuk event handler
- Paling cocok untuk aplikasi dengan area rendering besar (Google Maps)
- Render lambat jika rumit (apa pun yang menggunakan DOM banyak akan lambat)
- Tidak cocok untuk aplikasi game
- Media HTML
Apa itu media yang bisa diterapkan pada HTML?
Multimedia hadir dalam berbagai format. Ini hampir semua yang anda dapat lihat atau dengar, seperti gambar, musik, suara, video, rekaman, film, animasi, dan lain sebagainya,
Di beberapa halaman web sering berisi media media yang di terapkan oleh Pembuatnnya dengan berbagai jenis format.
Dukungan Browser / Peramban
Browser web pertama hanya mendukung teks, terbatas pada satu font dalam satu warna. Kemudian datang browser-browser versi terbaru yang sudah bisa mendukung untuk warna, font, gambar, dan sebagainya. Format dalam media yang sering di terapkan di sebuah halaman situs web. Elemen media (seperti audio atau video) disimpan di file media.
Cara paling umum untuk menemukan jenis file, adalah dengan melihat ektensi file.
File multimedia memiliki format dan ekstensi yang berbeda seperti: .waf, .mp3, .mp4, .mpg, .jpeg, .jpg, .png dan .avi
- Penerapan Video dalam HTML
jika anda ingin menerapkan video pada HTML kalian bisa menggunakan tag <video>. Untuk penulisannya kalian bisa lihat di bawah ini :
<video width="400" controls>
<source src="file-vodeokamu.mp4" type="video/mp4">
</video>
Untuk hasilnya seperti ini :
Bagaimana itu bekerja?
atribut controls menambahkan kontrol video, seperti putar, jeda, dan volume.
Untuk width dan height seperti biasa untuk menyertakan lebar dan tingginya.
dan di tag <source> memungkinkan anda untuk menentukan file video alternatif yang dapat dipilih oleh browser. Browser akan menggunakan format pertama yang dikenali.
teks antar <video> dan </video> tag hanya akan ditampilkannya di browser yang tidak mendukung <video> elemen tersebut.
- Cara untuk memutar video secara otomatis dalam HTML
<video width="400" height="300" autoplay>
<source src="filevideo-kamu.mp4" type="video/mp4">
</video>
Untuk hasilnya kalian bisa cek sendiri.
- Menerapkan video dengan javascript :
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Putar/Berhenti</button>
<button onclick="makeBig()">besarin</button>
<button onclick="makeSmall()">kecilin</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="adelwingans.mp4" type="video/mp4">
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
</body>
</html>
Hasilnya :
Elemen <audio>
elemen audio ini digunakan untuk memutar audio dalam halaman web. untuk cara penerapannya kalian bisa menggunakan tag <audio>.
Untuk penulisannya seperti ini kawan :
<audio controls>
<source src="adelwin.mp3" type="audio/mpeg">
</audio>
maka hasilnya akan seperti ini :
Untuk audionya agar terputar secara otomatis caranya kalian tinggal ubah controls menjadi autoplay.
Contoh :
<audio autoplay>
<source src="audiofile-kamu.mp3">
</audio>
maka otomatis akan memutar sendiri untuk audionnya.(Catatan : pada browser chromium tidak mengizinkan putar otomatis dalam banyak kasus. Namun putar otomatis tanpa suara selalu di izinkan.)
Versi Browser yang dapat mendukung element <audio> :
Chrome : 4.0
Bing : 9.0
Firefox : 3.5
Safari : 4.0
Opramini : 10.5
- PLUGIN PADA HTML
Plugin adalah proram komputer yang memperluar fungsi standar komputer.
Plugin dirancang untuk digunakan untuk berbagai tujuan :
- Untuk menjalanjan applet Java
- Untuk menjalankan kontrol Microsoft ActiveX
- Untuk menampilkan film Flash
- Untuk menampilkan peta
- Untuk memindai virus
- Untuk memverifikasi id bank
- Elemen <object>
elemen <object> ini didukung semua browser, dan dapat mendefinisikan objek yang disematkan dalam dokumen HTML.
Itu dirancang untuk menyematkan plug-in ( Seperti applet java, pembaca PDF, dan Flash Players)
di halaman web. Tetapi juga dapat digunakan untuk memasukkan file HTML dalam HTML kita sendiri.
Contoh :
<object width="400%" height="300px" data="filehtml-kamu.html">
</object>
Untuk hasilnya akan seperti ini :
Atau kalian juga bisa menggunakan gambar :
<object data="filegambar-kamu.jpg">
</object>
Untuk hasilnya akan seperti ini :
- Elemen <embed>
Elemen embded ini juga untuk mendefinisikan objek yang disematkan dalam dokumen HTML. Dan elemen <embed> ini didukung di semua browser utama.
Contoh penulisan :
<embed src="filegambar-kamu.jpg">
Maka akan memunculkan file gambar kamu. Dan elemen embed ini juga bisa di masukkan file html seperti menggunakan elemen object tadi.
- Memuatar Video dari Youtube
Di saat anda memutar sebuah video dari youtube menggunakan browser, anda akan melihat id dari videonya tepatnya di daerah URLnya. Contoh id : tgbNymZ7vqY
Nahh setelah menemukan idnya kalian bisa salin id tersebut untuk nanti digunakan menampilkan di dalam sebuah halaman.
Untuk membuat link yang akan di tampilkan yaitu seperti ini :
https://www.youtube.com/embed/"idnya tempel disini"
Untuk memutar video dari youtube kalian bisa menggunakan tag/elemen <iframe>. Untuk contoh penulisannya seperti di bawah ini :
<iframe src="https://youtube.com/embed/tgbNymZ7vqY" width="400" height="300">
Gunakan width dan height untuk menentukan lebar dan tingginya.
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
-
