Pertemuan 04
•Download as PPT, PDF•
0 likes•319 views
Dokumen ini membahas tentang penggunaan gambar (image) dalam pembuatan website, termasuk cara mengubah ukuran gambar, menambahkan alternatif teks, memberikan bingkai, menjadikan gambar sebagai tautan, dan membuat peta gambar (image map) untuk membuat beberapa bagian gambar menjadi tautan ke halaman yang berbeda.
More Related Content
Similar to Pertemuan 04
Similar to Pertemuan 04 (20)
More from Andyy EmeMezt
More from Andyy EmeMezt (8)
Pertemuan 04
- 1. PEMROGRAMAN WEB I Oleh: ANDI IRMAYANA, S.KOM.,M.T
- 3. Image • Image (gambar) dalam suatu web merupakan daya tarik bagi pengunjung. • Umumnya browser menampilkan inline imange (gambar disajikan bergamaan dg teks). • Image yg dpt ditampilkan dalam web site adalah jenis GIF, JPG, XBM, dan PNG
- 4. • Bentuk Umum • Atribut Image <img src=“nama_image” [Atribut]> Atribut Kegunaan Width Menentukan lebar Image Height Menentukan tinggi Image Align Perataan Image Top, Bottom, Middle, Left, Right Alt Menentukan alternatif Image Border Memberi bingkai pd Image
- 5. Contoh: <HTML> <head><title></title></head> <BODY BACKGROUND="kdm_bg.jpg" TEXT="#FFFFFF" link="#00FF00" vlink="#FFFF00" alink="#FFFFFF"> <H2>DAFTAR SEARCH ENGINE</H2> <IMG SRC="garis_asli.gif" width="100%"><P> <IMG SRC="bola.gif"> <a href="http://www.altavista.digital.com/">Alta Vista</a><BR>
- 6. <IMG SRC="bola.gif"> <a href="http://www.google.com/">Google</a><BR> <IMG SRC="bola.gif"> <a href="http://comfind.com/">ComFind</a><BR> <IMG SRC="bola.gif"> <a href="http://www.planetsearch.com/">Planet Search</a><BR> <IMG SRC="bola.gif"> <a href="http://www.excite.com/">Excite</a><BR> <IMG SRC="bola.gif"> <a href="http://www.hotbot.com/">HotBot</a><BR> </BODY> </HTML>
- 7. Hasil
- 8. Mengubah Ukuran Image <HTML> <BODY> <IMG SRC="Ayuazhar.gif"> (ukuran asli) <IMG SRC="Ayuazhar.gif" WIDTH="45" HEIGHT="60"> (45x60 pixel) <IMG SRC="Ayuazhar.gif" WIDTH="180" HEIGH="240"> (180x240 pixel) </BODY> </HTML>
- 9. Hasil
- 10. Alternatif Image <HTML> <BODY> <IMG SRC="Jackych.gif" WIDTH="120" HEIGHT="150" ALT ="Gambar Jackychen"> <IMG SRC="Ayuazhar.gif" WIDTH=120 HEIGHT=150 ALT="Gambar Ayu Azhari"> </BODY> </HTML>
- 11. Hasil
- 12. Image Border • Memberi bingkai pada image <HTML> <BODY><B> <IMG SRC="Cindycra.gif" width=90 height=90> <IMG SRC="Cindycra.gif" BORDER="5" width=90 height=90> <IMG SRC="Cindycra.gif" BORDER="10" width=90 height=90> </BODY> </HTML>
- 13. Hasil
- 14. Image Sebagai Link • Image juga dapat dijadikan sbg Link • Bentuk: <a href=“Sumber”> <img src=“Mama_Image”></a> <p align="center"> <a href="image_map.html"><img src="Tkiri.gif"></a> <a href="Border_Gambar.html"><img src="Tkanan.gif"></a></p> Contoh:
- 15. Image Map • Suatu area dari image dapat dijadikan sebagai LINK. • Bentuk: <IMG SRC=“Nama_Image " USEMAP="#nama_map" > <MAP NAME=“nama_map"> <AREA SHAPE=RECT COORDS=“y1,x1,y2,x2" HREF="html_editor.html“>
- 16. Contoh: <HTML> <BODY BACKGROUND="background.jpg"> <IMG SRC="menu.jpg " USEMAP="#menu" BORDER="2"> <MAP NAME="menu"> <AREA SHAPE=RECT COORDS="15,10,256,30" HREF="html_editor.html" ALT="Daftar HTML Editor Gratis!"> <AREA SHAPE=RECT COORDS="15,40,264,60" HREF="image_editor.html" ALT="Daftar Image Editor Gratis!"> <AREA SHAPE=RECT COORDS="15,65,192,80" HREF="email_gratis.html" ALT="Daftar E-Mail Gratis!">
- 17. <AREA SHAPE=RECT COORDS="15,90,240,105" HREF="web_space.html" ALT="Daftar Penyelnggara Web Space Gratis!"> <AREA SHAPE=RECT COORDS="15,115,234,125" HREF="bookmark.html" ALT="Daftar Bookmark Gratis!"> <AREA SHAPE=RECT COORDS="15,140,208,155" HREF="counter.html" ALT="Daftar Counter Gratis!"> <AREA SHAPE=RECT COORDS="15,166,336,180" HREF="web_authoring.html" ALT="Daftar Web Authoring Tool Gratis!"> <AREA SHAPE=RECT COORDS="15,190,241,205" HREF="uang_tunai.html" ALT="Daftar Penyandang Dana Gratis!"> </MAP></BODY>
- 18. Hasil
- 19. Contoh Lain • Image MAP dengan berbagai bentuk koordinat. • Bentuk-bentuk tersebut antara lain: Segi Empat Lingkaran Poligon
- 21. Penentuan Koordinat • Misalkan koordinat segi empat (Contacts) sbb: • Maka bentuk tag AREA SHAHE –nya adalah – SHAPE=RECT COORDS="6,116,97,184"
- 22. Penentuan Koordinat (Kont.) • Misalkan koordinat lingkatan (Products) sbb: • Maka bentuk tag AREA SHAHE –nya adalah – SHAPE=CIRCLE COORDS="251,143,47"
- 23. Penentuan Koordinat (Kont.) • Misalkan koordinat Poligon (New) sbb: • Maka bentuk tag AREA SHAHE –nya adalah – SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257"
- 24. Contoh Lengkap <HTML> <HEAD> <TITLE>IMAGE MAP</TITLE> </HEAD> <BODY> <DIV ALIGN=CENTER> <MAP NAME="map1"> <AREA HREF="contacts.html" ALT="Contacts" TITLE="Contacts“ SHAPE=RECT COORDS="6,116,97,184"> <AREA HREF="products.html" ALT="Products“ TITLE="Products“ SHAPE=CIRCLE COORDS="251,143,47">
- 25. Contoh Lengkap <AREA HREF="new.html" ALT="New!" TITLE="New!" SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257"> </MAP> <IMG SRC="testmap.gif" ALT="map of GH site" BORDER=0 WIDTH=300 HEIGHT=300 USEMAP="#map1"><BR> [ <A HREF="contacts.html" ALT="Contacts"> Contacts</A>] [ <A HREF="products.html" ALT="Products"> Products</A> ] [ <A HREF="new.html" ALT="New!">New!</A> ] </DIV> </BODY> <HTML>
- 26. Hasil