HTML5 Inline SVG
advertisement
Tugas Web Database
HTML 5 dan Jquery Framework
Kelompok 1
1. Andrie Utama - 1501167720
2. Devananda - 1501167033
3. Gaga Adi Lesmana - 1501179771
4. Jonathan Fandra - 1501162493
5. Raden Eduard - 1501171825
6. Sandy - 1501167733
-
Apa itu HTML 5?
HTML5 adalah versi terbaru untuk HTML dari versi sebelumnya yaitu HTML, HTML 4.01 yang datang pada
tahun 1999, dan internet telah berubah secara signifikan sejak saat itu.
HTML5 dirancang untuk menggantikan HTML 4, XHTML, dan HTML DOM Level 2.
HTML5 khusus dirancang untuk memberikan konten yang kaya tanpa membutuhkan plugin tambahan. Versi
saat ini memberikan kelebihan dari animasi grafis, musik untuk film, dan juga dapat digunakan untuk
membangun aplikasi web yang rumit. HTML5 bersifat cross-platform. Hal ini dirancang untuk bekerja dengan
menggunakan PC, atau Tablet, Smartphone, atau Smart TV.
Awal terbentuknya HTML 5
HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Kelompok Kerja Teknologi
Web Hypertext Application (WHATWG).
WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006,
mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML.
Beberapa aturan untuk HTML5:
• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
• Kebutuhan untuk plugin eksternal (seperti Flash) harus dikurangi
• Kesalahan penanganan harus lebih mudah daripada versi sebelumnya
• Scripting harus diganti dengan yang lebih markup
• HTML5 harus perangkat-independen
• Proses pembangunan harus terlihat untuk umum
HTML 5 hanya punya 1 pendeklarasian yang ditaruh di paling awal yaitu <!DOCTYPE html>
Dibawah ini adalah contoh document sederhana html 5, dengan minimal tag yang diperlukan:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Fitur Baru yang terdapat pada HTML 5
Beberapa fitur baru yang paling menarik di HTML5 adalah:
• Elemen <canvas> untuk gambar 2D
• Elemen <video> dan elemen <audio> untuk media pemutaran
• Dukungan untuk penyimpanan lokal
• Elemen tertentu-konten baru, seperti <article>, <footer>, <header>, <nav>, <section>
• Bentuk kontrol baru, seperti kalender, tanggal, waktu, email, url, pencarian
HTML5 memiliki beberapa jenis bentuk inputan baru. Fitur-fitur baru memungkinkan kontrol input dan validasi
yang lebih baik.
Color : untuk membuat pilihan input untuk memilih warna
Select your favorite color: <input type="color" name="favcolor">
date : untuk membuat pilihan yang hanya bisa memilih date tertentu
Birthday: <input type="date" name="bday">
email : untuk membuat inputan yang hanya bisa memasukkan alamat email ( harus ada tanda @ nya )
E-mail: <input type="email" name="email">
search : untuk membuat inputan untuk direct search ke google
Search Google: <input type="search" name="googlesearch">
time : untuk membuat pilihan inputan time
Select a time: <input type="time" name="usr_time">
url : untuk membuat inputan yang sifatnya link ke page lain
Add your homepage: <input type="url" name="homepage">
Elemen Semantic Baru di HTML5
Banyak situs web yang ada saat ini mengandung kode HTML seperti ini: <div id="nav">, <div class="header">,
atau <div id="footer">, untuk menunjukkan link navigasi, header, dan footer.
HTML5 menawarkan elemen semantik baru yang lebih jelas untuk mendefinisikan bagian yang berbeda dari
sebuah halaman web, misalkan apabila kita membuat tag <aside> otomatis akan membuat dokumen di bagian
side, kalau membuat tag <footer> otomatis akan membuat dokumen di bagian bawah:
<header>
Elemen <header> menentukan header untuk dokumen atau bagian. Unsur <header> harus digunakan sebagai
wadah untuk konten pengantar. Anda dapat memiliki beberapa elemen <header> dalam satu dokumen.
Contoh berikut mendefinisikan header untuk header sebuah artikel:
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
<nav>
Elemen <nav> mendefinisikan satu set link navigasi. Unsur <nav> ditujukan untuk blok besar link navigasi.
Namun, tidak semua link dalam dokumen harus berada di dalam elemen <nav>!
Contoh :
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<section>
Elemen <section> mendefinisikan bagian dalam sebuah dokumen. Menurut dokumentasi HTML5 W3C:
"Section adalah pengelompokan tematik konten, biasanya dengan judul."
Contoh :
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>
Unsur <article> menetapkan spesifikasi yang independen, konten berdiri sendiri.
Sebuah artikel harus masuk akal dan harus mungkin untuk didistribusikan secara mandiri dari sisa situs web.
Contoh di mana elemen <article> dapat digunakan:
Forum post
Blog post
News story
Comment
Contoh :
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
<aside>
Unsur <aside> mendefinisikan beberapa konten selain dari konten itu di ditempatkan (seperti sidebar).
Samping konten harus berkaitan dengan isi sekitarnya.
Contoh :
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<footer>
Elemen <footer> menetapkan footer untuk dokumen atau bagian. Unsur <footer> harus berisi informasi tentang
elemen yang mengandung. Sebuah footer biasanya berisi penulis dokumen, informasi hak cipta, link ke
persyaratan penggunaan, informasi kontak, dll . Kita dapat memiliki beberapa elemen <footer> dalam satu
dokumen.
Contoh :
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
Canvas pada HTML 5
Apa itu Canvas?
Elemen <canvas> digunakan untuk menggambar grafik di canvas melalui scripting (JavaScript biasanya).
Unsur <canvas> adalah wadah untuk kita menggambar grafis. Kita harus menggunakan script untuk benar-benar
membuat grafis. Kanvas memiliki beberapa metode untuk gambar path, kotak, lingkaran, teks, dan
menambahkan gambar.
Cara Membuat Canvas
Sebuah kanvas adalah area persegi pada halaman HTML, dan itu ditentukan dengan elemen <canvas>.
Note: Secara default, <canvas> element tidak ada border dan tidak mempunyai element.
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Selalu tentukan atribut id (yang akan disebut di script), dan lebar dan tinggi atribut untuk menentukan
ukuran kanvas.
Tip: Kita dapat memiliki beberapa elemen <canvas> pada satu halaman HTML.
Menggambar di Canvas dengan JavaScript
Semua penggambaran di kanvas harus dilakukan dengan javascript :
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
HTML5 Video
Video on the Web
Sebelum HTML5, video hanya bisa dimainkan dengan plug-in (seperti flash).
HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan video atau film pada
halaman web, dengan memggunakan elemen <video>.
Untuk menampilkan video di HTML5, berikut adalah minimal kodingan yang diperlukan :
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HTML5 Audio
Audio on the Web
Sebelum HTML5, file audio hanya bisa dipasang dengan plug-in (seperti flash).
HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada
halaman web: elemen <audio>.
Untuk memutar sebuah audio di HTML5, berikut ini kodingan minimal yang dibutuhkan :
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML5 Web Storage
Apa itu HTML 5 Web Storage?
Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser pengguna.
Sebelumnya, hal ini dilakukan dengan cookie. Namun, Penyimpanan Web lebih aman dan lebih cepat. Data ini
tidak termasuk dengan setiap permintaan server, tetapi digunakan hanya ketika meminta. Hal ini juga
memungkinkan untuk menyimpan data dalam jumlah besar, tanpa mempengaruhi kinerja website.
Data disimpan dalam pasangan nama / nilai, dan halaman web hanya dapat mengakses data yang tersimpan
dengan sendirinya.
Tidak seperti cookie, batas penyimpanan yang jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah
ditransfer ke server.
HTML5 Web Storage Objects
HTML5 Web Storage menyediakan dua objek baru untuk menyimpan data pada klien:
• window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
• code.sessionStorage - menyimpan data untuk satu sesi (data hilang ketika tab ditutup)
Sebelum menggunakan penyimpanan web, memeriksa dukungan browser untuk localStorage dan
sessionStorage:
if(typeof(Storage)!=="undefined")
{
// Code for localStorage/sessionStorage.
}
else
{
// Sorry! No Web Storage support..
}
HTML5 Inline SVG
Apa itu SVG?
• SVG singkatan dari Scalable Vector Graphics
• SVG digunakan untuk mendefinisikan grafis berbasis vektor untuk Web
• SVG mendefinisikan grafis dalam format XML
• Grafis SVG tidak kehilangan kualitas jika mereka memperkecil atau diubah ukurannya
• Setiap elemen dan setiap atribut dalam file SVG dapat animasi
• SVG adalah rekomendasi W3C
Contoh kodingan untuk inline SVG :
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Hasilnya seperti ini :
JQuery Introduction
JQuery adalah suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan
HTML. Hampir sama dengan bahasa lainnya Jquery tersendiri mempunyai keunggulan yang cukup berpengaruh
terhadap pengguna hingga menjadi yang paling populer , dan juga yang paling sering diperpanjang masa
penggunaannya.
Dan saat ini begitu banyak perusahaan terbesar di Web menggunakan jQuery , salah satunya adalah :
• Google
• Microsoft
• IBM
• NetflixjQuery Syntax
Info daftar perusahaan ini kami dapatkan dari beberapa situs web yang membuat artikel mengenai web dengan
menggunakan bahasa Jquery.
Disini Jquery mempunyai lambang tersendiri atau sembonyan yang berkalimat “Write less, do more” :
kesederhanaan dalam penulisan code yang simple dan tidak rumit yang dibanyangkan , tetapi menghasilnya
tampilan yang lebih menarik atau lebih bagus dengan hasil yang lebih banyak dangan bermacam-macam
tampilan lainnya.
Di dalam Jquery ini juga kami mengetahui apa tujuan jika kita menggunakan bahasa pemogramman jQuery
tersebut yaitu agar ketika kita membuat suatu website terasa lebih mudah dengan menggunakan JavaScript
dalam pembuatannya.
Beberapa Hal yang dapat dilakukan oleh JQuery
1. Mengakses bagian halaman tertentu dengan mudah.
Dalam mengakses suatu website terkadang user sering dipusingkan dengan menu-menu yang ada, dan di Jquery
mempermudah untuk menggunakannya tanpa masalah yang ada.
2. Mengubah tampilan bagian halaman tertentu.
Dapat merubah tampilan dalam berupa halaman yang berisi bermacam-macam.
3. Mengubah isi dari halaman.
Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list),
menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa
baris perintah.
4. Merespond interaksi user dalam halaman.
Pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri.
5. Menambahkan animasi ke halaman.
Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan
sebagainya. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari
halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.
Ini merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML).
7. Menyederhanakan penulisan Javascript biasa.
jQuery Selectors
JQuery selector memungkinkan Anda untuk memilih dan memanipulasi elemen HTML. JQuery selector
digunakan untuk "menemukan" (atau select) elemen HTML berdasarkan id mereka, kelas, jenis, atribut, nilai
atribut dan banyak lagi. Ini didasarkan pada Selectors CSS yang ada, dan di samping itu, memiliki beberapa
custom selector sendiri. Semua selector di jQuery dimulai dengan tanda $ dan tanda kurung ().
Macam-macam Elemen Selector
1. The Element Selector
jQuery selector memilih elemen elemen berdasarkan nama elemen. Anda dapat memilih semua <p> elemen
pada halaman seperti ini: $ ("p") .
2. The #id Selector
jQuery #id selector menggunakan atribut id dari tag HTML untuk menemukan elemen tertentu. Id harus unik
dalam suatu halaman, sehingga Anda harus menggunakan selector #id bila Anda ingin menemukan satu, elemen
yang unik. Untuk menemukan elemen dengan id tertentu, menulis karakter hash, diikuti dengan id dari elemen:
$ ("# test") .
3. The .class Selector
jQuery class selector menemukan elemen dengan kelas tertentu. Untuk menemukan elemen dengan kelas
tertentu, menulis periode karakter, diikuti oleh nama kelas: $ (".test") .
Contoh Sederhana JQuery
Contoh sederhana penggunaan JQuery
Penjelasan Program
1. Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar.
2. Perintah-perintah JQuery.
Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka
jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya
diletakkan di tag <body>.
Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show (
$(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama
class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan
adalah paragraf baris ke-24 sampai 27.
Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jquery.
3. Isi dari halaman. Perhatikan nama class dari masing-masing object.
