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