pembinaan laman web peringkat permulaan

PENGENALAN KEPADA PEMBINAAN LAMAN WEB MELALUI HTML

(PERINGKAT PERMULAAN)

Sebenarnya, HTMLiaitu, hypertext markup language. HTML merupakan bahasa atau lebih

dikenali sebagai ”low level language” yang digunakan untuk membina dan juga mereka laman

web(web site).HTML lebih digunakan untuk tujuan ”document representation”.Pada kebiasaanya,

bahasa html yang tertentu dapat ditulis dengan menggunakan editor asli (natural editor) seperti

windows notepad, iaitu, merupakan bahagian dalam aksesori-aksesori yang tertentu. File yang

menggunakan editor asli seperti windows notepad dapat disimpan dengan file akhiran (file

extension),iaitu, htm atau html.Pelayar web (web surfers) seperti internet explorer, firefox Mozilla,

atau Netscape akan mula menterjemahkan kod-kod html (html code/html tag) dalam notepad dan

kesannya dapat dilihat dalam web browser.

Cara yang lebih mudah dalam pembinaan web adalah dengan mengunakan perisian html

editor yang mengamalkan konsep WYSIWYG seperti microsoft dreamweaver, CoffeeCup HTML

Editor 2008, Microsoft frontpage, dan sebagainya. Konsep WYSIWYG ( What you see is what you

get) membawa maksud file yang diikuti dengan akhiran (file extension),iaitu, htm or html akan

keluar serupa dengan apa yang dilihat atau dipaparkan dalam laman web yang tertentu. Pada masa

kini, para pereka laman web yang professional ( professional web programmers) biasanya akan

menggunakan HTML editor yang mengamalkan konsep WYSIWYG untuk membuat laman web

yang tertentu, dan cara ini akan menjimatkan masa pereka laman web. Ada juga yang

menggunakan Microsoft Frontpage, Macromedia Dreamweaver dan sebagainya untuk membina

laman web yang tersendiri.

Gambarajah1: Microsoft Frontpage 2003

Gambar rajah 2 : Window Notepad

Penyediaan komputer

Untuk memulakan pembinaan laman web,langkah pertama yang harus dibuat adalah menyediakan

suatu direktori dalam cakera keras komputer anda.

a) Buka direktori Desktop.

b) klik butang kanan tetikus pada mana-mana ruang kosong dalam direktori desktop.

c) selepas klik butang kanan tetikus,pilih menu New dan pilih folder.

d) direktori akan terbentuk dan tukar nama direktori ”New Folder” itu kepada nama lain seperti

”website saya”.

Ini dapat dilihat melalui gambar rajah di bawah.

Pada kebiasaanya, konfigurasi komputer (computer configuration ) perlu ditukar untuk

memastikan tiada masalah yang wujud pada masa yang akan datang. Konfigurasi komputer juga

diperlukan untuk memastikan akhiran pada fail html anda dipaparkan. Terdapat beberapa langkah di

bawah,iaitu:-

a) untuk memudahkan kerja anda, anda boleh menggunakan keyboard shortcut, iaitu,windows logo

+ E untuk membuka windows explorer.

b) Pada tool menu, klik menu ”folder options”.

Suatu folder yang dinamakan sebagai website saya.

c) selepas itu, suatu tetingkap baru yang bertajuk ”folder options” akan terbentuk.

d) Pada tetingkap folder options, klik bar view.

e) Sekiranya opsyen untuk ”Hide File Extension for known file type” kelihatan ditanda, klik opsyen

tersebut untuk memastikan konfigurasi untuk ”Hide File Extension for known file type”

dibatalkan.

Ini dapat dilihat dalam gambar rajah di bawah:-

Asas html (basics in html)

Pada kebiasaanya, fail html terdiri daripada 2 bahagian yang utama, iaitu, kepala (head) dan juga badan (body). Selain itu, terdapat juga elemen lain seperti elemen tajuk(title) dalam laman web yang tertentu.elemen tajuk(title) menunjukkan tajuk bagi laman web yang berkenaan.Bahagian kepala(head) merangkumi elemen-elemen yang tertentu.

Kod-kod html yang paling ringkas adalah:-

<html><head></head><title>laman web saya</title><body>

Kod-kod html ini biasanya terdiri daripada tag-tag, iaitu, tag pembuka dan juga tag penutup.Setiap kod yang terkandung dalam ‘<’ dan ’>’ di namakan sebagai tag.

Tag yang paling asas adalah:-

<html><head><body>

Tag-tag pembuka tersebut perlu diikuti dengan tag-tag penutup seperti di bawah ini:-

<html>.............</html><head>............. </head><body>.............</body>

Tag pembuka dan juga penutup ini adalah penting dalam menentukan kawasan yang akan mempunyai corak paparan tersebut.

Langkah pertama dalam pembinaan laman web adalah :-

1) Buka windows notepad

Terdapat 2 cara yang utama untuk membuka windows notepad, iaitu:-

a) Gunakan “keyboard shortcut”,iaitu, windows logo + R untuk membuka dialog run.Selepas itu, taip notepad atau notepad.exe dalam kotak yang disediakan.

b) Tekan “start menu” dan klik pada “All Programs” dan kemudiannya tujukan kepada Accessories dan klik pada notepad.

Dalam forum pembangunan laman web, teks editor yang asli, iaitu, notepad akan digunakan untuk membina fail html.

Dalam proses permulaan, anda akan didedahkan kepada latar belakang laman web terlebih dahulu.

Berikut merupakan kod-kod html yang perlu dimasukkan dalam notepad:-

<html><head></head>

<title>laman web</title><body>Ini adalah laman web saya </body></html>

Selepas masukkan kod-kod tersbut, pastikan anda menyimpan fail tersebut sebagai index1.html dalam direktori tapak web dan kesannya dapat dilihat dalam internet explorer.

Kod-kod untuk menukar warna latar belakang laman web anda

<html><head></head><title>laman web</title><body bgcolor="lightgreen">Ini adalah laman web saya</body></html>

Selepas masukkan kod –kod tersebut ke dalam notepad, tekan ctrl + S untuk menyimpan fail itu dalam fail.html.

Kod-kod yang lain

Kod yang memasukkan gambar sebagai latar belakang laman web:-

<html><head></head><title>laman web</title><body background="imej.jpg">Ini adalah laman web saya</body></html>

Untuk pengetahuan

Anda boleh merujuk kepada windows picture manager sekiranya anda ingin mengetahui saiz atau file extension untuk sesuatu imej.

Terdapat 6 jenis heading, iaitu:-

a) h 1 (Terbesar)b) h 2c) h 3d) h 4e) h 5

f) h 6 (terkecil)

Terdapat 7 jenis saiz font, iaitu:-

a) 1 (8 pt)b) 2 (10 pt)c) 3 (12 pt)d) 4 (14 pt)e) 5 (18 pt)f) 6 (24 pt)g) 7 (36 pt)

JALINAN LAMAN WEB (HYPERLINK OF WEBSITE)

Jalinan web merupakan salah elemen yang penting dalam pembinaan laman web (website building). Dengan menggunakan elemen yang penting, iaitu, jalinan (hyperlink), pengunjung web boleh bergerak dari suatu laman ke laman yang lain atau melayari bahagian-bahagian lain dalam website tertentu.Pada kebiasaanya, tag yang akan diperlukan untuk jalinan (hyperlink) adalah <a>. Selain itu , terdapat jenis-jenis url yang tertentu. Dua jenis url (uniform resource locator) adalah :-

a) Jenis url (uniform resource locator) yang absolute - merujuk kepada laman web yang lengkap dan biasanya laman web tersebut dimulakan dengan tanda ‘http://’ ( http bermaksud hypertext transfer protocol).

Jalinan Absolute 1) http://www.yahoo.com 2) http://www.mail.yahoo.com 3) http://www.geocities.com 4) http://www.google.com 5) http://www.upm.edu.my 6) http://www.akademik.upm.edu.my 7) http://www.freewebs.com 8) http://www.slideshare.net/ 9) https://twitter.com/ 10) https://www.facebook.com/

b) Jalinan relatif - merujuk keadaan di mana url adalah berdasarkan dari lokasi laman web itu yang tersendiri.

1) ………./imej.gif2) ………./imej.jpg3)………../Ali.html

https://www.facebook.com/

https://twitter.com/

http://www.slideshare.net/

http://www.freewebs.com/

http://www.akademik.upm.edu.my/

http://www.upm.edu.my/

http://www.google.com/

http://www.geocities.com/

http://www.mail.yahoo.com/

http://www.yahoo.com/

Jenis url yang berbentuk reference adalah amat penting bagi proses pemindahan suatu tlaman web dari suatu hos kepada hos yang lain.

Penggunaan tag <a>Perkataan a berasal daripada perkataan inggeris, iaitu, anchor dan tag tersebut diikuti dengan permulaan a ( <a>) dan juga akhiran a (</a>). Jalinan ini hanya akan berfungsi sekiranya perkataan href (hyper reference) disertakan dengan a. Contohnya adalah :-

<a href="http://www.yahoo.com">yahoo</a><a href="http://www.google.com">google</a>

Biasanya, contoh link yang berbentuk reference atau link yang menuju kepada bahagian tertentu dalam web itu sendiri.

Contoh laman web adalah seperti berikut:-

Ini menunjukkan tajuk yang ditafsirkan dalam notepad tadi.

Button form sebagai link

Contoh Code yang digunakan untuk menjadikan button form adalah seperti berikut:-

<form><input type="button" value ="yahoo"Onclick="window.location.href='http://www.yahoo.com'"></form>* value boleh berubah.

Imej sebagai jalinan

Untuk menjadikan gambar sebagai jalinan, anda perlu memasukkan tag <img> di antara tag <a>..............</a>

Contoh kod adalah seperti berikut:-

<a href="http://www.yahoo.com"><img src="imej.jpg"></a>

Jalinan ke lokasi (di dalam laman yang sama.

contoh kodnya adalah seperti berikut:-

kod yang membolehkan laman web tersebut diarahkan ke bawah:-

<input type="button" value="Bottom of the page"Onclick="window.location.href='#bottom'"> Atau

<a href="#bottom">Bottom of the page</a>

Kod yang membolehkan laman web tersebut diarahkan ke atas:

<input type="button" value="Top of page"Onclick="window.location.href='#top'"> Atau

<a href="#top">Top of the page</a>

Jalinan ke dalam perisian email

<html><head></head><title>laman web saya </title><body> <a href="mailto:[email protected]">email saya</a></body></html>

Selain itu, ada juga kod yang menjalankan fungsi jalinan ke dalam perisian email dengan lebih menarik.

<a href="mailto:[email protected]?subject=wishes">email saya</a>

Kod yang lain adalah seperti berikut:-

<a href="mailto:[email protected]?subject=wishes&body=saya merupakan pelajar upm">email saya</a>

Kesannya adalah seperti berikut:-

Selepas itu, anda akan lihat kesannya seperti di bawah ini:-

Sekarang, anda cuba klik pada link berkenaan dan tengok kesannya

Jalinan yang membuka tetingkap pelayar web baru

<html><head></head><title>laman web saya</title><body><a href="http://www.google.com" target="_blank"> google</a></body></html>

Jalinan yang menutup laman web yang dilayari

Kod – kod yang akan digunakan adalah:-

<a href="javascript:window.close()">Close this window</a>

Atau

<input type="button" value="Close this window"Onclick="window.location.href='javascript:window.close()'">

Jalinan yang mencetak laman web tersebut

Kod-kod yang akan digunakan adalah :-

<a href="javascript:window.print()">Print this page</a> Atau

<input type="button" value="Print this page"Onclick="window.location.href='javascript:window.print()'">

Jalinan yang dapat membolehkan pengunjung kembali kepada laman web yang telah dikunjungi

Kod-kod yang akan mengembalikan laman web yang telah dikunjungi adalah:-

<a href="javascript:history.back()">Back</a>

Atau

<input type="button" value="Back"Onclick="window.location.href='javascript:history.back()'">

Jalinan yang dapat “ refresh” laman web yang berkenaan

Kod-kod yang dapat ”refresh” laman web yang berkenaan adalah :-

<a href="javascript:window.location.reload()">Refresh</a>

Atau

<input type="button" value="Refresh this page"Onclick="window.location.href='javascript:window.location.reload()'">

Jalinan yang menarik perhatian pengunjung laman web

<style>

a{text-decoration: none}

a:hover{color:red}

</style>

*kod-kod di atas perlu direkodkan antara <head>.......</head>.

Jalinan-jalinan tersebut akan dimasukkan antara <body>.........</body>

Contoh kod jalinan adalah :-

<a href=”http://www.yahoo.com”>yahoo</a> Atau <a href=”http://www.yahoo.com”>yahoo</a>

Pilihan (“ optional”)

Selain itu, anda juga boleh menggabungkan lebih dari satu features dalam website berkenaan.

contoh skrip yang perlu dimasukkan antara <head>.........</head>

<style>

a{text-decoration: none}

a:hover{color: red; text-decoration:underline;}

</style>

Dan jalinan laman web boleh dimasukkan antara <body>......</body> . Anda boleh membuat perbandingan antara kod-kod berikut, dan cuba melihat kesannya pada paparan internet explorer.

IMEJ ( IMAGE)

Imej merupakan suatu elemen dalam pembangunan laman web dan ianya digunakan untuk menarik perhatian pengunjung laman web yang tertentu.

Kod-kodnya adalah:-

<img src="imej.jpg">

*format image boleh menjadi .gif, .tiff dan sebagainya.

Kesannya pada internet explorer adalah seperti berikut:-

Terdapat beberapa nilai yang boleh diberikan kepada sifat align, iaitu:- left, right,top,bottom, middle, center dan sebagainya.

<center><img src="imej.jpg"></center>

<img src="imej.jpg" align="right">

Sempadan imej

Sifat border ini biasanya akan digunakan apabila sempadan ingin diwujudkan di sekeliling imej tersebut. Nilai untuk sifat border biasanya wjud dalam bentuk piksel (pixel)

<img src="imej.jpg" border="20">

Sempadan lutsinar (sempadan yang tidak kelihatan)

Sifat vspace(vertical space) dan hspace(horizontal space) digunakan untuk meletakkan sempadan lutsinar.Nilai untuk sempadan melintang (vertical space) dan sempadan menegak (horizontal space) biasanya dalam format piksel (pixel).

<imej src="imej.jpg" vspace="20" hspace="20" align="left">Teks di sebelah imej. Teks di sebelah imej.Teks di sebelah imej.teks di sebelah imej

MARQUEE

Marquee merupakan suatu sifat yang dapat dilihat dalam website untuk menarik perhatian pengunjung. Marquee merupakan suatu sifat di mana ianya boleh menyebabkan sesuatu perkataan untuk bergerak.

Secara asasnya,

Kod-kod marquee yang asas adalah :_

<marquee>Ini adalah laman web saya</marquee>

Kesannya dapat dilihat pada paparan Internet Explorer.

Kemudiannya, setting-setting yang boleh dibuat dalam kod-kod tersebut.

Kod-kod yang lain adalah

<marquee onmouseover="stop()" onmouseout="start()">Ini adalah laman web saya </marquee>

Kesannya dapat dilihat pada paparan internet explorer.

Background color juga boleh dimasukkan dalam marquee.

Kod-kodnya adalah :-

<marquee onmouseover="stop()" onmouseout="start()" bgcolor="lightgreen">Ini adalah laman web saya </marquee>

“speed” marquee dapat dikawal melalui settingnya.

<marquee onmouseover="stop()" onmouseout="start()" bgcolor="lightblue" scrollamount="10">Ini adalah laman web saya </marquee>

*Marquee boleh juga digabungkan dengan link dan juga button.

Contoh kod-kodnya adalah:-

<marquee onmouseover="stop()" onmouseout="start()"><a href="http://www.yahoo.com">yahoo</a></marquee>

Atau

<marquee onmouseover="stop()" onmouseout="start()"><input type="button" value="yahoo"Onclick="window.location.href='http://www.yahoo.com'"></marquee>

Textarea

Biasanya, textarea akan digunakan untuk menulis penerangan atau nota untuk rujukan pengunjung. Ciri ini pun penting dan biasanya digunakan oleh “webmaster”.

Kod-kod asas yang digunakan untuk textarea adalah :-

<textarea>……………………………..</textarea>

Kod-kod yang lain adalah <textarea name="….." ROWS="……" COLS="…."></textarea>

“ Bullet”

Kod-kod umum yang digunakan adalah :-

<ul><li>........................................................</li></ul>Untuk memasukkan nombor, gunakan kod-kod di bawah

<ol><li>...................................................... </li></ol> Kod-kod spesifik yang digunakan adalah:-

<ul type="square"><li>................................</li></ul><ul type="circle"><li>..................................</li></ul><ul type="disk"> <li>....................................</li></ul>

Kod-kod spesifik yang digunakan adalah:-

<ol type="A"><li>........................................</li></ol><ol type="I"><li>..........................................</li></ol><ol type="i"><li>...........................................</li></ol>

<ol type="a"><li>...........................................</li></ol>

Kod yang lebih spesifik

<ol start="......."> <li>......................</li> <li>......................</li> <li>.......................</li></ol>

Jadual

Kod untuk jadual adalah:-

<table border="1"><tr> <td> &nbsp</td> <td> &nbsp</td></tr></table>

Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-

Kod 2

<table border="1"> <tr> <td> &nbsp</td> </tr><tr> <td> &nbsp</td></tr></table>

Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini;-

Kod 3

<table border="1"><tr> <td>   &nbsp</td> <td>   &nbsp</td></tr><tr> <td>   &nbsp</td> <td>   &nbsp</td></tr></table>

Kesannya pada paparan internet explorer dapat dilihat seperti di bawah:-

Kod 4

<table border="1"> <tr> <td>   &nbsp</td> <td>   &nbsp</td></tr> <tr> <td colspan=2>   &nbsp</td></tr></table>


Kod 5

<table border="1"><tr> <td>   &nbsp</td> <td>   &nbsp</td> <td>   &nbsp</td>

<td> &nbsp</td></tr><tr> <td> &nbsp</td> <td> &nbsp</td> <td> &nbsp</td> <td> &nbsp</td></tr><tr> <td> &nbsp</td> <td> &nbsp</td> <td> &nbsp</td> <td> &nbsp</td.</tr></table>


Kod 6

<table border="1"><tr> <td> &nbsp</td> <td> &nbsp</td><tr> <td colspan=2> &nbsp</td> <td> &nbsp</td><tr> <td> &nbsp</td> <td> &nbsp</td> <tr> <td> &nbsp</td> <td> &nbsp</td></tr></table> Kesannya pada paparan internet explorer seperti di bawah:-

Kod 7

<table border="1">

<tr> <td> &nbsp</td> <td> &nbsp</td></tr><tr> <td> &nbsp</td> <td> &nbsp</td> <td> &nbsp</td></tr><tr> <td> &nbsp</td></tr></table>

Kesannya dapat dlihat pada paparan internet explorer seperti di bawah ini:-

Kod 8

<table border="1"> <tr> <td> &nbsp</td> <td> &nbsp</td> </tr><tr> <td colspan=2> &nbsp</td></tr><tr> <td> &nbsp</td> <td> &nbsp</td></tr>

</table>

Kesannya dapat dilihat pada paparan internet explorer seperti di bawah ini:-

Kod 9

<table border="1"><tr> <td> &nbsp</td> <td> &nbsp</td></tr><tr> <td colspan=2> &nbsp</td></tr><tr> <td colspan=2> &nbsp</td></tr></table>


Kod 10

<table border="1"> <tr> <td rowspan= 2> &nbsp</td> <td> &nbsp</td></tr><tr> <td> &nbsp</td></tr></table>

Kesannya dapat dilihat pada paparan internet explorer seperi di bawah ini:-

Kod 11

<table border="1"><tr> <td rowspan=2> &nbsp</td> <td> &nbsp</td></tr><tr> <td> &nbsp</td><tr> <td> &nbsp</td> <td> &nbsp</td></tr></table>


Sifat-sifat jadual adalah seperti berikut:-

<table cellspacing=10>..............................</table>

- menunjukkan jarak antara sempadan

<table cellpadding=2>...............................</table>

- menunjukkan jarak antara sempadan dengan isi sel

<table border="1">......................................</table>

-menunjukkan saiz sempadan.

<table bgcolor="lightgreen">.........................</table>

- menunjukkan warna yang diberikan kepada latar belakang jadual.

<table height="200">.....................................</table>

- menunjukkan ketinggian jadual.- menggunakan peratus atau “pixel” sebagai unit pengukuran ketinggian.

<table width="200">……………………….</table>

- menunjukkan kelebaran jadual.- menggunakan peratus atau “pixel” sebagai unit pengukuran ketinggian.

<table align="center">...................................</table><table align="left">.......................................</table><table align="right">………………………..</table>

- menunjukkan kedudukan jadual.

Selain itu, anda juga boleh menggabungkan beberapa sifat secara bersama.Contohnya :-

<table border="1" bgcolor="lightblue" height="200" width="300" align="center">………………………………………..</table>

Penggabungan beberapa elemen seperti imej, link, dan dan juga jadual secara bersama-sama

Contoh kodnya adalah seperti di bawah:-

<table border="1"><tr> <td><img src="imej.gif">&nbsp<a href="http://www.yahoo.com">yahoo</a></td> <td><img src="imej.gif">&nbsp<a href="http://www.google.com">google</a></td></tr></table>

* File extension untuk imej boleh jadi .jpg, .jpeg, .gif, .tiff dan sebagainya.

Kod-kod yang lain adalah seperti:-

<table border=”1” align=”center”><tr> <td><img src=”imej.gif”>&nbsp<a href=”http://www.yahoo.com” title=”yahoo”>yahoo</a></td></tr></table>

Bingkai

Penggunaan bingkai dikenal pasti sebagai suatu cara yang dapat memaparkan 2 atau lebih daripada 3 halaman laman web secara serentak. Caranya adalah untuk mempunyai suatu fail dengan extension html yang berfungsi sebagai suatu fail utama yang akan menetapkan bentuk bingkai yang akan wujud.Fail tersebut kemudiannya akan memanggil fail-fail html yang lain dan akan memasukkan fail-fail tersebut ke dalam bingkai yang telah pun disediakan.

Tujuan utama penggunaan bingkai adalah untuk memudahkan pengguna laman web bergerak dari suatu halaman ke halaman yang lain, tetapi, penggunaan bingkai juga akan membawa kepada keburukan kerana ada beberapa jenis pelayar web yang tidak menyokong penggunaan bingkai tersebut.

Kod-kodnya adalah:-

<html> <head></head><frameset cols="10%,90%"> <frame src="menu.html" name="ruanganmenu"> <frame src="isi.html" name="ruanganisi"></frameset></html>

*simpan file ini sebagai index.html* * Anda boleh menggunakan “keyboard shortcur”, iaitu:, ctrl + S untuk menyimpan file ini sebagai index.htmlKod-kod

<html><head></head><body> Menu

<br><a href="isi.html" target="ruanganisi">muka depan</a><br><a href="isi1.html" target="ruanganisi">isi</a></body></html>

* simpan fail ini sebagai menu.html * Anda juga boleh menggunakan “keyboard shortcut”, iaitu:, Ctrl + S untuk menyimpan fail ini sebagai menu.html.

<html><head></head><title>isi</title><body>Hi, apa khabar kepada semua. Selamat datang ke Universiti Putra Malaysia.

</body></html>

*simpan fail ini sebagai isi.html*Anda juga boleh menggunakan “keyboard shortcut”, iaitu:- ctrl + S untuk menyimpan fail ini sebagai isi.html.

<html><head></head><title>isi1</title><body>Semoga anda semua dapat berjaya mendapat keputusan yang cemerlang dalam semester pertama ini.</body></html>

*simpan fail ini sebagai isi1.html*Anda juga boleh menggunakan “keyboard shortcut”,iaitu:- ctrl + S untuk menyimpan fail ini sebagai isi1.html


Terdapat beberapa jenis bingkai laman web.

Kod-kodnya adalah seperti berikut:-

Kod 1

<html><head></head><frameset cols="10%,90%"> <frame src="menu.html" name="ruanganmenu"><frameset rows="10%,90%"> <frame src="isi2.html" name="ruanganpemberitahuan"> <frame src="isi1.html" name="ruanganisi"></frameset></frameset>

Kod 2

<html><head></head><frameset rows="10%,90%"> <frame src="isi2.html" name="ruanganpemberitahuan"> <frameset cols="10%,90%"> <frame src="menu.html" name="ruanganmenu"> <frame src="isi.html" name="ruanganisi"> </frameset></frameset>

</html>

Sifat-sifat bingkai yang lain adalah :-

<frameset cols="140,*" frameborder="no" border="0" framespacing="0" scrolling=”no”>

...................................................................................................................</frameset>

Penggunaan tag <noframe>

Penggunaan tag <noframe> digunakan untuk membantu pengunjung yang menggunakan pelayar web yang tidak menyokong penggunaan bingkai laman web.

Kod-kodnya adalah :-

<html><head></head><frameset cols="10%,90%"> <frame src="menu.html" name="ruanganmenu"> <frame src="isi.html" name="ruanganisi"></frameset>

<noframe> Maaf! Browser anda tidak menyokong penggunaan bingkai yang diperlukan untuk paparan web ini Anda boleh klik di<a href="isi.htm">sini</a>untuk ke tapak web versi yang tidak akan menggunakan bingkai

</noframe>

</html>

Senarai tag

1) <b>………………..</b>2) <u>…………………</u>3) <blink>……………..</blink>4) <i>..............................</i>5) <sub>...........................</sub>6) <sup>.............................</sup>7) <strong>………………..</strong>

8) <em>……………………</em>9) <cite>…………………….</cite>10) <code>………………….</code>11) <samp>…………………</samp>12) <p align=”left”>…………..</p>13) <p align= “center”>………..</p>14) <p align=”right”>…………..</p>15) <form>………………………</form>16) <embed>……………………</embed>17) <small>……………..</small>18) <var>………………..</var>19) <p align=”justify”>……………..</p>20) <big>..........................</big>21) <font>.........................</font> 22) <a>..............................</a> 23) <marquee>……………..</marquee>24) <strike>…………………</strike>25) <br>……………………..</br>26) <hr>……………………...</hr>27) <h1>……………………...</h1>28) <h2>………………………</h2>29) <h3>………………………</h3>30) <h4>……………………….</h4>31) <h5>……………………….</h5>32) <h6>……………………….</h6>33) <pre>………………………</pre>34) <ul><li>……………………</li></ul>35) <ol><li>……………………</li></ol>36) <kbd>....................................</kbd>37) <tt>........................................</tt>38) <table border=”1”><tr><td>..................</td></tr></table>39) <div>……………………….</div>40) <dl><dd>……………………</dd></dl>41) <multicol >..............................</multicol>42) <address>.................................</address>43) <frameset>...............................</frameset>44) <! -- -- >45) <textarea>……………………</textarea>46) <iframe>……………………...</iframe>47) <DEL>………………………..</DEL>48) <INS>…………………………</INS>49) <layer>………………………...</layer>50) <style>........................................</style>51) <center>......................................</center>52) <ul><li>.......................................</li></ul>53) <ol><li>........................................</li></ol>

54) <table border=” ”><tr><td>......................</td></tr>55) <table>..........................................</table>56) <a>................................................</a>57) <kbd>............................................</kbd>58) <tt>………………………………</tt>59) <nobr>...........................................</nobr>

Maklumat tambahan

Bahagian head juga merangkumi beberapa bahagian, terutamanya, bahagian meta dan juga elemen javascript.

Meta

Kod:

<Meta name="DESCRIPTION" content="This is an html page">

<Meta name="KEYWORDS" content="javascript, web designing, forms">

<Meta name="AUTHOR" content="Thomas">

<Meta name="GENERATOR" content="Macromedia Dreamweaver">

<Meta http-equiv="Refresh" content="5;url=http://www.mail.yahoo.com">

Berikut merupakan laman web yang memberikan ”free web site hosting” , iaitu:-

a) http://www.geocities.com

b) http://www.i8.com

c) http://www.freewebs.com

pembinaan laman web peringkat permulaan

Education