Isi Kandungan 3.1 Pengenalan 3.2 Mengedit HTML 3.3 Contoh HTML pertama

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



<html> <head> </head>

<body>

</body>

</html>

Tag permulaan

Tag pengakhiran

Bahagian ‘head’

Bahagian ‘body’

Komen

7



<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 /> 

<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

Documents

Isi Kandungan 3.1 Pengenalan 3.2 Mengedit HTML 3.3 Contoh HTML pertama