Materi 2 HTML5

PEMROGRAMAN WEB
HTML 5
PEMROGRAMAN WEB
HTML 5
• HTML 5 adalah standar baru dari HTML
• Versi HTML sebelumnya yaitu HTML 4.01 muncul pada
tahun 1999
• HTML 5 didesain untuk memenuhi hampir semua
kebutuhan user tanpa plugin tambahan.
• Kebutuhan-kebutuhan tersebut antara lain
menampilkan animasi, menjalankan aplikasi, memutar
musik dan video.
PEMROGRAMAN WEB
Fitur Baru HTML5
• Beberapa fitur baru dari HTML5 :
 Elemen <canvas> untuk mengambar 2D
 Elemen <video> dan <audio> untuk pemutaran
multimedia
 Mendukung penyimpanan pada komputer local support
 Elemen-elemen baru seperti <article>, <footer>,
<header>, <nav>, <section>
 Kontrol form baru seperti calender, date, time, email, url,
search
PEMROGRAMAN WEB
Elemen yang dihilangkan di HTML5
• Berikut ini adalah elemen pada HTML 4.01 yang dihilangkan dari
HTML5 :
 <acronym>  <frame>
 <applet>  <frameset>
 <basefont>  <noframes>
 <big>  <strike>
 <center>  <tt>
 <dir>
 <font>
PEMROGRAMAN WEB
HTML5 Canvas
• Canvas adalah komponen utama yang
membedakan HTML5 dengan HTML versi
sebelumnya.
• Dengan canvas kita bisa menggambar
menggunakan HTML dan JavaScript.
PEMROGRAMAN WEB
Membuat Garis
• Perintah untuk membuat garis pada canvas adalah
moveTo() dan lineTo()
• Namun selain kedua perintah tersebut, ada perintah-
perintah lain yang harus digunakan secara bersamaan
yang mengatur properti dari garis yang dihasilkan.
PEMROGRAMAN WEB
Lanjut Membuat Garis
• Perintah-peritah untuk membuat garis yaitu :
beginPath() Digunakan setiap akan memulai mengambar garis, untuk memisahkan garis yang akan dibuat
dengan garis lainnya
strokeStyle Digunakan untuk memberi warna garis
lineWidth Diisi dengan angka untuk mengatur ketebalan garis
lineJoin Digunakan untuk mengatur ketajaman sudut pada setiap sambungan garis jika garis membentuk
sudut. Dapat diisi round, miter atau bevel
lineCap Digunakan untuk mengatur tampilan ujung garis, dapat diisi dengan round, butt, atau square
moveTo() Digunakan untuk menentukan titik awal pembuatan garis. Format penulisannya adalah :
ctx.moveTo(x, y);
lineTo() Digunakan untuk menentukan titik-titik berikutnya. Format penulisannya adalah : ctx.lineTo(x, y);
Stroke() Digunakan untuk menerapkan warna garis yang terakhir ditentukan dengan strokeStyle.
closePath() Digunakan untuk mengakhiri pembuatan garis agar garis tidak menyambung dengan garis lain
yang dibuat setelahnya.
PEMROGRAMAN WEB
Contoh Membuat Garis :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML 5 Membuat Garis</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
buatGambar();
function buatGambar(){
ctx.strokeStyle = '#00f';
ctx.lineWidth = 20;
ctx.lineJoin = 'bevel';
ctx.lineCap = 'butt';
PEMROGRAMAN WEB
Lanjut Contoh Membuat Garis :
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
ctx.closePath();
}
});
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"
style="border: 1px solid black;"></canvas>
</body>
</html>
PEMROGRAMAN WEB
Membuat Segiempat
• Objek segiempat sering disebut dengan rectangle.
• Ada 4 jenis rectangle yang dapat dibuat pada canvas
fillRect() Rectangle yang dibuat dengan perintah ini hanya dapat diberi warna isi dan tidak bisa diberi warna
outline (garis tepi).
strokeRect() Rectangle yang dibuat dengan perintah ini hanya dapat diberi warna outline dan tidak bisa diberi
warna isi
Rect() Rectangle yang dibuat dengan perintah ini dapat diberi warna isi dan warna outline.
clearRect() Rectangle yang dibuat dengan perintah ini akan menghapus semua objek gambar yang berada
dibawahnya.
• Semua perintah dapat ditulis dengan format yang sama yaitu :

ctx.rect(x, y, w, h);
PEMROGRAMAN WEB
Contoh Membuat Segiempat :
<!DOCTYPE html>
<html>
<head lang="en">
<title>HTML5 Membuat Segiempat</title>
buatGambar();
ctx.fillStyle = '#f00';
ctx.lineWidth = 5;
PEMROGRAMAN WEB
Lanjut Membuat Segiempat :
ctx.fillRect(100,100,150,100);
ctx.strokeRect(150,120,150,100);
ctx.clearRect(120,130,100,50);
ctx.rect(100,250,200,100);
ctx.fill();
ctx.stroke();
}
});
</script>
</head>
<body>
style="border: 1px solid #000000;"></canvas>
</body>
</html>
PEMROGRAMAN WEB
Membuat Busur dan Lingkaran
• Lingkaran dan busur (lingkaran terbuka) dapat dibuat dengan perintah
yang sama yaitu arc().
• Format penulisannya adalah sebagai berikut :
ctx.arc(x,y,radius,star angle, end angle, clock wise);
• x = koordinat x posisi pusat lingkaran
• y = koordinat y posisi pusat lingkaran
• Radius = jari-jari lingkaran
• Star angle = posisi titik awal garis berdasarkan sudut
• End angle = posisi titik akhir garis berdasarkan sudut
• Clock wise = diisi true jika kebalikan jarum jam dan diisi false jika searah
dengan jarum jam.
PEMROGRAMAN WEB
Contoh Busur dan Lingkaran
<!DOCTYPE html>
<html>
<head lang="en">
<title>Membuat Busur dan LIngkaran</title>
buatGambar();
ctx.fillStyle = '#f00';
ctx.lineWidth = 5;
ctx.lineJoin = 'bavel';
ctx.lineCap = 'round';
PEMROGRAMAN WEB
Lanjut Contoh Busur dan
Lingkaran
//lingkaran penuh hanya outline
ctx.beginPath();
ctx.arc(100,80,50,(Math.PI/180)*0,(Math.PI/180)*360,false);
ctx.stroke();
ctx.closePath();
//lingkaran penuh outline dan isi

ctx.beginPath();
ctx.arc(250,80,50,(Math.PI/180)*0,(Math.PI/180)*360,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
//Lingkaran tidak penuh

ctx.beginPath();
ctx.arc(400,80,50,(Math.PI/180)*0,(Math.PI/180)*180,true);
ctx.stroke();
ctx.closePath();
PEMROGRAMAN WEB
Lanjut Contoh Busur dan
Lingkaran
//Busur dengan arcTo
ctx.beginPath();
ctx.moveTo(100,300);
ctx.arcTo(300,200,500,500,30);
ctx.stroke();
ctx.closePath();
}
});
</script>
</head>
<body>
</body>
</html>
PEMROGRAMAN WEB
Teks pada Canvas
• Perintah untuk menuliskan teks pada canvas ada dua macam,
yaitu fillText() dan strokeText().
• fillText() digunakan untuk membuat teks yang hanya bisa
diberi warna isi saja
• strokeTeks() digunakan untuk membuat teks yang hanya bisa
diberi warna outline saja.
• Jadi, jika ingin membuat teks yang mempunyai warna isi dan
outline, harus menggunakan keduanya dengan posisi yang
sama.
PEMROGRAMAN WEB
Lanjut teks pada canvas
• Format penulisan fillText() dan strokeText() :
ctx.fillText(“text”,x,y);
ctx.strokeText(“text”,x,y);
 Text : teks yang akan dituliskan, harus ditulis
dalam tanda petik (“”)
 X : koordinat x posisi teks
 Y : koordinat y posisi teks
PEMROGRAMAN WEB
Contoh Teks pada Canvas :
<!DOCTYPE html>
<html>
<head lang="en">
<title>Menggunakan Teks pada Canvas</title>
var canvas = $("canvas")[0];
buatGambar();
PEMROGRAMAN WEB
Lanjut Contoh Teks pada
Canvas :
ctx.fillStyle = 'red';
ctx.strokeStyle = 'blue';
ctx.fillText("HTML5 Canvas",50,50);
ctx.strokeText("HTML5 Canvas",50,100);
}
});
</script>
</head>
<body>
</body>
</html>
PEMROGRAMAN WEB
Audio
• Audio bisa dikatakan sama dengan suara.
• Cara memasukkan audio ke canvas dengan
menggunakan tag <audio>
• Format audio yang didukung adalah mp3, ogg
dan wav.
PEMROGRAMAN WEB
Contoh Audio :
<!DOCTYPE html>
<html>
<head lang="en">
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
PEMROGRAMAN WEB
Lanjut Contoh Audio :
var audio = $("#audio")[0];
audio.play();
});
</script>
<title></title>
</head>
<body>
<audio src="Yellow.mp3" id="audio"></audio>
</body>
</html>
PEMROGRAMAN WEB
Video
• Ada tiga tipe video yang bisa dimasukkan ke canvas yaitu ogg, mp4
dan webm.
• Untuk menambahkan video ke dalam browser bisa menggunakan tag
<video> akan tetapi tampilan video berada di luar canvas.
• Cara lain agar video tetap berada dalam canvas yaitu dengan
menggunakan perintah drawImage().
PEMROGRAMAN WEB
Contoh Video :
<!DOCTYPE html>
<html>
<head lang="en">
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
var canvas = $('#canvas')[0];
var ctx = canvas.getContext('2d');
var video = document.createElement("video");
video.setAttribute("src","video.mp4");
video.play();
PEMROGRAMAN WEB
Lanjut Contoh Video :
setInterval(buatGambar, 20);
ctx.clearRect(0,0,400,400);
ctx.drawImage(video,10,10,320,240);
}
});
</script>
<title>Video</title>
</head>
<body>
</body>
</html>
PEMROGRAMAN WEB
Tugas :
• Buat logo menggunakan HTML5 canvas
• Bentuk kelompok kerja, 1 kelompok maksimal 2 orang
• Presentasikan hasil kerja di setiap akhir pertemuan
pada matakuliah Pemrograman Web.
PEMROGRAMAN WEB
Contoh Logo menggunakan
HTML5 Canvas
PEMROGRAMAN WEB
TERIMA KASIH
SAMPAI JUMPA
MINGGU DEPAN
PEMROGRAMAN WEB

Materi 2 HTML5

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi 2 HTML5

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB

• Semua perintah dapat ditulis dengan format yang sama yaitu :

//lingkaran penuh outline dan isi

//Lingkaran tidak penuh

Anda mungkin juga menyukai