Penerapan HTML (Part 16)

I.Latar Belakang.
Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime text

III.Tujuan.
 untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan. 
Apa itu HTML Canvas?

HTML <canvas> elemen digunakan untuk menggambar grafik, dengan cepat, melalui JavaScript.
<Canvas> elemen hanya wadah untuk grafis. Anda harus menggunakan JavaScript untuk benar-benar menarik grafis.
Kanvas memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan menambahkan gambar.

Contoh kanvas
Sebuah kanvas adalah area persegi pada halaman HTML. Secara default, kanvas tidak memiliki perbatasan dan tidak ada konten.
markup terlihat seperti ini:

<Canvas id = "myCanvas" width = "200" height = "100"> </ canvas>

Catatan: Selalu menentukan atribut id (untuk dimaksud dalam naskah), dan lebar dan tinggi atribut untuk menentukan ukuran kanvas. Untuk menambahkan perbatasan, menggunakan atribut style.

Contoh :

Maka outputnya :

Contoh :

Maka outputnya :

Contoh :

Maka outputnya :

Contoh :

Maka outputnya :

HTML5 SVG

Apa SVG?

• SVG adalah singkatan dari Scalable Vector Graphics
• SVG digunakan untuk mendefinisikan grafis untuk Web
• SVG adalah rekomendasi W3C

HTML <svg> Elemen

HTML <svg> unsur adalah wadah untuk grafis SVG.
SVG memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.

Contoh :

Maka outputnya :

Perbedaan Antara SVG dan kanvas

SVG adalah bahasa untuk menggambarkan grafis 2D dalam XML.
Canvas menarik grafis 2D, on the fly (dengan JavaScript).
SVG adalah berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan JavaScript event untuk elemen.
Dalam SVG, masing-masing bentuk ditarik dikenang sebagai objek. Jika atribut dari sebuah objek SVG berubah, browser dapat secara otomatis kembali membuat bentuk.
Kanvas diberikan pixel dengan pixel. Di kanvas, setelah grafis ditarik, telah dilupakan oleh browser. Jika posisinya harus diubah, seluruh adegan perlu digambar ulang, termasuk benda-benda yang mungkin telah ditutupi oleh grafis.

HTML Google Maps


 Google Maps memungkinkan Anda untuk menampilkan peta pada halaman web kamu.

Sebuah Halaman Web Dasar 

Untuk menunjukkan cara menambahkan Google Map ke halaman web, kita akan menggunakan halaman HTML dasar 

misalnya Dijelaskan
mapOptions variabel mendefinisikan properti untuk peta.
pusat properti menentukan mana ke pusat peta (menggunakan koordinat lintang dan bujur).
zoom properti menentukan tingkat zoom untuk peta (mencoba untuk bereksperimen dengan tingkat zoom).
mapTypeId properti menentukan jenis peta untuk menampilkan. Jenis peta berikut ini didukung: ROADMAP, SATELLITE, HYBRID, dan Terrain.
Garis: var map = google.maps.Map baru (document.getElementById ( "peta"), mapOptions); menciptakan peta baru dalam <div> elemen dengan id = "peta", menggunakan parameter yang dilewatkan (mapOptions).

Tambahkan Google Maps API

Akhirnya, menunjukkan peta di halaman!
Fungsi dari peta disediakan oleh perpustakaan JavaScript yang terletak di Google. Menambahkan script untuk merujuk pada API Google Maps dengan callback untuk fungsi myMap

Contoh :

Maka outoutnya :

V.Kesimpulan. 
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.

VI.Refrensi.
    http://www.w3schools.com/html