1 / 22

Isi Kandungan 3.1 Pengenalan 3.2 Mengedit HTML 3.3 Contoh HTML pertama

Pengenalan kepada HTML. Isi Kandungan 3.1 Pengenalan 3.2 Mengedit HTML 3.3 Contoh HTML pertama 3.4 Servis Pengesahan HTML oleh W3C 3.5 ‘Headers’ 3.6 Sambungan 3.7 Gambar 3.8 Karaktor istimewa dan lagi contoh ‘Line Breaks’ 3.9 Senarai ‘Unordered’

brosh
Download Presentation

Isi Kandungan 3.1 Pengenalan 3.2 Mengedit HTML 3.3 Contoh HTML pertama

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pengenalan kepada HTML Isi Kandungan 3.1 Pengenalan 3.2 Mengedit HTML 3.3 Contoh HTML pertama 3.4 Servis Pengesahan HTML oleh W3C 3.5 ‘Headers’ 3.6 Sambungan 3.7 Gambar 3.8 Karaktor istimewa dan lagi contoh ‘Line Breaks’ 3.9 Senarai ‘Unordered’ 3.10 Senarai ‘Nested’ dan ‘Ordered’ 3.11 Bahan-bahan dari internet

  2. Objektif Di dalam bab ini, anda akan mempelajari: • Memahami komponen utama dalam dokumen HTML. • Menggunakan HTML untuk mereka laman web. • Mengetahui bagaimana menambah imej ke dalam laman web. • Memahami bagaimana untuk mencipta dan menggunakan ‘hyperlinks’ untuk melayari laman web.

  3. 3.1  Pengenalan • HTML = HyperText Markup Language • Bahasa ‘markup’ • Teknologi oleh ‘World Wide Web Consortium’ (W3C)

  4. 3.2  Mengedit HTML • Dokumen HTML ialah di dalam bentuk kod • Ia boleh diedit menggunakan editor teks (contoh: Notepad, Wordpad, emacs, etc. EditPlus ada disertakan bersama CD IPositif) • .html atau .htm adalah jenis format fail HTML • Pelayan Web: Menyimpan dokumen HTML • Pelayar Web: Meminta dokumen HTML dari pelayan web

  5. 3.3  Contoh HTML Pertama • Komen HTML : bermula dengan <!– dan berakhir dengan --> • Element html: <html> • Element ‘head: <head> • Bahagian ‘Head’ di dalam dokumen HTML • Tajuk dokumen • Skrip dan ‘CSS’ • Element ‘body’: <body> • Bahagian ‘Body’ dokumen HTML • Mengandungi maklumat yang akan dipaparkan oleh pelayar web • Tag permulaan • Tag pengakhiran

  6. Komen <!-- Fig. 4.1: main.html --> <!-- Our first Web page --> <html> <head> </head> <body> </body> </html> Tag permulaan Bahagian ‘head’ Tag pengakhiran Bahagian ‘body’

  7. Contoh1: Contoh HTML pertama: main.html <!-- Fig. 4.1: main.html --> <!-- Our first Web page --> <html> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p>Welcome to XHTML!</p> </body> </html>

  8. Mencipta dokumen HTML pertama anda: (b) (a) • Pastikan anda telah pun meng’install’ editor teks ‘EditPlus’ yang disertakan pada CD IPositif • Klik pada icon ‘EditPlus’ dan akan melihat gambar (a) • Pilih: File -> New -> HTML Pages: • Padamkan semua kod HTML yang terdapat pada paparan • Salin kode pada contoh 1 dan ‘paste’kan pada paparan EditPlus (b) • Simpan fail. Pilih File -> Save As. Pada dialog ‘file name’, taip ‘name.html’ • Klik pada fail ‘name.html’ dari direktori di mana anda menyimpan fail tersebut. • Anda akan melihat maklumat pada pelayar web sama seperti pada mukasurat 7

  9. 3.5  Elemen ‘Header’ HTML Enam ‘headers’ (element ‘header’): h1 ke h6 <body> <h1>Level 1 Header</h1> <h2>Level 2 header</h2> <h3>Level 3 header</h3> <h4>Level 4 header</h4> <h5>Level 5 header</h5> <h6>Level 6 header</h6> </body> Contoh2: Element ‘Headers’ dari h1 hingga h6: header.html

  10. 3.6  Penyambungan • Penyambungan dilakukan menerusi ‘Hyperlink’ • Menyambungkan dokumen HTML, imej atau sumber-sumber lain • Teks dan image boleh dijadikan ‘hyperlinks’ • Penyambungan dicipta menggunakan elemen a (anchor) • Attribut href: menyatakan lokasi sumber yang ingin disambungkan • Sambungan ke alamat e-mail menggunakan mailto: URL • Tag <strong> digunakan untuk menghasilkan kesan ‘bold’ kepada teks

  11. Contoh3: Penyambungan ke laman web lain: links.html <body> <p><a href = "http://www.deitel.com">Deitel</a></p> <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> <p><a href = "http://www.yahoo.com">Yahoo!</a></p> <p><a href = "http://www.usatoday.com">USA Today</a></p> </body> User click

  12. Contoh 4: Penyambungan ke alamat e-mail: contact.html <p> My e-mail address is <a href = "mailto:deitel@deitel.com"> deitel@deitel.com</a> . Click the address and your browser will open an e-mail message and address it to me. </p> Email Client Application

  13. 3.7  Imej • Tiga format yang paling popular: • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • Portable Network Graphics (PNG) • Element Image: <img /> • Attribut src : menyatakan lokasi fail imej • Attribut width dan height : diukur melalui ‘pixels’ (‘picture elements’) • Element kosong • Dimatikan dengan karaktor ‘/’ pada penutup kanan ‘angle bracket’ (>), atau dengan menyertakan tag pengakhiran

  14. Contoh 5: Imej pada fail HTML: picture.html <p> <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to Program book cover" /> </p> Image jhtp.jpg not available

  15. Contoh 6: Imej sebagai penyambung: nav.html <a href = "links.html"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.html"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> </a><br /> . . . . links.html

  16. 3.8  Karaktor Istemewa dan lagi contoh ‘Line Breaks’ • del: Strike-out text • sup: superscript text • sub: subscript text • <hr />: garisan lintang

  17. Contoh 7: Karaktor istimewa pada HTML: contact2.html <hr /> <!-- inserts a horizontal rule --> <p>All information on this site is <strong>&copy;</strong> Deitel <strong>&amp;</strong> Associates, Inc. 2004.</p> <p><del>You may download 3.14 x 10<sup>2</sup> characters worth of information from this site.</del> Only <sub>one</sub> download per hour is permitted.</p> <p>Note: <strong>&lt; &frac14;</strong> of the information presented here is updated daily.</p>.

  18. 3.9  Senarai ‘Unordered’ • Element senarai ‘Unordered’: ul • Mencipta senarai di mana setiap item bermula dengan simbol ‘bullet’ (juga dipanggil ‘disc’) • li (list item) • Permulaan kepada senarai ‘unordered’

  19. Contoh 8: Senarai ‘unordered’ pada HTML: links2.html <ul> <li><a href = "http://www.deitel.com">Deitel</a></li> <li><a href = "http://www.w3.org">W3C</a></li> <li><a href = "http://www.yahoo.com">Yahoo!</a></li> <li><a href = "http://www.cnn.com">CNN</a></li> </ul> 4 senarai

  20. 3.10  Senarai ‘Nested’ dan ‘Ordered’ • Melambangkan hubungan hirarki • Senarai ‘ordered’: ol • Mencipta senarai dengan setiap item dimulakan dengan nombor

  21. <ul> <li>New games</li> <li>New applications <ol> <li>For business</li> <li>For pleasure</li> </ol> </li> <li>Around the clock news</li> <li>Search engines</li> <li>Shopping</li> <li>Programming <ol> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>New languages</li> </ol> </li> </ul> Contoh 9: Senarai ‘ordered’ di HTML: list.html Senarai ‘ordered’ Lagi senarai ‘ordered’ list

  22. 3.11  Rujukan Web • www.w3.org/TR/xhtml11 • www.xhtml.org • www.w3schools.com/xhtml/default.asp • validator.w3.org • hotwired.lycos.com/webmonkey/00/50/index2a.html • wdvl.com/Authoring/Languages/XML/XHTML • www.w3.org/TR/2001/REC-xhtml11-20010531

More Related