Uploaded byZawiahHasnahYusoff1
27 views

asas HTML.pdf

Dokumen ini memberikan pengenalan mendalam kepada HTML dan cara penulisannya. Ia merangkumi peraturan tentang tag HTML, format teks, dan teknik untuk menghubungkan halaman web. Contoh kod dan penjelasan juga diberikan untuk memastikan pemahaman asas mengenai struktur dokumen HTML.

Embed presentation

Download to read offline
F3026 – WEB AUTHORING 1 Objektif 2.1 Pengenalan kepada HTML 2.5 Stail tag 2.2 Kod-kod HTML 2.6 Garis melintang 2.3 Format tek HTML 2.7 Imej (grafik) 2.4 Tag berstruktur 2.8 Pautan (linking) ASAS ASAS- -ASAS ASAS HTML HTML * Klik pada tajuk untuk keterangan selanjutnya*
F3026 – WEB AUTHORING 2 Asas-asas HTML Objektif • Memahami HTML, peraturan tag HTML, tag berstruktur, stail tag dan bagaimana untuk memautkan laman web. • Menulis kod HTML yang asas berdasarkan struktur asas dan stail tag HTML.
F3026 – WEB AUTHORING 3 Asas-asas HTML 2.1 Pengenalan kepada HTML Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk membina dokumen berasaskan web. Dicipta oleh Tim Berners-Lee, seorang ahli fizik di CERN, Geneva. Bahasa ini difahami oleh semua sistem komputer yang mempunyai sistem pengoperasian yang berbeza. HTML boleh ditaip di Notepad di Windows, Bbedit di Macintosh dan Emac atau vi di Unix. Fail HTML diakhiri dengan format .HTML. Pelayar web seperti Netscape membaca dokumen HTML dan menentukan bagaimana ia akan dipaparkan di skrin. HTML bergantung kepada tag bertanda (markup tags) untuk mengenalpasti blok perkataan.
F3026 – WEB AUTHORING 4 Asas-asas HTML 2.2 Kod-kod HTML Dokuman HTML adalah fail teks biasa, bezanya ialah ia mempunyai kod-kod tertentu yang di namakan tag HTML yang boleh di terjemahkan oleh pelayar web sebagai sekumpulan arahan. 2.2.1 Tag HTML Tag menentukan teks yang mana satu akan dipaparkan sebagai tajuk, bagaimana perenggan di format, di mana grafik akan ditempatkan, dan bagaimana untuk membuat pautan (link) ke halaman WWW yang lain. Contoh: <B> This text will be displayed in Bold </B> Teks ini akan dipaparkan sebagai tulian tebal (bold) oleh pelayar web di skrin
F3026 – WEB AUTHORING 5 Asas-asas HTML Tag bertanda selalunya berpasangan. Tag Pembuka : Dimulakan dengan simbol “kurang daripada” (<), nama tag, diikuti dengan simbol “lebih besar daripada” (>). Contohnya <B>. Tag Penutup : Dimulakan dengan simbol “kurang daripada” (<), simbol palang (/),nama tag, diikuti dengan simbol “lebih besar daripada” (>). Contohnya </B>.
F3026 – WEB AUTHORING 6 Asas-asas HTML 2.2.2 Asas HTML Setiap dokumen HTML mesti mengandungi: (1) Head Mengandungi tajuk dan keterangan tentang dokumen tersebut. Terletak diantara tag <HEAD> dan </HEAD>. (1)Body Mengandungi teks, senarai, jadual, imej, tag penanda dan elemen- elemen lain. Terletak diantara tag <BODY> dan </BODY>. Tag-tag asas yang diperlukan oleh pelayar web ialah <HTML>, <HEAD>, <TITLE> dan <BODY>.
F3026 – WEB AUTHORING 7 Asas-asas HTML 2.2.2.1 Tag <HTML> Taip tag <HTML> di bahagian paling atas di dalam fail anda. Ia memberitahu pelayar web bahawa dokumen ini ditulis di dalam HTML. Kedua- dua tag di bawah mesti berada di setiap dokumen HTML. <HTML> </HTML>
F3026 – WEB AUTHORING 8 Asas-asas HTML 2.2.2.2 Tag <HEAD> Mengenal pasti serta menanda maklumat di dalam dokumen HTML sebagai tajuk dokumen. Tag-tag HTML yang dibenarkan berada di antara tag <HEAD> dan </HEAD> ialah <TITLE>, <BASE>, <META>, <STYLE>, dan <LINK>. Taip tag <HEAD> selepas tag <HTML> diikuti dengan tag </HEAD> dibaris seterusnya. <HTML> <HEAD> </HEAD> </HTML>
F3026 – WEB AUTHORING 9 Untuk mencipta tajuk di dokumen HTML. Tajuk tersebut akan dipaparkan di bar tajuk pelayar web. Terletak diantara tag <HEAD> dan </HEAD>. Contoh: <TITLE> Laman Web Pertama </TITLE>. 2.2.2.3 <TITLE> <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> </HTML> Output terpapar di bar tajuk pelayar Asas-asas HTML
F3026 – WEB AUTHORING 10 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> </BODY> </HTML> Semua isi kandungan tapak web (web site) ditempatkan di sini. Taip tag <BODY> selepas tag </HEAD>. Akhiri seksyen dengan menaip tag </BODY> sebelum tag </HTML>. Tag-tag dan kod-kod HTML akan ditempatkan di antara kedua-dua tag ini. Kedudukan tag <BODY> 2.2.2.4 Tag <BODY>
F3026 – WEB AUTHORING 11 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> Selamat Datang… </BODY> </HTML> Sekarang, dokumen HTML anda telah diformat tetapi tidak mengandungi isi kandungan. Taip teks diantara tag <BODY>…..</BODY>. Contoh: Selamat Datang… Output yang terhasil apabila perkataan Selamat Datang… diletakkan di antara <BODY> dan </BODY>
F3026 – WEB AUTHORING 12 Asas-asas HTML Berikut ialah tag stail fizikal dan tag stail logikal untuk memformat teks HTML: Stail Fizikal – Digunakan untuk menakrif atribut seperti menebalkan (bold), condong (italic), dan bergaris (underline). Stail Logikal – digunakan di dalam badan (body) dokumen untuk menunjukkan atribut seperti tajuk utama (heading), justifikasi perenggan dan penggunaan pra-format. 2.3 Format teks HTML
F3026 – WEB AUTHORING 13 <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <B> Selamat Datang... </B> </BODY> </HTML> Asas-asas HTML Digunakan untuk tajuk, sub tajuk atau sebagai salah satu cara untuk menarik perhatian pembaca. Teks yang berada di antara tag-tag ini akan dipaparkan sebagai huruf tebal. Kod HTML: Taip teks di antara tag <B> dan </B>. Contoh: Teks Selamat Datang… telah ditebalkan 2.3.1 Memformat teks HTML – stail fizikal 2.3.1.1 Penggunaan Tag B
F3026 – WEB AUTHORING 14 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <I> Selamat Datang... </I> </BODY> </HTML> Untuk mengubah teks menjadi condong. Taip teks di antara tag <I> dan </I>. Contoh: Teks Selamat datang… telah dicondongkan 2.3.1.2 Penggunaan tag I
F3026 – WEB AUTHORING 15 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <U> Selamat Datang... </U> </BODY> </HTML> Untuk menggariskan teks di dalam laman web. Kod HTML: Taip teks di antara tag <U> dan </U>. Tidak semua pelayar web menyokong penggunaan tag ini. Contoh: Teks Selamat Datang… telah digariskan 2.3.1.3 Penggunaan tag U
F3026 – WEB AUTHORING 16 Asas-asas HTML Teks akan diformat sebagai superscript ( Saiz teks lebih kecil dan kedudukannya lebih tinggi daripada baris teks biasa). Selalu digunakan di dalam persamaan matematik atau nota kaki. Kod HTML: Taip teks di antara tag <SUP> dan </SUP>. Contoh: <HTML> <HEAD> <TITLE> Second Web page </TITLE> </HEAD> <BODY> Keluasan : 200 m <SUP> 2 </SUP> <BODY> </HTML> Teks Superscript 2.3.1.4 Penggunaan tag SUP
F3026 – WEB AUTHORING 17 Asas-asas HTML Teks akan diformat sebagai subscript ( Saiz teks lebih kecil dan kedudukannya lebih rendah daripada baris teks biasa). Selalu digunakan di dalam formula saintifik. Kod HTML: Taip teks di antara tag <SUB> dan </SUB>. Contoh: <HTML> <HEAD> <TITLE> Second Web Page </TITLE> </HEAD> <BODY> Math equation : 2Y<SUB>2</SUB>-4 </BODY> </HTML> Teks Subscript Output 2.3.1.5 Penggunaan tag SUB
F3026 – WEB AUTHORING 18 Asas-asas HTML Cara pengguna memaparkan teks berdasarkan kecenderungan mereka. Menjadikan dokumen anda mudah untuk di fahami dan dikemaskini. Setiap pelayar web menentukan bagaimana tag stail logikal akan dipaparkan. Setiap pelayar web mungkin menafsirkannya berbeza. Sekiranya teks tersebut tidak berubah di skrin, ia bermakna pelayar web yang anda gunakan tidak menyokong stail itu. 2.3.2 Memformat teks HTML – stail logikal
F3026 – WEB AUTHORING 19 Asas-asas HTML Digunakan untuk membuat tajuk utama (heading). Tajuk utama akan mengasingkan seksyen di dalam satu mukasurat. Tajuk utama mempunyai peringkat 1 hingga 6. Panjang tajuk utama tiada had, ia akan turun ke barisan seterusnya sekiranya teks melebihi saiz tetingkap . Sekiranya anda lupa menaip tag penutup, semua teks akan menjadi sebahagian daripada kepala (header). <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <H1> Tajuk Utama Saiz 1 </H1> <H2> Tajuk Utama Saiz 2 </H2> <H3> Tajuk Utama Saiz 3 </H3> <H4> Tajuk Utama Saiz 4 </H4> <H5> Tajuk Utama Saiz 5 </H5> <H6> Tajuk Utama Saiz 6 </H6> </BODY> </HTML> Contoh: Output 2.3.2.1 Penggunaan tag H * Sila klik pada perkataan output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 20 Asas-asas HTML Digunakan untuk membuat perenggan. Tanpa tag <P>, semua teks akan menjadi satu perenggan sahaja. Ia beritahu pelayar web untuk selang satu baris dan mulakan dengan perenggan baru. Contoh: <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <P>Secara ringkasnya ada dua teknologi yang memberi tenaga kepada internet: HTTP dan HTML. <P> HTTP ialah singkatan kepada Protokol Alihan Hyperteks dan HTML merupakan singkatan kepada Hypertext Markup Language. </BODY> </HTML> Output 2.3.2.2 Penggunaan tag P * Sila klik pada perkataan output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 21 Asas-asas HTML Digunakan untuk menukar justifikasi perenggan atau teks. Taip ALIGN diikuti dengan justifikasi. Memformat perenggan menjadi justifikasi-kanan (right-justified): Taip <P ALIGN=RIGHT> Memformat perenggan menjadi justifikasi-kiri (left-justified): Taip <P ALIGN=LEFT> Memformat perenggan ditengah-tengah (centered): Taip <P ALIGN=CENTER> Memformat perenggan menjadi selari (justified): Taip <P ALIGN=JUSTIFY> 2.3.2.3 Penggunaan tag ALIGN Sambungan…
F3026 – WEB AUTHORING 22 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <P ALIGN=RIGHT>Secara ringkasnya ada dua teknologi yang memberi tenaga kepada internet: HTTP dan HTML. <P ALIGN=LEFT> HTTP ialah singkatan kepada ProtokolAlihan Hyperteks dan HTML merupakan singkatan kepada Hypertext Markup Language. <P ALIGN=CENTER> Protokol HTTP digunakan untuk memancarkan laman web dari pelayan web agar dapat dilihat melalui komputer lain.<P ALIGN=JUSTIFY>HTML pula digunakan untuk membina laman web. </BODY> </HTML> Contoh: Output * Sila klik pada perkataan output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 23 Asas-asas HTML Tag baris henti (line break) menghasilkan baris kosong di mana sahaja ia berada. Teks seterusnya akan muncul di margin sebelah kiri baris selepasnya. Tiada baris kosong akan ditambah. Baris henti boleh diletakkan di dalam mana-mana tag seperti tajuk utama dan senarai item. Tag tiada henti (no break) akan menghalang baris dipisah- pisahkan oleh pelayar. Contoh: <nobr> Taip teks disini </nobr>. Kod HTML: Taip teks diantara tag <BR> dan </BR>. 2.3.2.4 Penggunaan tag BR Sambungan…
F3026 – WEB AUTHORING 24 Output Contoh: <HTML> <HEAD> <TITLE> PANTUN </TITLE> </HEAD> <BODY> Buah cempedak di luar pagar, <BR> Ambil galah tolong jolokkan, <BR> Kami budak baru belajar, <BR> Kalau salah tolong tunjukkan. </BODY> </HTML> Asas-asas HTML
F3026 – WEB AUTHORING 25 Asas-asas HTML Gunakan teks pra-format (preformatted) sekiranya anda mahu susunan teks di dalam fail HTML anda kelihatan sama seperti dalam pelayar WWW. Semua tag yang terletak diantara tag <PRE> dan </PRE> akan muncul sama seperti di Netscape dan di Internet Explorer. Tajuk utama dan perenggan tidak beroperasi di dalam tag pra-format. Contoh: <HTML> <HEAD> <TITLE> Markah Terkini - DMA 501 </TITLE> </HEAD> <BODY> <PRE> <B> NAMA KUIZ(10%) UJIAN (20%) </B> Nur Huda 8 18 Amirul 7 15 Fatini 5 16 </PRE> </BODY> </HTML> Output 2.3.2.5 Penggunaan tag PRE
F3026 – WEB AUTHORING 26 Asas-asas HTML Tag pembuka <DL> dan tag penutup </DL>. Setiap item mempunyai satu tag pembuka. Tiada tag penutup. Pelayar akan memaparkan istilah (term) dalam satu baris manakala definasi di baris yang lain. Tag-tag yang terlibat: <DL> - Membuka senarai definisi (definition list) <DT> - Membuka setiap definisi istilah (definition term) <DD> - Membuka definisi bagi setiap istilah (term) </DL> - Menutup senarai definisi (definition list) 2.4 Tag berstruktur Tag berstruktur ialah tag yang melabel beberapa jenis isi kandungan, pelayar atau stail lampiran (custom style sheets), ia mengawal bagaimana ia akan kelihatan di tetingkap pelayar. 2.4.1 Senarai definisi (definition list)
F3026 – WEB AUTHORING 27 Asas-asas HTML <HTML> <HEAD> <TITLE> SENARAI </TITLE> </HEAD> <BODY> <DL> <DT> Tag DL <DD> Membuka senarai definisi. <DT> Tag DT <DD> Membuka setiap definisi istilah. </DL> </BODY> </HTML> Contoh: Istilah Definisi Output
F3026 – WEB AUTHORING 28 Asas-asas HTML • Digunakan untuk memaparkan item dalam bentuk nota. • Memasukkan bullet berbentuk grafik di hadapan setiap item. • Saiz dan jenis bullet yang digunakan ditentukan oleh pelayar web. • Untuk membuat senarai tajuk utama, taip <HL>…</HL>. • Tag pembuka ialah <UL>. • Setiap item dibuka dengan tag <LI>. • Tag <LI> tiada tag penutup. • Setiap item di set dengan bullet. • Senarai ini ditutup dengan tag </UL>. 2.4.2 Senarai yang tidak tersusun atau senarai bullet
F3026 – WEB AUTHORING 29 Digunakan untuk memaparkan item dalam bentuk nota. Memasukkan bullet berbentuk grafik di hadapan setiap item. Saiz dan jenis bullet yang digunakan ditentukan oleh pelayar web. Untuk membuat senarai tajuk utama, taip <HL>…</HL>. Tag pembuka ialah <UL>. Setiap item dibuka dengan tag <LI>. Tag <LI> tiada tag penutup. Setiap item di set dengan bullet. Senarai ini ditutup dengan tag </UL>. Contoh: <HTML> <HEAD> <TITLE> SENARAI </TITLE> </HEAD> <BODY> <HL> Produk-produk Macromedia: </HL> <UL> <LI> Dreamweaver 4.0 <LI> Fireworks 4.0 <LI> Flash 5.0 </UL> </BODY> </HTML> Output 2.4.2 Senarai yang tidak tersusun atau senarai bullet Asas-asas HTML
F3026 – WEB AUTHORING 30 Asas-asas HTML Senarai tersusun digunakan untuk menyusun maklumat. Nombor atau aksara akan ditambah secara automatik di hadapan setiap item. Taip <HL>…</HL> untuk membuat tajuk utama senarai. Tag pembuka ialah <OL>. Untuk menukar senarai penomboran yang sedia ada, taip kata kunci TYPE di dalam tag <OL>. Berikut ialah lima jenis senarai yang boleh digunakan sebagai sistem penomboran: - <OL TYPE=1> : Sistem penomboran yang piawai (1,2,3…) - <OL TYPE=A> : Huruf besar (A,B,C…) - <OL TYPE=a> : Huruf kecil (a,b,c…) - <OL TYPE=I> : Sistem penomboran Roman – huruf besar. (I,II,III…) - <OL TYPE=i> : Sistem penomboran Roman – huruf besar (i,ii,iii,iv..) Setiap item dibuka dengan tag <LI>. Tag <LI> tidak mempunyai tag penutup. Senarai ini ditutup dangan tag </OL>. 2.4.3 Senarai tersusun
F3026 – WEB AUTHORING 31 Asas-asas HTML Contoh 1: Menggunakan sistem pernomboran yang piawai (1,2,3…). <HTML> <HEAD> <TITLE> RESIPI </TITLE> </HEAD> <BODY> <HL> Cara-cara membuat air limau ais </HL> <OL> <LI> Ambil sedikit perahan limau kasturi. <LI> Campurkan perahan limau kasturi bersama-sama dengan air gula dan air. <LI> Masukkan ais dan boleh dihidang. </OL> </BODY> </HTML> Output
F3026 – WEB AUTHORING 32 <HTML> <HEAD> <TITLE> RESIPI </TITLE> </HEAD> <BODY> <HL> Cara-cara membuat air limau ais </HL> <OL TYPE=i> <LI> Ambil sedikit perahan limau kasturi. <LI> Campurkan perahan limau kasturi bersama-sama dengan air gula dan air. <LI> Masukkan ais dan boleh dihidang. </OL> </BODY> </HTML> Asas-asas HTML Contoh 2: Menggunakan Sistem Penomboran Roman (i,ii,iii). Output
F3026 – WEB AUTHORING 33 Asas-asas HTML Membenarkan anda membentuk senarai yang berperingkat. Contoh: untuk membentuk item atau garis bentuk (outline) berhirarki. Prosesnya sama seperti membuat senarai tunggal (single list). Taip <HL>…</HL> untuk membuat senarai tajuk utama. Anda boleh gunakan tag <OL> atau <UL> untuk membuka senarai. Kemudian, masukkan senarai satu persatu menggunakan tag <LI>. Tekan kekunci tab setiap kali anda ingin membuka senarai di peringkat seterusnya di dalam fail HTML. Pastikan anda taip tag </UL> untuk menutup setiap subsenarai dan senarai utama. 2.4.4 Senarai di dalam senarai Sambungan…
F3026 – WEB AUTHORING 34 <HTML> <HEAD> <TITLE> Senarai Bersarang </TITLE> </HEAD> <BODY> <HL> Jenis-jenis haiwan:</HL> <OL> <LI> Mamalia <UL> <LI>Kucing <LI>Lembu </UL> <LI> Reptilia <UL> <LI>Ular <LI>Cicak </UL> </OL> </BODY> </HTML> Asas-asas HTML Output
F3026 – WEB AUTHORING 35 Asas-asas HTML Tag yang memberi arahan-arahan khas tentang penampilan elemen. Contoh: - Baris henti (line breaks)<BR> <NOBR> <WBR> - Tulisan (font) <FONT face=> - Saiz tulisan <BIG> <SMALL> <FONT size=> - Warna tulisan <BODY alink=> <BODY link=> <BODY text => <FONT color=> - Stail tulisan <B> <I> <S> <STRIKE> <SUB> <SUP> <TT> <U> - Placement <CENTER> <IMG align=> Warna di fail HTML direkabentuk oleh nilai RGB (Hexadecimal color code): Warna Kod Warna Kod Hitam #000000 Kelabu #C0C0C0 Putih #FFFFFF Merah hati #8E046B Kuning #FFFF00 Hijau #00FF00 Merah #FF0000 Merah Lembayung (Magenta) #880088 Biru #0000FF Biru firus (Cyan) #008888 2.5 Stail tag
F3026 – WEB AUTHORING 36 Asas-asas HTML Pelayar membenarkan anda memilih 16 warna yang berbeza. Warna-warna tersebut ialah: Hitam, Biru tua (Navy), Perak, Biru, Merah hati, Ungu, Merah, Fuchsia, hijau, Teal, Lime, Aqua, Olive, kelabu, kuning dan putih. Anda boleh mencipta warna baru dengan menggabungkan warna hijau, merah dan biru. Contoh 1: Menukar warna teks yang dikehendaki. <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B> " Yang dikejar tak dapat, yang dikendong berciciran" </B> <HR> <I> <FONT COLOR = BLUE> Peribahasa Melayu</FONT> </I> </BODY> </HTML> Output 2.5.1 Menukar warna teks
F3026 – WEB AUTHORING 37 <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY TEXT = RED> <B>" Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR> <I> Peribahasa Melayu</I> </BODY> </HTML> Contoh 2: Menukar warna teks bagi keseluruhan halaman. Taip TEXT=keyword di dalam tag BODY seperti contoh berikut: <BODY TEXT=RED>. Output Asas-asas HTML
F3026 – WEB AUTHORING 38 Asas-asas HTML Warna boleh digunakan sebagai latarbelakang untuk dokumen HTML. Anda juga boleh gunakan grafik sebagai latarbelakang. Kod-kod HTML: 2.5.2 Membuat latarbelakang Tag Pembuka Tag Penutup Fungsi <BODY BGCOLOR=#FFFFFF> </BODY> BGCOLOR set warna latarbelakang. <BODY BACKGROUND=background.jpg> </BODY> BACKGROUND set grafik sebagai latarbelakang. Sambungan…
F3026 – WEB AUTHORING 39 Asas-asas HTML <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY BGCOLOR=#FFFF00> <B> " Yang dikejar tak dapat, yang dikendong berciciran" </B> <HR> <I> Peribahasa Melayu</I> </BODY> </HTML> Output Contoh:
F3026 – WEB AUTHORING 40 Asas-asas HTML Teks boleh dipaparkan dalam tujuh saiz yang berbeza bermula daripada 1 (terkecil) hingga 7 (terbesar). Saiz tulisan yang ditetapkan ialah 3. Taip teks di antara tag <FONT SIZE=5> dan </FONT>. Contoh: <HTML><HEAD> <TITLE>Saiz </TITLE> </HEAD><BODY> <FONT SIZE=7> Teks ini bersaiz 7</FONT><BR> <FONT SIZE=6> Teks ini bersaiz 6</FONT><BR> <FONT SIZE=5> Teks ini bersaiz 5</FONT><BR> <FONT SIZE=4> Teks ini bersaiz 4</FONT><BR> <FONT SIZE=3> Teks ini bersaiz 3</FONT><BR> <FONT SIZE=2> Teks ini bersaiz 2</FONT><BR> <FONT SIZE=1> Teks ini bersaiz 1</FONT><BR> </BODY></HTML> Output 2.5.3 Saiz tulisan *Klik pada perkataan Output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 41 Asas-asas HTML Membenarkan pengguna menukar jenis tulisan. Taip teks di antara tag <FONT FACE=”WINGDINGS”> dan </FONT>. Contoh : <HTML> <HEAD> <TITLE>Saiz </TITLE> </HEAD> <BODY> <FONT FACE="Arial"> Teks ini ditulis dalam tulisan berjenis Arial</FONT> </BODY> </HTML> Output 2.5.4 Menukar jenis tulisan
F3026 – WEB AUTHORING 42 Asas-asas HTML Anda boleh memasukkan garis melintang (horizontal line) di dalam laman web untuk mengasingkan grafik dan teks. Tag Pembuka: <HR>, Tag Penutup: Tiada Satu garis melintang akan terhasil merentangi skrin. Contoh: tag <HR> selalunya di letakkan di atas alamat e-mel di laman web untuk mengasingkannya daripada teks biasa. Ia boleh diletakkan di mana-mana sahaja di dalam seksyen Body dokumen HTML. Salah satu teknik pengurusan laman web yang popular. Panjang dan ketebalan garisan boleh diubah. Atribut Size, Width, Align dan Noshade boleh dilaksanakan di Netscape tetapi tidak di pelayar web yang lain. 2.6 Garis melintang (horizontal rule) Sambungan…
F3026 – WEB AUTHORING 43 <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B> " Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR SIZE =10> <I> Peribahasa Melayu</I> </BODY> </HTML> <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B>" Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR> <I> Peribahasa Melayu</I> </BODY> </HTML> Asas-asas HTML Contoh 2: Atribut size (piksel) digunakan untuk menentukan ketebalan garisan Output Contoh 1: Satu garis lurus Output Sambungan… *Klik pada perkataan Output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 44 Asas-asas HTML <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B>" Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR WIDTH =60%> <I> Peribahasa Melayu</I> </BODY> </HTML> Contoh 3 : Atribut width diberi dalam bentuk peratus. Output <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B>" Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR WIDTH =60% ALIGN=RIGHT> <I> Peribahasa Melayu</I> </BODY> </HTML> Contoh 4 : Atribut align digunakan untuk mengubah kedudukan teks sama ada kiri, kanan atau tengah. Output *Klik pada perkataan Output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 45 Asas-asas HTML Anda boleh gunakan dua jenis grafik dalam format GIF dan JPG. Taip tag <IMG> apabila anda ingin memasukkan gambar atau animasi ke dalam laman web. Pastikan lokasi imej sama seperti rujukan di dalam tag <IMG>. Kod HTML : 2.7 Imej (grafik) Tag Pembuka Tag Penutup Fungsi <IMG SRC=”graphic_file”> Tiada Memasukkan grafik ke dalam laman web. Sambungan…
F3026 – WEB AUTHORING 46 Asas-asas HTML <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <IMG SRC="D:LectureNotesWEBAUTHORING(NEW_VERSION)mentol.jpg"> <B> " Yang dikejar tak dapat, yang dikendong berciciran" </B> <HR> <I> Peribahasa Melayu</I> </BODY> </HTML> Contoh : Output
F3026 – WEB AUTHORING 47 Asas-asas HTML Pautan (link) terdiri daripada teks atau grafik, lokasi baru (laman web) akan dipaparkan sebaik sahaja anda klik pada pautan. Tag anchor <A> digunakan untuk membuat hyperlink di dalam dokumen HTML. Kod HTML : <A HREF =”Target”> </A> Pastikan sertakan pautan kembali ke halaman asal (back link) untuk memudahkan pelawat kembali ke halaman asal. Dua jenis pautan (link): (1) Pautan Teks Ditunjukkan dalam bentuk teks berwarna biru dan bergaris. Apabila ia disentuh oleh penuding tetikus, kursor akan berubah menjadi penuding jari (pointing finger). Klik pada pautan dan laman web yang lain akan dipaparkan. (2) Pautan grafik Dikenal pasti apabila penuding tetikus berubah daripada arrowhead kepada penuding jari apabila penuding tetikus menyentuh grafik tersebut. 2.8 Pautan (linking) Sambungan…
F3026 – WEB AUTHORING 48 Asas-asas HTML Contoh 1: Pautan teks. <HTML> <HEAD> <TITLE> Pautan </TITLE> </HEAD> <BODY> <H4> Pengenalan Kepada HTML </H4> HTML digunakan untuk membangunkan <A HREF="pautan2.html">laman web</A> </BODY> </HTML> <HTML> <HEAD> <TITLE> Pautan </TITLE> </HEAD> <BODY> <H4> LAMAN WEB </H4> Laman web merupakan dokumen eletronik yang mengandungi kombinasi teks, suara dan grafik. </BODY> </HTML> Output *Klik pada perkataan Output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 49 <HTML> <HEAD> <TITLE> Pautan </TITLE> </HEAD> <BODY> Untuk melihat grafik, sila klik <A HREF ="mentol.jpg"> di sini.</A> </BODY> </HTML> Asas-asas HTML Contoh 2 : Pautan grafik Output *Klik pada perkataan Output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 50 Asas-asas HTML Anda boleh menukar warna hyperteks di pelayar web. Kebiasaannya, hyperteks yang belum dilawati berwarna biru, hyperteks yang telah dilawati berwarna ungu, dan hyperteks yang aktif berwarna merah (dipaparkan dalam status aktif apabila pengguna klik pada hyperteks). Langkah-langkah untuk mengubah warna hyperteks: Taip LINK=# diikuti dengan nilai RGB di dalam tag <BODY>. Mengubah warna hyperteks yang telah dilawati : Taip VLINK=# diikuti dengan nilai RGB di dalam tag <BODY>. Mengubah warna hyperteks yang aktif : Taip ALINK=# diikuti dengan nilai RGB di dalam tag <BODY>. 2.8.1 Menukar warna hyperteks

More Related Content

PDF
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
byOECD Directorate for Financial and Enterprise Affairs
 
PDF
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
bySocialHRCamp
 
PDF
Storytelling For The Web: Integrate Storytelling in your Design Process
byChiara Aliotta
 
PDF
2024 State of Marketing Report – by Hubspot
byMarius Sescu
 
PDF
2024 Trend Updates: What Really Works In SEO & Content Marketing
bySearch Engine Journal
 
PDF
Everything You Need To Know About ChatGPT
byExpeed Software
 
PDF
Product Design Trends in 2024 | Teenage Engineerings
byPixeldarts
 
PDF
010 DSKP KSSM ASAS SAINS KOMPUTER TINGKATAN 3.pdf
byZawiahHasnahYusoff1
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
byOECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
bySocialHRCamp
 
Storytelling For The Web: Integrate Storytelling in your Design Process
byChiara Aliotta
 
2024 State of Marketing Report – by Hubspot
byMarius Sescu
 
2024 Trend Updates: What Really Works In SEO & Content Marketing
bySearch Engine Journal
 
Everything You Need To Know About ChatGPT
byExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
byPixeldarts
 
010 DSKP KSSM ASAS SAINS KOMPUTER TINGKATAN 3.pdf
byZawiahHasnahYusoff1
 

Featured

PDF
How Race, Age and Gender Shape Attitudes Towards Mental Health
byThinkNow
 
PDF
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
bymarketingartwork
 
PDF
Skeleton Culture Code
bySkeleton Technologies
 
PDF
PEPSICO Presentation to CAGNY Conference Feb 2024
byNeil Kimberley
 
PDF
Content Methodology: A Best Practices Report (Webinar)
bycontently
 
PPTX
How to Prepare For a Successful Job Search for 2024
byAlbert Qian
 
PDF
Social Media Marketing Trends 2024 // The Global Indie Insights
byKurio // The Social Media Age(ncy)
 
PDF
Trends In Paid Search: Navigating The Digital Landscape In 2024
bySearch Engine Journal
 
PDF
5 Public speaking tips from TED - Visualized summary
bySpeakerHub
 
PDF
ChatGPT and the Future of Work - Clark Boyd
byClark Boyd
 
PDF
Getting into the tech field. what next
byTessa Mero
 
PDF
Google's Just Not That Into You: Understanding Core Updates & Search Intent
byLily Ray
 
PDF
How to have difficult conversations
byRajiv Jayarajah, MAppComm, ACC
 
PDF
Introduction to Data Science
byChristy Abraham Joy
 
PDF
Time Management & Productivity - Best Practices
byVit Horky
 
PDF
The six step guide to practical project management
byMindGenius
 
PDF
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
byRachelPearson36
 
PDF
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
byApplitools
 
PDF
12 Ways to Increase Your Influence at Work
byGetSmarter
 
PDF
ChatGPT webinar slides
byAlireza Esmikhani
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
byThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
bymarketingartwork
 
Skeleton Culture Code
bySkeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
byNeil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
bycontently
 
How to Prepare For a Successful Job Search for 2024
byAlbert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
byKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
bySearch Engine Journal
 
5 Public speaking tips from TED - Visualized summary
bySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
byClark Boyd
 
Getting into the tech field. what next
byTessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
byLily Ray
 
How to have difficult conversations
byRajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
byChristy Abraham Joy
 
Time Management & Productivity - Best Practices
byVit Horky
 
The six step guide to practical project management
byMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
byRachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
byApplitools
 
12 Ways to Increase Your Influence at Work
byGetSmarter
 
ChatGPT webinar slides
byAlireza Esmikhani
 

asas HTML.pdf

  • 1.
    F3026 – WEBAUTHORING 1 Objektif 2.1 Pengenalan kepada HTML 2.5 Stail tag 2.2 Kod-kod HTML 2.6 Garis melintang 2.3 Format tek HTML 2.7 Imej (grafik) 2.4 Tag berstruktur 2.8 Pautan (linking) ASAS ASAS- -ASAS ASAS HTML HTML * Klik pada tajuk untuk keterangan selanjutnya*
  • 2.
    F3026 – WEBAUTHORING 2 Asas-asas HTML Objektif • Memahami HTML, peraturan tag HTML, tag berstruktur, stail tag dan bagaimana untuk memautkan laman web. • Menulis kod HTML yang asas berdasarkan struktur asas dan stail tag HTML.
  • 3.
    F3026 – WEBAUTHORING 3 Asas-asas HTML 2.1 Pengenalan kepada HTML Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk membina dokumen berasaskan web. Dicipta oleh Tim Berners-Lee, seorang ahli fizik di CERN, Geneva. Bahasa ini difahami oleh semua sistem komputer yang mempunyai sistem pengoperasian yang berbeza. HTML boleh ditaip di Notepad di Windows, Bbedit di Macintosh dan Emac atau vi di Unix. Fail HTML diakhiri dengan format .HTML. Pelayar web seperti Netscape membaca dokumen HTML dan menentukan bagaimana ia akan dipaparkan di skrin. HTML bergantung kepada tag bertanda (markup tags) untuk mengenalpasti blok perkataan.
  • 4.
    F3026 – WEBAUTHORING 4 Asas-asas HTML 2.2 Kod-kod HTML Dokuman HTML adalah fail teks biasa, bezanya ialah ia mempunyai kod-kod tertentu yang di namakan tag HTML yang boleh di terjemahkan oleh pelayar web sebagai sekumpulan arahan. 2.2.1 Tag HTML Tag menentukan teks yang mana satu akan dipaparkan sebagai tajuk, bagaimana perenggan di format, di mana grafik akan ditempatkan, dan bagaimana untuk membuat pautan (link) ke halaman WWW yang lain. Contoh: <B> This text will be displayed in Bold </B> Teks ini akan dipaparkan sebagai tulian tebal (bold) oleh pelayar web di skrin
  • 5.
    F3026 – WEBAUTHORING 5 Asas-asas HTML Tag bertanda selalunya berpasangan. Tag Pembuka : Dimulakan dengan simbol “kurang daripada” (<), nama tag, diikuti dengan simbol “lebih besar daripada” (>). Contohnya <B>. Tag Penutup : Dimulakan dengan simbol “kurang daripada” (<), simbol palang (/),nama tag, diikuti dengan simbol “lebih besar daripada” (>). Contohnya </B>.
  • 6.
    F3026 – WEBAUTHORING 6 Asas-asas HTML 2.2.2 Asas HTML Setiap dokumen HTML mesti mengandungi: (1) Head Mengandungi tajuk dan keterangan tentang dokumen tersebut. Terletak diantara tag <HEAD> dan </HEAD>. (1)Body Mengandungi teks, senarai, jadual, imej, tag penanda dan elemen- elemen lain. Terletak diantara tag <BODY> dan </BODY>. Tag-tag asas yang diperlukan oleh pelayar web ialah <HTML>, <HEAD>, <TITLE> dan <BODY>.
  • 7.
    F3026 – WEBAUTHORING 7 Asas-asas HTML 2.2.2.1 Tag <HTML> Taip tag <HTML> di bahagian paling atas di dalam fail anda. Ia memberitahu pelayar web bahawa dokumen ini ditulis di dalam HTML. Kedua- dua tag di bawah mesti berada di setiap dokumen HTML. <HTML> </HTML>
  • 8.
    F3026 – WEBAUTHORING 8 Asas-asas HTML 2.2.2.2 Tag <HEAD> Mengenal pasti serta menanda maklumat di dalam dokumen HTML sebagai tajuk dokumen. Tag-tag HTML yang dibenarkan berada di antara tag <HEAD> dan </HEAD> ialah <TITLE>, <BASE>, <META>, <STYLE>, dan <LINK>. Taip tag <HEAD> selepas tag <HTML> diikuti dengan tag </HEAD> dibaris seterusnya. <HTML> <HEAD> </HEAD> </HTML>
  • 9.
    F3026 – WEBAUTHORING 9 Untuk mencipta tajuk di dokumen HTML. Tajuk tersebut akan dipaparkan di bar tajuk pelayar web. Terletak diantara tag <HEAD> dan </HEAD>. Contoh: <TITLE> Laman Web Pertama </TITLE>. 2.2.2.3 <TITLE> <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> </HTML> Output terpapar di bar tajuk pelayar Asas-asas HTML
  • 10.
    F3026 – WEBAUTHORING 10 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> </BODY> </HTML> Semua isi kandungan tapak web (web site) ditempatkan di sini. Taip tag <BODY> selepas tag </HEAD>. Akhiri seksyen dengan menaip tag </BODY> sebelum tag </HTML>. Tag-tag dan kod-kod HTML akan ditempatkan di antara kedua-dua tag ini. Kedudukan tag <BODY> 2.2.2.4 Tag <BODY>
  • 11.
    F3026 – WEBAUTHORING 11 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> Selamat Datang… </BODY> </HTML> Sekarang, dokumen HTML anda telah diformat tetapi tidak mengandungi isi kandungan. Taip teks diantara tag <BODY>…..</BODY>. Contoh: Selamat Datang… Output yang terhasil apabila perkataan Selamat Datang… diletakkan di antara <BODY> dan </BODY>
  • 12.
    F3026 – WEBAUTHORING 12 Asas-asas HTML Berikut ialah tag stail fizikal dan tag stail logikal untuk memformat teks HTML: Stail Fizikal – Digunakan untuk menakrif atribut seperti menebalkan (bold), condong (italic), dan bergaris (underline). Stail Logikal – digunakan di dalam badan (body) dokumen untuk menunjukkan atribut seperti tajuk utama (heading), justifikasi perenggan dan penggunaan pra-format. 2.3 Format teks HTML
  • 13.
    F3026 – WEBAUTHORING 13 <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <B> Selamat Datang... </B> </BODY> </HTML> Asas-asas HTML Digunakan untuk tajuk, sub tajuk atau sebagai salah satu cara untuk menarik perhatian pembaca. Teks yang berada di antara tag-tag ini akan dipaparkan sebagai huruf tebal. Kod HTML: Taip teks di antara tag <B> dan </B>. Contoh: Teks Selamat Datang… telah ditebalkan 2.3.1 Memformat teks HTML – stail fizikal 2.3.1.1 Penggunaan Tag B
  • 14.
    F3026 – WEBAUTHORING 14 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <I> Selamat Datang... </I> </BODY> </HTML> Untuk mengubah teks menjadi condong. Taip teks di antara tag <I> dan </I>. Contoh: Teks Selamat datang… telah dicondongkan 2.3.1.2 Penggunaan tag I
  • 15.
    F3026 – WEBAUTHORING 15 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <U> Selamat Datang... </U> </BODY> </HTML> Untuk menggariskan teks di dalam laman web. Kod HTML: Taip teks di antara tag <U> dan </U>. Tidak semua pelayar web menyokong penggunaan tag ini. Contoh: Teks Selamat Datang… telah digariskan 2.3.1.3 Penggunaan tag U
  • 16.
    F3026 – WEBAUTHORING 16 Asas-asas HTML Teks akan diformat sebagai superscript ( Saiz teks lebih kecil dan kedudukannya lebih tinggi daripada baris teks biasa). Selalu digunakan di dalam persamaan matematik atau nota kaki. Kod HTML: Taip teks di antara tag <SUP> dan </SUP>. Contoh: <HTML> <HEAD> <TITLE> Second Web page </TITLE> </HEAD> <BODY> Keluasan : 200 m <SUP> 2 </SUP> <BODY> </HTML> Teks Superscript 2.3.1.4 Penggunaan tag SUP
  • 17.
    F3026 – WEBAUTHORING 17 Asas-asas HTML Teks akan diformat sebagai subscript ( Saiz teks lebih kecil dan kedudukannya lebih rendah daripada baris teks biasa). Selalu digunakan di dalam formula saintifik. Kod HTML: Taip teks di antara tag <SUB> dan </SUB>. Contoh: <HTML> <HEAD> <TITLE> Second Web Page </TITLE> </HEAD> <BODY> Math equation : 2Y<SUB>2</SUB>-4 </BODY> </HTML> Teks Subscript Output 2.3.1.5 Penggunaan tag SUB
  • 18.
    F3026 – WEBAUTHORING 18 Asas-asas HTML Cara pengguna memaparkan teks berdasarkan kecenderungan mereka. Menjadikan dokumen anda mudah untuk di fahami dan dikemaskini. Setiap pelayar web menentukan bagaimana tag stail logikal akan dipaparkan. Setiap pelayar web mungkin menafsirkannya berbeza. Sekiranya teks tersebut tidak berubah di skrin, ia bermakna pelayar web yang anda gunakan tidak menyokong stail itu. 2.3.2 Memformat teks HTML – stail logikal
  • 19.
    F3026 – WEBAUTHORING 19 Asas-asas HTML Digunakan untuk membuat tajuk utama (heading). Tajuk utama akan mengasingkan seksyen di dalam satu mukasurat. Tajuk utama mempunyai peringkat 1 hingga 6. Panjang tajuk utama tiada had, ia akan turun ke barisan seterusnya sekiranya teks melebihi saiz tetingkap . Sekiranya anda lupa menaip tag penutup, semua teks akan menjadi sebahagian daripada kepala (header). <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <H1> Tajuk Utama Saiz 1 </H1> <H2> Tajuk Utama Saiz 2 </H2> <H3> Tajuk Utama Saiz 3 </H3> <H4> Tajuk Utama Saiz 4 </H4> <H5> Tajuk Utama Saiz 5 </H5> <H6> Tajuk Utama Saiz 6 </H6> </BODY> </HTML> Contoh: Output 2.3.2.1 Penggunaan tag H * Sila klik pada perkataan output untuk melihat output yang dihasilkan*
  • 20.
    F3026 – WEBAUTHORING 20 Asas-asas HTML Digunakan untuk membuat perenggan. Tanpa tag <P>, semua teks akan menjadi satu perenggan sahaja. Ia beritahu pelayar web untuk selang satu baris dan mulakan dengan perenggan baru. Contoh: <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <P>Secara ringkasnya ada dua teknologi yang memberi tenaga kepada internet: HTTP dan HTML. <P> HTTP ialah singkatan kepada Protokol Alihan Hyperteks dan HTML merupakan singkatan kepada Hypertext Markup Language. </BODY> </HTML> Output 2.3.2.2 Penggunaan tag P * Sila klik pada perkataan output untuk melihat output yang dihasilkan*
  • 21.
    F3026 – WEBAUTHORING 21 Asas-asas HTML Digunakan untuk menukar justifikasi perenggan atau teks. Taip ALIGN diikuti dengan justifikasi. Memformat perenggan menjadi justifikasi-kanan (right-justified): Taip <P ALIGN=RIGHT> Memformat perenggan menjadi justifikasi-kiri (left-justified): Taip <P ALIGN=LEFT> Memformat perenggan ditengah-tengah (centered): Taip <P ALIGN=CENTER> Memformat perenggan menjadi selari (justified): Taip <P ALIGN=JUSTIFY> 2.3.2.3 Penggunaan tag ALIGN Sambungan…
  • 22.
    F3026 – WEBAUTHORING 22 Asas-asas HTML <HTML> <HEAD> <TITLE> Laman Web Pertama </TITLE> </HEAD> <BODY> <P ALIGN=RIGHT>Secara ringkasnya ada dua teknologi yang memberi tenaga kepada internet: HTTP dan HTML. <P ALIGN=LEFT> HTTP ialah singkatan kepada ProtokolAlihan Hyperteks dan HTML merupakan singkatan kepada Hypertext Markup Language. <P ALIGN=CENTER> Protokol HTTP digunakan untuk memancarkan laman web dari pelayan web agar dapat dilihat melalui komputer lain.<P ALIGN=JUSTIFY>HTML pula digunakan untuk membina laman web. </BODY> </HTML> Contoh: Output * Sila klik pada perkataan output untuk melihat output yang dihasilkan*
  • 23.
    F3026 – WEBAUTHORING 23 Asas-asas HTML Tag baris henti (line break) menghasilkan baris kosong di mana sahaja ia berada. Teks seterusnya akan muncul di margin sebelah kiri baris selepasnya. Tiada baris kosong akan ditambah. Baris henti boleh diletakkan di dalam mana-mana tag seperti tajuk utama dan senarai item. Tag tiada henti (no break) akan menghalang baris dipisah- pisahkan oleh pelayar. Contoh: <nobr> Taip teks disini </nobr>. Kod HTML: Taip teks diantara tag <BR> dan </BR>. 2.3.2.4 Penggunaan tag BR Sambungan…
  • 24.
    F3026 – WEBAUTHORING 24 Output Contoh: <HTML> <HEAD> <TITLE> PANTUN </TITLE> </HEAD> <BODY> Buah cempedak di luar pagar, <BR> Ambil galah tolong jolokkan, <BR> Kami budak baru belajar, <BR> Kalau salah tolong tunjukkan. </BODY> </HTML> Asas-asas HTML
  • 25.
    F3026 – WEBAUTHORING 25 Asas-asas HTML Gunakan teks pra-format (preformatted) sekiranya anda mahu susunan teks di dalam fail HTML anda kelihatan sama seperti dalam pelayar WWW. Semua tag yang terletak diantara tag <PRE> dan </PRE> akan muncul sama seperti di Netscape dan di Internet Explorer. Tajuk utama dan perenggan tidak beroperasi di dalam tag pra-format. Contoh: <HTML> <HEAD> <TITLE> Markah Terkini - DMA 501 </TITLE> </HEAD> <BODY> <PRE> <B> NAMA KUIZ(10%) UJIAN (20%) </B> Nur Huda 8 18 Amirul 7 15 Fatini 5 16 </PRE> </BODY> </HTML> Output 2.3.2.5 Penggunaan tag PRE
  • 26.
    F3026 – WEBAUTHORING 26 Asas-asas HTML Tag pembuka <DL> dan tag penutup </DL>. Setiap item mempunyai satu tag pembuka. Tiada tag penutup. Pelayar akan memaparkan istilah (term) dalam satu baris manakala definasi di baris yang lain. Tag-tag yang terlibat: <DL> - Membuka senarai definisi (definition list) <DT> - Membuka setiap definisi istilah (definition term) <DD> - Membuka definisi bagi setiap istilah (term) </DL> - Menutup senarai definisi (definition list) 2.4 Tag berstruktur Tag berstruktur ialah tag yang melabel beberapa jenis isi kandungan, pelayar atau stail lampiran (custom style sheets), ia mengawal bagaimana ia akan kelihatan di tetingkap pelayar. 2.4.1 Senarai definisi (definition list)
  • 27.
    F3026 – WEBAUTHORING 27 Asas-asas HTML <HTML> <HEAD> <TITLE> SENARAI </TITLE> </HEAD> <BODY> <DL> <DT> Tag DL <DD> Membuka senarai definisi. <DT> Tag DT <DD> Membuka setiap definisi istilah. </DL> </BODY> </HTML> Contoh: Istilah Definisi Output
  • 28.
    F3026 – WEBAUTHORING 28 Asas-asas HTML • Digunakan untuk memaparkan item dalam bentuk nota. • Memasukkan bullet berbentuk grafik di hadapan setiap item. • Saiz dan jenis bullet yang digunakan ditentukan oleh pelayar web. • Untuk membuat senarai tajuk utama, taip <HL>…</HL>. • Tag pembuka ialah <UL>. • Setiap item dibuka dengan tag <LI>. • Tag <LI> tiada tag penutup. • Setiap item di set dengan bullet. • Senarai ini ditutup dengan tag </UL>. 2.4.2 Senarai yang tidak tersusun atau senarai bullet
  • 29.
    F3026 – WEBAUTHORING 29 Digunakan untuk memaparkan item dalam bentuk nota. Memasukkan bullet berbentuk grafik di hadapan setiap item. Saiz dan jenis bullet yang digunakan ditentukan oleh pelayar web. Untuk membuat senarai tajuk utama, taip <HL>…</HL>. Tag pembuka ialah <UL>. Setiap item dibuka dengan tag <LI>. Tag <LI> tiada tag penutup. Setiap item di set dengan bullet. Senarai ini ditutup dengan tag </UL>. Contoh: <HTML> <HEAD> <TITLE> SENARAI </TITLE> </HEAD> <BODY> <HL> Produk-produk Macromedia: </HL> <UL> <LI> Dreamweaver 4.0 <LI> Fireworks 4.0 <LI> Flash 5.0 </UL> </BODY> </HTML> Output 2.4.2 Senarai yang tidak tersusun atau senarai bullet Asas-asas HTML
  • 30.
    F3026 – WEBAUTHORING 30 Asas-asas HTML Senarai tersusun digunakan untuk menyusun maklumat. Nombor atau aksara akan ditambah secara automatik di hadapan setiap item. Taip <HL>…</HL> untuk membuat tajuk utama senarai. Tag pembuka ialah <OL>. Untuk menukar senarai penomboran yang sedia ada, taip kata kunci TYPE di dalam tag <OL>. Berikut ialah lima jenis senarai yang boleh digunakan sebagai sistem penomboran: - <OL TYPE=1> : Sistem penomboran yang piawai (1,2,3…) - <OL TYPE=A> : Huruf besar (A,B,C…) - <OL TYPE=a> : Huruf kecil (a,b,c…) - <OL TYPE=I> : Sistem penomboran Roman – huruf besar. (I,II,III…) - <OL TYPE=i> : Sistem penomboran Roman – huruf besar (i,ii,iii,iv..) Setiap item dibuka dengan tag <LI>. Tag <LI> tidak mempunyai tag penutup. Senarai ini ditutup dangan tag </OL>. 2.4.3 Senarai tersusun
  • 31.
    F3026 – WEBAUTHORING 31 Asas-asas HTML Contoh 1: Menggunakan sistem pernomboran yang piawai (1,2,3…). <HTML> <HEAD> <TITLE> RESIPI </TITLE> </HEAD> <BODY> <HL> Cara-cara membuat air limau ais </HL> <OL> <LI> Ambil sedikit perahan limau kasturi. <LI> Campurkan perahan limau kasturi bersama-sama dengan air gula dan air. <LI> Masukkan ais dan boleh dihidang. </OL> </BODY> </HTML> Output
  • 32.
    F3026 – WEBAUTHORING 32 <HTML> <HEAD> <TITLE> RESIPI </TITLE> </HEAD> <BODY> <HL> Cara-cara membuat air limau ais </HL> <OL TYPE=i> <LI> Ambil sedikit perahan limau kasturi. <LI> Campurkan perahan limau kasturi bersama-sama dengan air gula dan air. <LI> Masukkan ais dan boleh dihidang. </OL> </BODY> </HTML> Asas-asas HTML Contoh 2: Menggunakan Sistem Penomboran Roman (i,ii,iii). Output
  • 33.
    F3026 – WEBAUTHORING 33 Asas-asas HTML Membenarkan anda membentuk senarai yang berperingkat. Contoh: untuk membentuk item atau garis bentuk (outline) berhirarki. Prosesnya sama seperti membuat senarai tunggal (single list). Taip <HL>…</HL> untuk membuat senarai tajuk utama. Anda boleh gunakan tag <OL> atau <UL> untuk membuka senarai. Kemudian, masukkan senarai satu persatu menggunakan tag <LI>. Tekan kekunci tab setiap kali anda ingin membuka senarai di peringkat seterusnya di dalam fail HTML. Pastikan anda taip tag </UL> untuk menutup setiap subsenarai dan senarai utama. 2.4.4 Senarai di dalam senarai Sambungan…
  • 34.
    F3026 – WEBAUTHORING 34 <HTML> <HEAD> <TITLE> Senarai Bersarang </TITLE> </HEAD> <BODY> <HL> Jenis-jenis haiwan:</HL> <OL> <LI> Mamalia <UL> <LI>Kucing <LI>Lembu </UL> <LI> Reptilia <UL> <LI>Ular <LI>Cicak </UL> </OL> </BODY> </HTML> Asas-asas HTML Output
  • 35.
    F3026 – WEBAUTHORING 35 Asas-asas HTML Tag yang memberi arahan-arahan khas tentang penampilan elemen. Contoh: - Baris henti (line breaks)<BR> <NOBR> <WBR> - Tulisan (font) <FONT face=> - Saiz tulisan <BIG> <SMALL> <FONT size=> - Warna tulisan <BODY alink=> <BODY link=> <BODY text => <FONT color=> - Stail tulisan <B> <I> <S> <STRIKE> <SUB> <SUP> <TT> <U> - Placement <CENTER> <IMG align=> Warna di fail HTML direkabentuk oleh nilai RGB (Hexadecimal color code): Warna Kod Warna Kod Hitam #000000 Kelabu #C0C0C0 Putih #FFFFFF Merah hati #8E046B Kuning #FFFF00 Hijau #00FF00 Merah #FF0000 Merah Lembayung (Magenta) #880088 Biru #0000FF Biru firus (Cyan) #008888 2.5 Stail tag
  • 36.
    F3026 – WEBAUTHORING 36 Asas-asas HTML Pelayar membenarkan anda memilih 16 warna yang berbeza. Warna-warna tersebut ialah: Hitam, Biru tua (Navy), Perak, Biru, Merah hati, Ungu, Merah, Fuchsia, hijau, Teal, Lime, Aqua, Olive, kelabu, kuning dan putih. Anda boleh mencipta warna baru dengan menggabungkan warna hijau, merah dan biru. Contoh 1: Menukar warna teks yang dikehendaki. <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B> " Yang dikejar tak dapat, yang dikendong berciciran" </B> <HR> <I> <FONT COLOR = BLUE> Peribahasa Melayu</FONT> </I> </BODY> </HTML> Output 2.5.1 Menukar warna teks
  • 37.
    F3026 – WEBAUTHORING 37 <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY TEXT = RED> <B>" Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR> <I> Peribahasa Melayu</I> </BODY> </HTML> Contoh 2: Menukar warna teks bagi keseluruhan halaman. Taip TEXT=keyword di dalam tag BODY seperti contoh berikut: <BODY TEXT=RED>. Output Asas-asas HTML
  • 38.
    F3026 – WEBAUTHORING 38 Asas-asas HTML Warna boleh digunakan sebagai latarbelakang untuk dokumen HTML. Anda juga boleh gunakan grafik sebagai latarbelakang. Kod-kod HTML: 2.5.2 Membuat latarbelakang Tag Pembuka Tag Penutup Fungsi <BODY BGCOLOR=#FFFFFF> </BODY> BGCOLOR set warna latarbelakang. <BODY BACKGROUND=background.jpg> </BODY> BACKGROUND set grafik sebagai latarbelakang. Sambungan…
  • 39.
    F3026 – WEBAUTHORING 39 Asas-asas HTML <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY BGCOLOR=#FFFF00> <B> " Yang dikejar tak dapat, yang dikendong berciciran" </B> <HR> <I> Peribahasa Melayu</I> </BODY> </HTML> Output Contoh:
  • 40.
    F3026 – WEBAUTHORING 40 Asas-asas HTML Teks boleh dipaparkan dalam tujuh saiz yang berbeza bermula daripada 1 (terkecil) hingga 7 (terbesar). Saiz tulisan yang ditetapkan ialah 3. Taip teks di antara tag <FONT SIZE=5> dan </FONT>. Contoh: <HTML><HEAD> <TITLE>Saiz </TITLE> </HEAD><BODY> <FONT SIZE=7> Teks ini bersaiz 7</FONT><BR> <FONT SIZE=6> Teks ini bersaiz 6</FONT><BR> <FONT SIZE=5> Teks ini bersaiz 5</FONT><BR> <FONT SIZE=4> Teks ini bersaiz 4</FONT><BR> <FONT SIZE=3> Teks ini bersaiz 3</FONT><BR> <FONT SIZE=2> Teks ini bersaiz 2</FONT><BR> <FONT SIZE=1> Teks ini bersaiz 1</FONT><BR> </BODY></HTML> Output 2.5.3 Saiz tulisan *Klik pada perkataan Output untuk melihat output yang dihasilkan*
  • 41.
    F3026 – WEBAUTHORING 41 Asas-asas HTML Membenarkan pengguna menukar jenis tulisan. Taip teks di antara tag <FONT FACE=”WINGDINGS”> dan </FONT>. Contoh : <HTML> <HEAD> <TITLE>Saiz </TITLE> </HEAD> <BODY> <FONT FACE="Arial"> Teks ini ditulis dalam tulisan berjenis Arial</FONT> </BODY> </HTML> Output 2.5.4 Menukar jenis tulisan
  • 42.
    F3026 – WEBAUTHORING 42 Asas-asas HTML Anda boleh memasukkan garis melintang (horizontal line) di dalam laman web untuk mengasingkan grafik dan teks. Tag Pembuka: <HR>, Tag Penutup: Tiada Satu garis melintang akan terhasil merentangi skrin. Contoh: tag <HR> selalunya di letakkan di atas alamat e-mel di laman web untuk mengasingkannya daripada teks biasa. Ia boleh diletakkan di mana-mana sahaja di dalam seksyen Body dokumen HTML. Salah satu teknik pengurusan laman web yang popular. Panjang dan ketebalan garisan boleh diubah. Atribut Size, Width, Align dan Noshade boleh dilaksanakan di Netscape tetapi tidak di pelayar web yang lain. 2.6 Garis melintang (horizontal rule) Sambungan…
  • 43.
    F3026 – WEBAUTHORING 43 <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B> " Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR SIZE =10> <I> Peribahasa Melayu</I> </BODY> </HTML> <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B>" Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR> <I> Peribahasa Melayu</I> </BODY> </HTML> Asas-asas HTML Contoh 2: Atribut size (piksel) digunakan untuk menentukan ketebalan garisan Output Contoh 1: Satu garis lurus Output Sambungan… *Klik pada perkataan Output untuk melihat output yang dihasilkan*
  • 44.
    F3026 – WEBAUTHORING 44 Asas-asas HTML <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B>" Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR WIDTH =60%> <I> Peribahasa Melayu</I> </BODY> </HTML> Contoh 3 : Atribut width diberi dalam bentuk peratus. Output <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <B>" Yang dikejar tak dapat, yang dikendong berciciran"</B> <HR WIDTH =60% ALIGN=RIGHT> <I> Peribahasa Melayu</I> </BODY> </HTML> Contoh 4 : Atribut align digunakan untuk mengubah kedudukan teks sama ada kiri, kanan atau tengah. Output *Klik pada perkataan Output untuk melihat output yang dihasilkan*
  • 45.
    F3026 – WEBAUTHORING 45 Asas-asas HTML Anda boleh gunakan dua jenis grafik dalam format GIF dan JPG. Taip tag <IMG> apabila anda ingin memasukkan gambar atau animasi ke dalam laman web. Pastikan lokasi imej sama seperti rujukan di dalam tag <IMG>. Kod HTML : 2.7 Imej (grafik) Tag Pembuka Tag Penutup Fungsi <IMG SRC=”graphic_file”> Tiada Memasukkan grafik ke dalam laman web. Sambungan…
  • 46.
    F3026 – WEBAUTHORING 46 Asas-asas HTML <HTML> <HEAD> <TITLE>Peribahasa </TITLE> </HEAD> <BODY> <IMG SRC="D:LectureNotesWEBAUTHORING(NEW_VERSION)mentol.jpg"> <B> " Yang dikejar tak dapat, yang dikendong berciciran" </B> <HR> <I> Peribahasa Melayu</I> </BODY> </HTML> Contoh : Output
  • 47.
    F3026 – WEBAUTHORING 47 Asas-asas HTML Pautan (link) terdiri daripada teks atau grafik, lokasi baru (laman web) akan dipaparkan sebaik sahaja anda klik pada pautan. Tag anchor <A> digunakan untuk membuat hyperlink di dalam dokumen HTML. Kod HTML : <A HREF =”Target”> </A> Pastikan sertakan pautan kembali ke halaman asal (back link) untuk memudahkan pelawat kembali ke halaman asal. Dua jenis pautan (link): (1) Pautan Teks Ditunjukkan dalam bentuk teks berwarna biru dan bergaris. Apabila ia disentuh oleh penuding tetikus, kursor akan berubah menjadi penuding jari (pointing finger). Klik pada pautan dan laman web yang lain akan dipaparkan. (2) Pautan grafik Dikenal pasti apabila penuding tetikus berubah daripada arrowhead kepada penuding jari apabila penuding tetikus menyentuh grafik tersebut. 2.8 Pautan (linking) Sambungan…
  • 48.
    F3026 – WEBAUTHORING 48 Asas-asas HTML Contoh 1: Pautan teks. <HTML> <HEAD> <TITLE> Pautan </TITLE> </HEAD> <BODY> <H4> Pengenalan Kepada HTML </H4> HTML digunakan untuk membangunkan <A HREF="pautan2.html">laman web</A> </BODY> </HTML> <HTML> <HEAD> <TITLE> Pautan </TITLE> </HEAD> <BODY> <H4> LAMAN WEB </H4> Laman web merupakan dokumen eletronik yang mengandungi kombinasi teks, suara dan grafik. </BODY> </HTML> Output *Klik pada perkataan Output untuk melihat output yang dihasilkan*
  • 49.
    F3026 – WEBAUTHORING 49 <HTML> <HEAD> <TITLE> Pautan </TITLE> </HEAD> <BODY> Untuk melihat grafik, sila klik <A HREF ="mentol.jpg"> di sini.</A> </BODY> </HTML> Asas-asas HTML Contoh 2 : Pautan grafik Output *Klik pada perkataan Output untuk melihat output yang dihasilkan*
  • 50.
    F3026 – WEBAUTHORING 50 Asas-asas HTML Anda boleh menukar warna hyperteks di pelayar web. Kebiasaannya, hyperteks yang belum dilawati berwarna biru, hyperteks yang telah dilawati berwarna ungu, dan hyperteks yang aktif berwarna merah (dipaparkan dalam status aktif apabila pengguna klik pada hyperteks). Langkah-langkah untuk mengubah warna hyperteks: Taip LINK=# diikuti dengan nilai RGB di dalam tag <BODY>. Mengubah warna hyperteks yang telah dilawati : Taip VLINK=# diikuti dengan nilai RGB di dalam tag <BODY>. Mengubah warna hyperteks yang aktif : Taip ALINK=# diikuti dengan nilai RGB di dalam tag <BODY>. 2.8.1 Menukar warna hyperteks