Aplikasi dan Alatan Antaramuka Web   2.1 Pengedit Netscape 2.2 Pengedit Microsoft Frontpage 2.3 Pengedit Macromedia Dreamw...
<ul><li>Terdapat banyak program aplikasi dan peralatan untuk membina laman web. Ada juga aplikasi yang bersifat sokongan d...
20.1 Pengedit Netscape   Membolehkan pengguna merekabentuk laman web tanpa perlu menaip HTML seperti pemproses perkataan
20.2 Pengedit Microsoft Frontpage   <ul><li>Sama seperti pengedit Netscape </li></ul><ul><li>mempunyai ciri-ciri seperti: ...
 
20.3 Pengedit Macromedia Dreamweaver
20.4 Penggunaan TAG HTML   <ul><li>TAG HTML ( http://hotwired. lycos .com/ webmonkey /reference/html_ cheatsheet / ) </li>...
<ul><li><CENTER>….</CENTER>: Mengenegahkan posisi paparan data yang berada diantaranya.  </li></ul><ul><li><P>….</P>: Menj...
Penghubung (Link)   <ul><li><A HREF= “alamat web (URL)”> …..</A > : Untuk menghubungkan laman web anda dengan laman web la...
Imej   <ul><li><BODY BACKGROUND = “nama fail imej”>…. </li></ul><ul><li><BODY BGCOLOR = “kod warna”>…  </li></ul><ul><li>k...
Imej <ul><li><IMG SRC = “nama fail imej” BORDER= “1” HEIGHT= “144” </li></ul><ul><li>WIDTH = “200” ALT= “nama yang diberik...
Gaya Fon   <ul><li><FONT COLOR= “red” SIZE= “+1” FACE= ”Arial” >……</FONT> </li></ul><ul><li>  </li></ul><ul><li>COLOR=warn...
Aksara istimewa, Garisan melintang dan Pemisah   <ul><li>&amp = “&” </li></ul><ul><li>&copy= copyright </li></ul><ul><li><...
Lain-lain   <ul><li><address>…..</address> :Gaya untuk alamat (memberi fon condong) </li></ul><ul><li><pre>…</pre>: membol...
Penggunaan peluru (bullet)   <ul><li><ul>….</ul> </li></ul><ul><li>memaparkan satu senarai item gaya “peluru”(bullet style...
<ul><li>Contoh penggunaan </li></ul><ul><li><ul> </li></ul><ul><li><li>Satu </li></ul><ul><li><li>Dua </li></ul><ul><li></...
Penggunaan jadual   <ul><li><table border>…</table> </li></ul><ul><li>mendefinisikan jadual untuk laman web </li></ul><ul>...
<ul><li><table border> </li></ul><ul><li><caption> Ujian Jadual</caption> </li></ul><ul><li><th>C1<th>C2<th>C3<tr> </li></...
20.5 Pengaturcaraan Web   <ul><li>Pengaturcaraan web boleh dilakukan dengan menggunakan: </li></ul><ul><li>JavaScript </li...
JavaScript <ul><li>Memberi fungsian dinamik kepada sesuatu laman web </li></ul><ul><li>Ditulis terus ke dalam fail HTML </...
JavaScript <ul><li>Maklumbalas </li></ul><ul><li>Berbentuk “event handler” </li></ul><ul><li>Terdapat beberapa jenis: </li...
<ul><li>Contoh: </li></ul><ul><li><A HREF=“satu.html” </li></ul><ul><li>onClick = “alert(‘Terima kasih satu kali’)”>Laman ...
Java <ul><li>Java tidak sama dengan JavaScript </li></ul><ul><li>Ia adalah satu bahasa pengaturcaraan yang berbeza yang be...
Java  Dokumen HTML Applet
Java Applet <ul><li><APPLET CODE = “greet.class” </li></ul><ul><li>HEIGHT=“75” </li></ul><ul><li>WIDTH=“125” </li></ul><ul...
Visual InterDev <ul><li>program aplikasi pembangunan yang pantas  </li></ul><ul><li>digunakan untuk membina aplikasi web y...
Visual InterDev
Contoh-contoh  penggunaan laman web bersifat dinamik: <ul><li>Buku tetamu (Guest book)- mendapatkan maklumat pengguna yang...
20.6 Peralatan Sokongan   <ul><li>Terdapat banyak peralatan sokongan untuk membina laman web terutamanya untuk menghasilka...
Upcoming SlideShare
Loading in …5
×

Apliweb

1,035 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,035
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Apliweb

  1. 1. Aplikasi dan Alatan Antaramuka Web 2.1 Pengedit Netscape 2.2 Pengedit Microsoft Frontpage 2.3 Pengedit Macromedia Dreamweaver 2.4 TAG HTML 2.5 Bahasa Pengaturcaraan Web 2.6 Peralatan Sokongan
  2. 2. <ul><li>Terdapat banyak program aplikasi dan peralatan untuk membina laman web. Ada juga aplikasi yang bersifat sokongan dalam binaan aplikasi web. </li></ul>
  3. 3. 20.1 Pengedit Netscape Membolehkan pengguna merekabentuk laman web tanpa perlu menaip HTML seperti pemproses perkataan
  4. 4. 20.2 Pengedit Microsoft Frontpage <ul><li>Sama seperti pengedit Netscape </li></ul><ul><li>mempunyai ciri-ciri seperti: </li></ul><ul><li>manipulasi Fail: simpan, baru, dsbnya </li></ul><ul><li>Mengedit: padam, tiru, tampal dsbnya </li></ul><ul><li>view, Insert, Format, Tools, Table, Windows, Help </li></ul>
  5. 6. 20.3 Pengedit Macromedia Dreamweaver
  6. 7. 20.4 Penggunaan TAG HTML <ul><li>TAG HTML ( http://hotwired. lycos .com/ webmonkey /reference/html_ cheatsheet / ) </li></ul><ul><li>  </li></ul><ul><li><HTML>…</HTML> : semua data yang berada di antara tag ini adalah HTML (Hyper Text Markup Language). Sepatutnya tag ini berada dipermulaan dan di akhir fail HTML. </li></ul><ul><li><HEAD>…</HEAD>: setiap fail HTML diasingkan mengikut elemen kepala (header). Maklumat yang terkandung didalamnya tidak dapat dilihat terus melalui paparan tetingkap. </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li><TITLE>….</TITLE>: dapat dilihat di palang tajuk. Memberi tajuk kepada dokumen HTML anda. </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li><BODY>….</BODY> : semua kandungan paparan laman web perlu diletakkan didalamnya. Termasuklah latarbelakang, warna penghubung(link), jenis fon (fon faces), imej dan sebagainya. </li></ul>
  7. 8. <ul><li><CENTER>….</CENTER>: Mengenegahkan posisi paparan data yang berada diantaranya.  </li></ul><ul><li><P>….</P>: Menjadikan teks yang berada diantaranya satu perenggan  </li></ul><ul><li><H1>…</H1>, <H2>…</H2>, <H3>…</H3>: Kepala Tajuk dokumen dari H1 hingga H6. H1 memberi saiz paparan kepala dokumen yang terbesar, manakala H6 memberi saiz yang terkecil. </li></ul><ul><li><U>…</U>: Menggariskan teks yang berada di antaranya </li></ul><ul><li><EM>…</EM>: Memberi kesan condong (italic) kepada teks yang berada di antaranya. </li></ul><ul><li><STRONG>….</STRONG>: Memberi kesan penghitaman kepada teks yang berada di antaranya.  </li></ul><ul><li><BR>: Memberi kesan terpisah </li></ul>GAYA TEKS
  8. 9. Penghubung (Link) <ul><li><A HREF= “alamat web (URL)”> …..</A > : Untuk menghubungkan laman web anda dengan laman web lain </li></ul><ul><li>Membina hyperlink di dalam dokumen yang sama </li></ul><ul><li><a href=“#refpoint”> Lokasi</a> </li></ul><ul><li>……… .. </li></ul><ul><li><a name=“refpoint”> Bandar X</a> </li></ul><ul><li><A HREF= “mailto: alamat email”> …..</A > : Untuk membolehkan pengguna terus menghantar email kepada tuan punya alamat  </li></ul><ul><li>Warna Hyperlink ditentukan di dalam tag <BODY>…</BODY>: di permulaan pengaturcaraan iaitu <BODY link= &quot;kodwarna&quot; vlink=&quot;kodwarna&quot; </li></ul>
  9. 10. Imej <ul><li><BODY BACKGROUND = “nama fail imej”>…. </li></ul><ul><li><BODY BGCOLOR = “kod warna”>…  </li></ul><ul><li>kod warna adalah dalam nombor asas 16 (hexadecimal) </li></ul><ul><li>berbentuk: #XXYYZZ </li></ul><ul><li>di mana X=kod warna merah, # FF0000 </li></ul><ul><li>Y=kod warna hijau, #00FF00 </li></ul><ul><li>Z=kod warna biru, #0000FF </li></ul><ul><li>X,Y,Z= nombor-nombor 0-9,A,B,C,D,E,F </li></ul><ul><li>0= nombor yang terendah, menunjukkan warna yang paling lemah </li></ul><ul><li>F= nombor yang tertinggin, menunjukkan warna yang paling kuat  </li></ul><ul><li>Kod Warna: http://hotwired. lycos .com/ webmonkey /reference/color_codes </li></ul>
  10. 11. Imej <ul><li><IMG SRC = “nama fail imej” BORDER= “1” HEIGHT= “144” </li></ul><ul><li>WIDTH = “200” ALT= “nama yang diberikan untuk imej” > </li></ul><ul><li>SRC: Dari mana fail tersebut didapati </li></ul><ul><li>BORDER: sempadan garisan dikeliling imej </li></ul><ul><li>HEIGHT: ketinggian imej dalam unit pixel </li></ul><ul><li>WIDTH: lebar imej dalam unit pixel </li></ul><ul><li>ALT: alternatif jika gambar tidak dapat dipaparkan, diganti dengan nama imej yang diberikan oleh anda </li></ul>
  11. 12. Gaya Fon <ul><li><FONT COLOR= “red” SIZE= “+1” FACE= ”Arial” >……</FONT> </li></ul><ul><li>  </li></ul><ul><li>COLOR=warna </li></ul><ul><li>SIZE= saiz fon, + membuat fon lebih besar, - membuat fon lebih kecil </li></ul><ul><li>FACE= jenis fon </li></ul>
  12. 13. Aksara istimewa, Garisan melintang dan Pemisah <ul><li>&amp = “&” </li></ul><ul><li>&copy= copyright </li></ul><ul><li><HR WIDTH= “25%” SIZE= 1 ALIGN= “center”> </li></ul><ul><li>WIDTH = panjang garisan ALIGN = center/left/right – posisi tengah,kiri atau kanan </li></ul><ul><li>SIZE = ketebalan garisan </li></ul>
  13. 14. Lain-lain <ul><li><address>…..</address> :Gaya untuk alamat (memberi fon condong) </li></ul><ul><li><pre>…</pre>: membolehkan sesuatu gaya tulisan teks dipaparkan sebagaimana ianya ditulis </li></ul><ul><li><blink>….</blink>:menjadikan paparan teks berkedip-kedip </li></ul>
  14. 15. Penggunaan peluru (bullet) <ul><li><ul>….</ul> </li></ul><ul><li>memaparkan satu senarai item gaya “peluru”(bullet style). Mengalihkan teks satu kolum ke kanan </li></ul><ul><li><ol>….</ol> </li></ul><ul><li>seperti <ul> tetapi ia memberi nombor kepada teks tersebut </li></ul><ul><li><li> - untuk memberi gaya peluru </li></ul>
  15. 16. <ul><li>Contoh penggunaan </li></ul><ul><li><ul> </li></ul><ul><li><li>Satu </li></ul><ul><li><li>Dua </li></ul><ul><li></ul> </li></ul><ul><li>  </li></ul><ul><li>Contoh penggunaan </li></ul><ul><li><ol> </li></ul><ul><li><li>Satu </li></ul><ul><li><li>Dua </li></ul><ul><li></ol> </li></ul>Penggunaan peluru (bullet) 1. Satu 2. Dua <ul><li>Satu </li></ul><ul><li>Dua </li></ul>
  16. 17. Penggunaan jadual <ul><li><table border>…</table> </li></ul><ul><li>mendefinisikan jadual untuk laman web </li></ul><ul><li><th> - untuk memisahkan satu baris atau lajur </li></ul><ul><li><tr> - untuk menandakan penghabisan sesuatu baris </li></ul><ul><li><td> - untuk memisahkan satu lajur dengan yang lain </li></ul>
  17. 18. <ul><li><table border> </li></ul><ul><li><caption> Ujian Jadual</caption> </li></ul><ul><li><th>C1<th>C2<th>C3<tr> </li></ul><ul><li><td>A1<td>A2<td>A3<tr> </li></ul><ul><li><td>B1<td>B2<td>B3<tr> </li></ul><ul><li></table> </li></ul>Penggunaan jadual
  18. 19. 20.5 Pengaturcaraan Web <ul><li>Pengaturcaraan web boleh dilakukan dengan menggunakan: </li></ul><ul><li>JavaScript </li></ul><ul><li>Java </li></ul><ul><li>VB(Visual Basic) Script </li></ul><ul><li>Perl </li></ul><ul><li>dan lain-lain </li></ul>
  19. 20. JavaScript <ul><li>Memberi fungsian dinamik kepada sesuatu laman web </li></ul><ul><li>Ditulis terus ke dalam fail HTML </li></ul><ul><li>Contoh kegunaan: </li></ul><ul><li>membina kotak amaran (alert boxes) </li></ul><ul><li>membina fungsian untuk mengira sesuatu </li></ul><ul><li>memberi maklumbalas segera kepada pengguna </li></ul>
  20. 21. JavaScript <ul><li>Maklumbalas </li></ul><ul><li>Berbentuk “event handler” </li></ul><ul><li>Terdapat beberapa jenis: </li></ul><ul><li>“ onMouseOver”: apabila penunjuk tetikus digerakkan ke sesuatu posisi </li></ul><ul><li>“ onMouseOut”: apabila penunjuk tetikus digerakkan jauh daripada sesuatu posisi </li></ul><ul><li>“ onClick”: apabila penunjuk tetikus diklik(ditekan) </li></ul>
  21. 22. <ul><li>Contoh: </li></ul><ul><li><A HREF=“satu.html” </li></ul><ul><li>onClick = “alert(‘Terima kasih satu kali’)”>Laman Satu</A> </li></ul><ul><li>  </li></ul><ul><li>apabila tetikus diklik satu kotak amaran akan dipaparkan yang mempunyai mesej ‘Terima kasih satu kali’ </li></ul>JavaScript
  22. 23. Java <ul><li>Java tidak sama dengan JavaScript </li></ul><ul><li>Ia adalah satu bahasa pengaturcaraan yang berbeza yang berorentasikan objek </li></ul><ul><li>Ia boleh digunakan untuk menghasilkan “applets” </li></ul><ul><li>“ Applets” ialah satu program aplikasi kecil bertujuan menjadikan laman web bersifat dinamik </li></ul><ul><li>Kelebihan Java </li></ul><ul><li>satu bahasa pengaturcaraan yang boleh difahami oleh berbagai jenis komputer (Mac, Pc, SunWorkstation….) </li></ul>
  23. 24. Java Dokumen HTML Applet
  24. 25. Java Applet <ul><li><APPLET CODE = “greet.class” </li></ul><ul><li>HEIGHT=“75” </li></ul><ul><li>WIDTH=“125” </li></ul><ul><li></APPLET> </li></ul><ul><li>greet.class ialah fail java yang telah dikompil (diproses dengan satu bahasa pengaturcaraan lain) </li></ul>
  25. 26. Visual InterDev <ul><li>program aplikasi pembangunan yang pantas </li></ul><ul><li>digunakan untuk membina aplikasi web yang mengambil data dari pengguna </li></ul><ul><li>memberi sokongan terhadap banyak bahasa &quot;scripting&quot; dan pencapaian kepada pengkalan data. Antara bahasa scripting tersebut ialah </li></ul><ul><ul><li>VB Script </li></ul></ul><ul><ul><li>ECMAC Script </li></ul></ul><ul><ul><li>Java Script </li></ul></ul><ul><li>Juga menggunakan Active Server Pages yang membenarkan kombinasi HTML, bahasa script dan komponen pelayan Active-X </li></ul>
  26. 27. Visual InterDev
  27. 28. Contoh-contoh penggunaan laman web bersifat dinamik: <ul><li>Buku tetamu (Guest book)- mendapatkan maklumat pengguna yang telah melawat laman web anda </li></ul><ul><li>email tetamu(Mailto Guest Books)- daripada maklumat pengguna yang melawat itu anda boleh terus menghantar email kepadanya </li></ul><ul><li>Pengira laman web (web page counter)- mengira jumlah pelawat laman web anda </li></ul><ul><li>cara ini digunakan untuk menentukan strategi pengiklanan </li></ul><ul><li>jika ramai pelawat, lebih banyak iklan dipaparkan </li></ul><ul><li>  </li></ul><ul><li>SSI (Server-Side Includes) </li></ul><ul><li>Satu cara untuk menghantar arahan kepada pelayan Web dari fail HTML </li></ul><ul><li>digunakan untuk memaparkan: </li></ul><ul><li>dokumen HTML lain didalam fail HTML yang sama </li></ul><ul><li>pengira web </li></ul><ul><li>masa dan tarikh </li></ul><ul><li>tarikh terakhir dokumen diubahsuai </li></ul><ul><li>dan lain-lain </li></ul>
  28. 29. 20.6 Peralatan Sokongan <ul><li>Terdapat banyak peralatan sokongan untuk membina laman web terutamanya untuk menghasilkan elemen multimedia. </li></ul><ul><li>Perisian untuk mengedit gambar atau imej seperti Adobe Photoshop </li></ul><ul><li>Perisian untuk membuat animasi seperti Flash </li></ul><ul><li>Perisian untuk membuat imej thumnail - imej yang kecil bagi menjimatkan ruang simpanan </li></ul><ul><li>Perisian untuk mengedit bunyian, video dan sebagainya </li></ul><ul><li>Elemen-elemen ini kemudian boleh disertakan di dalam dokumen web. </li></ul>

×