Membuat Peta dengan tag HTML Map Area

Slides:



Advertisements
Presentasi serupa
Image – Hyperlink – Form
Advertisements

Disusun oleh : Pertama tama, buka web browers yang terdapat di computer anda. Lalu, ketik kata kunci pada search engine. Seperti pada gambar di bawah.
Mengelola isi halaman web
SESION 3 : Memformat Dokumen html (lanjutan)
Pertemuan 2.  Dreamweaver adl salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk.
HTML PEMROGRAMAN INTERNET. Form & Input HTML Form adalah area yang bisa ditempati oleh elemen form. Elemen form adalah elemen yg mengijinkan user memasukkan.
Reza Sulistyawan, S.Kom Pemrograman Web 1 1 text yang ditampilkan Sebagai contoh lihat script berikut : Belajar HTML Nyookk..! Hasilnya Membuat text berjalan.
Pengertian grafis Desain Grafis adalah salah satu bentuk seni lukis (gambar) terapan yang memberikan kebebasan pada sang desainer (perancang) untuk memilih,
Dasar Tag HTML  Catatan: Jika Anda ingin menambahkan komentar pada dokumen HTML,maka tulislah Tag,misal: NEXT.
PANDUAN MENCARI KOORDINAT. Pertama buka sehingga tampil seperti gambar di bawah lalu klik Maps (Peta) pada kolom panjang berwarna hitam,
Digitasi Data Spasial Pertemuan 5.
FUNGSI DAN PROSES KERJA
KONSEP DATA GEOSPASIAL
Web server Willy Permana Putra.
HTML By kartika puji pangesti
HTML (Hypertext Markup Language)
Kelas XII/ 1 Oleh: Adhe Whisnu K.
Pengembangan Evangs Mailoa Enumerasi, Image & Table WEB.
Aplikasi Web Mobile Lebar Layar Dinamis 2 dan Navigasi.
Korin Afiat Gawa, for further detail, please visit
 H ypertext M arkup L anguage (HTML) adalah suatu file teks sederhana yang mengandung perintah-perintah berupa TAGS sehingga sebuah web browser dapat.
HTML (Table, Form, Frame, Hyperlink)
Enumerasi, Images & Table
Usability: Disain Web yang Brilian
Internet dan Web By : Lisda Juliana P..
FORM.
Desain Web dengan Tag HTML
WEB STATIS Sabian Pamungkas.
MATERI PERKULIAHAN REKAYASA PERANGKAT LUNAK DISUSUN OLEH : KRISTIAWAN NUGROHO, M.KOM Fakultas Kesehatan.
Teknologi Dan Rekayasa
Pemrograman Web List, link, & Tag img
HTML LANJUT.
PERTEMUAN 2 HTML (Lanjutan).
PEMETAAN VORD KEDALAM CMMI UNTUK MENINGKATKAN ANALISA KEBUTUHAN PERANGKAT LUNAK (STUDI KASUS : APLIKASI MEDIA MANAGEMENT DI PT.EBDESK INDONESIA) Mata.
Pengenalan Google Map API
SMA HARAPAN 1 MEDAN Jl. Imam Bonjol No. 35 Medan.
Modul 7 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Junta Zeniarja, M.Kom, M.CS
Pengertian grafis Desain Grafis adalah salah satu bentuk seni lukis (gambar) terapan yang memberikan kebebasan pada sang desainer (perancang) untuk memilih,
CARA MEMBUAT BLOG DENGAN WORDPRESS
HYPERLINK Komputer Aplikasi IT - I Adi Rachmanto, S.Kom UNIKOM
Text Formatting, Link dan Gambar
Memuat Gambar Yudhi arta.
Komputer aplikasi it-I (html)
CSS - Cascading Style Sheets
FORMAT LINK HTML Rizki Ramdani, S.T.
CSS Pertemuan 12 Matakuliah : L0182 / Web & Animation Design
Zanial Mazalisa, S.Kom.,M.M
( Materi web HTML ) Membuat tabel.
MENDESAIN WEB SMK Negeri 1 Pekanbaru.
Text Formatting, Link dan Gambar
Area Kerja Dreamweaver
List, Image, Link dan tabel
Paragraf, Hyperlink dan Gambar
Hyperlink & Form Pertemuan 11
Kelas XII / 1 Menu dan icon Desain Grafis 25 February 2012.
Hyperlink and Form Session 10 & 11
Pertemuan ke 3 Ahmadi Sistem Informasi STMIK “BINA NUSANTARA JAYA”
Link pada HTML Dyah Ayu Irawati, ST., M.Cs.
CARA MEMBUAT BLOG DENGAN WORDPRESS
Pemrograman Berorientasi Platform (IN315B)
Komputer aplikasi it-I (html)
FRAME Pada HTML STMIK – AMIK Jayanusa. A. Frameset dan Frame Frameset adalah sebuah tag untuk pendefenisan pembuatan frame ( ) Frame adalah teknik yang.
PENGATURAN TAMPILAN WEBSITE II
MEMBUAT DESAIN IKLAN Iklan merupakan salah satu media komunikasi pemasaran yang digunakan untuk mengomunikasikan produk atau jasa pada target pasar. Dengan.
Enumerasi, Images & Table
HTML (Hypertext Markup Language)
List dan Image pada HTML
Enumerasi, Images & Table
Pengantar Pemrograman Multimedia
Transcript presentasi:

Membuat Peta dengan tag HTML Map Area Djoko Soerjanto, M.Kom

Pengantar HTML menyediakan fasilitas sederhana untuk membuat mapping sebuah gambar. Dengan menggunakan mapping gambar tersebut, dapat dikreasikan menjadi sebuah halaman yang memuat peta sederhana. Layanan HTML dalam menangani peta gambar adalah dengan menggunakan tag <map></map> yang dilengkapi dengan <area></area>.

Tag MAP Tag MAP terdiri dari beberapa pilihan untuk penandaan bujursangkar (rect), penandaan lingkaran (circle) penandaan poligon. Tag map ini membutuhkan gambar sebagai media yang akan ditandai. Sedangkan penunjuk tempat dapat menggunakan koordinat yang terdapat pada HTML source.

Syntax Pemakaian <img src=“namafile" width="" height="" usemap="#namapeta"> <map name=“namapeta"> <area shape="" coords="" href="" alt=““ target=“”> <area shape="" coords="" href="" alt=““ target=“”> … </map>

Atribut Atribut usemap pada tag IMG digunakan untuk merelasikan antara image dengan map. Atribut shape digunakan untuk mengatur bentuk area. Diisikan dengan rect, circle atau poly. Atribut coords sebagai koordinat lokasi area pada map. Jika shape=rect, maka : x1,y1,x2,y2 (left,top,right,bottom) Jika shape=circle, maka : centerx,centery,radius Jika shape=poly, maka : x1,y1,x2,y2,..,xn,yn

Contoh 1 Menampilkan 3 area berbeda bentuk. Jika diklik area tersebut muncul pesan

Contoh 2 Jika diklik area maka muncul informasi.

Contoh Web http://berniaga.com/ http://www.gamedevmap.com/

Kekurangan / Kelemahan Tidak suppor fitur zoom seperti Google Map. Bukan gambar vector.

Tool pendukung yang dipakai CorelDraw, Adobe Photoshop atau sejenisnya untuk desain tampilan ulang peta http://imagemap-generator.dariodomi.de/ untuk mengetahui lokasi

Pengembangan dengan database Jika diklik pada area tertentu memunculkan informasi detail dari pilihan area tersebut.

Database Database : maplokasi Tabel : kabupaten

Kode program

Kode program (lanjutan)

Tugas Kelompok Maksimal : 4 orang ( design, input data, koding ) Bikan map lokasi untuk project kecil apa saja Waktu 1 minggu Kirim tugas dalam bentuk ZIP/RAR ke email dosen