1 Pemrograman Web WEEK 03 HTML LANJUT 2 Introduction IMAGE HYPERLINK IMAGE MAP DIV & SPAN META 1
HTML Image 3 Menampilkan gambar pada halaman web Tag: <img> (tidak memiliki tag penutup) align Atribut Value Keterangan Top, bottom, middle, left, right Deprecated pada HTML 4.01 Not supported pada HTML 5 alt text Menampilkan informasi lain dari gambar dalam bentuk teks border Pixels (px) Deprecated pada HTML 4.01 Not supported pada HTML 5 height Pixels (px) Menentukan tinggi gambar HTML Image cont. 4 Atribut Value Keterangan hspace Pixels (px) Deprecated pada HTML 4.01 Not supported pada HTML 5 src URL Lokasi folder beserta nama file gambar yang hendak ditampilkan vspace Pixels (px) Deprecated pada HTML 4.01 Not supported pada HTML 5 width Pixels (px) Menentukan lebar gambar 2
HTML Image cont. 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/dtd/strict.dtd"> <html> <head> <title>contoh Pemakaian Gambar</title> </head> <body> <img src="images/kakuranger.jpg" alt="ninja Sentai Kakuranger" height="200" width="150"> </body> </html> HTML Hyperlink 6 Jembatan antara halaman web yang satu dengan halaman web yang lain Dapat dipakai juga untuk file : Contoh: <a href= url >Link text</a> <a href=http://www.itmaranatha.org>it Maranatha</a> 3
HTML Hyperlink cont. 7 Atribut target dipakai untuk menentukan apakah link yang ditekan/ diklik membuka pada window yang baru atau tidak <a href= URL target= target value >Link text</a> Target value _top _blank _parent _self Keterangan Link dengan window yang sama Link dengan membuka window/ tab baru Link ke frameset parent Link ke dokumen frame yang aktif HTML Hyperlink Jump In Page 8 Berpindah ke halaman yang sama Dipakai biasanya jika terdapat topik atau top page Cara membuat: Beri identitas (atribut id) pada tag Buat link dengan menambahkan tanda # <a href= #id_value >URL text</a> 4
HTML Hyperlink Mailto 9 Berpindah ke halaman compose email yang sudah diisi Berfungsi jika dan hanya jika sudah mengintegrasikan email application Spasi diganti dengan %20 <a href= mailto:someone@example.com?cc=someone @example.com&subject=good%20morning&body=welcome% 20at%20Maranatha >Send mail</a> HTML Hyperlink Image 10 Mengganti URL teks dengan gambar <a href= URL > </a> <img src= image_url title= image_title width= 20 height= 20 /> 5
Image Map 11 Membagi gambar menjadi bagian-bagian (region) yang dapat diklik. Region dapat berupa rect, circle, atau poly Tag: <map> </map> Tag map memiliki atribut name sebagai identitas Image Map cont. 12 Tag <area> mendefinisikan area dalam image-map <area shape= shape_value coords= coords_value href= URL alt= alternate_teks > Atribut Value Deskripsi shape default Mendefinikan seluruh region rect circle poly Mendefinisikan region berbentuk kotak Mendefinisikan region berbentuk lingkaran Mendefinisikan polygonal region 6
Image Map cont. 13 Atribut Value Deskripsi coords x1, y1, x2, y2 Spesifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape= rect ) x, y, radius Specifies the coordinates of the circle center and the radius (for shape= circle ) x1, y1, x2, y2,..., xn, yn Spesifies the coordinates fo the edges of polygon Image Map cont. 14 7
DIV 15 Berfungsi memformat content yang berada di dalamnya Tag: <div> </div> Mendefinisikan section pada dokumen HTML Dikelompokkan untuk diformat dengan CSS SPAN 16 Berfungsi memformat content yang berada di dalamnya Tag: <span> </span> Digunakan dalam 1 baris 8
DIV & SPAN 17 Marquee 18 Membuat tampilan bergerak (vertikal/ horizontal) Non-standar HTML tag Tidak disarankan dipakai dalam dokumen HTML Tag: <marquee> </marquee> Atribut Value Keterangan behaviour slide Slide 1 arah dan berhenti scroll Bergerak ke direction & berulang alternate Bouncing direction left right up down - scrollamount 1 n Kecepatan teks/ gambar 9
HTML Meta 19 Informasi mengenai data Tidak ditampilkan oleh dokumen web, tetapi digunakan oleh pencarian search engine/ browser /web service Selalu diletakkan dalam tag <head> Tag: <meta> HTML Meta cont 20 Contoh penggunaan meta: <meta name= description content= describe your content > <meta name= keywords content= IT, Maranatha, HTML > <meta name= author content= Web Author > 10
Icon for Website 21 Memberikan icon pada title website Anda (address bar) Ukuran: 16 16 px <link rel= icon href= image_url type= image/x=icon /> ATAU <link rel= SHORTCUT ICON href= image_url > Question 22 11