PEMROGRAMAN WEB 10 Introduction to HTML5

PEMROGRAMAN WEB 10 – Introduction to HTML5

Andi WRE

HTML 5
The New HTML Standard
The next generation of HTML
Hasil kerjasama antara World Wide Web Consortium (W3C) dan the Web Hypertext Application Technology Working Group (WHATWG)
Beberapa aturan yang diterapkan pada HTML 5 : - Fitur-fitur baru harus berbasis HTML, CSS, DOM, dan JavaScript - Mengurangi kebutuhan plugin eksternal - Penanganan error yang lebih baik - Element baru untuk menggantikan scripting - Proses pengembangan harus dapat dilihat oleh publik

Here comes your footer to HTML5 Web Programming – Introduction

Fitur baru HTML5
Fitur baru : - New Elements - New Attributes - Full CSS3 Support - Video and Audio - 2D/3D Graphics - Local Storage - Local SQL Database - Web Applications
Di-support oleh sebagian besar browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer)

Here comes your footer to HTML5 Web Programming – Introduction

Element HTML 4 yang Hilang













<noframes> <strike>

Here comes your footer to HTML5 Web Programming – Introduction


Mendefinisikan versi bahasa markup yang digunakan
HTML 4


HTML 5

Here comes your footer to HTML5 Web Programming – Introduction

Struktur Minimal HTML 5

Here comes your footer to HTML5 Web Programming – Introduction

Canvas
Digunakan untuk menggambar grafik dengan menggunakan scripting
Menggunakan sistem koordinat Sintaks : Atribut : • id

: identitas objek canvas

• width

: lebar kanvas

• height : tinggi kanvas
Canvas memiliki area berbentuk persegi panjang
Proses draw dilakukan di JavaScript
Gunakan JavaScript untuk mengakses setiap pixel-nya Here comes your footer to HTML5 Web Programming – Introduction

Canvas
Contoh :


Canvas sudah terbentuk, tapi tidak terlihat karena tidak ada border, berikan style untuk memberi border

(Konten Fallback) Akan ditampilkan jika browser tidak mendukung element canvas

Here comes your footer to HTML5 Web Programming – Introduction

canvas.getContext("2d")
The getContext("2d") object is a built-in HTML5 object
Proses dilakukan di JavaScript
Sintaks :

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Draw Line) Method

Description

beginPath()

memulai path baru, atau menghapus path yang sudah ada

moveTo(x,y)

berpindah titik tanpa ada penggambaran garis

lineTo(x,y)

bergerak dari titik terakhir ke titik (x,y) dengan penggambaran garis lurus

stroke()

menambahkan hasil penggambaran ke canvas

closePath()

menutup kembali path dari titik terakhir ke titik awal (Completes the path)

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Draw Circle)
Sintaks : arc(x,y,r,sAngle,eAngle,[counterClockwise]); Parameter

Values

Description

x

x-coordinate Koordinat x sebagai titik pusat lingkaran

y

y-coordinate Koordinat y sebagai titik pusat lingkaran

r

radius

Jari-jari lingkaran

sAngle

number

Sudut lingkaran awal

eAngle

number

Sudut lingkaran akhir

counterClockwise true/false

Optional, arah putaran penggambaran lingkaran searah jarum jam atau tidak

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Draw Circle)

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Draw Rectangle)
Sintaks : rect(x,y,w,h) Parameter

Values

Description

x

x-coordinate

Koordinat x sebagai titik awal (upperleft)

y

y-coordinate

Koordinat y sebagai titik awal (upperleft)

width

width

Lebar persegi panjang (pixel)

height

height

Tinggi persegi panjang (pixel)

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Clear Rectangle)
Menghapus seluruh pixel yang ada pada area rectangle
Sintaks : clearRect(x,y,width,height); Parameter

Values

Description

x

x-coordinate

Koordinat x sebagai titik awal (upperleft)

y

y-coordinate

Koordinat y sebagai titik awal (upperleft)

width

width

Lebar persegi panjang (pixel)

height

height

Tinggi persegi panjang (pixel)

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Colors and Styles)

ctx.lineCap="round"; ctx.lineJoin="round"; ctx.lineJoin="miter"; ctx.shadowOffsetX=30; ctx.miterLimit=5; Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Linear Gradient)
Sintaks : createLinearGradient(x0,y0,x1,y1);

addColorStop(position,color);

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Linear Gradient) fillRect(x,y,width,height);

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Radial Gradient)
Sintaks : createRadialGradient(x0,y0,r0,x1,y1,r1);

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Image)
Sintaks : drawImage(img,x,y,width,height,dx,dy,dwidth,dheight);

Here comes your footer to HTML5 Web Programming – Introduction

Canvas (Image)

Here comes your footer to HTML5 Web Programming – Introduction

Input Type Color

Date

Here comes your footer to HTML5 Web Programming – Introduction

Input Type Datetime

Email Alamat email yang dimasukan user akan otomatis di validasi

Note : Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options)

Here comes your footer to HTML5 Web Programming – Introduction

Input Type Number Atribut : - Min - Max - Step - Value

: menentukan angka minimum : menentukan angka maksimum : interval : menentukan angka default

Range

Here comes your footer to HTML5 Web Programming – Introduction

Drag and Drop
Mengambil objek dan menariknya ke lokasi yang berbeda. 1. Buat element dapat di drag (draggable)



2. Buat area sebagai tempat ketika element di drop

•

Atribut ondragstart memanggil function drag(event), untuk menentukan element apa yang akan ditarik (drag)

3. Function drag(ev)

• •

Method dataTransfer.setData() set tipe data dan value dari element yang ditarik (drag) Pada contoh ini tipe datanya adalah "Text" dan value-nya adalah id dari element yang ditarik ("drag1") Here comes your footer to HTML5 Web Programming – Introduction

Drag and Drop 4.

Atribut ondragover pada element div menspesifikasikan dimana element yang ditarik (drag) dapat ditempatkan (drop) Note : Secara default, data/element tidak dapat ditempatkan (drop) pada element lain. Untuk memungkinkan di drop, maka kita harus mencegah (prevent) penanganan default browser pada element tsb

5.

Do the Drop, Atribut ondrop pada element div menspesifikasikan aksi yang akan dijalankan ketika sebuah element di drop pada div tersebut.

• Get data dari element yg di tarik (drag) dengan dataTransfer.getData("Text") method. • Pada contoh ini element yang di-drag adalah element dengan id ("drag1") • Tambahkan (append) element yang di-drag ke element drop • Panggil preventDefault() mencegah (prevent) penanganan default browser pada element

Here comes your footer to HTML5 Web Programming – Introduction

Drag and Drop CSS

Drag and drop here!

Here comes your footer to HTML5 Web Programming – Introduction

Video
Menambahkan video pada halaman web tanpa menggunakan plug-in (cth : flash)
Format video : mp4, ogg

Here comes your footer to HTML5 Web Programming – Introduction

Video + DOM (Document Object Model)

Here comes your footer to HTML5 Web Programming – Introduction

Latihan
Buatlah animasi Zoom In sebuah lingkaran yang berada pada sebuah canvas (300x250)px. Posisi dari lingkaran ditentukan secara acak. Titik X yang diacak adalah 150, 65, 235 dan titik Y yang diacak adalah 125, 185, 65. Lingkaran dimulai dengan jari-jari berjarak 10 dari titik pusat dan akan membesar dengan penambahan 10 secara terus menerus sampai jari-jari berjarak 50. Jika sudah mencapai jarak 50, maka lingkaran berpindah posisi.

Here comes your footer to HTML5 Web Programming – Introduction

×

Report "PEMROGRAMAN WEB 10 Introduction to HTML5"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close