isi kandungan 3.1 pengenalan 3.2 mengedit html 3.3 contoh html pertama
DESCRIPTION
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’ - PowerPoint PPT PresentationTRANSCRIPT
1
Isi Kandungan3.1 Pengenalan3.2 Mengedit HTML3.3 Contoh HTML pertama3.4 Servis Pengesahan HTML oleh W3C3.5 ‘Headers’3.6 Sambungan3.7 Gambar3.8 Karaktor istimewa dan lagi contoh ‘Line Breaks’3.9 Senarai ‘Unordered’ 3.10 Senarai ‘Nested’ dan ‘Ordered’3.11 Bahan-bahan dari internet
Pengenalan kepada HTML
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
<!-- Fig. 4.1: main.html --><!-- Our first Web page -->
<html> <head> </head>
<body>
</body>
</html>
Tag permulaan
Tag pengakhiran
Bahagian ‘head’
Bahagian ‘body’
Komen
7
<!-- 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>
Contoh1: Contoh HTML pertama: main.html
8
Mencipta dokumen HTML pertama anda:
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
(a) (b)
9
3.5 Elemen ‘Header’ HTML
<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
Enam ‘headers’ (element ‘header’): h1 ke h6
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:[email protected]"> [email protected]</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>©</strong>
Deitel <strong>&</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>< ¼</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