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>
<body bgcolor="lightgreen">
</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>
<body background="imej.jpg">
</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 2
c) h 3
d) h 4
e) 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.gif
2) ………./imej.jpg
3)………../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:vignesgopal@yahoo.com">email saya</a>
</body>
</html>
Selain itu, ada juga kod yang menjalankan fungsi jalinan ke dalam perisian email dengan lebih
menarik.
<a href="mailto:vignesgopal@yahoo.com?subject=wishes">email saya</a>
Kod yang lain adalah seperti berikut:-
<a href="mailto:vignesgopal@yahoo.com?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">
“speed” marquee dapat dikawal melalui settingnya.
<marquee onmouseover="stop()" onmouseout="start()" bgcolor="lightblue" scrollamount="10">
*Marquee boleh juga digabungkan dengan link dan juga button.

Contoh kod-kodnya adalah:-
<a href="http://www.yahoo.com">yahoo</a></marquee>
Atau
<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>   &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>
</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>
</tr>
<tr>
</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.html
Kod-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 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>
</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>
<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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Pembinaan laman web peringkat permulaan

Similar to Pembinaan laman web peringkat permulaan (20)

More from Dr. Vignes Gopal

More from Dr. Vignes Gopal (20)

Recently uploaded

Recently uploaded (20)

Pembinaan laman web peringkat permulaan