apliweb
TRANSCRIPT
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
• Terdapat banyak program aplikasi dan peralatan untuk membina laman web. Ada juga aplikasi yang bersifat sokongan dalam binaan aplikasi web.
20.1 Pengedit Netscape
Membolehkan pengguna merekabentuk laman web tanpa perlu menaip HTML seperti pemproses perkataan
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
20.3 Pengedit Macromedia Dreamweaver
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.
• <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
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"
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
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
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
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
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
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
Contoh penggunaan<ul><li>Satu<li>Dua</ul> Contoh penggunaan<ol><li>Satu<li>Dua</ol>
Penggunaan peluru (bullet)
1. Satu2. Dua
SatuDua
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
<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
20.5 Pengaturcaraan Web
Pengaturcaraan web boleh dilakukan dengan menggunakan:
• JavaScript
• Java
• VB(Visual Basic) Script
• Perl
• dan lain-lain
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
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)
• 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
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….)
Java
DokumenHTML
Applet
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)
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
Visual InterDev
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
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.