Download - 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
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:-
<img src="imej.jpg" height="30" width="30">
<img src="imej.jpg" height="30" width="30" alt="imej saya">
<a href="http://www.google.com"><img src="imej.jpg"></a>
<a href="http://www.google.com"><img src="imej.jpg" border="0"></a>
<a href="http://www.yahoo.com"><img src="imej.jpg" height="30" width="30" border="0" alt="Click here to go to yahoo"></a>
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>  </td> <td>  </td></tr></table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-
Kod 2
<table border="1"> <tr> <td>  </td> </tr><tr> <td>  </td></tr></table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini;-
Kod 3
<table border="1"><tr> <td>  </td> <td>  </td></tr><tr> <td>  </td> <td>  </td></tr></table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah:-
Kod 4
<table border="1"> <tr> <td>  </td> <td>  </td></tr> <tr> <td colspan=2>  </td></tr></table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-
Kod 5
<table border="1"><tr> <td>  </td> <td>  </td> <td>  </td>
<td>  </td></tr><tr> <td>  </td> <td>  </td> <td>  </td> <td>  </td></tr><tr> <td>  </td> <td>  </td> <td>  </td> <td>  </td.</tr></table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-
Kod 6
<table border="1"><tr> <td>  </td> <td>  </td><tr> <td colspan=2>  </td> <td>  </td><tr> <td>  </td> <td>  </td> <tr> <td>  </td> <td>  </td></tr></table> Kesannya pada paparan internet explorer seperti di bawah:-
Kod 7
<table border="1">
<tr> <td>  </td> <td>  </td></tr><tr> <td>  </td> <td>  </td> <td>  </td></tr><tr> <td>  </td></tr></table>
Kesannya dapat dlihat pada paparan internet explorer seperti di bawah ini:-
Kod 8
<table border="1"> <tr> <td>  </td> <td>  </td> </tr><tr> <td colspan=2>  </td></tr><tr> <td>  </td> <td>  </td></tr>
</table>
Kesannya dapat dilihat pada paparan internet explorer seperti di bawah ini:-
Kod 9
<table border="1"><tr> <td>  </td> <td>  </td></tr><tr> <td colspan=2>  </td></tr><tr> <td colspan=2>  </td></tr></table>
Kesannya dapat dilihat pada paparan internet explorer seperti di bawah ini:-
Kod 10
<table border="1"> <tr> <td rowspan= 2>  </td> <td>  </td></tr><tr> <td>  </td></tr></table>
Kesannya dapat dilihat pada paparan internet explorer seperi di bawah ini:-
Kod 11
<table border="1"><tr> <td rowspan=2>  </td> <td>  </td></tr><tr> <td>  </td><tr> <td>  </td> <td>  </td></tr></table>
Kesannya dapat dilihat pada paparan internet explorer seperti di bawah ini:-
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"> <a href="http://www.yahoo.com">yahoo</a></td> <td><img src="imej.gif"> <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”> <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
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-
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