Pertemuan 04
Download as PPT, PDF
0 likes336 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.
![Bentuk Umum
Atribut Image
<img src=/slideshow/pertemuan-04/34707020/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](https://image.slidesharecdn.com/pertemuan04-140515010718-phpapp01/85/Pertemuan-04-4-320.jpg)
![Contoh Lengkap
<AREA href="new.html" ALT="New!" TITLE="New!"
SHAPE=POLY COORDS="150,217, 190,257,
150,297,110,257"> </MAP>
<IMG SRC=/slideshow/pertemuan-04/34707020/"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>](https://image.slidesharecdn.com/pertemuan04-140515010718-phpapp01/85/Pertemuan-04-25-320.jpg)
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=/slideshow/pertemuan-04/34707020/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=/slideshow/pertemuan-04/34707020/"garis_asli.gif" width="100%"><P> <IMG SRC=/slideshow/pertemuan-04/34707020/"bola.gif"> <a href="http://www.altavista.digital.com/">Alta Vista</a><BR>
- 6. <IMG SRC=/slideshow/pertemuan-04/34707020/"bola.gif"> <a href="http://www.google.com/">Google</a><BR> <IMG SRC=/slideshow/pertemuan-04/34707020/"bola.gif"> <a href="http://comfind.com/">ComFind</a><BR> <IMG SRC=/slideshow/pertemuan-04/34707020/"bola.gif"> <a href="http://www.planetsearch.com/">Planet Search</a><BR> <IMG SRC=/slideshow/pertemuan-04/34707020/"bola.gif"> <a href="http://www.excite.com/">Excite</a><BR> <IMG SRC=/slideshow/pertemuan-04/34707020/"bola.gif"> <a href="http://www.hotbot.com/">HotBot</a><BR> </BODY> </HTML>
- 7. Hasil
- 8. Mengubah Ukuran Image <HTML> <BODY> <IMG SRC=/slideshow/pertemuan-04/34707020/"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=/slideshow/pertemuan-04/34707020/"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=/slideshow/pertemuan-04/34707020/"Cindycra.gif" width=90 height=90> <IMG SRC=/slideshow/pertemuan-04/34707020/"Cindycra.gif" BORDER="5" width=90 height=90> <IMG SRC=/slideshow/pertemuan-04/34707020/"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=/slideshow/pertemuan-04/34707020/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=/slideshow/pertemuan-04/34707020/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=/slideshow/pertemuan-04/34707020/"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=/slideshow/pertemuan-04/34707020/"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